/* KLEOS cinematic interludes: starfield, Moon and Mars worlds, camera shots, controls */
.cinema { --c-accent: #d7e6ff; position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; overflow: hidden; background: #030713; color: #f5f7ff; font-family: inherit; opacity: 0; transition: opacity .55s ease; }
.cinema[hidden] { display: none; }
.cinema.is-active { opacity: 1; }
.cinema[data-world="moon"] { --c-accent: #8fd3ff; }
.cinema[data-world="mars"] { --c-accent: #ff9d73; }
.cinema[data-world="space"] { --c-accent: #ffcf5a; }
.cinema__stars { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* world + camera */
.cinema__cam { position: absolute; inset: 0; transform-origin: 50% 72%; will-change: transform; animation: var(--shot-anim, none) var(--dur, 6s) cubic-bezier(.3,.1,.3,1) both; }
.cinema__cam.shot-push { --shot-anim: c-push; } .cinema__cam.shot-pan-r { --shot-anim: c-pan-r; } .cinema__cam.shot-pan-l { --shot-anim: c-pan-l; }
.cinema__cam.shot-rise { --shot-anim: c-rise; } .cinema__cam.shot-pull { --shot-anim: c-pull; } .cinema__cam.shot-drift { --shot-anim: c-drift; }
.cinema.is-paused .cinema__cam, .cinema.is-paused .cinema__dust i, .cinema.is-paused .cinema__earth { animation-play-state: paused; }
.cinema__planet { position: absolute; left: 50%; top: 68%; width: max(190vw, 1700px); aspect-ratio: 1; border-radius: 50%; transform: translateX(-50%); opacity: 0; transition: opacity 1s, background 1s; }
.cinema[data-world="moon"] .cinema__planet, .cinema[data-world="mars"] .cinema__planet { opacity: 1; }
.cinema[data-world="moon"] .cinema__planet { background: radial-gradient(circle at 22% 6%, rgba(0,0,0,.28) 0 2.2%, transparent 2.6%), radial-gradient(circle at 63% 7%, rgba(0,0,0,.3) 0 2.6%, transparent 3%), radial-gradient(circle at 80% 4%, rgba(0,0,0,.2) 0 1.5%, transparent 1.9%), radial-gradient(circle at 50% 0%, #c4c6cf 0, #8d8f98 14%, #4b4d57 34%, #14161f 62%); box-shadow: 0 -2px 60px rgba(190,205,255,.25), inset 0 3px 40px rgba(255,255,255,.18); }
.cinema[data-world="mars"] .cinema__planet { background: radial-gradient(circle at 30% 5%, rgba(80,25,10,.35) 0 2%, transparent 2.5%), radial-gradient(circle at 70% 4%, rgba(80,25,10,.3) 0 2.4%, transparent 2.9%), radial-gradient(circle at 50% 0%, #e98a5c 0, #c9633a 14%, #7c3420 36%, #2a100a 64%); box-shadow: 0 -2px 70px rgba(255,150,100,.4), inset 0 3px 40px rgba(255,200,150,.22); }
.cinema[data-world="mars"]::before { content: ""; position: absolute; inset: 0; background: radial-gradient(130% 80% at 50% 78%, rgba(255,157,115,.38), rgba(224,120,74,.12) 45%, transparent 70%); pointer-events: none; }
.cinema__earth, .cinema__sun { position: absolute; border-radius: 50%; opacity: 0; transition: opacity 1s; }
.cinema__earth { right: 14%; top: 13%; width: clamp(34px, 6vmin, 58px); aspect-ratio: 1; background: radial-gradient(circle at 35% 30%, #cfeaff, #4a8fe0 45%, #1a3d78 75%, #0a1a3a); box-shadow: 0 0 30px rgba(120,180,255,.5); animation: c-bob 7s ease-in-out infinite alternate; }
.cinema__sun { left: 12%; top: 10%; width: clamp(60px, 12vmin, 110px); aspect-ratio: 1; background: radial-gradient(circle, #fff6d6 0 18%, rgba(255,207,90,.5) 30%, transparent 68%); }
.cinema[data-world="moon"] .cinema__earth, .cinema[data-world="moon"] .cinema__sun, .cinema[data-world="mars"] .cinema__sun { opacity: 1; }
.cinema[data-world="mars"] .cinema__sun { left: auto; right: 14%; width: clamp(40px, 7vmin, 70px); }
.cinema__prop { position: absolute; left: 50%; top: 68%; width: min(34vmin, 300px); transform: translate(-50%, -97%); filter: drop-shadow(0 18px 24px rgba(0,0,0,.55)); }
.cinema__prop[hidden] { display: none; }
.cinema__prop svg { display: block; width: 100%; height: auto; overflow: visible; }
.cinema__prop .m { fill: #cfd3de; stroke: #0b0f1c; stroke-width: 2; stroke-linejoin: round; }
.cinema__prop .g { fill: #e0b04a; stroke: #3a2a08; stroke-width: 2; stroke-linejoin: round; }
.cinema__prop .d { fill: #1d2438; stroke: #0b0f1c; stroke-width: 2; }
.cinema__prop .p { fill: #243a78; stroke: #0b0f1c; stroke-width: 2; }
.cinema__prop .l { fill: none; stroke: #cfd3de; stroke-width: 4; stroke-linecap: round; }
.cinema__prop .s { fill: rgba(0,0,0,.4); }
.cinema[data-world="mars"] .cinema__prop .m { fill: #e4d8cf; }
.cinema__dust { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 1s; }
.cinema[data-world="mars"] .cinema__dust { opacity: 1; }
.cinema__dust i { position: absolute; left: -10%; width: 120%; height: 2px; background: linear-gradient(90deg, transparent, rgba(255,190,150,.35), transparent); opacity: 0; animation: c-wind 5s linear infinite; }
.cinema__dust i:nth-child(1) { top: 70%; } .cinema__dust i:nth-child(2) { top: 76%; animation-delay: 1.6s; animation-duration: 6.4s; } .cinema__dust i:nth-child(3) { top: 83%; animation-delay: 3s; animation-duration: 4.4s; }
.cinema__shade { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 90% at 50% 45%, transparent 45%, rgba(0,0,0,.6)), linear-gradient(to top, rgba(3,7,19,.78), transparent 55%); }

/* copy */
.cinema__content { position: relative; z-index: 2; width: min(850px, calc(100% - 42px)); padding: clamp(28px, 7vw, 76px) 0; text-align: center; }
.cinema__eyebrow { font: 600 .72rem/1.4 var(--mono, monospace); letter-spacing: .22em; text-transform: uppercase; color: var(--c-accent); }
.cinema__title { font-size: clamp(2.1rem, 7vw, 5.5rem); line-height: .98; letter-spacing: -.055em; margin: 1rem 0 1.4rem; color: #fff; text-wrap: balance; }
.cinema__line { font-size: clamp(1.05rem, 2.4vw, 1.55rem); line-height: 1.65; max-width: 680px; margin: 0 auto; color: #d5deed; min-height: 5.2em; text-wrap: balance; }
.cinema__line.is-revealing { animation: c-reveal .7s both; }
.cinema__title.is-revealing { animation: c-title .9s both; }
.cinema__actions { display: flex; justify-content: center; align-items: center; gap: .6rem; flex-wrap: wrap; margin-top: 2rem; }
.cinema__btn { border: 1px solid #7894bd88; background: #16243b; color: #fff; border-radius: 999px; min-height: 44px; padding: .75rem 1.35rem; font: 700 .9rem inherit; font-family: inherit; cursor: pointer; }
.cinema__btn--primary { background: #d7e6ff; color: #091326; border-color: #d7e6ff; }
.cinema__ico { width: 44px; height: 44px; display: inline-grid; place-items: center; padding: 0; border-radius: 50%; border: 1px solid #7894bd66; background: rgba(16,24,42,.7); color: #e8eefc; cursor: pointer; transition: border-color .15s, background .15s; }
.cinema__ico svg { width: 18px; height: 18px; }
.cinema__ico:hover:not(:disabled), .cinema__btn:hover { border-color: var(--c-accent); }
.cinema__ico[aria-pressed="true"] { border-color: var(--c-accent); background: rgba(255,255,255,.14); color: #fff; }
.cinema__ico:disabled { opacity: .35; cursor: not-allowed; }
.cinema button:focus-visible { outline: 3px solid #fff2b8; outline-offset: 3px; }
.cinema__counter { margin: 1.2rem 0 0; color: #8fa4c2; font: .72rem var(--mono, monospace); letter-spacing: .12em; }
.cinema__hint { margin: .5rem 0 0; color: #6f83a3; font-size: .74rem; }
.cinema__skip { position: absolute; right: 22px; top: 22px; z-index: 3; min-height: 44px; padding: 0 .4rem; border: 0; background: transparent; color: #c5d1e4; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; font: inherit; }
.cinema__segs { position: absolute; left: 0; right: 0; top: 0; z-index: 3; display: flex; gap: 4px; padding: 0 12px; }
.cinema__seg { flex: 1; height: 22px; padding: 9px 0 0; border: 0; background: transparent; cursor: pointer; }
.cinema__seg i { display: block; height: 3px; border-radius: 9px; background: rgba(255,255,255,.2); overflow: hidden; }
.cinema__seg b { display: block; height: 100%; width: 0; background: var(--c-accent); }

@keyframes c-push { from { transform: scale(1); } to { transform: scale(1.2); } }
@keyframes c-pan-r { from { transform: translateX(3.5%) scale(1.12); } to { transform: translateX(-3.5%) scale(1.12); } }
@keyframes c-pan-l { from { transform: translateX(-3.5%) scale(1.12); } to { transform: translateX(3.5%) scale(1.12); } }
@keyframes c-rise { from { transform: translateY(7%) scale(1.05); } to { transform: translateY(-1%) scale(1.1); } }
@keyframes c-pull { from { transform: scale(1.28); } to { transform: scale(1); } }
@keyframes c-drift { from { transform: rotate(-1.2deg) scale(1.1); } to { transform: rotate(1.2deg) scale(1.16); } }
@keyframes c-bob { to { transform: translateY(8px); } }
@keyframes c-wind { 0% { transform: translateX(-12%); opacity: 0; } 20% { opacity: .9; } 100% { transform: translateX(12%); opacity: 0; } }
@keyframes c-reveal { from { opacity: 0; transform: translateY(18px); filter: blur(5px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes c-title { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: scale(1); } }

/* mobile */
@media (max-width: 640px) {
  .cinema__planet, .cinema__prop { top: 54%; }
  .cinema__dust i:nth-child(1) { top: 58%; } .cinema__dust i:nth-child(2) { top: 64%; } .cinema__dust i:nth-child(3) { top: 71%; }
  .cinema__prop { width: min(46vw, 240px); }
  .cinema__content { align-self: end; padding-bottom: max(1.2rem, env(safe-area-inset-bottom)); padding-top: 3.2rem; }
  .cinema__title { font-size: clamp(1.9rem, 9vw, 2.6rem); margin: .6rem 0 .9rem; }
  .cinema__line { min-height: 7.6em; font-size: 1.05rem; line-height: 1.55; }
  .cinema__actions { margin-top: 1.1rem; }
  .cinema__hint { display: none; }
}
@media (max-height: 520px) and (orientation: landscape) {
  .cinema__content { padding: 2.4rem 0 .8rem; align-self: end; }
  .cinema__title { font-size: 1.8rem; margin: .3rem 0 .5rem; }
  .cinema__line { min-height: 0; font-size: 1rem; }
  .cinema__actions { margin-top: .8rem; } .cinema__counter, .cinema__hint { display: none; }
  .cinema__planet, .cinema__prop { top: 60%; }
}

/* reduced motion: still frames, no camera moves, manual stepping */
@media (prefers-reduced-motion: reduce) {
  .cinema, .cinema * { animation: none !important; transition: none !important; }
  .cinema__dust i { opacity: .35; }
}

/* desktop composition: copy up top, controls pinned low, the machine gets the middle */
@media (min-width: 641px) and (min-height: 521px) {
  .cinema__planet, .cinema__prop { top: 75%; }
  .cinema__prop { width: min(28vmin, 250px); }
  .cinema__dust i:nth-child(1) { top: 78%; } .cinema__dust i:nth-child(2) { top: 84%; } .cinema__dust i:nth-child(3) { top: 90%; }
  .cinema__content { position: absolute; inset: 0; width: auto; display: flex; flex-direction: column; align-items: center; padding: clamp(46px, 8vh, 96px) 21px clamp(18px, 3.5vh, 36px); }
  .cinema__content > * { width: min(850px, 100%); }
  .cinema__title { margin: .7rem 0 1rem; font-size: clamp(2.1rem, min(7vw, 11vh), 5.2rem); }
  .cinema__line { min-height: 3.4em; }
  .cinema__actions { margin-top: auto; }
}