/* styles.css — POLYMINAL landing page.
   The game's main menu, revealed as a short intro: the ceiling lamp flickers ON, then the
   POLYMINAL sign buzzes in, then the Steam wishlist widget + social links appear (~6s total).
   Two stacked frames (title-less room + titled room) + pure-CSS animation timeline; no JS.
   Style anchor: docs/ART_STYLE.md §5 — flat black, monospace, 2px #4D574D border,
   warm-yellow #FFFFD9 for hover/selected. */

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  min-height: 100%;
  background: #000;
  color: #B3BDAE;
  font-family: "Courier New", "DejaVu Sans Mono", monospace;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior: none;
}

/* Faint CRT scanlines over the whole page, matching the game's look. */
body::after {
  content: "";
  position: fixed; inset: 0; z-index: 50; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,0.22) 0 1px, transparent 1px 3px);
  mix-blend-mode: multiply;
}

.wrap {
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: clamp(8px, 1.8vh, 18px);
  padding: clamp(14px, 2.5vh, 28px);
}

/* ---- the hero: two stacked main-menu frames ---- */
/* Width capped by vh so the 16:9 box stays short enough that the whole column (hero + tagline
   + the fixed-190px Steam widget + button) fits in one 16:9 viewport without scrolling. */
.stage {
  position: relative;
  width: min(92vw, 960px, 85vh);
  aspect-ratio: 16 / 9;
  /* Slight upward pull so the tagline tucks under the hero, kept small so it lands in the
     faded-to-black floor edge (not on the lit floor). */
  margin-bottom: -2vh;
  /* The lamp lights the whole scene, so flickering the stage brightness = the lamp flickering.
     Intro flicker once (settling ON), then a subtle perpetual buzz. */
  animation: flickerOn 2s ease-out both, lampFlicker 7s 2s ease-in-out infinite;
}
.layer {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
/* The titled frame sits over the title-less room and buzzes in AFTER the lamp settles, so the
   POLYMINAL sign "appears" (the rest of the two frames is identical). */
.title { opacity: 0; animation: titleIn 0.9s 2s ease both; }

.tagline {
  text-align: center;
  color: #C9B5A5;
  font-size: clamp(13px, 3.4vw, 17px);
  line-height: 1.6;
  letter-spacing: 0.03em;
  max-width: 40em;
}

/* ---- Steam native wishlist widget ---- */
/* The widget is a fixed 646x190 iframe. .steam-frame is a fixed-aspect (646:190) box, capped at the
   native width, that scales the iframe to its own width via container-query units (100cqw = the
   box's inline size), so the whole widget always fits — no clipping / cut-off button on mobile. */
/* z-index lifts the widget above the page-wide CRT scanline overlay (body::after, z-index 50)
   so the Steam card renders clean — the scanlines stay on everything else. */
.wishlist { display: flex; justify-content: center; width: 100%; position: relative; z-index: 60; }
.steam-frame {
  width: min(100%, 646px);
  aspect-ratio: 646 / 190;
  container-type: inline-size;
  overflow: hidden;
  background: #1b2838;            /* matches the widget's own card while it loads */
  box-shadow: 0 0 0 1px #2a3f5a;
}
.steam-frame iframe {
  width: 646px; height: 190px;
  border: 0;
  transform-origin: top left;
  transform: scale(calc(100cqw / 646px));
}

/* ---- terminal-panel buttons (ART_STYLE: flat black, 2px #4D574D border, warm-yellow hover) ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 12px 20px;
  border: 2px solid #4D574D; background: #000; color: #B3BDAE;
  text-decoration: none; cursor: pointer;
  font: inherit; font-size: clamp(14px, 3.6vw, 17px);
  letter-spacing: 0.06em; text-transform: uppercase;
  transition: color 0.12s, border-color 0.12s, background 0.12s;
}
.btn:hover, .btn:focus-visible {
  color: #FFFFD9; border-color: #FFFFD9; background: #15180f; outline: none;
}
.btn:active { transform: translateY(1px); }

.socials { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

/* Icon-only variant: a compact 44px square (still a full touch target) holding one brand glyph.
   The glyph inherits the .btn text color, so it warm-yellows on hover/focus like the text buttons. */
.btn.icon { width: 44px; height: 44px; padding: 0; }
.btn.icon svg { width: 22px; height: 22px; display: block; }

/* Footer credit — muted grey, small, under the widget. */
.byline {
  color: #6b7268;
  font-size: clamp(11px, 2.6vw, 13px);
  letter-spacing: 0.08em;
  text-align: center;
}

/* On narrow phones the 7 icons don't fit one row; cap the row so they wrap to a balanced 4 + 3
   instead of 6 + a lone orphan. (One clean row on wider screens.) */
@media (max-width: 460px) {
  .socials { max-width: 14.5rem; }
}

/* The tagline / widget / socials fade up in sequence, after the title. */
.reveal { animation: ctaIn 0.85s both; }
.tagline.reveal  { animation-delay: 2.3s; }
.socials.reveal  { animation-delay: 2.8s; }
.wishlist.reveal { animation-delay: 3.3s; }
.byline.reveal   { animation-delay: 3.8s; }

/* Visually-hidden but readable by assistive tech / crawlers. */
.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;
}

/* ---- the intro timeline ---- */

/* Fluorescent tube struggling to start, then holding ON. */
@keyframes flickerOn {
  0%   { filter: brightness(0); }
  6%   { filter: brightness(0.55); }
  8%   { filter: brightness(0.04); }
  17%  { filter: brightness(0.04); }
  19%  { filter: brightness(0.9); }
  21%  { filter: brightness(0.08); }
  31%  { filter: brightness(0.08); }
  34%  { filter: brightness(1.05); }
  37%  { filter: brightness(0.15); }
  43%  { filter: brightness(0.15); }
  46%  { filter: brightness(1.0); }
  52%  { filter: brightness(0.45); }
  56%  { filter: brightness(1.12); }
  72%  { filter: brightness(0.86); }
  100% { filter: brightness(1); }
}

/* Subtle perpetual buzz once it's on. */
@keyframes lampFlicker {
  0%, 100% { filter: brightness(1); }
  3%   { filter: brightness(0.9); }
  5%   { filter: brightness(1.0); }
  42%  { filter: brightness(1); }
  44%  { filter: brightness(0.82); }
  45%  { filter: brightness(1.03); }
  47%  { filter: brightness(0.95); }
  70%  { filter: brightness(1); }
  72%  { filter: brightness(0.88); }
  74%  { filter: brightness(1); }
}

/* The sign buzzing in like a neon tube. */
@keyframes titleIn {
  0%   { opacity: 0; }
  25%  { opacity: 0.7; }
  35%  { opacity: 0.1; }
  55%  { opacity: 0.95; }
  65%  { opacity: 0.3; }
  100% { opacity: 1; }
}

@keyframes ctaIn {
  0%   { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Reduced-motion: skip the whole intro — show the lit menu + CTAs immediately. */
@media (prefers-reduced-motion: reduce) {
  .stage { animation: none; filter: none; }
  .title { opacity: 1; animation: none; }
  .reveal { animation: none; opacity: 1; }
  .btn { transition: none; }
}