/* ALX VIBES — living covers, book, loupe, project-page motion */

.work--fx .work__media a:hover .work__img { transform: none; }
.stack { position: relative; width: 100%; overflow: visible; }
.stack img, .stack .ly { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: grayscale(1); transition: filter .5s; }
.work--fx .work__media a:hover .stack img, .work--fx .work__media a:hover .stack .ly { filter: grayscale(0); }

/* ---------- Stride Sight: the logo assembles — the foot steps down, the bars grow, the name rises ---------- */
.stack.ss .foot { transform-origin: 55% 90%; }
.work--stride-sight .work__media a:hover .ss .foot { animation: ssFoot 1.2s cubic-bezier(.34,1.4,.64,1) both; }
.work--stride-sight .work__media a:hover .ss .bars { animation: ssBars .7s .55s cubic-bezier(.2,.7,.2,1) both; transform-origin: 50% 100%; }
.work--stride-sight .work__media a:hover .ss .text { animation: ssText .8s .85s cubic-bezier(.2,.7,.2,1) both; }
@keyframes ssFoot { 0% { opacity: 0; transform: translateY(-60%) rotate(-25deg) } 55% { opacity: 1; transform: translateY(0) rotate(0) } 70% { opacity: 1; transform: translateY(0) scaleY(.94) rotate(0) } 100% { opacity: 1; transform: none } }
@keyframes ssBars { from { opacity: 0; transform: scaleY(0) } to { opacity: 1; transform: none } }
@keyframes ssText { from { opacity: 0; transform: translateY(24%); letter-spacing: .2em } to { opacity: 1; transform: none } }

/* ---------- Buffer: arrows draw through the letters ---------- */
.work--buffer .work__media a:hover .bf .navy { animation: bfNavy 1.2s cubic-bezier(.65,0,.35,1) both; }
.work--buffer .work__media a:hover .bf .black { animation: bfBlack .9s .25s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes bfNavy { from { clip-path: inset(0 100% 0 0) } to { clip-path: inset(0 0 0 0) } }
@keyframes bfBlack { from { opacity: 0; transform: translateY(-40%) } 60% { opacity: 1; transform: translateY(6%) } to { opacity: 1; transform: none } }

/* ---------- David: the line draws itself ---------- */
.david { width: 100%; max-height: calc(var(--k) * 532); height: auto; display: block; margin-inline: auto; }
.david path { transform-box: fill-box; transform-origin: center; }
/* the drawing never disappears: on hover a pen goes over its lines again, from left to right, and lifts off */
.david .pen, .pj-draw .pen { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); stroke-opacity: 0; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; transform: none; }
.david.drawing .pen, .pj-draw.drawing .pen { animation: penOver 1.5s cubic-bezier(.55,0,.3,1) both; animation-delay: calc(var(--i) / var(--n, 30) * 1.3s); }
@keyframes penOver { 0% { stroke-dashoffset: var(--len); stroke-opacity: 1 } 70% { stroke-dashoffset: 0; stroke-opacity: 1 } 100% { stroke-dashoffset: 0; stroke-opacity: 0 } }
@keyframes inkIn { from { opacity: 0; transform: translateY(6px) scale(.98) } to { opacity: 1; transform: none } }

/* ---------- Pressure Cooker: the magazine opens and leafs through, slowly ---------- */
.book { position: relative; width: min(100%, calc(var(--k) * 420)); aspect-ratio: 1; margin-inline: auto; perspective: 2200px; }
.book .pg { position: absolute; inset: 0; transform-style: preserve-3d; transform-origin: left center; transition: transform 2.4s cubic-bezier(.45,.05,.2,1); }
.book .pg .f, .book .pg .b { position: absolute; inset: 0; backface-visibility: hidden; background: #fff center/cover no-repeat; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.book .pg .b { transform: rotateY(180deg); }
.book .base { position: absolute; inset: 0; background: #fff center/cover no-repeat; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.book .cover { z-index: 4; } .book .p1 { z-index: 3; transition-delay: 1.3s; } .book .p2 { z-index: 2; transition-delay: 2.6s; }
.book .cover .f { filter: grayscale(1); transition: filter .8s; }
.work--pressure-cooker .work__media a:hover .book .cover .f, .book.open .cover .f { filter: grayscale(0); }
.work--pressure-cooker .work__media a:hover .book .pg, .book.open .pg { transform: rotateY(-178deg); }
.work--pressure-cooker .work__media a:not(:hover) .book .p1 { transition-delay: 1.3s; }
.work--pressure-cooker .work__media a:not(:hover) .book .cover { transition-delay: 2.6s; }
.work--pressure-cooker .work__media a:not(:hover) .book .p2 { transition-delay: 0s; }
.book::after { content: ""; position: absolute; left: 2%; right: 2%; bottom: -6%; height: 10%; background: radial-gradient(ellipse at center, rgba(0,0,0,.28), transparent 70%); z-index: 0; }
@media (max-width: 767px) { .book { width: 78%; } }

/* ---------- Loupe ---------- */
.project.loupe-on { cursor: none; }
.loupe { position: absolute; left: 0; top: 0; width: 260px; height: 260px; border-radius: 50%; overflow: hidden; pointer-events: none; z-index: 6; opacity: 0; will-change: transform; transition: opacity .2s; box-shadow: 0 0 0 3px #000, 0 0 0 7px #fff, 0 30px 60px rgba(0,0,0,.35); background: #fff; }
.project.loupe-on .loupe { opacity: 1; }
.loupe svg { position: absolute; left: 0; top: 0; transform-origin: 0 0; max-width: none; }
.loupe::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.35), transparent 45%); }
.loupe-hint { position: absolute; left: 50%; top: calc(4 * 1cqw); z-index: 5; pointer-events: none; display: flex; align-items: center; gap: .6em; font-family: var(--body); font-weight: 600; font-size: clamp(20px, calc(30 / 1920 * 100cqw), 34px); letter-spacing: .06em; text-transform: uppercase; background: #000; color: #fff; padding: .55em 1.3em; border-radius: 999px; box-shadow: 0 14px 40px rgba(0,0,0,.28); opacity: 0; transform: translate(-50%, 16px) scale(.92); transition: opacity .6s, transform .8s cubic-bezier(.34,1.56,.64,1); }
.loupe-hint svg { width: 1.25em; height: 1.25em; flex: none; animation: hintLook 1.8s ease-in-out infinite; }
.loupe-hint.is-in { opacity: 1; transform: translate(-50%, 0); }
.loupe-hint.is-gone { opacity: 0; transform: translate(-50%, -10px) scale(.96); }
@keyframes hintLook { 0%, 100% { transform: translate(0, 0) } 25% { transform: translate(4px, -3px) } 50% { transform: translate(-3px, 3px) } 75% { transform: translate(3px, 2px) } }
body.he .loupe-hint { font-family: "Rubik", sans-serif; font-weight: 700; letter-spacing: 0; }
@media (hover: none) { .project.has-loupe, .project.loupe-on { cursor: auto; } }
@media (max-width: 767px) { .loupe { width: 170px; height: 170px; } .loupe-hint { font-size: 13px; white-space: nowrap; top: 10px; letter-spacing: .03em; } }

/* ---------- UX/UI project pages ---------- */
.project__svg .ux-text .mv, .project__svg .ux-label .mv, .project__svg .ux-swatch .mv, .project__svg .ux-icon .mv, .project__svg .ux-comp .mv, .project__svg .ux-shot .mv, .project__svg .ux-logo image, .project__svg .ux-logo.bf .mv, .project__svg .ux-ff .mv { transform-box: fill-box; transform-origin: center; }
.project__svg .hit { pointer-events: all; }
/* text: a calm slide, no jitter — the hit area stays put while the glyphs move */
.project__svg .ux-text .mv { transition: transform .7s cubic-bezier(.2,.7,.2,1), opacity .5s; }
.project__svg .ux-text:hover .mv, .project__svg .ux-text.hov .mv { transform: translateX(12px); }
/* labels & font samples: rise in, lift on hover */
.project__svg .ux-label .mv { opacity: 0; transform: translateY(18px); transition: transform .8s cubic-bezier(.2,.7,.2,1), opacity .6s; transition-delay: calc(var(--i, 0) * 90ms); }
.project__svg .ux-label.in .mv { opacity: 1; transform: none; }
.project__svg .ux-label.in:hover .mv, .project__svg .ux-label.in.hov .mv { transform: translateY(-5px); transition-delay: 0s; transition-duration: .5s; }
/* swatches */
.project__svg .ux-swatch .mv { opacity: 0; transform: translateY(30px) scale(.96); transition: transform .9s cubic-bezier(.2,.7,.2,1), opacity .6s, filter .5s; transition-delay: calc(var(--i, 0) * 110ms); }
.project__svg .ux-swatch.in .mv { opacity: 1; transform: none; }
.project__svg .ux-swatch.in:hover .mv, .project__svg .ux-swatch.in.hov .mv { transform: translateY(-8px) scale(1.02); filter: drop-shadow(0 18px 22px rgba(0,0,0,.16)); transition-delay: 0s; transition-duration: .5s; }
/* icons: pop in one after another, lift smoothly on hover */
.project__svg .ux-icon .mv { opacity: 0; transform: translateY(22px) scale(.7); transition: transform .7s cubic-bezier(.34,1.3,.64,1), opacity .4s; transition-delay: calc(var(--i, 0) * 60ms); }
.project__svg .ux-icon.in .mv { opacity: 1; transform: none; }
.project__svg .ux-icon.in:hover .mv, .project__svg .ux-icon.in.hov .mv { transform: translateY(-8px) scale(1.12); transition-delay: 0s; transition-duration: .45s; }
/* components */
.project__svg .ux-comp .mv { opacity: 0; transform: translateY(24px); transition: transform .9s cubic-bezier(.2,.7,.2,1), opacity .6s, filter .5s; transition-delay: calc(var(--i, 0) * 120ms); }
.project__svg .ux-comp.in .mv { opacity: 1; transform: none; }
.project__svg .ux-comp.in:hover .mv, .project__svg .ux-comp.in.hov .mv { transform: translateY(-4px) scale(1.025); transition-delay: 0s; transition-duration: .5s; }
/* screens & mockups: slide in, then float forever; mockups also lean towards the cursor */
.project__svg .ux-shot .mv { opacity: 0; transform: translateY(60px); transition: transform 1.1s cubic-bezier(.2,.7,.2,1), opacity .8s; transition-delay: calc(var(--i, 0) * 140ms); }
.project__svg .ux-shot.in .mv { opacity: 1; transform: none; animation: shotFloat 6s ease-in-out calc(1.1s + var(--i, 0) * -1.3s) infinite; }
.project__svg .ux-shot.mock.in .mv { animation: none; transform: translate(var(--px, 0px), var(--py, 0px)); transition: transform .9s cubic-bezier(.2,.7,.2,1), opacity .8s; }
.project__svg .ux-shot.in:hover .mv, .project__svg .ux-shot.in.hov .mv { animation-play-state: paused; }
@keyframes shotFloat { 50% { transform: translateY(-14px) } }
/* Stride Sight logo */
.project__svg .ux-logo.ss image { opacity: 0; }
.project__svg .ux-logo.ss .foot { transform-origin: 55% 90%; }
.project__svg .ux-logo.ss .bars { transform-origin: 50% 100%; }
.project__svg .ux-logo.ss.in .foot { animation: ssFoot 1.2s cubic-bezier(.34,1.4,.64,1) both; }
.project__svg .ux-logo.ss.in .bars { animation: ssBars .7s .55s cubic-bezier(.2,.7,.2,1) both; }
.project__svg .ux-logo.ss.in .text { animation: ssText .8s .85s cubic-bezier(.2,.7,.2,1) both; }
/* Buffer logo */
.project__svg .ux-logo.bf .mv { clip-path: inset(0 100% 0 0); }
.project__svg .ux-logo.bf.in .mv { animation: bfWipe 1.3s cubic-bezier(.65,0,.35,1) forwards; }
@keyframes bfWipe { from { clip-path: inset(0 100% 0 0) } to { clip-path: inset(0 0 0 0) } }
.project__svg .ux-ff .mv { opacity: 0; transform: scale(.5) rotate(-12deg); }
.project__svg .ux-ff.in .mv { animation: ffPop .9s 1s cubic-bezier(.34,1.56,.64,1) forwards; }
@keyframes ffPop { from { opacity: 0; transform: scale(.5) rotate(-12deg) } to { opacity: 1; transform: none } }
/* Ulpan stickers: peel up on hover */
.project__svg .ux-sticker .mv { opacity: 0; transform: translateY(20px) scale(.9); transition: transform .9s cubic-bezier(.34,1.4,.64,1), opacity .5s, filter .5s; transition-delay: calc(var(--i, 0) * 45ms); }
.project__svg .ux-sticker.in .mv { opacity: 1; transform: none; }
.project__svg .ux-sticker.in:hover .mv, .project__svg .ux-sticker.in.hov .mv { transform: translateY(-14px) rotate(-7deg) scale(1.12); transition-delay: 0s; transition-duration: .55s; }
.project__svg .ux-sticker.alt.in:hover .mv, .project__svg .ux-sticker.alt.in.hov .mv { transform: translateY(-14px) rotate(6deg) scale(1.12); }
/* Stride Sight phones */
.ss-live { overflow: visible; }
.ss-live .arc { stroke-dashoffset: 87; transition: stroke-dashoffset 1.6s cubic-bezier(.2,.7,.2,1); }
.ss-phones.in .ss-live .arc { stroke-dashoffset: 0; transition-delay: 1s; }
.ss-phones:hover .ss-live .arc, .ss-phones.hov .ss-live .arc { animation: ringFill 1.8s cubic-bezier(.2,.7,.2,1); }
@keyframes ringFill { from { stroke-dashoffset: 87 } to { stroke-dashoffset: 0 } }
.ss-live .scale { transform-box: view-box; transform-origin: 970px 490px; transition: transform .8s cubic-bezier(.34,1.56,.64,1); }
.ss-phones:hover .ss-live .scale, .ss-phones.hov .ss-live .scale { animation: swing2 2.4s ease-in-out infinite; }
@keyframes swing2 { 0%,100% { transform: rotate(0) } 25% { transform: rotate(-3.5deg) } 75% { transform: rotate(3.5deg) } }
@media (prefers-reduced-motion: reduce) { .project__svg .mv, .project__svg .ux-logo image { opacity: 1 !important; transform: none !important; animation: none !important; clip-path: none !important; } }