/* ============================================================
   Eagle Agency — Glassmorphism / Cyberpunk surface theme
   ------------------------------------------------------------
   A layer, not a rewrite. It only restyles surfaces that float
   above the page — header, menus, modal, system panel, forms
   and buttons. Section layout, type and scroll animations are
   untouched, so removing the <link> to this file returns the
   site exactly to how it was.

   Palette: the brand gold stays primary; an electric cyan is
   added as the cyber accent because it matches the blue of the
   hero footage.
   ============================================================ */

:root{
  --neon:#6fe3ff;
  --neon-dim:rgba(111,227,255,.55);
  --neon-glow:rgba(111,227,255,.22);
  --glass:rgba(16,17,22,.58);
  --glass-strong:rgba(13,14,18,.78);
  --glass-line:rgba(243,241,234,.14);
  --glass-hi:rgba(243,241,234,.42);
}

/* ---------- the shared glass recipe ----------
   A translucent pane, a hairline that catches light along the
   top edge, and a faint scanline texture for the cyber read. */
.eh-header.eh-solid,
.eh-langMenu,
.eh-mobileMenu,
.proj-modal-panel,
.sys-panel{
  /* these elements are already fixed/absolute in the base stylesheet —
     never set `position` here or the header stops sticking */
  background:var(--glass);
  border:1px solid var(--glass-line);
  box-shadow:
    0 1px 0 0 var(--glass-hi) inset,
    0 18px 48px -24px rgba(0,0,0,.9),
    0 0 0 1px rgba(111,227,255,.06);
}
@supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){
  .eh-header.eh-solid,
  .eh-langMenu,
  .eh-mobileMenu,
  .proj-modal-panel,
  .sys-panel{
    -webkit-backdrop-filter:blur(20px) saturate(150%);
    backdrop-filter:blur(20px) saturate(150%);
  }
}
/* solid fallback where blur is unsupported, so text stays readable */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .eh-langMenu,.eh-mobileMenu,.proj-modal-panel,.sys-panel{background:#0d0e12}
  .eh-header.eh-solid{background:rgba(10,10,12,.97)}
}

/* scanline film — very low contrast, purely textural */
.eh-langMenu::before,
.proj-modal-panel::before,
.sys-panel::before{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:repeating-linear-gradient(180deg,
    rgba(255,255,255,.028) 0 1px, transparent 1px 3px);
  mix-blend-mode:overlay;opacity:.5;
}

/* ---------- header ---------- */
.eh-header.eh-solid{
  border-left:0;border-right:0;border-top:0;
  border-bottom:1px solid rgba(111,227,255,.16);
  box-shadow:0 1px 0 0 rgba(243,241,234,.1) inset, 0 14px 40px -28px rgba(0,0,0,.95);
}
.eh-header.eh-solid::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--neon-dim) 22%,var(--gold) 52%,var(--neon-dim) 78%,transparent);
  opacity:.5;
}
.eh-nav a{position:relative}
.eh-nav a::after{
  content:"";position:absolute;left:0;right:100%;bottom:-5px;height:1px;
  background:var(--neon);box-shadow:0 0 7px var(--neon-glow);
  transition:right .32s cubic-bezier(.2,.8,.2,1);
}
.eh-nav a:hover::after{right:0}

/* ---------- buttons: glass chip with a neon edge on hover ---------- */
.eh-langBtn,
.eh-menuBtn{
  background:rgba(255,255,255,.045);
  border:1px solid var(--glass-line);
  box-shadow:0 1px 0 0 rgba(243,241,234,.14) inset;
  transition:border-color .22s,box-shadow .22s,background .22s,color .22s;
}
@supports (backdrop-filter:blur(1px)){
  .eh-langBtn,.eh-menuBtn{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
}
.eh-langBtn:hover,.eh-menuBtn:hover,
.eh-lang.open .eh-langBtn{
  border-color:var(--neon-dim);
  color:#eafcff;
  box-shadow:0 1px 0 0 rgba(243,241,234,.2) inset, 0 0 18px -4px var(--neon-glow);
}

/* ---------- language dropdown ---------- */
.eh-langMenu{border-radius:4px;overflow:hidden}
.eh-langMenu button{position:relative;transition:background .2s,color .2s,padding-left .2s}
.eh-langMenu button::before{
  content:"";position:absolute;left:0;top:8px;bottom:8px;width:2px;
  background:var(--neon);box-shadow:0 0 8px var(--neon-glow);
  transform:scaleY(0);transform-origin:center;transition:transform .22s;
}
.eh-langMenu button:hover{background:rgba(111,227,255,.09);color:#eafcff}
.eh-langMenu button:hover::before{transform:scaleY(1)}
.eh-langMenu button[aria-current="true"]{color:var(--gold-soft)}
html.eagle-rtl .eh-langMenu button::before{left:auto;right:0}

/* ---------- mobile menu ---------- */
.eh-mobileMenu a{position:relative;transition:color .22s,padding-left .28s}
.eh-mobileMenu a::before{
  content:"";position:absolute;left:-14px;top:50%;width:6px;height:6px;margin-top:-3px;
  background:var(--neon);box-shadow:0 0 10px var(--neon);
  transform:scale(0) rotate(45deg);transition:transform .26s;
}
.eh-mobileMenu a:hover{color:#eafcff;padding-left:12px}
.eh-mobileMenu a:hover::before{transform:scale(1) rotate(45deg)}
html.eagle-rtl .eh-mobileMenu a:hover{padding-left:0;padding-right:12px}
html.eagle-rtl .eh-mobileMenu a::before{left:auto;right:-14px}

/* ---------- case-study modal: HUD corner brackets ---------- */
.proj-modal-panel{border-radius:6px}
.proj-modal-panel::after{
  content:"";position:absolute;inset:9px;pointer-events:none;border-radius:3px;
  background:
    linear-gradient(var(--neon-dim),var(--neon-dim)) left top/16px 1px no-repeat,
    linear-gradient(var(--neon-dim),var(--neon-dim)) left top/1px 16px no-repeat,
    linear-gradient(var(--neon-dim),var(--neon-dim)) right top/16px 1px no-repeat,
    linear-gradient(var(--neon-dim),var(--neon-dim)) right top/1px 16px no-repeat,
    linear-gradient(var(--neon-dim),var(--neon-dim)) left bottom/16px 1px no-repeat,
    linear-gradient(var(--neon-dim),var(--neon-dim)) left bottom/1px 16px no-repeat,
    linear-gradient(var(--neon-dim),var(--neon-dim)) right bottom/16px 1px no-repeat,
    linear-gradient(var(--neon-dim),var(--neon-dim)) right bottom/1px 16px no-repeat;
  opacity:.62;
}
.proj-modal-close{transition:color .2s,border-color .2s,box-shadow .2s}
.proj-modal-close:hover{color:#eafcff;border-color:var(--neon-dim);
  box-shadow:0 0 16px -3px var(--neon-glow)}

/* ---------- systems panel ---------- */
.sys-panel{border-radius:6px}
.sys-panel::after{
  content:"";position:absolute;left:0;top:14px;bottom:14px;width:2px;
  background:linear-gradient(180deg,transparent,var(--neon),transparent);
  box-shadow:0 0 12px var(--neon-glow);opacity:.75;
}

/* ---------- forms ---------- */
.cnt-form input,.cnt-form textarea,.cnt-form select,
.ftr-newsletter-form input{
  background:rgba(255,255,255,.035);
  border:1px solid var(--glass-line);
  box-shadow:0 1px 0 0 rgba(243,241,234,.1) inset;
  transition:border-color .22s,box-shadow .22s,background .22s;
}
@supports (backdrop-filter:blur(1px)){
  .cnt-form input,.cnt-form textarea,.cnt-form select,
  .ftr-newsletter-form input{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
}
.cnt-form input:focus,.cnt-form textarea:focus,.cnt-form select:focus,
.ftr-newsletter-form input:focus{
  outline:none;border-color:var(--neon-dim);
  box-shadow:0 1px 0 0 rgba(243,241,234,.16) inset, 0 0 20px -5px var(--neon-glow);
}

/* ---------- primary / secondary buttons ---------- */
.btn-primary{position:relative;overflow:hidden;
  box-shadow:0 0 0 0 rgba(233,205,138,0);transition:box-shadow .3s,transform .2s}
.btn-primary:hover{box-shadow:0 0 26px -6px rgba(233,205,138,.55);transform:translateY(-1px)}
/* a single light sweep across the face on hover */
.btn-primary::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.5) 50%,transparent 62%);
  transform:translateX(-120%);transition:transform .62s cubic-bezier(.2,.8,.2,1);
}
.btn-primary:hover::after{transform:translateX(120%)}

.btn-secondary{
  background:rgba(255,255,255,.04);
  border:1px solid var(--glass-line);
  transition:border-color .22s,box-shadow .22s,color .22s}
@supports (backdrop-filter:blur(1px)){
  .btn-secondary{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
}
.btn-secondary:hover{border-color:var(--neon-dim);color:#eafcff;
  box-shadow:0 0 20px -6px var(--neon-glow)}

/* ---------- hero scroll cue picks up the cyan ---------- */
.vh-cue i{background:linear-gradient(180deg,var(--gold-soft),var(--neon));
  box-shadow:0 0 8px var(--neon-glow)}

/* ---------- respect reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .btn-primary::after{display:none}
  .eh-nav a::after,.eh-langMenu button::before,.eh-mobileMenu a::before{transition:none}
}

/* ---------- keep it light on small screens ----------
   Stacked blurred layers are the most expensive thing on a phone,
   so the texture and the widest blurs are trimmed there. */
@media (max-width:700px){
  .eh-langMenu::before,.proj-modal-panel::before,.sys-panel::before{display:none}
  .eh-header.eh-solid,.eh-langMenu,.eh-mobileMenu,.proj-modal-panel,.sys-panel{
    -webkit-backdrop-filter:blur(14px) saturate(135%);
    backdrop-filter:blur(14px) saturate(135%);
  }
}