/* ============ Time-of-day atmosphere ============
   One fixed multiply layer of coloured light falling in from the top of the
   viewport. The light source tracks across the sky as the day turns: dawn on
   the right, day overhead, dusk on the left, night back to centre.
   Deliberately subtle, never fights the base palette.

   Sits at z-index 69, directly beneath the grain overlay (70).
   Shared by index, pricing, portal and start — see /tod.js. */

.tod-layer {
  position: fixed; inset: 0; z-index: 69; pointer-events: none;
  mix-blend-mode: multiply; opacity: 0;
  /* --ease is defined on every page that loads this; the fallback keeps the
     curve correct if this file is ever pulled into a page that isn't. */
  transition: opacity 1.4s var(--ease, cubic-bezier(0.22, 1, 0.36, 1)),
              background 1.4s var(--ease, cubic-bezier(0.22, 1, 0.36, 1));
}

body.tod-dawn  .tod-layer { opacity:1; background:radial-gradient(120% 80% at 78% 0%, rgba(255,176,116,0.10), transparent 60%); }
body.tod-day   .tod-layer { opacity:1; background:radial-gradient(120% 80% at 50% 0%, rgba(176,202,255,0.05), transparent 60%); }
body.tod-dusk  .tod-layer { opacity:1; background:radial-gradient(120% 80% at 22% 0%, rgba(255,118,86,0.10), transparent 62%); }
body.tod-night .tod-layer { opacity:1; background:radial-gradient(120% 90% at 50% 0%, rgba(38,66,148,0.13), transparent 66%); }

@media (prefers-reduced-motion: reduce) { .tod-layer { transition: none; } }

/* ============ iOS safe area ============
   With viewport-fit=cover the fixed top bar reaches the true top edge on
   notched iPhones; pad its contents clear of the notch so the header hugs the
   top the same way on every page (not just the homepage). env() resolves to 0
   where there's no inset, so this is a no-op on desktop and non-notched devices.
   Lives here because tod.css is the one stylesheet every marketing page and the
   content-page shell load; the rest of #nav is styled inline per page. */
#nav { padding-top: env(safe-area-inset-top, 0px); }

/* ============ Liquid-glass CTA ============
   An Apple-style glass card floating over the ink pattern, which drifts on
   scroll. Aiming past frosted glassmorphism toward a real lens: a mostly-clear
   surface (light blur, high transparency), a bright crisp specular rim, smooth
   edge refraction of what's behind (Chromium), and floating depth. The blur +
   rim stand alone as the fallback where url() backdrop-filters are ignored. */

/* The glass fills the whole stage edge-to-edge: the pattern is only ever seen
   THROUGH the frosted glass, never raw around the sides. No overflow clip on the
   stage so the glass's floating drop-shadow shows; the pattern is clipped by
   .cta-clip and the glass clips its own rounded backdrop. */
.cta-stage { position: relative; isolation: isolate; }
/* The moving pattern lives in a promoted clip wrapper: Chrome won't reliably
   clip a will-change:transform child to an ancestor's border-radius, so the
   wrapper is rasterised (translateZ) with the rounded clip. The glass card is
   its SIBLING (not inside), so its backdrop-filter samples the pattern behind
   it without being re-rooted by the wrapper's transform. */
.cta-clip {
  position: absolute; inset: 0; z-index: 0; border-radius: inherit;
  overflow: hidden; transform: translateZ(0); pointer-events: none;
}
/* Static fallback pattern for browsers without canvas filters (tod.js swaps it
   for a baked <canvas> everywhere else). Plain element filter — rasterised once,
   never re-run. inset:-10% keeps the blur's transparent fringe outside the clip. */
.cta-media {
  position: absolute; inset: -10%;
  background: url('/images/cand-ink.webp') center/cover;
  filter: blur(5px) saturate(1.65) brightness(1.05);
}
/* The baked pattern+lens composite (see tod.js). Drawn once; costs nothing per frame. */
.cta-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Near-uniform darkening, only a touch deeper behind the centred text — so the
   pattern reads all the way to the panel edge instead of fading out early. */
.cta-scrim {
  position: absolute; inset: 0;
  background: radial-gradient(135% 115% at 50% 42%, rgba(8,8,11,0.66), rgba(9,9,12,0.58) 100%);
}

.cta-glass {
  position: relative; z-index: 1;
  border-radius: inherit;
  /* Smoked glass, not frost: a faint dark base for white-text legibility, a
     bright top sheen where light hits, kept mostly transparent so the pattern
     reads through. */
  background:
    linear-gradient(178deg, rgba(255,255,255,0.20), rgba(255,255,255,0.03) 26%, rgba(255,255,255,0) 55%),
    radial-gradient(135% 120% at 50% 4%, rgba(255,255,255,0.09), transparent 50%),
    rgba(11,12,17,0.34);
  /* The Apple tell: a crisp bright light edge along the top, softer highlights
     down the sides, a faint dark keyline at the bottom, an inner edge glow, a
     hairline, then two shadows for a piece of glass floating a few mm up. */
  box-shadow:
    inset 0 1.6px 0.5px -0.5px rgba(255,255,255,1),
    inset 1.2px 0 0.5px -0.5px rgba(255,255,255,0.5),
    inset -1.2px 0 0.5px -0.5px rgba(255,255,255,0.5),
    inset 0 -1.2px 0.5px -0.5px rgba(0,0,0,0.6),
    inset 0 1px 14px -6px rgba(255,255,255,0.4),
    inset 0 0 26px 4px rgba(255,255,255,0.05),
    0 0 0 0.5px rgba(255,255,255,0.16),
    0 36px 66px -26px rgba(0,0,0,0.8),
    0 12px 26px -16px rgba(0,0,0,0.62);
  transition: box-shadow .5s var(--ease, cubic-bezier(0.22,1,0.36,1));
}
/* The edge refraction is baked into the canvas composite (tod.js) — there is no
   live backdrop-filter or SVG filter anywhere in the CTA. */
@media (prefers-reduced-motion: reduce) { .cta-media { transform: none !important; } }