/* ============================================================
   Cinematic intro / loading sequence
   Countdown 5→1, anniversary title card, then reveal the site.
   Reuses the site's design tokens (private-film.css :root).
   ============================================================ */

.intro {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  grid-template: 1fr / 1fr;
  place-items: center;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 62%, #2a1a1c 0%, #0a0909 68%);
  color: var(--cream);
  opacity: 0;
  visibility: hidden;
  transition: opacity .6s ease, visibility .6s ease;
}
.intro.is-visible { opacity: 1; visibility: visible; }
.intro.is-done { opacity: 0; visibility: hidden; }
body.intro-is-locked { overflow: hidden; }

/* Cinematic letterbox bars */
.intro-bar {
  position: absolute;
  right: 0;
  left: 0;
  z-index: 4;
  height: clamp(38px, 9vh, 84px);
  background: #050404;
  transform: scaleY(0);
  transition: transform .85s var(--ease);
}
.intro-bar--top { top: 0; transform-origin: top; }
.intro-bar--bottom { bottom: 0; transform-origin: bottom; }
.intro.is-visible .intro-bar { transform: scaleY(1); }
.intro.is-leaving .intro-bar { transform: scaleY(0); transition-delay: .25s; }

/* Atmosphere */
.intro-grain {
  position: absolute;
  inset: -50%;
  z-index: 2;
  pointer-events: none;
  opacity: .08;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 190 190' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='5' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='.75'/%3E%3C/svg%3E");
  mix-blend-mode: screen;
  animation: grain 1s steps(2) infinite;
  will-change: transform;
}
.intro-light {
  position: absolute;
  top: -30%;
  left: -20%;
  z-index: 1;
  width: 75vw;
  height: 75vw;
  pointer-events: none;
  opacity: .15;
  background: radial-gradient(ellipse, rgba(230, 170, 123, .85), transparent 60%);
  filter: blur(60px);
  transform: rotate(-20deg);
  animation: leak 14s ease-in-out infinite alternate;
  will-change: transform, opacity;
}

/* Countdown stage — number inside a rotating gold ring */
.intro-stage {
  position: relative;
  z-index: 5;
  display: grid;
  grid-area: 1 / 1;
  place-items: center;
  width: min(420px, 80vw);
  aspect-ratio: 1;
  transition: opacity .5s ease, transform .5s var(--ease);
}
.intro-count-ring {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(201, 170, 116, .38);
  border-radius: 50%;
  transform: scale(.5);
  opacity: 0;
  transition: transform .95s var(--ease), opacity .95s ease;
}
.intro-count-ring::after {
  content: "";
  position: absolute;
  inset: 9%;
  border: 1px solid rgba(242, 235, 227, .12);
  border-radius: 50%;
}
.intro-count-ring::before {
  content: "";
  position: absolute;
  top: -4px;
  left: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold);
  transform: translateX(-50%);
  box-shadow: 0 0 14px rgba(201, 170, 116, .8);
}
.intro-stage.is-live .intro-count-ring { transform: scale(1); opacity: 1; }
.intro-count {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--serif);
  font-size: clamp(120px, 26vw, 240px);
  font-weight: 400;
  letter-spacing: -.04em;
  color: var(--cream);
  text-shadow: 0 4px 44px rgba(0, 0, 0, .5);
  opacity: 0;
  transform: scale(1.7);
  filter: blur(14px);
}
.intro-count.is-live { animation: intro-count-in .85s cubic-bezier(.22, 1, .36, 1) forwards; }
.intro-count.is-leave { animation: intro-count-out .3s ease forwards; }
@keyframes intro-count-in {
  0% { opacity: 0; transform: scale(1.7); filter: blur(14px); }
  22% { opacity: 1; }
  100% { opacity: 1; transform: scale(1); filter: blur(0); }
}
@keyframes intro-count-out {
  to { opacity: 0; transform: scale(.82); filter: blur(8px); }
}
.intro-stage.is-done { opacity: 0; transform: scale(.94); }

/* Title card */
.intro-card {
  position: relative;
  z-index: 5;
  grid-area: 1 / 1;
  padding: 0 26px;
  text-align: center;
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .8s ease, transform .8s var(--ease);
}
.intro-card.is-show { opacity: 1; transform: none; }
.intro-overline {
  margin: 0 0 24px;
  color: var(--gold);
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity .8s ease .25s, letter-spacing 1.2s ease .45s;
}
.intro-headline {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(46px, 9.5vw, 98px);
  letter-spacing: -.05em;
  line-height: .84;
  color: var(--cream);
  text-shadow: 0 3px 30px rgba(0, 0, 0, .42);
}
.intro-headline em {
  display: inline-block;
  color: var(--rose);
  font-style: italic;
  opacity: 0;
  transform: translateY(26px) rotate(1.5deg);
  transition: opacity .9s ease .5s, transform .9s var(--ease) .5s;
}
.intro-card.is-show .intro-headline em { opacity: 1; transform: none; }
.intro-headline .intro-line-1 {
  display: inline-block;
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .9s ease .32s, transform .9s var(--ease) .32s;
}
.intro-card.is-show .intro-headline .intro-line-1 { opacity: 1; transform: none; }
.intro-card.is-show .intro-overline { opacity: 1; letter-spacing: .44em; }
.intro-rule {
  width: 0;
  height: 1px;
  margin: 28px auto 0;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  transition: width 1.2s var(--ease) .8s;
}
.intro-card.is-show .intro-rule { width: min(300px, 54vw); }
.intro-love {
  margin: 20px 0 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(19px, 3.6vw, 27px);
  color: var(--rose);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .9s ease 1.05s, transform .9s var(--ease) 1.05s;
}
.intro-card.is-show .intro-love { opacity: 1; transform: none; }
.intro-date {
  margin: 12px 0 0;
  color: var(--faint);
  font-size: 10px;
  letter-spacing: .34em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity .9s ease 1.25s;
}
.intro-card.is-show .intro-date { opacity: 1; }

/* Film-cut flash between countdown and title */
.intro-flash {
  position: absolute;
  inset: 0;
  z-index: 6;
  background: #f2ebe3;
  opacity: 0;
  pointer-events: none;
}
.intro-flash.is-live { animation: intro-flash .55s ease forwards; }
@keyframes intro-flash {
  0% { opacity: 0; }
  16% { opacity: .9; }
  100% { opacity: 0; }
}

/* Progress hairline just inside the bottom bar */
.intro-progress {
  position: absolute;
  right: 0;
  bottom: calc(9vh + 20px);
  left: 0;
  z-index: 5;
  height: 1px;
  background: rgba(242, 235, 227, .14);
}
.intro-progress i {
  display: block;
  width: 0;
  height: 100%;
  background: var(--gold);
}
.intro.is-visible .intro-progress i { animation: intro-progress-fill 8.2s linear forwards; }
@keyframes intro-progress-fill { to { width: 100%; } }

@media (max-width: 700px) {
  .intro-bar { height: clamp(28px, 6.5vh, 54px); }
  .intro-progress { bottom: calc(6.5vh + 16px); }
  .intro-card { padding: 0 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .intro-grain, .intro-light { animation: none; }
}