/* ==========================================================================
   Premium Wedding Invitation — Cinematic Opening Experience Stylesheet
   ========================================================================== */

/* 1. Global Reset & Theme Variables */
:root {
  /* Coordinates calibrated to the wax seal center in bg-scene.png (desktop) */
  /* Desktop: seal sits on the envelope V-flap join */
  --seal-left: 50.5%;
  --seal-top: 57%;

  /* Mobile & Tablet Portrait coordinates: shifted proportionally to match desktop adjustment */
  --seal-left-mobile: 50.5%;
  --seal-top-mobile: 48.5%;

  /* Envelope dimensions for 3D flap math */
  --env-width: 320px;
  --env-height: 220px;
  --env-width-mobile: 250px;
  --env-height-mobile: 175px;
}

/* Opener Container Wrapper */
#opener-container {
  position: fixed;
  inset: 0;
  z-index: 250;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  select-none: none;
  -webkit-user-select: none;
  user-select: none;
  /* Cinematic camera floating */
  animation: cameraFloat 24s ease-in-out infinite;
  transition: opacity 1.0s ease-in-out, visibility 1.0s;
  opacity: 1;
  visibility: visible;
}

#opener-container.fade-out {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

@keyframes cameraFloat {
  0% {
    transform: scale(1.0);
  }

  50% {
    transform: scale(1.015) translate(1px, -2px);
  }

  100% {
    transform: scale(1.0);
  }
}

/* Envelope Wrapper Centering & Scale Context (Sized exactly to cover aspect ratio of photo) */
#envelope-wrapper {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  /* Desktop cover aspect ratio: 1672x941 */
  width: 100vw;
  height: 56.28vw;
  /* 941 / 1672 * 100 */
  min-height: 100vh;
  min-width: 177.68vh;
  /* 1672 / 941 * 100 */

  transform-style: preserve-3d;
  perspective: 1000px;
  transition: transform 2.8s cubic-bezier(0.7, 0, 0.3, 1);
  pointer-events: none;
  z-index: 10;
}

#envelope-wrapper.zooming {
  transform-origin: var(--seal-left, 50.1%) var(--seal-top, 50.5%);
  transform: scale(35) !important;
}

@media (max-width: 1024px) and (orientation: portrait) {
  #envelope-wrapper {
    /* Mobile portrait cover aspect ratio: 941x1672 */
    width: 56.28vh;
    /* 941 / 1672 * 100 */
    height: 100vh;
    min-width: 100vw;
    min-height: 177.68vw;
    /* 1672 / 941 * 100 */
  }
}

@media (max-width: 1024px) and (orientation: portrait) {
  #envelope-wrapper.zooming {
    transform-origin: var(--seal-left-mobile, var(--seal-left, 50.1%)) var(--seal-top-mobile, var(--seal-top, 50.5%));
    transform: scale(38) !important;
  }
}

/* Background Scene closed layer */
#bg-closed {
  position: absolute;
  inset: 0;
  background-size: 100% 100%;
  /* fills wrapper exactly without distortion */
  background-position: center;
  background-repeat: no-repeat;
  background-image: url('../assets/images/bg-scene.png');
  transform: scale(1.0);
  transition: opacity 1.6s cubic-bezier(0.25, 1, 0.5, 1), transform 2s ease, filter 1.0s cubic-bezier(0.25, 1, 0.5, 1);
  /* Organic wind sway filter */
  filter: url(#wind-sway);
  z-index: 0;
}

/* Depth of Field Blur on Focus */
#envelope-wrapper.focused #bg-closed {
  filter: blur(15px) url(#wind-sway);
  transform: scale(1.04);
}

/* Mobile responsive crop */
@media (max-width: 1024px) and (orientation: portrait) {
  #bg-closed {
    background-image: url('../assets/images/bg-scene - MOBILE.png');
  }
}

/* Ambient Light FX Overlay */
#light-fx {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(118deg,
      rgba(255, 248, 230, 0.0) 0%,
      rgba(255, 248, 230, 0.0) 35%,
      rgba(255, 248, 220, 0.13) 50%,
      rgba(255, 248, 230, 0.0) 65%,
      rgba(255, 248, 230, 0.0) 100%);
  background-size: 300% 100%;
  animation: lightDrift 14s ease-in-out infinite;
}

@keyframes lightDrift {
  0% {
    background-position: 0% 50%;
    opacity: 0.5;
  }

  40% {
    background-position: 100% 50%;
    opacity: 1;
  }

  60% {
    background-position: 120% 50%;
    opacity: 0.8;
  }

  100% {
    background-position: 0% 50%;
    opacity: 0.5;
  }
}

/* Vignette Breathing Overlay */
#vignette {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(ellipse 80% 80% at 50% 50%,
      transparent 30%,
      rgba(120, 90, 55, 0.35) 100%);
  animation: vignettePulse 8s ease-in-out infinite;
}

@keyframes vignettePulse {

  0%,
  100% {
    opacity: 0.7;
  }

  50% {
    opacity: 1.0;
  }
}

/* Interactive Seal Layer — sized to cover the full circular wax seal including outer wax edge */
#seal-layer {
  position: absolute;
  z-index: 20;
  left: var(--seal-left, 45.1%);
  top: var(--seal-top, 51.0%);
  transform: translate(-50%, -50%) scale(1.0);
  /* 7.8vw covers the full wax seal outer edge on desktop; clamped with min/max for safety */
  width: clamp(110px, 7.8vw, 160px);
  height: clamp(110px, 7.8vw, 160px);
  cursor: pointer;
  border-radius: 50%;
  transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.5s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  pointer-events: auto;
}

@media (max-width: 1024px) and (orientation: portrait) {
  #seal-layer {
    left: var(--seal-left-mobile, var(--seal-left, 40.2%));
    top: var(--seal-top-mobile, var(--seal-top, 33.6%));
    /* 12.5vw covers the full wax seal outer edge on mobile portrait */
    width: clamp(90PX, 5.5vw, 90PX);
    height: clamp(90PX, 5.5vw, 90PX);
  }
}

/* Full Wax Seal overlay element — transparent by default so photo seal shows through.
   We just use this for the shimmer and blend mode effects. */
.seal-full {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  /* No background-image — we rely on the photo's wax seal being visible through transparency */
  background: transparent;
  pointer-events: none;
  transition: transform 0.25s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Interaction feedback states */
#seal-layer.depressed {
  transform: translate(-50%, -50%) scale(0.90) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45) !important;
  filter: brightness(0.92);
}

#seal-layer.depressed #seal-shimmer {
  transform: scale(1.06) translate(-2px, -2px);
  filter: brightness(1.25);
  transition: transform 0.15s ease, filter 0.15s ease;
}

#seal-layer.broken #seal-shimmer,
#seal-layer.broken #seal-pulse {
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* Seal Shimmer overlay */
#seal-shimmer {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(105deg,
      transparent 25%,
      rgba(255, 255, 255, 0.45) 50%,
      transparent 75%);
  background-size: 200% 100%;
  animation: sealShimmer 4.5s ease-in-out infinite;
  pointer-events: none;
}

@keyframes sealShimmer {

  0%,
  68% {
    background-position: -100% 0;
    opacity: 0;
  }

  72% {
    opacity: 1;
  }

  88% {
    background-position: 200% 0;
    opacity: 0;
  }

  100% {
    background-position: 200% 0;
    opacity: 0;
  }
}

/* Pulse Ring in Idle */
#seal-pulse {
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 1.5px solid rgba(139, 90, 60, 0.4);
  animation: sealPulse 3s ease-out infinite;
  pointer-events: none;
}

@keyframes sealPulse {
  0% {
    transform: scale(1);
    opacity: 0.7;
  }

  70% {
    transform: scale(1.5);
    opacity: 0;
  }

  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}

/* Ripple expanding ring on click */
.ripple-ring {
  position: fixed;
  left: var(--seal-left, 50%);
  top: var(--seal-top, 50%);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 2px solid rgba(139, 90, 60, 0.7);
  pointer-events: none;
  z-index: 9;
  animation: rippleAnimation 0.7s cubic-bezier(0.1, 0.8, 0.3, 1) forwards;
}

@media (max-width: 768px) {
  .ripple-ring {
    left: var(--seal-left-mobile, var(--seal-left, 50%));
    top: var(--seal-top-mobile, var(--seal-top, 50%));
  }
}

@keyframes rippleAnimation {
  0% {
    width: 60px;
    height: 60px;
    opacity: 1;
  }

  100% {
    width: 150px;
    height: 150px;
    opacity: 0;
  }
}

/* Hint Text Container */
#hint-text {
  position: fixed;
  left: var(--seal-left, 62.0%);
  top: calc(var(--seal-top, 57.5%) + 75px);
  transform: translateX(-50%);
  z-index: 5;
  text-align: center;
  opacity: 0;
  animation: hintFadeIn 1s ease 1.5s forwards;
  pointer-events: none;
}

@media (max-width: 768px) {
  #hint-text {
    left: var(--seal-left-mobile, var(--seal-left, 48.0%));
    top: calc(var(--seal-top-mobile, var(--seal-top, 48.5%)) + 65px);
  }
}

.hint-monogram {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 16px;
  color: rgba(90, 60, 30, 0.7);
  letter-spacing: 6px;
  display: block;
  margin-bottom: 8px;
}

.hint-instruction {
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 500;
  color: rgba(90, 40, 20, 0.85);
  letter-spacing: 4px;
  text-transform: uppercase;
  display: block;
  animation: hintPulse 3s ease-in-out infinite 2.5s;
}

@keyframes hintFadeIn {
  to {
    opacity: 1;
  }
}

@keyframes hintPulse {

  0%,
  100% {
    opacity: 0.45;
  }

  50% {
    opacity: 0.9;
  }
}

/* Ambient Particles (Idle state) */
.ambient-particle {
  width: 3.5px;
  height: 3.5px;
  background: radial-gradient(#E8C84A 0%, #A07820 100%);
  border-radius: 50%;
  position: absolute;
  pointer-events: none;
  z-index: 4;
  opacity: 0;
  animation: floatUpParticle var(--dur) var(--delay) infinite linear;
}

@keyframes floatUpParticle {
  0% {
    transform: translateY(105vh) translateX(0);
    opacity: 0;
  }

  15% {
    opacity: var(--op, 0.45);
  }

  85% {
    opacity: var(--op, 0.45);
  }

  100% {
    transform: translateY(-5vh) translateX(var(--dx));
    opacity: 0;
  }
}

/* Skip Button style */
#skip-intro {
  position: fixed;
  top: 20px;
  right: 24px;
  z-index: 200;
  font-family: 'Montserrat', sans-serif;
  font-size: 8px;
  letter-spacing: 4px;
  color: rgba(90, 60, 30, 0.3);
  border: none;
  background: transparent;
  cursor: pointer;
  text-transform: uppercase;
  transition: color 0.3s;
}

#skip-intro:hover {
  color: rgba(90, 60, 30, 0.65);
}

/* Transition Overlay */
#fade-overlay {
  position: fixed;
  inset: 0;
  background-color: #f8f0e4;
  z-index: 260;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.9s ease-in-out;
}

/* Main Site Content Wrapper */
#main-content {
  opacity: 0;
  z-index: 50;
  transition: opacity 1.2s ease-in-out;
}

#main-content.visible {
  opacity: 1;
}

/* Preloader spinner loading screen */
#preloader-spinner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  transition: opacity 0.3s ease;
}

#preloader-spinner.hidden {
  opacity: 0;
  pointer-events: none;
}

/* Developer HUD for Fine Tuning Seal Coordinate Positions */
.debug-hud {
  display: none;
  position: fixed;
  bottom: 24px;
  left: 24px;
  background: rgba(18, 14, 10, 0.94);
  color: #f7ebd8;
  padding: 18px;
  border-radius: 12px;
  font-family: 'Courier New', monospace;
  font-size: 11px;
  z-index: 9999;
  line-height: 1.6;
  border: 1px solid #ccaf5e;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
  pointer-events: auto;
}

body.debug-active .debug-hud {
  display: block;
}

body.debug-active #seal-layer::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 8px;
  background: #ff3333;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  border: 1.5px solid #fff;
  box-shadow: 0 0 10px #ff3333;
  z-index: 999;
}

/* Clipping window representing envelope pocket */
#envelope-pocket-window {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 320px;
  height: 440px;
  overflow: hidden;
  /* Clip-path following V-pocket line of envelope in open-bg photo */
  clip-path: polygon(0 0, 100% 0, 100% 50%, 50% 75%, 0 50%);
  pointer-events: none;
  z-index: 100;
  transition: clip-path 1.2s cubic-bezier(0.25, 1, 0.5, 1), width 1.2s cubic-bezier(0.25, 1, 0.5, 1), height 1.2s cubic-bezier(0.25, 1, 0.5, 1);
}

@media (max-width: 768px) {
  #envelope-pocket-window {
    width: 250px;
    height: 350px;
    clip-path: polygon(0 0, 100% 0, 100% 50%, 50% 74%, 0 50%);
  }
}

#envelope-pocket-window.expanding {
  clip-path: none !important;
  overflow: visible !important;
  width: 100vw !important;
  height: 100vh !important;
  transition: all 1.2s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Luxury invitation card design */
#inner-content {
  position: absolute;
  left: 50%;
  /* Starts hidden low down inside the pocket */
  top: 50%;
  transform: translate(-50%, -50%) translateY(260px) scale(0.7);
  width: 290px;
  height: 380px;
  z-index: 200;
  background-color: #fbfaf8;
  background-image: url('../assets/envelope-paper.jpeg');
  /* subtle paper texture overlay */
  background-size: cover;
  border: 1px solid rgba(204, 175, 94, 0.35);
  box-shadow: 0 15px 45px rgba(61, 9, 19, 0.12);
  border-radius: 8px;
  box-sizing: border-box;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  opacity: 0;
  transition: transform 2.0s cubic-bezier(0.16, 1, 0.3, 1), opacity 1.8s ease, width 1.2s cubic-bezier(0.25, 1, 0.5, 1), height 1.2s cubic-bezier(0.25, 1, 0.5, 1), border-radius 1.2s ease, border-color 0.8s ease, box-shadow 0.8s ease, padding 1.2s ease;
  pointer-events: none;
}

@media (max-width: 768px) {
  #inner-content {
    width: 220px;
    height: 300px;
    padding: 14px;
    transform: translate(-50%, -50%) translateY(200px) scale(0.7);
  }
}

/* Card inner contents wrapper */
.card-inner {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  position: relative;
  transition: all 1.2s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Arched Couple Photo Frame on Invitation Card */
.card-photo-frame {
  width: 150px;
  height: 180px;
  border-radius: 75px 75px 0 0;
  /* Arched style */
  overflow: hidden;
  border: 1.5px solid rgba(204, 175, 94, 0.3);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
  margin: 10px 0;
  position: relative;
  z-index: 5;
  transition: width 1.2s cubic-bezier(0.25, 1, 0.5, 1), height 1.2s cubic-bezier(0.25, 1, 0.5, 1), border-radius 1.2s ease, border-width 0.8s ease, margin 1.2s ease, box-shadow 0.8s ease, position 1.2s ease, inset 1.2s ease;
}

@media (max-width: 768px) {
  .card-photo-frame {
    width: 110px;
    height: 130px;
    border-radius: 55px 55px 0 0;
    margin: 6px 0;
  }
}

.card-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 1.2s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Vignette/gradient mask overlay on photo (reveals on full screen expansion) */
.photo-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.35));
  opacity: 0;
  z-index: 2;
  pointer-events: none;
  transition: opacity 1.2s ease;
}

/* Typography styles inside card */
#inner-content .monogram {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 20px;
  color: #7a5c2e;
  letter-spacing: 3px;
  margin-top: 4px;
  opacity: 1;
  transition: opacity 0.6s ease, height 0.6s ease, margin 0.6s ease;
}

/* Hidden elements on card that emerge on morph expansion */
#inner-content .bismillah-calligraphy {
  font-family: 'Amiri', 'Scheherazade New', serif;
  font-size: 24px;
  color: #fbfaf8;
  text-align: center;
  dir: rtl;
  opacity: 0;
  height: 0;
  margin: 0;
  overflow: hidden;
  visibility: hidden;
  transition: opacity 0.8s ease 0.4s, height 0.8s ease, margin 0.8s ease;
  z-index: 10;
}

#inner-content .eyebrow-text {
  font-family: 'Jost', sans-serif;
  font-size: 9px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #ebdcb7;
  text-align: center;
  opacity: 0;
  height: 0;
  margin: 0;
  overflow: hidden;
  visibility: hidden;
  transition: opacity 0.8s ease 0.4s, height 0.8s ease, margin 0.8s ease;
  z-index: 10;
}

#inner-content .names {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 11px;
  color: #9a7a4e;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 500;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
  z-index: 10;
  transition: color 1.2s ease, font-size 1.2s cubic-bezier(0.25, 1, 0.5, 1), letter-spacing 1.2s ease, text-shadow 1.2s ease;
}

#inner-content .names .ampersand {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 14px;
  color: #9a7a4e;
  text-transform: lowercase;
  transition: color 1.2s ease, font-size 1.2s ease;
}

#inner-content .divider {
  height: 1px;
  width: 30px;
  background-color: rgba(204, 175, 90, 0.3);
  margin: 6px 0;
  z-index: 10;
  transition: width 1.2s ease, background-color 1.2s ease;
}

#inner-content .date {
  font-family: 'Montserrat', sans-serif;
  font-size: 8px;
  color: #b8956a;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 4px;
  z-index: 10;
  transition: color 1.2s ease, font-size 1.2s ease, letter-spacing 1.2s ease, text-shadow 1.2s ease;
}

@media (max-width: 768px) {
  #inner-content .monogram {
    font-size: 16px;
  }

  #inner-content .names {
    font-size: 9px;
    letter-spacing: 1.5px;
  }

  #inner-content .date {
    font-size: 7px;
    letter-spacing: 1px;
  }
}

/* Card states inside pocket */
#inner-content.emerged {
  opacity: 1;
  /* Slides up out of pocket, revealing top 40% (monogram & silhouette) */
  transform: translate(-50%, -50%) translateY(-20px) scale(0.85) !important;
}

@media (max-width: 768px) {
  #inner-content.emerged {
    transform: translate(-50%, -50%) translateY(-15px) scale(0.85) !important;
  }
}

/* Expanded state: Invitation card transforms into the website backdrop and UI elements morph */
#inner-content.expanding {
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) scale(1.0) !important;
  width: 100vw !important;
  height: 100vh !important;
  border-radius: 0 !important;
  border: none !important;
  box-shadow: none !important;
  background-color: #fbfaf8 !important;
  opacity: 1 !important;
  padding: 0 !important;
  pointer-events: auto !important;
}

/* Morph children elements to cover full viewport and render Hero layout */
#inner-content.expanding .card-inner {
  justify-content: center;
}

#inner-content.expanding .card-photo-frame {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  border-radius: 0 !important;
  border: none !important;
  margin: 0 !important;
  box-shadow: none !important;
  z-index: 0;
}

#inner-content.expanding .photo-overlay {
  opacity: 1;
  /* darken photo background so overlay text stands out */
}

#inner-content.expanding .monogram {
  opacity: 0;
  height: 0;
  margin: 0;
  overflow: hidden;
  visibility: hidden;
}

#inner-content.expanding .bismillah-calligraphy {
  opacity: 1;
  height: auto;
  margin-top: 8px;
  margin-bottom: 6px;
  visibility: visible;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

#inner-content.expanding .eyebrow-text {
  opacity: 1;
  height: auto;
  margin-bottom: 12px;
  visibility: visible;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

#inner-content.expanding .names {
  color: #fbfaf8 !important;
  font-size: 32px !important;
  letter-spacing: 4px !important;
  text-shadow: 0 2px 14px rgba(61, 9, 19, 0.65), 0 1px 3px rgba(0, 0, 0, 0.5);
}

@media (min-width: 640px) {
  #inner-content.expanding .names {
    font-size: 46px !important;
    letter-spacing: 5px !important;
  }
}

@media (min-width: 768px) {
  #inner-content.expanding .names {
    font-size: 54px !important;
    letter-spacing: 6px !important;
  }
}

#inner-content.expanding .names .ampersand {
  color: #ebdcb7 !important;
  font-size: 36px !important;
}

@media (min-width: 640px) {
  #inner-content.expanding .names .ampersand {
    font-size: 50px !important;
  }
}

#inner-content.expanding .divider {
  background-color: rgba(204, 175, 90, 0.5);
  width: 80px;
}

#inner-content.expanding .date {
  color: #ebdcb7 !important;
  font-size: 10px !important;
  letter-spacing: 4px !important;
  text-shadow: 0 2px 14px rgba(61, 9, 19, 0.65), 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* Hero Section Backgrounds with parallax support */
.hero-bg-mobile,
.hero-bg-desktop {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 0;
  transition: transform 0.1s ease-out;
  /* Smooth transition for parallax shift */
}



/* Ensure hero content is always on top and visible */
.hero-content {
  position: relative;
  z-index: 10 !important;
}

/* Warm burgundy and dark shadow combination for high contrast text on image backgrounds */
.hero-text-shadow {
  text-shadow: 0 2px 14px rgba(61, 9, 19, 0.65), 0 1px 3px rgba(0, 0, 0, 0.5);
}

#sunbeam {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(circle at 15% 15%,
      rgba(255, 245, 215, 0.28) 0%,
      rgba(255, 245, 215, 0.08) 50%,
      transparent 80%);
  filter: blur(24px);
  animation: sunbeamMove 18s ease-in-out infinite alternate;
}

@keyframes sunbeamMove {
  0% {
    transform: translate(-15px, -15px) rotate(-1deg);
    opacity: 0.85;
  }

  100% {
    transform: translate(20px, 15px) rotate(1deg);
    opacity: 1.15;
  }
}



/* ==========================================================================
   INVITATION CARD — Seal → Card → Hero Cinematic Transition
   ========================================================================== */

/* Seal lift spring state (after depress releases) */
#seal-layer.lifting {
  transform: translate(-50%, -50%) scale(1.2) !important;
  box-shadow: 0 20px 55px rgba(0, 0, 0, 0.45),
    0 0 0 1.5px rgba(204, 175, 94, 0.4) !important;
  filter: brightness(1.08) !important;
  transition:
    transform 0.38s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.38s ease,
    filter 0.38s ease !important;
}

/* ── Base State: hidden, centered, collapsed ─────────────────────────── */
#invitation-card {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0);
  width: 270px;
  height: 370px;
  z-index: 255;
  border-radius: 16px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  will-change: transform, width, height, opacity, border-radius;
  box-shadow: none;
  border: 1px solid rgba(204, 175, 94, 0);
}

/* ── Stage 1: Card peeks out from behind the seal (tiny pop) ─────────── */
#invitation-card.appeared {
  opacity: 1;
  transform: translate(-50%, -50%) scale(0.09);
  box-shadow: 0 10px 40px rgba(61, 9, 19, 0.3);
  border-color: rgba(204, 175, 94, 0.5);
  transition:
    transform 0.38s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 0.22s ease,
    box-shadow 0.38s ease,
    border-color 0.38s ease;
}

/* ── Stage 2: Card scales up to full invitation card size ────────────── */
#invitation-card.scaling {
  transform: translate(-50%, -50%) scale(1);
  box-shadow:
    0 50px 120px rgba(61, 9, 19, 0.5),
    0 0 0 1px rgba(204, 175, 94, 0.3);
  transition:
    transform 0.9s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.9s ease;
}

/* ── Stage 3: Card expands to fill viewport — becomes the hero ───────── */
#invitation-card.fullscreen {
  width: 100vw;
  height: 100vh;
  border-radius: 0;
  border-color: transparent;
  box-shadow: none;
  transition:
    width 0.9s cubic-bezier(0.16, 1, 0.3, 1),
    height 0.9s cubic-bezier(0.16, 1, 0.3, 1),
    border-radius 0.8s ease,
    box-shadow 0.8s ease,
    border-color 0.5s ease;
}

/* ── Stage 4: Dissolve away to reveal main content ───────────────────── */
#invitation-card.dissolve {
  opacity: 0;
  transition: opacity 0.85s ease;
}

/* ── Background Layers ───────────────────────────────────────────────── */

/* Cream paper background (card state) */
.ic-bg-cream {
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, #fdf8f0 0%, #f5ead8 100%);
  z-index: 0;
  transition: opacity 0.85s ease;
}

#invitation-card.fullscreen .ic-bg-cream {
  opacity: 0;
}

/* Hero photograph (fades in when card goes fullscreen) */
.ic-bg-hero {
  position: absolute;
  inset: 0;
  background-image: url('../assets/hero 2.png');
  background-size: cover;
  background-position: center;
  z-index: 0;
  opacity: 0;
  transition: opacity 0.9s ease 0.12s;
}

@media (max-width: 768px) {
  .ic-bg-hero {
    background-image: url('../assets/hero 1.png');
  }
}

#invitation-card.fullscreen .ic-bg-hero {
  opacity: 1;
}

/* Cinematic dark overlay — only shows in hero state for text contrast */
.ic-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
      rgba(0, 0, 0, 0.20) 0%,
      rgba(0, 0, 0, 0.04) 45%,
      rgba(0, 0, 0, 0.30) 100%);
  z-index: 1;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.9s ease 0.12s;
}

#invitation-card.fullscreen .ic-overlay {
  opacity: 1;
}

/* Gold foil top border accent on the card */
#invitation-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #ccaf5e, transparent);
  z-index: 3;
  opacity: 1;
  transition: opacity 0.5s ease;
}

#invitation-card.fullscreen::before {
  opacity: 0;
}

/* ── Card Body Typography ─────────────────────────────────────────────── */
.ic-body {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 28px 24px;
  text-align: center;
  gap: 0;
}

/* Small ornament dots */
.ic-ornament {
  font-family: 'Cormorant Garamond', serif;
  font-size: 8px;
  color: rgba(204, 175, 94, 0.65);
  letter-spacing: 10px;
  margin-bottom: 16px;
  transition: color 0.85s ease, opacity 0.85s ease, letter-spacing 0.85s ease;
}

#invitation-card.fullscreen .ic-ornament {
  color: rgba(204, 175, 94, 0.75);
  letter-spacing: 12px;
}

/* R ♥ S monogram */
.ic-monogram {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 12px;
  color: rgba(122, 92, 46, 0.75);
  letter-spacing: 9px;
  margin-bottom: 14px;
  transition:
    color 0.85s ease,
    font-size 0.85s ease,
    letter-spacing 0.85s ease,
    text-shadow 0.85s ease;
}

#invitation-card.fullscreen .ic-monogram {
  color: rgba(235, 220, 183, 0.85);
  letter-spacing: 11px;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
}

/* Gold divider line */
.ic-divider {
  width: 40px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(204, 175, 94, 0.6), transparent);
  margin: 0 0 16px 0;
  transition: width 0.85s ease, background 0.85s ease;
}

#invitation-card.fullscreen .ic-divider {
  width: 90px;
  background: linear-gradient(90deg, transparent, rgba(204, 175, 94, 0.9), transparent);
}

/* Couple names — the hero headline */
.ic-names {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 28px;
  color: #3d0913;
  letter-spacing: 1px;
  font-weight: 400;
  line-height: 1.15;
  margin-bottom: 12px;
  transition:
    color 0.85s ease,
    font-size 0.85s cubic-bezier(0.16, 1, 0.3, 1),
    letter-spacing 0.85s ease,
    text-shadow 0.85s ease;
}

.ic-amp {
  font-style: italic;
  color: #7a5c2e;
  transition: color 0.85s ease;
}

#invitation-card.fullscreen .ic-names {
  font-size: 58px;
  color: #fbfaf8;
  letter-spacing: 3px;
  text-shadow:
    0 2px 20px rgba(61, 9, 19, 0.65),
    0 1px 4px rgba(0, 0, 0, 0.4);
}

#invitation-card.fullscreen .ic-amp {
  color: #ebdcb7;
}

@media (max-width: 640px) {
  #invitation-card.fullscreen .ic-names {
    font-size: 38px;
    letter-spacing: 2px;
  }
}

/* Tagline / date */
.ic-tagline {
  font-family: 'Montserrat', sans-serif;
  font-size: 7px;
  color: rgba(184, 149, 106, 0.8);
  letter-spacing: 4px;
  text-transform: uppercase;
  transition:
    color 0.85s ease,
    letter-spacing 0.85s ease,
    text-shadow 0.85s ease;
}

}

/* ==========================================================================
   Fast Organic Ink Reveal Classes
   ========================================================================== */

/* 1. Seal Crack Effect */
#seal-layer.seal-crack::after {
  content: '';
  position: absolute;
  inset: 0;
  /* SVG crack graphic */
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M40,20 L45,35 L38,45 L48,60 L42,75 L50,90' fill='none' stroke='%231a0505' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/cover no-repeat;
  opacity: 1;
  pointer-events: none;
  z-index: 10;
}

/* 2. Organic Ink Mask on Main Content */
.ink-reveal-mask {
  opacity: 1 !important;
  pointer-events: auto !important;
  /* Multi-blob organic SVG mask */
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M41,12C55,7,72,13,83,26C94,39,92,60,82,75C72,90,51,97,35,90C19,83,8,64,10,48C12,32,27,17,41,12Z'/%3E%3C/svg%3E");
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: 0vmax;
  /* Fast 1.05s ease-in curve for rapid ink soak */
  transition: mask-size 1.05s cubic-bezier(0.7, 0, 0.2, 1);
  z-index: 250 !important; /* Elevated over the envelope */
}

.ink-reveal-mask.expand {
  mask-size: 400vmax;
}

/* 3. Hero Content Upward Reveal */
.reveal-up {
  opacity: 0;
  translate: 0 24px;
}
.reveal-up.active {
  opacity: 1;
  translate: 0 0;
  transition: opacity 0.3s ease-out, translate 0.3s ease-out;
}