/* ==========================================================================
   HOME PAGE  (index.html, <body class="studio-home">)
   1. Page and background   2. Hero   3. Games   4. Footer
   Paths are relative to this file, so assets are two folders up.
   ========================================================================== */

/* 1. PAGE AND BACKGROUND  (html: .world-background) ---------------------- */
.studio-home{background:#07100f;isolation:isolate}
.world-background{z-index:-2;background:url('../../assets/hero.webp') 60% center/cover no-repeat}
.world-background::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(3,12,13,.38),rgba(3,12,13,.02) 75%),linear-gradient(0deg,rgba(2,10,10,.6),transparent 75%)}
@media (max-width: 600px) {
  .world-background{background-position:68% center}
  .world-background::after{background:linear-gradient(90deg,#031012a6,#03101240),linear-gradient(0deg,#020a0a80,transparent 80%)}
}

/* 2. HERO  (html: section.intro) ----------------------------------------- */
/* min-height is the old hero height minus the header that now sits above it. */
.intro{position:relative;z-index:1;min-height:calc(580px - var(--header-height));padding-block:125px 130px}
.intro .eyebrow{letter-spacing:.3em;color:var(--paper)}
.subtitle{margin:0 0 22px;font-size:clamp(18px,1.9vw,27px);letter-spacing:-.015em}
@media (min-width: 1600px) { .intro{min-height:calc(650px - var(--header-height));padding-top:155px} }
@media (max-width: 950px) { .intro{padding-top:130px} }
@media (max-width: 600px) {
  .intro{min-height:calc(575px - var(--header-height));padding-block:124px 105px;text-shadow:0 2px 12px #0009}
  .intro .eyebrow{max-width:290px;font-size:9px;letter-spacing:.19em}
  .subtitle{max-width:260px;margin-bottom:25px;font-size:17px;line-height:1.5}
}

/* 3. GAMES  (html: section#games, cards live in components.css) ---------- */
.studio-home .games{padding-block:36px 100px}
@media (max-width: 600px) { .studio-home .games{padding-block:24px 55px} }

/* 4. FOOTER  (home-only tweaks on top of layout.css) --------------------- */
.studio-home footer{padding:28px 0 40px;border-top-color:#e2e9d73b;text-shadow:0 1px 6px #000}
.studio-home .footer-links{color:#d4ddd5}
@media (max-width: 600px) {
  .studio-home footer{gap:22px}
  .studio-home .footer-tag{padding-left:0;border:0}
}

/* Wider side gap for the games section and footer (the hero keeps 9.4%) */
.studio-home .games,.studio-home footer{--shell-inset:96px}
@media (max-width: 950px) { .studio-home .games,.studio-home footer{--shell-inset:56px} }
@media (max-width: 600px) { .studio-home .games,.studio-home footer{--shell-inset:32px} }