/* Independent illustration and live-text planes in the opening view. */
.hero{padding-top:64px;padding-bottom:82px;text-align:left}
.hero-grid{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:42px;min-height:580px;align-items:center}
.hero-intro{max-width:none;margin:0;text-align:left}
.hero .eyebrow,.hero-actions,.hero-meta{justify-content:flex-start}
.hero h1{font-size:clamp(54px,4.8vw,70px);line-height:1.07}
.hero .hero-copy{margin-inline:0;max-width:520px}
.hero-meta{margin:23px 0 0;gap:20px}
.hero-art.hero-depth{--person-depth:95px;--chair-depth:48px;--label-depth:120px;aspect-ratio:1672/941;max-height:none;width:100%;margin:0;border:1px solid #655279;border-radius:18px;isolation:auto;overflow:visible}
.hero-art.hero-depth>picture{border-radius:inherit;transform:translateZ(0);z-index:0}
.hero-art.hero-depth>picture img{object-fit:contain}
.hero-art.hero-depth{--screen-depth:64px;--screen-drift:7px}
.hero-depth .hero-screen-float{position:absolute;left:17%;top:-13%;width:42%;aspect-ratio:16/9;display:block;pointer-events:none;z-index:2;transform-style:preserve-3d;transform:translateZ(var(--screen-depth));opacity:0}
.hero-depth .hero-screen-ready{opacity:1}
/* Project the angled artwork within one flat pane. Its tilted edges never
   extend through the workspace or the other independent scene planes. */
.hero-depth .hero-screen-motion{display:block;width:100%;height:100%;transform-style:flat;transform-origin:center}
.hero-depth .hero-screen-plane{display:block;width:100%;height:100%;overflow:hidden;border:1px solid #ddc7ffb3;border-radius:5px;background:#111321;transform:perspective(var(--screen-perspective,420px)) rotateY(40deg) skewY(12deg);box-shadow:inset 0 1px 0 #fff5,0 2px 0 #806193,0 15px 20px #04050c99,0 0 24px #a57bff42}
.hero-depth .hero-screen-plane>img{width:100%;height:100%;max-width:none;object-fit:cover}
.hero-depth .hero-cutout{position:absolute;inset:0;display:block;pointer-events:none;transform-style:flat}
.hero-depth .hero-cutout img{width:100%;height:100%;max-width:none;object-fit:contain;filter:drop-shadow(0 22px 16px #0009)}
.hero-depth .hero-person{transform:translate3d(0,-3px,var(--person-depth));z-index:3}
.hero-depth .hero-person img{transform:translate(var(--character-x,5.7%),var(--character-y,-9.6%)) scale(var(--character-scale,.84))}
.hero-depth .hero-character{position:absolute;inset:0;display:block;opacity:0;transform-style:preserve-3d}
.hero-depth .hero-character:first-child{opacity:1}
.hero-depth .hero-pixie-dust{position:absolute;inset:0;pointer-events:none;z-index:4;transform:translateZ(calc(var(--person-depth) + 12px));transform-style:flat;--dust-range:clamp(12px,2.5vw,32px);--dust-size:clamp(2px,.28vw,4px)}
.hero-depth .hero-pixie-spark{position:absolute;left:var(--spark-x);top:var(--spark-y);width:calc(var(--dust-size)*var(--spark-size));height:calc(var(--dust-size)*var(--spark-size));opacity:0;color:#ffe6a6;filter:drop-shadow(0 0 3px currentColor)}
.hero-depth .hero-pixie-spark:nth-child(3n+2){color:#c6b2ff}
.hero-depth .hero-pixie-spark:nth-child(3n){color:#adf3ff}
.hero-depth .hero-pixie-spark:before{content:'';position:absolute;inset:0;background:currentColor;border-radius:50%}
.hero-depth .hero-pixie-spark.is-star:before{border-radius:0;clip-path:polygon(50% 0,62% 36%,100% 50%,62% 64%,50% 100%,38% 64%,0 50%,38% 36%)}
.hero-depth .hero-chair{transform:translate3d(0,5px,var(--chair-depth));z-index:1}
.hero-depth .hero-chair img{transform:translate(-.5%,5.2%) scale(.84)}
.hero-art.hero-depth>.art-sticker{right:3%;top:-25px;translate:none;transform:translateZ(var(--label-depth)) rotate(8deg);font-size:12px;padding:13px;z-index:5;animation:none}
.hero-art.hero-depth>.art-caption{display:block;left:10px;bottom:-18px;translate:none;transform:translateZ(calc(var(--label-depth) + 10px)) rotate(-2deg);max-width:calc(100% - 20px);padding:9px 13px;border:1px solid #85749d;background:#12101aed;white-space:normal;font-size:10px;letter-spacing:.08em;z-index:6}

@media(prefers-reduced-motion:no-preference){
  /* Four 9-second slots: 6 seconds of movement, 3 seconds holding the pose.
     The next entrance crossfades with the outgoing character over 800ms. */
  html.motion-enabled .hero-characters-ready .hero-character{animation:hero-character-cycle 36s ease-in-out infinite both;animation-delay:var(--character-delay,0s)}
  html.motion-enabled .hero-characters-ready .hero-pixie-spark{animation:hero-pixie-pop 9s cubic-bezier(.2,.65,.35,1) infinite both;animation-delay:var(--spark-lag,0s)}
  html.motion-enabled .hero-depth .hero-chair{animation:hero-chair-glide 13s ease-in-out infinite}
  html.motion-enabled .hero-screen-active{animation:hero-screen-glide 11s 1.8s ease-in-out infinite both}
  html.motion-enabled .hero-screen-active>.hero-screen-motion{animation:hero-screen-emerge 1.8s cubic-bezier(.18,.65,.25,1) both}
  html.motion-enabled .hero-art.hero-depth>.art-sticker{animation:hero-note-glide 15s ease-in-out infinite}
  html.motion-enabled .hero-art.hero-depth>.art-caption{animation:hero-caption-glide 17s ease-in-out infinite}
  @keyframes hero-character-cycle{
    0%{opacity:0;transform:translate3d(12px,22px,-10px) rotate(3deg) scale(.94)}
    2.222222%{opacity:1;transform:translate3d(0,0,0) rotate(0deg) scale(1)}
    8.333333%{opacity:1;transform:translate3d(5px,-10px,12px) rotate(.35deg) scale(1)}
    16.666667%,25%{opacity:1;transform:translate3d(0,-3px,0) rotate(-.35deg) scale(1)}
    27.222222%,100%{opacity:0;transform:translate3d(-12px,-18px,-10px) rotate(-2deg) scale(.96)}
  }
  @keyframes hero-pixie-pop{
    0%{opacity:0;transform:translate3d(0,6px,0) scale(.25) rotate(-20deg)}
    1.8%{opacity:.95;transform:translate3d(0,0,0) scale(1) rotate(0deg)}
    13%{opacity:.65;transform:translate3d(calc(var(--spark-dx)*var(--dust-range)*.5),calc(var(--spark-dy)*var(--dust-range)*.5),8px) scale(.85) rotate(35deg)}
    26.666667%,100%{opacity:0;transform:translate3d(calc(var(--spark-dx)*var(--dust-range)),calc(var(--spark-dy)*var(--dust-range)),12px) scale(.15) rotate(70deg)}
  }
  @keyframes hero-chair-glide{0%,100%{transform:translate3d(0,5px,var(--chair-depth)) rotate(.4deg)}50%{transform:translate3d(-3px,1px,var(--chair-depth)) rotate(-.4deg)}}
  @keyframes hero-screen-emerge{from{opacity:0;transform:translate3d(-43%,54%,0) scale(.36)}to{opacity:1;transform:translate3d(0,0,0) scale(1)}}
  @keyframes hero-screen-glide{0%,100%{transform:translate3d(0,0,var(--screen-depth))}50%{transform:translate3d(2px,calc(0px - var(--screen-drift)),var(--screen-depth))}}
  @keyframes hero-note-glide{0%,100%{translate:0 0}50%{translate:0 -4px}}
  @keyframes hero-caption-glide{0%,100%{translate:0 0}50%{translate:0 3px}}
}

@media(max-width:1100px){.hero-grid{gap:30px;min-height:600px}.hero h1{font-size:clamp(48px,5vw,60px)}.hero .hero-copy{font-size:16px}.hero-art.hero-depth{--person-depth:60px;--chair-depth:32px;--label-depth:80px;--screen-depth:40px;--screen-drift:5px}.hero-art.hero-depth>.art-caption{font-size:9px}.hero-art.hero-depth>.art-sticker{font-size:10px;padding:10px}}
@media(max-width:760px){
  .hero{padding-top:36px;padding-bottom:42px}
  .hero-grid{grid-template-columns:1fr;gap:clamp(32px,6vw,48px);min-height:0}
  .hero-intro{text-align:center;max-width:620px;margin:auto}
  .hero .eyebrow,.hero-actions,.hero-meta{justify-content:center}
  .hero h1{font-size:clamp(43px,10vw,64px)}
  .hero .hero-copy{margin-inline:auto;margin-bottom:24px}
  .hero-actions{gap:16px}
  .hero-meta{gap:16px;margin-top:18px}
  .hero-art.hero-depth{--person-depth:35px;--chair-depth:18px;--label-depth:60px;--screen-depth:22px;--screen-drift:4px;width:calc(100% - 10px);margin-inline:auto;border-radius:14px}
  .hero-depth .hero-screen-float{top:8%}
  .hero-art.hero-depth>.art-sticker{top:-15px;right:3%;font-size:9px;padding:9px}
  .hero-art.hero-depth>.art-caption{left:6px;bottom:-12px;font-size:8px;padding:7px 10px}
}
@media(prefers-reduced-motion:reduce){.hero-art.hero-depth{transform:none}.hero-depth .hero-pixie-dust{display:none}}