:root {
  --bg-primary: #0a0a0c;
  --bg-secondary: #111114;
  --gold-primary: #d4af37;
  --gold-muted: #c9b97a;
  --gold-pale: #e8d5a3;
  --rule: #2a2520;
  --star: #fff8e7;
  --ease-ceremony: cubic-bezier(0.22, 1, 0.36, 1);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg-primary);
  color: var(--gold-muted);
  font-family: "Cormorant", serif;
  overflow-x: hidden;
}

.page-shell {
  min-height: 100vh;
  background: var(--bg-primary);
}

.hero {
  position: relative;
  min-height: 100vh;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #000;
}

.hero__photo {
  position: absolute;
  inset: 0;
  background-image: url("https://images.unsplash.com/photo-1462331940025-496dfbfc7564?auto=format&fit=crop&w=2400&q=80");
  background-size: cover;
  background-position: center;
  filter: saturate(15%) contrast(1.2) brightness(0.6);
  opacity: 0;
  transform: scale(1.02);
  animation: heroPhoto 800ms ease-in forwards;
}

.hero__veil {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 12, 0.4);
}

.hero__center {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 0 2rem;
}

.hero__title {
  margin: 0;
  font-family: "Cormorant Garamond", "Cormorant", serif;
  font-size: clamp(4rem, 10vw, 10rem);
  line-height: 0.92;
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--gold-primary);
  text-shadow: 0 0 40px rgba(212, 175, 55, 0.15), 0 0 1px var(--star);
  opacity: 0;
  transform: translateY(20px);
  animation: ceremonialIn 1000ms var(--ease-ceremony) 1000ms forwards;
}

.hero__rule {
  width: 120px;
  height: 1px;
  margin: 2rem auto 1.45rem;
  background: var(--gold-primary);
  box-shadow: 0 0 22px rgba(212, 175, 55, 0.22);
  opacity: 0;
  transform: scaleX(0.2);
  animation: ruleIn 600ms var(--ease-ceremony) 600ms forwards;
}

.hero__subtitle,
.pillar__label,
.closing__inscription {
  font-family: "Spectral", serif;
  font-style: italic;
  font-weight: 400;
  color: var(--gold-pale);
}

.hero__subtitle {
  margin: 0;
  font-size: clamp(1rem, 1.8vw, 1.35rem);
  letter-spacing: 0.12em;
  opacity: 0;
  transform: translateY(20px);
  animation: ceremonialIn 1000ms var(--ease-ceremony) 1800ms forwards;
}

.hero__chevron {
  position: absolute;
  bottom: 3rem;
  left: 50%;
  z-index: 2;
  width: 22px;
  height: 22px;
  border-right: 1px solid var(--gold-primary);
  border-bottom: 1px solid var(--gold-primary);
  transform: translateX(-50%) rotate(45deg);
  opacity: 0;
  animation: chevronPulse 3000ms ease-in-out 3000ms infinite;
}

.section-void {
  padding: 220px 2rem;
}

.content-column,
.pillar {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}

.manifesto {
  background: var(--bg-primary);
}

.manifesto__text {
  font-size: clamp(1.35rem, 3vw, 2.15rem);
  line-height: 1.9;
  letter-spacing: 0.05em;
  color: rgba(201, 185, 122, 0.85);
}

.reveal-line,
.reveal-item {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1200ms var(--ease-ceremony), transform 1200ms var(--ease-ceremony);
}

.reveal-line {
  display: block;
}

.reveal-line.is-visible,
.reveal-item.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.star-divider {
  position: relative;
  height: 360px;
  margin: 0;
  background: var(--bg-secondary);
  overflow: hidden;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.starfield {
  position: absolute;
  top: 0;
  left: 0;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: var(--star);
  will-change: opacity;
}

.starfield--dim {
  opacity: 0.3;
  box-shadow: 4vw 22vh var(--star), 9vw 8vh var(--star), 12vw 31vh var(--star), 16vw 17vh var(--star), 21vw 28vh var(--star), 25vw 11vh var(--star), 29vw 35vh var(--star), 33vw 20vh var(--star), 37vw 6vh var(--star), 42vw 30vh var(--star), 46vw 14vh var(--star), 51vw 25vh var(--star), 55vw 9vh var(--star), 59vw 34vh var(--star), 63vw 19vh var(--star), 68vw 5vh var(--star), 72vw 29vh var(--star), 76vw 13vh var(--star), 81vw 33vh var(--star), 85vw 21vh var(--star), 89vw 7vh var(--star), 93vw 27vh var(--star), 97vw 15vh var(--star), 6vw 38vh var(--star), 18vw 42vh var(--star), 31vw 44vh var(--star), 44vw 40vh var(--star), 57vw 43vh var(--star), 70vw 39vh var(--star), 83vw 45vh var(--star), 96vw 41vh var(--star), 3vw 52vh var(--star), 14vw 57vh var(--star), 27vw 49vh var(--star), 39vw 55vh var(--star), 52vw 51vh var(--star), 64vw 58vh var(--star), 77vw 50vh var(--star), 90vw 56vh var(--star), 11vw 71vh var(--star), 23vw 66vh var(--star), 35vw 74vh var(--star), 48vw 63vh var(--star), 61vw 72vh var(--star), 73vw 67vh var(--star), 86vw 75vh var(--star), 98vw 64vh var(--star), 7vw 89vh var(--star), 20vw 82vh var(--star), 32vw 92vh var(--star), 45vw 86vh var(--star), 58vw 94vh var(--star), 71vw 84vh var(--star), 84vw 90vh var(--star), 95vw 81vh var(--star), 2vw 46vh var(--star), 66vw 46vh var(--star), 88vw 47vh var(--star);
  animation: twinkleDim 16s ease-in-out infinite;
}

.starfield--medium {
  opacity: 0.7;
  box-shadow: 8vw 18vh 2px var(--star), 19vw 4vh 2px var(--star), 30vw 24vh 2px var(--star), 41vw 10vh 2px var(--star), 52vw 32vh 2px var(--star), 60vw 16vh 2px var(--star), 74vw 36vh 2px var(--star), 87vw 12vh 2px var(--star), 94vw 30vh 2px var(--star), 13vw 46vh 2px var(--star), 26vw 59vh 2px var(--star), 38vw 48vh 2px var(--star), 50vw 61vh 2px var(--star), 69vw 53vh 2px var(--star), 79vw 62vh 2px var(--star), 92vw 51vh 2px var(--star), 5vw 77vh 2px var(--star), 34vw 81vh 2px var(--star), 56vw 79vh 2px var(--star), 82vw 86vh 2px var(--star);
  animation: twinkleMedium 12s ease-in-out 1.4s infinite;
}

.starfield--bright {
  width: 2px;
  height: 2px;
  opacity: 1;
  box-shadow: 17vw 25vh 4px var(--star), 47vw 17vh 4px var(--star), 73vw 22vh 4px var(--star), 91vw 68vh 4px var(--star), 28vw 86vh 4px var(--star), 62vw 73vh 4px var(--star);
  animation: twinkleBright 8s ease-in-out 0.7s infinite;
}

.pillars {
  background: var(--bg-primary);
}

.pillar + .pillar {
  margin-top: 210px;
}

.pillar__star {
  position: relative;
  display: block;
  width: 16px;
  height: 16px;
  margin: 0 auto 32px;
}

.pillar__star::before,
.pillar__star::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gold-primary);
  box-shadow: 0 0 24px rgba(212, 175, 55, 0.18), 0 0 1px var(--star);
  clip-path: polygon(50% 0%, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0% 50%, 38% 38%);
}

.pillar__star::after {
  transform: rotate(45deg) scale(0.72);
}

.pillar__label {
  margin: 0 0 1.25rem;
  font-size: clamp(0.95rem, 1.4vw, 1.1rem);
  letter-spacing: 0.16em;
}

.pillar__title {
  margin: 0 0 1.8rem;
  font-family: "Cormorant Garamond", "Cormorant", serif;
  font-size: clamp(2.35rem, 5vw, 4.6rem);
  line-height: 1.02;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold-primary);
  text-shadow: 0 0 40px rgba(212, 175, 55, 0.15);
}

.pillar__copy {
  margin: 0;
  font-size: clamp(1rem, 1.8vw, 1.25rem);
  line-height: 1.9;
  letter-spacing: 0.05em;
  color: rgba(201, 185, 122, 0.85);
}

.photo-moment {
  padding: 210px 0 250px;
  background: var(--bg-secondary);
}

.photo-frame {
  --frame-scale: 0;
  --photo-opacity: 0;
  position: relative;
  width: min(100vw, 1440px);
  aspect-ratio: 16 / 9;
  margin: 0 auto;
  overflow: hidden;
}

.photo-frame__image {
  position: absolute;
  inset: 0;
  background-image: url("https://images.unsplash.com/photo-1519681393784-d120267933ba?auto=format&fit=crop&w=2200&q=80");
  background-size: cover;
  background-position: center;
  filter: saturate(15%) contrast(1.2) brightness(0.6);
  opacity: var(--photo-opacity);
  transform: scale(1.05);
  transition: opacity 1200ms var(--ease-ceremony), transform 1200ms var(--ease-ceremony);
}

.photo-frame.is-complete .photo-frame__image {
  transform: scale(1);
}

.photo-frame__border {
  position: absolute;
  inset: 3vw;
  border: 2px solid var(--gold-primary);
  box-shadow: 0 0 40px rgba(212, 175, 55, 0.12), inset 0 0 40px rgba(212, 175, 55, 0.06);
  transform: scale(var(--frame-scale));
  transform-origin: center;
  transition: transform 200ms linear;
}

.closing {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0 2rem 14vh;
  background: var(--bg-primary);
  overflow: hidden;
}

.starfield--closing {
  width: 1px;
  height: 1px;
  opacity: 0.22;
  box-shadow: 5vw 10vh var(--star), 18vw 22vh var(--star), 29vw 12vh var(--star), 40vw 33vh var(--star), 54vw 18vh var(--star), 67vw 29vh var(--star), 78vw 13vh var(--star), 91vw 25vh var(--star), 12vw 46vh var(--star), 33vw 58vh var(--star), 49vw 47vh var(--star), 63vw 55vh var(--star), 84vw 51vh var(--star), 22vw 76vh var(--star), 58vw 81vh var(--star), 88vw 72vh var(--star);
  animation: twinkleDim 16s ease-in-out infinite;
}

.closing__inscription {
  position: relative;
  z-index: 2;
  margin: 0;
  font-size: clamp(1.3rem, 3vw, 2.5rem);
  letter-spacing: 0.12em;
  text-align: center;
  text-shadow: 0 0 40px rgba(212, 175, 55, 0.15);
}

@keyframes heroPhoto {
  to { opacity: 0.1; }
}

@keyframes ceremonialIn {
  to { opacity: 1; transform: translateY(0); }
}

@keyframes ruleIn {
  to { opacity: 1; transform: scaleX(1); }
}

@keyframes chevronPulse {
  0%, 100% { opacity: 0.25; transform: translateX(-50%) translateY(0) rotate(45deg); }
  50% { opacity: 0.9; transform: translateX(-50%) translateY(8px) rotate(45deg); }
}

@keyframes twinkleDim {
  0%, 100% { opacity: 0.22; }
  50% { opacity: 0.38; }
}

@keyframes twinkleMedium {
  0%, 100% { opacity: 0.52; }
  50% { opacity: 0.78; }
}

@keyframes twinkleBright {
  0%, 100% { opacity: 0.78; }
  50% { opacity: 1; }
}

@media (max-width: 720px) {
  .hero__title {
    letter-spacing: 0.16em;
    padding-left: 0.16em;
  }

  .section-void {
    padding: 180px 1.35rem;
  }

  .pillar + .pillar {
    margin-top: 170px;
  }

  .photo-moment {
    padding: 180px 0 210px;
  }

  .photo-frame {
    width: 100vw;
  }
}