/* ==========================================================================
   ANIMATIONS — Master motion system
   Book cover opens (rotateX -180°) → pages flip like real book (rotateY).
   ========================================================================== */

/* ==========================================================================
   KEYFRAMES
   ========================================================================== */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

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

@keyframes digitPop {
  0%   { transform: translate3d(0, 6px, 0); opacity: 0.4; }
  60%  { transform: translate3d(0, -2px, 0); opacity: 1; }
  100% { transform: translate3d(0, 0, 0); opacity: 1; }
}

@keyframes sealShine {
  0%, 100% { filter: brightness(1); }
  50%      { filter: brightness(1.15); }
}

@keyframes petalFall {
  0%   { transform: translate3d(0, -8vh, 0) rotate(var(--petal-rotation)) scale(0.78); opacity: 0; }
  8%   { opacity: 0.62; }
  25%  { transform: translate3d(calc(var(--petal-drift) * -0.3), 22vh, 0) rotate(calc(var(--petal-rotation) + 18deg)) scale(1); opacity: 0.62; }
  50%  { transform: translate3d(calc(var(--petal-drift) * 0.35), 52vh, 0) rotate(calc(var(--petal-rotation) - 12deg)) scale(0.96); opacity: 0.57; }
  75%  { transform: translate3d(calc(var(--petal-drift) * -0.2), 82vh, 0) rotate(calc(var(--petal-rotation) + 16deg)) scale(0.9); opacity: 0.46; }
  100% { transform: translate3d(var(--petal-drift), 112vh, 0) rotate(calc(var(--petal-rotation) + 34deg)) scale(0.82); opacity: 0; }
}

/* Page content entrance */
@keyframes pageContentIn {
  from { opacity: 0; transform: translate3d(0, 30px, 0); filter: blur(10px); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); filter: blur(0); }
}

/* Welcome names — dramatic */
@keyframes namesReveal {
  0%   { opacity: 0; transform: translate3d(0, 40px, 0) scale(0.94); filter: blur(14px); }
  60%  { opacity: 1; transform: translate3d(0, -2px, 0) scale(1.01); filter: blur(0); }
  100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); filter: blur(0); }
}

/* Card slide in */
@keyframes cardSlide {
  from { opacity: 0; transform: translate3d(0, 24px, 0) scale(0.96); }
  to   { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

/* Portrait clip reveal */
@keyframes portraitReveal {
  from { clip-path: circle(0% at 50% 50%); transform: scale(1.12); }
  to   { clip-path: circle(60% at 50% 50%); transform: scale(1); }
}

/* Cover breathe */
@keyframes coverBreathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.03); }
}

@keyframes coverMirrorSweep {
  0%   { left: -65%; opacity: 0; }
  12%  { opacity: 1; }
  72%  { opacity: 0.82; }
  100% { left: 125%; opacity: 0; }
}

@keyframes coverOpenReveal {
  0%   { transform: perspective(1200px) scale(1); filter: brightness(1); opacity: 1; }
  38%  { transform: perspective(1200px) scale(1.025); filter: brightness(1.3); opacity: 1; }
  100% { transform: perspective(1200px) scale(0.94) translateY(-3vh); filter: brightness(1.08); opacity: 0; }
}

/* Envelope loader */
@keyframes envFlapOpen {
  0%   { transform: rotateX(0deg); }
  30%  { transform: rotateX(0deg); }
  100% { transform: rotateX(180deg); }
}

@keyframes envSealPop {
  0%   { transform: translate(-50%, -50%) scale(0) rotate(-30deg); opacity: 0; }
  40%  { transform: translate(-50%, -50%) scale(0) rotate(-30deg); opacity: 0; }
  70%  { transform: translate(-50%, -50%) scale(1.15) rotate(6deg); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1) rotate(0); opacity: 1; }
}

/* ==========================================================================
   BOOK PAGES — Real page-flip
   Active page in view. Prev pages "flipped" to left (rotateY -180).
   Next pages waiting on right.
   ========================================================================== */

.page {
  opacity: 1;
  transform: none;
  visibility: visible;
  pointer-events: auto;
  transition: none;
}

/* Active page: fully visible */
.page.is-active {
  opacity: 1;
  transform: none;
  visibility: visible;
  pointer-events: auto;
  transition: none;
}

/* Prev pages (already read): flipped to the left, showing "back" */
.page.is-prev {
  opacity: 1;
  transform: none;
  visibility: visible;
  pointer-events: auto;
  transition: none;
}

/* Next pages: waiting off to the right, hinged on the right edge */
.page.is-next {
  opacity: 1;
  transform: none;
  visibility: visible;
  pointer-events: auto;
  transition: none;
}

/* Page shadow / spine effect while flipping */
.page.is-active::after,
.page.is-prev::after,
.page.is-next::after {
  transition: opacity 0.5s ease;
}

/* ==========================================================================
   BOOK COVER — subtle idle breath before opening
   ========================================================================== */
.book-cover:not(.opened *) {
  animation: coverBreathe 6s ease-in-out infinite;
}

.book.opened .book-cover {
  opacity: 0;
  visibility: hidden;
  transform: none;
}

.book-cover__cta-icon {
  animation: floatY 2s ease-in-out infinite;
}

/* ==========================================================================
   PAGE CONTENT REVEAL — cascade after page becomes active
   ========================================================================== */
.page.is-active .page__label,
.page.is-active .page__flourish,
.page.is-active .page__inner > *:not(.page__label):not(.page__flourish) {
  animation: pageContentIn 0.9s var(--ease-out-expo) both;
}

.page.is-active .page__label            { animation-delay: 0.7s; }
.page.is-active .page__flourish         { animation-delay: 0.8s; }
.page.is-active .page__inner > *:nth-child(3) { animation-delay: 0.9s; }
.page.is-active .page__inner > *:nth-child(4) { animation-delay: 1.0s; }
.page.is-active .page__inner > *:nth-child(5) { animation-delay: 1.1s; }
.page.is-active .page__inner > *:nth-child(6) { animation-delay: 1.2s; }
.page.is-active .page__inner > *:nth-child(7) { animation-delay: 1.3s; }

/* Welcome page — names get dramatic reveal */
.page--welcome.is-active .welcome__names {
  animation: namesReveal 1.6s var(--ease-out-expo) 1s both;
}

.page--welcome.is-active .welcome__monogram {
  animation:
    pageContentIn 0.9s var(--ease-out-expo) 0.6s both,
    floatY 6s var(--ease-in-out) 2s infinite;
}

/* Couple portraits */
.page--couple.is-active .couple__portrait {
  animation: portraitReveal 1.1s var(--ease-out-expo) both;
}
.page--couple.is-active .couple__person:nth-child(1) .couple__portrait { animation-delay: 1s; }
.page--couple.is-active .couple__person:nth-child(3) .couple__portrait { animation-delay: 1.3s; }

.page--couple.is-active .couple__amp {
  animation:
    pageContentIn 0.9s var(--ease-out-expo) 1.2s both,
    floatY 4s var(--ease-in-out) 2.4s infinite;
}

/* Gift page — icon breathes, cards slide in stagger */
.page--gift.is-active .gift__icon {
  animation:
    pageContentIn 0.9s var(--ease-out-expo) 0.9s both,
    floatY 4s var(--ease-in-out) 2s infinite;
}

.page--gift.is-active .gift-card {
  opacity: 0;
  animation: cardSlide 0.8s var(--ease-out-expo) both;
}
.page--gift.is-active .gift-card:nth-child(1) { animation-delay: 1.3s; }
.page--gift.is-active .gift-card:nth-child(2) { animation-delay: 1.45s; }

/* Countdown stagger */
.page--countdown.is-active .countdown__item {
  opacity: 0;
  animation: pageContentIn 0.7s var(--ease-out-expo) both;
}
.page--countdown.is-active .countdown__item:nth-child(1) { animation-delay: 1s; }
.page--countdown.is-active .countdown__item:nth-child(2) { animation-delay: 1.1s; }
.page--countdown.is-active .countdown__item:nth-child(3) { animation-delay: 1.2s; }
.page--countdown.is-active .countdown__item:nth-child(4) { animation-delay: 1.3s; }

/* ==========================================================================
   COUNTDOWN — digit pop
   ========================================================================== */
.countdown__number { display: inline-block; will-change: transform, opacity; }
.countdown__number.pop { animation: digitPop 0.5s var(--ease-out-expo); }

/* ==========================================================================
   BUTTONS — magnetic + shine
   ========================================================================== */
.btn {
  transition: transform 0.5s var(--ease-spring), background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease;
}
.btn[data-magnetic].magnetic-active {
  transform: translate3d(var(--mx, 0), var(--my, 0), 0);
  transition: transform 0.2s var(--ease-out);
}
.btn:active { transform: scale3d(0.97, 0.97, 1); }

/* ==========================================================================
   LOADER
   ========================================================================== */
.loader {
  transition: opacity 0.9s var(--ease-out-expo), visibility 0s linear 0.9s;
}
.loader.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.loader__seal {
  animation: envSealPop 1.2s var(--ease-spring) 0.4s both,
             sealShine 3s ease-in-out 1.6s infinite;
}
.loader__stage {
  transition: transform 0.9s var(--ease-out-expo), opacity 0.9s var(--ease-out-expo);
}
.loader.opening .loader__flap {
  animation: envFlapOpen 1.1s var(--ease-out-expo) forwards;
}
.loader.opening .loader__stage {
  transform: translate3d(0, -30px, 0) scale(1.04);
  opacity: 0;
  transition-delay: 0.7s;
}
.loader__bar {
  transition: transform 0.4s var(--ease-out);
  transform-origin: left center;
}

/* ==========================================================================
   PETALS
   ========================================================================== */
.flowers-canvas {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 160;
  overflow: hidden;
}

.flower-petal {
  position: absolute;
  top: -30px;
  background: url("../assets/images/rose-petal.svg") center / 100% 100% no-repeat;
  filter: hue-rotate(var(--petal-hue)) saturate(0.88) drop-shadow(0 2px 3px rgba(83, 12, 31, 0.17));
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
}

.flower-petal--pink {
  filter: hue-rotate(-16deg) saturate(0.82) brightness(1.08) drop-shadow(0 2px 3px rgba(83, 12, 31, 0.15));
}



/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}