/* ============================================================
   QURAN VERSE SPLASH — dark meditative variant.
   Deep ink background, soft green glow, ornamental frame.
   Arabic: directional wipe (R→L). English: word-by-word fade.
   ============================================================ */

.qs-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(1rem, 6vmin, 4rem);
    cursor: pointer;
    background: #0a0e12;
    color: #e6edf3;
    transition: opacity .9s ease, visibility .9s ease;
}
.qs-overlay.is-done {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* ---- Ambient glow behind the text ---- */
.qs-glow {
    position: absolute;
    width: 70vmin;
    height: 70vmin;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(78,225,160,0.07), transparent 65%);
    pointer-events: none;
    animation: qs-breathe 6s ease-in-out infinite alternate;
}
@keyframes qs-breathe {
    from { transform: scale(1); opacity: .8; }
    to   { transform: scale(1.08); opacity: 1; }
}

/* ---- Frame with corner marks ---- */
.qs-frame {
    position: relative;
    width: 100%; /*min(100%, 62ch);*/
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: clamp(1rem, 3vh, 2rem);
}

/* Corner ticks, drawn in */
.qs-corner {
    position: absolute;
    width: 28px;
    height: 28px;
    border-color: #2c8f63;
    opacity: 0;
    animation: qs-fade 1s ease .3s forwards;
}
.qs-corner-tl { top: 0; left: 0; border-top: 1px solid; border-left: 1px solid; }
.qs-corner-tr { top: 0; right: 0; border-top: 1px solid; border-right: 1px solid; }
.qs-corner-bl { bottom: 0; left: 0; border-bottom: 1px solid; border-left: 1px solid; }
.qs-corner-br { bottom: 0; right: 0; border-bottom: 1px solid; border-right: 1px solid; }

/* ---- Flourishes (small horizontal dashes) ---- */
.qs-flourish {
    width: 40px;
    height: 1px;
    margin-inline: auto;
    background: linear-gradient(90deg, transparent, #4ee1a0, transparent);
    opacity: 0;
    animation: qs-fade 1.2s ease .5s forwards;
}
.qs-flourish-bottom { animation-delay: 4.6s; }

/* ---- Heading (Bismillah) ---- */
.qs-ar-heading {
    margin: 0;
    font-family: 'UthmanicHafs', 'Amiri', 'Noto Naskh Arabic', Georgia, serif;
    font-size: clamp(0.5rem, 2.4vmin, 1.2rem);
    color: #4ee1a0;
    animation: qs-fade 1.4s ease .2s both;
}

.qs-en-heading {
    margin: 0;
    font-family: 'Amiri', 'Noto Naskh Arabic', Georgia, serif;
    font-size: clamp(0.3rem, 2.2vmin, 1rem);
    color: #4ee1a0;
    animation: qs-fade 1.4s ease .2s both;
    letter-spacing: .14em;
}

/* ---- Shared verse styling ---- */
.qs-text {
    margin: 0;
    font-weight: 400;
    overflow: hidden;
}

/* Inner sliding span (essential for the directional wipe) */
.qs-slide {
    display: inline-block;
    white-space: normal;
}

/* Arabic: large naskh, wipes RIGHT → LEFT */
.qs-ar {
    font-size: clamp(0.4em, 4.8vmin, 2.8rem);
    line-height: 2;
    color: #e6edf3;
    font-family: 'UthmanicHafs', 'Traditional Arabic', serif;
    direction: rtl;
}
.qs-ar .qs-slide {
    transform: translateX(100%);
    animation: qs-reveal-r2l 1.8s cubic-bezier(.2,.7,.2,1) .6s forwards;
}

/* English: refined serif, word-by-word fade */
.qs-en {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(0.4rem, 3.0vmin, 2.3rem);
    line-height: 1.75;
    color: #e6edf3;
}
.qs-en .qs-word {
    display: inline-block;
    opacity: 0;
    transform: translateY(6px);
    animation: qs-word-in .8s cubic-bezier(.2,.7,.2,1) forwards;
}
/* Stagger each word. Adjust delays if you change the word count. */
.qs-en .qs-word:nth-child(1)  { animation-delay: 1.5s; }
.qs-en .qs-word:nth-child(2)  { animation-delay: 1.6s; }
.qs-en .qs-word:nth-child(3)  { animation-delay: 1.7s; }
.qs-en .qs-word:nth-child(4)  { animation-delay: 1.8s; }
.qs-en .qs-word:nth-child(5)  { animation-delay: 1.9s; }
.qs-en .qs-word:nth-child(6)  { animation-delay: 2.0s; }
.qs-en .qs-word:nth-child(7)  { animation-delay: 2.1s; }
.qs-en .qs-word:nth-child(8)  { animation-delay: 2.2s; }
.qs-en .qs-word:nth-child(9)  { animation-delay: 2.3s; }
.qs-en .qs-word:nth-child(10) { animation-delay: 2.4s; }
.qs-en .qs-word:nth-child(11) { animation-delay: 2.5s; }
.qs-en .qs-word:nth-child(12) { animation-delay: 2.6s; }
.qs-en .qs-word:nth-child(13) { animation-delay: 2.7s; }
.qs-en .qs-word:nth-child(14) { animation-delay: 2.8s; }
.qs-en .qs-word:nth-child(15) { animation-delay: 2.9s; }
.qs-en .qs-word:nth-child(16)  { animation-delay: 3.0s; }
.qs-en .qs-word:nth-child(17)  { animation-delay: 3.1s; }
.qs-en .qs-word:nth-child(18)  { animation-delay: 3.2s; }
.qs-en .qs-word:nth-child(19)  { animation-delay: 3.3s; }
.qs-en .qs-word:nth-child(20)  { animation-delay: 3.4s; }
.qs-en .qs-word:nth-child(21)  { animation-delay: 3.5s; }
.qs-en .qs-word:nth-child(22)  { animation-delay: 3.6s; }
.qs-en .qs-word:nth-child(23)  { animation-delay: 3.7s; }
.qs-en .qs-word:nth-child(24)  { animation-delay: 3.8s; }
.qs-en .qs-word:nth-child(25) { animation-delay: 3.9s; }
.qs-en .qs-word:nth-child(26) { animation-delay: 4.0s; }
.qs-en .qs-word:nth-child(27) { animation-delay: 4.1s; }
.qs-en .qs-word:nth-child(28) { animation-delay: 4.2s; }
.qs-en .qs-word:nth-child(29) { animation-delay: 4.3s; }
.qs-en .qs-word:nth-child(30) { animation-delay: 4.4s; }
.qs-en .qs-word:nth-child(31)  { animation-delay: 4.5s; }
.qs-en .qs-word:nth-child(32)  { animation-delay: 4.6s; }
.qs-en .qs-word:nth-child(33)  { animation-delay: 4.7s; }
.qs-en .qs-word:nth-child(34)  { animation-delay: 4.8s; }
.qs-en .qs-word:nth-child(35)  { animation-delay: 4.9s; }
.qs-en .qs-word:nth-child(36)  { animation-delay: 5.0s; }
.qs-en .qs-word:nth-child(37)  { animation-delay: 5.1s; }
.qs-en .qs-word:nth-child(38)  { animation-delay: 5.2s; }
.qs-en .qs-word:nth-child(39)  { animation-delay: 5.3s; }
.qs-en .qs-word:nth-child(40) { animation-delay: 5.4s; }
.qs-en .qs-word:nth-child(41) { animation-delay: 5.5s; }
.qs-en .qs-word:nth-child(42) { animation-delay: 5.6s; }
.qs-en .qs-word:nth-child(43) { animation-delay: 5.7s; }
.qs-en .qs-word:nth-child(44) { animation-delay: 5.8s; }
.qs-en .qs-word:nth-child(45) { animation-delay: 5.9s; }
.qs-en .qs-word:nth-child(46)  { animation-delay: 6.0s; }
.qs-en .qs-word:nth-child(47)  { animation-delay: 6.1s; }
.qs-en .qs-word:nth-child(48)  { animation-delay: 6.2s; }
.qs-en .qs-word:nth-child(49)  { animation-delay: 6.3s; }
.qs-en .qs-word:nth-child(50) { animation-delay: 6.4s; }
.qs-en .qs-word:nth-child(51) { animation-delay: 6.5s; }
.qs-en .qs-word:nth-child(52) { animation-delay: 6.6s; }
.qs-en .qs-word:nth-child(53) { animation-delay: 6.7s; }
.qs-en .qs-word:nth-child(54) { animation-delay: 6.8s; }
.qs-en .qs-word:nth-child(55) { animation-delay: 6.9s; }


.nav-letter {
    display: inline-block;
    opacity: 0;
    transform: translateY(6px);
    white-space: pre;
    animation: qs-word-in .8s cubic-bezier(.2,.7,.2,1) forwards;
}

.nav-letter:nth-child(1)  { animation-delay: 10.5s; }
.nav-letter:nth-child(2)  { animation-delay: 10.6s; }
.nav-letter:nth-child(3)  { animation-delay: 10.7s; }
.nav-letter:nth-child(4)  { animation-delay: 10.8s; }
.nav-letter:nth-child(5)  { animation-delay: 10.9s; }
.nav-letter:nth-child(6)  { animation-delay: 11.0s; }
.nav-letter:nth-child(7)  { animation-delay: 11.1s; }
.nav-letter:nth-child(8)  { animation-delay: 11.2s; }
.nav-letter:nth-child(9)  { animation-delay: 11.3s; }
.nav-letter:nth-child(10) { animation-delay: 11.4s; }
.nav-letter:nth-child(11)  { animation-delay: 11.5s; }
.nav-letter:nth-child(12)  { animation-delay: 11.6s; }
.nav-letter:nth-child(13)  { animation-delay: 11.7s; }
.nav-letter:nth-child(14)  { animation-delay: 11.8s; }
.nav-letter:nth-child(15)  { animation-delay: 11.9s; }
.nav-letter:nth-child(16)  { animation-delay: 12.0s; }
.nav-letter:nth-child(17)  { animation-delay: 12.1s; }
.nav-letter:nth-child(18)  { animation-delay: 12.2s; }
.nav-letter:nth-child(19)  { animation-delay: 12.3s; }
.nav-letter:nth-child(20) { animation-delay: 12.4s; }


.cursor{display:inline-block;width:.6em;height:1.1em;margin-left:2px;background:#4ee1a0;transform:translateY(2px);animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

/* ---- Divider ---- */
.qs-rule {
    width: 0;
    height: 1px;
    margin: .25rem auto;
    background: linear-gradient(90deg, transparent, #2c8f63, transparent);
    animation: qs-draw 1.2s ease 1.1s forwards;
}

/* ---- Reference ---- */
.qs-ref {
    margin: 0;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: clamp(0.2rem, 1.7vmin, 0.8rem);
    letter-spacing: .14em;
    color: #4ee1a0;
    opacity: 0;
    animation: qs-fade 1.2s ease 5s forwards;
}

/* ---- Skip hint ---- */
.qs-skip {
    position: absolute;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: .7rem;
    letter-spacing: .15em;
    color: #3d4a56;
    opacity: 0;
    animation: qs-fade 1.2s ease 3.2s forwards;
}

/* ---- Right to left/Left to right animations ---- */

.l2r-fade-in-text {
  animation: left-to-right-fade-in 5s ease;
  -webkit-mask-repeat: no-repeat;
}

.r2l-fade-in-text {
  animation: right-to-left-fade-in 7s ease 1.5s forwards;
  -webkit-mask-repeat: no-repeat;
  opacity: 0;
}


@font-face {
  font-family: 'UthmanicHafs';
  src: url('https://verses.quran.foundation/fonts/quran/hafs/uthmanic_hafs/UthmanicHafs1Ver18.woff2') format('woff2'),
       url('https://verses.quran.foundation/fonts/quran/hafs/uthmanic_hafs/UthmanicHafs1Ver18.ttf') format('truetype');
  font-display: swap;
}

/* ---- Keyframes ---- */
@keyframes qs-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes qs-reveal-r2l {
    from { transform: translateX(100%); opacity: .3; }
    to   { transform: translateX(0);    opacity: 1; }
}
@keyframes qs-word-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes qs-draw {
    from { width: 0; }
    to   { width: min(160px, 50vw); }
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
    .qs-glow,
    .qs-corner,
    .qs-flourish,
    .qs-slide,
    .qs-word,
    .qs-rule,
    .qs-ref,
    .qs-skip {
        animation-duration: .01ms !important;
        animation-delay: 0s !important;
        opacity: 1 !important;
        transform: none !important;
    }
    .qs-rule { width: min(160px, 50vw) !important; }
}

@keyframes left-to-right-fade-in {
  0% {
    -webkit-mask-size: 0%;
    -webkit-mask-image: linear-gradient(
      to right,
      rgba(0, 0, 0, 1) 70%,
      rgba(0, 0, 0, 0)
    );
  }
  100% {
    -webkit-mask-size: 140%;
    -webkit-mask-image: linear-gradient(
      to right,
      rgba(0, 0, 0, 1) 70%,
      rgba(0, 0, 0, 0)
    );
  }
}

@keyframes right-to-left-fade-in {
  0% {
    -webkit-mask-size: 0%;
    -webkit-mask-position: right;
    -webkit-mask-image: linear-gradient(
      to left,
      rgba(0, 0, 0, 1) 70%,
      rgba(0, 0, 0, 0)
    ); opacity: 1;
  }

  100% {
    -webkit-mask-size: 140%;
    -webkit-mask-position: right;
    -webkit-mask-image: linear-gradient(
      to left,
      rgba(0, 0, 0, 1) 70%,
      rgba(0, 0, 0, 0)
    ); opacity: 1;
  }
}