/* apex/assets/home.css — navy seal-showcase styles for the apex HOME page only
   (greatestgame.co/). Loaded after design-system/colors_and_type.css + apex.css;
   index.html sets data-theme="navy". Other apex pages do NOT load this file, so
   these rules can't leak onto pricing/signin/account. */

/* The deep stage gets a faint top-gold / bottom-navy ambient field, the same
   one the roadmap deck uses (BRAND_SPINE §11.10 — navy is the sanctioned stage
   for a seal showcase). */
body { position: relative; }
body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(70% 60% at 50% -8%, rgba(238,198,0,.10), transparent 55%),
    radial-gradient(90% 80% at 18% 108%, rgba(10,47,94,.55), transparent 60%);
}
.wrap, main.wrap, .site-footer { position: relative; z-index: 1; }

/* header mark → inline gold seal (an <img> can't take currentColor on navy) */
.brand-lockup .mark { width: 34px; height: 34px; color: var(--accent-2); }

/* ── Hero ───────────────────────────────────────────────────────────────── */
.hero--navy { padding: var(--sp-8) 0 var(--sp-8); text-align: center; }

.seal-wrap {
  position: relative; margin: 0 auto var(--sp-5);
  width: clamp(176px, 30vw, 276px); height: clamp(176px, 30vw, 276px);
  display: grid; place-items: center;
}
.seal-glow {
  position: absolute; inset: -26%; z-index: 0; pointer-events: none;
  background: radial-gradient(circle at 50% 46%,
    rgba(238,198,0,.40), rgba(238,198,0,.15) 40%, rgba(238,198,0,.04) 62%, transparent 72%);
  animation: seal-breathe 6.5s var(--ease-standard) infinite;
}
.hero-seal {
  position: relative; z-index: 1; width: 100%; height: 100%;
  color: var(--gg-gold);
  filter: drop-shadow(0 0 18px rgba(238,198,0,.40)) drop-shadow(0 0 5px rgba(255,247,214,.22));
  animation: seal-strike var(--dur-ceremony) var(--ease-emphasized) both;
}
@keyframes seal-strike { from { opacity: 0; transform: scale(1.06); } to { opacity: 1; transform: none; } }
@keyframes seal-breathe { 0%, 100% { opacity: .40; } 50% { opacity: .80; } }

/* The animated header IS the SatireVeritaS palindrome — symmetric and short, so
   it sets uniformly on desktop and mobile (where the spelled-out company name
   truncates). Letters resolve from the central pivot V out. */
.wordmark {
  font-family: var(--font-serif-alt); font-weight: 600;
  font-size: clamp(32px, 8.2vw, 94px); line-height: 1; letter-spacing: .02em;
  margin: 0 0 var(--sp-3); white-space: nowrap; min-height: 1em;
}
/* Each glyph carries a cyber-teal → deep-red gradient clipped to it; a
   per-letter phase (--fd) makes the colour wave travel across the word and
   persist, breathing like the seal glow. Layout + mirror live on .l; the
   gradient + flip live on the inner .g, so the mirror and the flip compose
   instead of overwriting each other's transform. */
.wordmark .l { display: inline-block; width: .74em; text-align: center; }
/* right half mirrors the left across the pivot V (literal-mirror palindrome) */
.wordmark .l.mir { transform: scaleX(-1); }
.wordmark .g {
  display: inline-block; transform-origin: center;
  background-image: linear-gradient(115deg,
    #33a1a7 0%, #5fc4c2 20%, #ac0000 50%, #d94436 58%, #5fc4c2 82%, #33a1a7 100%);
  background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: #5fc4c2;                       /* fallback if text-clip unsupported */
  -webkit-text-fill-color: transparent;
  animation: wm-flow 7s ease-in-out infinite var(--fd, 0ms);
}
/* After the decode resolves (JS adds .is-resolved), a single vertical-axis
   coin-flip ripples OUTWARD from the V: each glyph's flip is delayed by its
   distance from centre (--flip-delay), so a letter flips as its inner neighbour
   passes edge-on, on out to the two S's. Never backwards — the delay only grows
   away from the V. Reflective glint at each edge-on pass. */
.wordmark.is-resolved .g {
  animation: wm-flow 7s ease-in-out infinite var(--fd, 0ms),
             letter-flip 16s ease-in-out infinite var(--flip-delay, 0ms);
}
@keyframes wm-flow {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}
/* 0–94% (~15s) static; 94–100% (~1s) one flip, glinting at each edge-on pass */
@keyframes letter-flip {
  0%, 94%  { transform: perspective(700px) rotateY(0deg);   filter: brightness(1); }
  95.5%    {                                                filter: brightness(2.3) drop-shadow(0 0 10px rgba(255,255,255,.85)); }
  97%      { transform: perspective(700px) rotateY(180deg); filter: brightness(1); }
  98.5%    {                                                filter: brightness(2.3) drop-shadow(0 0 10px rgba(255,255,255,.85)); }
  100%     { transform: perspective(700px) rotateY(360deg); filter: brightness(1); }
}

/* decrypt cipher slot — used for the roadmap codename, stays sealed */
.cipher {
  display: inline-flex; gap: .02em; vertical-align: baseline;
  font-family: var(--font-mono); color: var(--gg-gold);
  background: #070d16; border: 1px solid rgba(238,198,0,.22); border-radius: 3px;
  padding: 0 .3em; box-shadow: inset 0 0 18px rgba(0,0,0,.6), 0 0 14px rgba(238,198,0,.12);
}
.cipher i { font-style: normal; display: inline-block; width: .62em; text-align: center;
  line-height: 1.35; text-shadow: 0 0 6px rgba(238,198,0,.5); opacity: .9; }
.cipher i.lead { color: #fff7d6; opacity: 1; text-shadow: 0 0 12px rgba(255,247,214,.95); }
.cipher i.dim  { opacity: .42; }

/* company name demoted to a tracked sub-line — present (per operator), no longer
   the cut-off-prone masthead (Dorian #2). */
.hero-company {
  font-family: var(--font-display); text-transform: uppercase;
  letter-spacing: var(--track-eyebrow); font-size: var(--fs-xs);
  color: var(--fg-3); margin: 0 0 var(--sp-5);
}
.hero--navy .lede { max-width: 40rem; margin: 0 auto var(--sp-6); color: var(--fg-2); }

/* ── Parchment cards on navy (Dorian #6: recolor + equalize) ──────────────── */
/* The base .panel carries max-width:34rem + margin:auto, which inside the
   stretch grid is exactly what made the "first white square" read a different
   size. Null it out in the grid so all cells are equal. */
.price-grid .panel {
  background: var(--gg-parchment-2); color: var(--gg-ink);
  border-color: rgba(26,18,8,.16); box-shadow: var(--shadow-plate);
  max-width: none; margin: 0; width: 100%;
}
.price-grid .panel .t-label { color: var(--gg-ink-soft); }
.price-grid .panel .t-body  { color: var(--gg-ink); }

/* ── Roadmap teaser (Dorian #8) — on-site (joins membership) vs off-site (17% off) */
.roadmap-list {
  list-style: none; padding: 0; margin: var(--sp-4) 0 0;
  display: grid; gap: var(--sp-3);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.roadmap-list li {
  border: var(--bw-hair) solid var(--rule); border-radius: var(--r-2);
  padding: var(--sp-4); background: var(--surface);
  display: flex; flex-direction: column; gap: 2px;
}
.roadmap-list .rm-name {
  font-family: var(--font-display); text-transform: uppercase;
  letter-spacing: var(--track-wide); font-size: var(--fs-md); color: var(--fg-1);
}
.roadmap-list .rm-when {
  font-family: var(--font-mono); font-size: var(--fs-xs);
  letter-spacing: .12em; color: var(--accent-2); text-transform: uppercase;
}
.roadmap-list .rm-note { font-size: var(--fs-xs); color: var(--fg-3); line-height: 1.45; margin-top: 2px; }
.rm-tag {
  font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: .12em;
  text-transform: uppercase; border: var(--bw-hair) solid var(--rule);
  border-radius: var(--r-pill); padding: 0 var(--sp-2);
  align-self: flex-start; margin-top: var(--sp-2);
}
.rm-tag--in   { color: var(--gg-gold);       border-color: var(--rule-strong); }  /* on-site, included */
.rm-tag--here { color: var(--gg-cyber-teal); border-color: rgba(51,161,167,.5); }  /* premieres on-site */
.rm-tag--off  { color: var(--fg-3);          border-color: var(--rule); }          /* off-site, 17% off */

@media (prefers-reduced-motion: reduce) {
  .hero-seal, .seal-glow, .wordmark .g { animation: none !important; }
  .hero-seal { opacity: 1 !important; transform: none !important; }
  .seal-glow { opacity: .7 !important; }
  /* gradient stays (static), mirror flip stays — only the motion stops */
}