@font-face {
  font-family: "Cormorant Garamond";
  src: url("./assets/fonts/cormorant-garamond-latin-400.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Manrope";
  src: url("./assets/fonts/manrope-latin-400.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --ivory: #f0e8d7;
  --quiet: #b9b2a6;
  --gold: #ffd193;
  --ember-y: 54%;
  --serif: "Cormorant Garamond", "Baskerville", "Times New Roman", serif;
  --sans: "Manrope", "Helvetica Neue", Arial, sans-serif;
  background: #0b0b09;
  color: var(--ivory);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-width: 280px; }
button { font: inherit; }
button:focus-visible { outline: 1px solid var(--gold); outline-offset: 8px; }
::selection { background: #bd6c31; color: #fff8e8; }
[hidden] { display: none !important; }

.holding {
  isolation: isolate;
  position: relative;
  min-height: 760px;
  min-height: max(760px, 100svh);
  overflow: hidden;
  background: #0b0b09;
}

.stone, .veil, .awakening-light, .embers { position: absolute; inset: 0; pointer-events: none; }
.stone {
  z-index: -4;
  background: #10100d url("./assets/stone-doorway.png") center center / cover no-repeat;
}
.veil {
  z-index: -3;
  background: linear-gradient(180deg, rgb(0 0 0 / .12), transparent 25%, transparent 54%, rgb(5 6 5 / .27) 70%, rgb(5 6 5 / .76)),
    radial-gradient(ellipse at 50% 43%, transparent 12%, rgb(0 0 0 / .17) 70%, rgb(0 0 0 / .4));
}
.awakening-light {
  z-index: -2;
  opacity: .24;
  background: radial-gradient(ellipse 23% 37% at 50% var(--ember-y), rgb(255 133 36 / .17), transparent 76%);
  animation: room-breath 7s ease-in-out infinite alternate;
  transition: opacity 2.4s ease;
}
.embers { z-index: 1; width: 100%; height: 100%; }
.masthead { position: absolute; top: clamp(32px, 6.2vh, 72px); width: 100%; text-align: center; z-index: 3; }
.wordmark {
  display: inline-block;
  padding-left: .5em;
  font: 400 clamp(18px, 1.8vw, 25px) / 1 var(--serif);
  letter-spacing: .5em;
  text-shadow: 0 2px 18px #000;
}

.ember {
  --core-size: clamp(22px, 2.2vw, 34px);
  -webkit-tap-highlight-color: transparent;
  position: absolute;
  left: 50%;
  top: var(--ember-y);
  width: 86px;
  height: 86px;
  transform: translate(-50%, -50%);
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: var(--ivory);
  background: transparent;
  cursor: pointer;
  z-index: 4;
  touch-action: manipulation;
}
.ember-halo, .ember-core { position: absolute; left: 50%; top: 50%; pointer-events: none; }
.ember-halo {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgb(255 150 40 / .17), rgb(235 93 13 / .05) 35%, transparent 70%);
  animation: halo-breath 5s ease-in-out infinite alternate;
}
.ember-core {
  width: var(--core-size);
  height: var(--core-size);
  transform: translate(-50%, -50%);
  border: 1px solid #ffd482;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 65% 22%, #fff0be 0 2%, transparent 7%),
    radial-gradient(ellipse at 27% 58%, #ffde80 0 5%, transparent 13%),
    radial-gradient(ellipse at 73% 70%, #fff1ae 0 2%, #ffa621 7%, transparent 19%),
    radial-gradient(ellipse at 32% 25%, #ffd774, #e88b14 26%, #bb4b07 59%, #ef9e23 78%, #ffe6a0 100%);
  box-shadow: inset 0 0 5px #fff2ad, inset -4px -3px 8px rgb(94 27 0 / .5), 0 0 12px #f79837a8, 0 0 32px #ff821a66, 0 0 70px #ff71152e;
  animation: ember-breath 4.8s ease-in-out infinite alternate;
  transition: filter .8s ease, width .8s ease, height .8s ease;
}
.ember-hint {
  pointer-events: none;
  position: absolute;
  width: 200px;
  left: 50%;
  top: calc(100% + 3px);
  transform: translate(-50%, 5px);
  color: #e2c7a4;
  font-size: 11px;
  letter-spacing: .16em;
  opacity: 0;
  transition: opacity .5s ease, transform .5s ease;
  text-shadow: 0 2px 8px #000;
}
.ember:hover .ember-hint, .ember:focus-visible .ember-hint { opacity: 1; transform: translate(-50%, 0); }
.ember:hover .ember-core, .ember:focus-visible .ember-core { filter: brightness(1.24); }
.holding[data-tended="1"] .ember-core { filter: brightness(1.18); }
.holding[data-tended="2"] .ember-core { filter: brightness(1.38); }
.holding.is-revealed .ember-core { filter: brightness(1.5); }
.holding.is-revealed .awakening-light { opacity: .9; }
.holding[data-tended="1"] .awakening-light { opacity: .4; }
.holding[data-tended="2"] .awakening-light { opacity: .6; }

.message { position: absolute; left: 24px; right: 24px; top: 70.8%; z-index: 3; text-align: center; }
h1 {
  margin: 0;
  font: 400 clamp(52px, 5.5vw, 84px) / 1.04 var(--serif);
  letter-spacing: -.025em;
  text-shadow: 0 3px 30px rgb(0 0 0 / .8);
}
.riddle {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .45em .8em;
  margin: 18px 0 0;
  color: var(--quiet);
  font-size: clamp(11px, 1vw, 14px);
  line-height: 1.7;
  letter-spacing: .21em;
}
.initial { transition: color 1.5s ease, text-shadow 1.5s ease; }
.is-revealed .initial { color: var(--gold); text-shadow: 0 0 12px rgb(255 154 58 / .5); }
.secret { margin-top: 22px; animation: revelation 1.8s ease both; }
.secret-name { color: #dca76c; font-size: 9px; letter-spacing: .5em; padding-left: .5em; }
.secret p { margin: 7px 0 0; font: 400 clamp(21px, 2vw, 28px) / 1.2 var(--serif); color: #ead4b3; }
.noscript-message { color: var(--quiet); font: 400 21px / 1.2 var(--serif); }

.footer { position: absolute; left: 24px; right: 24px; bottom: max(26px, env(safe-area-inset-bottom)); z-index: 4; text-align: center; }
.footer > p { margin: 0; color: #ccc2b1; font: 400 15px / 1.5 var(--serif); letter-spacing: .19em; }
.motion-control {
  position: absolute;
  right: 8px;
  bottom: -8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 10px 8px;
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: #b0a79a;
  font-size: 10px;
  line-height: 1.4;
  letter-spacing: .06em;
  cursor: pointer;
  transition: color .3s;
}
.motion-control:hover { color: var(--ivory); }
.motion-control svg { fill: none; stroke: currentColor; stroke-width: 1.25; stroke-linecap: round; }
.motion-control .play-icon { display: none; }
.motion-control[aria-pressed="true"] .pause-icon { display: none; }
.motion-control[aria-pressed="true"] .play-icon { display: block; }
.motion-control:disabled { cursor: default; }
.is-paused *, .is-paused *::before, .is-paused *::after { animation-play-state: paused !important; }
.is-paused .secret { animation: none; }
.is-reduced-motion *, .is-reduced-motion *::before, .is-reduced-motion *::after { animation: none !important; transition: none !important; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

@keyframes ember-breath {
  from { transform: translate(-50%, -50%) scale(.96); }
  to { transform: translate(-50%, -53%) scale(1.045); }
}
@keyframes halo-breath {
  from { opacity: .6; transform: translate(-50%, -50%) scale(.9); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1.12); }
}
@keyframes room-breath { from { filter: brightness(.9); } to { filter: brightness(1.2); } }
@keyframes revelation { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

@media (min-width: 1600px) { .message { top: 71.5%; } }
@media (max-width: 600px) {
  .holding { min-height: max(740px, 100svh); }
  .masthead { top: max(38px, env(safe-area-inset-top)); }
  .wordmark { font-size: 19px; letter-spacing: .39em; padding-left: .39em; }
  .message { top: 67.5%; left: 22px; right: 22px; }
  h1 { max-width: 350px; margin-inline: auto; font-size: clamp(45px, 11.8vw, 65px); line-height: .99; }
  .riddle { max-width: 330px; margin: 17px auto 0; gap: .3em .85em; font-size: 10px; letter-spacing: .15em; }
  .secret { margin-top: 16px; }
  .secret p { font-size: 23px; }
  .footer { bottom: max(23px, env(safe-area-inset-bottom)); }
  .footer > p { font-size: 13px; letter-spacing: .14em; }
  .motion-control { right: -8px; bottom: -9px; width: 44px; padding: 12px; }
  .motion-control span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
}

@media (max-height: 900px) and (min-width: 601px) {
  .message { top: 64.5%; }
}
@media (max-height: 740px) and (min-width: 601px) {
  :root { --ember-y: 45%; }
  .holding { min-height: max(600px, 100svh); }
  .stone { background-position: center 75%; }
  .message { top: 62%; }
  h1 { font-size: clamp(46px, 5vw, 65px); }
  .secret { margin-top: 14px; }
}
@media (max-width: 360px) {
  .message { top: 63%; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}