.ramadan-opening-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background:linear-gradient(135deg,#060918,#0d122b 50%,#060918);z-index:9999;display:flex;align-items:center;justify-content:center;overflow:hidden}.ramadan-opening-overlay:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle,transparent 20%,rgba(0,0,0,.4) 100%);pointer-events:none;z-index:5;transition:background 2s ease-in-out}.phase-reflection .ramadan-opening-overlay:after{background:radial-gradient(circle,transparent 10%,rgba(0,0,0,.6) 100%)}.ramadan-opening-skip{position:absolute;top:2rem;right:2rem;background:transparent;border:1px solid rgba(212,175,55,.3);color:rgba(212,175,55,.8);padding:.5rem 1.5rem;border-radius:2rem;font-size:.875rem;cursor:pointer;transition:all .3s ease;z-index:10000}.ramadan-opening-skip:hover{background:rgba(212,175,55,.1);border-color:rgba(212,175,55,.6);color:rgba(212,175,55,1)}.ramadan-opening-content{width:100%;height:100%;display:flex;align-items:center;justify-content:center;position:relative}.ramadan-opening-content.fade-in{animation:fadeIn 1.5s ease-in-out}.ramadan-opening-content.fade-out{animation:fadeOut 1s ease-in-out}@keyframes fadeIn{0%{opacity:0;filter:blur(10px);transform:translateY(20px)}to{opacity:1;filter:blur(0);transform:translateY(0)}}@keyframes fadeOut{0%{opacity:1;filter:blur(0);transform:translateY(0)}to{opacity:0;filter:blur(10px);transform:translateY(-20px)}}.night-sky-stars{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:1}.star{position:absolute;background:#fff;border-radius:50%;opacity:0;animation:starTwinkle var(--duration) ease-in-out infinite;animation-delay:var(--delay)}@keyframes starTwinkle{0%,to{opacity:0;transform:scale(.5)}50%{opacity:var(--max-opacity,.7);transform:scale(1)}}.background-calligraphy{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:80%;max-width:600px;height:auto;opacity:.05;z-index:2;pointer-events:none}.calligraphy-path{fill:transparent;stroke:#d4af37;stroke-width:.5;stroke-dasharray:1000;stroke-dashoffset:1000;animation:drawPath 8s ease-in-out infinite}@keyframes drawPath{0%{stroke-dashoffset:1000;opacity:0}20%{opacity:1}50%{stroke-dashoffset:0;opacity:1}80%{opacity:1}to{stroke-dashoffset:0;opacity:0}}.hanging-lanterns-container{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:8}.lantern-hanger{position:absolute;top:-20px;transform-origin:top center;animation:lanternSway var(--sway-duration,6s) ease-in-out infinite}.lantern-rope{width:2px;background:linear-gradient(180deg,rgba(212,175,55,.4),rgba(212,175,55,.1));margin:0 auto;height:var(--rope-height,150px)}.lantern-body-premium{width:40px;height:60px;background:#d4af37;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);position:relative;box-shadow:0 0 20px rgba(212,175,55,.4)}.lantern-body-premium:after{content:"";position:absolute;top:10%;left:10%;right:10%;bottom:10%;background:#fff;opacity:.8;clip-path:inherit;animation:lanternLightPulse 4s ease-in-out infinite}@keyframes lanternLightPulse{0%,to{opacity:.4;filter:blur(2px)}50%{opacity:.9;filter:blur(5px);background:#fffbe6}}.geometric-pattern{position:absolute;top:0;left:0;width:100%;height:100%;opacity:.08;background-image:repeating-linear-gradient(45deg,transparent,transparent 35px,rgba(212,175,55,.1) 0,rgba(212,175,55,.1) 70px),repeating-linear-gradient(-45deg,transparent,transparent 35px,rgba(212,175,55,.1) 0,rgba(212,175,55,.1) 70px);animation:patternPulse 20s ease-in-out infinite}.geometric-pattern.fading{animation:patternFadeOut 2s ease-in-out forwards}@keyframes patternPulse{0%,to{opacity:.08}50%{opacity:.12}}@keyframes patternFadeOut{to{opacity:.03}}.phase{width:100%;height:100%;display:flex;align-items:center;justify-content:center;position:relative}.content-wrapper{max-width:800px;padding:2rem;text-align:center;position:relative;z-index:10}.phase-arrival .light-reveal{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:600px;height:600px;background:radial-gradient(circle,rgba(212,175,55,.15) 0,transparent 70%);animation:lightReveal 3s ease-out}@keyframes lightReveal{0%{opacity:0;transform:translate(-50%,-50%) scale(.3)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}.main-heading{font-size:3.5rem;font-weight:300;color:#d4af37;margin-bottom:1rem;letter-spacing:.05em;animation:fadeInUp 1.5s ease-out}.subtext{font-size:1.25rem;color:rgba(212,175,55,.7);font-style:italic;margin-bottom:3rem;animation:fadeInUp 1.5s ease-out 1s backwards}.ayah-container,.hadith-container{margin-top:2rem;animation:fadeInUp 1.5s ease-out 2s backwards}.arabic-text{font-size:1.75rem;line-height:2.5;color:#d4af37;font-family:Amiri,Traditional Arabic,serif;margin-bottom:1.5rem;direction:rtl}.english-text{font-size:1.125rem;line-height:1.8;color:rgba(255,255,255,.85);margin-bottom:.75rem}.phase-arrival .english-text,.phase-arrival .reference,.phase-mercy .english-text,.phase-mercy .reference{opacity:0;animation:fadeInUp 1.5s ease-out 6.5s forwards}.reference{font-size:.875rem;color:rgba(212,175,55,.6);font-style:italic}.hadith-text{font-size:1.5rem;line-height:1.8;color:#d4af37;font-weight:300;margin-bottom:.75rem}.reflection-lines{margin-bottom:3rem}.reflection-lines .line{font-size:1.5rem;line-height:2;color:rgba(255,255,255,.9);font-weight:300;opacity:0;animation:fadeInUp 1.5s ease-out forwards}.reflection-lines .line.delay-1{animation-delay:1.5s}.reflection-lines .line.delay-2{animation-delay:3s}.light-beam{position:absolute;top:-50%;left:50%;width:200px;height:200%;background:linear-gradient(180deg,rgba(212,175,55,.2) 0,transparent 60%);transform:rotate(20deg);pointer-events:none;z-index:3;animation:lightBeamMove 15s linear infinite;filter:blur(40px)}@keyframes lightBeamMove{0%{transform:translateX(-100vw) rotate(20deg);opacity:0}20%{opacity:.5}50%{opacity:1}80%{opacity:.5}to{transform:translateX(100vw) rotate(20deg);opacity:0}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.experience-intro-screen{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at center,rgba(13,18,43,.5) 0,transparent 70%)}.experience-intro-screen .content-wrapper{max-width:700px;padding:4rem 2rem}.bismillah-title{font-size:4.5rem;color:#d4af37;margin-bottom:3rem;font-family:Amiri,Traditional Arabic,serif;font-weight:700;text-shadow:0 0 30px rgba(212,175,55,.4);text-align:center;line-height:1.4}.intro-message-box{margin-bottom:3.5rem;text-align:center}.spiritual-welcome{font-size:1.5rem;color:#ffffff;margin-bottom:1rem;letter-spacing:.5px;opacity:.9}.volume-instruction{font-size:1rem;color:#d4af37;opacity:.7;font-style:italic}.btn-begin-experience{display:block;margin:0 auto;background:linear-gradient(135deg,#d4af37,#b8952e);color:#060918;border:none;padding:1.25rem 3rem;font-size:1.2rem;font-weight:700;border-radius:50px;cursor:pointer;transition:all .4s cubic-bezier(.175,.885,.32,1.275);box-shadow:0 10px 25px rgba(212,175,55,.3);text-transform:uppercase;letter-spacing:2px}.btn-begin-experience:hover{transform:translateY(-5px) scale(1.02);box-shadow:0 15px 35px rgba(212,175,55,.5);background:linear-gradient(135deg,#e5c35d,#d4af37)}.btn-begin-experience:active{transform:translateY(-2px)}.crescent-moon{position:absolute;top:20%;left:50%;transform:translateX(-50%);width:80px;height:80px;border-radius:50%;box-shadow:-15px 0 0 -5px #d4af37,0 0 40px rgba(212,175,55,.4);animation:moonRise 2s ease-out,moonGlow 3s ease-in-out infinite}@keyframes moonRise{0%{opacity:0;transform:translateX(-50%) translateY(30px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}@keyframes moonGlow{0%,to{box-shadow:-15px 0 0 -5px #d4af37,0 0 40px rgba(212,175,55,.4)}50%{box-shadow:-15px 0 0 -5px #d4af37,0 0 60px rgba(212,175,55,.6)}}.lantern-glow{position:absolute;bottom:15%;left:50%;transform:translateX(-50%);width:120px;height:150px;background:radial-gradient(ellipse at center,rgba(212,175,55,.2) 0,transparent 70%);animation:lanternSway 4s ease-in-out infinite}@keyframes lanternSway{0%,to{transform:translateX(-50%) rotate(-2deg)}50%{transform:translateX(-50%) rotate(2deg)}}.gentle-reminder{font-size:1.125rem;color:rgba(212,175,55,.8);font-style:italic;margin-top:2rem;animation:fadeInUp 1.5s ease-out 4s backwards}.work-message{margin-bottom:3rem}.work-message .line{font-size:1.5rem;line-height:2;color:rgba(255,255,255,.9);font-weight:300;opacity:0;animation:fadeInUp .8s ease-out forwards}.work-message .line.delay-1{animation-delay:1.5s}.work-message .line.delay-2{animation-delay:3s}.features-heading{font-size:1.75rem;font-weight:300;color:#d4af37;margin-bottom:3rem;line-height:1.6}.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.5rem;margin-top:2rem}.feature-card{background:rgba(212,175,55,.05);border:1px solid rgba(212,175,55,.15);border-radius:1rem;padding:2rem 1.5rem;transition:all .3s ease;opacity:0;animation:fadeInUp .6s ease-out forwards}.feature-card.delay-0{animation-delay:.5s}.feature-card.delay-1{animation-delay:1.5s}.feature-card.delay-2{animation-delay:2.5s}.feature-card.delay-3{animation-delay:3.5s}.feature-card:hover{background:rgba(212,175,55,.08);border-color:rgba(212,175,55,.25);transform:translateY(-4px)}.feature-icon{font-size:2.5rem;display:block;margin-bottom:1rem}.feature-card h3{font-size:1.125rem;font-weight:500;color:#d4af37;margin-bottom:.5rem}.feature-card p{font-size:.875rem;color:rgba(255,255,255,.7);line-height:1.5}.closing-ayah{margin-bottom:4rem;animation:fadeInUp 1.5s ease-out 1s backwards}.typing-arabic{display:inline-block;white-space:nowrap;overflow:hidden;border-right:2px solid #d4af37;clip-path:inset(0 0 0 100%);animation:typingArabic 4s steps(40) 2s forwards,cursorBlink .8s step-end infinite;padding-right:.5rem;margin-bottom:2rem!important}@keyframes typingArabic{0%{clip-path:inset(0 0 0 100%);border-right-color:#d4af37}99%{clip-path:inset(0 0 0 0);border-right-color:#d4af37}to{clip-path:inset(0 0 0 0);border-right-color:transparent}}@keyframes cursorBlink{0%,to{border-right-color:transparent}50%{border-right-color:#d4af37}}.closing-ayah .english-text{font-size:1.75rem;color:#d4af37;margin-bottom:1rem;opacity:0;animation:fadeInUp 1.5s ease-out 5s forwards}.closing-ayah .reference{opacity:0;animation:fadeInUp 1.5s ease-out 5.5s forwards}.cta-buttons{display:flex;gap:1rem;justify-content:center;align-items:center;opacity:0;animation:fadeInUp 1.5s ease-out 6.5s forwards}.btn-primary,.btn-secondary{padding:1rem 2.5rem;border-radius:2rem;font-size:1rem;font-weight:500;cursor:pointer;transition:all .3s ease;border:none}.btn-primary{background:linear-gradient(135deg,#d4af37,#c9a532);color:#0a0e27;box-shadow:0 4px 20px rgba(212,175,55,.3)}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 25px rgba(212,175,55,.4)}.btn-secondary{background:transparent;color:rgba(212,175,55,.8);border:1px solid rgba(212,175,55,.3);font-size:.875rem}.btn-secondary:hover{background:rgba(212,175,55,.1);color:rgba(212,175,55,1)}@media (prefers-reduced-motion:reduce){.ayah-container,.closing-ayah,.crescent-moon,.cta-buttons,.feature-card,.hadith-container,.lantern-glow,.light-reveal,.main-heading,.ramadan-opening-content,.reflection-lines .line,.subtext{animation:none!important;transition:none!important}.feature-card,.reflection-lines .line{opacity:1!important}}@media (max-width:768px){.content-wrapper{padding:1.5rem}.main-heading{font-size:2.5rem}.subtext{font-size:1rem}.arabic-text{font-size:1.5rem}.english-text{font-size:1rem}.reflection-lines .line,.work-message .line{font-size:1.25rem}.features-grid{grid-template-columns:1fr;gap:1rem}.cta-buttons{flex-direction:column;width:100%}.btn-primary,.btn-secondary{width:100%}.lantern-hanger:nth-child(3){display:none}.lantern-hanger{scale:.8}}@media (max-width:480px){.ramadan-opening-skip{top:1rem;right:1rem;padding:.4rem 1rem}.ramadan-opening-sound-toggle{top:1rem;left:1rem;width:40px;height:40px;font-size:1rem}.main-heading{font-size:2rem}.arabic-text{font-size:1.25rem;line-height:2}.lantern-hanger{scale:.6}.lantern-hanger:nth-child(2){display:none}}