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

:root {
  --black: #080808;
  --gold: #A8874A;
  --white: #FFFFFF;
}

html, body {
  height: 100%;
  overflow: hidden;
  background-color: var(--black);
  color: var(--white);
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Fade in entire page */
body {
  animation: fadeIn 0.8s ease forwards;
  opacity: 0;
}

@keyframes fadeIn {
  to { opacity: 1; }
}

/* Even the act of selecting text belongs to the House. */
::selection {
  background-color: rgba(168, 135, 74, 0.85);
  color: #080808;
}

/* Keyboard Guests are Guests. The focus ring is the House gold. */
a:focus-visible {
  outline: 1px solid rgba(168, 135, 74, 0.65);
  outline-offset: 4px;
}

/* ── NAVIGATION ── */
nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px 48px;
  /* The nav sits on its own plane — a faint scrim, and a hairline of
     gold beneath it that warms when the Guest's attention arrives. */
  background: linear-gradient(to bottom, rgba(8, 8, 8, 0.92), rgba(8, 8, 8, 0));
}

nav::after {
  content: '';
  position: absolute;
  left: 48px;
  right: 48px;
  bottom: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(168, 135, 74, 0.32), transparent);
  opacity: 0.4;
  transition: opacity 0.6s ease;
}

nav:hover::after {
  opacity: 0.9;
}

/* The nav arrives the way the hero does — star first, then the
   entrance, then the rooms, left to right. Quick, but in order. */
@keyframes navIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes navInStar {
  from { opacity: 0; }
  to   { opacity: 0.85; }
}

/* Left cluster — star + the Guest's future entrance, held apart from the
   locked rooms on the right. */
.nav-left {
  display: flex;
  align-items: center;
  gap: 26px;
}

.nav-star {
  font-size: 14px;
  color: #A8874A;
  user-select: none;
  line-height: 1;
  display: inline-block;
  opacity: 0;
  animation: navInStar 0.8s ease forwards 0.15s,
             starGlint 11s ease-in-out infinite 4s;
}

/* Touch the star and it answers — one glint, on demand.
   Ambient rhythm resumes after. */
.nav-star.answer {
  animation: starAnswer 0.9s ease;
  opacity: 0.85;
}

@keyframes starAnswer {
  0%   { opacity: 0.85; transform: scale(1); text-shadow: none; }
  40%  { opacity: 1; transform: scale(1.2); text-shadow: 0 0 10px rgba(168, 135, 74, 0.9), 0 0 22px rgba(168, 135, 74, 0.4); }
  100% { opacity: 0.85; transform: scale(1); text-shadow: none; }
}

/* The star is still almost always. Roughly once every eleven seconds it
   catches light for under a second — easy to miss unless you happen to
   be watching. A star, not a notification. */
@keyframes starGlint {
  0%, 92%, 100% {
    opacity: 0.85;
    text-shadow: none;
    transform: scale(1);
  }
  95% {
    opacity: 1;
    text-shadow: 0 0 8px rgba(168, 135, 74, 0.85), 0 0 18px rgba(168, 135, 74, 0.35);
    transform: scale(1.12);
  }
  98% {
    opacity: 0.85;
    text-shadow: none;
    transform: scale(1);
  }
}

/* Begin Heritage — same nav theme, but hover says "Not Yet", not "Locked". */
.nav-heritage {
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  font-size: 11px;
  letter-spacing: 0.22em;
  color: rgba(255, 255, 255, 0.55);
  text-transform: uppercase;
  cursor: default;
  user-select: none;
  position: relative;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 180px;
  padding: 8px 16px;
  text-indent: 0.22em;
  border: 1px solid rgba(168, 135, 74, 0.45);
  transition: border-color 0.25s ease, color 0.25s ease;
}

.nav-heritage:hover {
  color: rgba(255, 255, 255, 0.80);
  border-color: rgba(168, 135, 74, 0.78);
}

.nav-heritage .nav-label-default { display: inline; }
.nav-heritage .nav-label-hover { display: none; }
.nav-heritage:hover .nav-label-default { display: none; }
.nav-heritage:hover .nav-label-hover { display: inline; }

.nav-heritage {
  opacity: 0;
  animation: navIn 0.8s ease forwards 0.3s;
}

.nav-links li {
  opacity: 0;
  animation: navIn 0.8s ease forwards;
}

.nav-links li:nth-child(1) { animation-delay: 0.45s; }
.nav-links li:nth-child(2) { animation-delay: 0.55s; }
.nav-links li:nth-child(3) { animation-delay: 0.65s; }
.nav-links li:nth-child(4) { animation-delay: 0.75s; }

/* If a Guest types the word — anywhere, unprompted — the House
   acknowledges that they know it. Four seconds. Then the room
   is locked again. Understanding is earned, not explained. */
.nav-isnad {
  transition: color 0.6s ease, text-shadow 0.6s ease;
}

.nav-isnad .nav-label-heard { display: none; }

.nav-isnad.heard {
  color: rgba(168, 135, 74, 0.92);
  text-shadow: 0 0 10px rgba(168, 135, 74, 0.35);
}

.nav-isnad.heard .nav-label-default,
.nav-isnad.heard .nav-label-hover { display: none !important; }
.nav-isnad.heard .nav-label-heard { display: inline; }

.nav-links {
  display: flex;
  gap: 40px;
  list-style: none;
}

.nav-links li {
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  font-size: 11px;
  letter-spacing: 0.28em;
  color: rgba(255, 255, 255, 0.38);
  text-transform: uppercase;
  cursor: default;
  user-select: none;
  transition: none;
  position: relative;
}

.nav-links li:hover {
  color: rgba(255, 255, 255, 0.68);
}

.nav-links li .nav-label-default {
  display: inline;
}

.nav-links li .nav-label-hover {
  display: none;
}

.nav-links li:not(.nav-link):hover .nav-label-default {
  display: none;
}

.nav-links li:not(.nav-link):hover .nav-label-hover {
  display: inline;
}

.nav-links li a {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.nav-links li.nav-link:hover {
  color: rgba(255, 255, 255, 0.90);
}

/* ── HERO ── */
main {
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 24px;
}

.logo-mark {
  width: 110px;
  height: auto;
  display: block;
  margin: 0 auto;
  opacity: 0;
  animation: arriveMark 1.6s ease forwards 0.3s;
}

/* ── THE ENTRANCE ──
   Nothing appears at once. The mark first. Then the name settles into
   place — its letters drawing slightly closer as they arrive, like a
   word finding its final position. Then the divider draws itself.
   Then, last, the invitation. Sequence is the point. */
@keyframes arriveMark {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── CRESCENT MOON ──
   The occluder is a black disk over the gold disk; where it covers, the
   disk reads as page background, carving the crescent. At rest it leaves
   a thin ~14px sliver matching the original. On hover it slides right only
   slightly, so the crescent thickens a touch without the gold climbing up
   toward the horns. The M always stays on shadow. */
.moon-occluder {
  transform: translateX(14px);
  transition: transform 1.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.logo-mark:hover .moon-occluder {
  transform: translateX(24px);
}

.moon-halo {
  opacity: 0;
  transition: opacity 1.4s ease;
}

.logo-mark:hover .moon-halo {
  opacity: 0.32;
}

.wordmark {
  margin-top: 28px;
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  font-size: 28px;
  letter-spacing: 0.55em;
  color: rgba(255, 255, 255, 1.0);
  text-transform: uppercase;
  /* Compensate for letter-spacing on last character */
  text-indent: 0.55em;
  opacity: 0;
  animation: settleWordmark 1.8s cubic-bezier(0.25, 0.1, 0.25, 1) forwards 1.0s;
}

@keyframes settleWordmark {
  from { opacity: 0; letter-spacing: 0.78em; }
  to   { opacity: 1; letter-spacing: 0.55em; }
}

/* Once the name has settled, it becomes touchable — hover and the
   letters ease apart, breathing. Leave and they draw back together. */
.wordmark.settled {
  animation: none;
  opacity: 1;
  transition: letter-spacing 0.9s ease;
}

.wordmark.settled:hover {
  letter-spacing: 0.62em;
}

/* If the room is left alone — no hand, no key, no touch — for
   forty-five seconds, the name begins to breathe like a candle in
   still air. Any movement in the room stills it again. */
body.idle .wordmark.settled {
  animation: candle 8s ease-in-out infinite;
}

@keyframes candle {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.82; }
}

.divider {
  margin: 52px auto;
  width: 1px;
  height: 40px;
  background-color: rgba(255, 255, 255, 0.14);
  transform: scaleY(0);
  transform-origin: top;
  animation: drawDivider 1.2s ease forwards 2.2s;
}

@keyframes drawDivider {
  to { transform: scaleY(1); }
}

.cta-label {
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  font-size: 10px;
  letter-spacing: 0.32em;
  color: rgba(255, 255, 255, 0.42);
  text-transform: uppercase;
  text-indent: 0.32em;
  margin-bottom: 10px;
  opacity: 0;
  animation: arriveSoft 1.4s ease forwards 2.9s;
}

@keyframes arriveSoft {
  to { opacity: 1; }
}

.cta-email {
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  font-size: 12px;
  letter-spacing: 0.18em;
  color: rgba(255, 255, 255, 0.68);
  text-decoration: none;
  text-transform: lowercase;
  position: relative;
  padding-bottom: 2px;
  transition: color 0.2s ease;
  opacity: 0;
  animation: arriveSoft 1.4s ease forwards 3.2s;
}

/* The underline is drawn, not switched on — from the center outward,
   the way a door opens from its middle. */
.cta-email::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0;
  height: 1px;
  background-color: rgba(168, 135, 74, 0.55);
  transform: translateX(-50%);
  transition: width 0.45s ease;
}

.cta-email:hover {
  color: rgba(255, 255, 255, 0.90);
}

.cta-email:hover::after {
  width: 100%;
}

/* While the Guest's hand rests on the address, the invitation
   answers: We read everything. It is true. Witness protocol. */
.cta-label .cta-alt { display: none; }
.cta-label.hearing .cta-default { display: none; }
.cta-label.hearing .cta-alt { display: inline; }

/* ── FOOTER ── */
footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  padding: 0 0 28px 0;
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  font-size: 9px;
  letter-spacing: 0.28em;
  color: rgba(255, 255, 255, 0.22);
  text-transform: uppercase;
  text-indent: 0.28em;
  user-select: none;
}

/* The footer star keeps its own time — never in sync with the nav star.
   Two stars, one sky, different moments. */
.footer-star {
  display: inline-block;
  animation: starGlint 11s ease-in-out infinite;
  animation-delay: 8.5s;
}

/* The footer is faint until looked at. Attention brightens it —
   nothing on this page performs for a Guest who isn't watching. */
footer {
  transition: color 0.5s ease;
}

footer:hover {
  color: rgba(255, 255, 255, 0.36);
}

/* Rooms do not jump-cut. Leaving through a door dims the light first. */
body.leaving {
  animation: fadeOut 0.35s ease forwards;
}

@keyframes fadeOut {
  to { opacity: 0; }
}

/* ── THE LANTERN ──
   A faint warm light that follows the cursor with a slight lag, as though
   the Guest carries a candle through a dark house. It illuminates nothing
   in particular — attention itself is the light source. Desktop pointers
   only; it does not exist on touch devices. */
.lantern {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 50;
  opacity: 0;
  transition: opacity 1.2s ease;
  background: radial-gradient(
    circle 340px at var(--lx, 50%) var(--ly, 50%),
    rgba(168, 135, 74, 0.055),
    rgba(168, 135, 74, 0.018) 45%,
    transparent 70%
  );
  mix-blend-mode: screen;
}

.lantern.lit {
  opacity: 1;
}

@media (pointer: coarse) {
  .lantern { display: none; }
}

/* ── MOBILE ── */
@media (max-width: 640px) {
  nav {
    padding: 22px 24px;
  }

  nav::after {
    left: 24px;
    right: 24px;
  }

  .nav-left {
    gap: 16px;
  }

  .nav-heritage {
    font-size: 8px;
    letter-spacing: 0.12em;
    min-width: 120px;
    padding: 6px 12px;
    text-indent: 0.12em;
  }

  .nav-links {
    display: flex;
    gap: 16px;
  }

  .nav-links li {
    font-size: 9px;
    letter-spacing: 0.18em;
  }

  .logo-mark {
    width: 76px;
  }

  .wordmark {
    font-size: 20px;
    letter-spacing: 0.45em;
    text-indent: 0.45em;
    margin-top: 22px;
  }

  .divider {
    margin: 40px auto;
  }
}

/* Reduced motion — everything present, everything still */
@media (prefers-reduced-motion: reduce) {
  body {
    animation: none;
    opacity: 1;
  }
  .moon-occluder {
    transition: none;
  }
  .logo-mark:hover .moon-occluder {
    transform: translateX(14px);
  }
  .nav-star,
  .footer-star {
    animation: none;
    opacity: 1;
  }
  .nav-heritage,
  .nav-links li {
    animation: none;
    opacity: 1;
  }
  .nav-star.answer {
    animation: none;
  }
  .moon-halo {
    transition: none;
  }
  .wordmark.settled {
    transition: none;
  }
  body.idle .wordmark.settled {
    animation: none;
  }
  nav::after {
    transition: none;
  }
  .lantern {
    display: none;
  }
  .logo-mark,
  .wordmark,
  .cta-label,
  .cta-email {
    animation: none;
    opacity: 1;
  }
  .divider {
    animation: none;
    transform: scaleY(1);
  }
  .cta-email::after {
    transition: none;
  }
}