/* ==========================================================================
   Opening screen — photo slideshow, monogram, names, "open invitation"
   Behaviour: js/intro.js
   ========================================================================== */

.intro { display: none; }
.js .intro {
  position: fixed; inset: 0; z-index: 20;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; background: #1E050B;
  transition: opacity 1.1s ease, transform 1.4s cubic-bezier(.3, 0, .2, 1);
}
.intro.is-opening { opacity: 0; transform: scale(1.12); pointer-events: none; }

/* ---------- Background slideshow ---------- */
.intro__slides { position: absolute; inset: 0; }
.intro__slides img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 25%;
  opacity: 0; transform: scale(1.08);
  transition: opacity 1.8s ease, transform 7s linear;
}
.intro__slides img.is-active { opacity: 1; transform: scale(1); }
.intro__shade {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 50% 45%, rgba(62, 11, 24, .35) 0%, rgba(40, 6, 14, .78) 75%),
    linear-gradient(180deg, rgba(30, 5, 11, .55) 0%, rgba(30, 5, 11, .2) 40%, rgba(30, 5, 11, .85) 100%);
}
.intro__frame {
  position: absolute; inset: 16px; pointer-events: none;
  border: 1px solid rgba(233, 217, 184, .3);
  animation: frameIn 1.6s ease both;
}

/* ---------- Text block ---------- */
.intro__content {
  position: relative; z-index: 2;
  width: min(380px, 88vw);
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  text-align: center; color: var(--cream);
}
.intro__guest {
  font-size: 14px; font-weight: 300; letter-spacing: .06em; color: #EADFD2;
  padding: 6px 18px;
  border-top: 1px solid rgba(227, 207, 170, .35); border-bottom: 1px solid rgba(227, 207, 170, .35);
  animation: fadeIn 1s ease .1s both;
}
.intro__guest b { font-weight: 400; color: #F6EBD6; }
.intro__eyebrow {
  font-family: var(--serif); font-size: 12px; letter-spacing: .42em;
  text-transform: uppercase; color: #E3CFAA;
  animation: fadeIn 1s ease .3s both;
}
.intro__mono {
  width: 62%;
  clip-path: inset(0 100% 0 0);
  animation: writeIn 2.4s cubic-bezier(.55, .1, .25, 1) .6s forwards,
             glow 3.2s ease-in-out 3.2s infinite;
}
.intro__names {
  font-family: var(--serif); font-weight: 400; font-size: 40px; line-height: 1.05;
  color: #F6EBD6; letter-spacing: .01em; white-space: nowrap;
}
.intro__names em { font-style: italic; font-size: 30px; color: var(--gold); padding: 0 8px; }
/* each letter is wrapped in .ch by js/intro.js */
.intro__names .ch { display: inline-block; opacity: 0; transform: translateY(12px); filter: blur(6px); animation: charIn .9s ease forwards; }
.intro__th { font-weight: 200; font-size: 16px; letter-spacing: .12em; color: #EADFD2; animation: riseIn 1s ease 3.4s both; }
.intro__date {
  display: flex; align-items: center; gap: 12px;
  font-weight: 200; font-size: 15px; letter-spacing: .5em; color: #E3CFAA;
  animation: riseIn 1s ease 3.6s both;
}
.intro__date::before, .intro__date::after { content: ''; width: 30px; height: 1px; background: rgba(227, 207, 170, .6); }

.intro__open {
  margin-top: 22px; min-height: 50px; padding: 0 34px;
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  border: 1px solid rgba(233, 217, 184, .8); border-radius: 999px;
  background: rgba(246, 241, 232, .08);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: var(--cream); font-family: inherit; font-size: 15px; font-weight: 300; letter-spacing: .08em; cursor: pointer;
  animation: riseIn 1s ease 3.9s both, pulse 2.4s ease-in-out 4.9s infinite;
  transition: background .25s, color .25s;
}
.intro__open small { font-family: var(--serif); font-size: 11px; letter-spacing: .32em; text-transform: uppercase; color: #E3CFAA; }
.intro__open:hover, .intro__open:focus-visible { background: var(--cream); color: var(--wine-deep); outline: none; }
.intro__open:hover small, .intro__open:focus-visible small { color: var(--burgundy); }

/* ---------- Gold sparkles (spawned by js/intro.js) ---------- */
.sparkle {
  position: absolute; z-index: 1; width: 3px; height: 3px; border-radius: 50%;
  background: #F1E4C6; box-shadow: 0 0 8px 2px rgba(241, 228, 198, .55);
  opacity: 0; animation: twinkle var(--dur, 4s) ease-in-out var(--delay, 0s) infinite;
}

@keyframes frameIn { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
@keyframes charIn { to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes writeIn { to { clip-path: inset(0 0 0 0); } }
@keyframes glow {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(233, 217, 184, 0)); }
  50% { filter: drop-shadow(0 0 12px rgba(233, 217, 184, .5)); }
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(233, 217, 184, .4); }
  50% { box-shadow: 0 0 0 10px rgba(233, 217, 184, 0); }
}
@keyframes twinkle {
  0%, 100% { opacity: 0; transform: translateY(0) scale(.6); }
  50% { opacity: 1; transform: translateY(-18px) scale(1); }
}

@media (max-width: 360px) {
  .intro__names { font-size: 34px; }
}

@media (prefers-reduced-motion: reduce) {
  .intro__mono { clip-path: none; animation: none; }
  .intro__names .ch { opacity: 1; transform: none; filter: none; animation: none; }
  .intro__guest, .intro__eyebrow, .intro__th, .intro__date, .intro__open, .intro__frame { animation: none; }
  .intro, .intro__slides img { transition-duration: .01s; }
  .sparkle { display: none; }
}