/* Motion layer. Everything here is decoration: it is switched off for prefers-reduced-motion. */

/* ---------- intro curtain ---------- */
.curtain{position:fixed;inset:0;z-index:200;display:none;place-items:center;background:#0a0a0a;pointer-events:none;clip-path:inset(0 0 0 0)}
.intro .curtain{display:grid;animation:curtainOut .9s cubic-bezier(.76,0,.24,1) 1.15s forwards,curtainGone 0s 4s forwards}
.curtain__word{position:relative;font:700 clamp(90px,24vw,320px)/.8 var(--f-d);letter-spacing:.005em;text-transform:uppercase;color:#ffffff14;overflow:hidden}
.curtain__word i{position:absolute;inset:0;font-style:normal;color:var(--red);clip-path:inset(0 100% 0 0);animation:curtainFill 1s cubic-bezier(.6,0,.2,1) .1s forwards}
.curtain__n{position:absolute;right:max(24px,4vw);bottom:max(20px,4vh);font:700 clamp(28px,4vw,56px) var(--f-d);color:var(--ink);font-variant-numeric:tabular-nums}
@keyframes curtainFill{to{clip-path:inset(0 0 0 0)}}
@keyframes curtainOut{to{clip-path:inset(0 0 100% 0)}}
@keyframes curtainGone{to{visibility:hidden}}

/* hero waits for the curtain, then plays */
.intro .hero__word span,.intro .hero__copy>*:not(.hero__title),.intro .hero .card,.intro .sticker,.intro .sound{animation-play-state:paused!important}
.hero__word span{opacity:1;transform:none;animation:letterIn 1s var(--ease) backwards;transition:transform .35s var(--ease),color .25s}
@keyframes letterIn{from{opacity:0;transform:translateY(70%) rotate(6deg);filter:blur(10px)}}
.hero__word span:not(.sr):hover{transform:translateY(-10px) rotate(-2deg);color:#fff}
.hero__copy>*:not(.hero__title){animation:fadeUp .9s var(--ease) backwards;animation-delay:calc(var(--k,1)*90ms + 500ms)}
.hero__copy>:nth-child(1){--k:0}.hero__copy>:nth-child(3){--k:2}.hero__copy>:nth-child(4){--k:3}.hero__copy>:nth-child(5){--k:4}
@keyframes fadeUp{from{opacity:0;transform:translateY(28px)}}
.hero .card{animation:cardIn 1.3s cubic-bezier(.2,1.15,.3,1) backwards}
.hero .card--a{animation-delay:.35s}.hero .card--b{animation-delay:.2s}.hero .card--c{animation-delay:.5s}
@keyframes cardIn{from{opacity:0;transform:translateY(120px) scale(.86) rotate(0deg)}}
.hero .sticker{animation:pop .8s cubic-bezier(.2,1.5,.4,1) backwards,wob 6s ease-in-out 1.6s infinite}
.hero .sticker--1{animation-delay:.9s,1.7s}.hero .sticker--2{animation:pop .8s cubic-bezier(.2,1.5,.4,1) 1.1s backwards,wob2 6s ease-in-out 1.9s infinite}
@keyframes pop{from{opacity:0;transform:scale(.2) rotate(-40deg)}}
.hero .sound{animation:fadeUp .8s var(--ease) 1.3s backwards}
/* slow breathing on the portraits */
.card img,.card video{animation:breathe 16s ease-in-out infinite alternate;transform-origin:50% 35%}
@keyframes breathe{from{transform:scale(1.02)}to{transform:scale(1.1) translateY(-1.5%)}}

/* ---------- scroll progress ---------- */
.progress{position:fixed;left:0;top:0;right:0;height:3px;z-index:120;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--red2),var(--red),var(--red3));pointer-events:none}

/* ---------- headline mask reveal ---------- */
.js .h2.hsplit .w{display:inline-block;overflow:hidden;vertical-align:top;padding:.14em .03em .08em;margin:-.14em -.03em -.08em}
.js .h2.hsplit .wi{display:inline-block;transform:translateY(115%) rotate(5deg);transform-origin:0 100%;transition:transform 1s var(--ease);transition-delay:calc(var(--i,0)*70ms)}
.js .h2.hsplit.in .wi{transform:none}
.js .h2.hsplit.rv{opacity:1;transform:none}

/* ---------- case cards: clip reveal + tilt + glare ---------- */
.js .case:not(.in) figure img{clip-path:inset(100% 0 0 0);transform:scale(1.3)}
.case figure img{transition:clip-path 1.2s cubic-bezier(.7,0,.2,1),transform 1.4s var(--ease)}
.js .case.in figure img{clip-path:inset(0 0 0 0)}
.tilt{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--ty,0px));transition:transform .5s var(--ease),border-color .3s,box-shadow .4s;will-change:transform}
.tilt.is-on{transition:transform .08s linear,border-color .3s,box-shadow .4s}
.case__link.tilt:hover{--ty:-8px}
.plan.tilt:hover{--ty:-6px}
.tilt::before{content:"";position:absolute;inset:0;z-index:3;border-radius:inherit;background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),#ffffff26,transparent 45%);opacity:0;transition:opacity .35s;pointer-events:none}
.tilt:hover::before{opacity:1}
.plan{position:relative}

/* ---------- buttons: shine ---------- */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn::before{content:"";position:absolute;inset:-20% auto -20% -60%;width:40%;background:linear-gradient(100deg,transparent,#ffffff66,transparent);transform:skewX(-20deg);transition:transform .8s var(--ease),opacity .3s;opacity:0;z-index:-1}
.btn:hover::before{transform:translateX(420%) skewX(-20deg);opacity:1}
.btn--ghost::before{background:linear-gradient(100deg,transparent,#ffffff2a,transparent)}

/* ---------- photo wall ---------- */
.wall{cursor:grab}
.wall img{-webkit-user-drag:none;user-select:none;-webkit-user-select:none}
.wall.is-drag{cursor:grabbing;scroll-snap-type:none}
.wall.is-drag *{user-select:none}
.wall__track{will-change:transform;transform:skewX(var(--sk,0deg));transition:transform .3s ease-out}
.wall__i{filter:saturate(calc(.45 + var(--c,1)*.55)) brightness(calc(.7 + var(--c,1)*.3))}
.wall__i img{transform:translateX(var(--px,0px)) scale(1.22);will-change:transform}
.wall__i:hover{filter:none}

/* ---------- ring cursor ---------- */
.ring{position:fixed;left:0;top:0;z-index:150;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;border:1.5px solid #ffffffaa;pointer-events:none;opacity:0;display:grid;place-items:center;mix-blend-mode:difference;transition:opacity .3s,width .35s var(--ease),height .35s var(--ease),margin .35s var(--ease),background .3s,border-color .3s;will-change:transform}
.ring.on{opacity:1}
.ring.is-link{width:70px;height:70px;margin:-35px 0 0 -35px;background:#ffffff22}
.ring.is-play,.ring.is-drag{width:96px;height:96px;margin:-48px 0 0 -48px;background:#fff;border-color:#fff}
.ring span{font:700 14px var(--f-d);letter-spacing:.1em;color:#000;opacity:0;transition:opacity .2s}
.ring.is-play span,.ring.is-drag span{opacity:1}

/* ---------- footer wordmark ---------- */
.foot{position:relative;overflow:hidden}
.foot__big{font:700 clamp(120px,31vw,520px)/.78 var(--f-d);text-transform:uppercase;text-align:center;color:transparent;-webkit-text-stroke:1.5px #ffffff22;margin:40px 0 -2vw;user-select:none;pointer-events:none;transform:translateY(var(--fy,30%));background:linear-gradient(180deg,#ff1f3d55,transparent 70%);-webkit-background-clip:text;background-clip:text;white-space:nowrap}

@media (hover:none){.ring{display:none}.wall{cursor:auto}}
@media (prefers-reduced-motion:reduce){
  .curtain,.progress,.ring{display:none!important}
  .card img,.card video{animation:none}
  .js .h2.hsplit .wi{transform:none;transition:none}
  .js .case:not(.in) figure img{clip-path:none;transform:none}
  .tilt{transform:none!important}
}