/* ==========================================================
   GrowixHR – scroll animations & custom cursor
   ========================================================== */

/* ---------- Scroll reveal ---------- */
.js .reveal{
  opacity:0;
  translate:0 28px;
  transition:opacity .75s cubic-bezier(.2,.7,.2,1) var(--d,0s),
             translate .75s cubic-bezier(.2,.7,.2,1) var(--d,0s),
             scale .75s cubic-bezier(.2,.7,.2,1) var(--d,0s);
  will-change:opacity,translate;
}
.js .reveal.reveal-zoom{translate:0 22px;scale:.94}
.js .reveal.reveal-left{translate:-32px 0}
.js .reveal.reveal-right{translate:32px 0}
.js .reveal.in{opacity:1;translate:0 0;scale:1}

/* Dashboard bars grow when the dashboard appears */
.js .dash .bars i{transform:scaleY(0);transform-origin:bottom;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.js .dash.in .bars i{transform:scaleY(1)}
.js .dash.in .bars i:nth-child(2){transition-delay:.08s}
.js .dash.in .bars i:nth-child(3){transition-delay:.16s}
.js .dash.in .bars i:nth-child(4){transition-delay:.24s}
.js .dash.in .bars i:nth-child(5){transition-delay:.32s}
.js .dash.in .bars i:nth-child(6){transition-delay:.4s}
.js .dash.in .bars i:nth-child(7){transition-delay:.48s}

/* Face-scan line sweeps up and down */
@keyframes pf-scan{0%,100%{top:22%}50%{top:78%}}
.face:after{animation:pf-scan 2.6s ease-in-out infinite}

/* Top scroll-progress bar */
#scrollProgress{position:fixed;top:0;left:0;height:3px;width:100%;background:var(--pf-green);transform:scaleX(0);transform-origin:left;z-index:2000;pointer-events:none}

/* Header gains a soft shadow after scrolling */
.pf-nav{transition:box-shadow .3s ease,padding .3s ease}
.pf-nav.scrolled{box-shadow:0 8px 24px rgba(18,41,58,.08);padding:.55rem 0}

/* ---------- Custom cursor (mouse devices only) ----------
   Outer element = position (transform). Inner <i> = visuals & scaling,
   so scaling never shifts the cursor position. */
.cursor-dot,.cursor-ring{position:fixed;top:0;left:0;width:0;height:0;pointer-events:none;z-index:3000;opacity:0;transition:opacity .25s ease}
.cursor-dot i,.cursor-ring i{position:absolute;display:block;border-radius:50%;transform:translate(-50%,-50%) scale(1);transition:transform .3s cubic-bezier(.2,.7,.2,1),background-color .25s ease,border-color .25s ease}
.cursor-dot i{width:7px;height:7px;background:var(--pf-green)}
.cursor-ring i{width:38px;height:38px;border:1.5px solid var(--pf-green)}
.cursor-ready .cursor-dot,.cursor-ready .cursor-ring{opacity:1}
.cursor-hidden .cursor-dot,.cursor-hidden .cursor-ring{opacity:0}

/* hovering a link / button */
.cursor-hover .cursor-ring i{transform:translate(-50%,-50%) scale(1.5);background:rgba(10,122,102,.12)}
.cursor-hover .cursor-dot i{transform:translate(-50%,-50%) scale(.5)}
/* pressing */
.cursor-down .cursor-ring i{transform:translate(-50%,-50%) scale(.75)}
.cursor-hover.cursor-down .cursor-ring i{transform:translate(-50%,-50%) scale(1.2)}
/* over dark backgrounds */
.cursor-dark .cursor-dot i{background:var(--pf-accent)}
.cursor-dark .cursor-ring i{border-color:var(--pf-accent)}
.cursor-dark.cursor-hover .cursor-ring i{background:rgba(79,209,165,.18)}

/* hide the native pointer everywhere the custom one is active */
html.has-cursor,
html.has-cursor *{cursor:none !important}
html.has-cursor input:not([type="checkbox"]):not([type="radio"]),
html.has-cursor textarea{cursor:text !important}

@media (prefers-reduced-motion:reduce){
  .js .reveal,.js .reveal.reveal-zoom,.js .reveal.reveal-left,.js .reveal.reveal-right{opacity:1;translate:none;scale:1;transition:none}
  .js .dash .bars i{transform:none;transition:none}
  .face:after{animation:none}
  #scrollProgress{display:none}
}