/* =============================================================
   ZARAS — Page glow v2
   v2 changes vs v1:
     - Top glow is now per-route. Company gets a 3-layer teal
       horizon that animates in from a tiny point on page load.
     - Top glow is anchored BELOW the navbar (top: var(--nav-h))
       so the navbar always reads on pure black, regardless of
       glow intensity. Fixes the "navbar lights up green on
       /company" issue from v1.
     - Bottom glow is unchanged — same composition, same breath.
     - Home keeps its bottom-only treatment.
     - Privacy / terms / sms-consent: top glow REMOVED (per
       updated spec, only company gets a unique top glow now).
   ============================================================= */

:root {
  --signal-rgb: 118 199 178;
  --warm-rgb:   239 236 230;
  --nav-h: 64px;
  --banner-h: 0px;
  --t-fade: 450ms;
  --t-glow: 1000ms;
}

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

/* -------- BOTTOM GLOW — unchanged from v1 ------------------- */
body[data-page="home"]::after,
body[data-page="company"]::after,
body[data-page="privacy"]::after,
body[data-page="terms"]::after,
body[data-page="sms-consent"]::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  width: 100%;
  height: clamp(420px, 70vh, 820px);
  pointer-events: none;
  z-index: -1;
  mix-blend-mode: screen;
  filter: blur(clamp(12px, 1.6vw, 22px));
  background:
    radial-gradient(ellipse 50% 70% at 52% 100%,
      rgb(var(--warm-rgb) / 0.05) 0%,
      rgb(var(--signal-rgb) / 0.30) 14%,
      rgb(var(--signal-rgb) / 0.10) 48%,
      transparent 100%),
    radial-gradient(ellipse 95% 130% at 50% 100%,
      rgb(var(--signal-rgb) / 0.10) 0%,
      rgb(var(--signal-rgb) / 0.04) 42%,
      transparent 100%);
}

/* Bottom-glow ambient breath (kept verbatim from v1) */
@media (prefers-reduced-motion: no-preference) {
  body[data-page="home"]::after,
  body[data-page="company"]::after,
  body[data-page="privacy"]::after,
  body[data-page="terms"]::after,
  body[data-page="sms-consent"]::after {
    will-change: opacity;
    animation: zaras-glow-breath 22s ease-in-out infinite;
    animation-delay: -11s;
  }
}
@keyframes zaras-glow-breath {
  0%, 100% { opacity: 0.96; }
  50%      { opacity: 1; }
}

/* =============================================================
   TOP GLOW — Company only, three-layer teal horizon
   =============================================================
   Markup contract (added to company.html below the navbar):

     <div class="page-glow-top page-glow-top--horizon" aria-hidden="true">
       <span class="phl-line"></span>
     </div>

   Three composed layers:
     1. .phl-line  — sharp horizon line (focal beat)
     2. ::before   — soft halo ABOVE the line
     3. ::after    — wide atmospheric WASH below

   Each layer has its own bloom curve; the line arrives first,
   then the halo, then the wash. That cascade is what makes the
   entry feel composed instead of "fade in."

   Anchored at top: var(--banner-h) + var(--nav-h) so it sits
   strictly below the navbar — navbar always on pure black.
   ============================================================= */
.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;
}

.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;
}

/* Layer 1 — sharp horizon line */
.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;
}

/* Layer 2 — soft halo above the line */
.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;
}

/* Layer 3 — wide atmospheric wash */
.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;
}

/* Post-arrival shimmer on the line so it doesn't feel static */
@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); }
}

/* Reduced-motion: keep the composition, drop the bloom */
@media (prefers-reduced-motion: reduce) {
  .page-glow-top--horizon > .phl-line,
  .page-glow-top--horizon::before,
  .page-glow-top--horizon::after {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* =============================================================
   PAGE CONTENT FADE-IN (company)
   ============================================================= */
body[data-page="company"] .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 { animation: none; }
}

/* =============================================================
   PAGE CONTENT FADE-IN (home — ultra-premium variant)
   - Pre-reveal: main.shell sits at the animation's "from" state so
     the bundler's FOUC gate release doesn't expose mostly-finished
     content (the document timeline ticks while content is hidden).
   - Reveal: bundler script adds .is-revealed on body at the same
     frame the gate lifts; animation then plays from the visible moment.
   - Fallback (no filter): opacity + translate + subtle scale
   - Enhanced (filter supported): adds soft blur-in
   - will-change scoped to one top-level wrapper, used only on reveal
   ============================================================= */
body[data-page="home"] main.shell {
  opacity: 0;
  transform: translateY(10px) scale(.997);
}

body[data-page="home"].is-revealed main.shell {
  animation: zaras-home-fade-fallback 760ms cubic-bezier(.16,.84,.32,1) 32ms both;
}

@supports (filter: blur(1px)) {
  body[data-page="home"] main.shell {
    filter: blur(3px);
  }
  body[data-page="home"].is-revealed main.shell {
    animation: zaras-home-fade 820ms cubic-bezier(.16,.84,.32,1) 32ms both;
    will-change: opacity, transform, filter;
  }
}

@keyframes zaras-home-fade-fallback {
  from { opacity: 0; transform: translateY(10px) scale(.997); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}

@keyframes zaras-home-fade {
  from { opacity: 0; transform: translateY(10px) scale(.997); filter: blur(3px); }
  to   { opacity: 1; transform: translateY(0)    scale(1);    filter: blur(0); }
}

@media (prefers-reduced-motion: reduce) {
  body[data-page="home"] main.shell,
  body[data-page="home"].is-revealed main.shell {
    animation: none !important;
    opacity: 1;
    transform: none;
    filter: none;
  }
}