/* Aspheera public foundation — shared shell and interaction layer */
:root {
  --public-line: rgba(238,242,240,.075);
  --public-line-strong: rgba(238,242,240,.14);
  --public-surface: rgba(13,15,19,.82);
  --public-ease: cubic-bezier(.22,1,.36,1);
}
[data-theme="light"] {
  --public-line: rgba(6,10,14,.09);
  --public-line-strong: rgba(6,10,14,.17);
  --public-surface: rgba(230,234,237,.86);
}

::selection { background:rgba(61,255,138,.22); color:var(--white); }
:where(a,button,input,select,textarea):focus-visible {
  outline:1px solid var(--green);
  outline-offset:3px;
}

/* One coherent navigation surface across the legacy page families. */
body > nav {
  background:
    linear-gradient(90deg,rgba(61,255,138,.022),transparent 36%,rgba(77,184,255,.018)),
    rgba(8,9,11,.9);
  border-bottom-color:var(--public-line);
}
[data-theme="light"] body > nav {
  background:
    linear-gradient(90deg,rgba(0,125,65,.025),transparent 36%,rgba(0,105,180,.022)),
    rgba(240,243,245,.92);
}
:where(.n-logo,.nav-logo) { position:relative; }
:where(.n-logo,.nav-logo)::after {
  content:''; position:absolute; left:0; bottom:-13px; width:58%; height:1px;
  background:linear-gradient(90deg,var(--green),var(--blue),transparent);
  opacity:.48; transform-origin:left;
  transition:width .45s var(--public-ease),opacity .3s;
}
:where(.n-logo,.nav-logo):hover::after,
:where(.n-logo,.nav-logo):focus-visible::after { width:100%; opacity:.82; }

:where(.n-a,.nav-link) { transition:color .22s,background-color .22s; }
:where(.n-a,.nav-link):hover { background:linear-gradient(180deg,transparent,rgba(255,255,255,.018)); }
:where(.n-ctrl,.nav-ctrl) {
  transition:color .22s,border-color .22s,background-color .22s,transform .22s var(--public-ease);
}
:where(.n-ctrl,.nav-ctrl):hover { transform:translateY(-1px); background:rgba(255,255,255,.025); }
:where(.n-acc,.nav-access,.nav-acc) {
  position:relative; overflow:hidden;
  transition:color .25s,border-color .25s,background-color .25s;
}
:where(.n-acc,.nav-access,.nav-acc)::after {
  content:''; position:absolute; left:12%; right:12%; bottom:0; height:1px;
  background:linear-gradient(90deg,transparent,var(--green),var(--blue),transparent);
  transform:scaleX(0); transition:transform .42s var(--public-ease);
}
:where(.n-acc,.nav-access,.nav-acc):hover::after,
:where(.n-acc,.nav-access,.nav-acc):focus-visible::after { transform:scaleX(1); }

/* Heroes share depth without losing their page-specific canvases and palettes. */
:where(.ph,.page-hero,#hero) { isolation:isolate; }
:where(.ph,.page-hero)::after {
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(115deg,rgba(61,255,138,.018),transparent 30%),
    radial-gradient(circle at 86% 18%,rgba(77,184,255,.028),transparent 30%);
}

/* Event-driven control feedback: no cursor-tracking light and no idle loop. */
:where(.btn,.f-btn) {
  position:relative; overflow:hidden;
  transition:color .28s,border-color .28s,background-color .28s,transform .28s var(--public-ease),box-shadow .28s;
}
:where(.btn,.f-btn)::after {
  content:''; position:absolute; inset:auto 0 0; height:1px;
  background:linear-gradient(90deg,var(--green),var(--blue));
  transform:scaleX(0); transform-origin:left;
  transition:transform .45s var(--public-ease);
}
:where(.btn,.f-btn):hover,:where(.btn,.f-btn):focus-visible { transform:translateY(-2px); }
:where(.btn,.f-btn):hover::after,:where(.btn,.f-btn):focus-visible::after { transform:scaleX(1); }

:where(.panel,.fc,.svc) {
  border-color:var(--public-line);
  transition:border-color .3s,background-color .3s,transform .3s var(--public-ease);
}
:where(.panel,.fc,.svc):hover { border-color:var(--public-line-strong); transform:translateY(-2px); }

body > footer {
  position:relative;
  background-image:linear-gradient(90deg,rgba(61,255,138,.012),transparent 40%,rgba(77,184,255,.01));
}
body > footer::before {
  content:''; position:absolute; left:3rem; top:-1px; width:min(220px,28vw); height:1px;
  background:linear-gradient(90deg,var(--green),var(--blue),transparent); opacity:.35;
}

/* The old travelling scan line conflicts with the event-driven motion direction. */
:where(.scan,.scan-line) { animation:none !important; opacity:.18; }

/* Pausing a canvas freezes its last frame; it must not remove the visual layer. */
.motion-ready canvas[data-motion-paused="true"] { visibility:visible; }

/* Homepage uses one decisive reveal system instead of overlapping CSS/GSAP triggers. */
.home-reveal-ready .home-reveal {
  opacity:0;
  transform:translateY(22px);
  clip-path:inset(0 0 10% 0);
}
.home-reveal-ready .home-reveal.home-visible {
  opacity:1;
  transform:none;
  clip-path:inset(0);
  transition:opacity .68s var(--public-ease),transform .68s var(--public-ease),clip-path .78s var(--public-ease);
}

@media (max-width:900px) {
  :where(.n-logo,.nav-logo)::after { bottom:-9px; }
  body > footer::before { left:1.5rem; }
}
@media (prefers-reduced-motion:reduce) {
  :where(.n-logo,.nav-logo)::after,
  :where(.btn,.f-btn),:where(.btn,.f-btn)::after,
  :where(.panel,.fc,.svc) { transition:none; transform:none; }
  .home-reveal-ready .home-reveal { opacity:1; transform:none; clip-path:none; transition:none; }
}