/* Tantu Stream own CSS for the storefront.
   Rule we follow: only ::part() selectors scoped to our sf-* component, and custom properties; no remote url(), no
   @import, no element or class selectors (the storefront refuses them).
   PART MAP: the kit's parts.json (@upanishad-hr/storefront-kit 0.2.0). What we use:
     sf-header::part(nav)          the navigation links (slotted links inherit from it)
     sf-hero::part(backdrop)       the layer behind the hero; the planet component is slotted into it
     sf-hero::part(copy)           the hero copy column (slotted heading, lede, buttons inherit from it)
     sf-cards/sf-steps/sf-pricing/sf-faq ::part(h2)   the section headings (these render their Markdown in shadow DOM)
     sf-cards/sf-steps ::part(li)  the cards and steps;  sf-panel::part(card)  the panels of the flow pages
     sf-pricing::part(signup-slot) the slot around the signup card
     sf-cta::part(wrap), ::part(box)   the closing band
     sf-theme-switch::part(button) the day and night switch
   The hero heading, the buttons and the FAQ questions are light DOM: no part reaches them, only what they inherit or
   read from tokens (GAPS.md G-07).
   Colour tokens come from the theme (--ground, --ink, --mint, --slate, --bright, --raised, --line, --ring ...).
   Our own --tantu-* properties are read by the p-tantu-stream-planet component; it has the same values built in. */

/* Day and night follow the page's color-scheme through light-dark(), so the sky flips with whatever switch the
   storefront uses (OS setting or the visitor's toggle), not only with prefers-color-scheme. */
/* ---- the painted hero sky: also the no-JS fallback (the planet component paints over it once it runs).
   The planet is slotted into this layer, so it inherits the --tantu-* properties from here. ---- */
sf-hero::part(backdrop) {
  --tantu-sky-1: light-dark(#6fd3e4, #0e0a24);
  --tantu-sky-2: light-dark(#a8ece6, #2a1660);
  --tantu-sky-3: light-dark(#ffd9b8, #7a2d7e);
  --tantu-sky-4: light-dark(#ffb7c9, #e2507e);
  --tantu-ridge-1: light-dark(#f3a6c4, #4a2270);
  --tantu-ridge-2: light-dark(#d9668f, #2a1648);
  --tantu-moon: light-dark(#ffffff, #f4ecdc);
  --tantu-sun: #ffb341;
  --tantu-planet: light-dark(#6fd9cf, #5fe8d6);
  --tantu-planet-at: 76% 42%;
  --tantu-planet-r: min(15vw, 180px);
  --tantu-moon-at: 56% 15%;
  --tantu-moon-r: min(7.5vw, 90px);
  isolation: isolate;
  overflow: hidden;
  background:
    /* superbloom ridges */
    radial-gradient(ellipse 75% 16% at 18% 104%, var(--ground) 96%, transparent 100%),
    radial-gradient(ellipse 70% 14% at 86% 104%, var(--ground) 96%, transparent 100%),
    radial-gradient(ellipse 60% 22% at 12% 100%, var(--tantu-ridge-2) 96%, transparent 100%),
    radial-gradient(ellipse 70% 26% at 78% 102%, var(--tantu-ridge-2) 96%, transparent 100%),
    radial-gradient(ellipse 80% 30% at 40% 104%, var(--tantu-ridge-1) 96%, transparent 100%),
    /* ringed planet */
    radial-gradient(ellipse calc(var(--tantu-planet-r) * 1.8) calc(var(--tantu-planet-r) * 0.3) at var(--tantu-planet-at), transparent 84%, var(--tantu-sun) 86% 93%, transparent 95%),
    radial-gradient(circle var(--tantu-planet-r) at var(--tantu-planet-at), var(--tantu-planet) 0, var(--slate) 98%, transparent 100%),
    /* pale moon with halo */
    radial-gradient(circle calc(var(--tantu-moon-r) * 1.14) at var(--tantu-moon-at), transparent 96%, color-mix(in srgb, var(--tantu-moon) 80%, transparent) 97% 98%, transparent 99%),
    radial-gradient(circle var(--tantu-moon-r) at var(--tantu-moon-at), color-mix(in srgb, var(--tantu-moon) 50%, transparent) 99%, transparent 100%),
    /* painted sky */
    linear-gradient(180deg, var(--tantu-sky-1), var(--tantu-sky-2) 40%, var(--tantu-sky-3) 66%, var(--tantu-sky-4) 90%);
}

/* phones: planet top right, clear of the copy (matches the component's narrow layout) */
@media (max-width: 640px) {
  sf-hero::part(backdrop) {
    --tantu-planet-at: 80% 63px;
    --tantu-planet-r: 22vw;
    --tantu-moon-at: 12% 6%;
    --tantu-moon-r: 10vw;
  }
}

/* ---- the planet takes the pointer: the hero turns pointer events off on its backdrop and lays its content row
   over the whole hero, so we pass events through the row and keep them on the copy and the visual. ---- */
sf-hero::part(backdrop) {
  pointer-events: auto;
}
sf-hero::part(wrap) {
  pointer-events: none;
}
sf-hero::part(copy),
sf-hero::part(visual) {
  pointer-events: auto;
}

/* ---- the hero copy: readable over the sky. The heading is slotted light DOM, so it gets only what inherits
   (no faux bold of the one-weight stencil face) and the --text-h1 token (the page uses it below 1000px). ---- */
sf-hero::part(copy) {
  --text-h1: clamp(2.6rem, 8.5vw, 6rem);
  font-synthesis: none;
  text-wrap: balance;
  text-shadow: 0 1px 12px var(--ground);
}

/* ---- heavy cut capitals with the offset pink shadow: the section headings ---- */
sf-cards::part(h2),
sf-steps::part(h2),
sf-pricing::part(h2),
sf-faq::part(h2) {
  font-family: var(--font-display);
  font-weight: 400;
  font-synthesis: none;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 0.95;
  color: var(--ink);
  text-shadow: 0.045em 0.045em 0 var(--mint);
  text-wrap: balance;
}

/* ---- wide-spaced labels (No Man's Sky HUD): the header navigation ---- */
sf-header::part(nav) {
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  font-synthesis: none;
}

/* ---- the day and night switch: square, with the teal focus ring ---- */
sf-theme-switch::part(button) {
  border-radius: var(--r-sm, 2px);
}
sf-theme-switch::part(button):focus-visible {
  outline: 3px solid var(--ring);
  outline-offset: 3px;
}

/* ---- scanner-corner panel: teal brackets in two corners ---- */
sf-cards::part(li),
sf-steps::part(li),
sf-panel::part(card) {
  border-radius: var(--r-sm, 2px);
  background:
    linear-gradient(var(--slate), var(--slate)) top left / 20px 3px no-repeat,
    linear-gradient(var(--slate), var(--slate)) top left / 3px 20px no-repeat,
    linear-gradient(var(--slate), var(--slate)) bottom right / 20px 3px no-repeat,
    linear-gradient(var(--slate), var(--slate)) bottom right / 3px 20px no-repeat,
    var(--raised);
}

/* ---- the signup card: an offset pink shadow. The card reads --card-shadow; the slot around it passes ours. ---- */
sf-pricing::part(signup-slot) {
  --card-shadow: 6px 6px 0 var(--mint);
}

/* ---- the closing band: ink with ground-coloured text, both day and night.
   The band paints --slate and its heading and line use --on-slate; both are set on the outer wrap, so they resolve
   there to our ink and ground. Inside the box, --ink is pink: at night the page paints the band's button with
   --ink, which would be ink on ink. ---- */
sf-cta::part(wrap) {
  --slate: var(--ink);
  --on-slate: var(--ground);
}
sf-cta::part(box) {
  --ink: var(--mint);
  font-synthesis: none;
}