/* ============================================================
   Shared styles for individual surah pages · quran.puliyal.com
   ============================================================ */
:root{
  --bg:#f5f3ec; --bg-2:#efece1;
  --ink:#1f2a26; --ink-soft:#5a655f;
  --green:#0f5c4a; --green-deep:#0a4235;
  --gold:#b8892b; --gold-soft:#c9a24a;
  --line:#ddd6c4; --card:#fffdf7;
  --shadow:rgba(20,50,40,.14);
  --max:900px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{
  background:var(--bg);color:var(--ink);
  font-family:"Inter","Amiri","Scheherazade New",system-ui,sans-serif;font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
  background-image:
    radial-gradient(circle at 10% -5%, rgba(15,92,74,.08), transparent 42%),
    radial-gradient(circle at 92% 6%, rgba(184,137,43,.09), transparent 40%);
  background-attachment:fixed;
}
::selection{background:var(--gold-soft);color:#fff}
a{color:var(--green)}

/* top bar */
header.topbar{position:sticky;top:0;z-index:50;backdrop-filter:saturate(1.2) blur(8px);
  background:rgba(245,243,236,.85);border-bottom:1px solid var(--line)}
.topbar-inner{max-width:var(--max);margin:0 auto;padding:.7rem 1.3rem;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.brand{display:flex;align-items:center;gap:.6rem;font-weight:700;letter-spacing:.01em;text-decoration:none;color:var(--ink)}
.brand .mark{width:34px;height:34px;border-radius:9px;flex:none;display:grid;place-items:center;
  background:linear-gradient(140deg,var(--green),var(--green-deep));color:var(--gold-soft);font-size:1.2rem}
.brand small{display:block;font-weight:500;font-size:.7rem;color:var(--ink-soft);letter-spacing:.08em;text-transform:uppercase}
.toplinks{display:flex;gap:.2rem;flex-wrap:wrap}
.toplinks a{font-size:.82rem;font-weight:600;color:var(--ink-soft);text-decoration:none;padding:.34rem .6rem;border-radius:7px;transition:.18s}
.toplinks a:hover{color:var(--green);background:rgba(15,92,74,.08)}
@media(max-width:680px){.toplinks{display:none}}

/* language toggle + visibility */
.langtoggle{display:inline-flex;gap:.2rem;background:var(--card);border:1px solid var(--line);
  border-radius:50px;padding:.22rem;margin-bottom:1.1rem;box-shadow:0 10px 24px -20px var(--shadow)}
.langtoggle button{border:none;background:transparent;font-family:"Inter",system-ui,sans-serif;
  font-weight:700;font-size:.84rem;color:var(--ink-soft);padding:.4rem 1rem;border-radius:50px;cursor:pointer;transition:.16s}
.langtoggle button:last-child{font-family:"Noto Sans Tamil","Inter",sans-serif}
.langtoggle button.on{background:linear-gradient(140deg,var(--green),var(--green-deep));color:#fff}
body:not(.ta) .lang-ta{display:none}
body.ta .lang-en{display:none}
body.ta .lang-ta{font-family:"Noto Sans Tamil","Amiri","Scheherazade New",system-ui,sans-serif}
.lang-ta{font-family:"Noto Sans Tamil","Amiri","Scheherazade New",system-ui,sans-serif}
body.ta .verse .tr-ta,body.ta .lang-ta{line-height:1.85}

/* hero */
.s-hero{max-width:var(--max);margin:0 auto;padding:2.6rem 1.3rem 1rem;text-align:center}
.badges{display:flex;justify-content:center;flex-wrap:wrap;gap:.5rem;margin-bottom:1.1rem}
.badge{font-size:.72rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;border-radius:50px;padding:.3rem .8rem;border:1px solid transparent}
.badge.makki{color:#fff;background:linear-gradient(140deg,var(--gold),var(--gold-soft));border-color:var(--gold)}
.badge.madani{color:#fff;background:linear-gradient(140deg,var(--green),var(--green-deep));border-color:var(--green)}
.badge.plain{color:var(--ink-soft);background:var(--card);border-color:var(--line)}
.s-hero .ar-name{font-family:"Scheherazade New",serif;font-size:clamp(2.4rem,8vw,4rem);color:var(--green-deep);direction:rtl;line-height:1.5}
.s-hero h1{font-family:"Amiri",serif;font-weight:700;font-size:clamp(1.6rem,4.5vw,2.4rem);line-height:1.15;margin-top:.2rem}
.s-hero h1 span{color:var(--green)}
.s-hero .subtitle{font-family:"Amiri",serif;font-style:italic;color:var(--ink-soft);font-size:clamp(1rem,2.4vw,1.2rem);margin-top:.5rem}

/* scene / animation stage */
.stage{max-width:var(--max);margin:1.4rem auto 0;padding:0 1.3rem}
.scene{position:relative;height:230px;border-radius:18px;overflow:hidden;border:1px solid var(--line);
  box-shadow:0 20px 44px -34px var(--shadow);background:var(--card)}
.scene .caption{position:absolute;left:0;right:0;bottom:0;padding:.5rem .9rem;font-size:.75rem;color:#fff;
  background:linear-gradient(180deg,transparent,rgba(10,30,24,.55));text-align:center;z-index:9}
@media(prefers-reduced-motion:reduce){.scene *{animation:none !important;transition:none !important}}

/* content wrap */
.wrap{max-width:var(--max);margin:0 auto;padding:1.8rem 1.3rem 4rem}
section.block{background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:1.5rem 1.5rem;margin-bottom:1.4rem;box-shadow:0 18px 40px -34px var(--shadow);scroll-margin-top:80px}
.block > h2{font-family:"Amiri",serif;font-weight:700;font-size:1.35rem;color:var(--green-deep);
  display:flex;align-items:center;gap:.6rem;margin-bottom:.9rem}
.block > h2 .ic{width:34px;height:34px;border-radius:10px;flex:none;display:grid;place-items:center;font-size:1.05rem;
  background:linear-gradient(140deg,var(--green),var(--green-deep));color:var(--gold-soft)}
.block p{margin-bottom:.8rem}
.block p:last-child{margin-bottom:0}
.factgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.8rem;margin:.2rem 0 .4rem}
.fact{background:var(--bg-2);border:1px solid var(--line);border-radius:12px;padding:.8rem .9rem}
.fact .k{font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--gold);font-weight:700}
.fact .v{font-family:"Amiri",serif;font-size:1.05rem;color:var(--ink);margin-top:.15rem}
.hl{background:var(--bg-2);border-left:3px solid var(--gold-soft);border-radius:0 8px 8px 0;padding:.7rem .9rem;font-size:.92rem;color:var(--ink-soft);margin-top:.6rem}
.hl b{color:var(--ink)}

/* verses */
.verses{display:flex;flex-direction:column;gap:1rem}
.verse{border-bottom:1px dashed var(--line);padding-bottom:1rem}
.verse:last-child{border-bottom:none;padding-bottom:0}
.verse .ar{font-family:"Scheherazade New",serif;font-size:clamp(1.5rem,4vw,2rem);line-height:2;direction:rtl;text-align:right;color:var(--ink)}
.verse .num-badge{display:inline-block;font-size:.7rem;font-weight:700;color:var(--green);background:rgba(15,92,74,.1);border-radius:50px;padding:.05rem .55rem;margin-left:.4rem;vertical-align:middle}
.verse .tl{font-family:"Amiri",serif;font-style:italic;color:var(--green-deep);font-size:.98rem;margin-top:.3rem}
.verse .tr{color:var(--ink-soft);font-size:.95rem;margin-top:.2rem}

/* audio */
.audio{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;margin-top:1rem;
  background:var(--bg-2);border:1px solid var(--line);border-radius:12px;padding:.6rem .8rem}
.audio audio{height:38px;flex:1;min-width:200px}
.audio .src{font-size:.72rem;color:var(--ink-soft);display:inline-flex;align-items:center;gap:.35rem;white-space:nowrap}
.audio .src .dot{width:7px;height:7px;border-radius:50%;background:var(--green);flex:none}

/* demonstration steps */
.demo-steps{display:grid;gap:.7rem;margin-top:.4rem}
.dstep{display:flex;gap:.8rem;align-items:flex-start;background:var(--bg-2);border:1px solid var(--line);border-radius:12px;padding:.8rem .9rem}
.dstep .n{flex:none;width:28px;height:28px;border-radius:8px;display:grid;place-items:center;font-weight:700;font-size:.85rem;
  background:linear-gradient(140deg,var(--gold),var(--gold-soft));color:#fff}
.dstep .t{font-size:.94rem}
.dstep .t b{color:var(--green-deep)}

/* pager */
.pager{display:flex;justify-content:space-between;gap:.8rem;max-width:var(--max);margin:0 auto;padding:0 1.3rem 3rem;flex-wrap:wrap}
.pager a{flex:1;min-width:150px;text-decoration:none;background:var(--card);border:1px solid var(--line);border-radius:13px;
  padding:.9rem 1.1rem;transition:.18s;box-shadow:0 12px 26px -26px var(--shadow)}
.pager a:hover{border-color:var(--green);transform:translateY(-2px)}
.pager .dir{font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--gold);font-weight:700}
.pager .name{font-family:"Amiri",serif;font-weight:700;color:var(--ink);font-size:1.05rem}
.pager a.next{text-align:right}
.pager a.home{flex:none;display:grid;place-items:center;font-weight:700;color:var(--green)}

footer{border-top:1px solid var(--line);background:var(--bg-2)}
.foot-inner{max-width:var(--max);margin:0 auto;padding:2rem 1.3rem;font-size:.82rem;color:var(--ink-soft);text-align:center;line-height:1.7}
.foot-inner .ar{font-family:"Scheherazade New",serif;font-size:1.3rem;color:var(--green-deep);margin:.3rem 0}

/* ============================================================
   ANIMATION SCENES
   ============================================================ */

/* generic sky used by several scenes */
.sky{position:absolute;inset:0}
.star{position:absolute;width:3px;height:3px;border-radius:50%;background:#fff;opacity:.8;animation:twinkle 3s infinite ease-in-out}
@keyframes twinkle{0%,100%{opacity:.2}50%{opacity:.9}}

/* --- Al-Fatiha: seven lights along the straight path --- */
.scene-fatiha{background:linear-gradient(180deg,#0a4235,#0f5c4a)}
.scene-fatiha .path{position:absolute;left:6%;right:6%;top:50%;height:4px;transform:translateY(-50%);
  background:linear-gradient(90deg,rgba(255,255,255,.15),rgba(201,162,74,.7),rgba(255,255,255,.15));border-radius:4px}
.scene-fatiha .light{position:absolute;top:50%;width:22px;height:22px;border-radius:50%;transform:translate(-50%,-50%);
  background:radial-gradient(circle,#fff,#c9a24a);box-shadow:0 0 16px #c9a24a;opacity:.25;animation:litpath 4.9s infinite}
@keyframes litpath{0%,90%,100%{opacity:.25;transform:translate(-50%,-50%) scale(.8)}
  10%{opacity:1;transform:translate(-50%,-50%) scale(1.25)}}
.scene-fatiha .seven{position:absolute;top:16%;left:50%;transform:translateX(-50%);font-family:"Scheherazade New",serif;
  color:rgba(255,255,255,.85);font-size:1.4rem}

/* --- Al-Ikhlas: divine oneness, radiating rings --- */
.scene-ikhlas{background:radial-gradient(circle at 50% 50%,#123f34,#0a2b24)}
.scene-ikhlas .core{position:absolute;left:50%;top:50%;width:70px;height:70px;transform:translate(-50%,-50%);
  border-radius:50%;background:radial-gradient(circle,#fff,#c9a24a 70%);box-shadow:0 0 40px #c9a24a;animation:breathe 3s infinite ease-in-out}
.scene-ikhlas .ring{position:absolute;left:50%;top:50%;border:2px solid rgba(201,162,74,.6);border-radius:50%;
  transform:translate(-50%,-50%);animation:radiate 3.2s infinite ease-out}
.scene-ikhlas .ring:nth-child(2){animation-delay:1.05s}
.scene-ikhlas .ring:nth-child(3){animation-delay:2.1s}
@keyframes breathe{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.12)}}
@keyframes radiate{0%{width:70px;height:70px;opacity:.9}100%{width:300px;height:300px;opacity:0}}

/* --- Al-Falaq: night giving way to daybreak --- */
.scene-falaq{background:linear-gradient(180deg,#0a1a3a 0%,#1a2f5a 40%,#c9772e 78%,#f2c14e 100%);animation:dawn 6s infinite alternate ease-in-out}
@keyframes dawn{0%{filter:brightness(.55)}100%{filter:brightness(1.1)}}
.scene-falaq .sun{position:absolute;left:50%;bottom:-40px;width:100px;height:100px;transform:translateX(-50%);
  border-radius:50%;background:radial-gradient(circle,#fff6d8,#f2c14e);box-shadow:0 0 50px #f2c14e;animation:rise 6s infinite alternate ease-in-out}
@keyframes rise{0%{bottom:-70px;opacity:.4}100%{bottom:20px;opacity:1}}
.scene-falaq .horizon{position:absolute;left:0;right:0;bottom:0;height:36%;background:linear-gradient(180deg,rgba(20,10,5,.2),#3a2410)}

/* --- An-Nas: the guarded heart, whispers repelled --- */
.scene-nas{background:radial-gradient(circle at 50% 45%,#123f34,#0a2b24)}
.scene-nas .shield{position:absolute;left:50%;top:50%;width:90px;height:100px;transform:translate(-50%,-50%);
  background:linear-gradient(160deg,#c9a24a,#b8892b);clip-path:polygon(50% 0,100% 18%,100% 62%,50% 100%,0 62%,0 18%);
  display:grid;place-items:center;color:#0a2b24;font-size:1.8rem;box-shadow:0 0 26px rgba(201,162,74,.5);animation:pulseguard 2.6s infinite}
@keyframes pulseguard{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.06)}}
.scene-nas .whisper{position:absolute;top:50%;left:-10%;font-size:1.3rem;color:rgba(255,255,255,.45);animation:whisperin 3.4s infinite linear}
.scene-nas .whisper:nth-child(3){top:34%;animation-delay:1.1s}
.scene-nas .whisper:nth-child(4){top:66%;animation-delay:2.2s}
@keyframes whisperin{0%{left:-10%;opacity:0}40%{opacity:.7}55%{left:34%;opacity:.7}70%{left:22%;opacity:0}100%{left:22%;opacity:0}}

/* --- Al-Kawthar: the flowing fountain of abundance --- */
.scene-kawthar{background:linear-gradient(180deg,#0f5c4a,#0a3d31)}
.scene-kawthar .drop{position:absolute;top:-10px;width:8px;height:14px;border-radius:0 50% 50% 50%;transform:rotate(45deg);
  background:rgba(201,162,74,.85);animation:fall 2.4s infinite linear}
.scene-kawthar .pool{position:absolute;left:0;right:0;bottom:0;height:34%;
  background:linear-gradient(180deg,rgba(201,162,74,.25),rgba(201,162,74,.5));border-top:2px solid rgba(255,255,255,.35)}
.scene-kawthar .wave{position:absolute;left:0;right:0;bottom:calc(34% - 6px);height:10px;
  background:radial-gradient(circle,rgba(255,255,255,.5) 2px,transparent 3px);background-size:24px 10px;animation:ripple 3s infinite linear}
@keyframes fall{0%{top:-10px;opacity:0}15%{opacity:1}80%{opacity:1}100%{top:66%;opacity:0}}
@keyframes ripple{0%{background-position:0 0}100%{background-position:48px 0}}

/* --- Al-Asr: time slipping through the hourglass --- */
.scene-asr{background:radial-gradient(circle at 50% 40%,#1b3a32,#0a2b24)}
.scene-asr .glass{position:absolute;left:50%;top:50%;width:96px;height:130px;transform:translate(-50%,-50%)}
.scene-asr .bulb{position:absolute;left:0;right:0;height:52px;border:3px solid #c9a24a}
.scene-asr .bulb.top{top:0;border-radius:6px 6px 40px 40px}
.scene-asr .bulb.bot{bottom:0;border-radius:40px 40px 6px 6px}
.scene-asr .sand{position:absolute;left:50%;top:50%;width:3px;height:44px;transform:translate(-50%,-50%);
  background:linear-gradient(180deg,#c9a24a,transparent);animation:sandflow 1.4s infinite linear}
@keyframes sandflow{0%{opacity:.2}50%{opacity:1}100%{opacity:.2}}
.scene-asr .frame{position:absolute;left:50%;top:50%;width:120px;height:150px;transform:translate(-50%,-50%);
  border-left:4px solid #b8892b;border-right:4px solid #b8892b;border-radius:6px}

/* --- Al-Kafirun: two paths that never meet --- */
.scene-kafirun{background:linear-gradient(180deg,#0a2b24,#123f34)}
.scene-kafirun .fork{position:absolute;left:50%;bottom:0;width:2px;height:60%;background:rgba(255,255,255,.2);transform:translateX(-50%)}
.scene-kafirun .road{position:absolute;bottom:34%;width:44%;height:4px;background:linear-gradient(90deg,transparent,var(--gold-soft))}
.scene-kafirun .road.l{left:2%;transform:rotate(14deg);transform-origin:right}
.scene-kafirun .road.r{right:2%;transform:rotate(-14deg);transform-origin:left;background:linear-gradient(270deg,transparent,var(--gold-soft))}
.scene-kafirun .trav{position:absolute;bottom:36%;font-size:1.3rem;animation:travel 4s infinite ease-in-out}
.scene-kafirun .trav.l{left:46%;animation-name:travelL}
.scene-kafirun .trav.r{right:46%;animation-name:travelR}
@keyframes travelL{0%{left:46%;bottom:36%;opacity:0}20%{opacity:1}100%{left:6%;bottom:52%;opacity:1}}
@keyframes travelR{0%{right:46%;bottom:36%;opacity:0}20%{opacity:1}100%{right:6%;bottom:52%;opacity:1}}

/* --- An-Nasr: crowds entering, banner of victory --- */
.scene-nasr{background:linear-gradient(180deg,#0f5c4a,#0a3d31)}
.scene-nasr .banner{position:absolute;left:50%;top:20%;transform:translateX(-50%);font-size:2.4rem;animation:wave 2.6s infinite ease-in-out}
@keyframes wave{0%,100%{transform:translateX(-50%) rotate(-6deg)}50%{transform:translateX(-50%) rotate(6deg)}}
.scene-nasr .person{position:absolute;bottom:16%;width:12px;height:12px;border-radius:50%;background:var(--gold-soft);animation:march 4s infinite linear}
@keyframes march{0%{left:-6%;opacity:0}10%{opacity:1}90%{opacity:1}100%{left:50%;opacity:0}}

/* --- Al-Fil: the elephant, birds & the standing Kaaba --- */
.scene-fil{background:linear-gradient(180deg,#1a2f5a,#c9772e 92%)}
.scene-fil .kaaba{position:absolute;right:12%;bottom:20%;width:52px;height:52px;background:#161616;border:3px solid #c9a24a;border-radius:4px;box-shadow:0 0 16px rgba(201,162,74,.4)}
.scene-fil .ele{position:absolute;left:-70px;bottom:18%;font-size:2.4rem;animation:advance 7s infinite ease-in}
@keyframes advance{0%{left:-70px}55%{left:36%}60%{left:34%}100%{left:34%}}
.scene-fil .bird{position:absolute;top:-20px;font-size:1rem;color:#2b2b2b;animation:swoop 3.4s infinite ease-in}
.scene-fil .bird:nth-child(4){animation-delay:.6s;left:20%}
.scene-fil .bird:nth-child(5){animation-delay:1.2s;left:40%}
.scene-fil .bird:nth-child(6){animation-delay:1.8s;left:30%}
@keyframes swoop{0%{top:-20px;opacity:0}30%{opacity:1}100%{top:64%;opacity:1}}
.scene-fil .ground{position:absolute;left:0;right:0;bottom:0;height:20%;background:#7a4a1e}

/* --- Quraysh: the caravan between winter and summer --- */
.scene-quraysh{background:linear-gradient(180deg,#1a2f5a 0%,#d9a441 60%,#e8c877 100%)}
.scene-quraysh .season{position:absolute;top:14%;font-size:1.7rem;animation:seasons 6s infinite}
.scene-quraysh .winter{left:16%}
.scene-quraysh .summer{right:16%;animation-delay:3s}
@keyframes seasons{0%,45%{opacity:1;transform:scale(1)}55%,100%{opacity:.15;transform:scale(.8)}}
.scene-quraysh .camel{position:absolute;bottom:18%;font-size:2rem;animation:caravan 8s infinite linear}
.scene-quraysh .camel:nth-child(4){animation-delay:1.4s;font-size:1.6rem}
.scene-quraysh .camel:nth-child(5){animation-delay:2.8s;font-size:1.4rem}
@keyframes caravan{0%{left:-10%}100%{left:105%}}
.scene-quraysh .dune{position:absolute;left:0;right:0;bottom:0;height:20%;background:#b5842f;border-radius:50% 50% 0 0/100% 100% 0 0}

/* --- Al-Maun: the withheld kindness vs the giving hand --- */
.scene-maun{background:radial-gradient(circle at 50% 40%,#123f34,#0a2b24)}
.scene-maun .bowl{position:absolute;left:50%;bottom:24%;transform:translateX(-50%);font-size:2.2rem}
.scene-maun .hand{position:absolute;left:20%;bottom:30%;font-size:2rem;animation:give 3.4s infinite ease-in-out}
@keyframes give{0%,100%{left:16%;opacity:.4}50%{left:38%;opacity:1}}
.scene-maun .heart{position:absolute;right:20%;bottom:30%;font-size:1.8rem;animation:beat 1.8s infinite}
@keyframes beat{0%,100%{transform:scale(1)}50%{transform:scale(1.2)}}

/* --- Al-Masad: the blazing fire --- */
.scene-masad{background:linear-gradient(180deg,#2a0a0a,#5a1408)}
.scene-masad .flame{position:absolute;bottom:16%;left:50%;width:60px;height:100px;transform:translateX(-50%);
  background:linear-gradient(180deg,#ffd24a,#ff7a18 45%,#c81e1e);border-radius:50% 50% 50% 50%/60% 60% 40% 40%;
  filter:blur(1px);animation:flicker .5s infinite alternate}
.scene-masad .flame.f2{width:34px;height:70px;left:42%;background:linear-gradient(180deg,#ffe27a,#ff9a3c,#e23b1e);animation-delay:.15s}
.scene-masad .flame.f3{width:34px;height:70px;left:58%;background:linear-gradient(180deg,#ffe27a,#ff9a3c,#e23b1e);animation-delay:.3s}
@keyframes flicker{0%{transform:translateX(-50%) scaleY(1) skewX(-3deg)}100%{transform:translateX(-50%) scaleY(1.12) skewX(3deg)}}
.scene-masad .ember{position:absolute;bottom:20%;width:4px;height:4px;border-radius:50%;background:#ffcf6b;animation:emberrise 2.4s infinite}
@keyframes emberrise{0%{bottom:20%;opacity:1}100%{bottom:90%;opacity:0}}