/* v11 motion. Entrance effects are gated by html.motion, which is only set when the visitor
   has not asked for reduced motion. Carousels and the mascot render for everyone. */
:root{--m-out:cubic-bezier(.16,1,.3,1);--m-fast:160ms;--m-ui:400ms;--m-hero:900ms}
.m-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- Kinetic headline ---------- */
.h1-swap{display:inline-grid;max-width:100%;vertical-align:bottom;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.h1-swap>.k-word{grid-area:1/1;white-space:nowrap}
@media(max-width:380px){.h1-swap>.k-word{white-space:normal}}
.h1-swap>.k-word.is-cycling{color:var(--blue)}
.k-word{transition:transform var(--m-ui) var(--m-out),opacity var(--m-ui) var(--m-out),color var(--m-ui) ease-out}
.k-word.is-below{transform:translateY(100%);opacity:0}
.k-word.is-above{transform:translateY(-100%);opacity:0;transition-duration:280ms}

@keyframes m-rise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes m-fade{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
html.motion .intro>.eyebrow{animation:m-fade var(--m-ui) var(--m-out) both}
html.motion .personal-name{animation:m-rise var(--m-hero) var(--m-out) 100ms both}
html.motion .h1-line{display:inline-block;animation:m-rise var(--m-hero) var(--m-out) 320ms both}
html.motion .h1-swap{animation:m-fade var(--m-ui) var(--m-out) 2s both}
html.motion .h1-swap.is-live{animation:none}
html.motion .intro-copy{animation:m-fade var(--m-ui) var(--m-out) 900ms both}
html.motion .work-index{animation:m-fade var(--m-ui) var(--m-out) 1100ms both}

/* ---------- Deck-deal: every image group ---------- */
.deal-pending{opacity:0}
.is-dealing{transition:opacity var(--m-ui) var(--m-out),transform var(--deal-ms,800ms) var(--m-out);will-change:transform}
.deal-pending>:not(.image-open),.is-dealing>:not(.image-open){opacity:0}
.is-settled>:not(.image-open){transition:opacity var(--m-ui) ease-out}
.is-dealing .image-open{box-shadow:0 24px 50px -24px rgba(0,0,0,.9)}

@media(hover:hover){
  html.motion :is(.hero-strip,#ad-grid,.variation-grid,.pair,.photo-grid,.beauty-grid,.concept-grid) .image-open{transition:transform var(--m-fast) ease-out,box-shadow var(--m-fast) ease-out}
  html.motion :is(.hero-strip,#ad-grid,.variation-grid,.pair,.photo-grid,.beauty-grid,.concept-grid) .image-open:hover{transform:translateY(-6px);box-shadow:0 18px 40px -18px rgba(0,0,0,.85)}
}

/* ---------- Video swipe carousels ---------- */
.video-grid.v-track{display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:calc((100% - 72px)/3.35);gap:24px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;padding:4px 2px 20px;scrollbar-width:thin;scrollbar-color:var(--blue) transparent}
.v-track>article{scroll-snap-align:start;min-width:0}
.v-track:focus-visible{outline:2px solid var(--blue);outline-offset:6px;border-radius:12px}
.v-track::-webkit-scrollbar{height:6px}
.v-track::-webkit-scrollbar-thumb{background:var(--blue);border-radius:6px}
.v-controls{display:flex;justify-content:flex-end;gap:12px;margin:0 0 16px}
.v-controls[hidden]{display:none}
.v-arrow{width:48px;height:48px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--ink);font-size:20px;cursor:pointer;transition:background var(--m-fast) ease-out,color var(--m-fast) ease-out,border-color var(--m-fast) ease-out}
.v-arrow:hover:not(:disabled){background:var(--blue);color:#132018;border-color:var(--blue)}
.v-arrow:disabled{opacity:.35;cursor:default}
.v-arrow:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
@media(max-width:1000px){.video-grid.v-track{grid-auto-columns:calc((100% - 32px)/2.3);gap:16px}}
@media(max-width:560px){.video-grid.v-track{grid-auto-columns:78%;gap:16px}}

@keyframes v-slide{from{opacity:0;transform:translateX(72px)}to{opacity:1;transform:none}}
.v-pending>article{opacity:0}
.v-track>article.v-in{animation:v-slide 520ms var(--m-out) var(--v-delay,0ms) both}

/* ---------- Studio mascot ---------- */
.mascot-stage{position:relative;height:210px;overflow:hidden;margin:-24px 0 24px}
.mascot-stage--footer{height:190px;margin:-24px 0 0}
.mascot{--c:var(--blue);--look-x:0px;--look-y:0px;position:absolute;bottom:4px;left:62%;width:120px}
.mascot-stage--footer .mascot{left:auto;right:12%}
.mascot-svg{display:block;width:100%;height:auto;overflow:visible}
.m-ink{--c:#16251b}
.m-card{position:relative;left:auto;bottom:auto;width:150px}
.m-s{fill:none;stroke:var(--c);stroke-width:24;stroke-linecap:round}
.m-limb{fill:none;stroke:var(--c);stroke-width:7;stroke-linecap:round}
.m-dot{fill:var(--c)}
.m-sclera{fill:#fff}
.m-ink .m-sclera{fill:#f4f8f5}
.m-pupil{fill:#111212;transform:translate(var(--look-x),var(--look-y));transition:transform 120ms ease-out}
.m-eyes,.m-body,.m-dot,.m-limb{transform-box:fill-box}
.m-eyes{transform-origin:center;transition:transform 120ms ease-out}
.is-blinking .m-eyes{transform:scaleY(.12)}
.m-leg-l,.m-leg-r{transform-origin:50% 0}
.m-arm-r{transform-origin:0% 100%}
.m-arm-l{transform-origin:100% 0%}
.m-dot{transform-origin:50% 100%}

.m-bubble{position:absolute;right:calc(100% + 4px);top:6px;margin:0;padding:10px 14px;border-radius:16px 16px 4px 16px;background:var(--ink);color:#132018;font:normal 700 14px/1.3 Arial,Helvetica,sans-serif;letter-spacing:0;white-space:nowrap;opacity:0;transform:translateY(6px) scale(.9);transform-origin:100% 100%;transition:opacity 280ms var(--m-out),transform 280ms var(--m-out)}
.m-ink .m-bubble{background:#16251b;color:#d2e4d6}
.m-card .m-bubble{left:calc(100% + 4px);right:auto;border-radius:16px 16px 16px 4px;transform-origin:0 100%}
.is-talking .m-bubble{opacity:1;transform:none}

/* Walk: legs swing, body bobs. Only ever applied for the length of the walk. */
@keyframes m-leg{from{transform:rotate(-16deg)}to{transform:rotate(16deg)}}
@keyframes m-bob{from{transform:translateY(0)}to{transform:translateY(-4px)}}
.is-walking .m-leg-l{animation:m-leg 280ms ease-in-out infinite alternate}
.is-walking .m-leg-r{animation:m-leg 280ms ease-in-out infinite alternate-reverse}
.is-walking .m-body,.is-walking .m-dot{animation:m-bob 140ms ease-in-out infinite alternate}
/* Arrival: wave three times, the dot hops once */
@keyframes m-wave{0%,100%{transform:rotate(0)}50%{transform:rotate(-34deg)}}
@keyframes m-hop{0%,100%{transform:none}35%{transform:translateY(-22px) scaleY(1.1)}70%{transform:translateY(0) scaleY(.8)}}
.is-waving .m-arm-r{animation:m-wave 280ms ease-in-out 3}
.is-hopping .m-dot{animation:m-hop 520ms var(--m-out) 1}
.is-parked{visibility:hidden}
.is-hidden{opacity:0}
@keyframes m-pop{from{opacity:0;transform:translateY(30px) scale(.9)}to{opacity:1;transform:none}}
.is-rising{animation:m-pop 520ms var(--m-out) both}

@media(max-width:800px){
  .mascot{width:96px;left:auto;right:8px}
  .mascot-stage--footer .mascot{right:8px}
  .m-card{width:120px;right:auto}
  .mascot-stage{height:180px}
}
@media(max-width:380px){.m-bubble{white-space:normal;width:140px}}


/* ---------- Static AI-icon backdrop (no motion) ---------- */
.has-backdrop{position:relative;isolation:isolate}
.ai-backdrop{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none;border-radius:inherit}
.ai-icon{position:absolute;height:auto;fill:none;stroke:var(--blue);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;opacity:.13}
.ai-icon .fill,.ai-art .fill{fill:var(--blue);stroke:none}
.ai-art{position:absolute;height:auto;fill:none;stroke:var(--blue);stroke-width:1.4px;stroke-linecap:round;stroke-linejoin:round;opacity:.07}
.ai-art *{vector-effect:non-scaling-stroke}
.ai-art .fill{opacity:.6}
@media(max-width:800px){.ai-icon{opacity:.1}.ai-art{opacity:.06}}

/* ---------- Studio margin notes ---------- */
.studio-note{display:flex;align-items:flex-end;justify-content:flex-end;gap:4px;margin:-8px 0 32px}
.studio-thought{position:relative;margin:0 0 44px;max-width:280px;padding:10px 16px;border:1px solid var(--line);border-radius:18px;background:var(--surface);color:var(--ink);font:italic 15px/1.4 Georgia,serif}
.studio-thought::before,.studio-thought::after{content:"";position:absolute;border:1px solid var(--line);background:var(--surface);border-radius:50%}
.studio-thought::before{width:10px;height:10px;right:-6px;bottom:-12px}
.studio-thought::after{width:6px;height:6px;right:-16px;bottom:-22px}
.m-mini{position:relative;left:auto;right:auto;bottom:auto;width:58px;flex:none}
.intro .studio-note{margin:-24px 0 24px}
.studio-note{overflow-x:clip}
/* The thought appears only once Studio has arrived */
.studio-thought{opacity:0;transform:translateY(6px) scale(.96);transform-origin:100% 100%;transition:opacity 280ms var(--m-out),transform 280ms var(--m-out)}
.studio-note.is-talking .studio-thought{opacity:1;transform:none}
/* Entrances: walk (left/right) reuses .is-walking; drop from above; pop up from below */
.is-falling .m-arm-l{transform:rotate(40deg)}
.is-falling .m-arm-r{transform:rotate(-40deg)}
.is-falling .m-leg-l{transform:rotate(12deg)}
.is-falling .m-leg-r{transform:rotate(-12deg)}
@keyframes m-land{0%{transform:scale(1.08,.84)}60%{transform:scale(.96,1.05)}100%{transform:none}}
.is-landing .mascot-svg{transform-origin:50% 100%;animation:m-land 280ms var(--m-out)}
.is-emerging{clip-path:inset(-300px -300px 0 -300px)}
@media(max-width:560px){.studio-note{margin:0 0 24px}.studio-thought{font-size:14px}.m-mini{width:48px}}

@media(prefers-reduced-motion:reduce){
  html *{animation:none!important;transition:none!important}
  .deal-pending,.v-pending>article,.is-parked,.is-hidden{opacity:1!important;visibility:visible!important}
  /* Gentler, not none: the thoughts still fade in */
  html .studio-note .studio-thought{transform:none!important;transition:opacity 400ms ease-out!important}
}