/* ============================================================
   OUTSAIL THE SUN — game promo landing page
   Plain CSS. Brand-able values live in :root as tokens —
   re-skinning is a one-place change.
   ============================================================ */

/* --- Self-hosted display font --- */
@font-face {
  font-family: "IM Fell English SC";
  src: url("../fonts/IMFellEnglishSC-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --- Palette: pirate twilight (from key art) --- */
  --c-night:   #160e2b;  /* page background, deep purple-black     */
  --c-deep:    #1e1340;  /* deep violet                            */
  --c-violet:  #2c1c5a;  /* violet                                 */
  --c-plum:    #3d2470;  /* lighter plum                           */
  --c-magenta: #e0529a;  /* the moon — pink/magenta accent         */
  --c-pink:    #ff79b0;  /* bright pink                            */
  --c-gold:    #ffc24b;  /* primary action gold                    */
  --c-amber:   #ff9b3d;  /* amber                                  */
  --c-red:     #e7573f;  /* captain's-coat red                     */
  --c-teal:    #57cfc6;  /* crew teal                              */

  --c-paper:   #f5ead8;  /* warm parchment text                    */
  --c-ink:     #160e2b;  /* near-black (text on light)             */
  --c-muted:   rgba(245, 234, 216, 0.64);
  --c-line:    rgba(245, 234, 216, 0.12);
  --c-panel:   #241652;  /* card surface                           */
  --c-panel-2: #1b1040;

  /* --- Typography --- */
  --font-display: "IM Fell English SC", Georgia, "Times New Roman", serif;
  --font-body: "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  /* --- Layout --- */
  --container: 1140px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --radius: 16px;
  --radius-sm: 10px;

  /* --- Effects --- */
  --shadow: 0 18px 50px -20px rgba(0, 0, 0, 0.7);
  --grad-gold: linear-gradient(120deg, var(--c-gold), var(--c-amber));
  --ring: 0 0 0 3px rgba(224, 82, 154, 0.55);
}

/* ----------------------- Reset / base ----------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--c-paper);
  background: var(--c-night);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

h1, h2, h3 { font-family: var(--font-display); font-weight: 400; line-height: 1.14; margin: 0; }

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }

.muted { color: var(--c-muted); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 50%; top: -60px; transform: translateX(-50%);
  background: var(--c-gold); color: var(--c-ink); padding: 0.6rem 1rem;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm); font-weight: 600; z-index: 200;
  transition: top 0.2s ease;
}
.skip-link:focus { top: 0; }

:focus-visible { outline: none; box-shadow: var(--ring); border-radius: 6px; }

/* ----------------------- Eyebrow / titles ----------------------- */
.eyebrow {
  font-family: var(--font-body);
  font-size: 0.78rem; letter-spacing: 0.22em; text-transform: uppercase;
  font-weight: 600; color: var(--c-magenta); margin: 0 0 0.9rem;
}
.eyebrow--center { text-align: center; }

.section__title {
  font-size: clamp(1.8rem, 4.2vw, 2.8rem); letter-spacing: 0.01em; margin-bottom: 1.2rem;
}
.section__title--center { text-align: center; margin-inline: auto; max-width: 20ch; }

.section { padding-block: clamp(4rem, 9vw, 7.5rem); position: relative; }

/* ----------------------- Buttons ----------------------- */
.btn {
  --btn-pad-y: 0.85rem; --btn-pad-x: 1.5rem;
  display: inline-flex; align-items: center; gap: 0.55rem;
  padding: var(--btn-pad-y) var(--btn-pad-x); border-radius: 999px;
  font-family: var(--font-body); font-weight: 600; font-size: 0.98rem; cursor: pointer;
  border: 1px solid transparent; transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
  white-space: nowrap;
}
.btn__icon { width: 1.2em; height: 1.2em; flex: none; }
.btn--primary {
  background: var(--grad-gold); color: #2a1606;
  box-shadow: 0 10px 30px -10px rgba(255, 194, 75, 0.7);
}
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 16px 36px -12px rgba(255, 194, 75, 0.9); }
.btn--ghost { background: rgba(245, 234, 216, 0.08); color: var(--c-paper); border-color: var(--c-line); backdrop-filter: blur(4px); }
.btn--ghost:hover { background: rgba(245, 234, 216, 0.16); transform: translateY(-2px); }
.btn--sm { --btn-pad-y: 0.55rem; --btn-pad-x: 1.1rem; font-size: 0.9rem; }
.btn--lg { --btn-pad-y: 1.05rem; --btn-pad-x: 2.2rem; font-size: 1.06rem; }

/* ----------------------- Header / nav ----------------------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  padding-block: 1rem; transition: background 0.3s ease, padding 0.3s ease, box-shadow 0.3s ease;
}
.site-header.scrolled {
  background: rgba(22, 14, 43, 0.85); backdrop-filter: blur(12px);
  padding-block: 0.55rem; box-shadow: 0 1px 0 var(--c-line);
}
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }

.brand__name {
  font-family: var(--font-display); font-weight: 400; font-size: 1.2rem;
  letter-spacing: 0.04em; color: var(--c-paper);
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.9), 0 0 9px rgba(0, 0, 0, 0.6), 0 1px 12px rgba(0, 0, 0, 0.5);
}

.nav { display: flex; align-items: center; }
.nav__menu { display: flex; align-items: center; gap: 1.6rem; list-style: none; margin: 0; padding: 0; }
.nav__menu a:not(.btn) { font-size: 0.95rem; color: var(--c-paper); opacity: 0.85; transition: opacity 0.2s ease; }
.nav__menu a:not(.btn):hover { opacity: 1; }

.nav__toggle { display: none; width: 44px; height: 44px; border: 0; background: transparent; cursor: pointer; position: relative; z-index: 110; }
.nav__toggle-bar, .nav__toggle-bar::before, .nav__toggle-bar::after {
  content: ""; position: absolute; left: 11px; width: 22px; height: 2px; background: var(--c-paper);
  border-radius: 2px; transition: transform 0.25s ease, opacity 0.2s ease;
}
.nav__toggle-bar { top: 21px; }
.nav__toggle-bar::before { top: -7px; }
.nav__toggle-bar::after { top: 7px; }
.nav__toggle[aria-expanded="true"] .nav__toggle-bar { background: transparent; }
.nav__toggle[aria-expanded="true"] .nav__toggle-bar::before { transform: translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] .nav__toggle-bar::after { transform: translateY(-7px) rotate(-45deg); }

/* ----------------------- Hero ----------------------- */
.hero {
  position: relative; min-height: 100svh; display: flex; align-items: flex-end; justify-content: center;
  text-align: center; padding: 7rem 0 4rem; overflow: hidden;
  background: var(--c-night) url("../img/hero.webp") center top / cover no-repeat;
}
.hero__keyart { display: none; } /* mobile-only vertical key art; shown at the <=760px breakpoint */
.hero__scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(to bottom,
      rgba(22, 14, 43, 0.55) 0%,
      rgba(22, 14, 43, 0.10) 26%,
      rgba(22, 14, 43, 0.18) 48%,
      rgba(22, 14, 43, 0.80) 84%,
      var(--c-night) 100%);
}
.hero__content { position: relative; z-index: 2; max-width: 48rem; }
.hero__logo { width: min(82vw, 440px); height: auto; margin: 0 auto 1.3rem; filter: drop-shadow(0 12px 40px rgba(0, 0, 0, 0.55)); }
.hero__tagline {
  font-family: var(--font-display); font-weight: 400; font-size: clamp(1.3rem, 3.4vw, 2.1rem);
  color: var(--c-gold); margin: 0 0 1rem; letter-spacing: 0.02em; line-height: 1.2;
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.9), 0 0 11px rgba(0, 0, 0, 0.65), 0 2px 18px rgba(0, 0, 0, 0.55);
}
.hero__lede {
  font-size: clamp(1rem, 1.6vw, 1.16rem); max-width: 44ch; margin: 0 auto 1.8rem;
  color: rgba(245, 234, 216, 0.95); text-shadow: 0 1px 14px rgba(0, 0, 0, 0.65);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.9rem; justify-content: center; margin-bottom: 1.3rem; }
.hero__platforms { font-size: 0.92rem; letter-spacing: 0.04em; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.6); }

/* ----------------------- Trailer ----------------------- */
.section--trailer { background: linear-gradient(to bottom, var(--c-night), var(--c-deep)); }
.trailer {
  position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; margin-top: 2.5rem;
  border: 1px solid var(--c-line); border-radius: var(--radius); overflow: hidden; cursor: pointer;
  background: var(--c-panel); padding: 0; box-shadow: var(--shadow);
}
.trailer__poster {
  position: absolute; inset: 0;
  background: #1b1040 center / cover no-repeat;
  background-image:
    linear-gradient(rgba(22, 14, 43, 0.28), rgba(22, 14, 43, 0.48)),
    url("../img/trailer-poster.webp");
}
.trailer__play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 84px; height: 84px; border-radius: 50%; background: rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(4px); display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, 0.45);
  transition: transform 0.2s ease, background 0.2s ease;
}
.trailer__play svg { width: 34px; height: 34px; color: #fff; margin-left: 4px; }
.trailer:hover .trailer__play { transform: translate(-50%, -50%) scale(1.08); background: rgba(255, 255, 255, 0.26); }
.trailer__label {
  position: absolute; left: 0; right: 0; bottom: 1.1rem; text-align: center;
  font-size: 0.85rem; letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.88); text-transform: uppercase;
}
.trailer iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ----------------------- Features ----------------------- */
.section--features { background: var(--c-deep); }
.features {
  list-style: none; margin: 3rem 0 0; padding: 0;
  display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.feature {
  background: linear-gradient(180deg, var(--c-panel), var(--c-panel-2));
  border: 1px solid var(--c-line); border-radius: var(--radius); padding: 1.8rem 1.6rem;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.feature:hover { transform: translateY(-4px); border-color: rgba(224, 82, 154, 0.5); box-shadow: var(--shadow); }
.feature__icon { display: block; height: 64px; margin-bottom: 1.1rem; }
.feature__icon img { height: 64px; width: auto; display: block; }
.feature__title { font-size: 1.2rem; margin-bottom: 0.5rem; letter-spacing: 0.02em; }
.feature__text { margin: 0; color: var(--c-muted); font-size: 0.98rem; }

/* ----------------------- Gallery ----------------------- */
.section--gallery { background: linear-gradient(to bottom, var(--c-deep), var(--c-night)); }
.gallery {
  margin-top: 3rem; display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.gallery__item {
  padding: 0; border: 1px solid var(--c-line); border-radius: var(--radius); overflow: hidden;
  cursor: pointer; background: var(--c-panel); position: relative; aspect-ratio: 16 / 9;
}
.gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.gallery__item::after {
  content: "⤢"; position: absolute; right: 0.8rem; bottom: 0.6rem; font-size: 1.1rem;
  color: #fff; opacity: 0; transition: opacity 0.2s ease; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7);
}
.gallery__item:hover img { transform: scale(1.05); }
.gallery__item:hover::after { opacity: 0.9; }

/* ----------------------- About ----------------------- */
.section--about { background: var(--c-night); }
.about { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.about__text p { color: rgba(245, 234, 216, 0.86); margin: 0 0 1rem; max-width: 54ch; }
.about__signature { font-style: italic; color: var(--c-muted) !important; font-size: 0.92rem; }
.about__art { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--c-line); box-shadow: var(--shadow); }
.about__art img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

/* ----------------------- CTA / wishlist ----------------------- */
.section--cta { position: relative; text-align: center; overflow: hidden; padding-block: clamp(5rem, 10vw, 8rem); }
.cta__bg {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(60% 80% at 50% 120%, rgba(255, 121, 176, 0.5), transparent 60%),
    linear-gradient(160deg, var(--c-plum), var(--c-violet) 55%, var(--c-deep));
}
.cta { position: relative; z-index: 2; max-width: 40rem; }
.cta__title { font-size: clamp(2rem, 5vw, 3rem); color: #fff; margin-bottom: 1rem; text-shadow: 0 2px 30px rgba(0, 0, 0, 0.4); }
.cta__text { font-size: 1.15rem; color: rgba(255, 255, 255, 0.94); margin: 0 auto 2rem; max-width: 36ch; }
.cta__actions { display: flex; flex-wrap: wrap; gap: 0.9rem; justify-content: center; }
.cta__newsletter { margin-top: 1.6rem; color: rgba(255, 255, 255, 0.82) !important; }

/* ----------------------- Footer ----------------------- */
.site-footer { background: var(--c-night); border-top: 1px solid var(--c-line); padding-block: 3rem; }
.site-footer__inner { display: flex; flex-wrap: wrap; gap: 2rem; align-items: center; justify-content: space-between; }
.site-footer__game { font-family: var(--font-display); font-size: 1.15rem; margin: 0 0 0.4rem; letter-spacing: 0.03em; }
.site-footer__studio { display: inline-flex; align-items: center; gap: 0.6rem; }
.site-footer__studio .muted { font-size: 0.85rem; }
.site-footer__studio img { height: 38px; width: auto; opacity: 0.9; transition: opacity 0.2s ease; }
.site-footer__studio:hover img { opacity: 1; }
.site-footer__social { display: flex; gap: 0.6rem; }
.site-footer__social a {
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
  background: rgba(245, 234, 216, 0.07); border: 1px solid var(--c-line); transition: background 0.2s ease, transform 0.2s ease;
}
.site-footer__social a:hover { background: rgba(224, 82, 154, 0.22); transform: translateY(-2px); }
.site-footer__social svg { width: 20px; height: 20px; color: var(--c-paper); }
.site-footer__meta { text-align: right; font-size: 0.9rem; }
.site-footer__meta a { color: var(--c-gold); }
.site-footer__presskit { margin: 0 0 0.7rem; }
.site-footer__presskit .btn { color: var(--c-paper); }

/* ----------------------- Lightbox ----------------------- */
.lightbox {
  position: fixed; inset: 0; z-index: 300; display: grid; place-items: center;
  background: rgba(10, 6, 20, 0.93); backdrop-filter: blur(6px); padding: 5vmin;
}
.lightbox[hidden] { display: none; }
.lightbox__img { max-width: 92vw; max-height: 86vh; border-radius: var(--radius); box-shadow: var(--shadow); }
.lightbox__close, .lightbox__nav {
  position: absolute; background: rgba(245, 234, 216, 0.1); border: 1px solid var(--c-line);
  color: #fff; cursor: pointer; border-radius: 50%; display: grid; place-items: center; transition: background 0.2s ease;
}
.lightbox__close { top: 4vmin; right: 4vmin; width: 48px; height: 48px; font-size: 1.8rem; line-height: 1; }
.lightbox__nav { top: 50%; transform: translateY(-50%); width: 54px; height: 54px; font-size: 2rem; line-height: 1; }
.lightbox__nav--prev { left: 3vmin; }
.lightbox__nav--next { right: 3vmin; }
.lightbox__close:hover, .lightbox__nav:hover { background: rgba(224, 82, 154, 0.35); }

/* ----------------------- Scroll reveal ----------------------- */
[data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity 0.7s ease, transform 0.7s ease; }
[data-reveal].in-view { opacity: 1; transform: none; }

/* ----------------------- Responsive ----------------------- */
@media (max-width: 760px) {
  /* Mobile hero: a full-screen vertical key art (logo baked in) as the banner,
     the two CTAs pinned over the bottom of the first screen, and the intro copy
     reflowed onto the next screen, below the banner. */
  .hero { background: var(--c-night); position: relative; display: block; min-height: 0; padding: 0; }
  .hero__scrim { display: none; }
  .hero__keyart {
    display: block; width: 100%; height: 100svh;
    background-color: var(--c-night);
    background-image:
      linear-gradient(to top, rgba(22, 14, 43, 0.92) 3%, rgba(22, 14, 43, 0) 30%),
      url("../img/keyart-vertical.webp");
    background-position: center, center 66%;
    background-size: cover, 135%;
    background-repeat: no-repeat;
  }
  .hero__logo { display: none; }                 /* the logo is baked into the key art */
  .hero__content { display: block; position: static; text-align: center; padding-block: 2.4rem 2.8rem; }
  .hero__actions {
    position: absolute; left: var(--gutter); right: var(--gutter); top: calc(100svh - 10.5rem);
    flex-direction: column; gap: 0.7rem; margin: 0; z-index: 3;
  }
  .hero__actions .btn { width: 100%; }
  /* Keep the pinned stack at exactly two buttons, so the `top` offset above stays
     correct and the CTAs don't cover the key art. The trailer is the next section. */
  .hero__trailer-btn { display: none; }
  .nav__toggle { display: block; }
  .nav__menu {
    position: fixed; inset: 0 0 0 auto; width: min(78vw, 320px);
    flex-direction: column; align-items: flex-start; justify-content: center; gap: 1.6rem;
    background: rgba(22, 14, 43, 0.98); backdrop-filter: blur(16px);
    padding: 2rem; transform: translateX(100%); transition: transform 0.3s ease;
    box-shadow: -20px 0 60px -20px rgba(0, 0, 0, 0.8);
  }
  .nav__menu.open { transform: none; }
  .nav__menu a:not(.btn) { font-size: 1.2rem; }
  .about { grid-template-columns: 1fr; }
  .about__art { order: -1; }
  .site-footer__inner { flex-direction: column; align-items: flex-start; text-align: left; }
  .site-footer__meta { text-align: left; }
}

/* Desktop only: shift the hero copy to the right so the logo + text + CTAs clear
   the captain on the left of the wide hero art. (Mobile uses the key-art banner.) */
@media (min-width: 761px) {
  .hero__content { margin-inline-start: auto; margin-inline-end: 6vw; }
}

/* Landscape desktop: cap the hero logo against viewport HEIGHT, so the CTAs stay
   above the fold on short laptops. At 800px tall the uncapped 440px logo plus the
   7rem top padding ate 552px of the screen and pushed the button row to y=843, i.e.
   entirely out of view. 38svh keeps the buttons in the first screen; above ~1158px
   tall the 440px cap wins again and nothing changes. (Portrait hides the logo, so
   this is scoped to landscape.) */
@media (min-width: 761px) and (orientation: landscape) {
  .hero__logo { width: min(82vw, 440px, 38svh); }
}

/* Portrait desktop (e.g. a vertical monitor): use the same vertical key-art banner
   as the phone hero, so the captain is framed properly and the baked-in logo + the
   CTAs sit on the art. Buttons are width-capped and centered so they don't stretch. */
@media (min-width: 761px) and (orientation: portrait) {
  .hero { background: var(--c-night); position: relative; display: block; min-height: 0; padding: 0; }
  .hero__scrim { display: none; }
  .hero__keyart {
    display: block; width: 100%; height: 100svh;
    background-color: var(--c-night);
    background-image:
      linear-gradient(to top, rgba(22, 14, 43, 0.96) 0%, rgba(22, 14, 43, 0.65) 12%, rgba(22, 14, 43, 0) 26%),
      url("../img/keyart-vertical.webp");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
  }
  .hero__logo { display: none; }
  /* Overlay the tagline, lede and (horizontal) CTAs on the lower art, below the
     baked-in logo, instead of pushing them onto the next screen. */
  .hero__content {
    position: absolute; left: 0; right: 0; bottom: 2.4rem;
    margin-inline: auto; max-width: 46rem; padding-inline: var(--gutter);
    text-align: center; z-index: 3;
  }
  .hero__actions {
    flex-direction: row; flex-wrap: wrap; justify-content: center;
    gap: 0.9rem; width: auto; margin: 1.3rem 0 0;
  }
  /* This copy is always in the initial viewport, so show it immediately instead
     of relying on the scroll-reveal observer (whose bottom margin skips the
     lowest elements, i.e. the buttons). */
  .hero__content [data-reveal] { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  [data-reveal] { opacity: 1; transform: none; }
}