/* ===== GOKUKOM animation layer — loaded on every page ===== */

/* scroll progress bar (top of page) */
#gk-scrollbar{position:fixed;top:0;left:0;height:3px;width:0;z-index:100;
  background:linear-gradient(90deg,var(--coral),var(--gold));
  box-shadow:0 0 12px rgba(255,107,71,.6);transition:width .08s linear;pointer-events:none}

/* nav gains a shadow + tighter feel once you scroll */
header.nav{transition:box-shadow .3s ease,background .3s ease}
header.nav.scrolled{box-shadow:0 10px 30px rgba(0,0,0,.28)}

/* animated underline on nav links */
.nav-links a:not(.btn){position:relative}
.nav-links a:not(.btn)::after{content:"";position:absolute;left:0;bottom:-5px;height:2px;width:0;
  background:var(--coral);border-radius:2px;transition:width .28s ease}
.nav-links a:not(.btn):hover::after,.nav-links a.active::after{width:100%}

/* shine sweep across primary buttons on hover */
.btn-primary{position:relative;overflow:hidden}
.btn-primary::after{content:"";position:absolute;top:0;left:-130%;width:55%;height:100%;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.5),transparent);
  transform:skewX(-20deg);transition:left .6s ease}
.btn-primary:hover::after{left:150%}

/* stronger, colour-tinted lift on cards */
.card,.svc,.val,.wcard,.quote,.mkt,.mcell,.form-card{transition:transform .28s cubic-bezier(.2,.7,.2,1),box-shadow .28s ease}
.card:hover,.svc:hover,.val:hover,.wcard:hover,.quote:hover{transform:translateY(-6px) scale(1.012);box-shadow:0 24px 55px rgba(255,107,71,.18)}
.chip{transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
.chip:hover{transform:translateY(-3px);border-color:var(--coral);box-shadow:0 10px 24px rgba(255,107,71,.15)}

/* motion-heavy effects only when the user is OK with motion */
@media (prefers-reduced-motion: no-preference){

  /* scroll reveal (class added by JS, so no-JS users still see everything) */
  .gk-reveal{opacity:0;transform:translateY(28px);
    transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
  .gk-reveal.gk-in{opacity:1;transform:none}

  /* slowly drifting gradient on the dark hero backgrounds */
  .hero,.page-hero,.a-hero{background-size:170% 170%,170% 170%,100% 100%;
    animation:gk-bgshift 20s ease-in-out infinite}
  @keyframes gk-bgshift{0%,100%{background-position:0% 0%,0% 0%,0 0}50%{background-position:100% 60%,100% 60%,0 0}}

  /* shimmering highlight words */
  .g,.sun{background:linear-gradient(100deg,var(--gold) 0%,#ffffff 45%,var(--gold) 70%);
    background-size:220% auto;-webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;color:transparent;animation:gk-shine 5s linear infinite}
  @keyframes gk-shine{to{background-position:-220% center}}

  /* gentle float on the homepage clock panel */
  .sundial{animation:gk-float 6.5s ease-in-out infinite}
  @keyframes gk-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}

  /* brand dot soft pulse */
  .brand .dot{animation:gk-dot 2.4s ease-in-out infinite}
  @keyframes gk-dot{0%,100%{box-shadow:0 0 8px var(--gold)}50%{box-shadow:0 0 18px var(--gold)}}
}