/* =========================================================
   Envelope Intro Animation
   ========================================================= */

/* Prevent horizontal scroll on mobile (body already has overflow-x:clip;
   adding it to html stops the viewport itself from scrolling sideways) */
html {
  overflow-x: clip;
}

/* ---- Mobile hero: force viewport height before React hydrates.
   SSR renders the hero section at calc(1200px + 100vh) (desktop parallax
   height). On mobile React corrects this to 100svh, but until hydration
   completes the tall section can show 1200px of page background below the
   image. Locking to 100svh pre-hydration prevents that. ---- */
@media (max-width: 767px) {
  #hero-section {
    height: 100svh !important;
    max-height: 100svh !important;
  }
}

/* ---- Story-intro section: center names between the two texts ---- */
#story-intro {
  min-height: fit-content !important;
  padding-bottom: 0 !important;
}

#story-intro > p:last-child {
  margin-top: 3rem !important;
  margin-bottom: 3rem !important;
}

/* Cover the existing tunnel animation while we wait for React to settle.
   Set via inline <script> in <head>; removed when overlay is ready. */
html.ei-loading::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9400;
  background: radial-gradient(ellipse at 50% 55%, #fdf7ee 0%, #f2e7d2 52%, #e6d6b6 100%);
  pointer-events: none;
}

#ei-overlay {
  /* Fine paper grain, tiled over every paper surface */
  --ei-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .31 0 0 0 0 .17 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  /* Gold-star liner printed inside the flap and envelope back */
  --ei-liner: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 26 26'%3E%3Cg fill='%23a87a45' fill-opacity='.34'%3E%3Cpath d='M13 8.5l1 3.5 3.5 1-3.5 1-1 3.5-1-3.5-3.5-1 3.5-1z'/%3E%3Ccircle cx='0' cy='0' r='1.1'/%3E%3Ccircle cx='26' cy='0' r='1.1'/%3E%3Ccircle cx='0' cy='26' r='1.1'/%3E%3Ccircle cx='26' cy='26' r='1.1'/%3E%3C/g%3E%3C/svg%3E");
  --ei-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ei-ease-io: cubic-bezier(0.65, 0, 0.35, 1);

  /* Closed envelope: as large as the screen allows, leaving room for the
     subtitle above and the button below.
     While it opens, the scene zooms out (--ei-zoom, set by the script) so
     the swung-up flap and the rising letter still fit on screen. */
  --ei-w: min(1400px, 94vw, calc((100svh - 240px) / 0.68));
  --ei-h: calc(var(--ei-w) * 0.68);

  position: fixed;
  inset: 0;
  z-index: 9500;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-family: 'Instrument Sans', 'Avenir Next', 'Helvetica Neue', Arial, sans-serif;
  background: var(--ei-noise),
              radial-gradient(ellipse at 50% 55%, #fdf7ee 0%, #f2e7d2 52%, #e6d6b6 100%);
  transition: opacity 800ms cubic-bezier(0.4, 0, 0.2, 1),
              transform 800ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Soft vignette so the envelope sits in a pool of light */
#ei-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 50%, transparent 45%, rgba(120, 88, 46, 0.14) 100%);
  pointer-events: none;
}

#ei-overlay.ei-exiting {
  opacity: 0;
  transform: scale(1.06);
  pointer-events: none;
}

/* ---- Ambient floating particles ---- */
.ei-particles {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.ei-particle {
  position: absolute;
  border-radius: 50%;
  opacity: 0;
  box-shadow: 0 0 6px 1px rgba(214, 174, 110, 0.45);
  animation: ei-particle-drift linear infinite;
}

@keyframes ei-particle-drift {
  0%   { transform: translateY(0) rotate(0deg);   opacity: 0; }
  10%  { opacity: 0.4; }
  90%  { opacity: 0.25; }
  100% { transform: translateY(-110vh) rotate(360deg); opacity: 0; }
}

/* ---- Scene ---- */
.ei-scene {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 34px;
  animation: ei-float 6s ease-in-out infinite;
  translate: 0 0;
  scale: 1;
  transition: translate 1000ms var(--ei-ease-io), scale 1000ms var(--ei-ease-io);
}

@keyframes ei-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}

/* Freeze the float where it is (no jump) once the envelope is opened */
.ei-scene.ei-opening {
  animation-play-state: paused;
}

/* Keep the envelope + rising letter centred while it is pulled out */
.ei-scene.ei-stage-out {
  translate: 0 var(--ei-shift, 0px);
  scale: var(--ei-zoom, 1);
}

/* ---- Envelope container ---- */
.ei-env-container {
  position: relative;
  width: var(--ei-w);
  height: var(--ei-h);
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  filter: drop-shadow(0 26px 40px rgba(96, 64, 28, 0.22))
          drop-shadow(0 6px 12px rgba(96, 64, 28, 0.14));
  transition: transform 500ms var(--ei-ease), filter 500ms ease;
}

.ei-env-container:focus-visible {
  outline: 2px solid rgba(138, 90, 43, 0.45);
  outline-offset: 12px;
  border-radius: 6px;
}

.ei-env-container.ei-open {
  cursor: default;
}

@media (hover: hover) {
  .ei-env-container:not(.ei-open):hover {
    transform: translateY(-4px);
    filter: drop-shadow(0 32px 48px rgba(96, 64, 28, 0.26))
            drop-shadow(0 8px 16px rgba(96, 64, 28, 0.16));
  }

  /* The flap lifts a touch, hinting that it opens */
  .ei-env-container:not(.ei-open):hover .ei-flap {
    transform: rotateX(-14deg);
  }
}

/* ---- Envelope back (inside), visible through the opening ---- */
.ei-back {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 3px;
  overflow: hidden;
  background: var(--ei-noise), linear-gradient(180deg, #e2d3b5 0%, #eadcc2 100%);
}

.ei-back::before {
  content: '';
  position: absolute;
  left: 5%;
  right: 5%;
  top: 4%;
  height: 62%;
  border-radius: 2px;
  background: var(--ei-liner), linear-gradient(180deg, #e6d3ad 0%, #ecdcbc 100%);
}

/* ---- Flap ---- */
.ei-flap-wrap {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 60%;
  z-index: 5;
  perspective: 1200px;
  perspective-origin: 50% 0%;
  pointer-events: none;
  filter: drop-shadow(0 3px 3px rgba(96, 64, 28, 0.16));
  /* Drop behind the letter once the flap is past vertical */
  transition: z-index 0s linear 400ms;
}

.ei-env-container.ei-open .ei-flap-wrap {
  z-index: 2;
}

.ei-flap {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform-origin: 50% 0%;
  transform: rotateX(0deg);
  transition: transform 800ms var(--ei-ease-io);
}

.ei-env-container.ei-open .ei-flap {
  transform: rotateX(-180deg);
}

.ei-flap-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Slightly blunted tip, like a real folded flap */
.ei-flap-front {
  clip-path: polygon(0 0, 100% 0, 52.5% 96.5%, 50% 100%, 47.5% 96.5%);
  background: var(--ei-noise),
              linear-gradient(178deg, #f3eada 0%, #ebe0ca 55%, #e1d4b9 100%);
}

/* The back face is mirrored by its own rotateX(180deg), so its shape is
   drawn upside down to line up with the front face. */
.ei-flap-back {
  transform: rotateX(180deg);
  clip-path: polygon(0 100%, 100% 100%, 52.5% 3.5%, 50% 0, 47.5% 3.5%);
  background: var(--ei-noise), #ece0c8;
}

.ei-flap-back::before {
  content: '';
  position: absolute;
  inset: 0;
  clip-path: polygon(7% 100%, 93% 100%, 50% 13%);
  background: var(--ei-liner), linear-gradient(0deg, #e6d3ad 0%, #eddebf 100%);
}

/* ---- Wax seal (rides on the flap) ---- */
.ei-seal {
  --ei-seal: calc(var(--ei-w) * 0.155);
  position: absolute;
  left: 50%;
  top: calc(100% - var(--ei-seal) * 0.62);
  width: var(--ei-seal);
  height: var(--ei-seal);
  margin-left: calc(var(--ei-seal) / -2);
  transform: translateZ(1px);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  animation: ei-seal-pulse 3.2s ease-in-out infinite;
}

@keyframes ei-seal-pulse {
  0%, 100% { scale: 1; }
  50%       { scale: 1.045; }
}

.ei-seal-half {
  position: absolute;
  inset: 0;
  transition: transform 700ms var(--ei-ease), opacity 450ms ease 150ms;
}

.ei-seal-half svg {
  display: block;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 2px 3px rgba(80, 40, 10, 0.35));
}

/* Jagged crack down the middle */
.ei-seal-left {
  clip-path: polygon(0 0, 53% 0, 47% 28%, 56% 50%, 46% 72%, 52% 100%, 0 100%);
}

.ei-seal-right {
  clip-path: polygon(53% 0, 100% 0, 100% 100%, 52% 100%, 46% 72%, 56% 50%, 47% 28%);
}

.ei-env-container.ei-seal-broken .ei-seal {
  animation: none;
}

.ei-env-container.ei-seal-broken .ei-seal-left {
  transform: translate(-16%, 22%) rotate(-18deg);
  opacity: 0;
}

.ei-env-container.ei-seal-broken .ei-seal-right {
  transform: translate(16%, 26%) rotate(15deg);
  opacity: 0;
}

/* ---- Letter (slides out of the pocket, then comes forward) ---- */
.ei-letter {
  position: absolute;
  left: 5%;
  right: 5%;
  top: 5%;
  height: 90%;
  z-index: 3;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 5% 7%;
  text-align: center;
  border-radius: 3px;
  background: var(--ei-noise), linear-gradient(180deg, #fffcf6 0%, #fbf4e6 100%);
  box-shadow: 0 1px 2px rgba(80, 55, 25, 0.12), 0 8px 24px rgba(80, 55, 25, 0.1);
  /* same three functions in every state so each step interpolates cleanly */
  transform: translate(0px, 0px) translateY(0%) scale(1);
  transition: transform 900ms var(--ei-ease), box-shadow 700ms ease;
  pointer-events: none;
}

/* Double gold rule just inside the edge */
.ei-letter::before {
  content: '';
  position: absolute;
  inset: calc(var(--ei-w) * 0.018);
  border: 1px solid rgba(184, 145, 90, 0.55);
  border-radius: 2px;
  box-shadow: inset 0 0 0 3px #fffaf0, inset 0 0 0 4px rgba(184, 145, 90, 0.28);
  pointer-events: none;
}

.ei-env-container.ei-letter-out .ei-letter {
  transform: translate(0px, 0px) translateY(-108%) scale(1);
}

/* Comes forward and grows to nearly fill the screen; the script works out
   the exact move and scale for the current window (--ei-letter-front). */
.ei-env-container.ei-letter-front .ei-letter {
  z-index: 7;
  transform: var(--ei-letter-front, translate(0px, 0px) translateY(-108%) scale(1));
  box-shadow: 0 1px 3px rgba(80, 55, 25, 0.1), 0 12px 30px rgba(80, 55, 25, 0.16);
  transition: transform 950ms var(--ei-ease-io), box-shadow 950ms ease;
}

/* ...while the envelope drops away behind it */
.ei-env-container.ei-letter-front .ei-back,
.ei-env-container.ei-letter-front .ei-flap-wrap,
.ei-env-container.ei-letter-front .ei-pocket {
  opacity: 0;
  translate: 0 14%;
  transition: opacity 700ms ease 100ms, translate 950ms var(--ei-ease-io);
}

.ei-letter-ornament {
  display: block;
  width: calc(var(--ei-w) * 0.2);
  height: auto;
  margin: 0 auto calc(var(--ei-w) * 0.022);
}

.ei-letter-names {
  margin: 0;
  font-family: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-weight: 400;
  font-size: calc(var(--ei-w) * 0.092);
  line-height: 1.05;
  color: #2f241b;
}

.ei-letter-amp {
  color: #a87a45;
  padding: 0 0.04em;
}

.ei-letter-invite {
  margin: calc(var(--ei-w) * 0.02) 0 0;
  font-size: calc(var(--ei-w) * 0.026);
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  text-wrap: balance;
  color: #8a6a48;
}

.ei-letter-rule {
  width: 34%;
  height: 1px;
  margin: calc(var(--ei-w) * 0.032) auto;
  background: linear-gradient(to right, transparent, #c4a473, transparent);
}

.ei-letter-date {
  margin: 0;
  font-family: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  font-size: calc(var(--ei-w) * 0.05);
  line-height: 1.1;
  color: #4a3826;
}

.ei-letter-place {
  margin: calc(var(--ei-w) * 0.012) 0 0;
  font-size: calc(var(--ei-w) * 0.024);
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: #8a6a48;
}

/* ---- Pocket (front folds) ---- */
.ei-pocket {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

.ei-fold-wrap {
  position: absolute;
  inset: 0;
}

.ei-fold-wrap-left   { filter: drop-shadow(1px 0 1.5px rgba(96, 64, 28, 0.1)); }
.ei-fold-wrap-right  { filter: drop-shadow(-1px 0 1.5px rgba(96, 64, 28, 0.1)); }
.ei-fold-wrap-bottom { filter: drop-shadow(0 -1.5px 2px rgba(96, 64, 28, 0.14)); }

.ei-fold {
  position: absolute;
  inset: 0;
}

.ei-fold-left {
  clip-path: polygon(0 0, 48% 52%, 50% 55%, 47% 57%, 0 100%);
  background: var(--ei-noise), linear-gradient(90deg, #efe6d3 0%, #e8ddc6 100%);
}

.ei-fold-right {
  clip-path: polygon(100% 0, 52% 52%, 50% 55%, 53% 57%, 100% 100%);
  background: var(--ei-noise), linear-gradient(270deg, #ebe1cc 0%, #e3d7be 100%);
}

.ei-fold-bottom {
  clip-path: polygon(0 100%, 47% 45%, 50% 43%, 53% 45%, 100% 100%);
  background: var(--ei-noise), linear-gradient(0deg, #efe6d4 0%, #f5eddf 100%);
}

/* ---- Subtitle ---- */
.ei-subtitle {
  margin: 0;
  font-family: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-size: clamp(16px, calc(var(--ei-w) * 0.026), 30px);
  letter-spacing: 0.06em;
  color: #8a6a48;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 700ms ease 200ms, transform 700ms ease 200ms;
  text-align: center;
}

.ei-subtitle.ei-visible {
  opacity: 1;
  transform: translateY(0);
}

/* The letter takes over from the subtitle once it rises */
.ei-scene.ei-opening .ei-subtitle {
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 400ms ease, transform 400ms ease;
}

/* ---- Buttons ---- */
.ei-open-btn,
.ei-enter-btn {
  display: block;
  padding: 1em 2.8em;
  border-radius: 100px;
  font-size: clamp(12px, calc(var(--ei-w) * 0.0145), 16px);
  white-space: nowrap;
  font-family: inherit;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  transition: opacity 400ms ease, transform 400ms ease, background-color 180ms ease,
              box-shadow 180ms ease;
}

.ei-open-btn {
  border: 1px solid rgba(138, 90, 43, 0.5);
  background: rgba(255, 250, 240, 0.5);
  color: #6e4420;
  opacity: 0;
  transform: translateY(10px);
}

.ei-open-btn.ei-visible {
  opacity: 1;
  transform: translateY(0);
}

.ei-open-btn:hover {
  background: rgba(138, 90, 43, 0.12);
}

/* Sits just under the enlarged letter (--ei-enter-top, set by the script) */
.ei-enter-btn {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: var(--ei-enter-top, 80%);
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: #8a5a2b;
  color: #fff9f1;
  box-shadow: 0 10px 30px rgba(100, 60, 20, 0.28);
  opacity: 0;
  transform: translate(-50%, 12px);
  pointer-events: none;
}

.ei-enter-btn.ei-visible {
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: auto;
}

.ei-enter-btn:hover {
  background: #74491f;
  box-shadow: 0 12px 34px rgba(100, 60, 20, 0.34);
}

.ei-open-btn:focus-visible,
.ei-enter-btn:focus-visible {
  outline: 2px solid rgba(138, 90, 43, 0.6);
  outline-offset: 3px;
}

/* Button wrapper (for stacking) */
.ei-btn-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
}

/* ---- Reduced motion: same states, no travel ---- */
@media (prefers-reduced-motion: reduce) {
  .ei-scene,
  .ei-seal {
    animation: none;
  }

  .ei-particle {
    display: none;
  }

  #ei-overlay *,
  #ei-overlay *::before {
    transition-duration: 1ms !important;
    transition-delay: 0s !important;
  }
}