/* The scenery, entrance and scroll each own a layer: their transforms never compete. */
:root {
  --scene-shift: 0px;
  --scene-scale: 1.065;
  --hero-shift: 0px;
  --hero-scale: 1;
  --hero-opacity: 1;
  --overline-opacity: 1;
  --scroll-dim: 0;
  --panel-reveal: 1;
  --preview-shift: 0px;
  --preview-angle: 0deg;
}
body { background: #080e12; }
/* The desktop glide owns scrolling. Restoring CSS snap after it ends can move
   the viewport a second time and invalidate partially visible paint layers. */
html.enhanced-motion { scroll-behavior: auto; scroll-snap-type: none; }
header { padding: 30px 4.5%; background: linear-gradient(#050d1259, transparent); }
.brand { animation: chrome-enter 1s .22s both; }
.header-actions { animation: chrome-enter 1s .4s both; }
.hero { background: #080e12; }
.scene-stage { position: absolute; inset: 0; z-index: 0; overflow: hidden; isolation: isolate; animation: scene-enter 2.2s backwards; pointer-events: none; }
.scenery { inset: -2%; z-index: 0; background: #080e12; transform: translate3d(0,var(--scene-shift),0) scale(var(--scene-scale)); }
.scene {
  /* Each image and its shading are painted into ONE surface. A scrolling
     compositor can no longer expose an undimmed image below a missing veil. */
  background-color: #080e12;
  background-image: linear-gradient(#0008,#0008),
    linear-gradient(180deg,#06121d77 0%,#07121a66 40%,#080e12ed 100%),
    radial-gradient(ellipse at 50% 40%,transparent 10%,#03090d88 95%),
    var(--scene-image);
  background-size: cover;
  background-position: center,center,center,var(--scene-position,50% 50%);
  background-repeat: no-repeat;
  /* Five scenes, with the same 12-second cadence and a 2.64-second crossfade. */
  animation: cinematic-scene 60s linear infinite;
  filter: none;
  will-change: transform,opacity;
}
.scene-one { --scene-image: url('/assets/scp-home-panorama-desktop-20261103.webp'); --scene-position: 50% 54%; animation-delay: 0s; }
.scene-two { --scene-image: url('/assets/scp-home-tunnel-desktop-20261103.webp'); --scene-position: 60% 50%; animation-delay: -48s; }
.scene-three { --scene-image: url('/assets/scp-home-pylone-desktop-20261103.webp'); --scene-position: 50% 50%; animation-delay: -36s; }
.scene-four { --scene-image: url('/assets/scp-home-entree-desktop-20261103.webp'); --scene-position: 54% 55%; animation-delay: -24s; }
.scene-five { --scene-image: url('/assets/scp-home-chalet-desktop-20261103.webp'); --scene-position: 55% 50%; animation-delay: -12s; }
.scroll-shade { position: absolute; inset: 0; z-index: 1; background: #040b11; opacity: var(--scroll-dim); pointer-events: none; }
.hero-center {
  position: relative; z-index: 1; width: auto; max-width: 100%; padding: 60px 24px;
  transform: translate3d(0,var(--hero-shift),0) scale(var(--hero-scale));
  opacity: var(--hero-opacity); will-change: auto;
  filter: none;
}
.hero-center > .overline { font-size: 10px; letter-spacing: .36em; color: #bbcdd6; opacity: var(--overline-opacity); animation: text-enter 1.2s .5s both; }
/* Match the tagline gap to RUBIK'S / GAMES, accounting for the SVG's
   transparent top and bottom padding while keeping the group centered. */
.hero h1 { margin: calc(-2.35% - 1.4px) 0 -2%; animation: signature-enter 1.5s .65s both; }
.hero-signature { width: clamp(300px,36vw,560px); }
.hero-foot { bottom: 32px; z-index: 1; }
.scroll-cue { gap: 17px; font-size: 8px; letter-spacing: .25em; animation: cue-enter 1.3s 1s both; }
.scroll-track { height: 36px; }
body.intro-running :is(.logo-solid,.logo-draw,.logo-edge,.pad-reel) { animation-play-state: paused; }
/* Release entrance compositing once finished, including above the fixed header. */
.intro-complete :is(.scene-stage,.brand,.header-actions,.hero h1,.hero-center > .overline,.scroll-cue) { animation: none; }
.download-button { backdrop-filter: none; -webkit-backdrop-filter: none; }
/* The hero is still visible above the half-height panel. Keep its clock running. */
.panel-active :is(.logo-solid,.logo-draw,.logo-edge,.pad-reel) { animation-play-state: running; }
.page-hidden :is(.scene,.ambient-light,.logo-solid,.logo-draw,.logo-edge,.pad-reel,.scroll-track i),
.hero-out :is(.scene,.ambient-light,.logo-solid,.logo-draw,.logo-edge,.pad-reel,.scroll-track i) { animation-play-state: paused; }

/* A compact product reveal, with a real capture of the launcher. */
.download-section {
  min-height: 50svh; padding: 28px 6% 48px; text-align: left;
  background: radial-gradient(ellipse at 80% 0,#16323f55,transparent 62%),#0b1116;
  border-top: 1px solid #a6dfff19; isolation: isolate;
}
.download-section::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse at 72% 70%,#1177ab0c,transparent 55%);
}
.download-layout { width: min(100%,1190px); display: grid; grid-template-columns: .9fr 1.25fr; align-items: center; gap: clamp(36px,6vw,100px); }
.download-content, .download-section.visible .download-content { opacity: 1; transform: none; transition: none; }
.download-heading { display: flex; align-items: center; gap: 14px; }
.download-heading .app-mark { width: 44px; height: 44px; border-radius: 13px; margin: 0; background: #ffffff03; box-shadow: inset 0 1px #ffffff08; }
.download-heading .app-mark img { width: 30px; height: 30px; border-radius: 8px; }
.download-heading .overline { font-size: 9px; letter-spacing: .22em; color: #9ab1bf; }
.download-content h2 { font-size: clamp(34px,3.2vw,48px); line-height: 1.07; letter-spacing: -.045em; margin: 19px 0 14px; }
.download-content h2 em { color: #a8c9df; }
.intro { font-size: 13px; line-height: 1.65; color: #96aab6; margin: 0 0 23px; }
.mobile-break { display: none; }
.main-download {
  min-height: 51px; padding: 12px 22px; gap: 18px; border-radius: 7px;
  background: #e5f4fc; box-shadow: 0 8px 30px #0002; font-size: 13px;
  transition: transform .35s cubic-bezier(.2,.8,.2,1),background .3s,box-shadow .3s;
}
.main-download:hover { transform: translateY(-3px); box-shadow: 0 10px 35px #26bbff16; }
.main-download:active { transform: translateY(0) scale(.98); }
.release { min-height: 18px; font-size: 10px; color: #758c9b; margin-top: 12px; }
.launcher-preview { margin: 0; min-width: 0; width: min(100%,calc((50svh - 134px) * 1.755)); justify-self: end; perspective: 1500px; }
.launcher-window {
  overflow: hidden; border: 1px solid #bddfff30; border-radius: 11px;
  background: #151718; box-shadow: 0 24px 60px -20px #000c,0 0 55px #26bbff08;
  transform: translate3d(0,var(--preview-shift),0) rotateY(var(--preview-angle));
  transform-origin: 50% 50%;
}
.window-bar {
  height: 28px; padding: 0 12px; display: flex; align-items: center; gap: 8px;
  background: linear-gradient(110deg,#1a2026,#14191e); border-bottom: 1px solid #ffffff09;
  color: #8d9eaa; font-size: 7px; letter-spacing: .18em;
}
.window-controls { margin-left: auto; display: flex; align-items: center; gap: 13px; opacity: .5; }
.window-controls i { display: block; width: 7px; height: 1px; background: #b4c3cd; }
.window-controls i:nth-child(2) { height: 6px; background: none; border: 1px solid #b4c3cd; }
.window-controls i:last-child { height: 7px; background: linear-gradient(45deg,transparent 43%,#b4c3cd 44%,#b4c3cd 56%,transparent 57%),linear-gradient(-45deg,transparent 43%,#b4c3cd 44%,#b4c3cd 56%,transparent 57%); }
.launcher-screen { aspect-ratio: 1250 / 712; overflow: hidden; }
.launcher-screen img { display: block; width: 101.2%; max-width: none; height: auto; }
.launcher-preview figcaption { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 13px; color: #8097a6; font-size: 10px; letter-spacing: .025em; }
.preview-dot { width: 3px; height: 3px; border-radius: 50%; background: #67c4ec; box-shadow: 0 0 8px #26bbff55; }
.download-section footer { bottom: 18px; left: 4.5%; right: 4.5%; font-size: 8px; color: #6d8493; }
footer a { display: inline-flex; align-items: center; gap: 12px; padding: 8px 0; }
footer a span { display: inline-block; transition: transform .3s; }
footer a:hover span { transform: translateY(-3px); }

/* Scroll-linked reveal is reversible; rapid direction changes cannot queue animations. */
.enhanced-motion .download-content > * {
  opacity: var(--panel-reveal);
  transform: translate3d(0,calc((1 - var(--panel-reveal)) * 24px),0);
}
.enhanced-motion .download-content .download-heading { transition: opacity .28s,transform .4s cubic-bezier(.2,.7,.2,1); }
.enhanced-motion .download-content h2 { transition: opacity .32s .035s,transform .45s .035s cubic-bezier(.2,.7,.2,1); }
.enhanced-motion .download-content .intro { transition: opacity .32s .07s,transform .45s .07s cubic-bezier(.2,.7,.2,1); }
.enhanced-motion .download-content .main-download { transition: opacity .3s .1s,transform .4s .1s,background .3s,box-shadow .3s; }
.enhanced-motion .download-content .release { transition: opacity .3s .12s,transform .4s .12s; }
.enhanced-motion .launcher-preview { opacity: var(--panel-reveal); transition: opacity .4s .04s; }

@keyframes cinematic-scene {
  0% { opacity: 1; transform: scale(1.035) translate(0,0); }
  15.6% { opacity: 1; }
  20% { opacity: 0; transform: scale(1.095) translate(-.7%,-.25%); }
  95.6% { opacity: 0; transform: scale(1.02) translate(.4%,.2%); }
  100% { opacity: 1; transform: scale(1.035) translate(0,0); }
}
@keyframes scene-enter { from { opacity: 0; } to { opacity: 1; } }
@keyframes chrome-enter { from { opacity: 0; transform: translate3d(0,-10px,0); } to { opacity: 1; transform: none; } }
@keyframes text-enter { from { opacity: 0; transform: translate3d(0,10px,0); letter-spacing: .48em; } to { opacity: 1; transform: none; letter-spacing: .36em; } }
@keyframes signature-enter { from { opacity: 0; transform: translate3d(0,24px,0) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes cue-enter { from { opacity: 0; } to { opacity: 1; } }

@media(min-width:1600px) { .download-layout { width: min(100%,1320px); grid-template-columns: .85fr 1.15fr; } }
@media(min-width:901px) and (max-height:800px) {
  .download-layout { max-width: 1000px; grid-template-columns: 1fr 1.05fr; gap: 60px; }
  .download-heading .app-mark { width: 36px; height: 36px; border-radius: 11px; }
  .download-content h2 { font-size: 36px; margin: 15px 0 12px; }
  .intro { margin-bottom: 18px; }
}
@media(max-width:900px) and (min-width:651px) {
  .download-section { padding-inline: 5%; }
  .download-layout { gap: 28px; grid-template-columns: 1fr 1.1fr; }
  .download-content h2 { font-size: 33px; }
  .download-heading .overline { font-size: 8px; letter-spacing: .15em; }
  .main-download { padding-inline: 16px; gap: 12px; font-size: 12px; }
}
@media(max-width:650px), (pointer:coarse) {
  /* Native touch scrolling can run ahead of JavaScript by one frame. Keep the
     logo in document flow, also on landscape phones and tablets. Keep native
     scrolling unsnapped when a finger interrupts an anchor glide. */
  .scenery { transform: scale(1.065); }
  .hero-center { transform: none; opacity: 1; }
  .hero-center > .overline { opacity: 1; }
  .scroll-shade { display: none; }
  /* Scroll progress already eases the reveal. Delayed transitions chase stale
     targets during a quick reversal instead of following the finger. */
  .enhanced-motion .download-content > :is(.download-heading,h2,.intro,.main-download,.release),
  .enhanced-motion .launcher-preview { transition: none; }
  .enhanced-motion .download-content .main-download { transition: background .3s,box-shadow .3s; }
}
@media(max-width:650px) {
  header { padding: 22px 6%; }
  .hero { min-height: 520px; }
  .hero-center { padding: 48px 20px; }
  .hero-signature { width: min(79vw,400px); max-width: none; }
  .hero-center > .overline { font-size: 8px; letter-spacing: .22em; }
  .hero-foot { bottom: 29px; }
  .scroll-cue { font-size: 7px; letter-spacing: .17em; }
  .scene-one { --scene-image: url('/assets/scp-home-panorama-mobile-20261103.webp'); --scene-position: 50% center; }
  .scene-two { --scene-image: url('/assets/scp-home-tunnel-mobile-20261103.webp'); --scene-position: 62% center; }
  .scene-three { --scene-image: url('/assets/scp-home-pylone-mobile-20261103.webp'); --scene-position: 50% center; }
  .scene-four { --scene-image: url('/assets/scp-home-entree-mobile-20261103.webp'); --scene-position: 54% center; }
  .scene-five { --scene-image: url('/assets/scp-home-chalet-mobile-20261103.webp'); --scene-position: 55% center; }
  .download-section { min-height: 50svh; padding: 32px 7% 62px; text-align: center; }
  .download-layout { grid-template-columns: 1fr; gap: 24px; max-width: 370px; }
  .download-heading { justify-content: center; gap: 10px; }
  .download-heading .app-mark { width: 34px; height: 34px; border-radius: 10px; }
  .download-heading .app-mark img { width: 25px; height: 25px; border-radius: 7px; }
  .download-heading .overline { font-size: 8px; letter-spacing: .17em; }
  .download-content h2 { font-size: 34px; margin: 17px 0 12px; }
  .intro { font-size: 12px; margin-bottom: 20px; }
  .main-download { width: 100%; max-width: 320px; min-height: 50px; gap: 16px; }
  .release { font-size: 9px; margin-top: 10px; margin-bottom: 0; }
  .launcher-preview { width: min(100%,290px); margin: 0 auto; }
  .window-bar { height: 20px; font-size: 6px; padding-inline: 9px; }
  .window-bar img { width: 9px; height: 9px; }
  .launcher-window { border-radius: 8px; }
  .launcher-preview figcaption { font-size: 9px; margin-top: 9px; }
  .download-section footer { left: 7%; right: 7%; bottom: 15px; }
  @keyframes text-enter { from { opacity: 0; transform: translate3d(0,10px,0); letter-spacing: .3em; } to { opacity: 1; transform: none; letter-spacing: .22em; } }
}
@media(max-width:360px) {
  .hero-center > .overline { font-size: 7px; }
  .download-content h2 { font-size: 30px; }
  .mobile-break { display: block; }
  .launcher-preview { width: 250px; max-width: 100%; }
  .main-download { font-size: 12px; padding-inline: 15px; gap: 12px; }
}
@media(max-width:650px) and (max-height:700px) {
  .download-layout { gap: 20px; }
  .launcher-preview { width: 210px; }
  .launcher-preview figcaption { display: none; }
}
@media(prefers-reduced-motion:reduce) {
  .scene-stage,.scenery,.hero-center,.launcher-window { transform: none!important; opacity: 1; will-change: auto; }
  .scene-one { opacity: 1; transform: none; }
  .scene:not(.scene-one),.ambient-light,.scroll-shade { display: none; }
  .hero h1,.hero-center > .overline,.brand,.header-actions,.scroll-cue { opacity: 1; transform: none; filter: none; }
  .enhanced-motion .download-content > *,.enhanced-motion .launcher-preview { opacity: 1; transform: none; }
}