/* Atmosphere: depth for every public page, tuned in one place.

   Loaded on the homepage, the Learn library, guides, calculators, state and sportsbook pages,
   docs, help, company and legal pages, sign-in and support, always just before vo-theme.css. The workspace tools do
   not load it.

   The parts, all driven by the tokens below:
   - page light   a faint green light near the top of every page, painted on the page background so nothing clips it
   - .atm         a section surface: a full-width layer behind the section (so it reaches both window edges even when
                  the section is a narrow column) carrying its tone, up to two glows, an edge line and a vignette,
                  plus a second layer for texture
   - tones        .atm-tone-1 / .atm-tone-2 / .atm-tone-deep, for rhythm between sections
   - glows        .atm-glow-l / -c / -r (one point), .atm-glow2-l / -c / -r (an optional second), .atm-glow-top /
                  -bottom to move the first towards the section's heading or its end. Each glow eases to zero inside
                  its own box, so no edge ever cuts it.
   - texture      .atm-grain (fine noise) or .atm-dots, masked to fade out towards the edges; .atm-tex-l / -r move it
   - .atm-vignette  darkens the outer edges of a section
   - .atm-edge      a 1px green line across the top of a section, brightest in the middle
   - .atm-lift      a 1px top highlight that lifts a card or panel off the background
   Green (#2BD07F, the "Get started" green) is the only accent. */

:root {
  --atm-green: 43 208 127;                  /* #2BD07F */
  /* Tones: the page base, and washes laid over it for bands. The washes are translucent so light from a neighbouring
     section can reach through them; on the base they read as #0c0c0e, #101012 and #060607. */
  --atm-tone-0: #09090b;
  --atm-tone-1: rgb(255 255 255/.012);
  --atm-tone-2: rgb(255 255 255/.03);
  --atm-tone-deep: rgb(0 0 0/.35);
  /* How far a section's light may spill past its top and bottom edges (.atm-spill). */
  --atm-spill: 260px;
  /* Tones fade in and out over this distance at a section's top and bottom, so bands blend instead of starting on a
     line. .atm-join-top / .atm-join-bottom drop the fade where a section continues its neighbour's band. */
  --atm-fade: 220px;
  /* Section glows. Peak opacity at the centre, then 78% / 45% / 15% of it at 35% / 60% / 82% of the radius. */
  --atm-glow: .08;
  --atm-glow-2: .06;                        /* the optional second glow */
  --atm-glow-rx: 44%;                       /* horizontal radius, as a share of the window width */
  --atm-glow-reach: 34%;                    /* vertical radius of a glow moved to the top or bottom (share of the section) */
  /* How much of the light behind them homepage cards let through (0 = solid). */
  --atm-card-see: .14;
  /* The page light, near the top of every page. */
  --atm-page-glow: .08;
  --atm-page-glow-w: 900px;
  --atm-page-glow-h: 560px;
  --atm-page-glow-x: 50%;
  --atm-page-glow-y: 140px;
  /* Texture. */
  --atm-grain: .09;                         /* opacity of the grain layer */
  --atm-grain-size: 220px;                  /* grain tile */
  --atm-dots: .06;
  --atm-dots-gap: 28px;
  /* Vignette, edge line and card lift. */
  --atm-vignette: .38;
  --atm-edge: .14;
  --atm-lift: rgb(255 255 255/.08);
}

/* ------------------------------------------------------------------ the accent: green, on every public page
   (html with an ID in the selector, so these win over vo-theme's :root, which loads later) */
html:is(:root,#atm-a) {
  --vo-brand:#2BD07F; --vo-brand-hi:#3fe090; --vo-brand-text:#5ce5a3; --vo-brand-pale:#b6f5d4;
  --vo-brand-soft:rgb(43 208 127/.14); --vo-brand-line:rgb(43 208 127/.45);
  --vo-grad-btn:linear-gradient(180deg,#3fe090 0%,#2BD07F 100%);
  --vo-grad-text:linear-gradient(100deg,#b6f5d4 0%,#5ce5a3 55%,#2BD07F 100%);
  --vo-glow:0 0 0 1px rgb(43 208 127/.3),0 6px 18px -10px rgb(43 208 127/.28);
  --sl-lime:#2BD07F; --sl-lime-2:#12A05C; --sl-lime-3:#5ce5a3; --sl-lime-ink:#04140b;
  --sl-lime-wash:rgb(43 208 127/.14); --sl-lime-line:rgb(43 208 127/.45);
  --sl-brand:#2BD07F; --sl-brand-hi:#3fe090; --sl-brand-text:#5ce5a3; --sl-brand-pale:#b6f5d4;
  --sl-brand-gradient:linear-gradient(180deg,#3fe090 0%,#2BD07F 100%);
  --sl-brand-glow:0 0 0 1px rgb(43 208 127/.3),0 6px 18px -10px rgb(43 208 127/.28);
  accent-color:#2BD07F;
}
/* Buttons: flat, like the workspace's. The main action is solid green with dark text — no gradient, glow, inner
   highlight or lift; the second is a hairline outline. (Four IDs: these win over vo-theme and the page sheets.) */
html:is(:root,#atm-a) body:is(*,#atm-b):is(*,#atm-c):is(*,#atm-d) :is(.home-button, .tool-hero-primary, .help-button, .hd-cta, .pb-cta, .learn-beginner-cta, .bg-button:not(.bg-button--ghost), .settings-button:not(.secondary, .danger, .settings-text-button), .account-primary, .account-submit, .home-plan.is-featured .home-plan-action):not(.home-button-ghost, .is-ghost, .is-secondary, .secondary, :disabled) {
  border:0 !important; border-radius:10px !important; background:#2BD07F !important; color:#04140b !important; box-shadow:none !important; filter:none !important; transform:none !important;
  font-weight:650 !important; letter-spacing:-.01em !important; text-shadow:none !important; transition:background-color .15s ease !important;
}
html:is(:root,#atm-a) body:is(*,#atm-b):is(*,#atm-c):is(*,#atm-d) :is(.home-button, .tool-hero-primary, .help-button, .hd-cta, .pb-cta, .learn-beginner-cta, .bg-button:not(.bg-button--ghost), .settings-button:not(.secondary, .danger, .settings-text-button), .account-primary, .account-submit, .home-plan.is-featured .home-plan-action):not(.home-button-ghost, .is-ghost, .is-secondary, .secondary, :disabled):hover { background:#46dd93 !important; box-shadow:none !important; filter:none !important; transform:none !important; }
html:is(:root,#atm-a) body:is(*,#atm-b):is(*,#atm-c):is(*,#atm-d) :is(.home-button, .tool-hero-primary, .help-button, .hd-cta, .pb-cta, .learn-beginner-cta, .bg-button:not(.bg-button--ghost), .settings-button:not(.secondary, .danger, .settings-text-button), .account-primary, .account-submit, .home-plan.is-featured .home-plan-action):not(.home-button-ghost, .is-ghost, .is-secondary, .secondary, :disabled):active { background:#24b86f !important; }
html:is(:root,#atm-a) body:is(*,#atm-b):is(*,#atm-c):is(*,#atm-d) :is(.home-button-ghost, .home-button.is-ghost, .home-button.secondary, .home-plan:not(.is-featured) .home-plan-action, .bg-button--ghost) {
  border:1px solid rgb(255 255 255/.14) !important; border-radius:10px !important; background:transparent !important; color:#f4f4f5 !important; box-shadow:none !important; filter:none !important; transform:none !important;
  font-weight:650 !important; letter-spacing:-.01em !important; backdrop-filter:none !important; transition:background-color .15s ease, border-color .15s ease !important;
}
html:is(:root,#atm-a) body:is(*,#atm-b):is(*,#atm-c):is(*,#atm-d) :is(.home-button-ghost, .home-button.is-ghost, .home-button.secondary, .home-plan:not(.is-featured) .home-plan-action, .bg-button--ghost):hover { border-color:rgb(255 255 255/.24) !important; background:rgb(255 255 255/.05) !important; transform:none !important; }
html:is(:root,#atm-a) body:is(*,#atm-b):is(*,#atm-c):is(*,#atm-d) :is(.home-button, .home-plan-action, .help-button, .hd-cta, .pb-cta) :is(svg, .ui-icon, [data-icon]) { transition:transform .15s ease !important; }
html:is(:root,#atm-a) body:is(*,#atm-b):is(*,#atm-c):is(*,#atm-d) :is(.home-button, .home-plan-action, .help-button, .hd-cta, .pb-cta):hover :is(svg, .ui-icon, [data-icon]) { transform:translateX(2px) !important; }
@media (prefers-reduced-motion: reduce) { html:is(:root,#atm-a) body:is(*,#atm-b):is(*,#atm-c):is(*,#atm-d) :is(.home-button, .home-plan-action, .help-button, .hd-cta, .pb-cta):hover :is(svg, .ui-icon, [data-icon]) { transform:none !important; } }
html:is(:root,#atm-a) body:is(*,#atm-b):is(*,#atm-c):is(*,#atm-d) :is(.home-button, .tool-hero-primary, .help-button, .hd-cta, .pb-cta, .learn-beginner-cta, .bg-button, .account-primary) :is(svg, .ui-icon) { color:inherit; }
::selection { background:rgb(var(--atm-green)/.34); color:#fff; }
/* Skip links sit on the green too. */
html:is(:root,#atm-a) body :is(.skip-link, .account-skip) { color:#04140b !important; }
html body :where(a, button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"])):focus-visible { outline-color:#2BD07F; }
/* The cookie banner's stylesheet is shared with the workspace, so its green lives here. */
html:is(:root,#atm-a) body .vo-consent .vo-consent-accept { border-color:#2BD07F !important; background:#2BD07F !important; color:#04140b !important; }
html:is(:root,#atm-a) body .vo-consent .vo-consent-accept:hover { background:#5ce5a3 !important; border-color:#5ce5a3 !important; }
html:is(:root,#atm-a) body .vo-consent a { color:#5ce5a3 !important; }

/* ------------------------------------------------------------------ section labels: a word, not a pill
   Small green capitals in the label voice, with no capsule, border or dot. (The homepage gives each label an icon.) */
html:is(:root,#atm-a) body:is(*,#atm-b):is(*,#atm-c):not(.sl-landing) :is(.sl-kicker, .home-feature-label, .learn-kicker, .info-kicker, .bet-eyebrow, .bet-hero-kicker) {
  padding:0 !important; border:0 !important; border-radius:0 !important; background:none !important; box-shadow:none !important; color:var(--vo-brand-text) !important;
}
html:is(:root,#atm-a) body:is(*,#atm-b):is(*,#atm-c):not(.sl-landing) :is(.sl-kicker, .home-feature-label, .learn-kicker, .info-kicker, .bet-eyebrow, .bet-hero-kicker)::before { display:none !important; }

/* ------------------------------------------------------------------ the page light
   On the page background itself (behind everything, never clipped), so pages with the site header get it for free.
   A page moves it with --atm-page-glow-x (Learn, calculators and company pages put it behind their left-aligned
   headings). */
html:is(:root,#atm-a):is(:root,#atm-b):is(:root,#atm-c):is(:root,#atm-d):has(body .vo-site-header) {
  background:
    radial-gradient(ellipse var(--atm-page-glow-w) var(--atm-page-glow-h) at var(--atm-page-glow-x) var(--atm-page-glow-y),
      rgb(var(--atm-green)/var(--atm-page-glow)) 0%, rgb(var(--atm-green)/calc(var(--atm-page-glow) * .78)) 35%,
      rgb(var(--atm-green)/calc(var(--atm-page-glow) * .45)) 60%, rgb(var(--atm-green)/calc(var(--atm-page-glow) * .15)) 82%, rgb(var(--atm-green)/0) 100%)
      no-repeat 0 0 / 100% calc(var(--atm-page-glow-y) + var(--atm-page-glow-h)),
    var(--atm-tone-0);
}
html:is(:root,#atm-a) body:is(*,#atm-b):is(*,#atm-c):is(*,#atm-d):has(.vo-site-header) { background:transparent !important; }
html:has(body:is(.learn-page, .betting-pages, .info-page)) { --atm-page-glow-x: 26%; }
html:has(body.help-page) { --atm-page-glow-x: 32%; }
@media (max-width:760px) { :root { --atm-page-glow-w: 640px; --atm-page-glow-h: 420px; --atm-page-glow-y: 100px; } html:has(body:is(.learn-page, .betting-pages, .info-page, .help-page)) { --atm-page-glow-x: 40%; } }

/* ------------------------------------------------------------------ section surfaces */
/* The layers reach the window's edges from sections that are not always centred (docs); the page
   clips anything past the window's sides instead of scrolling sideways. */
html:has(body .vo-site-header) { overflow-x:clip; }
.atm {
  position:relative;
  --_spill:0px;
  --_ft:var(--atm-fade); --_fb:var(--atm-fade);
  --_gy:50%; --_gry:50%;
  --_g2y:calc(100% - var(--atm-glow-reach)); --_g2ry:var(--atm-glow-reach);
}
/* The layer reaches from the left edge of the window to the right, whatever the width of the section itself. With
   .atm-spill it also reaches past the section's top and bottom, so its light fades out over the neighbours instead of
   stopping at the section's edge; the tone, edge line and vignette stay inside the section. */
.atm::before, .atm::after {
  content:''; position:absolute; top:0; bottom:0; left:calc(50% - 50vw); z-index:-1; width:100vw; pointer-events:none;
}
.atm::before {
  top:calc(-1 * var(--_spill)); bottom:calc(-1 * var(--_spill));
  background-image:var(--_edge, none), var(--_vig, none), var(--_vig2, none), var(--_g1, none), var(--_g2, none), linear-gradient(180deg, transparent 0, var(--atm-tone, transparent) var(--_ft), var(--atm-tone, transparent) calc(100% - var(--_fb)), transparent 100%);
  background-repeat:no-repeat;
  background-size:100% 1px, 26% calc(100% - 2 * var(--_spill)), 26% calc(100% - 2 * var(--_spill)), 100% 100%, 100% 100%, 100% calc(100% - 2 * var(--_spill));
  background-position:0 var(--_spill), 0 var(--_spill), 100% var(--_spill), 0 0, 0 0, 0 var(--_spill);
}
.atm-spill { --_spill:var(--atm-spill); }
.atm-join-top { --_ft:0px; }
.atm-join-bottom { --_fb:0px; }
/* A quieter light for a section that sits close to others. */
.atm-soft { --atm-glow:.05; --atm-glow-2:.04; }
.atm::after {
  background-image:var(--_tex, none); background-size:var(--_tex-size, auto); background-repeat:repeat;
  opacity:var(--_tex-o, 0);
  -webkit-mask-image:radial-gradient(ellipse 56% 62% at var(--_tx, 50%) var(--_ty, 42%), #000 0%, rgb(0 0 0/.55) 45%, transparent 100%), linear-gradient(180deg, transparent 0, #000 var(--atm-fade), #000 calc(100% - var(--atm-fade)), transparent 100%);
  mask-image:radial-gradient(ellipse 56% 62% at var(--_tx, 50%) var(--_ty, 42%), #000 0%, rgb(0 0 0/.55) 45%, transparent 100%), linear-gradient(180deg, transparent 0, #000 var(--atm-fade), #000 calc(100% - var(--atm-fade)), transparent 100%);
  -webkit-mask-composite:source-in; mask-composite:intersect;
}

/* Tones */
.atm-tone-1 { --atm-tone:var(--atm-tone-1); }
.atm-tone-2 { --atm-tone:var(--atm-tone-2); }
.atm-tone-deep { --atm-tone:var(--atm-tone-deep); }

/* Glows. The first sits at the section's vertical middle (radius 50%, so it reaches zero exactly at the top and
   bottom edges), or towards its top or bottom; the second sits towards the bottom, a little weaker. */
.atm-glow-top { --_gy:var(--atm-glow-reach); --_gry:var(--atm-glow-reach); }
.atm-glow-bottom { --_gy:calc(100% - var(--atm-glow-reach)); --_gry:var(--atm-glow-reach); }
.atm-glow-l, .atm-glow-c, .atm-glow-r {
  --_g1:radial-gradient(ellipse var(--atm-glow-rx) var(--_gry) at var(--_gx) var(--_gy),
    rgb(var(--atm-green)/var(--atm-glow)) 0%, rgb(var(--atm-green)/calc(var(--atm-glow) * .78)) 35%,
    rgb(var(--atm-green)/calc(var(--atm-glow) * .45)) 60%, rgb(var(--atm-green)/calc(var(--atm-glow) * .15)) 82%, rgb(var(--atm-green)/0) 100%);
}
.atm-glow-l { --_gx:18%; }
.atm-glow-c { --_gx:50%; }
.atm-glow-r { --_gx:82%; }
.atm-glow2-l, .atm-glow2-c, .atm-glow2-r {
  --_g2:radial-gradient(ellipse var(--atm-glow-rx) var(--_g2ry) at var(--_g2x) var(--_g2y),
    rgb(var(--atm-green)/var(--atm-glow-2)) 0%, rgb(var(--atm-green)/calc(var(--atm-glow-2) * .78)) 35%,
    rgb(var(--atm-green)/calc(var(--atm-glow-2) * .45)) 60%, rgb(var(--atm-green)/calc(var(--atm-glow-2) * .15)) 82%, rgb(var(--atm-green)/0) 100%);
}
.atm-glow2-l { --_g2x:14%; }
.atm-glow2-c { --_g2x:50%; }
.atm-glow2-r { --_g2x:86%; }

/* Texture: fine grain (white noise at low opacity) or a faint dot grid, faded out towards the edges. */
.atm-grain {
  --_tex:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 1.4 0 0 0 -.62'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  --_tex-size:var(--atm-grain-size) var(--atm-grain-size); --_tex-o:var(--atm-grain);
}
.atm-dots {
  --_tex:radial-gradient(rgb(255 255 255/.9) .7px, transparent 1.2px);
  --_tex-size:var(--atm-dots-gap) var(--atm-dots-gap); --_tex-o:var(--atm-dots);
}
.atm-tex-l { --_tx:22%; }
.atm-tex-r { --_tx:78%; }
.atm-tex-top { --_ty:18%; }

/* Edge darkening at the sides, and a green line across the top edge. */
.atm-vignette {
  --_vig:radial-gradient(farthest-side at 0% 50%, rgb(0 0 0/var(--atm-vignette)) 0%, rgb(0 0 0/calc(var(--atm-vignette) * .55)) 45%, rgb(0 0 0/calc(var(--atm-vignette) * .15)) 78%, rgb(0 0 0/0) 100%);
  --_vig2:radial-gradient(farthest-side at 100% 50%, rgb(0 0 0/var(--atm-vignette)) 0%, rgb(0 0 0/calc(var(--atm-vignette) * .55)) 45%, rgb(0 0 0/calc(var(--atm-vignette) * .15)) 78%, rgb(0 0 0/0) 100%);
}
.atm-edge { --_edge:linear-gradient(90deg, rgb(var(--atm-green)/0), rgb(var(--atm-green)/var(--atm-edge)) 50%, rgb(var(--atm-green)/0)); }

/* Room below a band's content, so the band doesn't end flush with its last card. */
.atm-pad { padding-bottom:clamp(56px, 7vw, 96px) !important; }

/* Cards and panels: a 1px highlight along the top edge, brightest in the middle, over whatever border they have.
   The second selector list maps it onto the cards the pages already use. */
:is(.atm-lift, .learn-card, .learn-beginner, .bg-lesson, .bg-finish, .bet-hub-intro, .bet-how-card, .bet-related-card, .bet-link-card, .bet-tool, .market-guide-card, .sg-guide-card, .sg-offer-card, .help-collection, .help-contact, .info-grid > article, .info-status) { position:relative; }
:is(.atm-lift, .learn-card, .learn-beginner, .bg-lesson, .bg-finish, .bet-hub-intro, .bet-how-card, .bet-related-card, .bet-link-card, .bet-tool, .market-guide-card, .sg-guide-card, .sg-offer-card, .help-collection, .help-contact, .info-grid > article, .info-status)::after {
  content:''; position:absolute; top:0; left:10%; right:10%; height:1px; z-index:1; pointer-events:none; border-radius:1px;
  background:linear-gradient(90deg, rgb(255 255 255/0), var(--atm-lift) 50%, rgb(255 255 255/0));
}

/* Repeated sections take turns: every other one moves its glow to the right. */
:is(.bet-hub-group, .sg-directory-section).atm:nth-of-type(even) { --_gx:84%; }

@media (max-width:760px) {
  :root { --atm-glow-rx: 70%; --atm-vignette: .2; }
  .atm-glow-l { --_gx:22%; } .atm-glow-r { --_gx:78%; }
}
@media (prefers-reduced-transparency:reduce) { .atm::after { display:none; } }