/* Size the opening composition against available viewport height, not image width.
   Content may grow at high zoom/very short viewports: never clip text or controls. */
.hero .hero-motion-control{font:inherit;font-size:10px;letter-spacing:.2px;border:1px solid #cfc8d7;border-radius:20px;padding:7px 12px;min-height:32px;color:#594268;background:#fafaf9;cursor:pointer;white-space:nowrap;position:relative;z-index:3}
.hero .hero-motion-control[hidden]{display:none}
.hero .hero-motion-control:hover{background:#eee8f4;border-color:#9580a6}
.hero .hero-motion-control:focus-visible{outline:2px solid #695080;outline-offset:3px}
@media(prefers-reduced-motion:no-preference){
  .hero[data-hero-motion] .hero-character{animation:hero-idle 6s ease-in-out infinite;animation-play-state:paused;transform-origin:50% 70%;transition:scale 400ms ease,rotate 400ms ease}
  .hero[data-hero-motion] .hero-flow .flow-energy{animation:hero-infinity 9s linear infinite;animation-play-state:paused}
  .hero[data-hero-motion=running] .hero-character,.hero[data-hero-motion=running] .hero-flow .flow-energy{animation-play-state:running}
  .hero .hero-flow{inset:8% -6% auto;width:112%;opacity:.9}
  .hero .hero-flow .flow-energy{stroke-width:5;stroke-dasharray:24 76}
}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .hero[data-hero-interactive=true] .character-stage:hover .hero-character{scale:1.025;rotate:-.6deg}
}
@keyframes hero-idle{0%,100%{transform:translateY(3px) rotate(-.25deg)}50%{transform:translateY(-7px) rotate(.35deg)}}
@keyframes hero-infinity{from{stroke-dashoffset:0}to{stroke-dashoffset:-100}}
@media (min-width:701px) {
  .hero.wrap {
    min-height: min(680px, calc(100svh - 158px));
    padding-block: clamp(18px, 3svh, 38px);
    padding-inline: clamp(28px, 4vw, 64px);
    grid-template-columns: 1.05fr 1fr;
    align-items: center;
  }
  .hero .hero-copy {padding:0; min-width:0}
  .hero h1 {font-size:clamp(40px, min(5.7vw, 7.5svh), 78px); margin:18px 0; line-height:1.04}
  .hero .eyebrow {margin-bottom:0; line-height:1.5}
  .hero .lead {font-size:clamp(15px, 1.9svh, 17px); line-height:1.6; margin:0; max-width:430px}
  .hero .actions {margin-top:20px; gap:16px 24px}
  .hero .btn {min-height:44px; padding:13px 22px}
  .hero .btn.text {padding:13px 0}
  .hero .hero-note {margin-top:16px; max-width:450px; line-height:1.5; font-size:10px; letter-spacing:.4px}
  .hero .character-stage {min-height:0; margin:0; width:100%; max-width:none; gap:8px}
  .hero .hero-character {width:100%; height:clamp(180px, calc(100svh - 264px), 540px); object-fit:contain; margin:0}
  .hero .character-label {margin:0; padding:0; font-size:11px; line-height:1.4; min-height:32px}
  .hero .stage-topline {font-size:9px; line-height:1.5}
  .hero-caption {padding-top:12px; padding-bottom:10px; min-height:44px; border-top:0}
}
@media (min-width:701px) and (max-height:650px) {
  .header .nav {min-height:72px}
  .hero.wrap {margin-top:6px; padding-block:16px; min-height:0}
  .hero h1 {font-size:clamp(36px, 7.2svh, 46px); margin:12px 0}
  .hero .actions {margin-top:14px}
  .hero .hero-note {margin-top:12px}
  .hero .hero-character {height:clamp(160px, calc(100svh - 230px), 420px)}
}
@media (max-width:700px) {
  .hero.wrap {padding:22px 22px 16px; gap:12px}
  .hero h1 {font-size:clamp(36px, min(10vw, 6.4svh), 54px); margin:14px 0}
  .hero .eyebrow {margin-bottom:0; font-size:9px; line-height:1.5}
  .hero .lead {font-size:15px; line-height:1.5; margin:0}
  .hero .actions {margin-top:16px; gap:8px 18px}
  .hero .btn {min-height:44px; padding:12px 18px; font-size:13px}
  .hero .btn.text {padding:12px 0}
  .hero .hero-note {margin-top:12px; font-size:9px; line-height:1.5}
  .hero .character-stage {margin:0 auto; gap:4px; max-width:360px}
  .hero .hero-character {width:100%; height:clamp(115px, 22svh, 205px); object-fit:contain}
  .hero .stage-topline {font-size:8px; line-height:1.4}
  .hero .stage-topline>span {font-size:8px}
  .hero .character-label {margin:0; padding:0; font-size:10px; line-height:1.3; min-height:26px}
  .hero .character-label .stage-icon {font-size:22px}
  .hero-caption {padding-top:8px; padding-bottom:8px; border-top:0}
}