/* SkillProfs — FX / Visual layer */
:root{
  --glow-color: rgba(74,158,255,.18);
  --glow-card: rgba(26,107,204,.12);
}

/* ===================== Scroll-Reveal ===================== */
html.js-fx [data-reveal]{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .55s ease,transform .55s ease;
  transition-delay:var(--delay,0ms);
}
html.js-fx [data-reveal].is-in{
  opacity:1;
  transform:none;
}

/* ===================== Header scrolled ===================== */
.header.is-scrolled{
  box-shadow:0 4px 24px -8px rgba(10,28,64,.22);
  backdrop-filter:blur(12px);
}

/* ===================== Glow zones (dark areas) ===================== */
.glow-zone{position:relative;overflow:hidden;}
.glow-zone::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:0;
  background:radial-gradient(400px circle at var(--mx,50%) var(--my,50%), var(--glow-color), transparent 70%);
  transition:opacity .35s;
}
.glow-zone.is-lit::after{opacity:1;}

/* Card glow */
.card,.step,.split__col{
  position:relative;overflow:hidden;
}
.card::after,.step::after,.split__col::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%), var(--glow-card), transparent 70%);
  opacity:0;
  transition:opacity .3s;
}
.card.is-lit::after,.step.is-lit::after,.split__col.is-lit::after{opacity:1;}

/* ===================== Aurora in hero ===================== */
.aurora{
  position:absolute;inset:0;pointer-events:none;overflow:hidden;
}
.aurora::before,.aurora::after{
  content:"";
  position:absolute;
  border-radius:50%;
  filter:blur(80px);
  animation:drift 14s ease-in-out infinite alternate;
}
.aurora::before{
  width:600px;height:400px;
  top:-120px;right:-80px;
  background:radial-gradient(ellipse, rgba(74,158,255,.22) 0%, transparent 70%);
}
.aurora::after{
  width:500px;height:350px;
  bottom:-100px;left:-60px;
  background:radial-gradient(ellipse, rgba(26,107,204,.16) 0%, transparent 70%);
  animation-delay:-7s;
}
@keyframes drift{
  from{transform:translate(0,0) scale(1);}
  to{transform:translate(40px,20px) scale(1.08);}
}
@media (prefers-reduced-motion:reduce){
  .aurora::before,.aurora::after{animation:none;}
}