.hero-reel{--hero-reel-accent: var(--lp-accent, #a78bfa);--hero-reel-accent-glow: color-mix(in srgb, var(--hero-reel-accent) 25%, transparent);--hero-reel-prompt-bg: #232323;--hero-reel-prompt-ink: #f2f2f2;--hero-reel-send-bg: #3a3a3a;--hero-reel-send-on: var(--hero-reel-accent);--hero-reel-dim: blur(3px) brightness(0.4);--hero-reel-scroll: 1.6s;position:relative;overflow:hidden;container-type:inline-size}.hero-reel-stage{position:relative;transition:filter 0.35s ease}.hero-reel.is-prompting .hero-reel-stage{filter:var(--hero-reel-dim)}.hero-reel.is-playing .hero-reel-layer{display:block;width:100%;height:auto;opacity:0;transition:opacity 0.3s ease}.hero-reel.is-playing .hero-reel-layer+.hero-reel-layer{position:absolute;inset:0;height:100%}.hero-reel.is-playing .hero-reel-layer.is-on{opacity:1}.hero-reel-strip{position:absolute;overflow:hidden;opacity:0;transition:opacity 0.3s ease}.hero-reel-strip.is-on{opacity:1}.hero-reel.is-playing .hero-reel-strip-img{display:block;width:100%;height:auto;max-width:none}.hero-reel-strip-img.is-scrolling{transition:transform var(--hero-reel-scroll) cubic-bezier(0.65,0,0.35,1)}.hero-reel-ring{position:absolute;border:2px solid var(--hero-reel-accent);border-radius:clamp(4px,0.9cqw,10px);box-shadow:0 0 0 4px var(--hero-reel-accent-glow);opacity:0;transition:opacity 0.2s;pointer-events:none}.hero-reel-ring.is-on{opacity:1}.hero-reel-reveal{position:absolute;visibility:hidden;pointer-events:none}.hero-reel-reveal.is-down{transform-origin:50% 100%;transition:transform 0.9s cubic-bezier(0.45,0,0.55,1)}.hero-reel-reveal.is-right{transform-origin:100% 50%;transition:transform 1.1s cubic-bezier(0.55,0,0.3,1)}.hero-reel-reveal.is-armed{visibility:visible}.hero-reel-reveal.is-down.is-open{transform:scaleY(0)}.hero-reel-reveal.is-right.is-open{transform:scaleX(0)}.hero-reel-reveal:not(.is-open){transition:none}.hero-reel-spinners{opacity:0;transition:opacity 0.3s ease}.hero-reel-spinners.is-on{opacity:1}.hero-reel-spin{position:absolute;border-radius:50%}.hero-reel-spin-crop{position:absolute;inset:0;border-radius:50%;overflow:hidden;animation:hero-reel-spin 0.6s linear infinite}.hero-reel-spin-crop img{position:absolute;max-width:none}@keyframes hero-reel-spin{to{transform:rotate(360deg)}}.hero-reel-spin.is-face .hero-reel-spin-crop{animation:hero-reel-face 1s cubic-bezier(0.45,0,0.2,1) infinite}@keyframes hero-reel-face{0%{transform:rotate(0deg)}60%,100%{transform:rotate(360deg)}}.hero-reel-prompt{position:absolute;left:50%;top:50%;width:74%;display:flex;align-items:center;gap:1.2cqw;padding:1.5cqw 1.2cqw 1.5cqw 2cqw;border-radius:1.4cqw;border:max(1.5px,0.18cqw) solid var(--hero-reel-accent);background:var(--hero-reel-prompt-bg);box-shadow:0 0 0 0.5cqw var(--hero-reel-accent-glow),0 2cqw 5cqw rgba(0,0,0,0.55);color:var(--hero-reel-prompt-ink);font-size:2.2cqw;line-height:1.4;opacity:0;transform:translate(-50%,-40%) scale(0.96);transition:opacity 0.3s ease,transform 0.35s cubic-bezier(0.22,1,0.36,1);pointer-events:none}.hero-reel.is-prompting .hero-reel-prompt{opacity:1;transform:translate(-50%,-50%)}.hero-reel-prompt-text{flex:1;min-width:0;white-space:nowrap;overflow:hidden}.hero-reel-prompt-text::after{content:"";display:inline-block;width:max(1px,0.12cqw);height:1.1em;margin-left:0.15em;vertical-align:-0.15em;background:var(--hero-reel-accent);animation:hero-reel-caret 1s steps(1) infinite}.hero-reel-prompt-send{flex:none;width:3.4cqw;height:3.4cqw;padding:0.8cqw;border-radius:0.8cqw;background:var(--hero-reel-send-bg);color:#fff;transition:background 0.15s,transform 0.15s}.hero-reel-prompt.is-sent .hero-reel-prompt-send{background:var(--hero-reel-send-on);transform:scale(0.9)}@keyframes hero-reel-caret{50%{opacity:0}}.hero-reel-cursor{position:absolute;width:clamp(14px,2.2cqw,24px);height:clamp(14px,2.2cqw,24px);margin:-2px 0 0 -4px;opacity:0;filter:drop-shadow(0 2px 4px rgba(0,0,0,0.5));transition:left 0.55s cubic-bezier(0.65,0,0.35,1),top 0.55s cubic-bezier(0.65,0,0.35,1),opacity 0.2s;pointer-events:none}.hero-reel-cursor.is-on{opacity:1}.hero-reel-cursor.is-click::after{content:"";position:absolute;left:4px;top:2px;width:28px;height:28px;margin:-14px 0 0 -14px;border-radius:50%;border:2px solid var(--hero-reel-accent);animation:hero-reel-click 0.35s ease-out forwards}@keyframes hero-reel-click{from{transform:scale(0.3);opacity:1}to{transform:scale(1.4);opacity:0}}.hero-reel-toggle{position:absolute;right:clamp(8px,2cqw,24px);bottom:clamp(8px,2cqw,24px);width:clamp(32px,4.2cqw,52px);height:clamp(32px,4.2cqw,52px);padding:clamp(7px,1cqw,13px);border:1px solid rgba(255,255,255,0.18);border-radius:50%;background:rgba(40,40,46,0.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#fff;cursor:pointer;opacity:0.85;transition:opacity 0.2s,background 0.2s;z-index:2}.hero-reel-toggle::before{content:"";position:absolute;inset:-6px}.hero-reel-toggle:hover{opacity:1;background:rgba(60,60,68,0.85)}.hero-reel-toggle:focus-visible{outline:2px solid var(--hero-reel-accent);outline-offset:2px;opacity:1}.hero-reel-toggle svg{display:block}.hero-reel-toggle.is-in-bar{right:8px;top:50%;bottom:auto;width:var(--hero-reel-toggle-size, 22px);height:var(--hero-reel-toggle-size, 22px);margin-top:calc(var(--hero-reel-toggle-size, 22px) / -2);padding:5px;border-color:var(--hero-reel-toggle-line, rgba(255, 255, 255, 0.14));background:var(--hero-reel-toggle-bg, rgba(255, 255, 255, 0.08));-webkit-backdrop-filter:none;backdrop-filter:none;color:var(--hero-reel-toggle-ink, rgba(255, 255, 255, 0.82));opacity:1}.hero-reel-toggle.is-in-bar::before{inset:calc((44px - var(--hero-reel-toggle-size, 22px)) / -2);border-radius:50%}.hero-reel-toggle.is-in-bar:hover{background:var(--hero-reel-toggle-bg-hover, rgba(255, 255, 255, 0.16));color:#fff}.hero-reel-toggle.is-in-bar:focus-visible{outline-color:var(--hero-reel-accent, var(--lp-accent, #a78bfa))}.hero-reel.is-paused .hero-reel-spin-crop,.hero-reel.is-paused .hero-reel-prompt-text::after{animation-play-state:paused}.hero-reel.is-ended .hero-reel-spin-crop{animation-play-state:paused}