/* ============================================================
   BRIGHTLAYER FX — additive enhancement layer
   Every class is prefixed .bls-fx-  — nothing here overrides
   or modifies existing site styles. Safe to remove entirely.
   ============================================================ */

/* ---------- WebGL canvas mount (injected by fx/webgl.js) ---------- */
.bls-fx-webgl{
  position:absolute;
  inset:0;
  z-index:2;               /* above hero gradient/contours, below .hero-inner (z3) */
  pointer-events:none;
  contain:strict;
}
.bls-fx-webgl--page{ z-index:1; }   /* portfolio .page-hero: content .wrap is z2 */
.bls-fx-webgl canvas{
  display:block;
  width:100%;
  height:100%;
}

/* ---------- scroll progress bar ---------- */
.bls-fx-progress{
  position:fixed;
  top:0; left:0;
  width:100%; height:3px;
  z-index:10000;
  pointer-events:none;
  background:linear-gradient(120deg,#3898e8 0%,#2bb0cf 52%,#43c8ad 100%);
  transform:scaleX(0);
  transform-origin:0 50%;
  opacity:.9;
}

/* ---------- page transition veil ---------- */
.bls-fx-veil{
  position:fixed;
  inset:0;
  z-index:10001;
  pointer-events:none;
  opacity:0;
  background:
    radial-gradient(90% 70% at 80% 10%, rgba(56,152,232,.25), transparent 60%),
    #14181f;
  transition:opacity .38s cubic-bezier(.22,.61,.36,1);
}
.bls-fx-veil.bls-fx-veil--on{
  opacity:1;
  pointer-events:auto;
}
.bls-fx-veil.bls-fx-veil--instant{ transition:none; }

/* ---------- custom cursor (desktop, fine pointer only) ---------- */
.bls-fx-cursor-dot,
.bls-fx-cursor-halo{
  position:fixed;
  top:0; left:0;
  z-index:10002;
  pointer-events:none;
  border-radius:50%;
  will-change:transform;
}
.bls-fx-cursor-dot{
  width:7px; height:7px;
  margin:-3.5px 0 0 -3.5px;
  background:linear-gradient(120deg,#3898e8,#43c8ad);
  box-shadow:0 0 10px rgba(56,152,232,.55);
}
.bls-fx-cursor-halo{
  width:38px; height:38px;
  margin:-19px 0 0 -19px;
  border:1.5px solid rgba(56,152,232,.45);
  background:radial-gradient(circle, rgba(43,176,207,.10), transparent 65%);
  transition:width .3s cubic-bezier(.22,.61,.36,1),
             height .3s cubic-bezier(.22,.61,.36,1),
             margin .3s cubic-bezier(.22,.61,.36,1),
             border-color .3s, background-color .3s, opacity .3s;
}
.bls-fx-cursor-halo.bls-fx-cursor-halo--hover{
  width:58px; height:58px;
  margin:-29px 0 0 -29px;
  border-color:rgba(67,200,173,.65);
}

/* ---------- ambient light sheen sweep (injected into dark sections) ---------- */
.bls-fx-sheen{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
  border-radius:inherit;
}
.bls-fx-sheen::before{
  content:"";
  position:absolute;
  top:-40%;
  left:-30%;
  width:55%;
  height:180%;
  transform:rotate(18deg) translateX(var(--bls-sheen-x, -60%));
  background:linear-gradient(
    100deg,
    transparent 0%,
    rgba(56,152,232,.06) 35%,
    rgba(43,176,207,.10) 50%,
    rgba(67,200,173,.06) 65%,
    transparent 100%
  );
  filter:blur(14px);
  will-change:transform;
}

/* keep the section's own children painting above the sheen */
.bls-fx-has-sheen{ position:relative; }
.bls-fx-has-sheen > *:not(.bls-fx-sheen){ position:relative; z-index:1; }

/* ---------- subtle glass shimmer for the hero browser chip ---------- */
.bls-fx-glass{
  position:relative;
  overflow:hidden;
}
.bls-fx-glass::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.22) 48%, transparent 62%);
  transform:translateX(-120%);
  animation:bls-fx-glass-sweep 7s cubic-bezier(.22,.61,.36,1) infinite;
  pointer-events:none;
}
@keyframes bls-fx-glass-sweep{
  0%, 62%   { transform:translateX(-120%); }
  78%, 100% { transform:translateX(120%); }
}

/* ---------- accessibility & motion safety ---------- */
@media (prefers-reduced-motion: reduce){
  .bls-fx-webgl,
  .bls-fx-progress,
  .bls-fx-cursor-dot,
  .bls-fx-cursor-halo,
  .bls-fx-sheen{ display:none !important; }
  .bls-fx-glass::after{ animation:none !important; }
  .bls-fx-veil{ transition:none !important; opacity:0 !important; }
}

/* never show the custom cursor on coarse pointers / small screens */
@media (pointer: coarse), (max-width: 900px){
  .bls-fx-cursor-dot,
  .bls-fx-cursor-halo{ display:none !important; }
}