/* =============================================================
   ZARAS — Page glow v4 (aurora bottom + radial rays)
   --------------------------------------------------------------
   v4 supersedes BOTH v2 (home/legal pages) and v3 (marketing
   pages) — single file, identical bottom glow on all 8 pages,
   per-page top-treatments preserved verbatim from v3.

   Bottom glow: revamped to a 3-layer aurora spectrum (brand
   teal base → cyan-teal mid lift → near-white luminous core)
   plus a slow-rotating conic ray pattern behind it. Reads as
   radiant horizon light instead of a single-tone wash.

     - body::after  — aurora wash (3 stacked radial gradients)
     - body::before — conic ray spokes, masked + rotating
     - Both animate independently:
         after:  brightness/opacity pulse over 22s
         before: rotation over 60s + opacity drift

   Per-page TOP treatments (unchanged from v3):
     platform   — cool electric blue · diagonal sweep · scan drift
     industries — warm amber sunrise · bottom horizon rise · heat haze
     pricing    — confident gold · centered bloom · pulse
     company    — brand teal horizon · refined v2, navbar bleed allowed

   Drama rule: platform + industries are allowed to bleed BEHIND
   the navbar. company + pricing stay anchored below it.
   ============================================================= */

:root {
  --signal-rgb: 118 199 178;       /* brand teal */
  --warm-rgb:   239 236 230;
  --nav-h: 64px;
  --banner-h: 0px;

  /* v4 aurora spectrum (tints of teal toward cyan/white) */
  --glow-mid-rgb: 168 226 218;     /* soft cyan-teal mid */
  --glow-hot-rgb: 230 248 240;     /* near-white luminous core */

  /* Per-page hues (rgb triplets so we can mix opacities cleanly) */
  --plat-rgb:  138 178 255;        /* cool electric blue */
  --plat-hot:  198 218 255;        /* near-white blue ridge */
  --ind-rgb:   245 168 110;        /* warm amber/peach */
  --ind-hot:   255 220 180;        /* warm cream highlight */
  --price-rgb: 232 196 110;        /* confident gold */
  --price-hot: 255 232 168;        /* gold highlight */
}

body[data-page="home"],
body[data-page="platform"],
body[data-page="industries"],
body[data-page="pricing"],
body[data-page="company"],
body[data-page="privacy"],
body[data-page="terms"],
body[data-page="sms-consent"],
body[data-page="careers"] {
  position: relative;
  isolation: isolate;
}

/* =============================================================
   AURORA BOTTOM GLOW — identical on every page (8 selectors).
   Layer A (::after): 3-stop spectrum wash.
   Layer B (::before): conic ray spokes, behind the wash.
   ============================================================= */

/* -- Layer A: aurora wash --------------------------------------- */
body[data-page="home"]::after,
body[data-page="platform"]::after,
body[data-page="industries"]::after,
body[data-page="pricing"]::after,
body[data-page="company"]::after,
body[data-page="privacy"]::after,
body[data-page="terms"]::after,
body[data-page="sms-consent"]::after,
body[data-page="careers"]::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  width: 100%;
  height: clamp(460px, 75vh, 880px);
  pointer-events: none;
  z-index: -1;
  mix-blend-mode: screen;
  filter: blur(clamp(14px, 1.8vw, 24px));
  background:
    /* 1 — hot luminous core (well above the footer-copy row) */
    radial-gradient(ellipse 22% 32% at 52% 76%,
      rgb(var(--glow-hot-rgb) / 0.32) 0%,
      rgb(var(--glow-hot-rgb) / 0.12) 20%,
      rgb(var(--glow-hot-rgb) / 0.03) 44%,
      transparent 66%),
    /* 2 — mid spectrum lift (cyan-teal) */
    radial-gradient(ellipse 58% 78% at 52% 88%,
      rgb(var(--glow-mid-rgb) / 0.30) 0%,
      rgb(var(--glow-mid-rgb) / 0.13) 30%,
      rgb(var(--glow-mid-rgb) / 0.04) 60%,
      transparent 84%),
    /* 3 — base teal wash (brand floor anchor) */
    radial-gradient(ellipse 100% 135% at 50% 100%,
      rgb(var(--signal-rgb) / 0.20) 0%,
      rgb(var(--signal-rgb) / 0.09) 34%,
      rgb(var(--signal-rgb) / 0.03) 60%,
      transparent 100%);
}

/* -- Layer B: radial ray spokes (behind the wash) --------------- */
body[data-page="home"]::before,
body[data-page="platform"]::before,
body[data-page="industries"]::before,
body[data-page="pricing"]::before,
body[data-page="company"]::before,
body[data-page="privacy"]::before,
body[data-page="terms"]::before,
body[data-page="sms-consent"]::before,
body[data-page="careers"]::before {
  content: "";
  position: absolute;
  /* Full-width, anchored at body bottom (no negative offset — that would
     extend body's scrollable area). The conic's bottom-anchor (50% 100%)
     sits exactly at the page bottom; the upper ray fan emerges above it. */
  left: 0; right: 0; bottom: 0;
  height: 1100px;
  pointer-events: none;
  z-index: -2;
  mix-blend-mode: screen;
  filter: blur(clamp(24px, 2.6vw, 42px));
  background:
    conic-gradient(from 200deg at 50% 100%,
      transparent 0deg,
      rgb(var(--signal-rgb) / 0.07) 8deg,
      transparent 18deg,
      transparent 38deg,
      rgb(var(--glow-mid-rgb) / 0.08) 50deg,
      transparent 62deg,
      transparent 84deg,
      rgb(var(--signal-rgb) / 0.06) 96deg,
      transparent 110deg,
      transparent 128deg,
      rgb(var(--glow-mid-rgb) / 0.07) 142deg,
      transparent 158deg,
      transparent 320deg);
  -webkit-mask-image:
    radial-gradient(ellipse 70% 85% at 50% 100%,
      black 6%, black 24%, transparent 72%);
          mask-image:
    radial-gradient(ellipse 70% 85% at 50% 100%,
      black 6%, black 24%, transparent 72%);
  transform-origin: 50% 100%;
  opacity: 0.85;
}

/* -- Animations ------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  body[data-page="home"]::after,
  body[data-page="platform"]::after,
  body[data-page="industries"]::after,
  body[data-page="pricing"]::after,
  body[data-page="company"]::after,
  body[data-page="privacy"]::after,
  body[data-page="terms"]::after,
  body[data-page="sms-consent"]::after,
  body[data-page="careers"]::after {
    will-change: opacity, filter;
    animation: zaras-aurora-breath 22s ease-in-out infinite;
    animation-delay: -11s;
  }
  body[data-page="home"]::before,
  body[data-page="platform"]::before,
  body[data-page="industries"]::before,
  body[data-page="pricing"]::before,
  body[data-page="company"]::before,
  body[data-page="privacy"]::before,
  body[data-page="terms"]::before,
  body[data-page="sms-consent"]::before,
  body[data-page="careers"]::before {
    will-change: opacity, filter;
    animation: zaras-aurora-rays 18s ease-in-out infinite;
    animation-delay: -9s;
  }
}
@keyframes zaras-aurora-breath {
  0%, 100% { opacity: 0.94; filter: blur(clamp(14px, 1.8vw, 24px)) brightness(1);    }
  50%      { opacity: 1;    filter: blur(clamp(15px, 2.0vw, 26px)) brightness(1.10); }
}
@keyframes zaras-aurora-rays {
  0%, 100% { opacity: 0.72; filter: blur(clamp(24px, 2.6vw, 42px)) brightness(1);    }
  50%      { opacity: 0.94; filter: blur(clamp(26px, 2.8vw, 44px)) brightness(1.12); }
}

/* =============================================================
   TOP-LIGHT ROOT — shared positioning (unchanged from v3).
   Anchored to the top of the document (absolute, not fixed) so the
   glow scrolls away with the hero instead of trailing the viewport.
   Pages that ALLOW navbar bleed override `top` to 0.
   ============================================================= */
.page-glow-top {
  position: absolute;
  top: calc(var(--banner-h) + var(--nav-h));
  left: 0; right: 0;
  height: clamp(380px, 65vh, 760px);
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  overflow: clip;
}

/* Drama: platform + industries bleed behind the navbar */
body[data-page="platform"]   .page-glow-top--bleed,
body[data-page="industries"] .page-glow-top--bleed {
  top: 0;
  height: clamp(560px, 88vh, 980px);
}

/* =============================================================
   COMPANY — refined teal horizon (unchanged from v3)
   ============================================================= */
body[data-page="company"] {
  --t-fade: 450ms;
  --t-glow: 1100ms;
}
.page-glow-top--horizon > .phl-line,
.page-glow-top--horizon::before,
.page-glow-top--horizon::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  pointer-events: none;
  mix-blend-mode: screen;
}
.page-glow-top--horizon > .phl-line {
  top: 0;
  height: 140px;
  filter: blur(10px);
  background:
    radial-gradient(ellipse 36% 100% at 52% 0%,
      rgba(205, 233, 224, 0.85) 0%,
      rgb(var(--signal-rgb) / 0.65) 22%,
      rgb(var(--signal-rgb) / 0.20) 55%,
      transparent 100%);
  transform-origin: 52% 0%;
  transform: scaleX(0.05) scaleY(0.4);
  opacity: 0;
  animation: phl-line var(--t-glow) cubic-bezier(.16,.84,.32,1) forwards;
}
.page-glow-top--horizon::before {
  top: 0;
  height: clamp(280px, 50vh, 560px);
  filter: blur(clamp(20px, 2.4vw, 36px));
  background:
    radial-gradient(ellipse 55% 80% at 52% 0%,
      rgb(var(--warm-rgb) / 0.10) 0%,
      rgb(var(--signal-rgb) / 0.42) 14%,
      rgb(var(--signal-rgb) / 0.16) 44%,
      transparent 80%);
  transform-origin: 52% 0%;
  transform: scale(0.08);
  opacity: 0;
  animation: phl-halo var(--t-glow) cubic-bezier(.2,.7,.2,1) 80ms forwards;
}
.page-glow-top--horizon::after {
  top: 0;
  height: clamp(420px, 70vh, 820px);
  filter: blur(clamp(28px, 3vw, 48px));
  background:
    radial-gradient(ellipse 110% 65% at 50% 0%,
      rgb(var(--signal-rgb) / 0.10) 0%,
      rgb(var(--signal-rgb) / 0.04) 38%,
      transparent 78%),
    radial-gradient(ellipse 60% 30% at 50% 0%,
      rgb(var(--warm-rgb) / 0.04) 0%,
      transparent 70%);
  transform-origin: 50% 0%;
  transform: scale(0.4);
  opacity: 0;
  animation: phl-wash calc(var(--t-glow) * 1.15) cubic-bezier(.25,.8,.25,1) 180ms forwards;
}
@media (prefers-reduced-motion: no-preference) {
  .page-glow-top--horizon > .phl-line {
    animation:
      phl-line var(--t-glow) cubic-bezier(.16,.84,.32,1) forwards,
      phl-shimmer 6s ease-in-out var(--t-glow) infinite;
  }
}
@keyframes phl-line {
  0%   { opacity: 0;    transform: scaleX(0.04) scaleY(0.4); }
  35%  { opacity: 1;                                          }
  100% { opacity: 0.92; transform: scaleX(1)    scaleY(1);   }
}
@keyframes phl-halo {
  0%   { opacity: 0;    transform: scale(0.08); }
  40%  { opacity: 0.7;                          }
  100% { opacity: 1;    transform: scale(1);    }
}
@keyframes phl-wash {
  0%   { opacity: 0; transform: scale(0.4); }
  100% { opacity: 1; transform: scale(1);   }
}
@keyframes phl-shimmer {
  0%, 100% { filter: blur(10px) brightness(1);    }
  50%      { filter: blur(11px) brightness(1.08); }
}

/* =============================================================
   PLATFORM — cool electric blue · DIAGONAL SWEEP (unchanged from v3)
   ============================================================= */
body[data-page="platform"] {
  --t-fade: 500ms;
  --t-glow: 1200ms;
}
.page-glow-top--sweep > .phs-beam,
.page-glow-top--sweep::before,
.page-glow-top--sweep::after {
  content: "";
  position: absolute;
  pointer-events: none;
  mix-blend-mode: screen;
}
.page-glow-top--sweep > .phs-beam {
  top: -40%;
  left: -20%;
  width: 140%;
  height: 80%;
  transform-origin: 0% 0%;
  transform: rotate(-18deg) translateX(-110%);
  background:
    linear-gradient(90deg,
      transparent 0%,
      rgb(var(--plat-rgb) / 0.0) 20%,
      rgb(var(--plat-rgb) / 0.40) 45%,
      rgb(var(--plat-hot) / 0.65) 50%,
      rgb(var(--plat-rgb) / 0.40) 55%,
      rgb(var(--plat-rgb) / 0.0) 80%,
      transparent 100%);
  filter: blur(clamp(28px, 3vw, 56px));
  opacity: 0;
  animation: phs-sweep var(--t-glow) cubic-bezier(.16,.84,.32,1) forwards;
}
.page-glow-top--sweep::before {
  top: 0;
  left: 0;
  width: 70%;
  height: 100%;
  background:
    radial-gradient(ellipse 80% 100% at 18% 18%,
      rgb(var(--plat-hot) / 0.18) 0%,
      rgb(var(--plat-rgb) / 0.22) 22%,
      rgb(var(--plat-rgb) / 0.07) 55%,
      transparent 85%);
  filter: blur(clamp(28px, 3vw, 48px));
  opacity: 0;
  transform: scale(0.6);
  transform-origin: 18% 18%;
  animation: phs-wash calc(var(--t-glow) * 1.1) cubic-bezier(.25,.8,.25,1) 200ms forwards;
}
.page-glow-top--sweep::after {
  top: 0; left: 0; right: 0; bottom: 0;
  background:
    repeating-linear-gradient(
      to bottom,
      transparent 0px,
      transparent 3px,
      rgb(var(--plat-rgb) / 0.05) 3px,
      rgb(var(--plat-rgb) / 0.05) 4px);
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 30% 30%, black 0%, transparent 70%);
          mask-image: radial-gradient(ellipse 70% 80% at 30% 30%, black 0%, transparent 70%);
  opacity: 0;
  animation:
    phs-scan-in calc(var(--t-glow) * 0.6) ease-out calc(var(--t-glow) * 0.7) forwards,
    phs-scan-drift 14s linear calc(var(--t-glow) * 0.7) infinite;
}
@keyframes phs-sweep {
  0%   { opacity: 0;    transform: rotate(-18deg) translateX(-110%); }
  20%  { opacity: 0.9;                                                }
  100% { opacity: 0.55; transform: rotate(-18deg) translateX(20%);    }
}
@keyframes phs-wash {
  0%   { opacity: 0;    transform: scale(0.6); }
  100% { opacity: 1;    transform: scale(1);   }
}
@keyframes phs-scan-in {
  0%   { opacity: 0; }
  100% { opacity: 0.6; }
}
@keyframes phs-scan-drift {
  0%   { background-position: 0 0;     }
  100% { background-position: 0 -120px;}
}

/* =============================================================
   INDUSTRIES — warm amber sunrise · BOTTOM HORIZON RISE (unchanged from v3)
   ============================================================= */
body[data-page="industries"] {
  --t-fade: 550ms;
  --t-glow: 1400ms;
}
body[data-page="industries"] .page-glow-top--bleed.page-glow-top--rise {
  top: 0;
  height: 100vh;
}
.page-glow-top--rise > .phr-sun,
.page-glow-top--rise::before,
.page-glow-top--rise::after {
  content: "";
  position: absolute;
  pointer-events: none;
  mix-blend-mode: screen;
  left: 0; right: 0;
}
.page-glow-top--rise > .phr-sun {
  bottom: 8%;
  height: 60%;
  background:
    radial-gradient(ellipse 50% 90% at 50% 100%,
      rgb(var(--ind-hot) / 0.55) 0%,
      rgb(var(--ind-rgb) / 0.55) 18%,
      rgb(var(--ind-rgb) / 0.20) 45%,
      transparent 78%);
  filter: blur(clamp(20px, 2.4vw, 40px));
  transform-origin: 50% 100%;
  transform: translateY(80%) scaleY(0.4);
  opacity: 0;
  animation: phr-sun var(--t-glow) cubic-bezier(.22,.8,.32,1) forwards;
}
.page-glow-top--rise::before {
  bottom: 25%;
  height: 70%;
  background:
    radial-gradient(ellipse 90% 70% at 50% 100%,
      rgb(var(--ind-hot) / 0.18) 0%,
      rgb(var(--ind-rgb) / 0.30) 22%,
      rgb(var(--ind-rgb) / 0.10) 55%,
      transparent 82%);
  filter: blur(clamp(28px, 3vw, 48px));
  transform-origin: 50% 100%;
  transform: translateY(40%) scale(0.6, 0.4);
  opacity: 0;
  animation: phr-halo calc(var(--t-glow) * 1.05) cubic-bezier(.25,.8,.25,1) 200ms forwards;
}
.page-glow-top--rise::after {
  top: 0;
  height: 70%;
  background:
    radial-gradient(ellipse 120% 80% at 50% 100%,
      rgb(var(--ind-rgb) / 0.10) 0%,
      rgb(var(--ind-rgb) / 0.04) 35%,
      transparent 70%);
  filter: blur(clamp(28px, 3vw, 56px));
  opacity: 0;
  transform: translateY(20%);
  animation: phr-crest calc(var(--t-glow) * 1.2) cubic-bezier(.25,.8,.25,1) 350ms forwards;
}
@media (prefers-reduced-motion: no-preference) {
  .page-glow-top--rise > .phr-sun {
    animation:
      phr-sun var(--t-glow) cubic-bezier(.22,.8,.32,1) forwards,
      phr-haze 9s ease-in-out var(--t-glow) infinite;
  }
}
@keyframes phr-sun {
  0%   { opacity: 0;    transform: translateY(80%) scaleY(0.4); }
  40%  { opacity: 1;                                             }
  100% { opacity: 0.95; transform: translateY(0%)  scaleY(1);   }
}
@keyframes phr-halo {
  0%   { opacity: 0; transform: translateY(40%) scale(0.6, 0.4); }
  100% { opacity: 1; transform: translateY(0%)  scale(1, 1);     }
}
@keyframes phr-crest {
  0%   { opacity: 0; transform: translateY(20%); }
  100% { opacity: 1; transform: translateY(0%);  }
}
@keyframes phr-haze {
  0%, 100% { filter: blur(clamp(20px, 2.4vw, 40px)) brightness(1); }
  50%      { filter: blur(clamp(22px, 2.6vw, 44px)) brightness(1.06); }
}

/* =============================================================
   PRICING — confident gold · CENTERED BLOOM (unchanged from v3)
   ============================================================= */
body[data-page="pricing"] {
  --t-fade: 380ms;
  --t-glow: 900ms;
}
.page-glow-top--bloom > .phb-core,
.page-glow-top--bloom > .phb-ring,
.page-glow-top--bloom::before,
.page-glow-top--bloom::after {
  content: "";
  position: absolute;
  pointer-events: none;
  mix-blend-mode: screen;
  left: 50%;
  top: 28%;
}
.page-glow-top--bloom > .phb-core {
  width: 280px;
  height: 280px;
  margin: -140px 0 0 -140px;
  background:
    radial-gradient(circle at 50% 50%,
      rgb(var(--price-hot) / 0.85) 0%,
      rgb(var(--price-rgb) / 0.70) 18%,
      rgb(var(--price-rgb) / 0.30) 38%,
      transparent 70%);
  filter: blur(18px);
  transform: scale(0.05);
  opacity: 0;
  animation:
    phb-core var(--t-glow) cubic-bezier(.16,.84,.32,1) forwards,
    phb-pulse 4s ease-in-out var(--t-glow) infinite;
}
.page-glow-top--bloom > .phb-ring {
  width: 600px;
  height: 600px;
  margin: -300px 0 0 -300px;
  border-radius: 50%;
  background: transparent;
  box-shadow:
    inset 0 0 0 1px rgb(var(--price-rgb) / 0.45),
    0 0 60px 8px rgb(var(--price-rgb) / 0.25);
  filter: blur(2px);
  transform: scale(0.05);
  opacity: 0;
  animation: phb-ring var(--t-glow) cubic-bezier(.2,.8,.3,1) 80ms forwards;
}
.page-glow-top--bloom::before {
  width: 1200px;
  height: 700px;
  margin: -350px 0 0 -600px;
  background:
    radial-gradient(ellipse 50% 50% at 50% 50%,
      rgb(var(--price-rgb) / 0.18) 0%,
      rgb(var(--price-rgb) / 0.06) 40%,
      transparent 75%);
  filter: blur(clamp(30px, 3vw, 56px));
  transform: scale(0.3);
  opacity: 0;
  animation: phb-wash calc(var(--t-glow) * 1.2) cubic-bezier(.25,.8,.25,1) 140ms forwards;
}
.page-glow-top--bloom::after {
  width: 900px;
  height: 900px;
  margin: -450px 0 0 -450px;
  background:
    conic-gradient(from 0deg at 50% 50%,
      transparent 0deg,
      rgb(var(--price-rgb) / 0.06) 22deg,
      transparent 44deg,
      transparent 90deg,
      rgb(var(--price-rgb) / 0.05) 112deg,
      transparent 134deg,
      transparent 180deg,
      rgb(var(--price-rgb) / 0.06) 202deg,
      transparent 224deg,
      transparent 270deg,
      rgb(var(--price-rgb) / 0.05) 292deg,
      transparent 314deg);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, black 5%, transparent 60%);
          mask-image: radial-gradient(circle at 50% 50%, black 5%, transparent 60%);
  filter: blur(8px);
  transform: scale(0.2) rotate(0deg);
  opacity: 0;
  animation: phb-rays calc(var(--t-glow) * 1.4) cubic-bezier(.25,.8,.25,1) 200ms forwards;
}
@keyframes phb-core {
  0%   { opacity: 0;    transform: scale(0.05); }
  60%  { opacity: 1;                            }
  100% { opacity: 0.92; transform: scale(1);    }
}
@keyframes phb-ring {
  0%   { opacity: 0;   transform: scale(0.05); }
  40%  { opacity: 0.9;                         }
  100% { opacity: 0;   transform: scale(1.05); }
}
@keyframes phb-wash {
  0%   { opacity: 0; transform: scale(0.3); }
  100% { opacity: 1; transform: scale(1);   }
}
@keyframes phb-rays {
  0%   { opacity: 0;   transform: scale(0.2) rotate(0deg); }
  100% { opacity: 0.7; transform: scale(1)   rotate(40deg); }
}
@keyframes phb-pulse {
  0%, 100% { filter: blur(18px) brightness(1);    }
  50%      { filter: blur(20px) brightness(1.10); }
}

/* =============================================================
   REDUCED MOTION — composed final state, no entry animations.
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  body[data-page="home"]::after,
  body[data-page="platform"]::after,
  body[data-page="industries"]::after,
  body[data-page="pricing"]::after,
  body[data-page="company"]::after,
  body[data-page="privacy"]::after,
  body[data-page="terms"]::after,
  body[data-page="sms-consent"]::after,
  body[data-page="careers"]::after,
  body[data-page="home"]::before,
  body[data-page="platform"]::before,
  body[data-page="industries"]::before,
  body[data-page="pricing"]::before,
  body[data-page="company"]::before,
  body[data-page="privacy"]::before,
  body[data-page="terms"]::before,
  body[data-page="sms-consent"]::before,
  body[data-page="careers"]::before {
    animation: none !important;
  }
  .page-glow-top--horizon > .phl-line,
  .page-glow-top--horizon::before,
  .page-glow-top--horizon::after,
  .page-glow-top--sweep > .phs-beam,
  .page-glow-top--sweep::before,
  .page-glow-top--sweep::after,
  .page-glow-top--rise > .phr-sun,
  .page-glow-top--rise::before,
  .page-glow-top--rise::after,
  .page-glow-top--bloom > .phb-core,
  .page-glow-top--bloom > .phb-ring,
  .page-glow-top--bloom::before,
  .page-glow-top--bloom::after {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .page-glow-top--bloom > .phb-ring { opacity: 0 !important; }
}

/* =============================================================
   CAREERS — "GATHER" top-glow (v6)
   ------------------------------------------------------------
   Cinematic on-load convergence. Layers fade up sequentially
   (horizon → core → wash → rays → sparks) over ~1.8s, then
   settle into a quiet core breath + spark twinkle. No transforms
   on entry — pure opacity "lights coming up" feel.
   ============================================================= */

body[data-page="careers"] {
  --car-teal: 118 199 178;
  --car-mid:  168 226 218;
  --car-hot:  230 248 240;
  --car-warm: 239 236 230;
  --t-fade:   520ms;
  --t-core:  1600ms;
  --t-rays:  1800ms;
}

body[data-page="careers"] .page-glow-top--gather {
  top: 0;
  height: clamp(620px, 92vh, 1040px);
}

.page-glow-top--gather,
.page-glow-top--gather > * { pointer-events: none; }

.page-glow-top--gather > .phg-core,
.page-glow-top--gather > .phg-rays,
.page-glow-top--gather > .phg-horizon,
.page-glow-top--gather > .phg-sparks,
.page-glow-top--gather::before,
.page-glow-top--gather::after {
  position: absolute;
  mix-blend-mode: screen;
  pointer-events: none;
}

/* Layer 1 — soft wash halo */
.page-glow-top--gather::after {
  content: "";
  inset: 0;
  background:
    radial-gradient(ellipse 70% 80% at 50% 8%,
      rgb(var(--car-warm) / 0.05) 0%,
      rgb(var(--car-teal) / 0.32) 14%,
      rgb(var(--car-teal) / 0.12) 42%,
      transparent 78%);
  filter: blur(clamp(28px, 3vw, 52px));
  opacity: 0;
  animation: phg-wash 1900ms cubic-bezier(.4,.0,.2,1) 360ms forwards;
}

/* Layer 2 — volumetric god-rays (conic) */
.page-glow-top--gather::before {
  content: "";
  top: 0;
  left: 50%;
  width: 200vmax;
  height: clamp(720px, 110vh, 1240px);
  margin-left: -100vmax;
  background:
    conic-gradient(from 168deg at 50% 0%,
      transparent 0deg, transparent 18deg,
      rgb(var(--car-mid)  / 0.16)  22deg, transparent  26deg, transparent  36deg,
      rgb(var(--car-teal) / 0.13)  40deg, transparent  44deg, transparent  54deg,
      rgb(var(--car-hot)  / 0.20)  58deg, transparent  62deg, transparent  72deg,
      rgb(var(--car-mid)  / 0.18)  76deg, transparent  80deg, transparent  90deg,
      rgb(var(--car-hot)  / 0.22)  94deg, transparent  98deg, transparent 108deg,
      rgb(var(--car-mid)  / 0.18) 112deg, transparent 116deg, transparent 126deg,
      rgb(var(--car-teal) / 0.13) 130deg, transparent 134deg, transparent 144deg,
      rgb(var(--car-mid)  / 0.16) 148deg, transparent 152deg, transparent 360deg);
  -webkit-mask-image: radial-gradient(ellipse 60% 85% at 50% 0%, black 0%, black 22%, rgba(0,0,0,0.55) 50%, transparent 88%);
          mask-image: radial-gradient(ellipse 60% 85% at 50% 0%, black 0%, black 22%, rgba(0,0,0,0.55) 50%, transparent 88%);
  filter: blur(clamp(8px, 1vw, 14px)) saturate(115%);
  opacity: 0;
  animation: phg-rays var(--t-rays) cubic-bezier(.4,.0,.2,1) 440ms forwards;
}

/* Layer 3 — luminous core */
.page-glow-top--gather > .phg-core {
  top: 0; left: 50%;
  width: 460px; height: 460px;
  margin: -230px 0 0 -230px;
  background:
    radial-gradient(circle at 50% 50%,
      rgb(var(--car-hot)  / 0.95) 0%,
      rgb(var(--car-hot)  / 0.60) 8%,
      rgb(var(--car-mid)  / 0.50) 18%,
      rgb(var(--car-teal) / 0.32) 32%,
      rgb(var(--car-teal) / 0.12) 50%,
      transparent 72%);
  filter: blur(18px);
  opacity: 0;
  animation:
    phg-core var(--t-core) cubic-bezier(.4,.0,.2,1) 220ms forwards,
    phg-core-breath 8s ease-in-out calc(var(--t-core) + 220ms) infinite;
}

/* Layer 4 — horizon hairline */
.page-glow-top--gather > .phg-horizon {
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%, rgb(var(--car-teal) / 0) 8%,
    rgb(var(--car-teal) / 0.55) 26%, rgb(var(--car-hot) / 0.95) 50%,
    rgb(var(--car-teal) / 0.55) 74%, rgb(var(--car-teal) / 0) 92%,
    transparent 100%);
  box-shadow: 0 0 22px rgb(var(--car-teal) / 0.45), 0 0 44px rgb(var(--car-teal) / 0.18);
  opacity: 0;
  animation: phg-horizon 1100ms cubic-bezier(.4,.0,.2,1) 80ms forwards;
}

/* Layer 5 — constellation sparks */
.page-glow-top--gather > .phg-sparks {
  inset: 0;
  background:
    radial-gradient(circle 1.5px at 14% 22%, rgb(var(--car-mid) / 0.95), transparent 100%),
    radial-gradient(circle 1px   at 22% 12%, rgb(var(--car-mid) / 0.70), transparent 100%),
    radial-gradient(circle 2px   at 32% 30%, rgb(var(--car-hot) / 0.95), transparent 100%),
    radial-gradient(circle 1px   at 41% 8%,  rgb(var(--car-mid) / 0.60), transparent 100%),
    radial-gradient(circle 1.5px at 48% 18%, rgb(var(--car-hot) / 0.80), transparent 100%),
    radial-gradient(circle 1px   at 56% 9%,  rgb(var(--car-mid) / 0.55), transparent 100%),
    radial-gradient(circle 2px   at 63% 24%, rgb(var(--car-hot) / 0.95), transparent 100%),
    radial-gradient(circle 1px   at 71% 14%, rgb(var(--car-mid) / 0.65), transparent 100%),
    radial-gradient(circle 1.5px at 79% 28%, rgb(var(--car-mid) / 0.85), transparent 100%),
    radial-gradient(circle 1px   at 86% 16%, rgb(var(--car-mid) / 0.50), transparent 100%),
    radial-gradient(circle 1px   at 9%  34%, rgb(var(--car-mid) / 0.55), transparent 100%),
    radial-gradient(circle 1px   at 91% 36%, rgb(var(--car-mid) / 0.55), transparent 100%);
  filter:
    drop-shadow(0 0 4px rgb(var(--car-teal) / 0.55))
    drop-shadow(0 0 12px rgb(var(--car-teal) / 0.20));
  -webkit-mask-image: radial-gradient(ellipse 95% 60% at 50% 12%, black 30%, transparent 88%);
          mask-image: radial-gradient(ellipse 95% 60% at 50% 12%, black 30%, transparent 88%);
  opacity: 0;
  animation:
    phg-sparks-in 1800ms cubic-bezier(.4,.0,.2,1) 700ms forwards,
    phg-sparks-twinkle 9s ease-in-out calc(var(--t-rays) + 600ms) infinite;
}

/* Keyframes — pure opacity "lights coming up" */
@keyframes phg-wash    { 0% { opacity: 0; } 100% { opacity: 1; } }
@keyframes phg-rays    { 0% { opacity: 0; } 100% { opacity: 0.85; } }
@keyframes phg-core    { 0% { opacity: 0; } 100% { opacity: 0.96; } }
@keyframes phg-horizon { 0% { opacity: 0; } 100% { opacity: 0.92; } }
@keyframes phg-sparks-in { 0% { opacity: 0; } 100% { opacity: 0.85; } }
@keyframes phg-core-breath {
  0%, 100% { filter: blur(18px) brightness(1);    }
  50%      { filter: blur(20px) brightness(1.08); }
}
@keyframes phg-sparks-twinkle {
  0%, 100% { opacity: 0.78; filter: drop-shadow(0 0 4px  rgb(var(--car-teal) / 0.55)) drop-shadow(0 0 12px rgb(var(--car-teal) / 0.20)); }
  50%      { opacity: 0.95; filter: drop-shadow(0 0 6px  rgb(var(--car-teal) / 0.75)) drop-shadow(0 0 18px rgb(var(--car-teal) / 0.32)); }
}

/* Reduced motion: final state, no entry */
@media (prefers-reduced-motion: reduce) {
  .page-glow-top--gather::before,
  .page-glow-top--gather::after,
  .page-glow-top--gather > .phg-core,
  .page-glow-top--gather > .phg-horizon,
  .page-glow-top--gather > .phg-sparks {
    animation: none !important;
    opacity: 1 !important;
  }
}

/* =============================================================
   PAGE CONTENT FADE-IN (marketing pages, unchanged from v3)
   ============================================================= */
body[data-page="company"]   .page,
body[data-page="platform"]  .page,
body[data-page="industries"] .page,
body[data-page="pricing"]   .page,
body[data-page="careers"]   .page {
  animation: zaras-page-fade var(--t-fade) cubic-bezier(.4,.0,.2,1) 80ms both;
}
@keyframes zaras-page-fade {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  body[data-page="company"]    .page,
  body[data-page="platform"]   .page,
  body[data-page="industries"] .page,
  body[data-page="pricing"]    .page,
  body[data-page="careers"]    .page { animation: none; }
}