/* One platform canvas. The supplied PNG is an alpha mask, following every
   palette without modifying the artwork. Cards retain their readable surfaces. */
@layer ds-atmosphere {
 html[data-theme] body.ds-atmosphere-enabled{isolation:isolate;background:var(--ds-bg)!important}
 html body.ds-atmosphere-enabled :is([data-ds-page-root],[data-ds-page-inset],main.ds-app-page,main.ds-account-page,main.ds-course-page,main.ds-lesson-page,main.dspt-page,#ds-page-content,#ds-page-quran,#ds-page-gebet,#ds-page-alphabet,#ds-page-dua,#ds-page-roadmap,#ds-page-wunder-im-islam,#ds-page-game,#ds-page-gameepisode1,#ds-page-gameepisode2,.ds-page-main,.ds-app-page,.ds-live-page,.ds-platform-page){background:transparent!important}
 html body.ds-atmosphere-enabled :is([data-ds-page-root],[data-ds-page-inset])::before,
 html body.ds-atmosphere-enabled :is([data-ds-page-root],[data-ds-page-inset])::after{display:none!important}
 html body.ds-atmosphere-enabled :is(.ds-app-bg,.dsdash-bg,.dss-bg,[id^="ds-global-glows"]){display:none!important}
}
#ds-atmosphere{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;contain:strict;--orb-x:73%;--orb-y:18%;--orb-bx:10%;--orb-by:65%}
#ds-atmosphere::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 82% 12%,color-mix(in srgb,var(--ds-accent) 7%,transparent),transparent 58%),radial-gradient(ellipse at 5% 85%,color-mix(in srgb,var(--ds-accent2) 4%,transparent),transparent 50%)}
#ds-atmosphere::after{content:"";position:absolute;inset:0;background:var(--ds-text);opacity:.055;mask:url('/assets/img/deenstudy-calligraphy.webp') center/cover no-repeat;-webkit-mask:url('/assets/img/deenstudy-calligraphy.webp') center/cover no-repeat}
html[data-theme=light] #ds-atmosphere::after{opacity:.045}
/* Presentation windows keep the shared canvas, with extra contrast for text. */
@layer ds-atmosphere{html[data-theme=dark] body.ds-atmosphere-enabled:has(.ds-quran-popout){background:color-mix(in srgb,var(--ds-bg) 65%,#000)!important}}
html[data-theme=dark] body:has(.ds-quran-popout) #ds-atmosphere::after{opacity:.032}
html[data-theme=dark] body:has(.ds-quran-popout) #ds-atmosphere::before{opacity:.55}
/* Small glass droplets. Only transforms animate, not blur, layout or shaders. */
:is(#ds-atmosphere,.dsq-player-atmosphere) .ds-liquid-orb{position:absolute;left:var(--orb-x);top:var(--orb-y);width:clamp(94px,14vw,190px);aspect-ratio:1;border-radius:45% 55% 56% 44% / 53% 43% 57% 47%;opacity:.34;transform:rotate(-16deg);background:radial-gradient(ellipse at 26% 19%,color-mix(in srgb,var(--ds-text) 38%,transparent),transparent 17%),radial-gradient(ellipse at 72% 76%,color-mix(in srgb,var(--ds-accent2) 52%,transparent),transparent 30%),radial-gradient(ellipse at 66% 28%,color-mix(in srgb,var(--ds-accent) 48%,transparent),transparent 37%),radial-gradient(ellipse at 32% 65%,color-mix(in srgb,var(--ds-accent) 12%,transparent),transparent 58%);box-shadow:inset 2px 3px 5px color-mix(in srgb,var(--ds-text) 17%,transparent),inset -7px -7px 14px color-mix(in srgb,var(--ds-accent) 22%,transparent),inset 9px -2px 19px color-mix(in srgb,var(--ds-accent2) 15%,transparent);border:1px solid color-mix(in srgb,var(--ds-accent) 13%,transparent)}
:is(#ds-atmosphere,.dsq-player-atmosphere) .ds-liquid-orb::before{content:"";position:absolute;inset:8%;border-radius:inherit;background:radial-gradient(ellipse at 36% 9%,color-mix(in srgb,var(--ds-text) 25%,transparent),transparent 26%);transform:rotate(-25deg)}
:is(#ds-atmosphere,.dsq-player-atmosphere) .ds-liquid-orb:nth-child(2){left:var(--orb-bx);top:var(--orb-by);width:clamp(76px,10vw,140px);border-radius:57% 43% 45% 55% / 48% 64% 36% 52%;opacity:.28}
#ds-atmosphere .ds-liquid-orb:nth-child(3){left:66%;top:81%;width:clamp(52px,7vw,94px);opacity:.24}
html[data-theme=light] :is(#ds-atmosphere,.dsq-player-atmosphere) .ds-liquid-orb{opacity:.25}
#ds-atmosphere[data-scene="1"]{--orb-x:78%;--orb-y:48%;--orb-bx:7%;--orb-by:20%}
#ds-atmosphere[data-scene="2"]{--orb-x:6%;--orb-y:40%;--orb-bx:78%;--orb-by:75%}
#ds-atmosphere[data-scene="3"]{--orb-x:70%;--orb-y:10%;--orb-bx:4%;--orb-by:72%}
#ds-atmosphere[data-scene="4"]{--orb-x:76%;--orb-y:58%;--orb-bx:5%;--orb-by:18%}
#ds-atmosphere[data-scene="5"]{--orb-x:2%;--orb-y:24%;--orb-bx:73%;--orb-by:65%}
@media(prefers-reduced-motion:no-preference){
 #ds-atmosphere[data-motion="on"] .ds-liquid-orb{animation:ds-atmosphere-drift 22s ease-in-out infinite alternate}
 #ds-atmosphere[data-motion="on"] .ds-liquid-orb:nth-child(2){animation-duration:28s;animation-delay:-9s;animation-direction:alternate-reverse}
 #ds-atmosphere[data-motion="on"] .ds-liquid-orb:nth-child(3){animation-duration:34s;animation-delay:-16s}
 #ds-atmosphere.is-paused .ds-liquid-orb{animation-play-state:paused}
}
@keyframes ds-atmosphere-drift{0%{transform:translate3d(-2vw,-3vh,0) rotate(-16deg) scale(.94,1.04)}50%{transform:translate3d(7vw,11vh,0) rotate(9deg) scale(1.06,.96)}100%{transform:translate3d(-4vw,22vh,0) rotate(27deg) scale(.98,1.03)}}
.ds-course-directory{border:1px solid var(--ds-border);border-radius:14px;padding:12px 18px;margin-bottom:20px;background:var(--ds-card);color:var(--ds-text);font:500 13px/1.6 var(--ds-font)}
.ds-course-directory summary{cursor:pointer;min-height:24px}.ds-course-directory ul{display:flex;flex-wrap:wrap;gap:10px 24px;padding:12px 0 0 18px;margin:0}.ds-course-directory a{color:var(--ds-text);text-decoration:underline;text-underline-offset:3px}
@media print{#ds-atmosphere{display:none!important}}
/* Keep the same glass artwork, without permanent animated layers on touch
   devices or when the user requests less movement. */
@media(hover:none),(prefers-reduced-motion:reduce){#ds-atmosphere[data-motion="on"] .ds-liquid-orb{animation:none!important}}