/* Invitation entrance only.
   Timing values are injected by entrance.js; do not duplicate numeric delays here. */

html.intro-will-show,
html.intro-will-show body {
  overflow: hidden;
}

/* Keep the desktop content width stable when scrolling is unlocked at the end. */
html.intro-will-show { scrollbar-gutter: stable; }

.invitation-intro {
  position: fixed;
  z-index: 200;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #f3f0e8;
  opacity: 1;
  transition: opacity var(--intro-overlay-fade) cubic-bezier(0.4, 0, 0.2, 1), background var(--intro-scene-crossfade) ease;
}

.invitation-intro[hidden],
.intro-control[hidden] {
  display: none;
}

.invitation-intro.intro-leaving { opacity: 0; pointer-events: none; }

.intro-control {
  position: fixed;
  z-index: 210;
  top: 28px;
  min-width: 42px;
  min-height: 42px;
  padding: 8px 3px;
  border: 0;
  background: transparent;
  color: rgba(32, 47, 53, 0.52);
  cursor: pointer;
  font-family: var(--title);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.72;
  transition: color 240ms ease, opacity 240ms ease;
}

.intro-control:hover,
.intro-control:focus-visible { color: rgba(32, 47, 53, 0.88); opacity: 1; }
.intro-skip { right: 30px; min-width: auto; font-size: 10px; font-weight: 400; letter-spacing: 0.12em; }
.intro-sound { left: 30px; display: grid; place-items: center; width: 42px; padding: 8px; }
.intro-sound svg {
  width: 22px;
  height: 22px;
  overflow: visible;
  fill: rgba(32, 47, 53, 0.34);
  stroke: rgba(32, 47, 53, 0.52);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.35;
}
.intro-sound-speaker { stroke: none; }
.intro-sound-muted-mark { opacity: 0; transition: opacity 180ms ease; }
.intro-sound.sound-muted .intro-sound-waves { opacity: 0; }
.intro-sound.sound-muted .intro-sound-muted-mark { opacity: 1; }

.intro-letter-stage {
  position: absolute;
  z-index: 203;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  perspective: 1600px;
  transition: opacity var(--intro-scene-crossfade) ease, transform var(--intro-scene-crossfade) cubic-bezier(0.22, 1, 0.36, 1);
}
.intro-letter {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}
.intro-envelope-images,
.intro-envelope-closed,
.intro-envelope-flap-unit,
.intro-envelope-flap { position: absolute; inset: 0; width: 100%; height: 100%; }
.intro-envelope-images { isolation: isolate; transform-style: preserve-3d; }
.intro-envelope-images::before {
  position: absolute;
  z-index: 3;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 38%, rgba(255, 253, 247, 0.3), transparent 58%),
    linear-gradient(180deg, #e7e0d2 0%, #eee9df 57%, #f4f0e8 100%);
  box-shadow: inset 0 24px 40px rgba(91, 69, 38, 0.12);
  content: "";
}
.intro-envelope-images::after {
  position: absolute;
  z-index: 4;
  inset: 0;
  clip-path: polygon(0 0, 100% 0, 50% 50.5%);
  background:
    radial-gradient(ellipse at 50% 12%, rgba(95, 73, 44, 0.2), transparent 63%),
    linear-gradient(180deg, #d8cfbe 0%, #ece5d8 48%, #faf7ef 100%);
  box-shadow: inset 0 30px 46px rgba(72, 52, 27, 0.16);
  content: "";
  opacity: 0;
  pointer-events: none;
  will-change: opacity;
}
.intro-envelope-closed,
.intro-envelope-flap { object-fit: cover; object-position: 50% 50%; }
.intro-envelope-closed {
  z-index: 5;
  opacity: 1;
  transform: scale(1.015);
  transition: opacity var(--intro-scene-crossfade) ease;
  will-change: clip-path, opacity;
}
.intro-envelope-flap-unit {
  z-index: 7;
  opacity: 1;
  pointer-events: none;
  transform: rotateX(0deg) translate3d(0, 0, 0);
  transform-origin: 50% 0;
  transform-style: preserve-3d;
  transition: opacity var(--intro-scene-crossfade) ease;
  will-change: transform, opacity;
}
.intro-envelope-flap-unit::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  clip-path: polygon(0 0, 100% 0, 50% 50.5%);
  background:
    radial-gradient(ellipse at 50% 43%, rgba(255, 255, 250, 0.7), rgba(255, 249, 229, 0.22) 48%, transparent 76%),
    linear-gradient(180deg, rgba(255, 255, 252, 0.26), rgba(255, 239, 195, 0.3));
  content: "";
  opacity: 0;
  pointer-events: none;
  transform: scale(1.015) translateZ(3px);
  backface-visibility: hidden;
  will-change: opacity;
}
.intro-envelope-flap {
  z-index: 0;
  clip-path: polygon(0 0, 100% 0, 50% 50.5%);
  transform: scale(1.015) translateZ(0);
  backface-visibility: hidden;
}
.intro-seal-group {
  position: absolute;
  z-index: 3;
  top: 49.5%;
  left: 50%;
  width: clamp(186px, 16vw, 272px);
  aspect-ratio: 1;
  pointer-events: none;
  transform: translate(-50%, -50%) translateZ(18px) rotate(-1.5deg);
  transform-style: preserve-3d;
  backface-visibility: hidden;
  will-change: transform;
}
.intro-wax-seal {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 10px 11px rgba(55, 38, 18, 0.28));
}
.intro-seal-backlight {
  position: absolute;
  z-index: 0;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  mix-blend-mode: normal;
  transform: translateZ(0) scale(0.985);
  backface-visibility: hidden;
  will-change: opacity, transform;
}
.intro-seal-backlight::after {
  position: absolute;
  z-index: 0;
  inset: -36%;
  border-radius: 50%;
  /* A single continuous rear light; no expanded silhouette or rim stroke. */
  background: radial-gradient(ellipse closest-side at 50% 50%, rgba(255, 255, 248, 0.99) 0%, rgba(255, 251, 232, 0.99) 35%, rgba(255, 236, 181, 0.82) 49%, rgba(255, 229, 159, 0.48) 62%, rgba(255, 231, 174, 0.16) 78%, rgba(255, 235, 190, 0) 100%);
  content: "";
  filter: blur(12px);
}
.intro-seal-letter-light {
  position: absolute;
  z-index: 3;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  filter: drop-shadow(0 0 2px rgba(255, 255, 235, 0.95)) drop-shadow(0 0 6px rgba(255, 211, 94, 0.72)) drop-shadow(0 0 12px rgba(210, 132, 18, 0.38));
  backface-visibility: hidden;
  will-change: opacity;
}
.intro-click-hint {
  position: absolute;
  z-index: 4;
  top: -47%;
  left: 50%;
  width: 148%;
  height: auto;
  overflow: visible;
  transform: translateX(-50%) rotate(1.5deg);
}
.intro-click-hint text {
  fill: rgba(77, 59, 32, 0.7);
  font-family: "Italianno", "Snell Roundhand", "Segoe Script", cursive;
  font-size: 28px;
  letter-spacing: 0.035em;
}

.invitation-intro.intro-opening .intro-envelope-closed {
  animation: intro-envelope-body-open var(--intro-flap-open) linear var(--intro-transition-start) both;
}
.invitation-intro.intro-opening .intro-envelope-images::after {
  animation: intro-envelope-interior-light var(--intro-interior-reveal) linear var(--intro-transition-start) both;
}
.invitation-intro.intro-opening .intro-envelope-flap-unit {
  animation: intro-envelope-flap-lift var(--intro-flap-open) cubic-bezier(0.22, 0.68, 0.28, 1) var(--intro-transition-start) both;
}
.invitation-intro.intro-opening .intro-envelope-flap-unit::after {
  animation: intro-envelope-flap-light var(--intro-flap-open) linear var(--intro-transition-start) both;
}
.invitation-intro.intro-opening .intro-seal-backlight {
  animation: intro-seal-backlight-rise var(--intro-illumination-rise) linear var(--intro-illumination-lead) both;
}
.invitation-intro.intro-opening .intro-seal-letter-light {
  animation: intro-seal-letter-rise var(--intro-illumination-rise) linear var(--intro-illumination-lead) both;
}
.invitation-intro.intro-scene-visible .intro-envelope-flap-unit,
.invitation-intro.intro-scene-visible .intro-envelope-closed {
  opacity: 0;
  transition-delay: 0ms;
  transition-duration: var(--intro-scene-crossfade);
}
.invitation-intro.intro-scene-visible .intro-envelope-images::after { opacity: 0; }
.invitation-intro.intro-scene-visible .intro-letter-stage { opacity: 0; transform: scale(1.006); }
.intro-scene {
  position: absolute;
  z-index: 201;
  inset: 0;
  overflow: hidden;
  background: var(--ivory, #f7f6f0);
  opacity: 0;
  transition: opacity var(--intro-scene-crossfade) cubic-bezier(0.4, 0, 0.2, 1), filter var(--intro-scene-crossfade) ease;
  will-change: opacity;
}
.intro-gold-bloom {
  position: absolute;
  z-index: 205;
  inset: -8%;
  background: radial-gradient(circle at 50% 49%, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 252, 0.99) 31%, rgba(255, 250, 232, 0.84) 62%, rgba(247, 229, 193, 0.27) 84%, rgba(247, 229, 193, 0) 100%);
  opacity: 0;
  pointer-events: none;
  transform: scale(0.95);
  backface-visibility: hidden;
  will-change: opacity, transform;
}
.invitation-intro.intro-opening .intro-gold-bloom {
  animation: intro-gold-light-bridge var(--intro-bloom) linear var(--intro-bloom-start) both;
}
.intro-scene::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(249, 248, 242, 0.08), rgba(247, 246, 240, 0.2));
  content: "";
}
.intro-scene-art {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 50% 50%;
  transform-origin: 0 0;
}
.invitation-intro.intro-scene-visible .intro-scene { opacity: 1; }
.invitation-intro.intro-home-visible {
  /* The opaque watercolor covers this change; let one layer control the dissolve. */
  background: transparent;
  transition: opacity var(--intro-overlay-fade) cubic-bezier(0.4, 0, 0.2, 1);
}
.invitation-intro.intro-home-visible .intro-scene {
  opacity: 0.075;
  filter: saturate(0.68) brightness(1.08);
  /* Only this final dissolve is slower; its start and the earlier reveal stay fixed. */
  transition: opacity var(--intro-home-crossfade) cubic-bezier(0.4, 0, 0.6, 1), filter var(--intro-home-crossfade) cubic-bezier(0.4, 0, 0.6, 1);
}
.invitation-intro.intro-home-visible .intro-scene-art {
  transform: var(--intro-scene-settle, none);
  transition: transform var(--intro-home-crossfade) cubic-bezier(0.4, 0, 0.6, 1);
}
.site-nav .replay-intro-link { color: #52717a; }

@keyframes intro-seal-letter-rise {
  0% { opacity: 0; }
  100% { opacity: 0.98; }
}

@keyframes intro-seal-backlight-rise {
  0% { opacity: 0; transform: translateZ(0) scale(0.985); }
  100% { opacity: 0.94; transform: translateZ(0) scale(1.03); }
}

@keyframes intro-envelope-body-open {
  0% {
    clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0, 50% 0);
    transform: scale(1.015);
  }
  0.01%, 100% {
    clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0, 50% 50.5%);
    transform: scale(1.015);
  }
}

@keyframes intro-envelope-interior-light {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes intro-envelope-flap-lift {
  0% { transform: translate3d(0, 0, 0) rotateX(0deg); }
  100% { transform: translate3d(0, -0.4%, 10px) rotateX(-32deg); }
}

@keyframes intro-envelope-flap-light {
  0% { opacity: 0; }
  100% { opacity: 0.44; }
}

@keyframes intro-gold-light-bridge {
  0% { opacity: 0; transform: scale(0.97); }
  16% { opacity: 1; }
  56% { opacity: 1; }
  100% { opacity: 0; transform: scale(1.04); }
}

@media (max-width: 760px) {
  .intro-seal-group { width: clamp(154px, 41vw, 188px); }
}

@media (max-width: 460px) {
  .intro-control { top: 18px; }
  .intro-skip { right: 18px; }
  .intro-sound { left: 18px; }
  .intro-letter-stage { width: 100vw; height: 100vh; height: 100dvh; }
  .intro-scene-art { object-position: 46% 50%; }
}