/* Futuristic layer for the dark look (2026-10-18). Light touch: aurora light, a faint grid,
   glass panels, glow borders and motion. Pure restyle; every effect is off under reduced motion. */
.theme-dark { --glow: rgba(255, 154, 77, .22); --glow-red: rgba(213, 7, 27, .28); --glow-blue: rgba(70, 90, 255, .22); }

/* Aurora + grid, fixed behind everything (injected by dark-fx.js) */
.fx-bg { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.fx-bg i { position: absolute; border-radius: 50%; filter: blur(110px); opacity: .55; will-change: transform; }
.fx-bg i:nth-child(1) { width: 52vw; height: 52vw; left: -14vw; top: -18vw; background: var(--glow-blue); animation: fx-drift 26s ease-in-out infinite alternate; }
.fx-bg i:nth-child(2) { width: 44vw; height: 44vw; right: -12vw; top: 18vh; background: var(--glow-red); animation: fx-drift 32s ease-in-out infinite alternate-reverse; }
.fx-bg i:nth-child(3) { width: 38vw; height: 38vw; left: 28vw; bottom: -20vw; background: var(--glow); animation: fx-drift 38s ease-in-out infinite alternate; }
@keyframes fx-drift { to { transform: translate3d(8vw, 6vh, 0) scale(1.15); } }
.theme-dark .dk-block { background: transparent; }
.theme-dark .dk-alt { background: linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,0)); }


/* Scroll progress */
.fx-progress { position: fixed; left: 0; top: 0; height: 2px; width: 100%; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--red), var(--ember), #8fa0ff); z-index: 200; pointer-events: none; }

/* Header: glass that tightens on scroll */
.theme-dark .site-head { transition: background .3s, box-shadow .3s; }
.theme-dark .site-head.scrolled { background-color: rgba(7,7,13,.88); }
.theme-dark .nav > a { position: relative; }
.theme-dark .nav > a::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 1px; background: linear-gradient(90deg, transparent, var(--ember), transparent); transform: scaleX(0); transition: transform .35s; }
.theme-dark .nav > a:hover::after { transform: scaleX(1); }

/* Hero: slow cinematic zoom, breathing glow, scroll cue */
.theme-dark .dk-hero .bg img, .theme-dark .dk-phero .bg img { animation: fx-zoom 22s ease-out both; will-change: transform; }
@keyframes fx-zoom { from { transform: scale(1.12); } to { transform: scale(1.02); } }
.theme-dark .dk-glow { animation: fx-breathe 7s ease-in-out infinite alternate; }
@keyframes fx-breathe { from { opacity: .55; transform: scale(1); } to { opacity: 1; transform: scale(1.08); } }
.theme-dark .dk-mono { animation: fx-float 6s ease-in-out infinite; }
@keyframes fx-float { 50% { transform: translateY(-8px); } }
.theme-dark .dk-scroll span { animation: fx-cue 1.8s ease-in-out infinite; }
@keyframes fx-cue { 0% { transform: translateY(-6px); opacity: 0; } 40% { opacity: 1; } 100% { transform: translateY(10px); opacity: 0; } }
.theme-dark h1 .fx-w { display: inline-block; opacity: 0; transform: translateY(.45em); filter: blur(8px); animation: fx-word .9s cubic-bezier(.2,.7,.2,1) forwards; animation-delay: calc(.15s + var(--i) * .07s); }
@keyframes fx-word { to { opacity: 1; transform: none; filter: none; } }
.theme-dark h1 .fx-grad { background: linear-gradient(100deg, var(--ink) 20%, var(--ember) 50%, var(--ink) 80%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: fx-word .9s cubic-bezier(.2,.7,.2,1) forwards, fx-shine 7s linear 1.2s 2; animation-delay: calc(.15s + var(--i) * .07s), 0s; }
@keyframes fx-shine { to { background-position: -220% 0; } }

/* Reveals: soft focus pull */


/* Glass cards with a glow rim that follows the cursor.
   Edges (2026-10-18): one radius everywhere, a hairline border drawn as a gradient (bright at the top,
   fading down) through a transparent border, a faint inner top highlight and a soft drop. Painted once;
   nothing here animates except transform/opacity. */
.theme-dark {
  --card-fill: rgba(16, 15, 30, .74);
  --card-edge: linear-gradient(180deg, rgba(255,255,255,.17), rgba(255,255,255,.06) 38%, rgba(255,255,255,.035));
  --card-edge-hi: linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,.09) 40%, rgba(255,255,255,.05));
  --card-edge-ember: linear-gradient(160deg, rgba(255,154,77,.6), rgba(255,255,255,.08) 34%, rgba(255,255,255,.035));
  --card-depth: inset 0 1px 0 rgba(255,255,255,.06), 0 1px 2px rgba(0,0,0,.35), 0 22px 44px -28px rgba(0,0,0,.85);
}
.theme-dark .pcard, .theme-dark .feature, .theme-dark .card, .theme-dark .form-card, .theme-dark .dk-gift, .theme-dark .tier, .theme-dark .product, .theme-dark .person, .theme-dark .dk-prog, .theme-dark .cal, .theme-dark .aside-card, .theme-dark .dk-mission {
  position: relative; border: 1px solid transparent; border-radius: var(--r-card);
  background: linear-gradient(var(--card-fill), var(--card-fill)) padding-box, var(--card-edge) border-box;
  box-shadow: var(--card-depth);
  transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s, opacity .8s;
}
.theme-dark .form-card, .theme-dark .dk-gift, .theme-dark .aside-card, .theme-dark .dk-mission { --card-edge: var(--card-edge-ember); }
.theme-dark .aside-card::before, .theme-dark .dk-mission::before { content: none; }
.theme-dark .pcard:hover, .theme-dark .card:hover, .theme-dark .product:hover, .theme-dark .person:hover, .theme-dark .tier:hover, .theme-dark .feature:hover, .theme-dark .dk-gift:hover, .theme-dark .dk-prog:hover { border-color: transparent; --card-edge: var(--card-edge-hi); }
.theme-dark .form-card:hover { border-color: transparent; }
.theme-dark .pcard::before, .theme-dark .feature::before, .theme-dark .card::before, .theme-dark .form-card::before, .theme-dark .dk-gift::before, .theme-dark .tier::before, .theme-dark .product::before, .theme-dark .person::before, .theme-dark .dk-prog::before {
  content: ""; position: absolute; inset: -1px; width: auto; height: auto; border-radius: inherit; padding: 1px; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(255,154,77,.85), rgba(213,7,27,.35) 45%, transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
.theme-dark .pcard:hover::before, .theme-dark .feature:hover::before, .theme-dark .card:hover::before, .theme-dark .form-card:hover::before, .theme-dark .dk-gift:hover::before, .theme-dark .tier:hover::before, .theme-dark .product:hover::before, .theme-dark .person:hover::before, .theme-dark .dk-prog:hover::before { opacity: 1; }
.theme-dark .pcard:hover, .theme-dark .dk-gift:hover, .theme-dark .tier:hover, .theme-dark .product:hover, .theme-dark .person:hover { transform: translateY(-6px); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 24px 60px rgba(0,0,0,.5), 0 0 40px rgba(255,154,77,.08); }
.theme-dark .card:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 24px 60px rgba(0,0,0,.5); }.theme-dark .pcard .img img, .theme-dark .product img, .theme-dark .g-item img { transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.theme-dark .pcard:hover .img img, .theme-dark .g-item:hover img { transform: scale(1.07); }
.theme-dark .feature .ic { text-shadow: 0 0 18px var(--glow); }

/* Buttons: sheen sweep + magnetic lift + soft pulse on the main call to action */
.theme-dark .btn { position: relative; overflow: hidden; transition: transform .25s, box-shadow .3s, background .25s, color .25s, scale .12s; will-change: transform; }
.theme-dark .btn::after { content: ""; position: absolute; top: 0; left: -80%; width: 50%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent); transform: skewX(-20deg); pointer-events: none; }
.theme-dark .btn:hover::after { left: 140%; transition: left .7s; }

.theme-dark .btn .arrow { display: inline-block; transition: transform .25s; }
.theme-dark .btn:hover .arrow { transform: translateX(5px); }

/* Forms: glowing focus on glass inputs */
.theme-dark input, .theme-dark select, .theme-dark textarea { background: rgba(255,255,255,.045); border: 1px solid var(--line-2); color: var(--ink); transition: border-color .25s, box-shadow .25s, background .25s; }
.theme-dark input:focus, .theme-dark select:focus, .theme-dark textarea:focus { outline: none; border-color: var(--ember); box-shadow: 0 0 0 4px rgba(255,154,77,.14), 0 0 28px rgba(255,154,77,.12); background: rgba(255,255,255,.07); }
.theme-dark .form-card { box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 30px 80px -20px rgba(0,0,0,.55); }

.fx-count { font-variant-numeric: tabular-nums; }

/* Twinkling particles in heroes */
.fx-stars { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 1; }
.fx-stars b { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #fff; opacity: 0; animation: fx-twinkle var(--t, 6s) ease-in-out infinite; animation-delay: var(--dl, 0s); box-shadow: 0 0 8px rgba(255,255,255,.8); }
@keyframes fx-twinkle { 0%, 100% { opacity: 0; transform: translateY(0) scale(.6); } 50% { opacity: .9; transform: translateY(-26px) scale(1.2); } }

/* Page enter */
.theme-dark main { animation: fx-enter .7s cubic-bezier(.2,.7,.2,1) both; }
@keyframes fx-enter { from { opacity: 0; transform: translateY(14px); } }

@media (max-width: 760px) { .fx-spot, .fx-bg i:nth-child(3) { display: none; } .theme-dark .pcard, .theme-dark .feature, .theme-dark .card { backdrop-filter: none; -webkit-backdrop-filter: none; } }
@media (prefers-reduced-motion: reduce) {
  .theme-dark *, .theme-dark *::before, .theme-dark *::after, .fx-bg i, .fx-stars b { animation: none !important; }
  .theme-dark h1 .fx-w { opacity: 1; transform: none; filter: none; }
  .theme-dark .rv:not(.in) { filter: none; }
  .fx-spot, .fx-progress { display: none; }
}

/* ---------- Phone: shorter, swipeable pages instead of one endless scroll ---------- */
.fx-top { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); width: 52px; height: 52px; border-radius: 50%; border: 0; padding: 0; background: rgba(12, 11, 23, .82); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: var(--ink); z-index: 150; display: grid; place-items: center; box-shadow: 0 10px 30px rgba(0, 0, 0, .5); opacity: 0; transform: translateY(20px) scale(.8); pointer-events: none; transition: opacity .3s, transform .35s cubic-bezier(.2, .7, .2, 1); }
.fx-top.show { opacity: 1; transform: none; pointer-events: auto; }
.fx-top svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.fx-top circle { fill: none; stroke-width: 3; }
.fx-top .trk { stroke: rgba(255, 255, 255, .12); }
.fx-top .bar { stroke: var(--ember); stroke-linecap: round; stroke-dasharray: 144.5; stroke-dashoffset: calc(144.5 - 144.5 * var(--sp, 0)); filter: drop-shadow(0 0 5px rgba(255, 154, 77, .7)); }
.fx-top span { font-size: 18px; line-height: 1; }
.fx-more-btn { display: none; }
@media (min-width: 761px) { .fx-top { display: none; } }

@media (max-width: 760px) {
  /* Swipe rows: one card at a time with the next one peeking in */
  .theme-dark .dk-programs, .theme-dark .dk-gifts, .theme-dark .grid.c4, .theme-dark .dk-block .team {
    display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none;
    margin-inline: -16px; padding: 4px 16px 18px; scroll-padding-inline: 16px;
  }
  .theme-dark .dk-programs::-webkit-scrollbar, .theme-dark .dk-gifts::-webkit-scrollbar, .theme-dark .grid.c4::-webkit-scrollbar, .theme-dark .dk-block .team::-webkit-scrollbar { display: none; }
  .theme-dark .dk-programs > *, .theme-dark .dk-gifts > *, .theme-dark .grid.c4 > *, .theme-dark .dk-block .team > * { flex: 0 0 78%; max-width: 320px; scroll-snap-align: start; }
  .theme-dark .dk-gifts > * { flex-basis: 62%; }
  .theme-dark .dk-programs > .rv:not(.in), .theme-dark .grid.c4 > .rv:not(.in) { filter: none; }

  /* Programs page: compact rows instead of 31 tall cards */
  .theme-dark .pgrid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .theme-dark .pgrid .pcard { display: grid; grid-template-columns: 92px minmax(0, 1fr); align-items: center; gap: 14px; padding: 8px; min-height: 0; }
  .theme-dark .pgrid .pcard .img { aspect-ratio: 1; height: auto; border-radius: 10px; overflow: hidden; }
  .theme-dark .pgrid .pcard .img img { width: 100%; height: 100%; object-fit: cover; }
  .theme-dark .pgrid .pcard .txt { padding: 0; }
  .theme-dark .pgrid .pcard h3 { font-size: 19px; line-height: 1.15; margin: 2px 0 0; }
  .theme-dark .pgrid .pcard p, .theme-dark .pgrid .pcard .more { display: none; }
  .theme-dark .pgrid .pcard .tag { font-size: 10px; }

  /* Long lists fold up: first few rows, then a tap to open the rest */
  .fx-fold > .fx-extra { display: none; }
  .fx-fold.open > .fx-extra { display: grid; animation: fx-unfold .5s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--k, 0) * 60ms); }
  @keyframes fx-unfold { from { opacity: 0; transform: translateY(-10px); } }
  .fx-more-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin: 12px 0 4px; padding: 13px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, .04); color: var(--ink); font: 600 14px/1 var(--body); }
  .fx-more-btn i { display: inline-block; font-style: normal; transition: transform .3s; }
  .fx-fold.open + .fx-more-btn i { transform: rotate(180deg); }

  /* Tighter sections */
  .theme-dark .dk-block { padding-block: 56px; }
  .theme-dark .dk-hero { min-height: 0; }
}

/* Starfield canvas (dark-fx.js) */
.fx-sky { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: no-repeat center / cover; }
/* the hero photo covers the sky at the top; let the stars show through a little */
.theme-dark .dk-hero, .theme-dark .dk-phero { isolation: isolate; }

/* 60fps pass: only transform/opacity animate; layers are isolated so they never trigger page layout */
.theme-dark .head-cta .btn:not(.outline-light), .theme-dark .dk-hero .btn:not(.outline-light) { box-shadow: 0 6px 26px rgba(213,7,27,.35); }
.fx-gal { position: fixed; inset: 0; z-index: -1; pointer-events: none; }
.fx-bg, .fx-sky, .fx-gal { contain: strict; }

/* Decorative glows and parallax layers must never widen the page (seen on /dark/store at desktop width). */
.theme-dark main { overflow-x: clip; }

/* Top of the page: the two notice strips and the header read as one clean glass bar with a
   single crisp edge, no fading lines or shadow bands (owner, 2026-10-18). */
.theme-dark .demo-bar, .dk-preview { background: rgba(7, 7, 13, .94); border: 0; border-image: none; }
.dk-preview { box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .05); }
.theme-dark .site-head { background-color: rgba(7, 7, 13, .9); border-bottom: 1px solid rgba(255, 255, 255, .08); border-image: none; }
.theme-dark .site-head.scrolled { background-color: rgba(7, 7, 13, .94); box-shadow: 0 1px 0 rgba(255, 255, 255, .04), 0 12px 32px rgba(0, 0, 0, .35); }
.theme-dark .site-head::after { display: none; }

/* Hero photos dissolve into the sky on an eased curve (a straight linear fade shows a visible
   band where it starts). Stops follow a smoothstep from 45% to 100%. */
.dk-hero .bg, .dk-phero .bg, .dk-hero::before, .dk-phero::before {
  -webkit-mask-image: linear-gradient(180deg, #000 45%, rgba(0,0,0,.97) 52%, rgba(0,0,0,.9) 59%, rgba(0,0,0,.77) 66%, rgba(0,0,0,.6) 73%, rgba(0,0,0,.4) 80%, rgba(0,0,0,.23) 87%, rgba(0,0,0,.1) 93%, rgba(0,0,0,.03) 97%, transparent);
  mask-image: linear-gradient(180deg, #000 45%, rgba(0,0,0,.97) 52%, rgba(0,0,0,.9) 59%, rgba(0,0,0,.77) 66%, rgba(0,0,0,.6) 73%, rgba(0,0,0,.4) 80%, rgba(0,0,0,.23) 87%, rgba(0,0,0,.1) 93%, rgba(0,0,0,.03) 97%, transparent);
}

/* Start-up, in order (owner, 2026-10-18): black → the star sky appears → the top bar settles
   in → the page content rises. Pure CSS so nothing flashes before scripts run; the stars' own
   fade-in and forward glide are in dark-fx.js. html.seen (set by the inline head script on later
   pages of a visit) plays a short version. The page behind is always dark, never white. */
html:has(body.theme-dark) { background: #07070d; }
body.theme-dark { background: transparent; } /* the colour lives on <html>, so the fixed star layers (z-index -1) stay visible */
.theme-dark::before { content: ""; position: fixed; inset: 0; z-index: 300; pointer-events: none; background: #040408; animation: fx-dawn 1.2s cubic-bezier(.45, 0, .2, 1) .1s both; }
@keyframes fx-dawn { from { opacity: 1; } to { opacity: 0; visibility: hidden; } }
.theme-dark .site-head, .theme-dark .demo-bar, .dk-preview { animation: fx-settle 1.2s cubic-bezier(.25, .6, .25, 1) 1s both; }
@keyframes fx-settle { from { opacity: 0; transform: translateY(-10px); } }
.theme-dark main { animation: fx-enter 1.7s cubic-bezier(.25, .6, .25, 1) 1.25s both; }
.theme-dark h1 .fx-w { animation-duration: 1.3s; animation-delay: calc(1.6s + var(--i) * .08s); }
.theme-dark h1 .fx-grad { animation-duration: 1.3s, 7s; animation-delay: calc(1.6s + var(--i) * .08s), 3.2s; }
html.seen .theme-dark::before { animation-duration: .45s; animation-delay: 0s; }
html.seen .theme-dark .site-head, html.seen .theme-dark .demo-bar, html.seen .dk-preview { animation: none; }
html.seen .theme-dark main { animation-delay: .1s; animation-duration: .6s; }
html.seen .theme-dark h1 .fx-w { animation-delay: calc(.25s + var(--i) * .05s); }
html.seen .theme-dark h1 .fx-grad { animation-delay: calc(.25s + var(--i) * .05s), 1.4s; }
@media (prefers-reduced-motion: reduce) { .theme-dark::before { display: none; } .theme-dark .site-head, .theme-dark .demo-bar, .dk-preview, .theme-dark main { animation: none !important; } }

/* No divider lines between sections at all: the fading hairlines showed as broken white lines
   on large or zoomed screens (owner, 2026-10-18). Sections now flow on spacing and the sky alone. */
.theme-dark section.block, .theme-dark .dk-block, .dk-block, .dk-stay, .theme-dark .dk-final, .theme-dark .site-foot { border-top: 0 !important; border-image: none !important; }

/* GPU seam fix (owner saw dashed white lines building up over time near the bottom of the hero on
   his work screen): the hero photo no longer zooms or parallaxes under its fade mask, and the
   aurora uses soft radial gradients instead of huge blur filters. Both were re-rasterised every
   frame and can leave tile seams on some GPUs / display scales. */
.theme-dark .dk-hero .bg img, .theme-dark .dk-phero .bg img { animation: none !important; transform: none !important; translate: none !important; will-change: auto !important; }
.fx-bg i { filter: none !important; opacity: .8; }
.fx-bg i:nth-child(1) { background: radial-gradient(circle, rgba(70, 90, 255, .2), transparent 68%); }
.fx-bg i:nth-child(2) { background: radial-gradient(circle, rgba(213, 7, 27, .24), transparent 68%); }
.fx-bg i:nth-child(3) { background: radial-gradient(circle, rgba(255, 154, 77, .18), transparent 68%); }

/* Light level: no live blur over the moving sky. */
body.fx-lite *{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
body.fx-lite .site-head{background-color:rgba(7,7,13,.96)!important}

/* Counting numbers keep their width, so the line does not jiggle while they count up. */
.fx-count { font-variant-numeric: tabular-nums; }