@font-face { font-family: 'Cinzel Decorative'; src: url(../fonts/cinzel-decorative-400.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Cinzel'; src: url(../fonts/cinzel.woff2) format('woff2'); font-weight: 400 900; font-display: swap; }
@font-face { font-family: 'Cormorant Garamond'; src: url(../fonts/cormorant-400.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Cormorant Garamond'; src: url(../fonts/cormorant-400-italic.woff2) format('woff2'); font-weight: 400; font-style: italic; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Cormorant Garamond'; src: url(../fonts/cormorant-400-italic-ext.woff2) format('woff2'); font-weight: 400; font-style: italic; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Noto Sans Runic'; src: url(../fonts/noto-sans-runic.woff2) format('woff2'); unicode-range: U+16A0-16F8; font-display: swap; }
@font-face { font-family: 'Noto Sans Cuneiform'; src: url(../fonts/noto-sans-cuneiform.woff2) format('woff2'); unicode-range: U+12000-1254F; font-display: swap; }
@font-face { font-family: 'Noto Sans Symbols'; src: url(../fonts/noto-sans-symbols.woff2) format('woff2'); font-display: swap; }
@font-face { font-family: 'Noto Sans Symbols 2'; src: url(../fonts/noto-sans-symbols2.woff2) format('woff2'); font-display: swap; }

:root {
  --ink: #d9ccff;
  --ember: #a77bff;
  --bone: #e9e3d6;
  --night: #050308;
  --gutter: max(16px, env(safe-area-inset-left));
}

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

html, body {
  height: 100%;
  background: var(--night);
  color: var(--bone);
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  font-family: 'Cormorant Garamond', Georgia, serif;
  -webkit-font-smoothing: antialiased;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  cursor: crosshair;
}

canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; display: block; }
#sky { z-index: 0; }
#rite { z-index: 1; }

header, footer, #caption, #incant { position: fixed; left: 0; right: 0; z-index: 2; text-align: center; pointer-events: none; padding: 0 var(--gutter); }

header { top: max(3.2vh, env(safe-area-inset-top)); opacity: 0; transition: opacity 4s ease 0.5s; }
body.awake header { opacity: 1; }

#title {
  font-family: 'Cinzel Decorative', 'Cinzel', serif;
  font-weight: 400;
  font-size: clamp(1.55rem, 4.6vw, 3.6rem);
  letter-spacing: 0.16em;
  line-height: 1.15;
  color: var(--bone);
  text-shadow: 0 0 18px rgba(0, 0, 0, 0.9), 0 0 42px color-mix(in srgb, var(--ember) 35%, transparent);
  transition: text-shadow 8s;
}
#title .word { display: inline-block; white-space: nowrap; margin: 0 0.28em; }
#title .l { display: inline-block; min-width: 0.5em; transition: color 0.4s, text-shadow 0.4s; }
#title .l.rune {
  font-family: 'Noto Sans Runic', serif;
  color: var(--ember);
  text-shadow: 0 0 12px var(--ember), 0 0 2px #fff;
  transform: translateY(-0.04em);
}

#epithet {
  margin-top: 0.5em;
  font-style: italic;
  font-size: clamp(0.95rem, 1.6vw, 1.2rem);
  letter-spacing: 0.08em;
  color: color-mix(in srgb, var(--ink) 70%, transparent);
  text-shadow: 0 0 10px #000;
  min-height: 1.4em;
}

#caption { bottom: calc(max(2.4vh, env(safe-area-inset-bottom)) + 3.4em); }
#caption .main {
  font-family: 'Cinzel', serif;
  font-size: clamp(0.95rem, 1.7vw, 1.3rem);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
  text-shadow: 0 0 14px #000, 0 0 24px color-mix(in srgb, var(--ember) 40%, transparent);
  min-height: 1.4em;
}
#caption .sub {
  margin-top: 0.35em;
  font-style: italic;
  font-size: clamp(0.95rem, 1.5vw, 1.15rem);
  color: color-mix(in srgb, var(--bone) 62%, transparent);
  text-shadow: 0 0 10px #000;
  min-height: 1.3em;
  max-width: 46rem;
  margin-inline: auto;
}

footer { bottom: max(2.2vh, env(safe-area-inset-bottom)); }
#ephemeris {
  font-family: 'Cinzel', 'Noto Sans Symbols', 'Noto Sans Symbols 2', serif;
  font-size: clamp(0.62rem, 1.05vw, 0.8rem);
  letter-spacing: 0.18em;
  white-space: pre-wrap;
  color: color-mix(in srgb, var(--bone) 42%, transparent);
  text-shadow: 0 0 8px #000;
}

.fading { opacity: 0 !important; }
#epithet, #caption .main, #caption .sub, #ephemeris { transition: opacity 0.7s ease, color 6s; }

#incant { top: 50%; transform: translateY(-50%); opacity: 0; transition: opacity 0.5s, transform 1.2s cubic-bezier(.2,.7,.2,1); }
#incant.on { opacity: 1; }
#incant.cast { opacity: 0; transform: translateY(-50%) scale(1.6); transition: opacity 1.1s, transform 1.2s; }
#incant .runes {
  font-family: 'Noto Sans Runic', serif;
  font-size: clamp(2rem, 7vw, 4.6rem);
  letter-spacing: 0.25em;
  color: var(--ember);
  text-shadow: 0 0 20px var(--ember), 0 0 3px #fff;
}
#incant .latin { font-family: 'Cinzel', serif; letter-spacing: 0.5em; font-size: 0.8rem; color: color-mix(in srgb, var(--ink) 55%, transparent); margin-top: 0.6em; }

#hint {
  margin-top: 0.4em;
  font-style: italic;
  font-size: clamp(0.8rem, 1.2vw, 0.95rem);
  letter-spacing: 0.1em;
  color: color-mix(in srgb, var(--bone) 48%, transparent);
  opacity: 0;
  transition: opacity 2.5s;
}
#hint.on { opacity: 1; }

#sound {
  position: fixed;
  z-index: 3;
  right: var(--gutter);
  bottom: max(16px, env(safe-area-inset-bottom));
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--ink) 25%, transparent);
  background: rgba(5, 3, 8, 0.4);
  color: color-mix(in srgb, var(--ink) 60%, transparent);
  cursor: pointer;
  display: grid; place-items: center;
  transition: color 0.4s, border-color 0.4s, box-shadow 0.4s;
}
#sound:hover, #sound:focus-visible { color: var(--ink); border-color: var(--ink); outline: none; box-shadow: 0 0 16px color-mix(in srgb, var(--ember) 50%, transparent); }
#sound svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
#sound svg path:first-child { fill: currentColor; fill-opacity: 0.25; }
#sound .w1, #sound .w2 { opacity: 0.15; transition: opacity 0.4s; }
#sound.on .w1, #sound.on .w2 { opacity: 1; }

.noscript { position: fixed; inset: 0; display: grid; place-items: center; font-style: italic; z-index: 5; color: var(--bone); }

@media (max-width: 640px) {
  #title { letter-spacing: 0.08em; }
  #title .word { margin: 0 0.18em; }
  #ephemeris { letter-spacing: 0.08em; }
  #caption { bottom: calc(max(2.4vh, env(safe-area-inset-bottom)) + 5em); }
  #sound { width: 36px; height: 36px; }
  footer { padding-right: 56px; padding-left: 56px; }
}