/* ========================================================================== */
/* STEAM LANDING PAGE — FINAL CINEMATIC MODULE                                */
/* Version: 1.0                                                              */
/* Purpose: Accepted hero, scroll journey, transition, and mobile behavior.   */
/* Edit this file for future landing-page visual changes.                     */
/* ========================================================================== */

/* -------------------------------------------------------------------------- */
/* 1. Design tokens                                                           */
/* -------------------------------------------------------------------------- */
:root {
  --cinematic-navy: #071525;
  --cinematic-navy-mid: #0b2436;
  --cinematic-navy-light: #14384b;
  --cinematic-surface: #f7fafc;
  --cinematic-teal: #12bfae;
}

body.landing-page {
  background: var(--cinematic-surface) !important;
}

/* -------------------------------------------------------------------------- */
/* 2. Hero video                                                              */
/* -------------------------------------------------------------------------- */
body.landing-page .hero--video {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  grid-template-columns: minmax(0, 820px) !important;
  justify-content: flex-start;
  min-height: calc(100svh - 154px) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--cinematic-navy) !important;
}

body.landing-page .hero__video-bg {
  opacity: .94 !important;
  filter: saturate(1.14) contrast(1.1) brightness(.8) !important;
  transform-origin: center;
  animation: cinematic-camera 22s ease-in-out infinite alternate;
}

body.landing-page .hero__video-overlay {
  background: linear-gradient(90deg, rgba(5,18,35,.7), rgba(5,18,35,.18)) !important;
}

body.landing-page .hero__video-overlay::before,
body.landing-page .hero__video-overlay::after,
body.landing-page .hero--video::after {
  display: none !important;
}

body.landing-page .hero--video > div:first-of-type {
  position: relative;
  z-index: 4;
  width: min(100%, 820px);
  padding: 0 !important;
  color: #fff;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
}

body.landing-page .hero h1,
body.landing-page .hero .lead {
  color: #fff;
  text-shadow: 0 3px 22px rgba(0,0,0,.5);
}

body.landing-page .hero h1 em { color: #37dfd1; }
body.landing-page .hero__eyebrow { color: #67e2ee; }
body.landing-page .hero .btn--ghost { color:#fff; border-color:rgba(255,255,255,.72); background:rgba(255,255,255,.08); }

/* -------------------------------------------------------------------------- */
/* 3. Gallery heading and skip control                                        */
/* -------------------------------------------------------------------------- */
.gallery-title-actions { display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:.8rem; }
.gallery-skip { display:inline-flex; align-items:center; min-height:40px; padding:.55rem .9rem; border:1px solid rgba(255,255,255,.28); border-radius:999px; background:rgba(255,255,255,.1); color:#fff; font-size:.84rem; font-weight:800; text-decoration:none; }

/* -------------------------------------------------------------------------- */
/* 4. Desktop scroll-controlled photo journey                                 */
/* -------------------------------------------------------------------------- */
@media (min-width: 861px) {
  #gallery.gallery-cinematic {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    height: 390vh !important;
    min-height: 390vh !important;
    padding: 0 !important;
    overflow: visible !important;
    perspective: none !important;
    background: var(--cinematic-navy) !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }

  #gallery.gallery-cinematic .section-title {
    position: sticky !important;
    top: 16px !important;
    z-index: 50 !important;
    width: min(1180px, calc(100% - 2rem));
    margin: 0 auto -96px !important;
    padding: 1rem 1.15rem;
    transform: translateY(18px) !important;
    color: #fff;
    border: 1px solid rgba(35,214,195,.24) !important;
    border-radius: 18px;
    background: rgba(7,21,37,.82) !important;
    backdrop-filter: blur(14px);
  }

  #gallery.gallery-cinematic .section-title h2 { color:#fff; }
  #gallery.gallery-cinematic .tag { color:#bceef2; border-color:rgba(99,226,238,.34); background:rgba(18,191,174,.1); }

  #gallery.gallery-cinematic .gallery {
    position: sticky !important;
    top: 0 !important;
    width: 100% !important;
    max-width: none !important;
    height: 100vh !important;
    margin: 0 !important;
    display: block !important;
    overflow: hidden !important;
    transform-style: preserve-3d;
    background: radial-gradient(circle at 50% 48%, var(--cinematic-navy-light), var(--cinematic-navy-mid) 48%, var(--cinematic-navy) 100%) !important;
  }

  #gallery.gallery-cinematic .gallery::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: radial-gradient(circle at center, transparent 58%, rgba(0,0,0,.3)) !important;
    pointer-events: none;
  }

  #gallery.gallery-cinematic .gallery figure,
  #gallery.gallery-cinematic .gallery .g-wide,
  #gallery.gallery-cinematic .gallery .g-tall {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    width: min(72vw, 1080px) !important;
    height: min(76vh, 720px) !important;
    margin: 0 !important;
    transform: translate3d(calc(-50% + var(--journey-x,0vw)), calc(-50% + var(--journey-y,0vh)), 0) rotate(var(--journey-rotate,0deg)) scale(var(--journey-scale,.3)) !important;
    opacity: var(--journey-opacity,0) !important;
    overflow: hidden !important;
    border-radius: 22px !important;
    box-shadow: 0 38px 100px rgba(0,0,0,.62) !important;
    transition: opacity .08s linear !important;
    will-change: transform, opacity;
  }

  #gallery.gallery-cinematic .gallery figure img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transform: scale(1.015) !important;
    animation: none !important;
    filter: saturate(1.08) contrast(1.03) brightness(.98) !important;
  }

  #gallery.gallery-cinematic .gallery figure::before { background:radial-gradient(circle at center,transparent 52%,rgba(2,9,18,.32) 100%),linear-gradient(180deg,rgba(2,9,18,.03),rgba(2,9,18,.32)) !important; }
  #gallery.gallery-cinematic .gallery figure::after { background:linear-gradient(180deg,transparent 58%,rgba(2,9,18,.48)) !important; }
  #gallery.gallery-cinematic .gallery figcaption { z-index:4; font-size:clamp(1.1rem,2vw,2rem) !important; }
  #gallery.gallery-cinematic .gallery-nav { display:none !important; }

  /* Fixed camera while the user is inside the journey. */
  #gallery.gallery-cinematic.journey-active .gallery { position:fixed !important; inset:0 !important; width:100vw !important; height:100vh !important; z-index:20 !important; }
  #gallery.gallery-cinematic.journey-active .section-title { position:fixed !important; top:16px !important; left:50% !important; transform:translateX(-50%) !important; z-index:60 !important; }
  #gallery.gallery-cinematic.journey-finished .gallery { position:absolute !important; top:auto !important; bottom:0 !important; }
}

/* -------------------------------------------------------------------------- */
/* 5. Smooth navy-to-light transition                                         */
/* -------------------------------------------------------------------------- */
body.landing-page #schedule {
  position: relative;
  z-index: 25;
  margin-top: 0 !important;
  padding-top: clamp(3rem,5vw,5rem) !important;
  border-top: 0 !important;
  background: var(--cinematic-surface) !important;
}

body.landing-page #schedule::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 100vw;
  height: clamp(120px,18vw,250px);
  z-index: 0;
  transform: translate(-50%,-99%);
  pointer-events: none;
  background: linear-gradient(180deg, #071525 0%, #102638 18%, #334757 40%, #71808c 62%, #b7c0c7 82%, #f7fafc 100%);
}

body.landing-page #schedule > * { position:relative; z-index:1; }

/* -------------------------------------------------------------------------- */
/* 6. Mobile and accessibility                                                */
/* -------------------------------------------------------------------------- */
@media (max-width: 860px) {
  body.landing-page .hero--video { grid-template-columns:1fr !important; min-height:calc(100svh - 108px) !important; }
  body.landing-page .hero__video-overlay { background:linear-gradient(180deg,rgba(5,18,35,.26),rgba(5,18,35,.62)) !important; }
  .gallery-title-actions { justify-content:flex-start; }
  .gallery-skip { font-size:.78rem; min-height:38px; color:#075fb8; background:#fff; border-color:rgba(7,95,184,.22); }
  body.landing-page #schedule::after { height:130px; }
}

@media (prefers-reduced-motion: reduce) {
  body.landing-page .hero__video-bg { animation:none !important; }
}

@keyframes cinematic-camera {
  0% { transform:scale(1.035) translate3d(-.6%,0,0); }
  50% { transform:scale(1.095) translate3d(1.1%,-.8%,0); }
  100% { transform:scale(1.055) translate3d(-.3%,.6%,0); }
}