/* V4 Tajweed Fonts for Surah Ar-Rahman (Pages 531, 532) */
@font-face {
    font-family: 'p531';
    src: url('../fonts/p531.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'p532';
    src: url('../fonts/p532.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* Pulsing Book Convergence Glow */
.book-glow {
  position: absolute;
  bottom: 24%;
  left: 50%;
  transform: translateX(-50%);
  width: 280px;
  height: 80px;
  background: radial-gradient(ellipse at center, rgba(255,245,190,0.8) 0%, rgba(0,229,255,0.4) 40%, transparent 70%);
  border-radius: 50%;
  filter: blur(12px);
  animation: pulseGlow 4s ease-in-out infinite alternate;
  z-index: 1;
  pointer-events: none;
  transition: all 0.2s ease-out;
}

@keyframes pulseGlow {
  0% { transform: translateX(-50%) scale(0.9); opacity: 0.5; }
  100% { transform: translateX(-50%) scale(1.2); opacity: 0.9; filter: blur(20px); }
}

.book-glow.burst {
  transform: translateX(-50%) scale(1.6);
  background: radial-gradient(ellipse at center, rgba(255,255,255,1) 0%, rgba(0,255,255,0.9) 50%, transparent 80%);
  filter: blur(25px);
  opacity: 1;
}

/* Reduce blur on mobile for better performance */
@media (max-width: 768px) {
  .book-glow {
    filter: blur(8px);
  }
  
  @keyframes pulseGlow {
    0% { transform: translateX(-50%) scale(0.9); opacity: 0.5; }
    100% { transform: translateX(-50%) scale(1.2); opacity: 0.9; filter: blur(15px); }
  }
  
  .book-glow.burst {
    filter: blur(18px);
  }
}

/* Falling Ayahs Container */
.falling-ayahs-container {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 2;
  transform: translateZ(0);
  will-change: transform;
}

/* Mobile: force clip even on 3D-transformed children (iOS Safari fix) */
@media (max-width: 767px) {
  .falling-ayahs-container {
    clip-path: inset(0 0 0 0);
  }
}

/* Ayah Text Styling */
.ayah-text {
  position: absolute;
  top: 0;
  left: 50%;
  color: #e0e0e0;
  font-size: 3.5rem;
  line-height: 1.8;
  text-align: right;
  direction: rtl;
  font-weight: normal;
  white-space: nowrap;
  opacity: 0;
  z-index: 3;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.ayah-text span {
  display: inline-block;
  animation: breatheGlow 2s infinite alternate ease-in-out;
}

@keyframes breatheGlow {
  0% {
    color: #ffffff;
    text-shadow: 0 0 8px rgba(100, 200, 255, 0.4), 0 0 16px rgba(100, 200, 255, 0.2);
    transform: scale(0.98);
  }
  50% {
    color: #e0faff;
    text-shadow: 0 0 12px rgba(93, 217, 232, 0.7), 0 0 24px rgba(93, 217, 232, 0.5), 0 0 36px rgba(255, 255, 255, 0.3);
    transform: scale(1.02);
  }
  100% {
    color: #ffffff;
    text-shadow: 0 0 8px rgba(100, 200, 255, 0.4), 0 0 16px rgba(100, 200, 255, 0.2);
    transform: scale(0.98);
  }
}

/* Reduce text-shadow layers on mobile */
@media (max-width: 768px) {
  @keyframes breatheGlow {
    0% {
      color: #ffffff;
      text-shadow: 0 0 6px rgba(100, 200, 255, 0.5);
      transform: scale(0.98);
    }
    50% {
      color: #e0faff;
      text-shadow: 0 0 10px rgba(93, 217, 232, 0.8);
      transform: scale(1.02);
    }
    100% {
      color: #ffffff;
      text-shadow: 0 0 6px rgba(100, 200, 255, 0.5);
      transform: scale(0.98);
    }
  }
}

/* Falling Animation Paths */
.leaf-path-1 { animation: leafPath1 9s ease-in-out forwards; }
.leaf-path-2 { animation: leafPath2 10s ease-in-out forwards; }
.leaf-path-3 { animation: leafPath3 11s ease-in-out forwards; }

@keyframes leafPath1 {
  0%   { transform: translate(calc(-50% - 5vw), -10vh) rotate(-5deg) rotateY(20deg) scale(1.2); opacity: 0; filter: blur(6px); }
  15%  { opacity: 1; filter: blur(0); }
  30%  { transform: translate(calc(-50% + 4vw), 15vh) rotate(3deg) rotateY(-15deg) scale(1.1); }
  55%  { transform: translate(calc(-50% - 3vw), 40vh) rotate(-3deg) rotateY(10deg) scale(1.0); }
  80%  { transform: translate(calc(-50% + 2vw), 60vh) rotate(1deg) rotateY(-5deg) scale(0.7); opacity: 0.9; }
  92%  { transform: translate(-50%, 72vh) rotate(0deg) rotateY(0deg) scale(0.4); opacity: 0.5; filter: blur(2px); }
  100% { transform: translate(-50%, 75vh) rotate(0deg) scale(0); opacity: 0; filter: blur(8px); }
}

@keyframes leafPath2 {
  0%   { transform: translate(calc(-50% + 5vw), -10vh) rotate(5deg) rotateY(-20deg) scale(1.2); opacity: 0; filter: blur(6px); }
  15%  { opacity: 1; filter: blur(0); }
  30%  { transform: translate(calc(-50% - 4vw), 15vh) rotate(-3deg) rotateY(15deg) scale(1.1); }
  55%  { transform: translate(calc(-50% + 3vw), 40vh) rotate(3deg) rotateY(-10deg) scale(1.0); }
  80%  { transform: translate(calc(-50% - 2vw), 60vh) rotate(-1deg) rotateY(5deg) scale(0.7); opacity: 0.9; }
  92%  { transform: translate(-50%, 72vh) rotate(0deg) rotateY(0deg) scale(0.4); opacity: 0.5; filter: blur(2px); }
  100% { transform: translate(-50%, 75vh) rotate(0deg) scale(0); opacity: 0; filter: blur(8px); }
}

@keyframes leafPath3 {
  0%   { transform: translate(-50%, -10vh) rotate(0deg) rotateY(30deg) scale(1.2); opacity: 0; filter: blur(6px); }
  15%  { opacity: 1; filter: blur(0); }
  30%  { transform: translate(calc(-50% - 5vw), 15vh) rotate(-4deg) rotateY(-20deg) scale(1.1); }
  55%  { transform: translate(calc(-50% + 4vw), 40vh) rotate(3deg) rotateY(15deg) scale(1.0); }
  80%  { transform: translate(calc(-50% - 3vw), 60vh) rotate(-2deg) rotateY(-10deg) scale(0.7); opacity: 0.9; }
  92%  { transform: translate(-50%, 72vh) rotate(0deg) rotateY(0deg) scale(0.4); opacity: 0.5; filter: blur(2px); }
  100% { transform: translate(-50%, 75vh) rotate(0deg) scale(0); opacity: 0; filter: blur(8px); }
}

/* Mobile: simplify animations — remove rotateY to prevent 3D overflow escape */
@media (max-width: 767px) {
  @keyframes leafPath1 {
    0%   { transform: translate(calc(-50% - 5vw), -10vh) rotate(-5deg) scale(1.1); opacity: 0; filter: blur(2px); }
    15%  { opacity: 1; filter: blur(0); }
    30%  { transform: translate(calc(-50% + 4vw), 15vh) rotate(3deg) scale(1.0); }
    55%  { transform: translate(calc(-50% - 3vw), 40vh) rotate(-3deg) scale(0.9); }
    80%  { transform: translate(calc(-50% + 2vw), 60vh) rotate(1deg) scale(0.65); opacity: 0.9; }
    92%  { transform: translate(-50%, 72vh) rotate(0deg) scale(0.35); opacity: 0.5; filter: blur(1px); }
    100% { transform: translate(-50%, 75vh) rotate(0deg) scale(0); opacity: 0; filter: blur(4px); }
  }

  @keyframes leafPath2 {
    0%   { transform: translate(calc(-50% + 5vw), -10vh) rotate(5deg) scale(1.1); opacity: 0; filter: blur(2px); }
    15%  { opacity: 1; filter: blur(0); }
    30%  { transform: translate(calc(-50% - 4vw), 15vh) rotate(-3deg) scale(1.0); }
    55%  { transform: translate(calc(-50% + 3vw), 40vh) rotate(3deg) scale(0.9); }
    80%  { transform: translate(calc(-50% - 2vw), 60vh) rotate(-1deg) scale(0.65); opacity: 0.9; }
    92%  { transform: translate(-50%, 72vh) rotate(0deg) scale(0.35); opacity: 0.5; filter: blur(1px); }
    100% { transform: translate(-50%, 75vh) rotate(0deg) scale(0); opacity: 0; filter: blur(4px); }
  }

  @keyframes leafPath3 {
    0%   { transform: translate(-50%, -10vh) rotate(0deg) scale(1.1); opacity: 0; filter: blur(2px); }
    15%  { opacity: 1; filter: blur(0); }
    30%  { transform: translate(calc(-50% - 5vw), 15vh) rotate(-4deg) scale(1.0); }
    55%  { transform: translate(calc(-50% + 4vw), 40vh) rotate(3deg) scale(0.9); }
    80%  { transform: translate(calc(-50% - 3vw), 60vh) rotate(-2deg) scale(0.65); opacity: 0.9; }
    92%  { transform: translate(-50%, 72vh) rotate(0deg) scale(0.35); opacity: 0.5; filter: blur(1px); }
    100% { transform: translate(-50%, 75vh) rotate(0deg) scale(0); opacity: 0; filter: blur(4px); }
  }
}

/* Sparkles */
.sparkle {
  position: absolute;
  top: -5%;
  border-radius: 50%;
  opacity: 0;
  z-index: 2;
  pointer-events: none;
}

.s-white { background: #fff; box-shadow: 0 0 10px 3px #fff, 0 0 20px 5px #ffffff; }
.s-gold { background: #fff; box-shadow: 0 0 10px 3px #fff, 0 0 20px 5px #ffd700; }
.s-cyan { background: #fff; box-shadow: 0 0 10px 3px #fff, 0 0 20px 5px #00e5ff; }

@keyframes sparkleDrift {
  0%   { transform: translateY(-10vh) translateX(0) scale(0); opacity: 0; }
  20%  { transform: translateY(15vh) translateX(3vw) scale(1); opacity: 1; }
  50%  { transform: translateY(45vh) translateX(-2vw) scale(1.2); opacity: 0.6; }
  80%  { transform: translateY(70vh) translateX(1vw) scale(0.8); opacity: 1; }
  100% { transform: translateY(90vh) translateX(0) scale(0); opacity: 0; }
}

.s1 { left: 8%; width: 5px; height: 5px; animation: sparkleDrift 10s infinite ease-in-out 0.2s; }
.s2 { left: 25%; width: 8px; height: 8px; animation: sparkleDrift 12s infinite ease-in-out 2.5s; }
.s3 { left: 15%; width: 4px; height: 4px; animation: sparkleDrift 9s infinite ease-in-out 1.1s; }
.s4 { left: 5%; width: 7px; height: 7px; animation: sparkleDrift 14s infinite ease-in-out 3.4s; }
.s5 { left: 75%; width: 6px; height: 6px; animation: sparkleDrift 11s infinite ease-in-out 0.8s; }
.s6 { left: 85%; width: 9px; height: 9px; animation: sparkleDrift 15s infinite ease-in-out 4.5s; }
.s7 { left: 95%; width: 6px; height: 6px; animation: sparkleDrift 13s infinite ease-in-out 1.5s; }
.s8 { left: 70%; width: 5px; height: 5px; animation: sparkleDrift 10.5s infinite ease-in-out 3.2s; }
.s9 { left: 12%; width: 6px; height: 6px; animation: sparkleDrift 11s infinite ease-in-out 4.2s; }
.s10 { left: 78%; width: 7px; height: 7px; animation: sparkleDrift 12s infinite ease-in-out 5.5s; }

/* Reduce sparkles on mobile for better performance */
@media (max-width: 768px) {
  .s3, .s4, .s7, .s9, .s10 {
    display: none;
  }
}

/* Mobile: scale font with viewport, stay on one line */
@media (max-width: 767px) {
  .ayah-text {
    font-size: min(3.5rem, 8vw);
    white-space: nowrap;
  }
}