/* The first three minutes of this place: the door a stranger meets, the
 * ceremony she meets instead, and the two moments a code can produce when
 * it arrives before or without the world it opens.
 *
 * Every step of the ceremony is a CSS animation with a delay, and the base
 * rule of each element is its FINAL state — so "skip" is one class removal
 * (`.run`) with nothing to unwind, and reduced motion is the same sequence
 * with the transforms swapped for crossfades. */

/* ---------------------------------------------------------- the door */

.landing {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: calc(var(--sp-10) + env(safe-area-inset-top)) var(--sp-6)
           calc(var(--sp-10) + env(safe-area-inset-bottom));
  animation: door-in 900ms var(--ease);
}

@keyframes door-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.landing .door {
  width: 100%;
  max-width: 22rem;
  text-align: center;
}

/* seven stars, drawn the way the colophon's marks will one day assemble */
.landing .figure {
  display: block;
  width: 9.5rem;
  height: auto;
  margin: 0 auto var(--sp-10);
  fill: none;
  stroke: var(--brass-soft);
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.8;
}

.landing .figure circle {
  fill: var(--brass);
  stroke: none;
}

.landing h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-2xl);
  line-height: 1.15;
  color: var(--paper);
  margin: 0 0 var(--sp-3);
}

.landing .line {
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--moon-soft);
  margin: 0 0 var(--sp-8);
}

.landing form {
  display: flex;
  gap: var(--sp-2);
}

.landing input {
  flex: 1;
  min-width: 0;
  min-height: 2.75rem;
  font-family: var(--font-body);
  font-size: var(--text-md);
  padding: var(--sp-2) var(--sp-4);
  color: var(--moon);
  background: rgb(255 255 255 / 0.06);
  border: 1px solid rgb(255 255 255 / 0.16);
  border-radius: var(--radius-card);
}

.landing input:focus { outline-offset: 1px; }

.landing form button {
  min-height: 2.75rem;
  font: inherit;
  font-size: var(--text-sm);
  padding: 0 var(--sp-4);
  border: none;
  border-radius: var(--radius-card);
  background: var(--brass);
  color: #fff;
  cursor: pointer;
}

.landing form button[disabled] { opacity: 0.55; cursor: wait; }

.landing .error {
  min-height: 1.4em;
  margin: var(--sp-3) 0 0;
  font-size: var(--text-sm);
  color: var(--wax-bright);
}

/* each attempt is a second of key derivation — say so, softly */
.landing .error.trying {
  color: var(--moon-soft);
  animation: breathe 1.8s ease-in-out infinite;
}

@keyframes breathe {
  0%, 100% { opacity: 0.5; }
  50%      { opacity: 1; }
}

.landing.shake .door { animation: shake var(--t-slow) var(--ease); }

.landing.opening {
  animation: door-out 700ms var(--ease) forwards;
}

@keyframes door-out {
  from { opacity: 1; }
  to   { opacity: 0; transform: scale(1.03); }
}

@media (prefers-reduced-motion: reduce) {
  .landing { animation-duration: 1ms; }
  .landing .error.trying { animation: none; opacity: 0.8; }
  .landing.opening { animation: none; opacity: 0; }
}

/* ------------------------------------------------------- the moments */

/* A code that arrived early, or without a connection. Full screen, because
 * it is the whole answer to what she just did. */
.moment {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  place-items: center;
  padding: calc(var(--sp-8) + env(safe-area-inset-top)) var(--sp-6)
           calc(var(--sp-8) + env(safe-area-inset-bottom));
  background:
    radial-gradient(70% 50% at 50% 30%, rgb(184 134 59 / 0.10), transparent 70%),
    rgb(23 26 46 / 0.94);
  animation: fade-only 500ms var(--ease);
}

.moment-inner {
  width: 100%;
  max-width: 22rem;
  text-align: center;
}

.moment .mark {
  display: block;
  font-size: 2.5rem;
  line-height: 1;
  color: var(--brass);
  margin-bottom: var(--sp-6);
}

.moment h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-2xl);
  color: var(--paper);
  margin: 0;
}

.moment .big {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-xl);
  color: var(--brass);
  margin: var(--sp-2) 0 var(--sp-6);
}

.moment .line {
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--moon-soft);
  margin: 0;
}

/* -------------------------------------------------------- the rite */

.ceremony {
  position: fixed;
  inset: 0;
  z-index: 60;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  background: linear-gradient(180deg, rgb(23 26 46 / 0.82), rgb(32 36 63 / 0.92));
  padding: calc(var(--sp-8) + env(safe-area-inset-top)) var(--sp-4)
           calc(var(--sp-16) + env(safe-area-inset-bottom));
}

/* while it runs there is nowhere to scroll to — the tour is below, unlit */
.ceremony.run { overflow: hidden; }

/* the sky settling in: solid night, thinning to stars */
.ceremony::before {
  content: "";
  position: fixed;
  inset: 0;
  background: var(--dusk-1);
  opacity: 0;
  pointer-events: none;
}

.ceremony.run::before { animation: nightfall 1600ms ease-out backwards; }

.ceremony .rite {
  display: grid;
  place-items: center;
  gap: var(--sp-8);
  min-height: 34svh;
  transition: min-height 900ms var(--ease);
}

.ceremony.run .rite { min-height: 74svh; }

.ceremony .hello {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-2xl);
  color: var(--paper);
  text-align: center;
  margin: 0;
}

/* ----------------------------------------------------- the envelope */

.envelope {
  position: relative;
  width: min(15rem, 66vw);
  aspect-ratio: 3 / 2;
  perspective: 900px;
}

.envelope .paper {
  position: absolute;
  inset: 0;
  border-radius: 3px;
  background: linear-gradient(170deg, #f7f0e2, var(--paper) 60%, var(--paper-edge));
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

/* the two creases of the back, and the mouth the open flap leaves */
.envelope .paper::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom right, transparent calc(50% - 0.5px),
      rgb(42 36 22 / 0.06) 50%, transparent calc(50% + 0.5px)),
    linear-gradient(to bottom left, transparent calc(50% - 0.5px),
      rgb(42 36 22 / 0.06) 50%, transparent calc(50% + 0.5px)),
    linear-gradient(180deg, rgb(42 36 22 / 0.22), transparent 38%);
}

.envelope .flap {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 58%;
  background: linear-gradient(180deg, #f2ead8, var(--paper-edge));
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform-origin: top center;
  transform: rotateX(-156deg);            /* base state: open, and leaning back */
  filter: brightness(0.82);
}

.envelope .seal {
  position: absolute;
  left: 50%;
  top: 54%;
  width: 2.6rem;
  height: 2.6rem;
  margin: -1.3rem 0 0 -1.3rem;
}

.envelope .half {
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  opacity: 0;                              /* base state: cracked and gone */
  background: radial-gradient(circle at 38% 32%, var(--wax-bright), var(--wax) 72%);
  box-shadow: inset 0 0 8px rgb(0 0 0 / 0.35);
}

.envelope .half.l { left: 0; border-radius: 1.3rem 0 0 1.3rem; }
.envelope .half.r { right: 0; border-radius: 0 1.3rem 1.3rem 0; }

/* ------------------------------------------------------ the sequence */

.ceremony.run .envelope { animation: arrive 1100ms var(--ease) 700ms backwards; }
.ceremony.run .half.l { animation: crack-l 800ms var(--ease) 2300ms backwards; }
.ceremony.run .half.r { animation: crack-r 800ms var(--ease) 2300ms backwards; }
.ceremony.run .flap { animation: unflap 1000ms var(--ease) 3000ms backwards; }
.ceremony.run .hello { animation: rise 1000ms var(--ease) 3700ms backwards; }
.ceremony.run .after { animation: rise 1000ms var(--ease) 4700ms backwards; }

@keyframes nightfall {
  from { opacity: 1; }
  to   { opacity: 0; }
}

@keyframes arrive {
  from { opacity: 0; transform: translateY(1.5rem) scale(0.94); }
  to   { opacity: 1; transform: none; }
}

@keyframes crack-l {
  0%   { opacity: 1; transform: none; }
  30%  { opacity: 1; transform: translateX(-1px) rotate(-4deg); }
  100% { opacity: 0; transform: translate(-1rem, 0.5rem) rotate(-26deg); }
}

@keyframes crack-r {
  0%   { opacity: 1; transform: none; }
  30%  { opacity: 1; transform: translateX(1px) rotate(4deg); }
  100% { opacity: 0; transform: translate(1rem, 0.5rem) rotate(26deg); }
}

@keyframes unflap {
  from { transform: rotateX(0deg); filter: brightness(1); }
  to   { transform: rotateX(-156deg); filter: brightness(0.82); }
}

@keyframes rise {
  from { opacity: 0; transform: translateY(1.2rem); }
  to   { opacity: 1; transform: none; }
}

@keyframes fade-only {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes unfade {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/* Reduced motion: the same six seconds, told entirely in crossfades. */
@media (prefers-reduced-motion: reduce) {
  .ceremony .rite { transition: none; }
  .ceremony.run::before { animation: nightfall 600ms linear backwards; }
  .ceremony.run .envelope { animation: fade-only 500ms linear 300ms backwards; }
  .ceremony.run .half.l,
  .ceremony.run .half.r { animation: unfade 500ms linear 1200ms backwards; }
  .ceremony.run .flap { animation: none; }
  .ceremony.run .hello { animation: fade-only 500ms linear 1600ms backwards; }
  .ceremony.run .after { animation: fade-only 500ms linear 2300ms backwards; }
  .moment { animation: none; }
}

/* --------------------------------------------------------- the tour */

.ceremony .after {
  max-width: 30rem;
  margin: var(--sp-10) auto 0;
}

.ceremony .welcome { margin-bottom: var(--sp-10); }

.ceremony .tour {
  display: grid;
  gap: var(--sp-3);
}

.tourcard {
  border: 1px solid rgb(255 255 255 / 0.09);
  border-radius: var(--radius-card);
  background: rgb(255 255 255 / 0.04);
  padding: var(--sp-6) var(--sp-4);
}

.tourcard .mark {
  display: block;
  font-size: 1.35rem;
  line-height: 1;
  color: var(--brass);
  margin-bottom: var(--sp-3);
}

.tourcard h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-lg);
  color: var(--paper);
  margin: 0 0 var(--sp-2);
}

.tourcard p {
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--moon-soft);
}

.ceremony .enter {
  display: block;
  width: 100%;
  min-height: 2.75rem;
  margin: var(--sp-10) 0 0;
  font: inherit;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  padding: var(--sp-3) var(--sp-6);
  border: none;
  border-radius: var(--radius-card);
  background: var(--brass);
  color: #fff;
  cursor: pointer;
}

.ceremony .skip {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(var(--sp-6) + env(safe-area-inset-bottom));
  min-height: 2.75rem;
  padding: var(--sp-2) var(--sp-6);
  font: inherit;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: lowercase;
  color: var(--moon-soft);
  background: none;
  border: none;
  cursor: pointer;
}

.ceremony:not(.run) .skip { display: none; }