/* ============================================================
   ANIMATIONS.CSS  (v3 — premium polish)
   Every @keyframes + reusable animation utilities.
   Layout / color → style.css  |  Breakpoints → responsive.css
   ============================================================ */

/* ============================================================
   SCROLL REVEAL UTILITIES
   ============================================================ */
.reveal {
  opacity: 0;
  transition:
    opacity    0.80s cubic-bezier(.22,1,.36,1),
    transform  0.80s cubic-bezier(.22,1,.36,1),
    filter     0.80s cubic-bezier(.22,1,.36,1);
}
.reveal.in-view { opacity: 1; }

.reveal-fade           { transform: translateY(0); }
.reveal-fade.in-view   { opacity: 1; }

.reveal-slide-up         { transform: translateY(56px); }
.reveal-slide-up.in-view { transform: translateY(0); }

.reveal-scale          { transform: scale(0.84); }
.reveal-scale.in-view  { transform: scale(1); }

.reveal-blur           { filter: blur(14px); }
.reveal-blur.in-view   { filter: blur(0); }

.reveal-rotate         { transform: rotate(-7deg) translateY(36px); }
.reveal-rotate.in-view { transform: rotate(0) translateY(0); }

/* Stagger helpers */
.reveal-d1 { transition-delay: 0.08s; }
.reveal-d2 { transition-delay: 0.16s; }
.reveal-d3 { transition-delay: 0.24s; }
.reveal-d4 { transition-delay: 0.32s; }

/* ============================================================
   RIPPLE MICRO-INTERACTION
   ============================================================ */
[data-ripple] { position: relative; overflow: hidden; }
.ripple-dot {
  position: absolute; border-radius: 50%;
  background: rgba(255,255,255,0.50);
  transform: scale(0); pointer-events: none;
  animation: rippleGrow .7s cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes rippleGrow {
  to { transform: scale(3.0); opacity: 0; }
}

/* Click-anywhere tiny heart */
.click-heart {
  position: fixed; pointer-events: none; z-index: 9997;
  font-size: 16px;
  transition: transform 0.9s cubic-bezier(.22,1,.36,1), opacity 0.9s ease;
}

/* ============================================================
   FLOATING / DRIFTING
   ============================================================ */
@keyframes floatY {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-18px); }
}
.float { animation: floatY 4.5s ease-in-out infinite; }

@keyframes driftUp {
  0%   { transform: translateY(110vh) rotate(0deg); }
  100% { transform: translateY(-15vh) rotate(28deg); }
}

@keyframes petalFall {
  0%   { transform: translateY(-10vh) translateX(0) rotate(0deg); opacity: 0; }
  8%   { opacity: 1; }
  100% { transform: translateY(110vh) translateX(50px) rotate(220deg); opacity: 0; }
}

@keyframes twinkle {
  0%,100% { opacity: 0.18; transform: scale(1); }
  50%     { opacity: 1;    transform: scale(1.5); }
}

@keyframes fireflyDrift {
  0%   { transform: translate(0,0);         opacity: 0.15; }
  25%  { opacity: 0.9; }
  50%  { transform: translate(36px,-28px);  }
  75%  { opacity: 0.45; }
  100% { transform: translate(-24px, 14px); opacity: 0.15; }
}

/* Blob drift for cinema / clips backgrounds */
@keyframes blobDrift {
  0%   { transform: translate(0,0)        scale(1);    }
  33%  { transform: translate(35px,-22px) scale(1.10); }
  66%  { transform: translate(-22px,18px) scale(0.92); }
  100% { transform: translate(12px,-12px) scale(1.06); }
}

/* Breathe (opening hint) */
@keyframes breathe {
  0%,100% { opacity: .45; }
  50%     { opacity: .75; }
}

/* ============================================================
   PULSE / GLOW
   ============================================================ */
@keyframes pulseGlow {
  0%,100% { box-shadow: 0 0 20px 5px rgba(217,166,108,0.32); }
  50%     { box-shadow: 0 0 40px 14px rgba(217,166,108,0.62); }
}
.pulse-glow { animation: pulseGlow 2.2s ease-in-out infinite; }

@keyframes heartbeat {
  0%,100% { transform: scale(1); }
  15%     { transform: scale(1.22); }
  30%     { transform: scale(1); }
  45%     { transform: scale(1.14); }
}
.heartbeat { animation: heartbeat 1.4s ease-in-out infinite; }

@keyframes gentleBounce {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-6px); }
}

@keyframes moonGlow {
  0%,100% { filter: drop-shadow(0 0 32px rgba(240,217,181,0.55)); }
  50%     { filter: drop-shadow(0 0 56px rgba(240,217,181,0.85)); }
}

/* ============================================================
   CANDLE FLAME
   ============================================================ */
@keyframes flicker {
  from { transform: scale(1)    translateY(0)   skewX(0deg); }
  to   { transform: scale(1.18) translateY(-3px) skewX(2deg); }
}

/* ============================================================
   SHAKE (wrong password)
   ============================================================ */
@keyframes shake {
  0%,100% { transform: translateX(0); }
  20%     { transform: translateX(-10px); }
  40%     { transform: translateX(10px); }
  60%     { transform: translateX(-7px); }
  80%     { transform: translateX(7px); }
}
.shake-anim { animation: shake .55s ease; }

/* ============================================================
   GIFT JIGGLE
   ============================================================ */
@keyframes giftShake {
  0%,100% { transform: translateX(0) rotate(0); }
  25%     { transform: translateX(-8px) rotate(-5deg); }
  75%     { transform: translateX(8px)  rotate(5deg); }
}
.gift-shake { animation: giftShake .55s ease; }

/* ============================================================
   FLOWER GARDEN — premium bloom + sparkle + glow
   ============================================================ */
@keyframes bloomPremium {
  0%   { transform: scale(0) rotate(-25deg); opacity: 0; }
  60%  { transform: scale(1.22) rotate(6deg); opacity: 1; }
  80%  { transform: scale(0.92) rotate(-2deg); }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

@keyframes sparkleFloat {
  0%   { transform: translate(0,0) scale(1); opacity: 1; }
  100% { transform: translate(var(--sx,0),var(--sy,-40px)) scale(0); opacity: 0; }
}

@keyframes glowPulseOut {
  0%   { transform: scale(0.5); opacity: 0.8; }
  100% { transform: scale(3);   opacity: 0; }
}

@keyframes windSway {
  0%,100% { transform: rotate(0deg)   translateY(0); }
  25%     { transform: rotate(4deg)   translateY(-2px); }
  75%     { transform: rotate(-4deg)  translateY(1px); }
}

/* ============================================================
   BUTTERFLY / BIRD
   ============================================================ */
@keyframes flutter {
  0%,100% { transform: translate(0,0)     rotate(0deg); }
  33%     { transform: translate(28px,-20px) rotate(10deg); }
  66%     { transform: translate(-14px,12px) rotate(-6deg); }
}
@keyframes birdGlide {
  0%   { transform: translate(0,0); }
  100% { transform: translate(120vw,-12vh); }
}

/* ============================================================
   LETTER PAPER UNFOLDING
   ============================================================ */
@keyframes paperUnfold {
  0%   { transform: scaleY(0.05) rotate(-3deg); opacity: 0; }
  40%  { transform: scaleY(1.04) rotate(0.5deg); opacity: 1; }
  100% { transform: scaleY(1) rotate(0deg); opacity: 1; }
}

/* ============================================================
   MAGICAL DOOR
   ============================================================ */
.door-panel-left  { transform-origin: left center;  transition: transform 1.5s cubic-bezier(.65,0,.35,1); }
.door-panel-right { transform-origin: right center; transition: transform 1.5s cubic-bezier(.65,0,.35,1); }
.door-panel-left.open  { transform: rotateY(-110deg); }
.door-panel-right.open { transform: rotateY(110deg); }

@keyframes lightBurst {
  0%   { opacity: 0; transform: scale(0.2); }
  35%  { opacity: 1; }
  100% { opacity: 0; transform: scale(3.0); }
}
.light-burst { animation: lightBurst 1.5s ease-out forwards; }

@keyframes handlePulse {
  0%,100% { box-shadow: 0 0 6px  2px rgba(255,224,178,0.45); }
  50%     { box-shadow: 0 0 18px 8px rgba(255,224,178,0.88); }
}
.handle-pulse { animation: handlePulse 1.8s ease-in-out infinite; }

/* ============================================================
   HEART EXPLODE (opening)
   ============================================================ */
@keyframes explodeOut {
  0%   { transform: translate(0,0) scale(1);   opacity: 1; }
  100% { transform: translate(var(--ex),var(--ey)) scale(0.3); opacity: 0; }
}

/* ============================================================
   MODAL ENTRANCE — premium
   ============================================================ */
@keyframes modalEnterPremium {
  0%   { opacity: 0; transform: scale(0.80) translateY(40px); filter: blur(8px); }
  60%  { filter: blur(0); }
  100% { opacity: 1; transform: scale(1) translateY(0); filter: blur(0); }
}
.gift-reveal-inner,
.thankyou-modal-inner {
  animation: modalEnterPremium .5s cubic-bezier(.22,1,.36,1) both;
}

/* ============================================================
   COUNTDOWN — number flip
   ============================================================ */
@keyframes cdFlipOut {
  0%   { opacity: 1; transform: translateY(0)     scaleY(1); }
  100% { opacity: 0; transform: translateY(-14px) scaleY(0.6); }
}
@keyframes cdFlipIn {
  0%   { opacity: 0; transform: translateY(14px)  scaleY(0.6); }
  100% { opacity: 1; transform: translateY(0)     scaleY(1); }
}

/* ============================================================
   CINEMA — slide transition + Ken Burns premium
   ============================================================ */
@keyframes cinemaEnter {
  from { opacity: 0; transform: scale(1.04); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes kenBurnsPremium {
  0%   { transform: scale(1.00) translate(0%, 0%); }
  100% { transform: scale(1.16) translate(-2%, -1.5%); }
}

/* ============================================================
   ENDING — petal rise + glow fade
   ============================================================ */
@keyframes endingPetalRise {
  0%   { transform: translateY(0) rotate(0deg); opacity: 0; }
  10%  { opacity: 0.7; }
  100% { transform: translateY(-120vh) rotate(360deg); opacity: 0; }
}

/* ============================================================
   TYPEWRITER CARET
   ============================================================ */
.typewrite::after      { content: '|'; animation: blink 1s step-end infinite; }
.typewrite.done::after { display: none; }
@keyframes blink { 50% { opacity: 0; } }

/* ============================================================
   UNLOCK GLOW EXPAND
   ============================================================ */
@keyframes unlockExpand {
  0%   { transform: scale(0);  opacity: 0.95; }
  100% { transform: scale(50); opacity: 0; }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.15s !important;
  }
  .door-panel-left, .door-panel-right { transition-duration: 0.4s; }
  .reveal { transition-duration: 0.2s !important; }
  .btn::before { display: none; }
}