/* Slide 9 — Sufi Night (pure CSS keyframes) */

.slide[data-slide="9"] {
  overflow: hidden;
}

.slide[data-slide="9"] .s9-design {
  z-index: 2;
  transform-origin: 50% 0%;
  clip-path: inset(100% 0 0 0);
  -webkit-clip-path: inset(100% 0 0 0);
  opacity: 0;
  will-change: clip-path, opacity;
}

.slide[data-slide="9"] .s9-frame {
  z-index: 7;
  transform-origin: 50% 0%;
  clip-path: inset(100% 0 0 0);
  -webkit-clip-path: inset(100% 0 0 0);
  opacity: 0;
  will-change: clip-path, opacity;
}

.slide[data-slide="9"] .s9-sufi-wrap {
  position: absolute;
  z-index: 8;
  transform-origin: 50% 85%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  opacity: 0;
  transform: translate3d(0, -140px, 0) scale(0.94);
  will-change: transform, opacity;
}

.slide[data-slide="9"] .s9-sufi {
  display: block;
  width: 100%;
  height: 100%;
}

.slide[data-slide="9"] .s9-music-wrap {
  position: absolute;
  z-index: 5;
  overflow: hidden;
  transform-origin: 50% 0%;
  clip-path: inset(0 0 100% 0);
  -webkit-clip-path: inset(0 0 100% 0);
  opacity: 0.35;
  transform: translateY(-100px) scale(1.02);
}

.slide[data-slide="9"] .s9-music {
  display: block;
  width: 100%;
  height: 100%;
}

.slide[data-slide="9"] .s9-lanterns {
  z-index: 6;
  opacity: 0;
  filter: brightness(0.6);
}

.slide[data-slide="9"] .s9-title {
  z-index: 10;
  overflow: hidden;
  clip-path: inset(0 0 100% 0);
  -webkit-clip-path: inset(0 0 100% 0);
  will-change: clip-path;
}

.slide[data-slide="9"] .s9-content {
  z-index: 11;
  overflow: hidden;
  clip-path: inset(0 0 100% 0);
  -webkit-clip-path: inset(0 0 100% 0);
  will-change: clip-path;
}

/* ── Keyframes ── */

@keyframes s9SketchReveal {
  0% {
    clip-path: inset(100% 0 0 0);
    -webkit-clip-path: inset(100% 0 0 0);
    opacity: 0;
  }

  100% {
    clip-path: inset(0 0 0 0);
    -webkit-clip-path: inset(0 0 0 0);
    opacity: 1;
  }
}

@keyframes s9SufiEnter {
  0% {
    opacity: 0;
    transform: translate3d(0, -140px, 0) scale(0.94);
  }

  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes s9SufiTilt {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1) rotate(-4deg);
  }

  50% {
    transform: translate3d(0, 0, 0) scale(1) rotate(4deg);
  }
}

@keyframes s9MusicSketchFall {
  0% {
    clip-path: inset(0 0 100% 0);
    -webkit-clip-path: inset(0 0 100% 0);
    opacity: 0.35;
    transform: translateY(-100px) scale(1.02);
  }

  100% {
    clip-path: inset(0 0 0 0);
    -webkit-clip-path: inset(0 0 0 0);
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes s9FadeUp {
  0% {
    opacity: 0;
    transform: translateY(16px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes s9ContentUp {
  0% {
    opacity: 0;
    transform: translateY(40px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes s9LanternFadeIn {
  0% {
    opacity: 0;
    filter: brightness(0.55);
  }

  100% {
    opacity: 1;
    filter: brightness(1);
  }
}

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

@keyframes s9LanternGlow {
  0%,
  100% {
    filter: drop-shadow(0 0 10px rgba(255, 190, 70, 0.35)) brightness(1);
    opacity: 0.82;
  }

  50% {
    filter:
      drop-shadow(0 0 22px rgba(255, 210, 90, 0.95))
      drop-shadow(0 0 44px rgba(255, 170, 50, 0.55))
      brightness(1.18);
    opacity: 1;
  }
}

/* ── Play state ── */

.slide[data-slide="9"].s9-play .s9-title,
.slide[data-slide="9"].s9-play .s9-content {
  animation: s9RevealDown 1.1s ease-out forwards;
}

.slide[data-slide="9"].s9-play .s9-design {
  animation: s9SketchReveal 1.4s cubic-bezier(0.33, 1, 0.42, 1) forwards;
}

.slide[data-slide="9"].s9-play .s9-frame {
  animation: s9SketchReveal 1.4s cubic-bezier(0.33, 1, 0.42, 1) forwards;
  animation-delay: 0.07s;
}

.slide[data-slide="9"].s9-play .s9-sufi-wrap {
  animation:
    s9SufiEnter 1.2s cubic-bezier(0.33, 1, 0.42, 1) forwards,
    s9SufiTilt 2.8s ease-in-out infinite;
  animation-delay: 1.45s, 2.65s;
}

.slide[data-slide="9"].s9-play .s9-music-wrap {
  animation: s9MusicSketchFall 1.45s cubic-bezier(0.33, 1, 0.42, 1) forwards;
  animation-delay: 2.9s;
}

.slide[data-slide="9"].s9-play .s9-lanterns {
  animation:
    s9LanternFadeIn 1.75s ease-out forwards,
    s9LanternGlow 2.8s ease-in-out infinite;
  animation-delay: 3.7s, 5.5s;
}

@media (prefers-reduced-motion: reduce) {
  .slide[data-slide="9"] .s9-design,
  .slide[data-slide="9"] .s9-frame,
  .slide[data-slide="9"] .s9-title,
  .slide[data-slide="9"] .s9-content {
    clip-path: none !important;
    -webkit-clip-path: none !important;
  }

  .slide[data-slide="9"].s9-play .s9-design,
  .slide[data-slide="9"].s9-play .s9-frame,
  .slide[data-slide="9"].s9-play .s9-sufi-wrap,
  .slide[data-slide="9"].s9-play .s9-music-wrap,
  .slide[data-slide="9"].s9-play .s9-title,
  .slide[data-slide="9"].s9-play .s9-lanterns,
  .slide[data-slide="9"].s9-play .s9-content {
    animation: none !important;
    opacity: 1;
    transform: none;
    clip-path: none;
    -webkit-clip-path: none;
    filter: none;
  }
}