/* ————— Ozymandias ————— */

:root {
  --sand: #d8b28a;
  --sand-dim: #9a7a58;
  --ember: #e0763a;
  --bone: #e8ddcc;
  --night: #06050d;
  --line-size: clamp(1.05rem, 2.1vw, 1.45rem);
}

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

html, body {
  height: 100%;
  overflow: hidden;
  background: var(--night);
  color: var(--bone);
  font-family: 'Cormorant Garamond', Georgia, serif;
  -webkit-font-smoothing: antialiased;
}

#scene {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* ————— entry gate ————— */

#gate {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at 50% 60%, rgba(20, 10, 24, .88), rgba(4, 3, 10, .97));
  transition: opacity 2.4s ease, visibility 2.4s;
}

#gate.gone { opacity: 0; visibility: hidden; pointer-events: none; }

.gate-inner { text-align: center; padding: 2rem; }

.gate-title {
  font-family: 'Cinzel', serif;
  font-weight: 400;
  font-size: clamp(2.2rem, 7vw, 4.6rem);
  letter-spacing: .38em;
  margin-right: -.38em; /* recenter tracked text */
  color: var(--bone);
  text-shadow: 0 0 40px rgba(224, 118, 58, .35);
  animation: emberPulse 6s ease-in-out infinite;
}

@keyframes emberPulse {
  0%, 100% { text-shadow: 0 0 40px rgba(224, 118, 58, .25); }
  50%      { text-shadow: 0 0 60px rgba(224, 118, 58, .5); }
}

.gate-sub {
  margin-top: 1rem;
  font-style: italic;
  font-size: clamp(.95rem, 2vw, 1.2rem);
  color: var(--sand-dim);
  letter-spacing: .12em;
}

.gate-enter {
  position: relative;
  margin-top: 3.2rem;
  padding: .9rem 2.6rem;
  font-family: 'Cinzel', serif;
  font-size: clamp(.8rem, 1.6vw, .95rem);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--sand);
  background: transparent;
  border: 1px solid rgba(216, 178, 138, .35);
  cursor: pointer;
  transition: color .5s, border-color .5s, background .5s;
}

.gate-enter:hover, .gate-enter:focus-visible {
  color: var(--bone);
  border-color: rgba(224, 118, 58, .8);
  background: rgba(224, 118, 58, .08);
  outline: none;
}

.gate-hint {
  margin-top: 2.4rem;
  font-size: .78rem;
  font-style: italic;
  letter-spacing: .18em;
  color: rgba(216, 178, 138, .4);
}

/* ————— poem ————— */

#poem {
  position: fixed;
  z-index: 10;
  top: 0;
  left: 0;
  height: 100%;
  width: min(46rem, 58%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 4vh 3rem 4vh clamp(1.5rem, 6vw, 6rem);
  pointer-events: none;
  background: linear-gradient(90deg, rgba(6, 5, 13, .55), rgba(6, 5, 13, .25) 70%, transparent);
}

.poem-head {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 2.5s ease, transform 2.5s ease;
  margin-bottom: 2.2vh;
}

#poem.begun .poem-head { opacity: 1; transform: none; }

.poem-title {
  font-family: 'Cinzel', serif;
  font-weight: 400;
  font-size: clamp(1.1rem, 2.6vw, 1.7rem);
  letter-spacing: .32em;
  color: var(--sand);
}

.poem-byline {
  margin-top: .4rem;
  font-style: italic;
  font-size: clamp(.85rem, 1.6vw, 1.02rem);
  color: var(--sand-dim);
  letter-spacing: .08em;
}

.poem-lines { display: flex; flex-direction: column; gap: .35vh; }

.line {
  font-size: var(--line-size);
  font-style: italic;
  font-weight: 400;
  line-height: 1.55;
  color: rgba(232, 221, 204, .0);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 2s ease, transform 2s ease, color 1.4s ease, text-shadow 1.4s ease;
  text-shadow: none;
}

.line.shown {
  opacity: 1;
  transform: none;
  color: rgba(232, 221, 204, .58);
}

.line.current {
  color: rgba(240, 231, 214, .98);
  text-shadow: 0 0 24px rgba(224, 118, 58, .28);
}

.line.regal.current {
  color: #f3d9a8;
  text-shadow: 0 0 30px rgba(230, 160, 60, .5);
}

.colophon {
  margin-top: 3.4vh;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 3s ease 1s, transform 3s ease 1s;
  pointer-events: none;
}

.colophon.shown { opacity: 1; transform: none; pointer-events: auto; }

.colophon p {
  font-size: .82rem;
  font-style: italic;
  letter-spacing: .14em;
  color: rgba(154, 122, 88, .8);
}

.replay {
  margin-top: 1rem;
  padding: .45rem 1.3rem;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: .95rem;
  letter-spacing: .1em;
  color: var(--sand);
  background: transparent;
  border: 1px solid rgba(216, 178, 138, .25);
  cursor: pointer;
  transition: border-color .4s, color .4s;
}

.replay:hover { color: var(--bone); border-color: rgba(224, 118, 58, .7); }

/* ————— controls ————— */

#controls {
  position: fixed;
  z-index: 20;
  right: 1.2rem;
  bottom: 1.2rem;
  display: flex;
  gap: .55rem;
  opacity: 0;
  transition: opacity 1.5s ease 2s;
}

#controls.shown { opacity: 1; }

.ctl {
  width: 2.6rem;
  height: 2.6rem;
  display: grid;
  place-items: center;
  color: rgba(216, 178, 138, .75);
  background: rgba(6, 5, 13, .45);
  border: 1px solid rgba(216, 178, 138, .22);
  border-radius: 50%;
  cursor: pointer;
  backdrop-filter: blur(4px);
  transition: color .3s, border-color .3s, opacity .3s;
}

.ctl:hover { color: var(--bone); border-color: rgba(224, 118, 58, .6); }
.ctl.off { opacity: .35; }
.ctl.off:after { content: ''; position: absolute; }

/* ————— small screens ————— */

@media (max-width: 720px) {
  #poem {
    width: 100%;
    justify-content: flex-end;
    padding: 0 1.4rem 5.5rem;
    background: linear-gradient(0deg, rgba(6, 5, 13, .8), rgba(6, 5, 13, .35) 55%, transparent);
  }
  .line { line-height: 1.42; }
  #controls { bottom: 1rem; right: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .gate-title { animation: none; }
  .line, .poem-head, .colophon { transition-duration: .6s; }
}