/* Sitewide motion layer: page transitions, headline reveals, cursor, grain, magnetic buttons, portfolio preview */

/* page-to-page transitions (Chrome, Edge, Safari 18+); others just load normally */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out .14s ease-in both}
::view-transition-new(root){animation:vt-in .26s cubic-bezier(.2,.7,.2,1) both}
@keyframes vt-out{to{opacity:0}}
@keyframes vt-in{from{opacity:0;transform:translateY(8px)}}

/* headline words land one at a time */
m-w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.06em;margin-bottom:-.06em}
m-i{display:inline-block;transform:translateY(105%);transition:transform .6s cubic-bezier(.2,.75,.15,1);transition-delay:calc(min(var(--i,0),10) * 28ms)}
.m-in m-i{transform:none}

/* fine film grain over everything, a touch warmer on dark pages */
body::after{content:"";position:fixed;inset:-50%;z-index:9998;pointer-events:none;opacity:.06;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
body[data-theme=paper]::after,body[data-theme=light]::after{opacity:.05;mix-blend-mode:multiply}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}

/* magnetic buttons */
.btn,.hdr nav a.cta,.hdr nav a.cta2{transition:transform .35s cubic-bezier(.2,.7,.2,1),background .2s,color .2s,gap .2s,box-shadow .2s}


@media (prefers-reduced-motion:reduce){
  ::view-transition-old(root),::view-transition-new(root){animation:none}
  m-i{transform:none;transition:none}
  body::after{animation:none}
}

/* tilt cards with a soft light that follows the cursor */
.tilt{transition:transform .5s cubic-bezier(.2,.7,.2,1);transform-style:preserve-3d;will-change:transform;position:relative}
.tilt::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(500px circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.09),transparent 45%);opacity:0;transition:opacity .3s}
.tilt:hover::after{opacity:1}

/* logo bands */
.lg-anim>*{opacity:0;transform:translateY(14px);transition:opacity .6s,transform .7s cubic-bezier(.2,.7,.2,1)}
.lg-anim.lg-in>*{opacity:1;transform:none}
.lg-anim.lg-in>*:nth-child(2){transition-delay:.12s}.lg-anim.lg-in>*:nth-child(3){transition-delay:.24s}.lg-anim.lg-in>*:nth-child(4){transition-delay:.36s}

/* team: monochrome until hovered; cat cards flip */
.mono-hover img{filter:grayscale(1) contrast(1.05);transition:filter .6s,transform .6s cubic-bezier(.2,.7,.2,1)}
.mono-hover:hover img,.mono-hover:focus-within img{filter:none}
@media (hover:none){.mono-hover img{filter:none}}
.flipper{perspective:1400px;cursor:pointer;display:block;-webkit-tap-highlight-color:transparent}
.flipper .flip{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.flipper.flipped .flip{transform:rotateY(180deg)}
.flipper .face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;display:grid;place-items:end center;border-radius:inherit;overflow:hidden}
.flipper .back{transform:rotateY(180deg);background:#C8231B;color:#F5EFE5;place-items:center;align-content:center;text-align:center;gap:12px;padding:28px}
.flipper .back b{font-size:clamp(44px,5vw,80px);line-height:.9;font-weight:500}
.flipper .back .mono{font-size:12px;letter-spacing:.14em;text-transform:uppercase;opacity:.85}
.flipper .back .br{font-family:var(--serif);font-size:20px}
.flipper .back .hk{font-size:15px;line-height:1.45;max-width:24em;opacity:.9;margin-top:6px}
.flipper .back .hint{position:absolute;bottom:18px;left:0;right:0;opacity:.6;font-size:10.5px}
.flipper:focus-visible{outline:2px solid var(--accent);outline-offset:4px}

/* accelerator: brush-fill on the season characters */
.kj.ink{-webkit-text-stroke:1.5px currentColor;-webkit-text-fill-color:transparent;background:linear-gradient(currentColor,currentColor) no-repeat 0 100%/100% 0;-webkit-background-clip:text;background-clip:text;transition:background-size 1.4s cubic-bezier(.6,.05,.3,1) .1s}
.kj.ink.inked{background-size:100% 100%}
@media (max-width:900px){
  .seasons{display:flex!important;overflow-x:auto;scroll-snap-type:x mandatory;gap:0;scrollbar-width:none}
  .seasons::-webkit-scrollbar{display:none}
  .seasons .season{flex:0 0 82%;scroll-snap-align:start;min-height:420px}
}

/* faq search */
.faq-search{display:flex;align-items:end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:12px;padding:20px 0 26px;border-bottom:1px solid var(--line)}
.faq-search label{display:grid;gap:10px;flex:1;min-width:min(100%,420px)}
.faq-search .mono{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.faq-search input{font:400 20px var(--sans);background:transparent;border:0;border-bottom:1.5px solid var(--line2);padding:10px 0 12px;color:var(--fg);border-radius:0;width:100%}
.faq-search input:focus{outline:none;border-bottom-color:var(--accent)}
.faq-empty{padding:30px 0;font-size:18px;color:var(--mute)}
.faq-empty a{color:var(--accent);text-decoration:underline}

/* form progress */
.fprog{position:relative;height:30px;display:flex;align-items:center;margin-top:-8px}
.fprog::before,.fprog .fill{content:"";position:absolute;left:0;right:0;top:0;height:3px;border-radius:3px;background:rgba(23,20,15,.12)}
.fprog .fill{background:#C8231B;transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.fprog span{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:#706A5E;margin-top:12px}
.fprog.done span{color:#C8231B}

@media (prefers-reduced-motion:reduce){.tilt,.flipper .flip,.lg-anim>*,.kj.ink{transition:none!important}.lg-anim>*{opacity:1;transform:none}.kj.ink{background-size:100% 100%}}
.faq .qa[hidden]{display:none}
@media (hover:hover) and (pointer:fine){.flipper .back .hint{display:none}}