/**
 * Header-only net-of-boxes mesh — careers /life/ language.
 * Use on page heroes / headers only (not full-page backgrounds).
 */

:root {
  --tt-mesh-size: 48px;
  --tt-mesh-line: rgba(107, 76, 58, 0.08);
  --tt-mesh-glow-a: rgba(249, 115, 22, 0.12);
  --tt-mesh-glow-b: rgba(14, 165, 233, 0.07);
  --tt-mesh-fade: rgba(255, 249, 244, 0.55);
}

/* Explicit mesh layer (preferred inside <header>) */
.tt-header-mesh,
.tt-careers-life-hero__mesh,
.tt-legal-hero__mesh,
.tt-careers-page-hero__mesh,
.tt-careers-detail-hero__mesh {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  width: 100%;
  min-width: 100%;
  background-image:
    radial-gradient(circle at 18% 22%, var(--tt-mesh-glow-a) 0%, transparent 46%),
    radial-gradient(circle at 82% 58%, var(--tt-mesh-glow-b) 0%, transparent 42%),
    radial-gradient(circle at 50% 110%, rgba(247, 149, 0, 0.07) 0%, transparent 42%),
    linear-gradient(var(--tt-mesh-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--tt-mesh-line) 1px, transparent 1px);
  background-size:
    auto,
    auto,
    auto,
    var(--tt-mesh-size) var(--tt-mesh-size),
    var(--tt-mesh-size) var(--tt-mesh-size);
  background-position: 0 0, 0 0, 0 0, 0 0, 0 0;
}

/* Soft bottom vignette so the net dissolves into page content */
.tt-header-mesh::after,
.tt-careers-life-hero__mesh::after,
.tt-legal-hero__mesh::after,
.tt-careers-page-hero__mesh::after,
.tt-careers-detail-hero__mesh::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 42%;
  background: linear-gradient(180deg, transparent 0%, var(--tt-mesh-fade) 100%);
  pointer-events: none;
}

/* Amber hairline accent along the hero edge */
.tt-header-mesh::before,
.tt-careers-life-hero__mesh::before,
.tt-legal-hero__mesh::before,
.tt-careers-page-hero__mesh::before,
.tt-careers-detail-hero__mesh::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(233, 84, 32, 0.12) 12%,
    rgba(245, 158, 11, 0.55) 50%,
    rgba(233, 84, 32, 0.12) 88%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 1;
}

.tt-header-mesh--dark {
  --tt-mesh-line: rgba(148, 163, 184, 0.12);
  --tt-mesh-glow-a: rgba(251, 146, 60, 0.14);
  --tt-mesh-glow-b: rgba(56, 189, 248, 0.09);
  --tt-mesh-fade: rgba(15, 23, 42, 0.55);
}

@media (prefers-reduced-motion: no-preference) {
  .tt-header-mesh,
  .tt-careers-life-hero__mesh,
  .tt-legal-hero__mesh,
  .tt-careers-page-hero__mesh,
  .tt-careers-detail-hero__mesh {
    animation: tt-header-mesh-breathe 16s ease-in-out infinite alternate;
  }
}

@keyframes tt-header-mesh-breathe {
  from {
    opacity: 0.86;
    background-position: 0 0, 0 0, 0 0, 0 0, 0 0;
  }
  to {
    opacity: 1;
    background-position: 2% 1%, -1% 2%, 0 0, 10px 6px, 10px 6px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tt-header-mesh,
  .tt-careers-life-hero__mesh,
  .tt-legal-hero__mesh,
  .tt-careers-page-hero__mesh,
  .tt-careers-detail-hero__mesh {
    animation: none;
  }
}

/* Hosts for header mesh layers */
.tt-page-hero,
.tt-careers-life-hero,
.tt-careers-page-hero,
.tt-careers-detail-hero,
.tt-legal-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.tt-page-hero > :not(.tt-header-mesh):not([aria-hidden="true"]),
.tt-careers-life-hero > :not(.tt-careers-life-hero__mesh):not(.tt-header-mesh),
.tt-careers-page-hero > :not(.tt-careers-page-hero__mesh):not(.tt-header-mesh),
.tt-careers-detail-hero > :not(.tt-careers-detail-hero__mesh):not(.tt-header-mesh),
.tt-legal-hero > :not(.tt-legal-hero__mesh):not(.tt-header-mesh) {
  position: relative;
  z-index: 1;
}