/* Storybook Slides 4 & 5 */

.storybook-stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  width: 1080px;
  height: 1920px;
}

.s4-camera,
.s5-camera {
  position: absolute;
  inset: 0;
  transform-origin: 50% 46%;
  will-change: transform, filter;
}

.s4-parallax-root,
.s5-parallax-root {
  position: absolute;
  inset: 0;
  will-change: transform;
}

.s4-layer,
.s5-layer,
.s4-flowers-full,
.s4-frame-wrap,
.s4-ganesh-wrap,
.s4-copy,
.s5-flowers,
.s5-frame-wrap {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.s4-bg,
.s5-bg {
  position: absolute;
  display: block;
}

.s4-vignette,
.s5-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 42%, transparent 42%, rgba(20, 12, 6, 0.28) 100%);
  pointer-events: none;
  z-index: 50;
}

/* Slide 4 — side flowers */
.s4-flowers-full {
  position: absolute;
  display: block;
  z-index: 4;
  pointer-events: none;
}

/* Slide 4 — frame */
.s4-frame-wrap {
  z-index: 6;
}

.s4-mirror {
  position: absolute;
  display: block;
  transform-origin: 50% 100%;
  will-change: transform, opacity;
}

/* Slide 4 — hummingbird (above vignette z-index 50) */
.s4-bird-wrap {
  position: absolute;
  z-index: 55;
  pointer-events: none;
  opacity: 0;
  will-change: transform, opacity;
}

.s4-bird-img {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  z-index: 1;
  transform-origin: 50% 55%;
}

.s4-bird-glow {
  position: absolute;
  inset: -25%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 210, 120, 0.4) 0%, transparent 68%);
  z-index: 0;
  opacity: 0;
}

.s4-bird-fly .s4-bird-img {
  display: block;
  width: 100%;
  height: 100%;
}

/* Slide 4 — invitation copy (single image) */
.s4-copy {
  z-index: 12;
}

.s4-content-reveal {
  position: absolute;
  left: 0;
  right: 0;
  top: 490px;
  width: 578px;
  max-width: 92%;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
  clip-path: inset(0 0 100% 0);
  will-change: clip-path;
}

.s4-content-img {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
}

/* Slide 5 — frame + welcome + content group */
.s5-frame-wrap {
  z-index: 6;
  opacity: 0;
  transform: translateX(160px);
  will-change: transform, opacity;
}

.s5-frame-fill,
.s5-design,
.s5-welcome,
.s5-content-img {
  display: block;
  max-width: none;
}

.s5-frame-fill,
.s5-design,
.s5-welcome {
  position: absolute;
}

.s5-frame-fill {
  z-index: 1;
}

.s5-design {
  left: 170px;
  top: 183px;
  width: 736px;
  height: auto;
  z-index: 0;
}

.s5-welcome {
  z-index: 4;
}

.s5-flowers {
  z-index: 8;
  display: block;
}

.s5-copy {
  position: absolute;
  left: 299px;
  top: 1360px;
  width: 482px;
  max-width: 88%;
  z-index: 5;
  pointer-events: none;
}

.s5-content-img {
  width: 100%;
  height: auto;
}

#card.scroll-pair-mode,
#card.s4-s5-scroll-mode {
  overflow: hidden;
}

#card.scroll-pair-mode .scroll-from,
#card.scroll-pair-mode .scroll-to {
  opacity: 1 !important;
  pointer-events: none;
}

#card.scroll-pair-mode .scroll-from {
  z-index: 30;
}

#card.scroll-pair-mode .scroll-to {
  z-index: 20;
}

#card.s4-s5-scroll-mode .slide[data-slide="4"],
#card.s4-s5-scroll-mode .slide[data-slide="5"] {
  opacity: 1 !important;
  pointer-events: none;
}

.s4-bird-portal {
  position: fixed;
  inset: 0;
  z-index: 80;
  pointer-events: none;
  overflow: visible;
}

.s4-bird-fly {
  position: absolute;
  z-index: 81;
  will-change: transform, top, left;
}


#card.storybook-transition .s4-camera,
#card.storybook-transition .s5-camera {
  will-change: transform, filter;
}

@media (prefers-reduced-motion: reduce) {
  .s4-content-reveal {
    clip-path: none !important;
    opacity: 1 !important;
  }

  .slide[data-slide="4"] .s4-mirror,
  .slide[data-slide="4"] .s4-bird-wrap {
    opacity: 1 !important;
    transform: none !important;
  }

  .s5-copy {
    opacity: 1 !important;
  }
}

/* ── Slide 4 play state (pure CSS) ── */
.slide[data-slide="4"] .s4-bg {
  opacity: 0;
  transform: scale(1.08);
}

.slide[data-slide="4"] .s4-flowers-full {
  opacity: 0;
  transform: scale(1.03);
}

.slide[data-slide="4"] .s4-mirror {
  opacity: 0;
  transform: translateY(160px);
}

.slide[data-slide="4"] .s4-content-reveal {
  clip-path: inset(0 0 100% 0);
}

.slide[data-slide="4"] .s4-bird-wrap {
  opacity: 0;
  transform: translate(40px, -18px) scale(0.9);
}

.slide[data-slide="4"].s4-play .s4-bg {
  animation: s4FadeScale 1s ease-out forwards;
}

.slide[data-slide="4"].s4-play .s4-flowers-full {
  animation: s4FadeScale 0.9s ease-out 0.15s forwards;
}

.slide[data-slide="4"].s4-play .s4-mirror {
  animation: s4FrameRise 1.05s ease-out 0.35s forwards;
}

.slide[data-slide="4"].s4-play .s4-content-reveal {
  animation: s4RevealDown 2.5s ease-out 1.35s forwards;
}

.slide[data-slide="4"].s4-play .s4-bird-wrap {
  animation: s4BirdIn 2.6s ease-out 1.5s forwards;
}

.slide[data-slide="4"].s4-play .s4-bird-glow {
  animation: s4BirdGlowIn 2.2s ease-out 1.7s forwards;
}

.slide[data-slide="4"].s4-play .s4-bird-img {
  opacity: 1;
  animation: s4BirdBob 3.8s ease-in-out 3.6s infinite;
}

/* ── Slide 5 play state (pure CSS) ── */
.slide[data-slide="5"] .s5-bg {
  opacity: 0;
  filter: blur(10px);
}

.slide[data-slide="5"] .s5-flowers {
  opacity: 0;
  transform: scale(0) rotate(-8deg);
}

.slide[data-slide="5"].s5-play .s5-bg {
  animation: s5BgIn 1.1s ease-out forwards;
}

.slide[data-slide="5"].s5-play .s5-frame-wrap {
  animation: s5FrameGroupSlideIn 1.55s ease-out 0.45s forwards;
}

.slide[data-slide="5"].s5-play .s5-flowers {
  animation: s5FlowersIn 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) 1.35s forwards;
}

@keyframes s4FadeScale {
  to { opacity: 1; transform: scale(1); }
}

@keyframes s4BirdIn {
  to {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
}

@keyframes s4BirdBob {
  0%,
  100% {
    transform: translateY(0) rotate(-2.5deg);
  }

  50% {
    transform: translateY(-14px) rotate(2.5deg);
  }
}

@keyframes s4BirdGlowIn {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes s4GlowIn {
  to { opacity: 1; transform: scale(1); }
}

@keyframes s4ClipReveal {
  to { clip-path: inset(0 0 0 0); }
}

@keyframes s4FrameRise {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes s4RevealDown {
  to { clip-path: inset(0 0 0 0); }
}

@keyframes s5BgIn {
  to { opacity: 1; filter: blur(0); }
}

@keyframes s5FrameGroupSlideIn {
  from {
    opacity: 0;
    transform: translateX(160px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes s5FlowersIn {
  to { opacity: 1; transform: scale(1) rotate(0deg); }
}

@media (prefers-reduced-motion: reduce) {
  .slide[data-slide="4"].s4-play *,
  .slide[data-slide="5"].s5-play * {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    filter: none !important;
  }
}