@font-face {
  font-family: "Enma Serif";
  src: url("fonts/cormorant-garamond-sub.woff2") format("woff2");
  font-weight: 300 500;
  font-display: swap;
}
@font-face {
  font-family: "Enma Seal";
  src: url("fonts/yuji-syuku-sub.woff2") format("woff2");
  font-display: block;
  unicode-range: U+95BB, U+9B54;
}

:root {
  --ink: #0a0709;
  --ivory: #efe5d8;
  --ash: #c9b9aa;
  --shu: #c43a22;
  --ember: 255, 92, 46;
  --mirror: min(84vmin, 46rem);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; margin: 0; }

html { background: var(--ink); }

body {
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  color: var(--ivory);
  font-family: "Enma Serif", "Cormorant Garamond", Garamond, "Times New Roman", serif;
  background:
    radial-gradient(120% 55% at 50% 112%, rgba(196, 46, 22, .42), rgba(120, 20, 14, .16) 45%, transparent 72%),
    radial-gradient(circle at 50% 50%, rgba(90, 22, 18, .30), transparent calc(var(--mirror) * .55)),
    radial-gradient(140% 100% at 50% 40%, #120b0d, var(--ink) 70%);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.sky {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
  opacity: 0;
  transition: opacity 2.4s ease;
}
.sky.on { opacity: 1; }

.stage {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  z-index: 1;
  isolation: isolate;
  overflow: hidden;
}

/* the mirror: Enma's jōhari no kagami, drawn as a quiet dial */
.mirror {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--mirror);
  height: var(--mirror);
  translate: -50% -50%;
  overflow: visible;
  fill: none;
  stroke: rgb(var(--ember));
  pointer-events: none;
}
.mirror .ring { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 4.2s cubic-bezier(.6, .05, .2, 1) .3s forwards; }
.mirror .r1 { stroke-width: .22; stroke-opacity: .55; }
.mirror .r2 { stroke-width: .14; stroke-opacity: .32; animation-delay: .9s; animation-duration: 5s; }
.mirror .r3 { stroke-width: .12; stroke-opacity: .22; animation-delay: 1.4s; }
.mirror .ticks { stroke-width: 2.2; stroke-opacity: .30; }
.mirror .major { stroke-width: 4.5; stroke-opacity: .55; }
.mirror .dots { stroke-width: .6; stroke-linecap: round; stroke-opacity: .5; }
.mirror .spin, .mirror .counter {
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
  animation: fade 3.5s ease 1.6s forwards, turn 240s linear 1.6s infinite;
}
.mirror .counter { animation: fade 3.5s ease 2.2s forwards, turn 360s linear 2.2s infinite reverse; }

@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes fade { to { opacity: 1; } }
@keyframes turn { from { rotate: 0deg; } to { rotate: 360deg; } }

/* empty box the size the wordmark had (measured 5.93em x 1em), so the glow and seal keep their place */
.mark {
  position: relative;
  width: 5.93em;
  height: 1em;
  font-size: clamp(2.9rem, 12.4vw, 8.75rem);
}
.mark::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 150%;
  height: 260%;
  translate: -50% -50%;
  z-index: -1;
  background: radial-gradient(closest-side, rgba(var(--ember), .16), rgba(var(--ember), .05) 55%, transparent);
  opacity: 0;
  animation: glow 9s ease-in-out 2.4s infinite alternate;
}
@keyframes glow {
  from { opacity: .45; scale: .96; }
  to { opacity: 1; scale: 1.04; }
}

/* the seal: a hakubun hanko, characters cut out of vermilion */
.seal {
  position: absolute;
  right: -.05em;
  top: 100%;
  margin-top: .2em;
  width: .5em;
  padding: .045em 0 .04em;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: "Enma Seal", serif;
  font-size: max(.7em, 3rem);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: 0;
  color: var(--ink);
  background: var(--shu);
  border-radius: .04em;
  box-shadow: 0 0 0 .025em var(--shu), 0 0 1.4em rgba(var(--ember), .22);
  opacity: 0;
  rotate: -3deg;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -7 4.6'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 60px 60px;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -7 4.6'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 60px 60px;
  animation: stamp .9s cubic-bezier(.3, 1.4, .5, 1) 2.7s forwards;
}
.seal > span { display: block; font-size: .36em; }

@keyframes stamp {
  0% { opacity: 0; scale: 1.5; rotate: -9deg; }
  55% { opacity: 1; }
  100% { opacity: 1; scale: 1; rotate: -3deg; }
}

.foot {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 0 1.5rem max(1.6rem, env(safe-area-inset-bottom));
  text-align: center;
  font-size: .9rem;
  font-weight: 500;
  letter-spacing: .22em;
  color: var(--ash);
  opacity: 0;
  animation: fade 2.4s ease 3.2s forwards;
}
.foot small { font-size: inherit; }

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* 404: a small quiet label in the mirror */
.lost {
  position: relative;
  margin: 0;
  padding-left: .5em;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: .5em;
  color: var(--ash);
  opacity: 0;
  animation: fade 2.4s ease 1.2s forwards;
}

@media (max-width: 520px) {
  .foot { font-size: .8rem; letter-spacing: .18em; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition: none !important;
  }
  .mark::before { animation: none; opacity: .8; }
}