/* ==================================
HERO SECTION
===================================== */
.hero-opening{
  position:relative;
  min-height:100dvh;
  overflow:hidden;
  isolation: isolate;
}

/* ==================================
HERO SCENE
===================================== */
.hero-scene {
  position: relative;
  width: min(100%, 430px);
  height: 100dvh;
  margin-inline: auto;
}


.hero-scene::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(253,248,245,0.20)), url("background1.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
  transform: scale(1.15);
  will-change: transform;
}

/* ---- Reveal Background ---- */
@keyframes heroBackgroundReveal {
  from {
    transform: scale(1.15);
  }
  
  to {
    transform: scale(1);
  }
}

/*---- Animation Trigger ---- */
.hero-opening.opened .hero-scene::before {
  animation: heroBackgroundReveal 3s cubic-bezier(0.25,1,0.5,1) forwards;
}

/* =================================== 
HERO CONTENT
====================================== */
.hero-content {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 100%;
  transform-origin: center center;
  transition: transform 0.4s ease;
  overflow: hidden;
}

/* ===================================
MAIN TEXT 
====================================== */
.main-text-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-46%);
  width: 80%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  z-index: 15;
  color: var(--primary);
  opacity: 0;
  will-change: transform, opacity;
}

/* ---- Reveal Text ---- */
@keyframes revealText {
  0% {
    opacity: 0;
    transform: translate(-50%, -46%);
    filter: blur(3px);
  }
  
  60% {
    opacity: 1;
  }
  
  100% {
    opacity: 1;
    transform: translate(-50%, -50%);
    filter: blur(0);
  }
}

/* ---- Animation Trigger ---- */
.hero-opening.opened .main-text-content{
  animation:
  revealText 1.7s cubic-bezier(0.22,1,0.36,1) 4.7s forwards;
}

/* ====================================
SUB TITLE 
======================================= */
.wedding-of-text {
  font-size: 0.75rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 5px;
}

/* =====================================
NAME TEXT 
======================================== */
.name-text {
  font-family: 'Pinyon Script',cursive;
  font-size: 2.8rem;
  font-weight: 400;
  line-height: 1;
  color: var(--primary);
}

/* ======================================
AMPERSAND
========================================= */
.ampersand-main {
  display: block;
  margin: 0.25rem 0;
  font-size: 3.8rem;
  color: var(--gold);
}

/* =======================================
DATE
========================================== */
.date-text {
  margin-top: 30px;
  font-size: 1rem;
  letter-spacing: 2px;
  color: var(--text-light);
}

/* ===========================================
BASE ORNAMENT
============================================== */
.flower-ornament {
  position: absolute;
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
  opacity: 0;
  z-index: 10;
  will-change: transform, opacity;
  backface-visibility: hidden;
}

/* =================================
FLOWER LEFT
==================================== */
/* ---- Position ---- */
.flower-left {
  width: 74%;
  max-width: 320px;
  left: -24%;
  bottom: -7%;
  z-index: 5;
  transform-origin: left bottom;
  
}

/* ---- Reveal Animation ---- */
@keyframes revealFlowerLeft {
  0%{
    opacity: 0;
    transform:
      translate(-40px, 80px)
      scale(0.95);
  }
  
  100%{
    opacity: 1;
    transform:
      translate(0, 0)
      scale(1);
  }
}

/* ---- Sway Animation ---- */
@keyframes swayFlowerLeft {
  0%{
    transform:
      translate(0, 0)
      rotate(0deg);
  }
  
  50%{
    transform:
      translate(3px, -2px)
      rotate(2deg);
  }
  
  100%{
    transform:
      translate(-2px, 1px)
      rotate(-1.5deg);
  }
}

/* ---- Animation Trigger ---- */
.hero-opening.opened .flower-left {
  animation:
  revealFlowerLeft 1.5s cubic-bezier(0.22,1,0.36,1) 1.6s forwards,
  swayFlowerLeft 4.6s ease-in-out 3s infinite alternate;
}


/* =====================================
FLOWER RIGHT
======================================== */
/* ---- Position ---- */
.flower-right {
  width: 74%;
  max-width: 320px;
  right: 48%;
  bottom: -7%;
  z-index: 5;
  transform-origin: right bottom;
}

/* ---- Reveal Animation ---- */
@keyframes revealFlowerRight {
  0% {
    opacity: 0;
    transform:
      translate(40px, 80px)
      scaleX(-1);
  }
  
  100% {
    opacity: 1;
    transform:
      translate(0, 0)
      scaleX(-1);
  }
}

/* ---- Sway Animation ---- */
@keyframes swayFlowerRight {
  0%{
    transform:
      scaleX(-1)
      rotate(0deg)
      translate(0,0);
  }
  
  50%{
    transform:
      scaleX(-1)
      rotate(-2deg)
      translate(-3px,-2px);
  }
  
  100%{
    transform:
      scaleX(-1)
      rotate(1.5deg)
      translate(2px,1px);
  }
}

/* ---- ANIMATION TRIGGER ---- */
.hero-opening.opened .flower-right {
  animation: 
  revealFlowerRight 1.5s cubic-bezier(0.22,1,0.36,1) 1.8s forwards,
  swayFlowerRight 4.6s ease-in-out 3.3s infinite alternate;
}

/* =====================================
FLOWER CENTER
======================================== */
/* ---- Position ---- */
.flower-center {
  width: 62%;
  max-width: 270px;
  bottom: -18%;
  left: 50%;
  margin-left: -45%;
  transform-origin: center bottom;
  z-index: 7;
}

/* ---- Reveal Animation ---- */
@keyframes revealFlowerCenter {
  0% {
    opacity: 0;
    transform:
      translate(0, 80px)
      scale(0.95);
  }
  
  100% {
    opacity: 1;
    transform:
      translate(0, 0)
      scale(1);
  }
}

/* ---- Sway Animation ---- */
@keyframes swayFlowerCenter {
  0% {
    transform: 
      rotate(0deg)
      translate(0, 0);
  }
  
  50% {
    transform:
      rotate(2deg)
      translate(2px,-2px);
  }
  
  100% {
    transform:
      rotate(-1.5deg)
      translate(-2px,2px);
  }
}

/* ---- Animation Trigger ---- */
.hero-opening.opened .flower-center {
  animation:
  revealFlowerCenter 1.5s cubic-bezier(0.22,1,0.36,1) 2.6s forwards,
  swayFlowerCenter 5.5s ease-in-out 3.9s infinite alternate;
}

/* =======================================
FLOWER CENTER SECOND
========================================== */
/* ---- Position ---- */
.flower-center-second {
  width: 62%;
  max-width: 270px;
  bottom: -18%;
  left: 50%;
  margin-left: -15%;
  transform-origin: center bottom;
  z-index: 7;
}

/* ---- Reveal Animation ---- */
@keyframes revealFlowerCenterSecond {
  0% {
    opacity: 0;
    transform:
      translate(0, 80px)
      scaleX(-1)
      scale(0.9);
  }
  
  100% {
    opacity: 1;
    transform:
      translate(0, 0)
      scaleX(-1)
      scale(1);
  }
}

/* ---- Sway Animation ---- */
@keyframes swayFlowerCenterSecond {
  0% {
    transform:
      scaleX(-1)
      rotate(0deg)
      translate(0, 0);
  }
  
  50% {
    transform:
      scaleX(-1)
      rotate(-2deg)
      translate(-2px,-2px);
  }
  
  100% {
    transform:
      scaleX(-1)
      rotate(1.5deg)
      translate(2px,1px);
  }
}

/* ---- Animation Trigger ---- */
.hero-opening.opened .flower-center-second {
  animation:
  revealFlowerCenterSecond 1.5s cubic-bezier(0.22,1,0.36,1) 2.9s forwards,
  swayFlowerCenterSecond 5.9s ease-in-out 4.2s infinite alternate;
}

/* =======================================
FLOWER MIDDLE LEFT
========================================== */
/* ---- Position ---- */
.flower-middle-left {
  width: 68%;
  max-width: 290px;
  top: 59%;
  left: -29%;
  z-index: 4;
  transform-origin: left center;
}

/* ---- Reveal Animation ----- */
@keyframes revealFlowerMiddleLeft {
  0% {
    opacity: 0;
    left: -100%;
    transform:
    translateY(-50%)
    scale(0.9);
  }
  
  100% {
    opacity: 1;
    transform:
    translateY(-50%)
    scale(1);
  }
}

/* ---- Sway Animation ---- */
@keyframes swayFlowerMiddleLeft {
  0% {
    transform:
    translateY(-50%)
    rotate(0deg);
  }
  
  50% {
    transform:
    translateY(-49%)
    rotate(1.5deg);
  }
  
  100% {
    transform:
    translateY(-51%)
    rotate(-1deg);
  }
}

/* ---- Animation Trigger ---- */
.hero-opening.opened .flower-middle-left {
  animation:
  revealFlowerMiddleLeft 1.5s cubic-bezier(0.22,1,0.36,1) 3.2s forwards,
  swayFlowerMiddleLeft 4.1s ease-in-out 4.5s infinite alternate;
}

/* ==================================
FLOWER MIDDLERIGHT
===================================== */
/* ---- Position ---- */
.flower-middle-right {
  width: 68%;
  max-width: 290px;
  top: 59%;
  right: 39%;
  z-index: 4;
  transform-origin: right center;
}

/* ---- Reveal Animation ---- */
@keyframes revealFlowerMiddleRight {
  0% {
    opacity: 0;
    right: -100%;
    transform:
      translateY(-50%)
      scaleX(-1)
      scale(0.9);
  }

  100% {
    opacity: 1;
    transform:
      translateY(-50%)
      scaleX(-1)
      scale(1);
  }
}

/* ---- Sway Animation ---- */
@keyframes swayFlowerMiddleRight {
  0% {
    transform:
      translateY(-50%)
      scaleX(-1)
      rotate(0deg);
  }

  50% {
    transform:
      translateY(-49%)
      scaleX(-1)
      rotate(-1.2deg);
  }

  100% {
    transform:
      translateY(-51%)
      scaleX(-1)
      rotate(0.8deg);
  }
}

/* ---- Animation Trigger ---- */
.hero-opening.opened .flower-middle-right {
  animation:
    revealFlowerMiddleRight 1.5s cubic-bezier(0.22,1,0.36,1) 3.5s forwards,
    swayFlowerMiddleRight 4.4s ease-in-out 4.4s infinite alternate;
}

/* ============================================
FLOWER MIDDLE LEFT UPPER
=============================================== */
/* ---- Position ---- */
.flower-middle-left-upper {
  width: 68%;
  max-width: 290px;
  top: 25%;
  left: 38%;
  z-index: 5;
  transform-origin: left center;
}

/* ---- Reveal Animation ---- */
@keyframes revealFlowerMiddleLeftUpper {
  0% {
    opacity: 0;
    left: -100%;
    transform:
    translateY(-50%)
    scaleX(-1)
    scale(0.9);
  }
  
  100% {
    opacity: 1;
    transform:
    translateY(-50%)
    scaleX(-1)
    scale(1);
  }
}

/* ---- Sway Animation ---- */
@keyframes swayFlowerMiddleLeftUpper {
  0% {
    transform:
    translateY(-50%)
    scaleX(-1)
    rotate(0deg);
  }
  
  50% {
    transform:
    translateY(-49%)
    scaleX(-1)
    rotate(1.5deg);
  }
  
  100% {
    transform:
    translateY(-51%)
    scaleX(-1)
    rotate(-1deg);
  }
}

/* ---- Animation Trigger ---- */
.hero-opening.opened .flower-middle-left-upper {
animation:
revealFlowerMiddleLeftUpper 1.5s cubic-bezier(0.22,1,0.36,1) 2s forwards,
swayFlowerMiddleLeftUpper 4.7s ease-in-out 1.6s infinite alternate;
}

/* =================================================
FLOWER MIDDLE RIGHT UPPER
==================================================== */
/* ---- Position ---- */
.flower-middle-right-upper {
  width: 68%;
  max-width: 290px;
  top: 25%;
  right: -30%;
  z-index: 5;
  transform-origin: right center;
}

/* ---- Reveal Animation ---- */
@keyframes revealFlowerMiddleRightUpper {
  0% {
    opacity: 0;
    right: -100%;
    transform:
    translateY(-50%)
    scale(0.9);
  }
  
  100% {
    opacity: 1;
    transform:
    translateY(-50%)
    scale(1);
  }
}

/* ---- Sway Animation ---- */
@keyframes swayFlowerMiddleRightUpper {
  0% {
    transform:
    translateY(-50%)
    rotate(0deg);
  }
  
  50% {
    transform:
    translateY(-49%)
    rotate(1.5deg);
  }
  
  100% {
    transform:
    translateY(-51%)
    rotate(-1deg);
  }
}

/* ---- Animation Trigger ---- */
.hero-opening.opened .flower-middle-right-upper {
  animation:
  revealFlowerMiddleRightUpper 1.5s cubic-bezier(0.22,1,0.36,1) 2.3s forwards,
  swayFlowerMiddleRightUpper 5.0s ease-in-out 1.9s infinite alternate;
}

/* ==========================================
FOUNTAIN 
============================================= */
.fountain-ornament {
  position: absolute;
  width: 45%;
  max-width: 270px;
  bottom: 17px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
}

/* ---- Reveal Animation ---- */
@keyframes revealFountain {
  0% {
    opacity: 0;
    transform:
    translateX(-50%)
    translateY(50px);
  }
  
  100% {
    opacity: 1;
    transform:
    translateX(-50%)
    translateY(0);
  }
}

/* ---- Animation Trigger ---- */
.hero-opening.opened .fountain-ornament {
  animation:
  revealFountain 1.5s cubic-bezier(0.22,1,0.36,1) 3.9s forwards;
}

/* ============================================
BORDER
=============================================== */
/* ---- Position ---- */
.border-ornament {
  width: 76%;
  max-width: 360px;
  position: absolute;
  top: 47%;
  left: 50%;
  transform: translate(-50%,-50%);
  z-index: 10;
  pointer-events: none;
}

/* ---- Reveal Animation ---- */
@keyframes revealBorder {
  0% {
    opacity: 0;
    transform:
    translate(-50%,-50%)
    scale(0.95);
  }
  
  100% {
    opacity: 0.8;
    transform:
    translate(-50%,-50%)
    scale(1);
  }
}

/* ---- Animation Trigger ---- */
.hero-opening.opened .border-ornament {
  animation:
  revealBorder 2s cubic-bezier(0.22,1,0.36,1) 4.3s forwards;
}

/* ==========================================
BUTTERFLY ORNAMENT
============================================= */
.butterfly-ornament {
  position: absolute;
  width: 100dvh;
  max-width: none;
  height: auto;

  top: 50%;
  left: 50%;

  transform:
    translate(-50%, -50%)
    rotate(90deg)
    scale(0.94);

  opacity: 0;

  z-index: 9;

  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;

  will-change: transform, opacity;
}

/* ---- Reveal Butterfly ---- */
@keyframes revealButterfly {
  0% {
    opacity: 0;
    transform:
      translate(-50%, -50%)
      rotate(90deg)
      scale(0.94);
  }

  100% {
    opacity: 1;
    transform:
      translate(-50%, -50%)
      rotate(90deg)
      scale(1);
  }
}

/* ---- Animation Trigger ---- */
.hero-opening.opened .butterfly-ornament {
  animation:
    revealButterfly
    1s
    cubic-bezier(0.22, 1, 0.36, 1)
    4.2s
    forwards;
}