.scene-background{background:var(--blue) url('/assets/pocket-loop-poster.png') center/cover no-repeat;pointer-events:none}
.scene-video{width:100%;height:100%;object-fit:cover;display:block;opacity:.9}
.hero{grid-template-columns:minmax(0,1.08fr) minmax(0,1fr)}.hero h1{font-size:clamp(64px,7.2vw,128px)}.headline-line{white-space:nowrap}.scene-background::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(37,78,232,.55),transparent 65%)}
.intro-pending header .brand,.intro-pending .scene-background,.intro-pending .hero h1,.intro-pending .hero-description,.intro-pending .hero-copy>.button,.intro-pending .hero-art{opacity:0}
.motion-toggle{border:1px solid rgba(255,249,233,.5);border-radius:30px;color:var(--cream);background:transparent;padding:10px 15px;min-height:44px;font-size:12px;letter-spacing:.5px;cursor:pointer;transition:background .18s}
.motion-toggle:hover,.motion-toggle:focus-visible{background:rgba(255,249,233,.12)}
.hero-bottom{align-items:center;padding-block:14px}.hero-art{perspective:1000px}.character-sheet{will-change:transform}.mascot-stage{position:relative;aspect-ratio:1}.mascot-body{position:absolute;inset:0;animation:crumb-nod var(--ritual-duration,8000ms) ease-in-out infinite;transform-origin:50% 79%}
.mascot-stage img{width:100%;height:100%;margin:0;mix-blend-mode:normal;object-fit:contain}.mascot-stage .pocket-front{position:absolute;inset:0;clip-path:polygon(22% 38%,35% 41%,52% 42%,68% 38%,83% 51%,82% 91%,22% 91%);z-index:3}
.pocket-note{position:absolute;z-index:2;left:61%;top:23%;width:17%;height:23%;border:3px solid var(--ink);border-radius:5px;background:var(--cream);color:var(--blue);font-size:clamp(21px,3vw,42px);display:grid;place-items:center;transform:translateY(-22%) rotate(12deg);opacity:0;animation:pocket-ritual var(--ritual-duration,8000ms) var(--motion-ease,cubic-bezier(.22,1,.36,1)) infinite;transform-origin:50% 100%}
@keyframes pocket-ritual{0%,12%{opacity:0;transform:translate(13%,-65%) rotate(18deg)}20%{opacity:1;transform:translate(0,-26%) rotate(12deg)}38%{opacity:1;transform:translate(-5%,22%) rotate(9deg)}55%,68%{opacity:0;transform:translate(-15%,110%) rotate(4deg)}100%{opacity:0;transform:translate(13%,-65%) rotate(18deg)}}
@keyframes crumb-nod{0%,24%,65%,100%{transform:translateY(0) rotate(0)}38%{transform:translateY(-7px) rotate(-1.2deg)}51%{transform:translateY(3px) rotate(.8deg)}}
.motion-paused .motion-loop,.motion-hidden .motion-loop,.hero-inactive .hero-shell .motion-loop{animation-play-state:paused!important}
.motion-paused .scene-video,.motion-reduced .scene-video{visibility:hidden}
.motion-reduced .motion-loop,.motion-reduced .hero-shell.video-unavailable .scene-background,.motion-reduced .faq-list details[open] p{animation:none!important}.motion-reduced .pocket-note{opacity:0}.motion-reduced .character-sheet{will-change:auto}
.motion-paused *{scroll-behavior:auto!important}.hero-shell.video-unavailable .scene-background{animation:paper-drift 8s ease-in-out infinite alternate}.motion-paused .hero-shell.video-unavailable .scene-background,.motion-hidden .hero-shell.video-unavailable .scene-background,.hero-inactive .hero-shell.video-unavailable .scene-background{animation-play-state:paused}
@keyframes paper-drift{from{background-position:50% 50%}to{background-position:51% 54%}}
.button:active{transform:translateY(1px) scale(.98)}.button.is-focus-preview{outline:3px solid var(--blue);outline-offset:5px}.button.is-press-preview{transform:translateY(1px) scale(.98)}.faq-list details[open] p{animation:answer-in .24s ease-out}@keyframes answer-in{from{opacity:.3;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}
.story-link{display:inline-block;margin-top:24px;font-size:15px;font-weight:700;color:var(--blue)}footer{position:relative;overflow:hidden}footer::before{content:'';position:absolute;inset:0 0 auto;height:6px;background:repeating-linear-gradient(90deg,var(--cream) 0 15px,transparent 15px 30px);opacity:.3}footer .footer-copy{display:flex;flex-direction:column;gap:14px}footer .footer-copy a{font-size:14px;text-align:center}.motion-paused .faq-list details[open] p{animation:none}
.studio{max-width:1500px;margin:auto;padding:32px}.studio h1{font-size:clamp(32px,4vw,58px);letter-spacing:-2px;margin:28px 0 12px}.studio p{line-height:1.65;max-width:800px}.studio-controls{display:flex;flex-wrap:wrap;gap:10px;margin:25px 0}.studio-controls button{background:var(--ink);color:var(--cream);border:0;border-radius:4px;padding:13px 18px;font-weight:700;min-height:44px}.studio iframe{width:100%;height:78vh;min-height:500px;border:1px solid var(--ink);background:var(--blue)}.studio output{display:block;font-size:14px;min-height:26px;margin-bottom:14px}.studio .notes{padding:24px 0;font-size:14px}.studio a{color:var(--blue)}
.article-header{background:var(--blue);color:var(--cream)}.article{max-width:860px;margin:auto;padding:60px 30px 90px;font-size:19px;line-height:1.8}.article h1{font-size:clamp(40px,6vw,68px);line-height:1.03;letter-spacing:-3px;margin:28px 0 24px}.article h2{font-size:32px;letter-spacing:-1px;margin:48px 0 17px;line-height:1.2}.article p{margin:0 0 22px}.article img{width:100%;border-radius:5px;margin:10px 0 28px}.article a{color:var(--blue)}.article .subtitle{font-size:23px;line-height:1.4}.article .read-label{font-size:12px;font-weight:700;letter-spacing:1.5px}.article blockquote{border-left:4px solid var(--blue);padding-left:24px;margin:32px 0;font-family:Georgia,serif;font-style:italic;font-size:26px}.article ul{padding-left:23px}
@media(max-width:900px){.hero h1{font-size:7.8vw}}
@media(max-width:620px){.hero{grid-template-columns:1fr}.hero h1{font-size:clamp(56px,13vw,82px)}.hero-bottom .motion-toggle{font-size:11px;padding:8px 12px}.hero-bottom>span{max-width:190px}.pocket-note{border-width:2px;font-size:26px}.studio{padding:20px}.article{padding:34px 22px 60px;font-size:18px}}
@media(prefers-reduced-motion:reduce){.motion-loop,.hero-shell.video-unavailable .scene-background,.faq-list details[open] p{animation:none!important}.pocket-note{opacity:0}.scene-video{display:none}.intro-pending header .brand,.intro-pending .scene-background,.intro-pending .hero h1,.intro-pending .hero-description,.intro-pending .hero-copy>.button,.intro-pending .hero-art{opacity:1}}