/* ============================================================
   WONDERWORKERS — ported scroll animations (from the original
   single-page site). Loaded only on pages that use them.
   ============================================================ */

/* reversible slide-ins + spin-shrink exits */
.slidein{will-change:transform,opacity}
[data-anim="left"]{transform:translateX(-200vw)}
[data-anim="right"]{transform:translateX(200vw)}
[data-anim].in{transform:translateX(0);transition:transform 1.2s cubic-bezier(.34,1.42,.5,1)}
[data-exit]{will-change:transform,opacity}
.about-index{font-family:var(--serif);font-size:clamp(3.5rem,9vw,8rem);line-height:1;color:var(--tan);opacity:.55;display:inline-block;margin-bottom:3vh;transform-origin:50% 50%;will-change:transform,opacity}
@media(prefers-reduced-motion:reduce){[data-anim]{transform:none!important}}

/* ---------- CASES (sticky stack) ---------- */
#cases{background:var(--teal-deep);color:var(--cream);padding:16vh 0 0;position:relative;overflow:hidden}
.cases-bg{position:sticky;top:0;height:0;display:flex;justify-content:center;pointer-events:none;z-index:0}
.cases-bg span{font-family:var(--display);font-weight:normal;font-size:min(34vw,30rem);color:rgba(255,255,255,.05);white-space:nowrap;margin-top:32vh;letter-spacing:-.03em}
.cases-head{position:sticky;top:6vh;z-index:60;mix-blend-mode:difference;pointer-events:none}
.cases-head h2{font-size:clamp(2.4rem,7vw,6rem);color:#fff}
.cases-head .eyebrow{color:#fff;margin-bottom:1rem}
.case-slot{height:105vh;display:flex;align-items:flex-start;position:relative}
.case-card{position:sticky;top:16vh;width:100%;background:var(--cream);color:var(--ink);border-radius:14px;overflow:hidden;display:grid;grid-template-columns:1.05fr 1fr;min-height:64vh;box-shadow:0 40px 90px rgba(0,0,0,.4);transform-origin:50% 100%;will-change:transform}
.case-card:nth-child(odd){grid-template-columns:1fr 1.05fr}
.case-card:nth-child(odd) .cc-media{order:2}
.cc-media{overflow:hidden;position:relative}
.cc-media img{width:100%;height:100%;object-fit:cover;will-change:transform}
.cc-body{padding:clamp(2rem,4vw,4rem);display:flex;flex-direction:column;justify-content:center;gap:1.4rem}
.cc-tag{font-size:.7rem;letter-spacing:.28em;text-transform:uppercase;color:var(--rust);font-weight:600}
.cc-body h3{font-size:clamp(1.8rem,3.4vw,3rem)}
.cc-body blockquote{font-family:var(--serif);font-style:italic;font-size:1.3rem;line-height:1.35;color:var(--teal)}
.cc-meta{font-size:.9rem;color:var(--ink-soft);letter-spacing:.02em}
.cases-tail{height:30vh}
@media(max-width:820px){
  .case-slot{height:auto;margin-bottom:8vh}
  .case-card{position:relative;top:0;grid-template-columns:1fr;min-height:auto}
  .case-card:nth-child(odd) .cc-media{order:0}
  .cc-media{height:38vh}
}

/* ---------- SET PIECE (zoom-through) ---------- */
#setpiece{height:650vh;background:var(--teal);position:relative}
.sp-sticky{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;align-items:center;justify-content:center}
.sp-fling{position:absolute;top:12vh;width:100%;text-align:center;z-index:6;font-size:clamp(2rem,6vw,5rem);color:var(--teal-deep);will-change:transform}
.sp-cut{position:absolute;inset:0;width:100%;height:100%;z-index:5;will-change:opacity}
#cutText{fill:#000;font-family:var(--display);font-weight:normal;font-size:300px;letter-spacing:0;transform-box:fill-box;transform-origin:center;will-change:transform}
.sp-notes{position:absolute;inset:0;z-index:7;pointer-events:none}
.sp-item{position:absolute;left:50%;transform:translateX(-50%);display:flex;align-items:flex-start;gap:1.4rem}
.sp-item:nth-child(1){top:8vh;margin-left:14vw}
.sp-item:nth-child(2){top:31vh;margin-left:-14vw}
.sp-item:nth-child(3){top:49vh;margin-left:16vw}
.sp-item:nth-child(4){top:66vh;margin-left:-12vw}
.sp-note,.sp-photo{will-change:transform}
.sp-note{width:min(62vw,270px);aspect-ratio:1/.92;padding:1.5rem 1.5rem 1.2rem;font-family:var(--sans);color:var(--ink);border-radius:2px;box-shadow:0 14px 28px rgba(0,0,0,.35),0 3px 6px rgba(0,0,0,.2);position:relative;transform:translateX(130vw)}
.sp-note b{font-family:var(--serif);font-size:1.45rem;display:block;margin-bottom:.5rem;line-height:1.1}
.sp-note::before{content:"";display:block;margin:-1.5rem -1.5rem 1rem;height:14px;background:rgba(255,255,255,.28)}
.sp-note::after{content:"";position:absolute;right:0;bottom:0;width:0;height:0;border-style:solid;border-width:0 0 26px 26px;border-color:transparent transparent rgba(0,0,0,.14) transparent}
.sp-item:nth-child(1) .sp-note{background:#F7D65A}
.sp-item:nth-child(2) .sp-note{background:#EFB8C8}
.sp-item:nth-child(3) .sp-note{background:#A8D5BA}
.sp-item:nth-child(4) .sp-note{background:#F2A65A}
.sp-photo{background:#FDFBF6;padding:9px 9px 30px;border-radius:1px;flex:none;box-shadow:0 16px 32px rgba(0,0,0,.4),0 4px 8px rgba(0,0,0,.22);position:relative;transform:translateY(-60vh) scale(1.6);opacity:0}
.sp-photo img{display:block;width:min(34vw,168px);aspect-ratio:1/1.05;object-fit:cover}
.sp-photo::before{content:"";position:absolute;top:-9px;left:50%;width:64px;height:20px;transform:translateX(-50%) rotate(-2deg);background:rgba(243,235,221,.55);box-shadow:0 1px 3px rgba(0,0,0,.15)}
@media(max-width:820px){
  .sp-item{gap:.9rem}
  .sp-item:nth-child(1),.sp-item:nth-child(2),.sp-item:nth-child(3),.sp-item:nth-child(4){margin-left:0}
  .sp-photo img{width:26vw}
  .sp-note{width:56vw;aspect-ratio:auto}
}
@media(max-height:820px){
  .sp-item:nth-child(1){top:7vh}.sp-item:nth-child(2){top:29vh}
  .sp-item:nth-child(3){top:47vh}.sp-item:nth-child(4){top:64vh}
  .sp-photo img{width:min(24vw,128px)}
  .sp-note{width:min(52vw,230px);font-size:.88rem}
  .sp-note b{font-size:1.15rem}
}

/* ---------- ROSTER (3D carousel) ---------- */
.carousel{position:relative;height:64vh;perspective:1600px}
.track{position:relative;width:100%;height:100%;transform-style:preserve-3d}
.slide{position:absolute;top:0;left:50%;width:min(80vw,420px);height:100%;margin-left:calc(min(80vw,420px)/-2);border-radius:12px;overflow:hidden;cursor:pointer;box-shadow:0 30px 70px rgba(0,0,0,.28);transition:transform .7s cubic-bezier(.5,0,.2,1),opacity .7s,filter .7s;will-change:transform,opacity;background:var(--teal-deep)}
.slide img{width:100%;height:100%;object-fit:cover}
.slide .name{position:absolute;left:0;right:0;bottom:0;padding:1.6rem;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.75))}
.slide .name b{font-family:var(--serif);font-size:1.7rem;display:block}
.slide .name span{font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;opacity:.8}
.slide.future{display:flex;align-items:center;justify-content:center;text-align:center;color:var(--tan)}
.slide.future .ph{padding:2rem}
.slide.future .ph b{font-family:var(--serif);font-size:1.5rem;color:var(--cream);display:block;margin-bottom:.6rem}
.car-btns{display:flex;gap:1rem;justify-content:center;margin-top:5vh}
.car-btns button{width:56px;height:56px;border-radius:50%;border:1.5px solid var(--ink);background:transparent;color:var(--ink);cursor:pointer;font-size:1.2rem;transition:background .35s,color .35s,transform .35s}
.car-btns button:hover{background:var(--ink);color:var(--cream);transform:scale(1.06)}
.dots{display:flex;gap:.6rem;justify-content:center;margin-top:2.4rem}
.dots i{width:8px;height:8px;border-radius:50%;background:var(--tan);opacity:.4;transition:.35s;cursor:pointer}
.dots i.on{opacity:1;transform:scale(1.7)}

/* ---------- COLOUR MORPH ---------- */
#morph{padding:26vh 0;position:relative;overflow:hidden;background:var(--teal)}
#morph .circle{position:absolute;border-radius:50%;background:var(--tan);will-change:background,transform;z-index:0}
#morph .c1{width:32vw;height:32vw;top:-6vw;left:-8vw}
#morph .c2{width:20vw;height:20vw;bottom:-4vw;right:6vw}
#morph .c3{width:12vw;height:12vw;top:30%;right:30%}
#morph .inner{position:relative;z-index:2;text-align:center}
#morph h2{font-size:clamp(2.6rem,8vw,7rem);max-width:16ch;margin:0 auto;color:var(--ink)}
#morph .stats{margin-top:8vh}
#morph .stat b{color:var(--teal-deep)}

/* reduced-motion fallback: the set piece is JS-driven, so lay it out statically */
@media(prefers-reduced-motion:reduce){
  #setpiece{height:auto;padding:12vh 0}
  .sp-sticky{position:static;height:auto;display:block}
  .sp-cut,.sp-fling{display:none}
  .sp-notes{position:static}
  .sp-item{position:static;transform:none;margin:0 auto 3vh!important;justify-content:center;max-width:640px}
  .sp-note{transform:none}
  .sp-photo{transform:none;opacity:1}
  #cases .case-card{transform:none!important}
}

/* hover tilt utility */
.tilt{transition:transform .5s cubic-bezier(.34,1.56,.64,1)}
.tilt:hover{transform:translateY(-10%) rotate(5deg)}