/* Character Spotlight: illustrated expressive faces, not cropped full-body renders. */
.hero{display:flex;align-items:center;justify-content:space-between;gap:25px;min-height:206px;padding:16px 29px 13px}
.hero-copy{max-width:555px;flex:1 1 55%;text-align:left}
.hero .mini-pill{display:inline-flex}
.hero h1{font-size:clamp(31px,3.15vw,44px);margin:11px 0 7px;line-height:1.12}
.hero-copy>p{font-size:12px;max-width:485px}
.hero-orbit{opacity:.2}
.cinema{position:relative;flex:0 1 44%;min-width:345px;max-width:471px;height:188px;overflow:hidden;isolation:isolate;border-radius:15px;background:linear-gradient(128deg,#171c2c 2%,#364a58 43%,#836574 76%,#242233);box-shadow:0 18px 48px #27233226,0 0 0 1px #4b536a1b;color:white}
.cinema-stage{position:absolute;inset:0;overflow:hidden;background:radial-gradient(circle at 42% 20%,#eed3c55e,transparent 33%),linear-gradient(126deg,#182338,#435a67 48%,#825d67)}
.cinema-stage::before{content:"";position:absolute;inset:-50%;background:repeating-linear-gradient(126deg,#ffffff00 0 24px,#fff8 25px 26px,#ffffff00 27px 61px);transform:rotate(-9deg);animation:spotlight-drift 7s linear infinite}
.cinema-stage::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#101623e8 0%,#151e308a 27%,transparent 63%,#111b3266 100%);pointer-events:none;z-index:3}
.cinema-character{position:absolute;top:-42px;width:43%;height:245px;overflow:hidden;will-change:transform;box-shadow:0 12px 34px #10152172;transition:transform 950ms cubic-bezier(.2,.76,.2,1),opacity 850ms ease,filter 850ms ease}
.cinema-character img{width:100%;height:100%;object-fit:cover;object-position:50% 19%;display:block;animation:spotlight-breathe 3.2s ease-in-out infinite alternate}
.cinema-character-ren{left:15%;transform:translateX(-11%) rotate(-8deg) scale(1.02);z-index:1;border:3px solid #d9e4d7c7;clip-path:polygon(0 2%,96% 0,100% 97%,4% 100%)}
.cinema-character-aya{right:7%;transform:translateX(8%) rotate(7deg) scale(1.08);z-index:2;border:3px solid #f3d4d9e0;clip-path:polygon(7% 0,100% 3%,95% 99%,0 95%)}
.cinema-character-label{position:absolute;top:135px;left:8px;z-index:2;letter-spacing:.19em;font-size:9px;font-weight:900;background:#202936bb;padding:3px 7px}
.cinema[data-focus="ren"] .cinema-character-ren{transform:translate(28%,7px) rotate(-2deg) scale(1.17);z-index:2}
.cinema[data-focus="ren"] .cinema-character-aya{transform:translate(20%,3px) rotate(11deg) scale(.91);opacity:.57;filter:blur(1px)}
.cinema[data-focus="aya"] .cinema-character-ren{transform:translate(-30%,8px) rotate(-11deg) scale(.87);opacity:.55;filter:blur(1px)}
.cinema[data-focus="aya"] .cinema-character-aya{transform:translate(-18%,3px) rotate(1deg) scale(1.18)}
.cinema[data-focus="duo"] .cinema-character-ren{opacity:1}
.cinema[data-focus="duo"] .cinema-character-aya{opacity:1}
.cinema-streak{position:absolute;top:-130%;bottom:-130%;width:4px;z-index:1;background:linear-gradient(0deg,transparent,#f6e7c6c9,transparent);transform:rotate(35deg);filter:blur(.3px);animation:spotlight-swish 4.5s ease-in-out infinite}
.cinema-streak-one{left:29%;animation-delay:-1s}
.cinema-streak-two{left:78%;animation-delay:-2.5s;width:2px}
.cinema-light{position:absolute;inset:-30%;z-index:2;pointer-events:none;background:radial-gradient(ellipse at 68% 48%,#fae3f044,transparent 34%);animation:spotlight-drift 6s ease-in-out infinite alternate}
.cinema-spark{position:absolute;z-index:4;font-size:25px;color:#fce5d9;text-shadow:0 0 16px #fff9;animation:spotlight-spark 2.4s ease-in-out infinite}
.cinema-spark-a{top:40px;left:11%}.cinema-spark-b{right:9%;top:57px;font-size:18px;animation-delay:1s}
.cinema-speech{position:absolute;z-index:5;top:80px;left:4%;max-width:38%;border-radius:12px 12px 12px 2px;background:#fffdf3ef;color:#263341;padding:9px 12px;font-size:11px;line-height:1.2;font-weight:800;box-shadow:0 5px 19px #06112045;transform:rotate(-7deg);animation:spotlight-speech 2.8s ease-in-out infinite}
.cinema[data-focus="ren"] .cinema-speech{left:auto;right:3%;transform:rotate(5deg)}
.cinema[data-focus="aya"] .cinema-speech{left:3%}
.cinema-meta,.cinema-caption,.cinema-progress,.cinema-toggle{position:absolute;z-index:6}
.cinema-meta{top:11px;left:15px;right:16px;display:flex;align-items:center;justify-content:space-between;font-size:9px;letter-spacing:.14em;font-weight:700;color:#fceedd;text-shadow:0 1px 6px #070d1c88}
.cinema-live{display:inline-flex;align-items:center;gap:7px}
.cinema-live i{width:6px;height:6px;border-radius:50%;background:#e8c5a0;box-shadow:0 0 0 3px #fff3ce25}
.cinema-caption{left:16px;bottom:20px;display:flex;flex-direction:column;max-width:81%;gap:2px;text-shadow:0 1px 12px #090b10ba}
.cinema-caption span{font-size:8px;font-weight:750;letter-spacing:.19em;color:#ffdfb5}
.cinema-caption strong{font-size:clamp(16px,1.6vw,22px);letter-spacing:.015em;line-height:1.09;font-weight:900;color:#fffaf3}
.cinema-progress{bottom:8px;left:16px;right:62px;display:flex;gap:5px}
.cinema-dash{flex:1;height:2px;background:#ffffff4a;border-radius:3px}
.cinema-dash.is-current{background:#ffdbb6}
.cinema-toggle{right:14px;bottom:16px;height:28px;width:28px;border-radius:50%;border:1px solid #fff9;display:grid;place-items:center;cursor:pointer;background:#171b2c72;color:white;font-size:13px;transition:background .2s,transform .2s}
.cinema-toggle:hover{background:#404055c4;transform:scale(1.06)}
.cinema-toggle:focus-visible{outline:3px solid #e4cab0;outline-offset:3px}
.cinema-enter .cinema-caption,.cinema-enter .cinema-speech{animation:spotlight-reveal 620ms ease-out both}
.cinema-enter .cinema-speech{animation-delay:130ms}
.cinema[data-paused="true"] .cinema-stage *, .cinema[data-paused="true"] .cinema-stage::before, .cinema[data-paused="true"] .cinema-stage::after{animation-play-state:paused!important}
@keyframes spotlight-drift{from{transform:translateX(-2%) rotate(-9deg)}to{transform:translateX(3%) rotate(-9deg)}}
@keyframes spotlight-breathe{from{transform:translateY(-2%) scale(1.02)}to{transform:translateY(1.7%) scale(1.06)}}
@keyframes spotlight-swish{0%,65%,100%{opacity:0;translate:-80px 0}78%{opacity:.85;translate:170px 0}}
@keyframes spotlight-spark{0%,100%{transform:scale(.72) rotate(-10deg);opacity:.65}50%{transform:scale(1.2) rotate(13deg);opacity:1}}
@keyframes spotlight-speech{0%,100%{translate:0 0}50%{translate:0 -4px}}
@keyframes spotlight-reveal{from{opacity:0;translate:0 12px}to{opacity:1;translate:0 0}}
@media(max-width:890px){.hero{gap:14px;min-height:175px;padding:14px 19px 12px}.hero h1{font-size:clamp(26px,3.7vw,37px)}.hero-copy>p{font-size:11px}.cinema{min-width:276px;max-width:365px;height:154px}.cinema-character{height:215px;top:-42px}.cinema-speech{top:67px;font-size:10px;padding:7px}.cinema-character-label{top:121px}}
@media(max-width:690px){.hero{flex-direction:column;min-height:0;gap:8px;padding:13px 17px 9px}.hero-copy{max-width:100%;flex:none;text-align:center}.hero h1{font-size:32px;margin:9px 0 5px}.hero-copy>p{font-size:11px;max-width:none;margin:0}.cinema{flex:none;width:min(100%,520px);max-width:520px;min-width:0;height:162px;border-radius:12px}.hero-orbit{display:none}.cinema-caption strong{font-size:18px}.cinema-character{top:-35px;height:215px}}
@media(max-width:600px){.hero{padding:10px 14px 9px;gap:7px}.hero .mini-pill{display:none}.hero h1{font-size:28px;line-height:1.08;margin:3px 0 4px}.cinema{height:147px}.cinema-meta{top:9px}.cinema-caption{bottom:18px}.cinema-caption strong{font-size:17px}.cinema-character{top:-43px;height:210px}.cinema-speech{top:65px;font-size:9px;max-width:39%}}
@media(prefers-reduced-motion:reduce){.cinema *, .cinema *::before, .cinema *::after{animation:none!important;transition:none!important}.cinema-toggle{display:none}}