/* ============================================================
   Eagle Agency — Depth layer
   ------------------------------------------------------------
   The sections all sat on the same flat #0a0a0c. Flat black
   reads as empty, and it gives glass nothing to refract.

   This file adds atmosphere only: a faint light source per
   section, film grain, and a vignette. No layout, no type,
   no animation is touched, and nothing here uses
   backdrop-filter, so it costs almost nothing to render.

   Each section gets its light from a different direction so
   that scrolling feels like moving through a space rather
   than past a repeated tile.
   ============================================================ */

:root{
  --wash-gold:rgba(201,161,59,.19);
  --wash-gold-soft:rgba(233,205,138,.13);
  --wash-cool:rgba(96,140,190,.17);
  --wash-cyan:rgba(111,227,255,.15);
}

/* Every section already paints its own grain element, so this file adds
   only light and vignette — never a second texture.

   The vignette is a gradient rather than a blurred inset box-shadow:
   a 260px-blur shadow across a full-height section is an expensive paint
   and showed up as intermittent dropped frames while scrolling. */
:root{
  --vignette:radial-gradient(125% 100% at 50% 50%,
    transparent 42%, rgba(0,0,0,.34) 78%, rgba(0,0,0,.62) 100%);
}

/* ---------- per-section light source ---------- */

/* Services — cool light entering from the upper left */
.svc-section{
  background-image:
    var(--vignette),
    radial-gradient(120% 80% at 8% 0%,  var(--wash-cool) 0%, transparent 58%),
    radial-gradient(90% 70% at 92% 100%, var(--wash-gold-soft) 0%, transparent 62%);
}

/* Work — warm light from the lower right, so the case studies feel lit */
.proj-section{
  background-image:
    var(--vignette),
    radial-gradient(100% 75% at 96% 88%, var(--wash-gold) 0%, transparent 60%),
    radial-gradient(110% 80% at 4% 6%,  rgba(255,255,255,.05) 0%, transparent 55%);
}

/* Systems — cyan from the right, tying into the glowing side panel */
.sys-section{
  background-image:
    var(--vignette),
    radial-gradient(85% 70% at 88% 50%, var(--wash-cyan) 0%, transparent 58%),
    radial-gradient(120% 90% at 10% 100%, rgba(255,255,255,.045) 0%, transparent 60%);
}

/* Academy — a high, central glow, like light over a stage */
.acd-section{
  background-image:
    var(--vignette),
    radial-gradient(90% 60% at 50% -8%, var(--wash-gold) 0%, transparent 62%),
    radial-gradient(120% 80% at 50% 108%, rgba(0,0,0,.5) 0%, transparent 55%);
}

/* Results — cool light from the lower left */
.res-section{
  background-image:
    var(--vignette),
    radial-gradient(100% 70% at 6% 92%, var(--wash-cool) 0%, transparent 60%),
    radial-gradient(90% 60% at 94% 8%,  var(--wash-gold-soft) 0%, transparent 58%);
}

/* About — already has photography, so only a vignette to seat it */
.abt-section{
  background-image:var(--vignette);
}

/* Contact — the page's destination, so it gets the most presence:
   gold and cyan meeting from opposite corners */
.cnt-section{
  background-image:
    var(--vignette),
    radial-gradient(80% 65% at 12% 8%,  var(--wash-gold) 0%, transparent 58%),
    radial-gradient(80% 65% at 88% 92%, var(--wash-cyan) 0%, transparent 58%);
}

/* Footer — one soft glow along the top edge */
.ftr-section{
  background-image:
    radial-gradient(120% 60% at 50% 0%, rgba(201,161,59,.07) 0%, transparent 60%);
}

/* ---------- section seams ----------
   A hairline that fades out towards the edges, so sections
   separate without a hard rule across the screen. */
.proj-section::after,
.sys-section::after,
.acd-section::after,
.res-section::after,
.cnt-section::after{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(243,241,234,.14) 30%,rgba(243,241,234,.14) 70%,transparent);
}

/* ---------- keep it cheap on small screens ---------- */