/* ============================================================================
   CODE QUEST — landing.css
   The title screen (index.html), rendered by js/pages/start.js.

   A game cover: the world artwork fills the viewport, the game's name sits on
   top of it, and there is exactly one way in. Nothing else is on this screen —
   progress, chapters and rewards all live on the dashboard behind it.

   The artwork itself comes from the project's own assets (.cq-bg, applied from
   the manifest). Everything drawn here is CSS: the scrims, the light behind
   the wordmark, the pulse on the start control. No new image file, no icon
   file, no emoji.

   1. STAGE        the full-bleed screen and its scrims
   2. LOGO         eyebrow · wordmark · sub · accent
   3. START        the one control, and the "tap anywhere" hint
   4. BAR          the quiet strip: sound and version
   5. RESPONSIVE
   6. REDUCED MOTION
   ========================================================================== */

/* ============================================================================
   1. STAGE
   ========================================================================== */

/* The cover is the only page that goes edge to edge, so it undoes the page
   shell's gutter and vertical rhythm rather than fighting them: index.html
   asks for .cq-main--full.cq-main--flush, and the footer strip that every
   other page shows is replaced here by the screen's own bottom bar. */
body[data-cq-state='START'] .cq-footer {
  display: none;
}

body[data-cq-state='START'] .cq-main {
  padding-inline: 0;
}

/* On the cover the artwork IS the design, so it is shown at nearly full
   strength and the page-wide scrim steps back. Legibility comes from the two
   local scrims below, which darken only the bands the text actually sits in —
   every other page keeps the dimmer default because it has dense text over
   the same plate. */
body[data-cq-state='START'] .cq-bg__img {
  opacity: 0.95;
}

body[data-cq-state='START'] .cq-bg::after {
  background: linear-gradient(
    180deg,
    rgba(3, 8, 20, 0.34) 0%,
    rgba(3, 8, 20, 0.2) 44%,
    rgba(3, 8, 20, 0.48) 100%
  );
}

.cq-title {
  position: relative;
  display: grid;
  grid-template-rows: 1fr auto;
  align-items: end;
  /* The cover is the one page with no HUD bar (index.html leaves #cq-hud
     empty), so it fills the WHOLE viewport. Subtracting --hud-h here — which
     every other page has to do — left a 60px band of the page's own ground
     showing under the artwork. */
  min-height: 100vh;
  min-height: 100dvh;
  padding: clamp(var(--sp-5), 5vh, var(--sp-8)) var(--gutter) 0;
  overflow: clip;
  cursor: pointer;
}

/* Two scrims, both needed: a wide floor so the plate reads against bright
   sky in the artwork, and a soft top so the artwork does not collide with the
   top of the window. They are on the screen, not on the photograph, so the
   artwork itself is never dimmed more than it has to be. */
.cq-title::before,
.cq-title::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  pointer-events: none;
}

.cq-title::before {
  top: 0;
  height: 30%;
  background: linear-gradient(180deg, rgba(3, 8, 20, 0.55), transparent);
}

.cq-title::after {
  bottom: 0;
  height: 64%;
  background: linear-gradient(
    0deg,
    rgba(3, 8, 20, 0.88) 0%,
    rgba(3, 8, 20, 0.52) 34%,
    transparent 100%
  );
}

/* The lock-up sits slightly below the optical centre — high enough to leave
   the artwork's sky visible above it, low enough that the start control and
   the hint under it are still comfortably inside the frame. */
.cq-title__plate {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: clamp(var(--sp-3), 2vh, var(--sp-5));
  width: min(var(--content-max), 100%);
  margin-inline: auto;
  padding-block: clamp(var(--sp-5), 6vh, var(--sp-8)) clamp(var(--sp-4), 4vh, var(--sp-7));
  text-align: center;
}

/* The lock-up lands on the brightest part of the artwork (open sky just above
   the horizon), which is where the Thai lines were hardest to read. This is a
   soft oval of shade that follows the plate rather than a heavier scrim over
   the whole screen — the text gains contrast, the artwork keeps its light.

   It carries more weight than it used to: the letters here have no shadow and
   no outline any more, so this is the ONLY thing separating them from the
   sky. */
.cq-title__plate::before {
  content: '';
  position: absolute;
  inset: -12% -8%;
  z-index: -1;
  pointer-events: none;
  /* The ellipse has to finish fading INSIDE the box. At `ellipse 66% 62% at
     50% 52%` with the last stop at 93%, the gradient still had colour when it
     reached the top edge of the element — which drew a hard horizontal line
     across the artwork. Vertical radius 48% against a half-box of 50%, with
     transparent at 100%, lands the fade just short of the edge. */
  background: radial-gradient(
    ellipse 58% 48% at 50% 50%,
    rgba(3, 8, 20, 0.82) 0%,
    rgba(3, 8, 20, 0.62) 44%,
    rgba(3, 8, 20, 0.24) 74%,
    transparent 100%
  );
}

/* ============================================================================
   2. LOGO
   ========================================================================== */

.cq-title__eyebrow {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--sp-3);
  margin: 0;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  color: var(--cyan-100);
}

.cq-title__eyebrow b {
  color: var(--gold-200);
  font-weight: var(--fw-black);
}

.cq-title__logo {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 0.15em;
}

/* A wide bloom of light behind the wordmark, contained by the stage's clip. */
.cq-title__logo::before {
  content: '';
  position: absolute;
  inset: -70% -26%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(
    ellipse 56% 46% at 50% 52%,
    rgba(63, 201, 247, 0.3) 0%,
    rgba(63, 201, 247, 0.09) 44%,
    transparent 72%
  );
  animation: cq-bloom-breathe 7s var(--ease-in-out-soft) infinite;
}

/* The wordmark stays on one line at every width, so its size is a function of
   the viewport until the type scale can take over on a desktop. */
.cq-title__name {
  margin: 0;
  font-family: var(--font-display);
  font-size: min(var(--fs-5xl), 13.5vw);
  font-weight: var(--fw-black);
  letter-spacing: 0.04em;
  line-height: 0.92;
  white-space: nowrap;
}

@media (min-width: 760px) {
  .cq-title__name {
    font-size: var(--fs-5xl);
  }
}

/* The middle line of the lock-up: ruled on both sides, the way a game's
   subtitle sits under its name. It is Thai, so it is set at a real reading
   size with only light tracking — the ruled lines carry the "subtitle" look
   that wide letter-spacing used to carry, without breaking up the syllables. */
.cq-title__sub {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(var(--sp-3), 2vw, var(--sp-5));
  width: 100%;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 0.85rem + 1.55vw, 2rem);
  font-weight: var(--fw-bold);
  letter-spacing: 0.1em;
  text-indent: 0.1em;
  line-height: 1.45;
  color: var(--text-primary);
}

.cq-title__sub::before,
.cq-title__sub::after {
  content: '';
  flex: 1 1 auto;
  max-width: clamp(28px, 12vw, 150px);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(215, 235, 255, 0.6));
}

.cq-title__sub::after {
  background: linear-gradient(90deg, rgba(215, 235, 255, 0.6), transparent);
}

/* The accent line — the "ICEBORNE" slot: the loudest colour on the screen. */
.cq-title__accent {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 0.7rem + 3.4vw, 2.85rem);
  font-weight: var(--fw-black);
  letter-spacing: 0.12em;
  line-height: 1;
  background: linear-gradient(180deg, var(--cyan-100) 10%, var(--cyan-400) 92%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ============================================================================
   3. START
   ========================================================================== */

/* The artwork behind this band is the brightest part of the plate (open sky),
   so the control and its hint carry their own soft halo rather than relying on
   the page scrim — which is deliberately light on this screen. */
.cq-title__enter {
  position: relative;
  display: grid;
  justify-items: center;
  gap: var(--sp-3);
  margin-top: clamp(var(--sp-3), 3vh, var(--sp-6));
}

.cq-title__enter::before {
  content: '';
  position: absolute;
  inset: -40% -30%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(
    ellipse 50% 50% at 50% 50%,
    rgba(3, 8, 20, 0.62) 0%,
    rgba(3, 8, 20, 0.32) 52%,
    transparent 78%
  );
}

/* Not a panel button: a game's "press start" — wide letter-spacing, a hairline
   frame, and a slow breath so the screen never looks frozen. */
.cq-title__start {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: var(--sp-3) clamp(var(--sp-6), 6vw, var(--sp-9));
  border: var(--border-thin) solid rgba(122, 221, 255, 0.55);
  border-radius: var(--r-pill);
  background: linear-gradient(180deg, rgba(63, 201, 247, 0.18), rgba(8, 20, 40, 0.5));
  box-shadow: 0 0 0 1px rgba(3, 8, 20, 0.5), 0 10px 30px rgba(3, 8, 20, 0.55),
    inset 0 1px 0 rgba(215, 235, 255, 0.22);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-black);
  letter-spacing: 0.08em;
  text-indent: 0.08em;
  cursor: pointer;
  overflow: hidden;
  animation: cq-start-breathe 3.4s var(--ease-in-out-soft) infinite;
  transition: transform var(--dur-fast) var(--ease-out-quint),
    border-color var(--dur-fast) linear, box-shadow var(--dur-mid) var(--ease-out-expo);
}

.cq-title__start-label {
  position: relative;
  z-index: 1;
}

/* A light that sweeps across the control, slowly, once every few seconds. */
.cq-title__start-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    transparent 34%,
    rgba(215, 235, 255, 0.3) 50%,
    transparent 66%
  );
  transform: translate3d(-120%, 0, 0);
  animation: cq-start-sweep 4.6s var(--ease-in-out-soft) infinite;
}

.cq-title__start:hover {
  transform: translate3d(0, -2px, 0);
  border-color: var(--cyan-200);
  box-shadow: 0 0 0 1px rgba(3, 8, 20, 0.5), 0 14px 36px rgba(3, 8, 20, 0.6),
    var(--glow-cyan-md), inset 0 1px 0 rgba(215, 235, 255, 0.3);
}

.cq-title__start:focus-visible {
  box-shadow: var(--focus-ring);
  animation-play-state: paused;
}

.cq-title__start:active {
  transform: translate3d(0, 1px, 0) scale(0.99);
}

@keyframes cq-start-breathe {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.82; }
}

@keyframes cq-start-sweep {
  0%, 62% { transform: translate3d(-120%, 0, 0); }
  100% { transform: translate3d(120%, 0, 0); }
}

.cq-title__hint {
  margin: 0;
  font-size: var(--fs-base);
  letter-spacing: var(--ls-normal);
  color: rgba(236, 246, 255, 0.96);
}

/* Identity block: who this save belongs to, and the way to hand the machine
   to somebody else. It is the quietest thing on the plate on purpose — a
   learner who is simply carrying on should read past it. */
.cq-title__identity {
  display: grid;
  justify-items: center;
  gap: var(--sp-2);
  margin-top: clamp(var(--sp-2), 1.5vh, var(--sp-4));
  cursor: default;
}

.cq-title__who {
  margin: 0;
  font-size: var(--fs-base);
  color: rgba(228, 242, 255, 0.92);
}

.cq-title__who b {
  color: var(--cyan-100);
}

/* The cover's sign-out control. Smaller and dimmer than the start control
   beside it — it must be findable without ever competing with the one thing
   the screen is asking the learner to do. */
.cq-logout--cover {
  font-size: var(--fs-sm);
  color: rgba(226, 240, 255, 0.8);
  border-color: rgba(122, 221, 255, 0.28);
  background: rgba(5, 11, 26, 0.42);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.cq-logout--cover:hover {
  color: var(--text-primary);
  border-color: rgba(122, 221, 255, 0.55);
}

/* ============================================================================
   4. BAR
   ========================================================================== */

.cq-title__bar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-4);
  width: min(var(--content-wide), 100%);
  margin-inline: auto;
  padding: var(--sp-3) 0 var(--sp-4);
  cursor: default;
}

.cq-title__bar-text,
.cq-title__version {
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-normal);
  color: rgba(215, 235, 255, 0.55);
}

.cq-title__version {
  font-variant-numeric: tabular-nums;
}

.cq-title__bar-tools {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}

/* ============================================================================
   5. RESPONSIVE
   ========================================================================== */

@media (max-width: 719px) {
  .cq-title {
    padding-inline: var(--gutter);
  }

  .cq-title__plate {
    padding-bottom: clamp(var(--sp-5), 6vh, var(--sp-7));
  }

  .cq-title__start {
    width: 100%;
    max-width: 22rem;
  }

}

/* A short, wide window (a laptop in a classroom, or a phone in landscape) has
   no room for a tall lock-up, so the whole plate tightens rather than pushing
   the start control off the screen. */
@media (max-height: 560px) {
  .cq-title {
    /* Still the full viewport — the artwork has to reach the bottom edge — but
       the lock-up inside it tightens so nothing is pushed off the screen. */
    padding-top: var(--sp-5);
  }

  .cq-title__plate {
    gap: var(--sp-2);
    padding-bottom: var(--sp-5);
  }

  .cq-title__name {
    font-size: min(var(--fs-4xl), 11vw);
  }

  .cq-title__enter {
    margin-top: var(--sp-3);
  }
}

/* ============================================================================
   6. REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .cq-title__logo::before,
  .cq-title__start,
  .cq-title__start-glow {
    animation: none;
  }

  .cq-title__start-glow {
    opacity: 0;
  }

  .cq-title__start:hover {
    transform: none;
  }
}

html[data-reduced-motion='true'] .cq-title__logo::before,
html[data-reduced-motion='true'] .cq-title__start,
html[data-reduced-motion='true'] .cq-title__start-glow {
  animation: none;
}

html[data-reduced-motion='true'] .cq-title__start-glow {
  opacity: 0;
}

html[data-reduced-motion='true'] .cq-title__start:hover {
  transform: none;
}