/* ================= Dynamic polish layer ================= */

/* scroll progress bar */
#scroll-progress{
  position:fixed; top:0; left:0; height:3px; width:0%;
  background:var(--grad); z-index:200; transition:width 0.1s linear;
}

/* section reveal-on-scroll (auto-applied via JS, no markup changes needed) */
section.pad .wrap{ opacity:0; transform:translateY(28px); transition:opacity 0.8s ease, transform 0.8s ease; }
section.pad.revealed .wrap{ opacity:1; transform:translateY(0); }

/* staggered card entrance within a revealed section */
section.pad .card{ transition:opacity 0.6s ease, transform 0.6s ease, box-shadow 0.2s, background-color 0.2s; }
section.pad:not(.revealed) .card{ opacity:0; transform:translateY(16px); }
section.pad.revealed .grid .card:nth-child(1){ transition-delay:0.05s; }
section.pad.revealed .grid .card:nth-child(2){ transition-delay:0.12s; }
section.pad.revealed .grid .card:nth-child(3){ transition-delay:0.19s; }
section.pad.revealed .grid .card:nth-child(4){ transition-delay:0.26s; }
section.pad.revealed .grid .card:nth-child(5){ transition-delay:0.33s; }
section.pad.revealed .grid .card:nth-child(6){ transition-delay:0.40s; }

@media (prefers-reduced-motion:reduce){
  section.pad .wrap, section.pad .card{ opacity:1 !important; transform:none !important; transition:none !important; }
}

/* nav active link */
.nav .links a.active{ color:#fff; position:relative; }
.nav .links a.active::after{
  content:''; position:absolute; left:0; right:0; bottom:-6px; height:2px; background:var(--grad); border-radius:2px;
}
@media (max-width:880px){ .nav .links a.active::after{ display:none; } .nav .links a.active{ color:var(--cyan); } }

/* back-to-top button */
#back-to-top{
  position:fixed; left:24px; bottom:24px; z-index:150;
  width:46px; height:46px; border-radius:50%; border:none; cursor:pointer;
  background:var(--grad); color:#fff; font-size:18px; display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 22px rgba(10,30,80,0.28);
  opacity:0; pointer-events:none; transform:translateY(12px);
  transition:opacity 0.25s ease, transform 0.25s ease;
}
#back-to-top.show{ opacity:1; pointer-events:auto; transform:translateY(0); }
#back-to-top:hover{ filter:brightness(1.08); }

/* card polish: subtle top accent line on hover */
.card{ position:relative; overflow:hidden; }
.card::before{
  content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--grad);
  transform:scaleX(0); transform-origin:left; transition:transform 0.3s ease;
}
.card:hover::before{ transform:scaleX(1); }

/* nav logo tasteful float-in on load */
.nav .brand img{ animation:logoIn 0.7s ease-out; }
@keyframes logoIn{ from{ opacity:0; transform:translateY(-6px);} to{ opacity:1; transform:translateY(0);} }

/* smoother card grid on hover for whole row (subtle dim of siblings) */
.grid:has(.card:hover) .card:not(:hover){ opacity:0.86; }
@media (max-width:880px){ .grid:has(.card:hover) .card:not(:hover){ opacity:1; } }