/* ==========================================================================
   Alien Campfire — studio site
   --------------------------------------------------------------------------
   Concept: the name, made literal. A campfire burns just below the bottom of
   the viewport; you never see flames, only glow and embers rising past the
   text. Fixed, so the reader sits by the fire the whole way down the page.

   Type roles:
     Display (Fredoka 600) — the logo's own face. Warm, rounded: "campfire".
     Body    (system sans) — quiet, gets out of the way.
     Mono                  — technical counterpoint: labels, data: "alien".

   Committed to a single dark theme on purpose. A campfire at night has no
   light mode; a light version would be a different idea, not this one.
   ========================================================================== */

/* -------------------------------------------------------------- tokens -- */

:root {
  --void:       #0F0C17;  /* alien night — violet-biased, never pure black  */
  --ash:        #1A1524;  /* raised surfaces                                */
  --ember:      #FF7A45;  /* the fire — primary accent                      */
  --ember-core: #FFD49A;  /* hot core — highlights, hover                   */
  --alien:      #6EE7C8;  /* bioluminescent cool — secondary accent         */

  --ink:        #ECE7F3;  /* neutrals carry a violet bias so they read as   */
  --ink-dim:    #A79EBB;  /* chosen rather than inherited                   */
  --ink-faint:  #6E6683;

  --rule: rgba(255, 122, 69, 0.18);

  --display: "Fredoka", "Nunito", system-ui, sans-serif;
  --body:    system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono:    ui-monospace, "Cascadia Mono", "SF Mono", Consolas, monospace;

  --measure: 62ch;
  --pad: clamp(1.25rem, 5vw, 2.5rem);

  /* Hero logo lockup. --lock-shift is negative: the wordmark overlaps the
     emblem's empty right-hand box space so the letters sit an A's-thickness
     off the art. Kept proportional to the emblem so it holds on small screens. */
  --emblem-h: clamp(6rem, 25vw, 10.6rem);
  --lock-shift: calc(var(--emblem-h) * -0.179);
  --wm-tracking: 0.04em;
  --alien-indent: 0.62ch;
}

/* Single-theme commit: the viewer's toggle must not bleach the page. */
html,
:root[data-theme="light"],
:root[data-theme="dark"] { color-scheme: dark; }

/* --------------------------------------------------------------- reset -- */

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

body {
  margin: 0;
  background: var(--void);
  color: var(--ink);
  font-family: var(--body);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }

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

/* ---------------------------------------------------------- background -- */

#scene {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* Keeps type legible over the starfield and the fire glow. */
.scrim {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(15, 12, 23, 0.72) 0%,
    rgba(15, 12, 23, 0.55) 40%,
    rgba(15, 12, 23, 0.35) 70%,
    rgba(15, 12, 23, 0.15) 100%);
}

/* -------------------------------------------------------------- layout -- */

.page {
  position: relative;
  z-index: 2;
  max-width: calc(var(--measure) + var(--pad) * 2);
  margin-inline: auto;
  padding-inline: var(--pad);
  padding-block: clamp(3rem, 10vh, 6rem) 0;
  display: flex;
  flex-direction: column;
  gap: clamp(4rem, 11vh, 7rem);
}

.page > section {
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
}

hr.rule {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 0;
  width: 100%;
}

/* ---------------------------------------------------------------- type -- */

.eyebrow {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ember);
  margin: 0;
}
.eyebrow.cool { color: var(--alien); }

h1 {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(2.4rem, 9.5vw, 4.6rem);
  line-height: 0.96;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  text-wrap: balance;
  margin: 0;
}

h1 .glow {
  display: block;
  color: var(--ember-core);
  text-shadow: 0 0 30px rgba(255, 122, 69, 0.45),
               0 0 72px rgba(255, 122, 69, 0.20);
}

h2 {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.5rem, 4.6vw, 2rem);
  line-height: 1.14;
  text-transform: uppercase;
  text-wrap: balance;
  margin: 0;
}

h3 {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.15rem;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  margin: 0;
}

p { margin: 0; }

.lede {
  font-size: clamp(1.1rem, 1rem + 0.5vw, 1.3rem);
  line-height: 1.5;
  text-wrap: pretty;
}

.dim { color: var(--ink-dim); }

a {
  color: var(--ember);
  text-decoration-color: rgba(255, 122, 69, 0.4);
  text-underline-offset: 0.2em;
}
a:hover { color: var(--ember-core); text-decoration-color: currentColor; }

a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 2px solid var(--alien);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------------------------------------------------------------- hero -- */

.hero { gap: 1.5rem; padding-block-end: clamp(1rem, 4vh, 2rem); }

/* The hero lockup — two-tone emblem (white alien, lit hat + campfire) tucked
   against the wordmark. The <h1> still carries the name for search and screen
   readers; the emblem is decorative and inlined so each part can be lit. */
.hero-lockup { display: flex; align-items: flex-end; }

.mark {
  flex: none;
  height: var(--emblem-h);
  aspect-ratio: 229 / 205;
}
.mark svg { display: block; width: 100%; height: 100%; overflow: visible; }
.mark .ac-alien { fill: var(--ink); }               /* alien stays white */
.mark .ac-fire {                                     /* hat + tent + campfire, lit */
  fill: var(--ember-core);
  filter: drop-shadow(0 0 3px rgba(255, 150, 60, 0.9))
          drop-shadow(0 0 7px rgba(255, 122, 69, 0.55));
}

/* Wordmark: heavier + larger than the body h1, bottom-aligned to the chin and
   overlapped left so the letters tuck against the head/hat. Scoped to the
   lockup so other pages' <h1> keep the global treatment. */
.hero-lockup h1 {
  font-weight: 700;
  font-size: clamp(2.78rem, 10.38vw, 5.08rem);
  letter-spacing: var(--wm-tracking);
  line-height: 0.96;
  margin: 0 0 0 var(--lock-shift);
  transform: translateY(0.06em);
}
.hero-lockup .a1 { padding-left: var(--alien-indent); }  /* A points at the C */

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.4rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* ---------------------------------------------------------- game block -- */

/* Enemy cube tucked against the game name. Decorative (alt=""), so the title
   still reads cleanly to screen readers. */
.game-title {
  display: flex;
  align-items: center;
  gap: 0.5em;
}

.game-cube {
  flex: none;
  width: auto;
  height: 1.6em;
  filter: drop-shadow(0 0 10px rgba(187, 83, 224, 0.45));
}

.plate {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  background: var(--ash);
  border: 1px solid var(--rule);
  display: grid;
  place-items: center;
  overflow: hidden;
}

.plate iframe,
.plate video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.plate-label {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  text-align: center;
  padding-inline: 1rem;
  line-height: 1.9;
}

.plate::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 120%, rgba(110, 231, 200, 0.09), transparent 65%);
  pointer-events: none;
}

/*  The trailer is a click-to-load facade, not a live embed.

    "No analytics. No tracking cookies. No third-party scripts." is a settled
    decision (docs/orientation.md), and a plain YouTube iframe would quietly
    break it: it runs Google's player and sets its cookies on every page load,
    for every visitor, whether or not anybody watches. It would also drag
    YouTube into the privacy policy, which is meant to stay short enough to be
    worth reading.

    So the page ships a poster and a play button and nothing else. The first
    click is what fetches the player — trailer.js swaps the anchor below for
    the iframe — and until then nothing at all is requested from Google's
    video side. (The Fredoka stylesheet is a separate, already-settled call.)
    The embed host is youtube-nocookie, so even after the click there is no
    ad-profile cookie.

    Keep the anchor an anchor: with scripting off it is still a working link
    to the video. A <button> would leave those visitors a dead plate.  */
.plate--trailer a {
  position: absolute;
  inset: 0;
  display: block;
  text-decoration: none;
}

.plate--trailer img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/*  The plate's glow wash belongs to the empty placeholder. Over the poster's
    key art it only muddies it, and over a playing video it would be wrong. */
.plate--trailer::after { content: none; }

/*  Drawn rather than an image: crisp at any size, nothing to load. Ember
    because this is the studio's site and ember is the studio's accent — and
    it separates cleanly from the poster's purples. Sized from the plate's
    HEIGHT so it can never outgrow its own plate on a narrow screen. */
.plate--trailer .play {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  height: clamp(40px, 22%, 72px);
  width: auto;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  /*  Heavier than it looks like it needs to be. The poster is busy art, and
      the button lands on a dark rock with bright cyan just below it — a thin
      ring at low alpha disappeared into both. */
  color: var(--ember-core);
  background: rgba(15, 12, 23, 0.78);
  border: 2px solid rgba(255, 122, 69, 0.85);
  box-shadow: 0 0 30px rgba(255, 122, 69, 0.45), 0 2px 16px rgba(0, 0, 0, 0.55);
  transition: background 220ms ease, box-shadow 220ms ease, scale 220ms ease;
}
.plate--trailer .play svg { width: 46%; height: 46%; display: block; margin-left: 8%; }

.plate--trailer:hover .play,
.plate--trailer a:focus-visible .play {
  background: rgba(255, 122, 69, 0.3);
  box-shadow: 0 0 34px rgba(255, 122, 69, 0.55);
  scale: 1.06;
}

/*  The site's focus ring sits 3px OUTSIDE the element; the plate clips its
    overflow, so on this one link that ring would be invisible. Draw it just
    inside the edge instead. */
.plate--trailer a:focus-visible { outline-offset: -4px; border-radius: 0; }

.platforms {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.platforms li {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--alien);
  border: 1px solid rgba(110, 231, 200, 0.28);
  padding: 0.35rem 0.7rem;
}

/* -------------------------------------------------------------- signup -- */

.signup {
  background: var(--ash);
  border: 1px solid var(--rule);
  padding: clamp(1.25rem, 4vw, 1.75rem);
}

.signup-form { display: flex; flex-wrap: wrap; gap: 0.6rem; }

.signup-form input {
  flex: 1 1 14rem;
  min-width: 0;
  background: var(--void);
  border: 1px solid var(--ink-faint);
  color: var(--ink);
  font-family: var(--body);
  font-size: 0.95rem;
  padding: 0.7rem 0.85rem;
}
.signup-form input::placeholder { color: var(--ink-faint); }
.signup-form input:disabled,
.signup-form button:disabled { opacity: 0.45; cursor: not-allowed; }

.signup-form button {
  background: var(--ember);
  color: var(--void);
  border: 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.65rem 1.5rem;
  cursor: pointer;
  transition: background 140ms ease;
}
.signup-form button:hover:not(:disabled) { background: var(--ember-core); }

.note {
  font-family: var(--mono);
  font-size: 0.7rem;
  line-height: 1.7;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
}

/* -------------------------------------------------------------- footer -- */

footer {
  position: relative;
  z-index: 2;
  max-width: calc(var(--measure) + var(--pad) * 2);
  margin-inline: auto;
  /* Deep bottom padding leaves the fire room to breathe under the content. */
  padding: clamp(3rem, 8vh, 4.5rem) var(--pad) clamp(9rem, 26vh, 15rem);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.5rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.colophon {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
  line-height: 1.9;
}

/* ------------------------------------------------------------ prose ----- */
/* For long-form pages: privacy policy, press kit, devlog entries. */

.prose { display: flex; flex-direction: column; gap: 1.15rem; }
.prose h2 { margin-block-start: 1.5rem; }
.prose h3 { margin-block-start: 1rem; }
.prose p,
.prose li { color: var(--ink-dim); }
.prose ul, .prose ol { margin: 0; padding-inline-start: 1.4rem; }
.prose li + li { margin-block-start: 0.4rem; }

.prose table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.prose th, .prose td {
  text-align: left;
  padding: 0.6rem 0.8rem;
  border-bottom: 1px solid var(--rule);
}
.prose th { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ember); }

/* Wide content scrolls inside its own box; the page body never does. */
.scroll-x { overflow-x: auto; max-width: 100%; }

/* ------------------------------------------------------------ entrance -- */

.rise {
  opacity: 0;
  transform: translateY(14px);
  animation: rise 900ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.rise:nth-child(1) { animation-delay:  60ms; }
.rise:nth-child(2) { animation-delay: 160ms; }
.rise:nth-child(3) { animation-delay: 260ms; }
.rise:nth-child(4) { animation-delay: 360ms; }
.rise:nth-child(5) { animation-delay: 440ms; }

@keyframes rise { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .rise { animation: none; opacity: 1; transform: none; }
  *, *::before, *::after { transition-duration: 1ms !important; }
}