/* splash.css — the front page at bookofaetheria.com. Colours and fonts are theme tokens
 * (themes/themes.css), so a binding repaints this page exactly as it repaints the Book. */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }

/* the page is long so there is somewhere to travel; everything you see is pinned (.door, .colophon) */
body {
  height: 900vh;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  overflow-x: hidden;
}

/* the light the tear throws, and a darker rim, so the page has depth before anything loads */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(60vmax 50vmax at 50% 28%, color-mix(in srgb, var(--void-glow) 16%, transparent), transparent 70%),
    radial-gradient(120vmax 90vmax at 50% 50%, transparent 55%, color-mix(in srgb, var(--void) 45%, transparent));
}

.defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* the landscapes behind everything: one layer per place, faded and sunk by splash.js (--lN, --dN) */
.landscape { position: fixed; inset: 0; pointer-events: none; }
.layer {
  position: absolute;
  inset: -12vh 0 0;
  width: 100%;
  height: calc(100% + 12vh);
  will-change: opacity, transform;
}
.l0 { opacity: var(--l0, 1); transform: translateY(calc(var(--d0, 0) * 1vh)); }
.l1 { opacity: var(--l1, 0); transform: translateY(calc(var(--d1, 0) * 1vh)); }
.l2 { opacity: var(--l2, 0); transform: translateY(calc(var(--d2, 0) * 1vh)); }
.l3 { opacity: var(--l3, 0); transform: translateY(calc(var(--d3, 0) * 1vh)); }
.l4 { opacity: var(--l4, 0); transform: translateY(calc(var(--d4, 0) * 1vh)); }
.l5 { opacity: var(--l5, 0); transform: translateY(calc(var(--d5, 0) * 1vh)); }

.door {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: max(28px, env(safe-area-inset-top)) 16px calc(104px + env(safe-area-inset-bottom)); /* room for the hint + colophon */
  text-align: center;
}

.world {
  width: min(78vw, 340px, 40vh);
  aspect-ratio: 400 / 520;
  margin-bottom: clamp(18px, 4vh, 36px);
}
.world svg {
  width: 100%;
  height: 100%;
  display: block;
  animation: breathe 9s ease-in-out infinite;
}

.title { margin: 0; font-weight: normal; line-height: 1; }
.title-small {
  display: block;
  font: italic 500 clamp(18px, 3.6vw, 26px) var(--font-display);
  color: var(--ink-soft);
  letter-spacing: .06em;
  margin-bottom: .35em;
}
.title-big {
  display: block;
  font: 600 clamp(40px, 10vw, 76px) var(--font-display);
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: .3em;
  padding-left: .3em; /* letter-spacing trails the last letter; this re-centres the word */
}

.flourish {
  display: flex;
  align-items: center;
  gap: 14px;
  width: min(72vw, 420px);
  margin: clamp(16px, 3vh, 26px) 0 clamp(12px, 2.4vh, 20px);
}
.flourish .rule {
  flex: 1;
  height: 1px;
  background: linear-gradient(to var(--dir, right), transparent, var(--accent));
  opacity: .7;
}
.flourish .rule:last-child { --dir: left; }
.flourish .sigil { width: 30px; height: 30px; flex: none; }

.subtitle {
  margin: 0;
  font: italic 500 clamp(19px, 3.8vw, 28px) var(--font-display);
  color: var(--ink-soft);
  letter-spacing: .04em;
}

.colophon {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 18px 16px max(18px, env(safe-area-inset-bottom));
  text-align: center;
  font: 500 12px var(--font-display);
  letter-spacing: .4em;
  color: var(--ink-soft);
  opacity: .6;
}

/* the page opens the way a book does: the world first, then its name */
.world, .title, .flourish, .subtitle, .colophon { animation: rise 1.4s cubic-bezier(.2, .7, .2, 1) both; }
.title    { animation-delay: .35s; }
.flourish { animation-delay: .7s; }
.subtitle { animation-delay: 1s; }
.colophon { animation-delay: 1.4s; }

@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
/* the glow belongs to the tear, so it grows as the tear is drawn (--glow, 0 → 1, from splash.js) */
@keyframes breathe {
  0%, 100% { filter: drop-shadow(0 0 10px color-mix(in srgb, var(--void-glow) calc(var(--glow, 1) * 22%), transparent)); }
  50%      { filter: drop-shadow(0 0 30px color-mix(in srgb, var(--void-glow) calc(var(--glow, 1) * 48%), transparent)); }
}

.hint {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(52px + env(safe-area-inset-bottom));
  text-align: center;
  font: italic 500 15px var(--font-display);
  letter-spacing: .2em;
  color: var(--ink-soft);
  pointer-events: none;
}
.hint-in { animation: rise 1.4s 2s cubic-bezier(.2, .7, .2, 1) both; } /* inside, so splash.js can fade .hint */
.hint span { display: block; font-style: normal; font-size: 20px; line-height: .8; animation: nudge 2.6s 3.4s ease-in-out infinite; }
@keyframes nudge { 0%, 100% { transform: none; } 50% { transform: translateY(5px); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; }
}

/* short landscape phones: the drawing gives way to the name */
@media (max-height: 520px) {
  .world { width: min(30vh, 200px); margin-bottom: 12px; }
}
/* the motto fades out, changes, and fades back in as you arrive somewhere (splash.js MOTTOS) */
#motto { transition: opacity .45s ease; }