/* ============================================================================
   landing-sparkle.css — the starfield + sparkle motion layer, FOR EVERY COLOUR.
   ----------------------------------------------------------------------------
   2026-09-04 (Caleb: "i want all the colour pallets to have those sparkles.
   right now only midnight has it").

   This layer used to live inside css/landing-midnight.css, whose own header said
   it "lives inside its own sheet, so no other colour can ever pick it up". Lifting
   it out is the whole change: this file is ALWAYS loaded, so the effect belongs to
   the page rather than to one skin.

   It did not need recolouring by hand. Every palette sheet already defines the
   same five tokens — --hx-d / --hx-p / --hx-l / --hx-rgb / --hx-drgb — and
   Midnight's hardcoded navies were exactly its own values of them:
       #3C4A78 = --hx-p      #5C74B8 = --hx-l
       #212B47 = --hx-d      rgba(60,74,120,x) = rgba(var(--pm-spark-rgb,60,74,120),x)
   So swapping the literals for the tokens leaves Midnight pixel-identical and
   gives every other colour the same effect in its own hue.

   NOT moved: the ".Be one of the first." wordmark gradient. That is a colour
   override, not motion, and it stays with Midnight — the other palettes have
   their own wordmark colour and should keep it.

   Performance and reduced-motion behaviour are unchanged from the original: every
   animation is transform- or opacity-only, all of it stops under
   prefers-reduced-motion, and the phone rules still dial it back.
   ============================================================================ */

/* ── STAR TILES ─────────────────────────────────────────────────────────────
   Two 560px tiles. FAR = many small, dim specks. NEAR = fewer, larger, brighter
   ones. Running them at different speeds is what gives the field depth as you
   scroll. Positions are deliberately irregular — a regular grid reads as noise,
   not sky. */
:root{
  --pmmn-far:
    radial-gradient(1.4px 1.4px at  8% 12%, rgba(255,255,255,.85), transparent 62%),
    radial-gradient(1.1px 1.1px at 23% 47%, rgba(214,228,255,.70), transparent 62%),
    radial-gradient(1.6px 1.6px at 37%  7%, rgba(255,255,255,.78), transparent 62%),
    radial-gradient(1.0px 1.0px at 52% 33%, rgba(198,216,255,.62), transparent 62%),
    radial-gradient(1.5px 1.5px at 68% 18%, rgba(255,255,255,.80), transparent 62%),
    radial-gradient(1.1px 1.1px at 81% 53%, rgba(214,228,255,.66), transparent 62%),
    radial-gradient(1.3px 1.3px at 94% 25%, rgba(255,255,255,.72), transparent 62%),
    radial-gradient(1.0px 1.0px at 14% 72%, rgba(214,228,255,.58), transparent 62%),
    radial-gradient(1.7px 1.7px at 29% 88%, rgba(255,255,255,.66), transparent 62%),
    radial-gradient(1.1px 1.1px at 46% 64%, rgba(198,216,255,.55), transparent 62%),
    radial-gradient(1.4px 1.4px at 61% 79%, rgba(255,255,255,.70), transparent 62%),
    radial-gradient(1.0px 1.0px at 76% 95%, rgba(214,228,255,.60), transparent 62%),
    radial-gradient(1.5px 1.5px at 89% 69%, rgba(255,255,255,.64), transparent 62%),
    radial-gradient(1.2px 1.2px at  4% 93%, rgba(214,228,255,.55), transparent 62%);
  --pmmn-near:
    radial-gradient(2.6px 2.6px at 17% 27%, rgba(255,255,255,.95), rgba(255,255,255,.16) 42%, transparent 72%),
    radial-gradient(2.2px 2.2px at 58%  9%, rgba(226,238,255,.88), rgba(226,238,255,.14) 42%, transparent 72%),
    radial-gradient(3.0px 3.0px at 87% 38%, rgba(255,255,255,.92), rgba(255,255,255,.15) 42%, transparent 72%),
    radial-gradient(2.3px 2.3px at 33% 74%, rgba(226,238,255,.84), rgba(226,238,255,.13) 42%, transparent 72%),
    radial-gradient(2.7px 2.7px at 71% 86%, rgba(255,255,255,.90), rgba(255,255,255,.14) 42%, transparent 72%);
  /* the four-point sparkle used on the buttons, the .hx panel and the picker */
  --pmmn-spark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0c.62 6.3 5.08 10.76 12 12-6.92 1.24-11.38 5.7-12 12-.62-6.3-5.08-10.76-12-12C6.92 10.76 11.38 6.3 12 0z' fill='%23ffffff'/%3E%3C/svg%3E");
}

@keyframes pmMnDrift      { from{ transform:translate3d(0,0,0); }      to{ transform:translate3d(0,-560px,0); } }
@keyframes pmMnDriftBack  { from{ transform:translate3d(0,-560px,0); } to{ transform:translate3d(0,0,0); } }
@keyframes pmMnBreathe    { 0%,100%{ opacity:.50; } 50%{ opacity:.92; } }
@keyframes pmMnBreatheSoft{ 0%,100%{ opacity:.34; } 50%{ opacity:.70; } }
@keyframes pmMnTwinkle    { 0%,100%{ opacity:.10; transform:scale(.62) rotate(0deg); }
                            50%    { opacity:1;   transform:scale(1)   rotate(24deg); } }
@keyframes pmMnSheen      { 0%{ transform:translate3d(-140%,0,0); }
                            58%,100%{ transform:translate3d(140%,0,0); } }

/* ── 1. THE HERO ────────────────────────────────────────────────────────────
   .hero__photo already paints a dark base (#0a1e22) and a vignette scrim on
   ::after at z-index 2; ::before was free, so the field slots in at z-index 3 —
   above the scrim, below the headline (z 5) and the floating shapes (z 6).
   The layer is one tile taller than the photo top and bottom and travels
   exactly one tile height, so the loop never shows a seam. `screen` is what
   keeps it tasteful: the specks simply do not exist over bright pixels. */
.hero__photo::before{
  content:'';
  position:absolute; left:0; right:0; top:-560px; height:calc(100% + 1120px);
  z-index:3; pointer-events:none;
  background-image:var(--pmmn-far), var(--pmmn-near);
  background-size:560px 560px, 560px 560px;
  background-repeat:repeat, repeat;
  mix-blend-mode:screen;
  opacity:.72;
  animation:pmMnDrift 96s linear infinite, pmMnBreathe 11s ease-in-out infinite;
  will-change:transform, opacity;
}
/* the hero pauses its floating shapes when it scrolls away (.is-still) — the
   starfield rides the same switch, so nothing animates off-screen. */
.hero.is-still .hero__photo::before{ animation-play-state:paused; }

/* ── 2. THE CTA BUTTONS ─────────────────────────────────────────────────────
   The template already gives these a navy gradient. Midnight adds the light
   moving across it: one slow starlight sweep, and one four-point sparkle that
   turns on and off near the trailing edge. Same treatment on all four buttons
   so the page has ONE signature, not four ideas. */
.hero__btn,
.pm-final-cta__btn,
.wlb__go{ position:relative; overflow:hidden; isolation:isolate; }

.hero__btn::before,
.pm-final-cta__btn::before,
.wlb__go::before{
  content:''; position:absolute; inset:-1px; z-index:2; pointer-events:none;
  background:linear-gradient(102deg,
    rgba(255,255,255,0)   38%,
    rgba(255,255,255,.22) 46%,
    rgba(214,228,255,.55) 50%,
    rgba(255,255,255,.22) 54%,
    rgba(255,255,255,0)   62%);
  transform:translate3d(-140%,0,0);
  animation:pmMnSheen 7.5s cubic-bezier(.5,0,.25,1) infinite;
  will-change:transform;
}
.hero__btn::after,
.pm-final-cta__btn::after{
  content:''; position:absolute; z-index:3; pointer-events:none;
  right:13px; top:50%; width:11px; height:11px; margin-top:-13px;
  background:var(--pmmn-spark) center/contain no-repeat;
  opacity:.1;
  animation:pmMnTwinkle 4.6s ease-in-out infinite .9s;
  will-change:opacity, transform;
}
/* the closing button carries an arrow on its right edge — move its sparkle to
   the LEFT of the label so the two never sit on top of each other. */
.pm-final-cta__btn::after{ right:auto; left:11px; margin-top:-14px; animation-delay:1.6s; }
/* PHONE ONLY: under 601px the "hire" link in #pm-food is rendered as a full-
   width solid button (the template already fills it with the hero gradient), so
   it joins the family. Above that breakpoint it is a plain text link and gets
   nothing — a sheen sliding through a sentence would read as a glitch. */
@media (max-width:600.98px){
  .ckf-close__hire a{ position:relative; overflow:hidden; isolation:isolate; }
  .ckf-close__hire a::before{
    content:''; position:absolute; inset:-1px; z-index:2; pointer-events:none;
    background:linear-gradient(102deg,
      rgba(255,255,255,0)   38%,
      rgba(255,255,255,.22) 46%,
      rgba(214,228,255,.55) 50%,
      rgba(255,255,255,.22) 54%,
      rgba(255,255,255,0)   62%);
    transform:translate3d(-140%,0,0);
    animation:pmMnSheen 7.5s cubic-bezier(.5,0,.25,1) infinite 2.4s;
  }
}

/* ── 3. THE .hx NIGHT PANEL ─────────────────────────────────────────────────
   "Watch your kids do the work." The right half of that stage is a solid
   colour panel today (a radial of --hx-l/--hx-p/--hx-d, which Midnight turns
   deep navy) — so it becomes the page's night sky without one pixel of the
   page getting darker than it already was. ::before there is the existing white
   glow, so the field goes on ::after; the screenshots are lifted above it. */
.hx-right::after{
  content:'';
  position:absolute; left:0; right:0; top:-560px; height:calc(100% + 1120px);
  z-index:0; pointer-events:none;
  background-image:var(--pmmn-far), var(--pmmn-near);
  background-size:560px 560px, 560px 560px;
  background-repeat:repeat, repeat;
  mix-blend-mode:screen;
  opacity:.85;
  animation:pmMnDriftBack 74s linear infinite, pmMnBreathe 9s ease-in-out infinite;
  will-change:transform, opacity;
}
/* ::after is the element's LAST child, so without this the field would paint
   over the product screenshots. The notification card is already z-index 5. */
.hx-right .hx-shots{ z-index:2 !important; }
/* two crisp sparkles in the panel's empty corners — the top-right one sits
   inside the existing white glow, the lower-left one in the deep corner. They
   are the only "look at me" moment in the section, and they are 14px wide. */
.hx-right .hx-msg::before{
  content:''; position:absolute; z-index:1; pointer-events:none;
  left:-34px; top:-30px; width:14px; height:14px;
  background:var(--pmmn-spark) center/contain no-repeat;
  opacity:.1; animation:pmMnTwinkle 5.4s ease-in-out infinite;
}
.hx-right .hx-msg::after{
  content:''; position:absolute; z-index:1; pointer-events:none;
  left:-58px; bottom:14px; width:9px; height:9px;
  background:var(--pmmn-spark) center/contain no-repeat;
  opacity:.1; animation:pmMnTwinkle 6.8s ease-in-out infinite 2.3s;
}

/* ── 4. THE WAITING LIST ────────────────────────────────────────────────────
   The pips that show how many spots are gone. The template already fills the
   taken ones with the theme gradient; Midnight walks a highlight along them
   every few seconds. It is the one bit of motion on the page that carries
   meaning rather than decoration, so it earns its place. */
.wlb-spot__pips i.is-taken{
  background:linear-gradient(90deg,var(--pm-spark-ink,#3C4A78),var(--pm-spark-lift,#5C74B8),var(--pm-spark-ink,#3C4A78)) !important;
  background-size:220% 100% !important;
  animation:pmMnPipShimmer 5.2s ease-in-out infinite;
}
@keyframes pmMnPipShimmer{ 0%,72%,100%{ background-position:100% 0; } 26%{ background-position:0 0; } }
/* the pill above them gets a single quiet sparkle, sized to the type */
.wlb__pill{ position:relative; }
.wlb__pill::after{
  content:''; position:absolute; right:-16px; top:-6px; width:9px; height:9px;
  pointer-events:none;
  /* the shared sparkle art is white, which would vanish on this white section —
     so here it is used as a MASK over a flat fill of the theme navy instead. */
  background:var(--pm-spark-ink,#3C4A78);
  -webkit-mask:var(--pmmn-spark) center/contain no-repeat;
          mask:var(--pmmn-spark) center/contain no-repeat;
  opacity:.1;
  animation:pmMnTwinkle 5.8s ease-in-out infinite 1.2s;
}

/* ── 5. THE CLOSING CTA ─────────────────────────────────────────────────────
   #pmFinalCta is a WHITE section with the arc of faces at the bottom, so white
   specks would be invisible and a dark panel would break the "don't make the
   page dark" rule. Instead: a wide, very soft navy aura at the top of the
   section, and a faint navy constellation inside it that fades out well above
   the faces. Nothing moves position here — only the breathe — because this is
   the page's resting point. */
#pmFinalCta{ position:relative; }
#pmFinalCta::before{
  content:''; position:absolute; z-index:0; pointer-events:none;
  left:0; right:0; top:0; height:62%;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(var(--pm-spark-rgb,60,74,120),.085) 0%, rgba(var(--pm-spark-rgb,60,74,120),.035) 44%, rgba(var(--pm-spark-rgb,60,74,120),0) 76%);
}
#pmFinalCta::after{
  content:''; position:absolute; z-index:0; pointer-events:none;
  left:0; right:0; top:0; height:56%;
  background-image:
    radial-gradient(1.7px 1.7px at 11% 22%, rgba(var(--pm-spark-rgb,60,74,120),.55), transparent 62%),
    radial-gradient(1.3px 1.3px at 26% 58%, rgba(var(--pm-spark-rgb,60,74,120),.40), transparent 62%),
    radial-gradient(2.0px 2.0px at 41% 14%, rgba(var(--pm-spark-rgb,60,74,120),.48), transparent 62%),
    radial-gradient(1.4px 1.4px at 63% 44%, rgba(var(--pm-spark-rgb,60,74,120),.38), transparent 62%),
    radial-gradient(1.8px 1.8px at 78% 19%, rgba(var(--pm-spark-rgb,60,74,120),.50), transparent 62%),
    radial-gradient(1.3px 1.3px at 91% 52%, rgba(var(--pm-spark-rgb,60,74,120),.36), transparent 62%),
    radial-gradient(1.6px 1.6px at 18% 78%, rgba(var(--pm-spark-rgb,60,74,120),.30), transparent 62%),
    radial-gradient(1.4px 1.4px at 55% 82%, rgba(var(--pm-spark-rgb,60,74,120),.26), transparent 62%),
    radial-gradient(1.5px 1.5px at 86% 74%, rgba(var(--pm-spark-rgb,60,74,120),.28), transparent 62%);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 46%,transparent 92%);
          mask-image:linear-gradient(180deg,#000 0%,#000 46%,transparent 92%);
  animation:pmMnBreatheSoft 13s ease-in-out infinite;
  will-change:opacity;
}
/* keep the copy and the faces above the aura */
#pmFinalCta .pm-final-cta__in{ position:relative; z-index:2; }
#pmFinalCta .pmarc-wrap{ position:relative; z-index:1; }

/* ── 6. THE PICKER ITSELF ───────────────────────────────────────────────────
   "hook up Midnight Navy to the theme button… the sparkle goes along with it."
   While Midnight is the live colour, the dock's swatch — and its phone twin —
   carry a small sparkle on the shoulder. Type, weight and spacing are the
   picker's own and are not touched, exactly as they are for every colour. */
#pmThemeDock .pmtt__sw,
#pmThemePhone .pmtp__sw{ position:relative; overflow:visible; }
#pmThemeDock .pmtt__sw::after,
#pmThemePhone .pmtp__sw::after{
  content:''; position:absolute; right:-5px; top:-6px; width:9px; height:9px;
  pointer-events:none;
  background:var(--pm-spark-lift,#5C74B8);
  -webkit-mask:var(--pmmn-spark) center/contain no-repeat;
          mask:var(--pmmn-spark) center/contain no-repeat;
  opacity:.1;
  animation:pmMnTwinkle 4.2s ease-in-out infinite;
}

/* ── REDUCED MOTION — everything stops, nothing disappears ─────────────────
   The fields and sparkles settle at a readable opacity instead of vanishing, so
   a visitor who asks for no motion still gets the night sky, just still. */
@media (prefers-reduced-motion:reduce){
  .hero__photo::before,
  .hx-right::after,
  #pmFinalCta::after,
  .wlb-spot__pips i.is-taken,
  .hero__btn::before, .pm-final-cta__btn::before, .wlb__go::before, .ckf-close__hire a::before,
  .hero__btn::after,  .pm-final-cta__btn::after,
  .hx-right .hx-msg::before, .hx-right .hx-msg::after,
  .wlb__pill::after,
  #pmThemeDock .pmtt__sw::after, #pmThemePhone .pmtp__sw::after{
    animation:none !important;
  }
  .hero__photo::before{ opacity:.6 !important; }
  .hx-right::after{ opacity:.7 !important; }
  #pmFinalCta::after{ opacity:.5 !important; }
  .hero__btn::before, .pm-final-cta__btn::before, .wlb__go::before, .ckf-close__hire a::before{
    opacity:0 !important;
  }
  .hero__btn::after, .pm-final-cta__btn::after,
  .hx-right .hx-msg::before, .hx-right .hx-msg::after, .wlb__pill::after,
  #pmThemeDock .pmtt__sw::after, #pmThemePhone .pmtp__sw::after{ opacity:.75 !important; }
}

/* ── PHONES ────────────────────────────────────────────────────────────────
   The hero photo is taller and the type sits lower on a phone, so the field is
   dialled back rather than removed — and the .hx stage stacks, which makes its
   panel short, so its field goes quiet too. The closing constellation is
   dropped entirely: at 390px the aura alone is the right amount. */
@media (max-width:760px){
  .hero__photo::before{ opacity:.55; }
  .hx-right::after{ opacity:.7; }
  #pmFinalCta::after{ display:none; }
  .hx-right .hx-msg::before, .hx-right .hx-msg::after{ display:none; }
}