:root{--ivory: #f9f4ec;--warm-white: #fffdf9;--blush: #f5e4e8;--lavender: #ece7f5;--gold: rgba(218, 184, 111, .32);--ink: #352c2a;--muted: rgba(53, 44, 42, .78);--panel: rgba(255, 255, 255, .38);--floral-wash: rgba(214, 170, 134, .13)}*,*:before,*:after{box-sizing:border-box}html,body{margin:0;min-height:100%}html{scroll-behavior:smooth}body{color:var(--ink);background:radial-gradient(circle at 10% 6%,rgba(255,239,200,.72),transparent 42%),radial-gradient(circle at 85% 8%,rgba(246,229,236,.65),transparent 46%),radial-gradient(circle at 50% 105%,rgba(233,225,247,.5),transparent 42%),linear-gradient(170deg,var(--warm-white),var(--ivory) 50%,#f6effb 100%);font-family:Cormorant Garamond,Times New Roman,serif;overflow-x:hidden}.scene{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:-1;overflow:hidden}.layer{position:absolute;border-radius:50%;filter:blur(.5px)}.glow-one{width:60vmax;height:60vmax;top:-22vmax;left:-18vmax;background:radial-gradient(circle,rgba(255,227,177,.66),transparent 68%);animation:ambient-shift-a 34s ease-in-out infinite alternate}.glow-two{width:50vmax;height:50vmax;bottom:-20vmax;right:-14vmax;background:radial-gradient(circle,rgba(226,206,238,.42),transparent 70%);animation:ambient-shift-b 39s ease-in-out infinite alternate}.floral-texture{top:-8%;right:-8%;bottom:-8%;left:-8%;border-radius:0;background-image:radial-gradient(circle at 18% 22%,var(--floral-wash) 0 3px,transparent 4px),radial-gradient(circle at 82% 32%,rgba(232,205,180,.13) 0 4px,transparent 5px),radial-gradient(circle at 50% 78%,rgba(226,204,184,.12) 0 3px,transparent 5px),radial-gradient(circle at 12% 86%,rgba(255,251,243,.62) 0 2px,transparent 4px);opacity:.44;animation:ambient-fade 28s ease-in-out infinite alternate}#particle-field{position:absolute;top:0;right:0;bottom:0;left:0}.particle{position:absolute;width:4px;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#ffffffe6,#faddb538);filter:blur(.45px);animation:drift linear infinite}@keyframes drift{0%{transform:translateZ(0) scale(.85);opacity:0}20%{opacity:.62}50%{opacity:.34}to{transform:translate3d(14px,-165px,0) scale(1.18);opacity:0}}@keyframes ambient-shift-a{0%{transform:translateZ(0) scale(1)}to{transform:translate3d(18px,14px,0) scale(1.06)}}@keyframes ambient-shift-b{0%{transform:translateZ(0) scale(1)}to{transform:translate3d(-16px,-12px,0) scale(1.05)}}@keyframes ambient-fade{0%{opacity:.34}to{opacity:.55}}.controls{position:fixed;top:.85rem;inset-inline:.85rem;display:flex;gap:.45rem;justify-content:flex-end;z-index:30}.control-btn{border:1px solid rgba(176,147,118,.26);background:linear-gradient(160deg,#ffffffad,#fdf5ec61),var(--panel);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--ink);border-radius:999px;padding:.46rem .8rem;font-size:.86rem;font-family:Cormorant Garamond,Times New Roman,serif;letter-spacing:.04em;cursor:pointer;transition:background-color .18s ease,transform .18s ease}.control-btn:hover,.control-btn:focus-visible{outline:none;transform:translateY(-1px);background:linear-gradient(160deg,#ffffffbf,#fef7ed80)}.control-btn.is-active{border-color:#c4a16f6b;background:radial-gradient(circle at 18% 20%,rgba(255,242,208,.62),transparent 52%),linear-gradient(170deg,#fff9eee0,#f7ebd8b3)}.control-btn[disabled]{cursor:not-allowed;opacity:.45}.start-narration-cta{position:fixed;top:4.2rem;left:50%;transform:translate3d(-50%,-12px,0);border:1px solid rgba(193,151,90,.45);border-radius:999px;background:radial-gradient(circle at 22% 18%,rgba(255,245,221,.95),transparent 54%),linear-gradient(165deg,#fffbf3f2,#f8e7c9eb);box-shadow:0 14px 35px #7154373d,0 0 0 1px #fff6e599 inset;color:#3f2f24;font-family:Cormorant Garamond,Times New Roman,serif;font-size:clamp(1rem,2.9vw,1.18rem);font-weight:600;letter-spacing:.02em;padding:.62rem 1.32rem;cursor:pointer;z-index:45;opacity:0;pointer-events:none;transition:opacity .22s ease,transform .22s ease}.start-narration-cta.is-visible{opacity:1;pointer-events:auto;transform:translate3d(-50%,0,0)}.start-narration-cta:focus-visible,.start-narration-cta:hover{outline:none;transform:translate3d(-50%,-1px,0)}.story-section{--section-pin-top: 50%;min-height:100svh;position:relative;padding:0 1.2rem}.section-inner{position:sticky;top:var(--section-pin-top);transform:translateY(-50%);--panel-tint-a: rgba(255, 250, 244, .74);--panel-tint-b: rgba(255, 240, 226, .25);max-width:min(760px,92vw);width:100%;min-height:clamp(320px,58svh,560px);display:flex;flex-direction:column;justify-content:center;overflow:hidden;background:radial-gradient(circle at 18% 12%,rgba(255,245,223,.5),transparent 42%),linear-gradient(164deg,var(--panel-tint-a),var(--panel-tint-b));border-radius:20px;border:1px solid rgba(198,169,137,.28);padding:clamp(1.3rem,5vw,2.8rem);box-shadow:0 20px 52px #5c483a17,inset 0 1px #ffffffc2,inset 0 -22px 42px #f7e6d221;margin-inline:auto}.section-inner:before,.section-inner:after{content:"";position:absolute;pointer-events:none;width:130px;height:130px;opacity:.24;background:radial-gradient(circle at 30% 30%,rgba(214,169,125,.22) 0 3px,transparent 4px),radial-gradient(circle at 60% 70%,rgba(255,242,220,.34) 0 2px,transparent 4px)}.section-inner:before{top:.4rem;inset-inline-start:.35rem;transform:rotate(-8deg)}.section-inner:after{bottom:.4rem;inset-inline-end:.35rem;transform:rotate(8deg)}#intro .section-inner{--panel-tint-a: rgba(255, 250, 243, .78);--panel-tint-b: rgba(250, 235, 220, .27)}#dua .section-inner{--panel-tint-a: rgba(255, 247, 244, .76);--panel-tint-b: rgba(244, 223, 230, .29)}#meaning .section-inner{--panel-tint-a: rgba(255, 251, 245, .75);--panel-tint-b: rgba(238, 223, 244, .3)}#reveal .section-inner{--panel-tint-a: rgba(255, 247, 232, .78);--panel-tint-b: rgba(248, 232, 204, .28)}#verses .section-inner{--panel-tint-a: rgba(250, 246, 255, .78);--panel-tint-b: rgba(232, 221, 246, .3)}#closing .section-inner{--panel-tint-a: rgba(255, 251, 240, .8);--panel-tint-b: rgba(240, 227, 248, .3)}.section-inner p,.section-inner h1{margin:0}[data-lang]{display:none}html[data-language=ar] [data-lang=ar],html[data-language=fr] [data-lang=fr]{display:block;width:100%}html[data-language=ar] .section-inner{font-family:Amiri,Times New Roman,serif;font-size:clamp(1.56rem,6.15vw,2.38rem);line-height:1.75;text-align:center}html[data-language=ar] .section-inner [data-lang=ar]>.phrase-item:first-child,html[data-language=ar] .line-tight{font-family:Scheherazade New,Amiri,serif;font-weight:700;font-size:1.13em;color:#5b402d;letter-spacing:.02em;text-shadow:0 1px 0 rgba(255,246,228,.58)}html[data-language=fr] .section-inner{font-family:Cormorant Garamond,Times New Roman,serif;font-size:clamp(1.43rem,4.68vw,2.05rem);line-height:1.58;text-align:center}.line-tight{margin-bottom:.5rem}.phrase-item{display:none}.phrase-item.is-visible{display:block;animation:phrase-in .76s ease both}@keyframes phrase-in{0%{opacity:0;transform:translate3d(0,10px,0)}to{opacity:1;transform:translateZ(0)}}.phrase-gap{display:block;height:.78em}.verses .section-inner{font-size:clamp(1.17rem,3.9vw,1.82rem)}.verse{margin-top:1.05rem}.verse-ref{margin-top:.2rem;color:var(--muted);font-size:.78em}.verse-pair{margin-top:1.05rem}.verse-pair .verse,.verse-pair .verse-ref{margin-top:0}.name-intro{margin-bottom:1rem}.name{font-size:clamp(2.5rem,10vw,6rem);margin-top:1.1rem;letter-spacing:.14em}html[data-language=ar] .name{letter-spacing:.08em}.glow{text-shadow:0 0 12px rgba(255,240,209,.95),0 0 34px rgba(248,212,132,.52);animation:breathing-glow 3.6s ease-in-out infinite}@keyframes breathing-glow{0%,to{opacity:.85;transform:translateY(0)}50%{opacity:1;transform:translateY(-2px)}}.reveal{opacity:0;transform:translate3d(0,24px,0);transition:opacity .85s ease,transform .85s ease}.reveal.is-visible{opacity:1;transform:translateZ(0)}.section-inner.reveal{transform:translateY(calc(-50% + 24px))}.section-inner.reveal.is-visible{transform:translateY(-50%)}.story-section.is-current .section-inner{border-color:#caa87673;box-shadow:0 24px 70px #583e2c29,0 0 0 1px #fff0d047,inset 0 1px #ffffffd1}@media (min-width: 768px){.controls{top:1.15rem;inset-inline:1.2rem}.start-narration-cta{top:4.6rem}.story-section{padding-inline:2rem}.control-btn{font-size:1rem;padding:.52rem 1rem}}
