/* Motion layer — falling petals, sparkles, page/cover/story reveals */

#ambient-petals {
  z-index: 0;
  contain: layout paint;
}

body {
  background-size: 140% 140%;
  animation: mistShift 32s ease-in-out infinite alternate;
}

@keyframes mistShift {
  0% { background-position: 0% 0%; }
  100% { background-position: 100% 80%; }
}

.password-card {
  animation: cardLift 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes cardLift {
  from { opacity: 0; transform: translateY(18px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.cover-frame {
  animation: coverOpen 1.05s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes coverOpen {
  from { opacity: 0; transform: translateY(22px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.cover-title {
  animation: titleGlow 5.5s ease-in-out infinite alternate;
}

@keyframes titleGlow {
  from { text-shadow: 0 0 0 rgba(201, 137, 163, 0); }
  to { text-shadow: 0 8px 28px rgba(201, 137, 163, 0.28); }
}

.cover-avatar {
  animation: avatarFloat 5.2s ease-in-out infinite alternate;
}
.cover-avatars .cover-avatar:last-of-type {
  animation-delay: 0.7s;
}

@keyframes avatarFloat {
  from { transform: translateY(0); }
  to { transform: translateY(-6px); }
}

.cover-avatar-heart {
  display: inline-block;
  animation: heartBeat 1.8s ease-in-out infinite;
}

@keyframes heartBeat {
  0%, 100% { transform: scale(1); opacity: 0.85; }
  45% { transform: scale(1.18); opacity: 1; }
}

.cover-open,
.password-btn {
  animation: btnGlow 2.8s ease-in-out infinite;
}

@keyframes btnGlow {
  0%, 100% { box-shadow: 0 4px 16px var(--shadow); }
  50% { box-shadow: 0 8px 26px rgba(127, 159, 196, 0.35); }
}

@keyframes riseIn {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

.chapter-title,
.chapter-intro {
  animation: riseIn 0.55s ease both;
}
.chapter-intro { animation-delay: 0.08s; }

.photo-card {
  animation: photoIn 0.28s ease both;
}
.photo-card:nth-child(2) { animation-delay: 0.06s; }

@keyframes photoIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.photo-frame {
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s ease;
}
.photo-frame:hover,
.photo-frame:focus-visible {
  transform: translateY(-4px) scale(1.02);
  box-shadow:
    inset 0 0 0 8px rgba(255, 252, 254, 0.72),
    inset 0 0 0 9px rgba(201, 137, 163, 0.18),
    0 16px 32px var(--shadow-deep);
}

.book-page.flip-next {
  animation: flipNext 0.82s cubic-bezier(0.45, 0.05, 0.25, 1);
}
.book-page.flip-prev {
  animation: flipPrev 0.82s cubic-bezier(0.45, 0.05, 0.25, 1);
}

@keyframes flipNext {
  0% { transform: rotateY(0deg) scale(1); opacity: 1; filter: brightness(1); }
  40% { transform: rotateY(-95deg) scale(0.96); opacity: 0.28; filter: brightness(0.92); }
  41% { transform: rotateY(95deg) scale(0.96); opacity: 0.22; }
  100% { transform: rotateY(0deg) scale(1); opacity: 1; filter: brightness(1); }
}

@keyframes flipPrev {
  0% { transform: rotateY(0deg) scale(1); opacity: 1; filter: brightness(1); }
  40% { transform: rotateY(95deg) scale(0.96); opacity: 0.28; filter: brightness(0.92); }
  41% { transform: rotateY(-95deg) scale(0.96); opacity: 0.22; }
  100% { transform: rotateY(0deg) scale(1); opacity: 1; filter: brightness(1); }
}

.ctrl-btn:not(:disabled) {
  animation: ctrlIdle 3.4s ease-in-out infinite;
}
@keyframes ctrlIdle {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}

.ambient-petal--fall {
  position: absolute;
  top: -8%;
  border-radius: 70% 30% 70% 30%;
  pointer-events: none;
  will-change: transform, opacity;
  animation-name: petalFall;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.ambient-petal--fall:nth-child(odd) {
  background: radial-gradient(circle at 30% 25%, rgba(255, 248, 251, 0.95), rgba(201, 137, 163, 0.55));
}
.ambient-petal--fall:nth-child(even) {
  background: radial-gradient(circle at 30% 25%, rgba(247, 251, 255, 0.95), rgba(127, 159, 196, 0.5));
}

@keyframes petalFall {
  0% {
    transform: translate3d(0, -12vh, 0) rotate(0deg);
    opacity: 0;
  }
  8% { opacity: 0.55; }
  100% {
    transform: translate3d(var(--drift, 48px), 118vh, 0) rotate(320deg);
    opacity: 0;
  }
}

.ambient-sparkle {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, #fff 0%, rgba(201, 137, 163, 0.0) 70%);
  box-shadow: 0 0 8px rgba(255, 252, 254, 0.85);
  animation-name: sparkle;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

@keyframes sparkle {
  0%, 100% { opacity: 0.08; transform: scale(0.5) translateY(0); }
  50% { opacity: 0.85; transform: scale(1.25) translateY(-10px); }
}

body.is-page-turning {
  animation-play-state: paused;
}

body.is-page-turning #ambient-petals *,
body.is-page-turning .book-sketch,
body.is-page-turning .masthead-lace,
body.is-page-turning .book-3d-block .book-page {
  animation-play-state: paused !important;
}

@media (prefers-reduced-motion: reduce) {
  body,
  .password-card,
  .cover-frame,
  .cover-title,
  .cover-avatar,
  .cover-avatar-heart,
  .cover-open,
  .password-btn,
  .chapter-title,
  .chapter-intro,
  .photo-card,
  .ctrl-btn,
  .ambient-petal--fall,
  .ambient-sparkle {
    animation: none !important;
  }
}