/* =============================================================
   ZARAS — Careers atmosphere v1
   -------------------------------------------------------------
   Intent: give careers its own restrained scroll atmosphere without
   turning the hiring page into a visual effects page.

   Concept: "signal moving through an operating loop" — each major
   section gets a quiet tonal field that blends into the next while
   the work-loop schematic receives a slightly more active treatment.

   Scope: careers.html only. Additive CSS, no markup or JS required.
   ============================================================= */

body[data-page="careers"] {
  --career-teal: 118 199 178;
  --career-mint: 168 226 218;
  --career-ink: 239 236 230;
  --career-field: 184 141 92;
  --career-steel: 104 139 164;
  --career-violet: 127 118 180;
  overflow-x: clip;
}

/* Page-level softness: a low-contrast technical substrate that sits
   under the section tones and keeps the scroll from feeling flat. */
body[data-page="careers"] .page {
  position: relative;
}

body[data-page="careers"] .page::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
  pointer-events: none;
  z-index: -3;
  background:
    linear-gradient(90deg,
      transparent 0%,
      rgba(255,250,240,0.020) 50%,
      transparent 100%),
    repeating-linear-gradient(90deg,
      transparent 0 143px,
      rgba(255,250,240,0.028) 144px,
      transparent 145px 288px);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
  opacity: 0.42;
}

/* Shared full-bleed section atmosphere. The long fade masks make the
   color shifts read as scroll transitions rather than hard panels. */
body[data-page="careers"] .hero,
body[data-page="careers"] #why,
body[data-page="careers"] #who,
body[data-page="careers"] #roles,
body[data-page="careers"] #work-loop,
body[data-page="careers"] #process,
body[data-page="careers"] .close {
  position: relative;
  isolation: isolate;
}

body[data-page="careers"] .hero::before,
body[data-page="careers"] #why::before,
body[data-page="careers"] #who::before,
body[data-page="careers"] #roles::before,
body[data-page="careers"] #work-loop::before,
body[data-page="careers"] #process::before,
body[data-page="careers"] .close::before {
  content: "";
  position: absolute;
  top: -1px;
  bottom: -1px;
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
  pointer-events: none;
  z-index: -2;
  background: var(--careers-section-bg, transparent);
  -webkit-mask-image: linear-gradient(180deg,
    transparent 0%,
    rgba(0,0,0,0.72) 13%,
    #000 34%,
    #000 66%,
    rgba(0,0,0,0.72) 87%,
    transparent 100%);
          mask-image: linear-gradient(180deg,
    transparent 0%,
    rgba(0,0,0,0.72) 13%,
    #000 34%,
    #000 66%,
    rgba(0,0,0,0.72) 87%,
    transparent 100%);
}

/* Section tones — subtle, unique, and readable against the page copy. */
body[data-page="careers"] .hero {
  --careers-section-bg:
    radial-gradient(ellipse 52% 42% at 74% 34%, rgb(var(--career-mint) / 0.070), transparent 74%),
    radial-gradient(ellipse 46% 38% at 18% 74%, rgb(var(--career-teal) / 0.055), transparent 76%),
    linear-gradient(180deg, rgba(8,17,15,0.20), rgba(11,10,9,0.02) 72%);
}

body[data-page="careers"] #why {
  --careers-section-bg:
    radial-gradient(ellipse 48% 42% at 20% 34%, rgb(var(--career-field) / 0.070), transparent 73%),
    radial-gradient(ellipse 54% 48% at 78% 62%, rgb(var(--career-teal) / 0.045), transparent 78%),
    linear-gradient(180deg, rgba(16,13,9,0.34), rgba(11,10,9,0.08));
}

body[data-page="careers"] #who {
  --careers-section-bg:
    radial-gradient(ellipse 46% 40% at 76% 18%, rgb(var(--career-teal) / 0.075), transparent 72%),
    radial-gradient(ellipse 42% 34% at 18% 76%, rgb(var(--career-steel) / 0.050), transparent 74%),
    linear-gradient(180deg, rgba(8,16,15,0.24), rgba(11,10,9,0.08));
}

body[data-page="careers"] #roles {
  --careers-section-bg:
    radial-gradient(ellipse 62% 48% at 50% 18%, rgb(var(--career-steel) / 0.080), transparent 75%),
    radial-gradient(ellipse 35% 34% at 86% 60%, rgb(var(--career-violet) / 0.040), transparent 72%),
    linear-gradient(180deg, rgba(8,11,14,0.34), rgba(11,10,9,0.10));
}

body[data-page="careers"] #work-loop {
  --careers-section-bg:
    radial-gradient(ellipse 58% 52% at 52% 48%, rgb(var(--career-teal) / 0.100), transparent 73%),
    radial-gradient(ellipse 38% 35% at 16% 22%, rgb(var(--career-field) / 0.055), transparent 72%),
    radial-gradient(ellipse 38% 34% at 84% 78%, rgb(var(--career-mint) / 0.052), transparent 72%),
    linear-gradient(180deg, rgba(8,16,14,0.42), rgba(11,10,9,0.12));
}

body[data-page="careers"] #process {
  --careers-section-bg:
    radial-gradient(ellipse 48% 44% at 18% 22%, rgb(var(--career-steel) / 0.060), transparent 73%),
    radial-gradient(ellipse 44% 36% at 80% 64%, rgb(var(--career-teal) / 0.050), transparent 73%),
    linear-gradient(180deg, rgba(9,12,14,0.30), rgba(11,10,9,0.08));
}

body[data-page="careers"] .close {
  --careers-section-bg:
    radial-gradient(ellipse 70% 68% at 50% 82%, rgb(var(--career-teal) / 0.145), transparent 73%),
    radial-gradient(ellipse 36% 34% at 70% 36%, rgb(var(--career-field) / 0.050), transparent 72%);
}

/* Quiet connective details: a faint signal line travels down the left
   rail, matching the page's numbered-section structure. */
body[data-page="careers"] section.s .head .num {
  position: relative;
}

body[data-page="careers"] section.s .head .num::before {
  content: "";
  position: absolute;
  left: 0;
  top: -24px;
  width: 1px;
  height: 18px;
  background: linear-gradient(180deg, transparent, rgb(var(--career-teal) / 0.46));
  opacity: 0.58;
}

body[data-page="careers"] section.s:first-of-type .head .num::before {
  display: none;
}

/* Roles board: make the hiring surface feel like a live board without
   increasing visual noise. */
body[data-page="careers"] .role-group-head {
  background:
    linear-gradient(90deg, rgb(var(--career-steel) / 0.055), transparent 46%),
    linear-gradient(180deg, transparent, rgba(255,250,240,0.010));
}

body[data-page="careers"] .role {
  background:
    linear-gradient(90deg, rgba(255,250,240,0.012), transparent 52%);
}

body[data-page="careers"] .role:hover {
  background:
    radial-gradient(ellipse 72% 180% at 0% 50%, rgb(var(--career-teal) / 0.070), transparent 64%),
    linear-gradient(90deg, rgba(255,250,240,0.018), transparent 62%);
}

/* Work-loop graphic: keep the same structure, but give it a more premium
   animated signal-field so it replaces the benefits card with intent. */
body[data-page="careers"] .loop-visual {
  background:
    radial-gradient(ellipse 72% 64% at 50% 50%, rgb(var(--career-teal) / 0.100), transparent 68%),
    radial-gradient(ellipse 42% 44% at 12% 16%, rgb(var(--career-field) / 0.070), transparent 70%),
    linear-gradient(135deg, rgba(13,18,17,0.86), rgba(9,10,9,0.94));
  box-shadow:
    inset 0 1px 0 rgba(255,250,240,0.055),
    inset 0 0 0 1px rgba(118,199,178,0.035),
    0 28px 84px rgba(0,0,0,0.26);
}

body[data-page="careers"] .loop-visual::before {
  background-image:
    linear-gradient(rgba(255,250,240,0.052) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,250,240,0.052) 1px, transparent 1px),
    radial-gradient(circle at 50% 50%, rgb(var(--career-mint) / 0.090), transparent 52%);
  background-size: 46px 46px, 46px 46px, 100% 100%;
  opacity: 0.48;
  -webkit-mask-image: radial-gradient(ellipse 88% 78% at 50% 50%, #000 36%, transparent 100%);
          mask-image: radial-gradient(ellipse 88% 78% at 50% 50%, #000 36%, transparent 100%);
}

body[data-page="careers"] .loop-visual::after {
  border-color: rgb(var(--career-teal) / 0.14);
  box-shadow:
    inset 0 0 42px rgb(var(--career-teal) / 0.045),
    0 0 38px rgb(var(--career-teal) / 0.030);
}

body[data-page="careers"] .loop-line {
  background: linear-gradient(90deg,
    transparent,
    rgb(var(--career-teal) / 0.34),
    rgb(var(--career-mint) / 0.22),
    transparent);
}

body[data-page="careers"] .loop-line--left,
body[data-page="careers"] .loop-line--right {
  background: linear-gradient(180deg,
    transparent,
    rgb(var(--career-teal) / 0.32),
    rgb(var(--career-mint) / 0.20),
    transparent);
}

body[data-page="careers"] .loop-node,
body[data-page="careers"] .loop-core {
  box-shadow:
    inset 0 1px 0 rgba(255,250,240,0.055),
    0 18px 48px rgba(0,0,0,0.22);
}

body[data-page="careers"] .loop-core {
  background:
    radial-gradient(circle at 50% 0%, rgb(var(--career-mint) / 0.090), transparent 50%),
    rgba(13,14,12,0.91);
}

/* Slightly warmer final CTA than the rest of the page, so it feels like
   an invitation rather than another informational block. */
body[data-page="careers"] .close {
  background:
    radial-gradient(42vw 32vh at 50% 100%, rgb(var(--career-teal) / 0.110), transparent 72%),
    radial-gradient(32vw 28vh at 72% 28%, rgb(var(--career-field) / 0.045), transparent 72%);
}

@media (prefers-reduced-motion: no-preference) {
  body[data-page="careers"] .loop-visual::before {
    animation: careers-grid-drift 18s linear infinite;
  }

  body[data-page="careers"] .scroll-progress {
    box-shadow: 0 0 18px rgb(var(--career-teal) / 0.55);
  }
}

@keyframes careers-grid-drift {
  0%   { background-position: 0 0, 0 0, 50% 50%; }
  100% { background-position: 46px 46px, 46px 46px, 50% 50%; }
}

@media (max-width: 760px) {
  body[data-page="careers"] .hero::before,
  body[data-page="careers"] #why::before,
  body[data-page="careers"] #who::before,
  body[data-page="careers"] #roles::before,
  body[data-page="careers"] #work-loop::before,
  body[data-page="careers"] #process::before,
  body[data-page="careers"] .close::before {
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
            mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
  }

  body[data-page="careers"] .page::before {
    opacity: 0.24;
  }
}