:root {
  --bg: #050505;
  --bg-soft: #0b0b0d;
  --panel: #101014;
  --text: #f4f4f5;
  --muted: #a7a7af;
  --line: rgba(255,255,255,.12);
  --red: #d80d0d;
  --red-bright: #ff2626;
  --silver: #d9d9dd;
  --max: 1180px;
  --radius: 20px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: #020204;
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.6;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }

/* ---------- Cinematic deep-space travel system ---------- */
.space-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -3;
  pointer-events: none;
  background:
    radial-gradient(circle at 48% 16%, rgba(22,31,62,.28), transparent 30%),
    radial-gradient(circle at 80% 62%, rgba(65,12,19,.15), transparent 26%),
    #020204;
}

.space-vignette {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,.18) 72%, rgba(0,0,0,.58) 100%),
    linear-gradient(to bottom, rgba(0,0,0,.12), rgba(0,0,0,.04) 35%, rgba(0,0,0,.18));
}

main, .site-footer { position: relative; z-index: 1; }

/* The page stays readable while the universe remains visible between sections. */
.games-section,
.about-section,
.contact-section {
  isolation: isolate;
}

.games-section::before,
.about-section::before,
.contact-section::before {
  content: "";
  position: absolute;
  inset: 34px 0;
  z-index: -1;
  border-radius: 34px;
  background: linear-gradient(145deg, rgba(5,5,8,.82), rgba(7,7,10,.58));
  border: 1px solid rgba(255,255,255,.045);
  box-shadow: 0 34px 110px rgba(0,0,0,.28);
  backdrop-filter: blur(3px);
}

.hero {
  background: radial-gradient(circle at 50% 28%, rgba(0,0,0,.08), rgba(0,0,0,.36) 67%, rgba(2,2,4,.75) 100%);
}

.hero-grid { opacity: .10; }

.cinematic-band,
.trailer-frame,
.game-card,
.contact-card {
  backdrop-filter: blur(4px);
}

.cinematic-band {
  box-shadow: 0 32px 110px rgba(0,0,0,.62), 0 0 80px rgba(16,34,74,.10);
}

.site-footer {
  margin-top: 52px;
  background: linear-gradient(to bottom, transparent, rgba(2,2,4,.66));
}

@media (max-width: 850px) {
  .games-section::before,
  .about-section::before,
  .contact-section::before {
    inset: 24px 10px;
    border-radius: 24px;
    backdrop-filter: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .space-canvas { transform: none !important; }
}

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  height: 78px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 max(24px, calc((100vw - var(--max))/2));
  background: linear-gradient(to bottom, rgba(5,5,5,.96), rgba(5,5,5,.72));
  border-bottom: 1px solid rgba(255,255,255,.07);
  backdrop-filter: blur(14px);
}
.brand img { width: 220px; height: 52px; object-fit: contain; object-position: left center; }
.site-nav { display: flex; gap: 30px; align-items: center; }
.site-nav a { color: #d8d8dc; font-size: .96rem; font-weight: 650; letter-spacing: .02em; position: relative; }
.site-nav a::after { content:""; position:absolute; left:0; right:100%; bottom:-8px; height:2px; background:var(--red); transition:.25s ease; }
.site-nav a:hover::after, .site-nav a:focus-visible::after { right:0; }
.menu-toggle { display:none; background:none; border:0; padding:8px; }
.menu-toggle span { display:block; width:25px; height:2px; background:white; margin:5px 0; }

.section { position: relative; padding: 110px 24px; }
.hero { min-height: 100svh; display:grid; place-items:center; overflow:hidden; padding-top: 140px; }
.hero-grid { position:absolute; inset:0; opacity:.20; background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px); background-size: 48px 48px; mask-image: linear-gradient(to bottom, black, transparent 82%); }
.hero::after { content:""; position:absolute; inset:0; background: linear-gradient(to bottom, transparent 60%, var(--bg)); pointer-events:none; }
.hero-glow { position:absolute; border-radius:50%; filter:blur(80px); opacity:.30; }
.hero-glow-a { width:450px; height:450px; background:#790000; left:8%; top:16%; }
.hero-glow-b { width:560px; height:560px; background:#1b1b1b; right:-5%; bottom:6%; }
.hero-content { position:relative; z-index:2; width:min(980px,100%); text-align:center; }
.hero-logo { width:min(760px, 90vw); margin:0 auto 20px; filter: drop-shadow(0 16px 45px rgba(220,0,0,.18)); }
.studio-slogan { margin: 4px auto 26px; color: #f0f0f2; font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.25rem, 2.2vw, 1.85rem); font-style: italic; letter-spacing: .025em; text-shadow: 0 2px 24px rgba(255,255,255,.08); }
.eyebrow { margin:0 0 14px; color:#d8d8dd; text-transform:uppercase; letter-spacing:.22em; font-size:.73rem; font-weight:800; }
h1,h2,h3 { margin:0; line-height:1.08; letter-spacing:-.035em; }
h1 { max-width:920px; margin-inline:auto; font-size:clamp(2.45rem,5.4vw,5.2rem); }
h2 { font-size:clamp(2.2rem,4.5vw,4.1rem); }
h3 { font-size:clamp(1.65rem,3vw,2.65rem); }
.hero-copy { max-width:760px; margin:24px auto 0; color:var(--muted); font-size:clamp(1rem,1.4vw,1.2rem); }
.hero-actions { margin-top:34px; display:flex; justify-content:center; gap:14px; flex-wrap:wrap; }
.button { display:inline-flex; min-height:48px; align-items:center; justify-content:center; padding:0 22px; border-radius:999px; border:1px solid var(--line); font-weight:750; transition:.22s ease; }
.button-primary { background:linear-gradient(180deg, #f02424, #b60808); box-shadow:0 10px 28px rgba(224,15,15,.22); }
.button-primary:hover { transform:translateY(-2px); box-shadow:0 14px 36px rgba(224,15,15,.32); }
.button-secondary { background:rgba(255,255,255,.055); }
.button-secondary:hover { background:rgba(255,255,255,.1); }
.button.disabled { opacity:.55; pointer-events:none; }
.scroll-cue { position:absolute; z-index:2; bottom:30px; color:#9a9aa1; font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; }
.scroll-cue span { color:var(--red-bright); margin-left:6px; }

.games-section, .about-section, .contact-section { width:min(var(--max),100%); margin:0 auto; }
.section-heading { max-width:800px; margin-bottom:44px; }
.section-heading > p:last-child { color:var(--muted); font-size:1.08rem; max-width:760px; }
.game-card { display:grid; grid-template-columns: 1.16fr .84fr; overflow:hidden; border:1px solid var(--line); border-radius:var(--radius); background:linear-gradient(135deg, rgba(255,255,255,.045), rgba(255,255,255,.015)); box-shadow:0 28px 80px rgba(0,0,0,.42); }
.game-visual { min-height:530px; position:relative; overflow:hidden; background:#09090b; }
.cinematic-image { background-size: cover; background-position:center; }
.crash-image { background-image: linear-gradient(to right, rgba(0,0,0,.02), rgba(0,0,0,.10)), url('assets/galactic-whispers-zarlixus-crash-landing.png'); }
.game-info { padding:54px; align-self:center; }
.game-info p:not(.eyebrow) { color:var(--muted); margin:22px 0; }
.status-row { display:flex; align-items:center; gap:10px; color:#d6d6da; font-weight:700; }
.status-dot { width:9px; height:9px; border-radius:50%; background:var(--red-bright); box-shadow:0 0 18px rgba(255,42,42,.8); }

.cinematic-band { width:min(1380px, calc(100% - 36px)); min-height:660px; margin:40px auto 20px; border:1px solid var(--line); border-radius:24px; overflow:hidden; position:relative; display:flex; align-items:flex-end; box-shadow:0 30px 90px rgba(0,0,0,.45); }
.cinematic-band-image { position:absolute; inset:0; background-size:cover; background-position:center; transform:scale(1.002); }
.ice-image { background-image:url('assets/galactic-whispers-zarlixus-ice-cap-energy.png'); background-position:center center; }
.cinematic-band-shade { position:absolute; inset:0; background:linear-gradient(to top, rgba(3,3,4,.96) 0%, rgba(3,3,4,.67) 35%, rgba(3,3,4,.08) 72%), linear-gradient(to right, rgba(3,3,4,.35), transparent 55%); }
.cinematic-band-copy { position:relative; z-index:2; max-width:820px; padding:72px; }
.cinematic-band-copy h2 { font-size:clamp(2rem,4.2vw,4rem); text-shadow:0 3px 20px rgba(0,0,0,.75); }
.cinematic-band-copy p:last-child { max-width:720px; color:#c6c6cb; font-size:1.08rem; }

.trailer-section { width:min(1320px,100%); margin:0 auto; }
.trailer-frame { min-height:560px; border:1px solid var(--line); border-radius:var(--radius); display:grid; place-items:center; text-align:center; overflow:hidden; position:relative; background:radial-gradient(circle at center, #1b0505 0, #0c0c0e 38%, #050505 70%); }
.trailer-noise { position:absolute; inset:0; opacity:.14; background-image:linear-gradient(rgba(255,255,255,.03) 50%, transparent 50%); background-size:100% 4px; }
.trailer-center { position:relative; z-index:2; max-width:670px; padding:30px; }
.trailer-center p:last-child { color:var(--muted); }
.play-icon { width:66px; height:66px; display:grid; place-items:center; margin:0 auto 24px; border-radius:50%; border:1px solid rgba(255,255,255,.25); background:rgba(255,255,255,.06); color:var(--red-bright); padding-left:4px; }

.about-layout { display:grid; grid-template-columns:.7fr 1.3fr; gap:70px; align-items:center; }
.about-emblem { padding:25px; border-radius:50%; background:radial-gradient(circle, rgba(255,0,0,.08), transparent 68%); }
.about-copy p:not(.eyebrow) { color:var(--muted); font-size:1.08rem; }

.contact-card { padding:70px; border:1px solid var(--line); border-radius:var(--radius); background:linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.018)); }
.contact-card p:not(.eyebrow) { color:var(--muted); max-width:680px; margin:20px 0 28px; }
.contact-actions { display:flex; gap:14px; flex-wrap:wrap; align-items:center; }
.contact-actions .button { min-width:240px; }


.site-footer { width:min(var(--max), calc(100% - 48px)); margin:0 auto; padding:34px 0 46px; border-top:1px solid var(--line); display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:18px; color:#9c9ca4; font-size:.88rem; }
.site-footer img { width:56px; height:56px; object-fit:cover; border-radius:10px; }
.site-footer strong { display:block; color:white; margin-bottom:2px; }
.site-footer span { display:block; }
.site-footer .footer-slogan { color:#d6d6da; font-style:italic; margin-bottom:2px; }
.site-footer a { color:#d0d0d5; }

.reveal { opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease; }
.reveal.visible { opacity:1; transform:none; }

@media (max-width: 850px) {
  .site-header { height:70px; padding:0 18px; }
  .brand img { width:175px; }
  .menu-toggle { display:block; }
  .site-nav { position:absolute; top:70px; left:0; right:0; padding:22px 24px 26px; background:rgba(6,6,7,.98); border-bottom:1px solid var(--line); display:none; flex-direction:column; align-items:flex-start; gap:18px; }
  .site-nav.open { display:flex; }
  .section { padding:88px 20px; }
  .hero { padding-top:120px; }
  .game-card, .about-layout { grid-template-columns:1fr; }
  .game-visual { min-height:430px; }
  .game-info { padding:34px 26px 38px; }
  .cinematic-band { min-height:600px; width:calc(100% - 28px); }
  .cinematic-band-copy { padding:46px 28px; }
  .about-emblem { width:min(430px,80vw); margin:0 auto; }
  .contact-card { padding:42px 26px; }
  .contact-actions { flex-direction:column; align-items:stretch; }
  .contact-actions .button { width:100%; min-width:0; }
  .site-footer { grid-template-columns:auto 1fr; }
  .site-footer > a { grid-column:2; }
}

@media (max-width: 520px) {
  .hero-actions .button { width:100%; }
  .game-visual { min-height:330px; }
  .cinematic-band { min-height:540px; }
  .ice-image { background-position:44% center; }
  .trailer-frame { min-height:450px; }
  .site-footer { width:calc(100% - 36px); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation:none !important; transition:none !important; }
  .reveal { opacity:1; transform:none; }
}


/* ==========================================================================
   v3.1 — Cinematic "Flash & Pop" pass
   ========================================================================== */

.cosmic-bloom {
  position: fixed;
  z-index: -2;
  pointer-events: none;
  width: 46vw;
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(95px);
  opacity: .18;
  mix-blend-mode: screen;
  animation: cosmicFloat 16s ease-in-out infinite alternate;
}

.cosmic-bloom-a {
  left: -12vw;
  top: 8vh;
  background:
    radial-gradient(circle at 46% 42%,
      rgba(55,115,255,.92) 0%,
      rgba(48,72,180,.46) 18%,
      rgba(95,18,42,.16) 46%,
      transparent 71%);
}

.cosmic-bloom-b {
  right: -14vw;
  top: 49vh;
  background:
    radial-gradient(circle at 48% 44%,
      rgba(255,42,42,.70) 0%,
      rgba(135,22,45,.34) 20%,
      rgba(67,44,135,.12) 48%,
      transparent 72%);
  animation-delay: -7s;
}

.hero-light-sweep {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .22;
  background:
    linear-gradient(112deg,
      transparent 0%,
      transparent 42%,
      rgba(255,255,255,.045) 48%,
      rgba(255,48,48,.07) 50%,
      rgba(255,255,255,.025) 53%,
      transparent 59%,
      transparent 100%);
  transform: translateX(-70%);
  animation: pageSweep 13s ease-in-out infinite;
}

.hero-logo-wrap {
  position: relative;
  width: min(760px, 90vw);
  margin: 0 auto 18px;
  isolation: isolate;
}

.hero-logo-wrap::before,
.hero-logo-wrap::after {
  content: "";
  position: absolute;
  pointer-events: none;
  inset: 14% 4%;
  border-radius: 999px;
  z-index: -1;
}

.hero-logo-wrap::before {
  background: radial-gradient(ellipse, rgba(255,0,0,.30), transparent 66%);
  filter: blur(42px);
  opacity: .72;
  animation: logoPulse 3.6s ease-in-out infinite;
}

.hero-logo-wrap::after {
  top: 49%;
  bottom: auto;
  height: 2px;
  left: 9%;
  right: 9%;
  background: linear-gradient(90deg,
    transparent,
    rgba(255,25,25,.18),
    rgba(255,64,64,.98),
    rgba(255,255,255,.82),
    rgba(255,64,64,.98),
    rgba(255,25,25,.18),
    transparent);
  filter: blur(.3px);
  box-shadow:
    0 0 14px rgba(255,28,28,.75),
    0 0 38px rgba(255,20,20,.30);
  opacity: .76;
  animation: beamBreath 2.9s ease-in-out infinite;
}

.logo-aura {
  position: absolute;
  inset: -10%;
  pointer-events: none;
  overflow: hidden;
  border-radius: 28px;
}

.logo-aura::after {
  content: "";
  position: absolute;
  top: -30%;
  bottom: -30%;
  width: 14%;
  left: -26%;
  transform: skewX(-16deg);
  background: linear-gradient(90deg,
    transparent,
    rgba(255,255,255,.10),
    rgba(255,255,255,.62),
    rgba(255,55,55,.22),
    transparent);
  filter: blur(5px);
  animation: chromeGlint 7.5s cubic-bezier(.45,0,.2,1) infinite;
}

.hero-logo {
  width: 100%;
  margin: 0;
  position: relative;
  z-index: 2;
  filter:
    drop-shadow(0 16px 45px rgba(220,0,0,.23))
    drop-shadow(0 0 13px rgba(255,255,255,.055));
}

.studio-slogan {
  text-shadow:
    0 2px 24px rgba(255,255,255,.08),
    0 0 32px rgba(255,24,24,.10);
}

.hero .eyebrow {
  color: #ededf1;
}

.hero-actions .button-primary {
  position: relative;
  overflow: hidden;
}

.hero-actions .button-primary::after {
  content: "";
  position: absolute;
  top: -80%;
  bottom: -80%;
  left: -40%;
  width: 20%;
  transform: rotate(20deg);
  background: rgba(255,255,255,.25);
  filter: blur(5px);
  animation: buttonShine 5.6s ease-in-out infinite;
}

/* Brighter glass framing around key cinematic sections */
.game-card,
.cinematic-band,
.trailer-frame,
.contact-card {
  border-color: rgba(255,255,255,.16);
  box-shadow:
    0 30px 90px rgba(0,0,0,.52),
    inset 0 1px 0 rgba(255,255,255,.05);
}

.game-card::after,
.trailer-frame::after,
.contact-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(125deg,
    rgba(255,255,255,.17),
    transparent 22%,
    transparent 70%,
    rgba(220,20,20,.20));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.game-card,
.trailer-frame,
.contact-card { position: relative; }

/* Stronger reveal lighting as sections enter the viewport */
.reveal {
  filter: blur(2px);
  transition:
    opacity .82s ease,
    transform .82s cubic-bezier(.2,.7,.2,1),
    filter .82s ease;
}

.reveal.visible {
  filter: blur(0);
}

.reveal.visible::selection {
  background: rgba(220,13,13,.55);
}

/* Add slight section glow when present */
.section-heading h2,
.about-copy h2,
.contact-card h2 {
  text-shadow: 0 0 34px rgba(255,255,255,.045);
}

.cinematic-band-copy h2 {
  text-shadow:
    0 3px 20px rgba(0,0,0,.75),
    0 0 34px rgba(82,135,255,.11);
}

.play-icon {
  box-shadow:
    0 0 28px rgba(255,38,38,.16),
    inset 0 0 18px rgba(255,255,255,.03);
  animation: playPulse 2.7s ease-in-out infinite;
}

/* A red "signal" line that occasionally travels across the viewport */
body::after {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  top: -10px;
  height: 1px;
  z-index: 40;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(90deg,
    transparent,
    rgba(255,28,28,.13),
    rgba(255,90,90,.72),
    rgba(255,255,255,.65),
    rgba(255,50,50,.26),
    transparent);
  box-shadow: 0 0 17px rgba(255,20,20,.38);
  animation: signalScan 15s linear infinite;
}

@keyframes cosmicFloat {
  from { transform: translate3d(-2%, -2%, 0) scale(.96); opacity: .13; }
  to   { transform: translate3d(4%, 4%, 0) scale(1.08); opacity: .22; }
}

@keyframes pageSweep {
  0%, 62% { transform: translateX(-72%); opacity: 0; }
  68% { opacity: .26; }
  79% { transform: translateX(70%); opacity: .19; }
  83%, 100% { transform: translateX(78%); opacity: 0; }
}

@keyframes logoPulse {
  0%, 100% { transform: scale(.96); opacity: .42; }
  50% { transform: scale(1.045); opacity: .84; }
}

@keyframes beamBreath {
  0%,100% { transform: scaleX(.87); opacity: .42; }
  50% { transform: scaleX(1.02); opacity: .94; }
}

@keyframes chromeGlint {
  0%, 55% { left: -26%; opacity: 0; }
  60% { opacity: .25; }
  74% { left: 112%; opacity: .62; }
  78%, 100% { left: 118%; opacity: 0; }
}

@keyframes buttonShine {
  0%, 67% { left: -45%; opacity: 0; }
  72% { opacity: .45; }
  83% { left: 125%; opacity: .10; }
  86%,100% { opacity: 0; }
}

@keyframes playPulse {
  0%,100% { transform: scale(1); box-shadow: 0 0 22px rgba(255,38,38,.12); }
  50% { transform: scale(1.055); box-shadow: 0 0 42px rgba(255,38,38,.25); }
}

@keyframes signalScan {
  0%, 72% { top: -8px; opacity: 0; }
  74% { opacity: .45; }
  91% { top: 100vh; opacity: .16; }
  93%,100% { top: 105vh; opacity: 0; }
}

@media (max-width: 850px) {
  .cosmic-bloom { width: 80vw; filter: blur(75px); opacity: .10; }
  .hero-light-sweep { opacity: .11; }
  body::after { display: none; }
  .logo-aura::after { animation-duration: 10s; }
}

/* Respect the user's motion settings. */
@media (prefers-reduced-motion: reduce) {
  .cosmic-bloom,
  .hero-light-sweep,
  .hero-logo-wrap::before,
  .hero-logo-wrap::after,
  .logo-aura::after,
  .hero-actions .button-primary::after,
  .play-icon,
  body::after {
    animation: none !important;
  }
}