/* ==========================================================================
   ESCAN — Atmosphere layer
   Background texture system shared by all concepts: film grain, drifting
   brand-color auroras, hexagon pattern washes, and the interactive
   diamond-grid canvas (see js/atmosphere.js).

   Usage: host section gets `position:relative; isolation:isolate` (add the
   .has-atmo class), then insert children:
     <div class="atmo atmo--aurora" aria-hidden="true"></div>
     <canvas class="atmo atmo--grid" data-diamond-grid aria-hidden="true"></canvas>
     <div class="atmo atmo--pattern" aria-hidden="true"></div>
   All atmo layers paint BEHIND the section's content (z-index -1) and are
   inert. Every animation respects prefers-reduced-motion.
   ========================================================================== */

.has-atmo {
  position: relative;
  isolation: isolate;
  overflow: clip;
}

.atmo {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

/* ---- Aurora: two soft brand-color glows, drifting almost imperceptibly.
   Tune per section with custom properties:
     --aur-c1 / --aur-c2   rgb triplets (default teal / royal purple)
     --aur-a               overall strength (default .5)
     --aur-p1 / --aur-p2   glow positions                                  */
.atmo--aurora {
  --aur-c1: 54, 121, 130;
  --aur-c2: 112, 96, 164;
  inset: -22%;
  background:
    radial-gradient(46rem 32rem at var(--aur-p1, 16% 22%),
      rgba(var(--aur-c1), 0.34), transparent 62%),
    radial-gradient(40rem 30rem at var(--aur-p2, 86% 84%),
      rgba(var(--aur-c2), 0.26), transparent 62%);
  opacity: var(--aur-a, 0.5);
  filter: blur(46px);
  animation: aurora-drift 30s ease-in-out infinite alternate;
}
@keyframes aurora-drift {
  to { translate: 3.5% -2.5%; scale: 1.14; rotate: 1.5deg; }
}

/* ---- Diamond-grid canvas (drawn by js/atmosphere.js).
   canvas is a replaced element: inset alone doesn't size it. ---- */
.atmo--grid { inset: 0; inline-size: 100%; block-size: 100%; }

/* ---- Hexagon tessellation wash: the primary brand pattern bleeding off
   one corner, with a glacial drift. Position with the modifier classes.   */
.atmo--pattern {
  inset: auto;
  inline-size: clamp(16rem, 30vw, 30rem);
  aspect-ratio: 448 / 510;
  background: url("../brand/pattern-hex.svg") no-repeat center / contain;
  opacity: var(--pat-a, 0.05);
  animation: pattern-drift 48s ease-in-out infinite alternate;
}
.atmo--pattern.at-top-end { inset-block-start: -12%; inset-inline-end: -6%; }
.atmo--pattern.at-bottom-start { inset-block-end: -14%; inset-inline-start: -6%; }
.atmo--pattern.at-bottom-end { inset-block-end: -14%; inset-inline-end: -6%; }
@keyframes pattern-drift {
  to { translate: -2.5% 3%; rotate: 1deg; }
}

/* ---- Blueprint grid: engineering drawing lines — minor grid with brighter
   major lines every 5th cell. Tune:
     --bp-c     line color rgb triplet (default aqua)
     --bp-a     minor line alpha (default .05; majors get 2.2x)
     --bp-size  minor cell size (default 72px)
     --bp-mask  visibility mask (default: strongest at top, fades down)     */
.atmo--blueprint {
  --bp-c: 125, 191, 187;
  --bp-a: 0.05;
  --bp-size: 72px;
  background:
    repeating-linear-gradient(to right,
      rgba(var(--bp-c), var(--bp-a)) 0 1px, transparent 1px var(--bp-size)),
    repeating-linear-gradient(to bottom,
      rgba(var(--bp-c), var(--bp-a)) 0 1px, transparent 1px var(--bp-size)),
    repeating-linear-gradient(to right,
      rgba(var(--bp-c), calc(var(--bp-a) * 2.2)) 0 1px, transparent 1px calc(var(--bp-size) * 5)),
    repeating-linear-gradient(to bottom,
      rgba(var(--bp-c), calc(var(--bp-a) * 2.2)) 0 1px, transparent 1px calc(var(--bp-size) * 5));
  -webkit-mask-image: var(--bp-mask,
    radial-gradient(130% 110% at 50% 0%, #000 35%, transparent 82%));
          mask-image: var(--bp-mask,
    radial-gradient(130% 110% at 50% 0%, #000 35%, transparent 82%));
}

/* ---- Dot matrix: a fine lattice of brand-color points — calmer and more
   premium than line grids. Tune --dot-c (rgb), --dot-a, --dot-size,
   --dot-mask.                                                             */
.atmo--dots {
  --dot-c: 54, 121, 130;
  --dot-a: 0.25;
  --dot-size: 28px;
  background-image: radial-gradient(
    rgba(var(--dot-c), var(--dot-a)) 1.1px, transparent 1.7px);
  background-size: var(--dot-size) var(--dot-size);
  -webkit-mask-image: var(--dot-mask,
    radial-gradient(130% 115% at 50% 0%, #000 35%, transparent 88%));
          mask-image: var(--dot-mask,
    radial-gradient(130% 115% at 50% 0%, #000 35%, transparent 88%));
}

/* ---- Gridshell mesh: the brand's secondary pattern (the flowing
   triangulated shell from Pattern.ai) as a large drifting texture —
   the most brand-native background layer available.                       */
.atmo--mesh {
  inset: auto;
  inline-size: clamp(36rem, 72vw, 78rem);
  aspect-ratio: 1920 / 1080;
  background: no-repeat center / contain;
  opacity: var(--mesh-a, 0.16);
  animation: mesh-drift 26s ease-in-out infinite alternate;
}
.atmo--mesh.is-teal { background-image: url("../brand/escan-pattern-teal.svg"); }
.atmo--mesh.is-aqua { background-image: url("../brand/escan-pattern-aqua.svg"); }
.atmo--mesh.at-top-end { inset-block-start: -14%; inset-inline-end: -16%; }
.atmo--mesh.at-top-start { inset-block-start: -14%; inset-inline-start: -16%; scale: -1 1; }
.atmo--mesh.at-bottom-start { inset-block-end: -14%; inset-inline-start: -16%; rotate: 180deg; }
.atmo--mesh.at-bottom-end { inset-block-end: -14%; inset-inline-end: -16%; scale: 1 -1; }
@keyframes mesh-drift {
  to { translate: 1.8% -1.4%; scale: 1.04; }
}

/* Full-section variant: the mesh spans the whole section (slice-fit), with
   a directional mask so it recedes behind the content side. With
   [data-draw], js/atmosphere.js inlines the SVG and the lattice draws
   itself line by line when the section enters the viewport.               */
.atmo--mesh.is-cover {
  inset: 0;
  inline-size: auto;
  aspect-ratio: auto;
  background-size: cover;
  -webkit-mask-image: var(--mesh-mask,
    radial-gradient(120% 110% at 78% 35%, #000 35%, transparent 85%));
          mask-image: var(--mesh-mask,
    radial-gradient(120% 110% at 78% 35%, #000 35%, transparent 85%));
}
.atmo--mesh.is-cover.at-top-end,
.atmo--mesh.is-cover.at-top-start,
.atmo--mesh.is-cover.at-bottom-start,
.atmo--mesh.is-cover.at-bottom-end { inset: 0; rotate: none; }
.atmo--mesh.is-cover.at-top-start,
.atmo--mesh.is-cover.at-bottom-start { scale: -1 1; }
.atmo--mesh svg {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
}

/* ---- Scan line: a thin glowing rule sweeping down the section — the
   page reads as a live instrument, not a static sheet.                    */
.atmo--scan { overflow: hidden; }
.atmo--scan::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-start: -2%;
  block-size: 1px;
  background: linear-gradient(90deg,
    transparent 5%, rgba(125, 191, 187, 0.55) 50%, transparent 95%);
  box-shadow: 0 0 22px rgba(125, 191, 187, 0.4);
  animation: scan-sweep 10s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
@keyframes scan-sweep {
  0%    { inset-block-start: -2%; opacity: 0; }
  6%    { opacity: 0.9; }
  46%   { inset-block-start: 102%; opacity: 0.9; }
  46.1% { opacity: 0; }
  100%  { inset-block-start: 102%; opacity: 0; }
}

/* ---- Ghost type: a giant outline word anchored behind the content.
   Set the word via data-text. On paper surfaces add .on-paper.           */
.atmo--ghost {
  inset: auto;
  font-size: clamp(6rem, 17vw, 17rem);
  font-weight: var(--fw-bold);
  font-stretch: 78%;
  line-height: 0.82;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1px rgba(244, 245, 243, 0.08);
  user-select: none;
}
.atmo--ghost.on-paper { -webkit-text-stroke-color: rgba(43, 43, 43, 0.14); }
.atmo--ghost.at-top-end { inset-block-start: 3%; inset-inline-end: -0.5%; }
.atmo--ghost.at-bottom-start { inset-block-end: 3%; inset-inline-start: -0.5%; }
.atmo--ghost.at-bottom-end { inset-block-end: 3%; inset-inline-end: -0.5%; }

/* ---- Spectrum edge: the six facet colors as a hairline crowning a
   section — an unmistakable brand divider for light surfaces.            */
.atmo--edge {
  inset: 0 0 auto 0;
  block-size: 3px;
  background: linear-gradient(90deg,
    #7060A4, #5B5C86 20%, #6184A0 40%, #367982 60%, #7DBFBB 80%, #A9CBBC);
  opacity: 0.9;
}

/* ---- Sheen: soft light pooling at the section's top — dark surfaces stop
   reading as flat voids.                                                  */
.atmo--sheen {
  background: radial-gradient(90rem 44rem at 50% -8%,
    rgba(244, 245, 243, 0.05), transparent 62%);
}

/* ---- Film grain: one fixed overlay for the whole page. Sits above the
   content but below navigation chrome; ~4% is felt, not seen.            */
.has-grain::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: 0.042;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 240px 240px;
}

@media (prefers-reduced-motion: reduce) {
  .atmo--aurora, .atmo--pattern, .atmo--mesh { animation: none; }
  .atmo--scan::before { animation: none; opacity: 0; }
}
.is-static .atmo--aurora, .is-static .atmo--pattern, .is-static .atmo--mesh { animation: none; }
.is-static .atmo--scan::before { animation: none; opacity: 0; }