/* =============================================================
   uv-envelope-intro — shared envelope cinematic intro.

   Provides a fullscreen, tap-to-open envelope that gates the
   invitation. Each template provides its own sealed/opened
   envelope artwork via:
     <div class="uv-envelope-intro" data-uv-envelope-intro
          data-sealed="<url>" data-opened="<url>">
   or by setting CSS custom properties on the host:
     --env-sealed: url(...);
     --env-opened: url(...);

   The component is theme-agnostic and lifts colors from
   --env-bg, --env-ink, --env-accent so each template can match
   its palette.

   Owner-editor mode (body.is-owner-editor / ?draft=1 / ?edit=1)
   and marketing preview mode (/templates/<slug>/) skip the
   cinematic and reveal the full invite immediately.
   ============================================================= */

:root {
  /* Theme defaults — override at the host level. */
  --uv-env-bg: #fbf5ea;
  --uv-env-ink: #5c4030;
  --uv-env-accent: #d9a679;
  --uv-env-glow: rgba(217, 166, 121, 0.35);
  --uv-env-open-dur: 2200ms;
}

/* Fullscreen overlay that hosts the envelope cinematic. */
.uv-envelope-intro {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 4vh, 2rem);
  padding: clamp(1.5rem, 6vh, 3.5rem) 1.5rem;
  /* Fully opaque overlay: solid base color + soft radial vignette on top so
     no hero content can bleed through during the cinematic. */
  background: var(--uv-env-bg);
  background-image:
    radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--uv-env-bg) 100%, #fff 8%) 0%, color-mix(in srgb, var(--uv-env-bg) 90%, #000 6%) 100%);
  color: var(--uv-env-ink);
  opacity: 1;
  transition: opacity 800ms ease 1400ms, transform 1400ms cubic-bezier(.16,.84,.3,1.06) 800ms;
  transform: scale(1);
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
}

/* Don't render the intro for owner / draft / marketing preview. */
body.is-owner-editor .uv-envelope-intro,
body.uv-mode-draft .uv-envelope-intro,
body.is-opened .uv-envelope-intro {
  display: none !important;
}

body.is-opening .uv-envelope-intro {
  opacity: 0;
  transform: scale(1.04);
  pointer-events: none;
}

/* ---------------- Intro chrome ---------------- */

.uv-envelope-intro__eyebrow {
  font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-size: clamp(0.95rem, 2.6vw, 1.2rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--uv-env-ink) 72%, transparent);
  opacity: 0;
  transform: translateY(8px);
  animation: uvEnvFadeUp 900ms cubic-bezier(.2,.7,.2,1) 260ms forwards;
}

.uv-envelope-intro__title {
  font-family: 'Pinyon Script', 'Caveat', cursive;
  font-size: clamp(2.4rem, 8vw, 3.4rem);
  line-height: 1;
  color: var(--uv-env-ink);
  margin: -0.2em 0 0;
  opacity: 0;
  transform: translateY(10px);
  animation: uvEnvFadeUp 900ms cubic-bezier(.2,.7,.2,1) 440ms forwards;
}

/* ---------------- Envelope tap target ---------------- */

.uv-envelope-intro__wrap {
  position: relative;
  width: min(78vw, 360px);
  aspect-ratio: 3 / 2;
  perspective: 1200px;
  filter: drop-shadow(0 22px 36px rgba(60, 40, 25, 0.18));
  opacity: 0;
  transform: translateY(12px);
  animation: uvEnvFadeUp 1000ms cubic-bezier(.2,.7,.2,1) 600ms forwards;
}

.uv-envelope-intro__btn {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 220ms cubic-bezier(.2,.7,.2,1);
}
.uv-envelope-intro__btn:active { transform: scale(0.97); }
.uv-envelope-intro__btn:focus-visible {
  outline: 3px solid var(--uv-env-accent);
  outline-offset: 6px;
  border-radius: 12px;
}

.uv-envelope-intro__stack {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}

.uv-envelope-intro__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
  backface-visibility: hidden;
  transition: opacity 700ms ease 500ms, transform 1000ms cubic-bezier(.2,.7,.2,1);
}
.uv-envelope-intro__img--opened { opacity: 0; transform: rotateX(-15deg) translateY(-6%); }

/* Idle hover/active wobble for the envelope sit-still moment. */
.uv-envelope-intro__btn::after {
  content: "";
  position: absolute;
  left: 8%; right: 8%;
  bottom: -10%;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--uv-env-ink) 22%, transparent) 0%, transparent 70%);
  filter: blur(2px);
  animation: uvEnvHoverShadow 3.4s ease-in-out infinite;
}

.uv-envelope-intro__btn:hover .uv-envelope-intro__img--sealed {
  transform: translateY(-3px) rotate(-1deg);
}

/* During the open: flap fades back, the open envelope fades in. */
body.is-opening .uv-envelope-intro__img--sealed {
  opacity: 0;
  transform: rotateX(-90deg) translateY(-4%);
  transition-delay: 320ms;
}
body.is-opening .uv-envelope-intro__img--opened {
  opacity: 1;
  transform: rotateX(0deg) translateY(0);
  transition-delay: 460ms;
}

/* ---------------- Tap-to-open cue ---------------- */

.uv-envelope-intro__cue {
  font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-size: 1rem;
  letter-spacing: 0.12em;
  color: color-mix(in srgb, var(--uv-env-ink) 60%, transparent);
  text-transform: lowercase;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  opacity: 0;
  transform: translateY(6px);
  animation: uvEnvFadeUp 900ms cubic-bezier(.2,.7,.2,1) 900ms forwards,
             uvEnvCuePulse 2.6s ease-in-out 1800ms infinite;
}
.uv-envelope-intro__cue::before,
.uv-envelope-intro__cue::after {
  content: "";
  width: 28px;
  height: 1px;
  background: color-mix(in srgb, var(--uv-env-ink) 35%, transparent);
}
body.is-opening .uv-envelope-intro__cue {
  opacity: 0;
  transition: opacity 220ms ease;
}

/* ---------------- Particle burst (sparkles fly outward) ---------------- */

.uv-envelope-intro__sparkles {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.uv-envelope-intro__sparkles i {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, var(--uv-env-accent) 55%, transparent 70%);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.4);
}
body.is-opening .uv-envelope-intro__sparkles i {
  animation: uvEnvSparkleBurst 1300ms cubic-bezier(.2,.7,.2,1) forwards;
  animation-delay: calc(420ms + var(--i, 0) * 32ms);
}
/* 14 directions for the burst */
.uv-envelope-intro__sparkles i:nth-child(1)  { --dx:  120px; --dy: -90px;  --i: 0;  }
.uv-envelope-intro__sparkles i:nth-child(2)  { --dx:  170px; --dy:  10px;  --i: 1;  }
.uv-envelope-intro__sparkles i:nth-child(3)  { --dx:  140px; --dy:  100px; --i: 2;  }
.uv-envelope-intro__sparkles i:nth-child(4)  { --dx:   60px; --dy:  170px; --i: 3;  }
.uv-envelope-intro__sparkles i:nth-child(5)  { --dx:  -60px; --dy:  170px; --i: 4;  }
.uv-envelope-intro__sparkles i:nth-child(6)  { --dx: -140px; --dy:  100px; --i: 5;  }
.uv-envelope-intro__sparkles i:nth-child(7)  { --dx: -170px; --dy:   10px; --i: 6;  }
.uv-envelope-intro__sparkles i:nth-child(8)  { --dx: -120px; --dy:  -90px; --i: 7;  }
.uv-envelope-intro__sparkles i:nth-child(9)  { --dx:  -60px; --dy: -150px; --i: 8;  }
.uv-envelope-intro__sparkles i:nth-child(10) { --dx:   60px; --dy: -150px; --i: 9;  }
.uv-envelope-intro__sparkles i:nth-child(11) { --dx:  200px; --dy:  -40px; --i: 10; }
.uv-envelope-intro__sparkles i:nth-child(12) { --dx: -200px; --dy:  -40px; --i: 11; }
.uv-envelope-intro__sparkles i:nth-child(13) { --dx:    0px; --dy: -190px; --i: 12; }
.uv-envelope-intro__sparkles i:nth-child(14) { --dx:    0px; --dy:  190px; --i: 13; }

@keyframes uvEnvSparkleBurst {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.4); }
  20%  { opacity: 1; }
  100% {
    opacity: 0;
    transform:
      translate(calc(-50% + var(--dx, 0px)), calc(-50% + var(--dy, 0px)))
      scale(0.6);
  }
}

/* ---------------- Radial bloom flash ---------------- */

.uv-envelope-intro__flash {
  position: absolute;
  inset: -10%;
  pointer-events: none;
  background: radial-gradient(45% 35% at 50% 52%,
    color-mix(in srgb, #fff 88%, transparent) 0%,
    color-mix(in srgb, var(--uv-env-glow) 80%, transparent) 35%,
    transparent 70%);
  opacity: 0;
  transform: scale(0.6);
  filter: blur(8px);
}
body.is-opening .uv-envelope-intro__flash {
  animation: uvEnvFlash 1200ms cubic-bezier(.2,.7,.2,1) 380ms forwards;
}
@keyframes uvEnvFlash {
  0%   { opacity: 0; transform: scale(0.55); }
  35%  { opacity: 0.9; }
  100% { opacity: 0; transform: scale(1.5); }
}

/* ---------------- Drifting ambient backdrop ---------------- */

.uv-envelope-intro__field {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.uv-envelope-intro__drift {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--uv-env-accent) 65%, white 30%);
  opacity: 0;
  animation: uvEnvDrift var(--dur, 18s) linear infinite;
  animation-delay: var(--delay, 0s);
}
.uv-envelope-intro__drift:nth-child(odd)  { background: color-mix(in srgb, var(--uv-env-ink) 16%, white 80%); }

@keyframes uvEnvDrift {
  0%   { opacity: 0; transform: translate3d(var(--x, 50vw), 110vh, 0) scale(0.6); }
  10%  { opacity: 0.55; }
  90%  { opacity: 0.4; }
  100% { opacity: 0; transform: translate3d(calc(var(--x, 50vw) + var(--xshift, 18vw)), -20vh, 0) scale(1); }
}

/* ---------------- Keyframes ---------------- */

@keyframes uvEnvFadeUp {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes uvEnvHoverShadow {
  0%, 100% { transform: scaleX(1); opacity: 0.5; }
  50%      { transform: scaleX(0.85); opacity: 0.35; }
}
@keyframes uvEnvCuePulse {
  0%, 100% { opacity: 0.6; }
  50%      { opacity: 1; }
}

/* Reduced motion: render immediately, no animations. */
@media (prefers-reduced-motion: reduce) {
  .uv-envelope-intro,
  .uv-envelope-intro__eyebrow,
  .uv-envelope-intro__title,
  .uv-envelope-intro__wrap,
  .uv-envelope-intro__cue {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .uv-envelope-intro__img,
  .uv-envelope-intro__sparkles i,
  .uv-envelope-intro__flash,
  .uv-envelope-intro__drift {
    animation: none !important;
    transition: none !important;
  }
}