/* ============================================================
   AURORA GLASS (LIGHT) — Liquid-Glass Background + Glass System
   SES Consulting Engineers
   Vanilla CSS only. No frameworks, no libraries.
   Cool near-white canvas + drifting aurora mesh behind frosted
   white glass panels. Brand red is rationed. Shadows use a cool
   blue-slate base (never pure black — black looks dirty over aurora).
   ============================================================ */

/* ----------------------------------------------------------
   1. ROOT TOKENS
---------------------------------------------------------- */
:root{
  /* CANVAS */
  --bg:#F4F6FB;            /* cool near-white, faint blue undertone */
  --bg-raised:#EEF1F8;     /* alternating section wash */
  --bg-well:#E8ECF6;       /* deepest anchor (footer band) + mesh base */

  /* GLASS */
  --glass-fill:rgba(255,255,255,0.55);
  --glass-fill-nav:rgba(255,255,255,0.60);
  --glass-fill-nav-scrolled:rgba(255,255,255,0.80);
  --glass-fill-hover:rgba(255,255,255,0.74);
  --glass-fill-input:rgba(255,255,255,0.70);
  --glass-border:rgba(20,32,64,0.08);        /* faint slate edge for definition on white */
  --glass-border-strong:rgba(20,32,64,0.12);
  --spec-top:rgba(255,255,255,0.90);         /* bright specular ring start */
  --inner-sheen:rgba(255,255,255,0.60);      /* inset top highlight */
  --divider:rgba(20,32,64,0.10);

  /* TEXT */
  --text:#0E1526;          /* near-black slate — AA on all glass fills */
  --text-muted:#4A5468;
  --text-faint:#7C8598;

  /* BRAND RED (rationed) */
  --red:#E30613;
  --red-hot:#C1050F;       /* darker hover reads better on light */
  --red-pressed:#A0040C;
  --red-deep:#7A0208;
  --red-glow:rgba(227,6,19,0.35);
  --red-tint:rgba(227,6,19,0.12);

  /* STRUCTURAL ACCENT (cool — icons, links, eyebrow numbers, hairlines) */
  --cyan:#2F6BFF;          /* electric engineering blue */
  --cyan-soft:rgba(47,107,255,0.10);
  --violet:#7A5CFF;
  --violet-soft:rgba(122,92,255,0.14);
  --grid-line:rgba(47,107,255,0.05);
  --grid-line-major:rgba(47,107,255,0.09);

  /* SHADOWS (cool blue-slate #142040 base) */
  --sh-ambient:rgba(20,32,64,0.10);
  --sh-contact:rgba(20,32,64,0.16);
  --sh-cast:rgba(20,32,64,0.06);

  /* EASINGS */
  --ease:cubic-bezier(0.22,1,0.36,1);
  --ease-shift:cubic-bezier(0.65,0,0.35,1);
  --ease-snap:cubic-bezier(0.34,1.56,0.64,1);
}

/* ----------------------------------------------------------
   2. CANVAS BASE
---------------------------------------------------------- */
html,body{
  background-color:var(--bg);
  color:var(--text);
}
body{
  font-family:"Montserrat",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  line-height:1.6;
  margin:0;
  min-height:100vh;
}

/* ============================================================
   3. ANIMATED AURORA BACKGROUND — one fixed container, 4 layers.
   Animate ONLY transform + opacity. will-change on exactly
   the 4 blobs + grid. Blur baked as a static filter.
   ============================================================ */
.bg{
  position:fixed;
  inset:0;
  z-index:-1;
  overflow:hidden;
  pointer-events:none;
  contain:layout paint;
  background-color:var(--bg-well);         /* prevents blown whites behind aurora */
}

/* --- LAYER 1: faint blueprint grid --- */
.bg .grid{
  position:absolute;
  inset:-40px;
  will-change:transform;
  background-image:
    repeating-linear-gradient(0deg,   var(--grid-line) 0 1px, transparent 1px 32px),
    repeating-linear-gradient(90deg,  var(--grid-line) 0 1px, transparent 1px 32px),
    repeating-linear-gradient(0deg,   var(--grid-line-major) 0 1px, transparent 1px 160px),
    repeating-linear-gradient(90deg,  var(--grid-line-major) 0 1px, transparent 1px 160px);
  -webkit-mask-image:radial-gradient(ellipse at center, #000 55%, transparent 100%);
          mask-image:radial-gradient(ellipse at center, #000 55%, transparent 100%);
  animation:grid-drift 60s linear infinite alternate;
}
@keyframes grid-drift{ from{ transform:translate3d(0,0,0);} to{ transform:translate3d(8px,8px,0);} }

/* --- LAYER 2: AURORA BLOBS --- */
.bg .blob{
  position:absolute;
  border-radius:50%;
  filter:blur(80px);          /* STATIC — never animated */
  will-change:transform;
  pointer-events:none;
}
/* THE single disciplined warm bloom — appears once, behind the hero */
.bg .blob-red{
  width:620px; height:620px;
  top:-140px; right:-60px;
  background:radial-gradient(circle, rgba(227,6,19,0.18), transparent 62%);
  opacity:0.95;
  animation:blob-red 29s ease-in-out -6s infinite alternate;
}
.bg .blob-cyan{           /* aurora blue */
  width:740px; height:740px;
  top:24%; left:-200px;
  background:radial-gradient(circle, rgba(76,125,255,0.30), transparent 64%);
  opacity:0.9;
  animation:blob-cyan 37s ease-in-out -13s infinite alternate;
}
.bg .blob-violet{
  width:620px; height:620px;
  bottom:-140px; left:40%;
  background:radial-gradient(circle, rgba(122,92,255,0.26), transparent 64%);
  opacity:0.85;
  animation:blob-violet 43s ease-in-out -21s infinite alternate;
}
/* soft cyan bookend, lower-right — static */
.bg .blob-red-whisper{
  width:460px; height:460px;
  bottom:3%; right:-60px;
  background:radial-gradient(circle, rgba(53,199,230,0.20), transparent 62%);
  filter:blur(80px);
  opacity:1;
}
@keyframes blob-red{
  0%{ transform:translate3d(0,0,0) scale(1); opacity:0.75; }
  50%{ transform:translate3d(-6%,4%,0) scale(1.08); opacity:1; }
  100%{ transform:translate3d(4%,-3%,0) scale(1); opacity:0.85; }
}
@keyframes blob-cyan{
  0%{ transform:translate3d(0,0,0) scale(1); opacity:0.7; }
  50%{ transform:translate3d(6%,-4%,0) scale(1.1); opacity:0.95; }
  100%{ transform:translate3d(-4%,5%,0) scale(1); opacity:0.85; }
}
@keyframes blob-violet{
  0%{ transform:translate3d(0,0,0) scale(1); opacity:0.7; }
  50%{ transform:translate3d(-5%,-5%,0) scale(1.1); opacity:0.9; }
  100%{ transform:translate3d(5%,3%,0) scale(1); opacity:0.8; }
}

/* --- LAYER 3: fine grain to kill banding --- */
.bg .grain{
  position:absolute; inset:0;
  opacity:0.035;
  mix-blend-mode:multiply;      /* darkens ever so slightly on light canvas */
  pointer-events:none;
  background-repeat:repeat;
  background-size:180px 180px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* --- MOBILE: 2 blobs, cheaper blur --- */
@media (max-width:768px){
  .bg .blob{ filter:blur(60px); }
  .bg .blob-red{ width:340px; height:340px; }
  .bg .blob-cyan{ width:380px; height:380px; }
  .bg .blob-violet{ display:none; }
  .bg .blob-red-whisper{ display:none; }
}

/* ============================================================
   4. GLASS RECIPE + VARIANTS
   ============================================================ */
.glass{
  position:relative;
  background:var(--glass-fill);
  -webkit-backdrop-filter:blur(28px) saturate(180%);
          backdrop-filter:blur(28px) saturate(180%);
  border:1px solid var(--glass-border);
  border-radius:22px;
  box-shadow:
    0 1px 0 0 var(--inner-sheen) inset,
    0 24px 60px -24px var(--sh-ambient),
    0 8px 24px -14px var(--sh-contact),
    0 1px 2px var(--sh-cast);
  overflow:hidden;
  isolation:isolate;
}
/* gradient specular ring (1px) */
.glass::before{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background:linear-gradient(135deg,
    rgba(255,255,255,0.90) 0%, rgba(255,255,255,0.25) 38%,
    rgba(255,255,255,0.04) 60%, rgba(255,255,255,0.40) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  pointer-events:none; z-index:1;
  transition:background 180ms var(--ease);
}
/* top glare */
.glass::after{
  content:""; position:absolute; left:0; right:0; top:0; height:45%;
  border-radius:inherit; z-index:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,0.55), rgba(255,255,255,0) 100%);
  opacity:.7;
}
.glass > *{ position:relative; z-index:2; }
.glass:hover{
  background:var(--glass-fill-hover);
  box-shadow:
    0 1px 0 0 rgba(255,255,255,0.7) inset,
    0 30px 70px -22px var(--sh-ambient),
    0 12px 30px -14px var(--sh-contact),
    0 1px 2px var(--sh-cast);
}
.glass:hover::before{
  background:linear-gradient(135deg,
    rgba(255,255,255,1) 0%, rgba(255,255,255,0.35) 38%,
    rgba(255,255,255,0.06) 60%, rgba(255,255,255,0.5) 100%);
}

/* --- VARIANTS --- */
.glass--strong{
  border-color:var(--glass-border-strong);
  box-shadow:
    0 1px 0 0 rgba(255,255,255,0.7) inset,
    0 28px 64px -22px var(--sh-ambient),
    0 10px 28px -14px var(--sh-contact),
    0 1px 2px var(--sh-cast);
}
.glass--nav{
  background:var(--glass-fill-nav);
  border-radius:16px;
  transition:background 300ms var(--ease), box-shadow 300ms var(--ease);
}
.glass--nav.scrolled{
  background:var(--glass-fill-nav-scrolled);
  box-shadow:
    0 1px 0 0 var(--inner-sheen) inset,
    0 14px 34px -18px var(--sh-ambient),
    0 2px 8px -4px var(--sh-contact);
}
.glass--chip{
  border-radius:999px;
  -webkit-backdrop-filter:blur(18px) saturate(160%);
          backdrop-filter:blur(18px) saturate(160%);
}
.glass--input{
  background:var(--glass-fill-input);
  border-radius:12px;
}

/* Interactive card lift (opt-in) */
.glass--lift{
  transition:transform 180ms var(--ease),
             background 180ms var(--ease),
             box-shadow 180ms var(--ease);
}
.glass--lift:hover{ transform:translateY(-6px); }

/* Fallback: no backdrop-filter support */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .glass{ background:rgba(255,255,255,0.92); }
  .glass--nav{ background:rgba(255,255,255,0.94); }
  .glass--input{ background:rgba(255,255,255,0.96); }
}

/* ============================================================
   5. FOCUS — never removed
   ============================================================ */
:focus-visible{
  outline:2px solid var(--red);
  outline-offset:2px;
}

/* ============================================================
   6. REDUCED MOTION — freeze all four moving layers.
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .bg .grid,
  .bg .blob-red,
  .bg .blob-cyan,
  .bg .blob-violet{ animation:none; }
  .glass--lift{ transition:background 180ms var(--ease), box-shadow 180ms var(--ease); }
  .glass--lift:hover{ transform:none; }
}