/* The first-screen portrait keeps its original composition in one square SVG. */
.home-hero .hero-portrait-scene { position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; }
.hero-puppet-look { transform-origin:817px 517px; transform:translate(var(--hero-puppet-x,0px),var(--hero-puppet-y,0px)) rotate(var(--hero-puppet-turn,0deg)); transition:transform 650ms var(--moon-ease); }
.hero-puppet-breath { transform-origin:660px 760px; animation:hero-mei-breathe 6.5s -1.2s ease-in-out infinite alternate paused; }
.hero-character-active .hero-puppet-breath { animation-play-state:running; }
.hero-puppet-gesture { transform-origin:650px 760px; }
.hero-portrait-eye { transform:translate(var(--hero-eye-x,0px),var(--hero-eye-y,0px)); transition:transform 240ms var(--moon-ease); }
.hero-portrait-blink { opacity:0; animation:hero-mei-blink 6.2s -4.7s infinite paused; }
.hero-character-active .hero-portrait-blink { animation-play-state:running; }
.hero-character-reacting[data-hero-gesture=greeting] .hero-puppet-gesture { animation:hero-mei-greet 1500ms var(--moon-ease) both; }
.hero-character-reacting[data-hero-gesture=apple] .hero-puppet-gesture { animation:hero-mei-offer 1700ms var(--moon-ease) both; }
.hero-character-reacting[data-hero-gesture=playful] .hero-puppet-gesture { animation:hero-mei-playful 1700ms var(--moon-ease) both; }
.hero-character-reacting .hero-portrait-blink { animation:hero-response-blink 1400ms linear both; }
.hero-character-reacting[data-hero-gesture=playful] .hero-portrait-blink { animation:hero-response-wink 1600ms linear both; }
.hero-apple-light { fill:none; stroke:#e9c6a0; stroke-width:3; opacity:var(--hero-apple-heat,0); transform-origin:488px 864px; transition:opacity 250ms; }
.hero-apple-light .apple-orbit { stroke-dasharray:8 17; stroke-width:2; }
.hero-character-pressed .hero-apple-light { opacity:.4; scale:.96; transition:opacity 250ms,scale 500ms; }
.hero-character-reacting .hero-apple-light { animation:hero-apple-light 1700ms var(--moon-ease) both; }
.hero-character-reacting[data-hero-gesture=apple] .hero-apple-light { animation:hero-apple-bloom 1800ms var(--moon-ease) both; }
.hero-spark { fill:#f0d1ac; opacity:0; transform:translate(488px,864px); }
.hero-character-reacting .hero-spark { animation:hero-apple-spark 1600ms var(--spark-delay,0ms) var(--moon-ease) both; }
.home-hero .hero-character-hit { position:absolute; z-index:1; inset:120px 3% 70px 52%; padding:0; margin:0; border:0; border-radius:28px; background:transparent; color:#e8cdb7; appearance:none; cursor:pointer; touch-action:pan-y pinch-zoom; -webkit-tap-highlight-color:transparent; }
.hero-character-hit[hidden] { display:none!important; }
.hero-character-hit:focus-visible { outline:1px solid #e4c9ae; outline-offset:6px; }
.hero-character-hint { position:absolute; left:8%; bottom:6%; display:flex; align-items:center; gap:9px; padding:11px 16px; border:1px solid #c3a18b66; border-radius:30px; background:#251521d9; color:#e7cfb9; font:11px/1.4 var(--body); box-shadow:0 8px 30px #100a1344; transition:background 250ms,border-color 250ms; }
.hero-character-hint i { font:24px/1 var(--serif); font-style:normal; transition:rotate 600ms var(--moon-ease); }
.hero-character-hit:hover .hero-character-hint { background:#4b2a3c; border-color:#e3c5a999; }
.hero-character-reacting .hero-character-hint i { rotate:180deg; }
.hero-hint-touch { display:none; }
.hero-response-announcement { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
@keyframes hero-mei-breathe { from { translate:0 0; scale:1; } to { translate:0 -5px; scale:1.005; } }
@keyframes hero-mei-blink { 0%,91%,100% { opacity:0; } 93%,95% { opacity:1; } }
@keyframes hero-mei-greet { 0%,100% { transform:none; } 28% { transform:translate(0,12px) rotate(1.5deg); } 56% { transform:translate(0,-4px) rotate(-.6deg); } 75% { transform:translate(0,2px); } }
@keyframes hero-mei-offer { 0%,100% { transform:none; } 30%,60% { transform:translate(-9px,-12px) scale(1.028) rotate(-1deg); } }
@keyframes hero-mei-playful { 0%,100% { transform:none; } 25%,58% { transform:translate(-7px,-5px) rotate(-3deg); } 76% { transform:rotate(.7deg); } }
@keyframes hero-response-blink { 0%,8%,33%,100% { opacity:0; } 14%,25% { opacity:1; } }
@keyframes hero-response-wink { 0%,7%,80%,100% { opacity:0; } 16%,65% { opacity:1; } }
@keyframes hero-apple-light { 0%,100% { opacity:0; transform:scale(.85) rotate(-25deg); } 30%,55% { opacity:.6; transform:scale(1.12) rotate(20deg); } }
@keyframes hero-apple-bloom { 0% { opacity:0; transform:scale(.72) rotate(-45deg); } 35% { opacity:1; transform:scale(1.2) rotate(0deg); } 65% { opacity:.65; } 100% { opacity:0; transform:scale(1.65) rotate(65deg); } }
@keyframes hero-apple-spark { 0% { opacity:0; transform:translate(488px,864px) scale(.2); } 18%,50% { opacity:.85; } 100% { opacity:0; transform:translate(calc(488px + var(--spark-x)),calc(864px + var(--spark-y))) rotate(var(--spark-turn)) scale(.45); } }
@media(max-width:720px) {
  .home-hero .hero-character-hit { inset:95px 16px auto; height:280px; max-width:350px; margin-inline:auto; }
  .hero-character-hint { left:50%; bottom:10px; transform:translateX(-50%); padding:8px 13px; width:max-content; max-width:100%; font-size:10px; gap:7px; }
  .hero-character-hint i { font-size:20px; }
  .hero-hint-desktop { display:none; }
  .hero-hint-touch { display:inline; }
}
@media(hover:none),(pointer:coarse) { .hero-hint-desktop { display:none; } .hero-hint-touch { display:inline; } }
html.motion-hidden .hero-portrait-scene *,html.intro-open .hero-portrait-scene * { animation-play-state:paused!important; }
html.motion-paused .hero-portrait-scene * { animation:none!important; transition:none!important; }
html.motion-paused .hero-puppet-look,html.motion-paused .hero-portrait-eye { transform:none; }
html.motion-paused .hero-character-hit { display:none; }
@media(prefers-reduced-motion:reduce) {
  .hero-portrait-scene * { animation:none!important; transition:none!important; }
  .hero-puppet-look,.hero-portrait-eye { transform:none; }
  .hero-character-hit { display:none; }
}