/* ═══════════════════════════════════════════════════════════════════

   ERA RESIDENCE MOTION, PARALLAX & EDITORIAL COUPLE SHOWCASE

   Inspired by https://resedince-by-yuvi.pages.dev/

═══════════════════════════════════════════════════════════════════ */



/* ─────────────────────────────────────

   1. SplitText 3D Character & Line Typography

───────────────────────────────────── */

.split-char {

  display: inline-block;

  will-change: transform, opacity;

  transform-style: preserve-3d;

  backface-visibility: hidden;

}



.split-word {

  display: inline-block;

  white-space: nowrap;

}



.split-line {

  display: block;

  overflow: hidden;

  will-change: transform, opacity;

}



/* ─────────────────────────────────────

   2. Floating Bougainvillea Floral Vines

   (Corner Anchored, Unclipped & Edge Flush)

───────────────────────────────────── */

.flower {
  z-index: 15;
  pointer-events: none;
  position: absolute;
  overflow: visible;
  background: transparent !important;
  background-color: transparent !important;
}

.flower .video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  background: transparent !important;
  background-color: transparent !important;
  filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.28));
  outline: none;
  border: none;
}



/* Top-Left Hanging Vine: Anchored in top-left corner */

.cpl-flower-top-left {

  top: 0;

  left: 0;

  width: clamp(180px, 30vw, 360px);

  height: clamp(180px, 30vw, 360px);

  transform: none;

}



/* Bottom-Right Corner Vine: Natively rotated 180deg, anchored at bottom edge before blur */

.cpl-flower-bot-right {
  bottom: 0;
  right: 0;
  width: clamp(180px, 30vw, 360px);
  height: clamp(180px, 30vw, 360px);
  transform: rotate(180deg);
}



/* ─────────────────────────────────────

   3. Couple Showcase Section (Era Residence Light Theme #F3F3EC)

───────────────────────────────────── */

.cpl-showcase-section {

  position: relative;

  width: 100%;

  padding: 0;

  margin: 0;

  margin-bottom: -45px;

  background: #F3F3EC;

  overflow: hidden;

  z-index: 10;

  display: flex;

  flex-direction: column;

  align-items: center;

  -webkit-mask-image: linear-gradient(

    to bottom,

    black 0%,

    black calc(100% - 48px),

    rgba(0, 0, 0, 0.88) calc(100% - 35px),

    rgba(0, 0, 0, 0.55) calc(100% - 22px),

    rgba(0, 0, 0, 0.20) calc(100% - 10px),

    transparent 100%

  );

  mask-image: linear-gradient(

    to bottom,

    black 0%,

    black calc(100% - 48px),

    rgba(0, 0, 0, 0.88) calc(100% - 35px),

    rgba(0, 0, 0, 0.55) calc(100% - 22px),

    rgba(0, 0, 0, 0.20) calc(100% - 10px),

    transparent 100%

  );

}



/* Hero Stage (Couple Image attached directly to top) */

.cpl-hero-stage {

  position: relative;

  width: 100%;

  max-width: 1400px;

  margin: 0 auto;

  overflow: hidden;

}



/* Soft Top Blend (Dissolves into the Invitation Card Lotus Pond above) */
.cpl-top-blend {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: clamp(35px, 5vw, 55px);
  z-index: 10;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(14, 7, 16, 0.8) 0%, rgba(14, 7, 16, 0.25) 50%, transparent 100%);
}

.cpl-hero-img-wrap {
  position: relative;
  width: 100%;
  height: clamp(620px, 86vh, 920px);
  overflow: hidden;
  background: #E8E5DD;
  will-change: clip-path;
}

@media (max-width: 767px) {
  .cpl-hero-img-wrap {
    height: clamp(560px, 84vh, 760px);
  }
}

.cpl-hero-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 8%; /* Head and face priority - NEVER cut off on any device */
  will-change: transform;
}

@media (min-width: 768px) {
  .cpl-hero-img {
    object-position: center 5%; /* Desktop/laptop: locks headroom safely so heads and faces are 100% visible */
  }
}

@media (max-width: 767px) {
  .cpl-hero-img {
    object-position: center 8%; /* Mobile portrait: natural headroom and full body visibility */
  }
}




/* Cloud Mist Transition ("Badal Jaisa" / Subtle Light Mist at Bottom Edge) */

.cpl-clouds-divider {

  position: absolute;

  left: 0;

  right: 0;

  bottom: 0;

  height: 26px;

  pointer-events: none;

  z-index: 12;

  overflow: hidden;

  display: flex;

  align-items: flex-end;

}



.cpl-cloud-layer {

  display: none; /* No clouds washing over the couple */

}



.cpl-cloud-mist-blend {

  position: absolute;

  inset: 0;

  background: linear-gradient(to bottom, transparent 0%, rgba(243, 243, 236, 0.4) 40%, #F3F3EC 100%);

  pointer-events: none;

}



/* ─────────────────────────────────────

   4. Royal Ornamental Bracket Card & Editorial Typography

───────────────────────────────────── */

.cpl-content-stage {

  position: relative;

  width: 100%;

  padding: 1.6rem 1.2rem clamp(2.4rem, 5vh, 3.8rem);

  background: #F3F3EC;

  display: flex;

  justify-content: center;

  align-items: center;

  z-index: 14;

}



/* Royal Ornamental Bracket Card */

.cpl-royal-card {

  position: relative;

  width: 100%;

  max-width: min(600px, 92vw);

  margin: 0 auto;

  padding: clamp(24px, 4vw, 36px) clamp(20px, 5vw, 44px);

  text-align: center;

  display: flex;

  flex-direction: column;

  align-items: center;

  background: linear-gradient(145deg, rgba(255, 255, 255, 0.85) 0%, rgba(248, 245, 238, 0.95) 100%);

  border: 1px solid rgba(195, 155, 90, 0.38);

  border-radius: 12px;

  box-shadow: 

    inset 0 0 0 1px rgba(255, 255, 255, 0.85),

    0 12px 32px -10px rgba(120, 85, 45, 0.12),

    0 3px 10px rgba(0, 0, 0, 0.03);

  backdrop-filter: blur(10px);

  -webkit-backdrop-filter: blur(10px);

}



/* Four Ornate Corner Brackets */

.cpl-corner {

  position: absolute;

  width: 22px;

  height: 22px;

  pointer-events: none;

  border-color: #C39B5A;

  border-style: solid;

}



.cpl-corner--tl {

  top: -3px;

  left: -3px;

  border-width: 2px 0 0 2px;

  border-top-left-radius: 6px;

}



.cpl-corner--tr {

  top: -3px;

  right: -3px;

  border-width: 2px 2px 0 0;

  border-top-right-radius: 6px;

}



.cpl-corner--bl {

  bottom: -3px;

  left: -3px;

  border-width: 0 0 2px 2px;

  border-bottom-left-radius: 6px;

}



.cpl-corner--br {

  bottom: -3px;

  right: -3px;

  border-width: 0 2px 2px 0;

  border-bottom-right-radius: 6px;

}



/* Card Crest Motif */

.cpl-card-crest {

  display: flex;

  align-items: center;

  justify-content: center;

  margin-bottom: 0.6rem;

  width: 100%;

}



.cpl-crest-svg {

  width: clamp(75px, 16vw, 105px);

  height: auto;

  opacity: 0.85;

}



.cpl-stage-tag {

  font-family: var(--body, 'EB Garamond', Georgia, serif);

  font-size: clamp(0.72rem, 1.1vw, 0.86rem);

  font-weight: 600;

  letter-spacing: 0.32em;

  text-transform: uppercase;

  color: #9A6A32;

  margin-bottom: 0.6rem;

  display: inline-block;

}



.cpl-stage-title {

  font-family: var(--display, 'Cormorant Garamond', Georgia, serif);

  font-size: clamp(2.3rem, 5.2vw, 3.8rem);

  font-weight: 500;

  font-style: italic;

  line-height: 1.15;

  color: #641523;

  margin: 0 0 0.55rem;

  letter-spacing: 0.02em;

  display: flex;

  align-items: center;

  justify-content: center;

  flex-wrap: wrap;

  gap: 0.35rem 0.6rem;

}



.cpl-name {

  display: inline-block;

}



.cpl-amp {

  font-family: var(--script, 'Parisienne', cursive);

  font-style: normal;

  font-weight: 400;

  font-size: 0.9em;

  color: #C39B5A;

  margin: 0 0.12em;

}



.cpl-stage-divider {

  display: flex;

  align-items: center;

  justify-content: center;

  width: 130px;

  height: 1px;

  background: linear-gradient(90deg, transparent, #C39B5A, transparent);

  margin: 0.35rem auto 0.95rem;

  position: relative;

}



.cpl-divider-diamond {

  width: 6px;

  height: 6px;

  background: #C39B5A;

  transform: rotate(45deg);

  border-radius: 1px;

}



.cpl-stage-lead {

  font-family: var(--body, 'EB Garamond', Georgia, serif);

  font-size: clamp(0.76rem, 1.15vw, 0.92rem);

  font-weight: 600;

  letter-spacing: 0.24em;

  text-transform: uppercase;

  color: #8A5C2A;

  margin: 0;

}



/* Removed separate seam box; organic masked dissolve on .cpl-showcase-section eliminates all lines */

.cpl-section-seam-blur {

  display: none !important;

}


/* ─────────────────────────────────────
   RSVP Top Hanging Bougainvillea Floral Vines
   (Mirrored on Both Sides, Clean & Flush, Nothing at Bottom)
───────────────────────────────────── */
.rsvp-flower-top-left {
  position: absolute;
  top: 0;
  left: 0;
  width: clamp(140px, 24vw, 280px);
  height: clamp(140px, 24vw, 280px);
  pointer-events: none;
  z-index: 15;
  transform: none;
}

.rsvp-flower-top-right {
  position: absolute;
  top: 0;
  right: 0;
  width: clamp(140px, 24vw, 280px);
  height: clamp(140px, 24vw, 280px);
  pointer-events: none;
  z-index: 15;
  transform: scaleX(-1);
}


/* ═══════════════════════════════════════════
   ROYAL JHOOMER CHANDELIER MAJESTIC SWAY
   Visible, elegant, smooth pendulum motion
═══════════════════════════════════════════ */
.intro-jhoomer,
.evt-jhoomer-inner {
  transform-origin: 50% 0% !important;
  will-change: transform;
}

.intro.is-lit .intro-jhoomer {
  transform-origin: 50% 0% !important;
  animation: royalJhoomerSwayIntro 3.2s cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate !important;
}

.evt-jhoomer-inner {
  transform-origin: 50% 0% !important;
  animation: royalJhoomerSwayEvt 3.2s cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate !important;
}

@keyframes royalJhoomerSwayIntro {
  0%   { transform: translate3d(-50%, 0, 0) rotate(-6.5deg); }
  100% { transform: translate3d(-50%, 0, 0) rotate(6.5deg); }
}

@keyframes royalJhoomerSwayEvt {
  0%   { transform: rotate(-6.5deg); }
  100% { transform: rotate(6.5deg); }
}


/* Transparent Flower Images (Universal iOS / Android / Desktop compatibility - zero black boxes) */
.flower-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.28));
  will-change: transform;
}

/* Gentle royal breeze animation on hanging flower vines */
.cpl-flower-top-left .flower-img,
.rsvp-flower-top-left .flower-img {
  transform-origin: top left;
  animation: floralBreezeLeft 7s ease-in-out infinite alternate;
}

.cpl-flower-bot-right .flower-img {
  transform-origin: bottom right;
  animation: floralBreezeRight 7.5s ease-in-out infinite alternate;
}

.rsvp-flower-top-right .flower-img {
  transform-origin: top right;
  animation: floralBreezeRight 7s ease-in-out infinite alternate;
}

@keyframes floralBreezeLeft {
  0%   { transform: rotate(0deg) scale(1); }
  50%  { transform: rotate(2.8deg) scale(1.02) translateY(2px); }
  100% { transform: rotate(-1.5deg) scale(0.99); }
}

@keyframes floralBreezeRight {
  0%   { transform: rotate(0deg) scale(1); }
  50%  { transform: rotate(-2.8deg) scale(1.02) translateY(2px); }
  100% { transform: rotate(1.5deg) scale(0.99); }
}

@media (prefers-reduced-motion: reduce) {
  .intro.is-lit .intro-jhoomer {
    animation: royalJhoomerSwayIntro 3.2s cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate !important;
  }
  .evt-jhoomer-inner {
    animation: royalJhoomerSwayEvt 3.2s cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate !important;
  }
}