/* ==========================================================================
   SERIOUS BIGNESS — site styles
   --------------------------------------------------------------------------
   1. THEME  (colors, fonts, sizes — the only block you should need to edit)
   2. Base
   3. Buttons
   4. Top bar
   5. Hero
   6. Sections (pitch, features, screenshots, studio, press)
   7. Footer
   8. Lightbox
   9. Motion + accessibility
   ========================================================================== */


/* 1. THEME ================================================================ */
:root {
  /* --- Colors (derived from the logo: plum, cream, gold, orange) --- */
  --c-bg:          #2b1d26;   /* page background (plum)                       */
  --c-bg-deep:     #1e131a;   /* darker plum: footer, alternating sections     */
  --c-surface:     #3a2733;   /* cards                                         */
  --c-surface-2:   #4a3242;   /* raised elements, secondary buttons            */
  --c-text:        #fff3d6;   /* cream body text                               */
  --c-text-muted:  #cdb9c3;   /* secondary text                                */
  --c-accent:      #ffbe30;   /* gold: primary buttons, highlights             */
  --c-accent-2:    #ff8228;   /* orange: kickers, button gradient bottom       */
  --c-accent-ink:  #2b1d26;   /* text placed ON gold/orange                    */
  --c-accent-shadow: #a8471a; /* hard shadow under gold buttons                */
  --c-sky:         #56bef0;   /* focus rings + small accents                   */
  --c-green:       #42a064;   /* kaiju green (available, lightly used)         */
  --c-discord:     #5865f2;   /* Discord blurple: the "Join the Discord" button */
  --c-discord-shadow: #3442b8; /* hard shadow under the Discord button          */

  /* --- Fonts (also change the <link> in index.html if you swap families) --- */
  --font-display: 'Lilita One', 'Arial Rounded MT Bold', 'Trebuchet MS', sans-serif;
  --font-body:    'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* --- Sizes --- */
  --logo-max-width: 760px;              /* widest the hero logo will ever be   */
  --topbar-h: 4.25rem;
  --container: 1120px;
  --container-wide: 1360px;
  --container-narrow: 780px;
  --gutter: clamp(1.25rem, 5vw, 3rem);  /* side padding                        */
  --section-pad: clamp(4.5rem, 10vw, 8rem);
  --radius: 20px;
  --radius-sm: 12px;

  /* --- Hero scrim: darkening behind the logo so it reads over busy footage --- */
  --scrim-center: rgba(43, 29, 38, 0.38);
  --scrim-edge:   rgba(43, 29, 38, 0.04);
}


/* 2. Base ================================================================= */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img, svg, video { display: block; max-width: 100%; }
a { color: var(--c-accent); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--c-text); }
h1, h2, h3 { margin: 0; font-weight: 400; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
ol, ul { margin: 0; padding: 0; list-style: none; }

.container {
  width: min(100% - 2 * var(--gutter), var(--container));
  margin-inline: auto;
}
.container--wide   { max-width: var(--container-wide);   width: min(100% - 2 * var(--gutter), var(--container-wide)); }
.container--narrow { max-width: var(--container-narrow); width: min(100% - 2 * var(--gutter), var(--container-narrow)); }

.skip-link {
  position: absolute; left: 1rem; top: -100px; z-index: 100;
  padding: .6rem 1rem; border-radius: 8px;
  background: var(--c-accent); color: var(--c-accent-ink); font-weight: 800;
}
.skip-link:focus { top: 1rem; }

:focus-visible { outline: 3px solid var(--c-sky); outline-offset: 3px; border-radius: 4px; }

/* Typography helpers */
.kicker {
  display: inline-flex; align-items: center; gap: .6em;
  margin: 0 0 .75rem;
  font-weight: 800; font-size: .8rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--c-accent-2);
}
.kicker::before { content: ""; width: 1.6em; height: 3px; border-radius: 2px; background: currentColor; }

.display {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5.8vw, 4.25rem);
  line-height: .95;
  letter-spacing: .005em;
  text-wrap: balance;
  margin: 0 0 .55em;
  text-shadow: 0 4px 0 rgba(0, 0, 0, .18);
}
.display em { font-style: normal; color: var(--c-accent); }

.lede {
  font-size: clamp(1.125rem, 1.4vw + .6rem, 1.4rem);
  line-height: 1.55;
  max-width: 60ch;
}
.lede p + p { margin-top: 1em; }


/* 3. Buttons ============================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  padding: .8em 1.5em;
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 1.05rem; line-height: 1; letter-spacing: .02em;
  color: var(--c-text); background: var(--c-surface-2);
  text-decoration: none; white-space: nowrap;
  box-shadow: 0 5px 0 var(--c-bg-deep);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.btn:hover { color: var(--c-text); transform: translateY(-2px); box-shadow: 0 7px 0 var(--c-bg-deep); filter: brightness(1.08); }
.btn:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--c-bg-deep); }
.btn .icon { width: 1.25em; height: 1.25em; flex: none; }

.btn--primary {
  color: var(--c-accent-ink);
  background: linear-gradient(180deg, var(--c-accent) 0%, var(--c-accent-2) 100%);
  box-shadow: 0 6px 0 var(--c-accent-shadow), 0 14px 30px rgba(0, 0, 0, .35);
}
.btn--primary:hover  { color: var(--c-accent-ink); box-shadow: 0 8px 0 var(--c-accent-shadow), 0 18px 34px rgba(0, 0, 0, .4); }
.btn--primary:active { box-shadow: 0 2px 0 var(--c-accent-shadow); }

.btn--ink {
  color: var(--c-text); background: var(--c-bg);
  box-shadow: 0 6px 0 var(--c-bg-deep);
}
.btn--ink:hover  { box-shadow: 0 8px 0 var(--c-bg-deep); }
.btn--ink:active { box-shadow: 0 2px 0 var(--c-bg-deep); }

.btn--discord {
  color: #fff; background: var(--c-discord);
  box-shadow: 0 6px 0 var(--c-discord-shadow), 0 14px 30px rgba(0, 0, 0, .35);
}
.btn--discord:hover  { color: #fff; box-shadow: 0 8px 0 var(--c-discord-shadow), 0 18px 34px rgba(0, 0, 0, .4); }
.btn--discord:active { box-shadow: 0 2px 0 var(--c-discord-shadow); }

.btn--large { font-size: clamp(1.15rem, 1vw + .9rem, 1.5rem); padding: .85em 1.9em; }
.btn--small { font-size: .95rem; padding: .65em 1.2em; box-shadow: 0 3px 0 var(--c-bg-deep); }
.btn--small:hover { box-shadow: 0 5px 0 var(--c-bg-deep); }
.btn--small:active { box-shadow: 0 1px 0 var(--c-bg-deep); }
.btn--small.btn--primary { box-shadow: 0 3px 0 var(--c-accent-shadow); }
.btn--small.btn--primary:hover { box-shadow: 0 5px 0 var(--c-accent-shadow); }
.btn--small.btn--primary:active { box-shadow: 0 1px 0 var(--c-accent-shadow); }


/* 4. Top bar ============================================================== */
.topbar {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  height: var(--topbar-h);
  display: flex; align-items: center; gap: 1.5rem;
  padding-inline: var(--gutter);
  transition: background-color .3s ease, box-shadow .3s ease;
}
.topbar.is-scrolled {
  background: color-mix(in srgb, var(--c-bg) 88%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .06), 0 10px 30px rgba(0, 0, 0, .25);
}
.topbar__brand {
  display: inline-flex; align-items: center; gap: .6rem;
  margin-right: auto;
  font-family: var(--font-display); font-size: 1.2rem; letter-spacing: .02em;
  color: var(--c-text); text-decoration: none;
  opacity: 0; transform: translateY(-6px);
  transition: opacity .3s ease, transform .3s ease;
}
.topbar__brand img { width: 30px; height: 30px; border-radius: 8px; }
.topbar.is-scrolled .topbar__brand,
.topbar__brand:focus-visible { opacity: 1; transform: none; }
.topbar__nav { display: flex; gap: 1.5rem; }
.topbar__nav a {
  font-weight: 800; font-size: .95rem; color: var(--c-text); text-decoration: none;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
  opacity: .9;
}
.topbar__nav a:hover { opacity: 1; color: var(--c-accent); }
.topbar__actions { display: flex; align-items: center; gap: .5rem; }
@media (max-width: 720px) {
  .topbar__nav { display: none; }
  .topbar { gap: 1rem; }
  .topbar__brand span { display: none; }   /* icon only; no room for the name */
}
@media (max-width: 360px) {
  .topbar .btn--small { font-size: .85rem; padding: .6em 1em; }
}


/* 5. Hero ================================================================= */
.hero {
  position: relative; isolation: isolate;
  min-height: 100vh; min-height: 100svh;
  display: grid; place-items: center;
  padding: calc(var(--topbar-h) + 1.5rem) var(--gutter) 6rem;
  overflow: hidden;
  text-align: center;
}
.hero__media {
  position: absolute; inset: 0; z-index: -1;
  background: var(--c-bg) url("../assets/images/poster.jpg") center / cover no-repeat;
}
.hero__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  pointer-events: none;
  /* Hidden until playback starts (js/main.js adds .is-playing); the poster
     background on .hero__media shows through, cropped the same way. */
  opacity: 0;
  transition: opacity .6s ease;
}
.hero__video.is-playing { opacity: 1; }
/* iOS draws a large play button over a video whose autoplay was blocked
   (Low Power / Low Data mode). Hide it: the page starts playback itself on
   the first tap, and the poster is showing underneath in the meantime. */
.hero__video::-webkit-media-controls-start-playback-button,
.hero__video::-webkit-media-controls { display: none !important; -webkit-appearance: none; }
.hero__scrim {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 55% at 50% 45%, var(--scrim-center), var(--scrim-edge) 70%, transparent 100%),
    linear-gradient(to bottom, rgba(30, 19, 26, .5) 0%, transparent 20%, transparent 72%, var(--c-bg) 100%);
}
.hero__content {
  width: 100%;
  display: grid; justify-items: center; gap: clamp(1.25rem, 3vw, 2rem);
}
.hero__logo { width: 100%; }
.hero__logo img {
  width: auto;                                   /* never upscaled past its 2x size */
  max-width: min(100%, var(--logo-max-width));   /* never wider than the viewport   */
  height: auto;
  margin-inline: auto;
  filter: drop-shadow(0 14px 28px rgba(0, 0, 0, .45));
}
.hero__tagline {
  margin: 0;
  max-width: 34ch;
  font-size: clamp(1.1rem, 1.2vw + .7rem, 1.5rem);
  font-weight: 800; line-height: 1.3;
  text-shadow: 0 2px 6px rgba(0, 0, 0, .55);
  text-wrap: balance;
}
.hero__actions {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: .9rem 1.1rem;
}
.hero__cue {
  position: absolute; left: 50%; bottom: 1.5rem; translate: -50% 0;
  width: 44px; height: 44px; padding: 10px;
  color: var(--c-text); opacity: .75;
  animation: cue-bob 2.2s ease-in-out infinite;
}
.hero__cue:hover { opacity: 1; color: var(--c-accent); }
@keyframes cue-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }


/* 6. Sections ============================================================= */
.section { padding-block: var(--section-pad); scroll-margin-top: var(--topbar-h); }

/* Pitch */
.section--pitch { padding-top: clamp(2rem, 6vw, 5rem); }

/* Features */
.section--features { background: var(--c-bg-deep); }
.features {
  counter-reset: feature;
  display: flex; flex-wrap: wrap; gap: 1.25rem;
  margin-top: 1rem;
}
.feature {
  counter-increment: feature;
  flex: 1 1 calc(33.333% - 1.25rem);
  min-width: min(100%, 280px);
  position: relative;
  padding: 2.25rem 1.9rem 1.9rem;
  background: var(--c-surface);
  border-radius: var(--radius);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 10px 30px rgba(0, 0, 0, .2);
}
.feature::before {
  content: counter(feature, decimal-leading-zero);
  display: block; margin-bottom: .5rem;
  font-family: var(--font-display); font-size: 2.6rem; line-height: 1;
  color: var(--c-accent);
  text-shadow: 0 3px 0 rgba(0, 0, 0, .25);
}
.feature h3 {
  font-family: var(--font-display); font-size: 1.5rem; line-height: 1.1;
  margin-bottom: .6rem;
}
.feature p { color: var(--c-text-muted); font-size: 1rem; }

/* Screenshots */
.gallery {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
  margin-top: 1rem;
}
.shot {
  display: block; position: relative;
  aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--c-surface);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .3);
  transition: transform .2s ease, box-shadow .2s ease;
}
.shot img { width: 100%; height: 100%; object-fit: cover; }
.shot:hover, .shot:focus-visible { transform: translateY(-4px) scale(1.01); box-shadow: 0 18px 40px rgba(0, 0, 0, .4); }

/* Studio */
.section--studio { background: var(--c-bg-deep); }
.section--studio .lede a { font-weight: 800; }

/* Press band */
.section--press {
  background: var(--c-accent);
  color: var(--c-accent-ink);
  padding-block: clamp(3.5rem, 8vw, 6rem);
}
.section--press .display { text-shadow: 0 4px 0 rgba(0, 0, 0, .12); margin-bottom: .35em; }
.press {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 2rem 3rem;
}
.press__text { max-width: 44ch; font-size: 1.125rem; font-weight: 700; opacity: .85; }


/* 7. Footer =============================================================== */
.footer {
  background: var(--c-bg-deep);
  padding-block: 3.5rem 3rem;
  text-align: center;
}
.social {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem;
  margin-bottom: 2rem;
}
.social a {
  display: grid; place-items: center;
  width: 3rem; height: 3rem; border-radius: 50%;
  color: var(--c-text); background: var(--c-surface);
  transition: transform .15s ease, background-color .15s ease, color .15s ease;
}
.social svg { width: 1.4rem; height: 1.4rem; }
.social a:hover { background: var(--c-accent); color: var(--c-accent-ink); transform: translateY(-3px); }
.footer__text { color: var(--c-text-muted); font-size: .95rem; line-height: 1.8; }
.footer__text a { color: var(--c-text-muted); }
.footer__text a:hover { color: var(--c-accent); }


/* 8. Lightbox ============================================================= */
.lightbox {
  border: 0; padding: 0; margin: auto;
  background: transparent;
  max-width: min(96vw, 1800px); max-height: 96vh;
  overflow: visible;
}
.lightbox::backdrop { background: rgba(30, 19, 26, .94); }
.lightbox__img {
  max-width: 96vw; max-height: 92vh;
  width: auto; height: auto;
  border-radius: var(--radius-sm);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
}
.lightbox__close {
  position: fixed; top: 1rem; right: 1rem;
  width: 3rem; height: 3rem; padding: .7rem;
  border: 0; border-radius: 50%;
  background: var(--c-surface); color: var(--c-text);
  cursor: pointer;
}
.lightbox__close:hover { background: var(--c-accent); color: var(--c-accent-ink); }
body.has-lightbox { overflow: hidden; }


/* 9. Motion + accessibility =============================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .hero__video { display: none; }   /* poster stays as the hero background */
}

/* Tall phones: keep the hero from being a very tall empty box */
@media (max-width: 600px) {
  .hero { min-height: 92svh; padding-bottom: 5rem; }
  .btn--large { width: min(100%, 22rem); }
  .hero__actions { width: 100%; flex-direction: column; }
}

/* Very wide screens: don't let the hero content sprawl */
@media (min-width: 1800px) {
  :root { --logo-max-width: 880px; }
}