/* Knights of the Shadows — "Requiem" landing page */
:root {
  --bg: #040406;
  --gate-bg: #040406;
  --btn-fill: #0e0e10;
  --accent: #F7941D;
  --accent-rgb: 247,148,29;
  --ink: #F8D943;
  --navy: #162C57;
  --glow-rgb: 22,44,87;
  --glow-soft: rgba(var(--glow-rgb),0.85);
  --halo-rgb: 22,44,87; --halo-a: 1; --halo-hover-a: 1;
  --sub: #a9b3c9;
  --faint: #6d7a99;
  --hint: #6d7a99;
  --rule: rgba(var(--accent-rgb),0.7);
  --line-fade: 2.8s;   /* per-word pre-title fade */
  --title-fade: 5.5s;  /* main title fade */
  --sub-fade: 2.6s;    /* "reborn" + rule fade */
  --rest-fade: 2s;     /* countdown/socials/footer fade */
  --tagline-fade: 1.5s;  /* crest */
  --text-fade: 1s;       /* "Will this..." line */
  /* Viewport unit: equals 1px at the 1440x900 laptop reference and scales
     with the screen, so the composition keeps its proportions on any display. */
  --u: min(100vw / 1440, 100vh / 900);
  --u: min(100vw / 1440, 100svh / 900);
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: 'Cormorant Garamond', serif;
  overflow: hidden;
}
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--ink); }

.stage {
  position: fixed; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: calc(22 * var(--u)); text-align: center; padding: 0 calc(24 * var(--u)) calc(96 * var(--u));
  isolation: isolate; /* bottom padding ≈ crest+tagline height, so the whole composition reads centred */
}
.stage::before { /* background glow, painted beneath the text; fades in over the first 3s */
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  opacity: 0; transition: opacity 3s ease-in;
  background: radial-gradient(ellipse 70% 55% at 50% 44%, var(--glow-soft), transparent 70%);
}

/* ---- entry gate ---- */
.gate {
  position: fixed; inset: 0; z-index: 10; background: var(--gate-bg);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(25 * var(--u));
  transition: opacity 1.2s ease;
}
.gate.hidden { opacity: 0; pointer-events: none; }
.gate button {
  cursor: pointer; position: relative; z-index: 0;
  font-family: 'Cormorant Garamond', serif; font-size: calc(17 * var(--u));
  letter-spacing: 0.5em; text-indent: 0.5em; text-transform: uppercase;
  color: var(--ink); border: 1px solid #F8D943; border-radius: calc(2 * var(--u));
  background: transparent; padding: calc(16 * var(--u)) calc(34 * var(--u));
  box-shadow: 0 0 calc(36 * var(--u)) calc(6 * var(--u)) rgba(var(--halo-rgb),var(--halo-a));
  transition: box-shadow .25s, transform .25s;
}
.gate button:hover { box-shadow: 0 0 calc(44 * var(--u)) calc(8 * var(--u)) rgba(var(--halo-rgb),var(--halo-hover-a)); transform: translateY(calc(-1 * var(--u))); }
.gate button::before {
  content: ''; position: absolute; inset: calc(-36 * var(--u)) calc(-92 * var(--u)); z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 62% 55% at 50% 50%, rgba(var(--halo-rgb),var(--halo-a)), transparent 70%);
}
.gate button::after { /* opaque fill painted above the halo, below the text */
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--btn-fill); border-radius: inherit;
}
.gate .hint {
  font-family: 'Archivo', sans-serif; font-size: calc(10 * var(--u));
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--hint);
}

/* ---- reveal sequence (all start at opacity 0) ---- */
.fade { opacity: 0; }
.no-fade * { transition: none !important; }
.stage.on::before { opacity: 1; }
.pre-title {
  height: calc(18 * var(--u)); font-size: calc(15 * var(--u)); letter-spacing: 0.5em; text-transform: uppercase;
  color: var(--accent); white-space: nowrap;
}
.pre-title span { opacity: 0; transition: opacity var(--line-fade) ease-in; white-space: pre; }
.pre-title span.on { opacity: 1; }

.title {
  font-weight: 600; font-size: calc(68 * var(--u)); line-height: 1.08;
  letter-spacing: 0.05em; color: var(--ink);
  text-shadow: 0 0 calc(36 * var(--u)) rgba(var(--glow-rgb),0.28); white-space: nowrap;
  transition: opacity var(--title-fade) ease-in;
}
.title.on { opacity: 1; }

.rule-row { display: flex; align-items: center; gap: calc(12 * var(--u)); transition: opacity var(--sub-fade) ease-in; }
.rule-row .line { width: calc(90 * var(--u)); height: 1px; background: var(--rule); }
.reborn {
  font-size: calc(19 * var(--u)); letter-spacing: 0.42em; text-indent: 0.42em; text-transform: uppercase;
  color: var(--accent);
}
.rule-row.on { opacity: 1; }

.rest { display: flex; flex-direction: column; align-items: center; gap: calc(36 * var(--u)); transition: opacity var(--rest-fade) ease-in; }
.rest.on { opacity: 1; }
.countdown { display: flex; gap: calc(22 * var(--u)); margin-top: calc(8 * var(--u)); }
.seg { display: flex; flex-direction: column; align-items: center; gap: calc(6 * var(--u)); }
.seg .num {
  font-size: calc(38 * var(--u)); font-weight: 600; line-height: 1;
  font-variant-numeric: tabular-nums; color: var(--ink);
}
.seg .lab {
  font-family: 'Archivo', sans-serif; font-size: calc(10 * var(--u));
  letter-spacing: 0.3em; text-transform: uppercase; color: var(--sub);
}
.socials { display: flex; align-items: center; gap: calc(18 * var(--u)); color: var(--accent); }
.socials a { display: flex; color: inherit; opacity: 0.85; transition: opacity .25s, transform .25s; }
.socials a:hover { opacity: 1; transform: scale(1.15); }
.socials svg { height: calc(20 * var(--u)); width: auto; }
.socials a[title="Discord"] svg { height: calc(24 * var(--u)); }
/* Crest: vertically centred between the social icons and the footer;
   tagline text: centred between the crest and the footer (tops set by JS) */
.crest { position: fixed; left: 0; right: 0; display: flex; justify-content: center; transition: opacity var(--tagline-fade) ease-in; }
.crest.on { opacity: 1; }
.crest .wow {
  height: calc(64 * var(--u)); width: auto; display: block;
  filter: drop-shadow(0 0 calc(5 * var(--u)) rgb(var(--halo-rgb))) drop-shadow(0 0 calc(14 * var(--u)) rgb(var(--halo-rgb)));
  transition: filter .25s, transform .25s;
}
.crest:hover .wow {
  transform: scale(1.08);
  filter: drop-shadow(0 0 calc(6 * var(--u)) rgb(var(--halo-rgb))) drop-shadow(0 0 calc(18 * var(--u)) rgb(var(--halo-rgb))) drop-shadow(0 0 calc(40 * var(--u)) rgb(var(--halo-rgb)));
}
.tagline-text {
  position: fixed; left: 0; right: 0; text-align: center;
  font-size: calc(16 * var(--u)); letter-spacing: 0.12em; color: var(--accent);
  transition: opacity var(--text-fade) ease-in;
}
.tagline-text.on { opacity: 1; }

.footer {
  position: fixed; bottom: calc(16 * var(--u)); left: 0; right: 0; text-align: center;
  font-family: 'Archivo', sans-serif; font-size: calc(10 * var(--u));
  letter-spacing: 0.18em; color: var(--faint);
  transition: opacity var(--rest-fade) ease-in;
}
.footer.on { opacity: 1; }

.replay {
  position: fixed; bottom: calc(16 * var(--u)); right: calc(16 * var(--u)); z-index: 5; display: none;
  cursor: pointer; background: transparent; border: none; padding: 0; opacity: 0.6;
}
.replay:hover { opacity: 1; }
.replay.show { display: block; }
.replay span {
  display: flex; align-items: center; justify-content: center;
  width: calc(30 * var(--u)); height: calc(30 * var(--u)); border-radius: 50%;
  border: 1px solid var(--sub); color: var(--ink); font-size: calc(15 * var(--u)); line-height: 1;
}

@media (max-width: 560px) {
  /* Portrait phone: scale against a 390x844 reference instead. */
  :root { --u: min(100vw / 390, 100vh / 844); --u: min(100vw / 390, 100svh / 844); }
  .title { font-size: calc(50 * var(--u)); }
  .title { white-space: normal; letter-spacing: 0.04em; line-height: 1.18; }
  .title span { display: block; } /* two lines: Knights of / the Shadows */
  .countdown { gap: calc(14 * var(--u)); }
  .seg .num { font-size: calc(26 * var(--u)); }
  .pre-title { font-size: calc(11 * var(--u)); letter-spacing: 0.44em; }
  .gate button {
    font-size: calc(13 * var(--u)); letter-spacing: 0.42em; text-indent: 0.42em;
    padding: calc(13 * var(--u)) calc(22 * var(--u));
    box-shadow: 0 0 calc(28 * var(--u)) calc(4 * var(--u)) rgba(var(--halo-rgb),var(--halo-a));
  }
  .gate button::before { inset: calc(-28 * var(--u)) calc(-72 * var(--u)); }
  .gate .hint { font-size: calc(9 * var(--u)); }
}