/* Soap2Day 0.6.91 — production rollout. */

:root {
  color-scheme: light;
}

html.dark {
  color-scheme: dark;
}

html:has(.s2d26-prompt-bg) {
  background-color: light-dark(#EEF2F6, #000305) !important;
}

body:has(.s2d26-prompt-bg) {
  position: relative !important;
  isolation: isolate !important;
  min-height: 100vh !important;
  background: transparent !important;
}

body:has(.s2d26-prompt-bg):not(.s2d26-movie-page) :is(#main, #main > .container, #main .main-content, .page-category, .page-detail, .movies-list-wrap, .psyplay-api-popular-block) {
  background-color: transparent !important;
}

.s2d26-prompt-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
  isolation: isolate;
}

body:has(.s2d26-prompt-bg).s2d26-footer-v1 footer,
body:has(.s2d26-prompt-bg).s2d26-footer-v2 footer,
body:has(.s2d26-prompt-bg).s2d26-footer-v3 footer {
  --s2d26-footer-bg: light-dark(color-mix(in srgb, #EEF2F6 72%, transparent), color-mix(in srgb, #161513 72%, transparent));
  backdrop-filter: blur(20px) saturate(118%) !important;
}

html.dark body:has(.s2d26-prompt-bg--6).s2d26-footer-v1 footer,
html.dark body:has(.s2d26-prompt-bg--6).s2d26-footer-v2 footer,
html.dark body:has(.s2d26-prompt-bg--6).s2d26-footer-v3 footer {
  --s2d26-footer-bg: color-mix(in srgb, #031014 72%, transparent);
}

/* The TV-series template carries a late opaque footer paint that is absent on
   movie and individual-episode pages. Resolve the final pixels directly on
   the outer footer, then keep every inner legacy wrapper transparent. */
html body.s2d26-series-page:has(.s2d26-prompt-bg).s2d26-footer-v1 footer,
html body.s2d26-series-page:has(.s2d26-prompt-bg).s2d26-footer-v2 footer,
html body.s2d26-series-page:has(.s2d26-prompt-bg).s2d26-footer-v3 footer {
  --s2d26-footer-bg: rgba(238,242,246,.72);
  background: rgba(238,242,246,.72) !important;
  background-image: none !important;
  -webkit-backdrop-filter: blur(20px) saturate(118%) !important;
  backdrop-filter: blur(20px) saturate(118%) !important;
}

html.dark body.s2d26-series-page:has(.s2d26-prompt-bg).s2d26-footer-v1 footer,
html.dark body.s2d26-series-page:has(.s2d26-prompt-bg).s2d26-footer-v2 footer,
html.dark body.s2d26-series-page:has(.s2d26-prompt-bg).s2d26-footer-v3 footer,
html.night-mode body.s2d26-series-page:has(.s2d26-prompt-bg).s2d26-footer-v1 footer,
html.night-mode body.s2d26-series-page:has(.s2d26-prompt-bg).s2d26-footer-v2 footer,
html.night-mode body.s2d26-series-page:has(.s2d26-prompt-bg).s2d26-footer-v3 footer,
html[data-theme="dark"] body.s2d26-series-page:has(.s2d26-prompt-bg).s2d26-footer-v1 footer,
html[data-theme="dark"] body.s2d26-series-page:has(.s2d26-prompt-bg).s2d26-footer-v2 footer,
html[data-theme="dark"] body.s2d26-series-page:has(.s2d26-prompt-bg).s2d26-footer-v3 footer {
  --s2d26-footer-bg: rgba(3,16,20,.72);
  background: rgba(3,16,20,.72) !important;
}

html body.s2d26-series-page:has(.s2d26-prompt-bg) footer :is(#footer,#footer > .container,#footer > .container > .row) {
  background: transparent !important;
  background-image: none !important;
}

/* ========================================================================== 
   1 — Aurora Waves: exactly three children.
   ========================================================================== */
@property --c-aqua {
  syntax: "<color>";
  inherits: false;
  initial-value: #3BC8C4;
}

.s2d26-prompt-bg--1 {
  --c-aqua: #3BC8C4;
  transition: --c-aqua 400ms;
}

html.dark .s2d26-prompt-bg--1 {
  --c-aqua: #7FE3E0;
}

.s2d26-prompt-bg--1 > div {
  position: absolute;
  inset: 0;
}

.s2d26-aurora-base {
  z-index: 0;
  background-color: light-dark(#EEF2F6, #161513);
}

.s2d26-aurora-wash {
  z-index: 1;
  background:
    radial-gradient(circle at 14% 20%, light-dark(color-mix(in srgb, #3BC8C4 24%, transparent), color-mix(in srgb, #3BC8C4 42%, transparent)) 0%, transparent 43%),
    radial-gradient(circle at 84% 68%, light-dark(color-mix(in srgb, #7FE3E0 20%, transparent), color-mix(in srgb, #7FE3E0 34%, transparent)) 0%, transparent 46%),
    radial-gradient(circle at 53% 88%, light-dark(color-mix(in srgb, #9BEBE4 18%, transparent), color-mix(in srgb, #9BEBE4 28%, transparent)) 0%, transparent 40%);
  filter: blur(60px);
  mix-blend-mode: multiply;
  transform: scale(1.3);
}

.s2d26-aurora-turn {
  z-index: 2;
  top: 50% !important;
  left: 50% !important;
  width: 160vw;
  height: 160vh;
  background: conic-gradient(from 0deg, color-mix(in srgb, var(--c-aqua) 30%, transparent), color-mix(in srgb, #7FE3E0 22%, transparent), transparent 48%, transparent 100%);
  filter: blur(40px);
  mix-blend-mode: multiply;
  animation: s2d26-aurora-rotate 40s linear infinite;
}

html.dark .s2d26-aurora-wash,
html.dark .s2d26-aurora-turn {
  mix-blend-mode: screen;
}

@keyframes s2d26-aurora-rotate {
  from {
    transform: translate3d(-50%, -50%, 0) rotate(0deg);
  }
  to {
    transform: translate3d(-50%, -50%, 0) rotate(360deg);
  }
}

/* ========================================================================== 
   2 — Projector Beams + Film Grain: exactly three children.
   ========================================================================== */
.s2d26-prompt-bg--2 {
  --s2d26-grain-opacity: 0.04;
}

html.dark .s2d26-prompt-bg--2 {
  --s2d26-grain-opacity: 0.06;
}

.s2d26-prompt-bg--2::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background: transparent;
}

html.dark .s2d26-prompt-bg--2::before {
  background: radial-gradient(circle at 50% 0%, color-mix(in srgb, #3BC8C4 8%, transparent), transparent 42%);
}

.s2d26-prompt-bg--2 > div {
  position: absolute;
}

.s2d26-projector-base {
  z-index: 0;
  inset: 0;
  background-color: light-dark(#EEF2F6, #161513);
}

.s2d26-projector-beams {
  z-index: 2;
  inset: -15%;
}

.s2d26-projector-beams::before,
.s2d26-projector-beams::after {
  content: "";
  position: absolute;
  inset: 0;
  filter: blur(40px);
}

.s2d26-projector-beams::before {
  background: linear-gradient(115deg, transparent calc(50% - 15vw), light-dark(color-mix(in srgb, #3BC8C4 5%, transparent), color-mix(in srgb, #3BC8C4 8%, transparent)) 50%, transparent calc(50% + 15vw));
  animation: s2d26-projector-beam-a 14s ease-in-out infinite alternate;
}

.s2d26-projector-beams::after {
  background: linear-gradient(115deg, transparent calc(50% - 9vw), light-dark(color-mix(in srgb, #3BC8C4 7%, transparent), color-mix(in srgb, #3BC8C4 10%, transparent)) 50%, transparent calc(50% + 9vw));
  animation: s2d26-projector-beam-b 22s ease-in-out infinite alternate;
}

.s2d26-projector-grain {
  z-index: 3;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 128px 128px;
  opacity: var(--s2d26-grain-opacity);
  animation: s2d26-projector-grain 0.8s steps(4) infinite;
}

@keyframes s2d26-projector-beam-a {
  from {
    transform: translate3d(-12%, 0, 0);
  }
  to {
    transform: translate3d(12%, 0, 0);
  }
}

@keyframes s2d26-projector-beam-b {
  from {
    transform: translate3d(14%, 0, 0);
  }
  to {
    transform: translate3d(-14%, 0, 0);
  }
}

@keyframes s2d26-projector-grain {
  0% {
    transform: translate3d(-128px, -128px, 0);
  }
  25% {
    transform: translate3d(128px, -128px, 0);
  }
  50% {
    transform: translate3d(128px, 128px, 0);
  }
  75% {
    transform: translate3d(-128px, 128px, 0);
  }
  100% {
    transform: translate3d(-128px, -128px, 0);
  }
}

/* ========================================================================== 
   3 — Drifting Bokeh Particles: exactly twelve children and four tracks.
   ========================================================================== */
.s2d26-prompt-bg--3 {
  --s2d26-particle-cap: 0.15;
  background-color: light-dark(#EEF2F6, #161513);
}

html.dark .s2d26-prompt-bg--3 {
  --s2d26-particle-cap: 0.30;
}

.s2d26-bokeh {
  position: absolute;
  bottom: -260px;
  left: var(--s2d26-bokeh-left);
  width: var(--s2d26-bokeh-size);
  height: var(--s2d26-bokeh-size);
  border-radius: 50%;
  background-color: var(--s2d26-bokeh-color);
  filter: blur(calc(var(--s2d26-bokeh-size) / 6));
  box-shadow: 0 0 44px light-dark(color-mix(in srgb, #3BC8C4 0%, transparent), color-mix(in srgb, #3BC8C4 25%, transparent));
  animation-duration: var(--s2d26-bokeh-duration);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-delay: var(--s2d26-bokeh-delay);
}

.s2d26-bokeh--1 { --s2d26-bokeh-left: 2%; --s2d26-bokeh-size: 60px; --s2d26-bokeh-color: #3BC8C4; --s2d26-bokeh-duration: 20s; --s2d26-bokeh-delay: -7s; --s2d26-bokeh-rest: 8%; animation-name: s2d26-bokeh-rise-1; }
.s2d26-bokeh--2 { --s2d26-bokeh-left: 11%; --s2d26-bokeh-size: 120px; --s2d26-bokeh-color: #7FE3E0; --s2d26-bokeh-duration: 37s; --s2d26-bokeh-delay: -29s; --s2d26-bokeh-rest: 63%; animation-name: s2d26-bokeh-rise-2; }
.s2d26-bokeh--3 { --s2d26-bokeh-left: 21%; --s2d26-bokeh-size: 90px; --s2d26-bokeh-color: light-dark(#FFFFFF, #7FE3E0); --s2d26-bokeh-duration: 29s; --s2d26-bokeh-delay: -13s; --s2d26-bokeh-rest: 31%; animation-name: s2d26-bokeh-rise-3; }
.s2d26-bokeh--4 { --s2d26-bokeh-left: 31%; --s2d26-bokeh-size: 200px; --s2d26-bokeh-color: #3BC8C4; --s2d26-bokeh-duration: 56s; --s2d26-bokeh-delay: -47s; --s2d26-bokeh-rest: 76%; animation-name: s2d26-bokeh-rise-4; }
.s2d26-bokeh--5 { --s2d26-bokeh-left: 42%; --s2d26-bokeh-size: 160px; --s2d26-bokeh-color: #7FE3E0; --s2d26-bokeh-duration: 43s; --s2d26-bokeh-delay: -21s; --s2d26-bokeh-rest: 17%; animation-name: s2d26-bokeh-rise-1; }
.s2d26-bokeh--6 { --s2d26-bokeh-left: 51%; --s2d26-bokeh-size: 240px; --s2d26-bokeh-color: light-dark(#FFFFFF, #3BC8C4); --s2d26-bokeh-duration: 60s; --s2d26-bokeh-delay: -52s; --s2d26-bokeh-rest: 49%; animation-name: s2d26-bokeh-rise-2; }
.s2d26-bokeh--7 { --s2d26-bokeh-left: 61%; --s2d26-bokeh-size: 75px; --s2d26-bokeh-color: #3BC8C4; --s2d26-bokeh-duration: 25s; --s2d26-bokeh-delay: -18s; --s2d26-bokeh-rest: 84%; animation-name: s2d26-bokeh-rise-3; }
.s2d26-bokeh--8 { --s2d26-bokeh-left: 70%; --s2d26-bokeh-size: 135px; --s2d26-bokeh-color: #7FE3E0; --s2d26-bokeh-duration: 46s; --s2d26-bokeh-delay: -34s; --s2d26-bokeh-rest: 38%; animation-name: s2d26-bokeh-rise-4; }
.s2d26-bokeh--9 { --s2d26-bokeh-left: 79%; --s2d26-bokeh-size: 180px; --s2d26-bokeh-color: light-dark(#FFFFFF, #7FE3E0); --s2d26-bokeh-duration: 52s; --s2d26-bokeh-delay: -41s; --s2d26-bokeh-rest: 69%; animation-name: s2d26-bokeh-rise-1; }
.s2d26-bokeh--10 { --s2d26-bokeh-left: 88%; --s2d26-bokeh-size: 105px; --s2d26-bokeh-color: #3BC8C4; --s2d26-bokeh-duration: 34s; --s2d26-bokeh-delay: -26s; --s2d26-bokeh-rest: 24%; animation-name: s2d26-bokeh-rise-2; }
.s2d26-bokeh--11 { --s2d26-bokeh-left: 96%; --s2d26-bokeh-size: 220px; --s2d26-bokeh-color: #7FE3E0; --s2d26-bokeh-duration: 58s; --s2d26-bokeh-delay: -33s; --s2d26-bokeh-rest: 55%; animation-name: s2d26-bokeh-rise-3; }
.s2d26-bokeh--12 { --s2d26-bokeh-left: 56%; --s2d26-bokeh-size: 150px; --s2d26-bokeh-color: light-dark(#FFFFFF, #3BC8C4); --s2d26-bokeh-duration: 40s; --s2d26-bokeh-delay: -11s; --s2d26-bokeh-rest: 91%; animation-name: s2d26-bokeh-rise-4; }

@keyframes s2d26-bokeh-rise-1 {
  0% { opacity: 0; transform: translate3d(-20px, 0, 0); }
  18%, 78% { opacity: var(--s2d26-particle-cap); }
  100% { opacity: 0; transform: translate3d(35px, calc(-100vh - 520px), 0); }
}

@keyframes s2d26-bokeh-rise-2 {
  0% { opacity: 0; transform: translate3d(30px, 0, 0); }
  16%, 80% { opacity: var(--s2d26-particle-cap); }
  100% { opacity: 0; transform: translate3d(-40px, calc(-100vh - 520px), 0); }
}

@keyframes s2d26-bokeh-rise-3 {
  0% { opacity: 0; transform: translate3d(-38px, 0, 0); }
  20%, 76% { opacity: var(--s2d26-particle-cap); }
  100% { opacity: 0; transform: translate3d(18px, calc(-100vh - 520px), 0); }
}

@keyframes s2d26-bokeh-rise-4 {
  0% { opacity: 0; transform: translate3d(40px, 0, 0); }
  14%, 82% { opacity: var(--s2d26-particle-cap); }
  100% { opacity: 0; transform: translate3d(-22px, calc(-100vh - 520px), 0); }
}

/* ========================================================================== 
   4 — Mesh Flow: one child, four registered focal-point pairs.
   ========================================================================== */
@property --fx1 { syntax: "<percentage>"; inherits: false; initial-value: 50%; }
@property --fy1 { syntax: "<percentage>"; inherits: false; initial-value: 50%; }
@property --fx2 { syntax: "<percentage>"; inherits: false; initial-value: 50%; }
@property --fy2 { syntax: "<percentage>"; inherits: false; initial-value: 50%; }
@property --fx3 { syntax: "<percentage>"; inherits: false; initial-value: 50%; }
@property --fy3 { syntax: "<percentage>"; inherits: false; initial-value: 50%; }
@property --fx4 { syntax: "<percentage>"; inherits: false; initial-value: 50%; }
@property --fy4 { syntax: "<percentage>"; inherits: false; initial-value: 50%; }

.s2d26-prompt-bg--4 {
  background-color: light-dark(#EEF2F6, #161513);
}

.s2d26-mesh-flow {
  --fx1: 18%; --fy1: 22%;
  --fx2: 82%; --fy2: 28%;
  --fx3: 68%; --fy3: 82%;
  --fx4: 27%; --fy4: 74%;
  --s2d26-mesh-stop: 44%;
  position: absolute;
  inset: -5%;
  background:
    radial-gradient(circle at var(--fx1) var(--fy1), light-dark(color-mix(in srgb, #3BC8C4 34%, transparent), color-mix(in srgb, #3BC8C4 52%, transparent)) 0%, transparent var(--s2d26-mesh-stop)),
    radial-gradient(circle at var(--fx2) var(--fy2), light-dark(color-mix(in srgb, #9BEBE4 28%, transparent), color-mix(in srgb, #9BEBE4 40%, transparent)) 0%, transparent var(--s2d26-mesh-stop)),
    radial-gradient(circle at var(--fx3) var(--fy3), light-dark(color-mix(in srgb, #6EC6E8 25%, transparent), color-mix(in srgb, #6EC6E8 38%, transparent)) 0%, transparent var(--s2d26-mesh-stop)),
    radial-gradient(circle at var(--fx4) var(--fy4), light-dark(color-mix(in srgb, #7FE3E0 32%, transparent), color-mix(in srgb, #7FE3E0 48%, transparent)) 0%, transparent var(--s2d26-mesh-stop));
  contain: paint;
}

html.dark .s2d26-mesh-flow {
  --s2d26-mesh-stop: 36%;
}

@supports at-rule(@property) {
  .s2d26-mesh-flow {
    animation: s2d26-mesh-1 25s linear infinite alternate, s2d26-mesh-2 37s linear infinite alternate, s2d26-mesh-3 43s linear infinite alternate, s2d26-mesh-4 31s linear infinite alternate;
  }

  @keyframes s2d26-mesh-1 {
    0% { --fx1: 18%; --fy1: 22%; }
    50% { --fx1: 54%; --fy1: 35%; }
    100% { --fx1: 76%; --fy1: 68%; }
  }

  @keyframes s2d26-mesh-2 {
    0% { --fx2: 82%; --fy2: 28%; }
    50% { --fx2: 46%; --fy2: 76%; }
    100% { --fx2: 24%; --fy2: 44%; }
  }

  @keyframes s2d26-mesh-3 {
    0% { --fx3: 68%; --fy3: 82%; }
    50% { --fx3: 34%; --fy3: 56%; }
    100% { --fx3: 58%; --fy3: 18%; }
  }

  @keyframes s2d26-mesh-4 {
    0% { --fx4: 27%; --fy4: 74%; }
    50% { --fx4: 72%; --fy4: 52%; }
    100% { --fx4: 44%; --fy4: 16%; }
  }

  @media (prefers-reduced-motion: reduce) {
    .s2d26-mesh-flow {
      animation: none;
    }
  }
}

/* ========================================================================== 
   5 — Parallax Wave Layers: exactly three children and two keyframes.
   ========================================================================== */
.s2d26-prompt-bg--5 {
  background-color: light-dark(#EEF2F6, #161513);
  animation: s2d26-wave-zoom 60s ease-in-out infinite alternate;
}

.s2d26-prompt-bg--5::before {
  content: "";
  position: absolute;
  inset: 0;
  background: transparent;
}

html.dark .s2d26-prompt-bg--5::before {
  background: radial-gradient(circle at 50% 0%, color-mix(in srgb, #3BC8C4 12%, transparent), transparent 42%);
}

.s2d26-wave {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 200%;
  height: 40%;
  background-repeat: repeat-x;
  background-size: 50% 100%;
  animation-name: s2d26-wave-drift;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.s2d26-wave--back {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 500 100'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop stop-color='%233BC8C4' stop-opacity='.25'/%3E%3Cstop offset='1' stop-color='%233BC8C4' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0,40 C120,80 240,0 360,40 C420,60 480,20 500,40 L500,100 L0,100 Z' fill='url(%23g)'/%3E%3C/svg%3E");
  animation-duration: 40s;
}

.s2d26-wave--mid {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 500 100'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop stop-color='%233BC8C4' stop-opacity='.30'/%3E%3Cstop offset='1' stop-color='%233BC8C4' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0,40 C120,80 240,0 360,40 C420,60 480,20 500,40 L500,100 L0,100 Z' fill='url(%23g)'/%3E%3C/svg%3E");
  animation-duration: 27s;
}

.s2d26-wave--front {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 500 100'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop stop-color='%233BC8C4' stop-opacity='.40'/%3E%3Cstop offset='1' stop-color='%233BC8C4' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0,40 C120,80 240,0 360,40 C420,60 480,20 500,40 L500,100 L0,100 Z' fill='url(%23g)'/%3E%3C/svg%3E");
  animation-duration: 18s;
}

@keyframes s2d26-wave-drift {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-50%, 0, 0);
  }
}

@keyframes s2d26-wave-zoom {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.05);
  }
}

/* ========================================================================== 
   6 — selected GPU scene: Canvas 2D texture + WebGL2 presentation.
   Light renders refractive soap bubbles; dark renders turquoise Cinema Grid.
   The three CSS layers are the instant/no-WebGL fallback only.
   ========================================================================== */
.s2d26-prompt-bg--6 {
  --s2d26-dot-color: color-mix(in srgb, #9AA7B4 10%, transparent);
  --s2d26-dot-radius: 1px;
  background: #EEF2F6;
}

html.dark .s2d26-prompt-bg--6,
html.night-mode .s2d26-prompt-bg--6,
html[data-theme="dark"] .s2d26-prompt-bg--6 {
  --s2d26-dot-color: color-mix(in srgb, #FFFFFF 2.6%, transparent);
  --s2d26-dot-radius: 1.5px;
  background: #000305;
}

.s2d26-prompt-bg--6 > div {
  position: absolute;
  inset: 0;
  transition: opacity 700ms ease;
}

.s2d26-canvas-background {
  position: absolute;
  z-index: 4;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 900ms cubic-bezier(.2, .72, .22, 1);
}

.s2d26-prompt-bg--6.is-gpu-ready .s2d26-canvas-background {
  opacity: 1;
}

.s2d26-prompt-bg--6.is-gpu-ready > div {
  opacity: 0;
}

.s2d26-grid-base {
  z-index: 0;
  background-color: #EEF2F6;
  background-image:
    radial-gradient(circle at 12% 18%, color-mix(in srgb, #7FE3E0 25%, transparent), transparent 31%),
    radial-gradient(circle at 84% 74%, color-mix(in srgb, #3BC8C4 18%, transparent), transparent 36%);
}

html.dark .s2d26-grid-base,
html.night-mode .s2d26-grid-base,
html[data-theme="dark"] .s2d26-grid-base {
  background-color: #000305;
  background-image:
    radial-gradient(circle at 18% 18%, color-mix(in srgb, #3BC8C4 12%, transparent), transparent 46%),
    radial-gradient(circle at 82% 72%, color-mix(in srgb, #7FE3E0 8%, transparent), transparent 52%);
}

.s2d26-grid-dots {
  z-index: 1;
  background:
    radial-gradient(circle at 18% 26%, transparent 0 8.2vw, color-mix(in srgb, #7FE3E0 34%, transparent) 8.35vw, transparent 8.7vw),
    radial-gradient(circle at 48% 68%, transparent 0 11vw, color-mix(in srgb, #3BC8C4 26%, transparent) 11.15vw, transparent 11.6vw),
    radial-gradient(circle at 78% 22%, transparent 0 6.8vw, color-mix(in srgb, #9BEBE4 32%, transparent) 6.95vw, transparent 7.3vw),
    radial-gradient(circle at 88% 82%, transparent 0 9vw, color-mix(in srgb, #7FE3E0 24%, transparent) 9.2vw, transparent 9.55vw);
}

html.dark .s2d26-grid-dots,
html.night-mode .s2d26-grid-dots,
html[data-theme="dark"] .s2d26-grid-dots {
  background-image: radial-gradient(circle, var(--s2d26-dot-color) 0 var(--s2d26-dot-radius), transparent calc(var(--s2d26-dot-radius) + 0.1px));
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
}

.s2d26-grid-sweep {
  z-index: 2;
  inset: -20% !important;
  display: none;
  background: linear-gradient(115deg, transparent calc(50% - 17.5vw), color-mix(in srgb, #3BC8C4 8%, transparent) 50%, transparent calc(50% + 17.5vw));
  filter: blur(30px);
  animation: s2d26-grid-sweep 12s linear infinite;
}

html.dark .s2d26-grid-sweep {
  display: block;
}

@keyframes s2d26-grid-sweep {
  0% {
    transform: translate3d(-40vw, 0, 0);
  }
  30%, 100% {
    transform: translate3d(140vw, 0, 0);
  }
}

/* Every moving variant retains a complete static composition. */
@media (prefers-reduced-motion: reduce) {
  .s2d26-aurora-turn,
  .s2d26-projector-beams::before,
  .s2d26-projector-beams::after,
  .s2d26-projector-grain,
  .s2d26-wave,
  .s2d26-prompt-bg--5 {
    animation: none;
  }

  .s2d26-bokeh {
    top: var(--s2d26-bokeh-rest);
    bottom: auto;
    opacity: calc(var(--s2d26-particle-cap) * 0.62);
    transform: none;
    animation: none;
  }

  .s2d26-grid-sweep {
    display: none;
    animation: none;
  }
}

@media (max-width: 767.98px) {
  .s2d26-bokeh:nth-child(3n) {
    display: none;
  }

  .s2d26-wave {
    height: 36%;
  }
}

/* S2D_ANDROID_GPU_SAFE_20260916
 * Mobile Android keeps an animated WebGL background with a conservative GPU
 * profile. The light theme is aurora-only; the old bubble/ring layer is gone. */

/* Light CSS fallback: no circles. It remains gently animated if WebGL is lost. */
html:not(.dark):not(.night-mode):not([data-theme="dark"]) .s2d26-prompt-bg--6:not(.is-gpu-ready) .s2d26-grid-base {
  background-size: 118% 118%, 122% 122%;
  animation: s2d26-light-aurora-fallback 18s ease-in-out infinite alternate;
}

.s2d26-prompt-bg--6 .s2d26-grid-dots {
  display: none;
}

html.dark .s2d26-prompt-bg--6 .s2d26-grid-dots,
html.night-mode .s2d26-prompt-bg--6 .s2d26-grid-dots,
html[data-theme="dark"] .s2d26-prompt-bg--6 .s2d26-grid-dots {
  display: block;
}

@keyframes s2d26-light-aurora-fallback {
  0%   { background-position: 0% 0%, 100% 100%; }
  100% { background-position: 8% 5%, 92% 94%; }
}

/* Avoid stacking a large live blur surface over the full-screen WebGL layer. */
html.s2d26-android-gpu-safe body:has(.s2d26-prompt-bg) footer {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* Context-loss fallback stays animated but avoids the costliest blur. */
html.s2d26-android-gpu-safe .s2d26-prompt-bg--6:not(.is-gpu-ready) .s2d26-grid-sweep {
  filter: blur(12px);
}

@media (prefers-reduced-motion: reduce) {
  html:not(.dark):not(.night-mode):not([data-theme="dark"]) .s2d26-prompt-bg--6:not(.is-gpu-ready) .s2d26-grid-base {
    animation: none;
  }
}