/* Slides 4+ — mobile: less GPU layers, no clip-path wipes, simpler fades */

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

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

@media (hover: none) and (pointer: coarse) {
  #slides-container {
    backface-visibility: visible;
    -webkit-backface-visibility: visible;
  }

  .slide.slide-cinematic .slide-inner {
    isolation: auto;
  }

  .s4-camera,
  .s5-camera,
  .s4-parallax-root,
  .s5-parallax-root,
  .s4-mirror,
  .s4-bird-wrap,
  .s4-content-reveal,
  .s5-frame-wrap,
  .s4-bird-fly,
  #card.storybook-transition .s4-camera,
  #card.storybook-transition .s5-camera,
  .slide[data-slide="6"] .s6-scene-wrap,
  .slide[data-slide="6"] .s6-couple,
  .slide[data-slide="6"] .s6-title,
  .slide[data-slide="6"] .s6-content-reveal,
  .slide[data-slide="7"] .s7-scene-wrap,
  .slide[data-slide="7"] .s7-title,
  .slide[data-slide="7"] .s7-content-reveal,
  .slide[data-slide="8"] .s8-scene-wrap,
  .slide[data-slide="8"] .s8-pheras-wrap,
  .slide[data-slide="8"] .s8-content-reveal,
  .slide[data-slide="9"] .s9-design,
  .slide[data-slide="9"] .s9-frame,
  .slide[data-slide="9"] .s9-sufi-wrap,
  .slide[data-slide="9"] .s9-music-wrap,
  .slide[data-slide="9"] .s9-title,
  .slide[data-slide="9"] .s9-content,
  .slide[data-slide="10"] .s10-content-reveal {
    will-change: auto;
  }

  .slide[data-slide="4"] .s4-flowers-full {
    width: 100%;
    height: auto;
    max-height: 100%;
    object-fit: cover;
    object-position: top center;
  }

  .slide[data-slide="5"] .s5-bg,
  .slide[data-slide="6"] .s6-bg,
  .slide[data-slide="7"] .s7-bg,
  .slide[data-slide="8"] .s8-bg {
    filter: none !important;
  }

  .slide[data-slide="5"].s5-play .s5-bg,
  .slide[data-slide="6"].s6-play .s6-bg,
  .slide[data-slide="7"].s7-play .s7-bg,
  .slide[data-slide="8"].s8-play .s8-bg {
    animation: mobFadeIn 1s ease-out forwards !important;
  }

  .slide[data-slide="4"].s4-play .s4-bird-img {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .slide[data-slide="6"] {
    perspective: none;
  }

  .slide[data-slide="6"] .s6-music-wrap,
  .slide[data-slide="6"] .s6-gramophone-tones-wrap,
  .slide[data-slide="6"] .s6-title,
  .slide[data-slide="6"] .s6-content-reveal,
  .slide[data-slide="7"] .s7-title,
  .slide[data-slide="7"] .s7-content-reveal,
  .slide[data-slide="8"] .s8-pheras-wrap,
  .slide[data-slide="8"] .s8-content-reveal,
  .slide[data-slide="9"] .s9-design,
  .slide[data-slide="9"] .s9-frame,
  .slide[data-slide="9"] .s9-music-wrap,
  .slide[data-slide="9"] .s9-title,
  .slide[data-slide="9"] .s9-content,
  .slide[data-slide="10"] .s10-content-reveal {
    clip-path: none !important;
    -webkit-clip-path: none !important;
    overflow: visible;
  }

  .slide[data-slide="6"] .s6-title,
  .slide[data-slide="6"] .s6-content-reveal,
  .slide[data-slide="7"] .s7-title,
  .slide[data-slide="7"] .s7-content-reveal,
  .slide[data-slide="8"] .s8-pheras-wrap,
  .slide[data-slide="8"] .s8-content-reveal,
  .slide[data-slide="9"] .s9-title,
  .slide[data-slide="9"] .s9-content,
  .slide[data-slide="10"] .s10-content-reveal {
    opacity: 0;
  }

  .slide[data-slide="6"].s6-play .s6-title,
  .slide[data-slide="7"].s7-play .s7-title,
  .slide[data-slide="9"].s9-play .s9-title {
    animation: mobFadeIn 0.55s ease-out 0.7s forwards !important;
  }

  .slide[data-slide="6"].s6-play .s6-content-reveal,
  .slide[data-slide="7"].s7-play .s7-content-reveal,
  .slide[data-slide="8"].s8-play .s8-pheras-wrap,
  .slide[data-slide="8"].s8-play .s8-content-reveal,
  .slide[data-slide="9"].s9-play .s9-content,
  .slide[data-slide="10"].s10-play .s10-content-reveal {
    animation: mobFadeUp 0.65s ease-out 0.85s forwards !important;
  }

  .slide[data-slide="6"].s6-play .s6-music-wrap,
  .slide[data-slide="6"].s6-play .s6-gramophone-tones-wrap {
    animation: mobFadeIn 0.5s ease-out 1s forwards !important;
  }

  .slide[data-slide="9"].s9-play .s9-design,
  .slide[data-slide="9"].s9-play .s9-frame {
    animation: mobFadeIn 0.8s ease-out forwards !important;
  }

  .slide[data-slide="9"].s9-play .s9-music-wrap,
  .slide[data-slide="9"].s9-play .s9-sufi-wrap {
    animation: mobFadeUp 0.7s ease-out 0.4s forwards !important;
  }

  .slide[data-slide="7"].s7-play .s7-hand-wrap,
  .slide[data-slide="7"].s7-play .s7-disco-hand {
    animation: none !important;
  }
}