/* ============================================================
   Visual enhancements — purely additive layer.
   Loaded after styles.css. Safe to delete this file (and its
   <link> tag in index.html) to fully revert with zero side effects.
   ============================================================ */

/* Scroll progress bar */
#gxProgress{position:fixed;top:0;left:0;height:3px;width:0%;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  z-index:200;pointer-events:none;transition:width .12s linear}

/* Header glass/condense effect once the page is scrolled */
header{transition:background .3s ease, box-shadow .35s ease, backdrop-filter .35s ease}
header.gx-scrolled{
  box-shadow:0 4px 24px -10px rgba(20,20,50,.28);
  backdrop-filter:blur(10px) saturate(160%);
  -webkit-backdrop-filter:blur(10px) saturate(160%);
}
html[data-theme="dark"] header.gx-scrolled{box-shadow:0 4px 24px -10px rgba(0,0,0,.55)}

/* Card hover polish for elements that had none before */
.nomcard{transition:transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease, border-color .3s ease}
.nomcard:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--accent)}
.tl-item{transition:background .3s ease}
.tl-item:hover{background:var(--acc-bg)}

/* Hero visual gentle 3D tilt (desktop, fine pointer only) — applied to the
   SVG itself so it never fights the parent .hero-visual's fade-up animation */
@media (hover:hover) and (pointer:fine){
  .hero-visual{perspective:900px}
  .hero-visual .board-viz{will-change:transform}
}

/* Button ripple */
.btn{position:relative;overflow:hidden}
.gx-ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,.55);
  transform:scale(0);opacity:.6;pointer-events:none;animation:gxRipple .6s ease-out forwards}
html[data-theme="dark"] .gx-ripple{background:rgba(255,255,255,.28)}
.btn-ghost .gx-ripple,.btn-glass .gx-ripple{background:rgba(91,84,166,.22)}
@keyframes gxRipple{to{transform:scale(2.6);opacity:0}}

/* Logo loading transition (header nav clicks) — two stacked copies of the
   same loader-icon.png, masked with a radial gradient so the arrow (inner
   ~35% radius) stays static while only the outer people-ring (from ~60%
   radius out) spins. The gap between those regions is fully transparent
   in the source image, so the mask boundary doesn't need to be exact. */
.gx-loader-overlay{position:fixed;inset:0;z-index:500;display:flex;align-items:center;justify-content:center;
  background:var(--bg);opacity:0;pointer-events:none;transition:opacity .25s ease}
.gx-loader-overlay.show{opacity:1;pointer-events:auto}
.gx-loader-badge{position:relative;width:120px;height:120px}
.gx-loader-core,.gx-loader-ring2{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.gx-loader-core{
  -webkit-mask-image:radial-gradient(circle closest-side at center, #000 0 40%, transparent 48% 100%);
  mask-image:radial-gradient(circle closest-side at center, #000 0 40%, transparent 48% 100%);
}
.gx-loader-ring2{
  -webkit-mask-image:radial-gradient(circle closest-side at center, transparent 0 52%, #000 60% 100%);
  mask-image:radial-gradient(circle closest-side at center, transparent 0 52%, #000 60% 100%);
  animation:gxSpin 3s linear infinite;
}
@keyframes gxSpin{to{transform:rotate(360deg)}}

/* Section scroll parallax targets (see enhance.js) */
.bcard .ic,.step-ic,#impactViz{will-change:transform}

/* Reduced motion: strip the purely decorative bits */
@media (prefers-reduced-motion:reduce){
  #gxProgress{transition:none}
  .gx-ripple{display:none}
  .hero-visual{transform:none !important}
}