/* =============================================================
   SAINTEKFEST 2026 — SHARED ANIMATIONS
   css/animations.css — include di semua halaman
   ============================================================= */

/* -------- KEYFRAMES -------- */
@keyframes fadeUp       {from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn       {from{opacity:0}to{opacity:1}}
@keyframes slideInLeft  {from{opacity:0;transform:translateX(-20px)}to{opacity:1;transform:translateX(0)}}
@keyframes slideInRight {from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}
@keyframes scaleIn      {from{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}
@keyframes shimmerSweep {0%{left:-100%}100%{left:200%}}
@keyframes pulseDot     {0%,100%{box-shadow:0 0 0 0 rgba(251,191,36,.5)}70%{box-shadow:0 0 0 7px rgba(251,191,36,0)}}
@keyframes waveRing     {0%{transform:scale(.9);opacity:.7}100%{transform:scale(2.2);opacity:0}}
@keyframes floatY       {0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes spinBadge    {from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes bounceScale  {0%{transform:scale(1)}40%{transform:scale(1.12)}70%{transform:scale(.96)}100%{transform:scale(1)}}
@keyframes cardGlowPulse{0%,100%{box-shadow:0 4px 24px rgba(0,0,0,.25)}50%{box-shadow:0 4px 36px rgba(251,191,36,.1)}}
@keyframes arrowRight   {0%,100%{transform:translateX(0)}50%{transform:translateX(5px)}}
@keyframes countUp      {from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes spinCW       {from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes blinkCaret   {0%,100%{opacity:1}50%{opacity:0}}
@keyframes gradShift    {0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes popIn        {0%{transform:scale(0);opacity:0}70%{transform:scale(1.1)}100%{transform:scale(1);opacity:1}}

/* -------- SCROLL REVEAL -------- */
.reveal{
  opacity:0;transform:translateY(22px);
  transition:opacity .55s cubic-bezier(.22,1,.36,1),transform .55s cubic-bezier(.22,1,.36,1)
}
.reveal.visible{opacity:1;transform:translateY(0)}

.reveal-left{
  opacity:0;transform:translateX(-22px);
  transition:opacity .55s cubic-bezier(.22,1,.36,1),transform .55s cubic-bezier(.22,1,.36,1)
}
.reveal-left.visible{opacity:1;transform:translateX(0)}

.reveal-right{
  opacity:0;transform:translateX(22px);
  transition:opacity .55s cubic-bezier(.22,1,.36,1),transform .55s cubic-bezier(.22,1,.36,1)
}
.reveal-right.visible{opacity:1;transform:translateX(0)}

.reveal-scale{
  opacity:0;transform:scale(.94);
  transition:opacity .5s cubic-bezier(.22,1,.36,1),transform .5s cubic-bezier(.22,1,.36,1)
}
.reveal-scale.visible{opacity:1;transform:scale(1)}

/* stagger delays */
.d-0{transition-delay:0ms}
.d-1{transition-delay:60ms}
.d-2{transition-delay:120ms}
.d-3{transition-delay:180ms}
.d-4{transition-delay:240ms}
.d-5{transition-delay:300ms}

/* -------- NAV BADGE spin on hover -------- */
.nav-badge{transition:transform .4s cubic-bezier(.34,1.56,.64,1),box-shadow .3s}
.nav-badge:hover{transform:rotate(360deg) scale(1.15);box-shadow:0 0 18px rgba(251,191,36,.5)}

/* NAV LINK underline sweep */
.nav-link{position:relative}
.nav-link::after{
  content:'';position:absolute;left:0;bottom:-2px;
  width:0;height:1.5px;background:#fbbf24;border-radius:1px;
  transition:width .25s cubic-bezier(.22,1,.36,1)
}
.nav-link:hover::after{width:100%}
.nav-link:hover{color:#fff}

/* NAV CTA shimmer */
.nav-cta{position:relative;overflow:hidden}
.nav-cta::after{
  content:'';position:absolute;top:0;left:-100%;width:60%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);
  transform:skewX(-20deg)
}
.nav-cta:hover::after{animation:shimmerSweep .45s ease forwards}

/* -------- BUTTONS -------- */
.btn-primary,.btn-amber{
  position:relative;overflow:hidden;
  transition:transform .2s cubic-bezier(.22,1,.36,1),box-shadow .2s,background .15s
}
.btn-primary::after,.btn-amber::after{
  content:'';position:absolute;top:0;left:-100%;width:60%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.25),transparent);
  transform:skewX(-20deg)
}
.btn-primary:hover::after,.btn-amber:hover::after{animation:shimmerSweep .45s ease forwards}
.btn-primary:hover{transform:translateY(-2px)}
.btn-primary:active,.btn-amber:active{transform:scale(.96)}

.btn-ghost,.btn-outline{
  transition:transform .2s,background .2s,border-color .2s
}
.btn-ghost:hover,.btn-outline:hover{transform:translateY(-1px)}
.btn-ghost:active,.btn-outline:active{transform:scale(.97)}

/* -------- CARDS -------- */
.card-hover{
  transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s,border-color .3s;
  position:relative;overflow:hidden
}
.card-hover::after{
  content:'';position:absolute;top:0;left:-100%;width:55%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.035),transparent);
  transform:skewX(-15deg);pointer-events:none
}
.card-hover:hover{transform:translateY(-3px)}
.card-hover:hover::after{animation:shimmerSweep .55s ease forwards}

/* -------- FORM INPUTS -------- */
input,textarea,select{
  transition:border-color .2s,box-shadow .2s,background .2s
}
input:focus,textarea:focus,select:focus{
  outline:none;
  border-color:rgba(251,191,36,.5) !important;
  box-shadow:0 0 0 3px rgba(251,191,36,.1)
}

/* Input label float animation (if using floating labels) */
.float-label-wrap{position:relative}
.float-label-wrap label{
  position:absolute;left:14px;top:50%;transform:translateY(-50%);
  font-size:13px;color:#8899b4;pointer-events:none;
  transition:top .2s,font-size .2s,color .2s,transform .2s
}
.float-label-wrap input:focus~label,
.float-label-wrap input:not(:placeholder-shown)~label{
  top:0;transform:translateY(-100%);font-size:10.5px;color:#fbbf24
}

/* -------- BADGES / CHIPS -------- */
.badge-animate{
  transition:transform .2s cubic-bezier(.34,1.56,.64,1),box-shadow .2s
}
.badge-animate:hover{transform:scale(1.06)}

/* -------- LOADER / SPINNER -------- */
.sf-spinner{
  width:20px;height:20px;border-radius:50%;
  border:2px solid rgba(251,191,36,.2);
  border-top-color:#fbbf24;
  animation:spinCW .7s linear infinite;
  display:inline-block
}

/* -------- SUCCESS / ERROR POP -------- */
.pop-in{animation:popIn .4s cubic-bezier(.34,1.56,.64,1) both}

/* -------- TOAST / NOTIF SLIDE -------- */
.toast-enter{animation:slideInRight .35s cubic-bezier(.22,1,.36,1) both}
.toast-exit{animation:slideInRight .3s cubic-bezier(.22,1,.36,1) reverse both}

/* -------- FLOATING ELEMENTS -------- */
.float-slow{animation:floatY 5s ease-in-out infinite}
.float-mid {animation:floatY 3.5s ease-in-out .5s infinite}
.float-fast{animation:floatY 2.5s ease-in-out 1s infinite}

/* -------- GRADIENT SHIFT BG -------- */
.grad-shift{
  background-size:200% 200%;
  animation:gradShift 6s ease infinite
}

/* -------- TIMELINE DOTS -------- */
.tl-dot.active{
  border-color:#4ade80 !important;
  box-shadow:0 0 12px rgba(74,222,128,.35)
}
.tl-dot.active::after{
  content:'';position:absolute;inset:-5px;border-radius:50%;
  border:1.5px solid rgba(74,222,128,.4);
  animation:waveRing 2s ease-out infinite
}
.tl-dot{position:relative;transition:transform .2s cubic-bezier(.34,1.56,.64,1)}
.tl-item:hover .tl-dot{transform:scale(1.1)}
.tl-item:hover .tl-title{color:#fbbf24;transition:color .2s}

/* -------- STAT VALUES -------- */
.stat-item:hover .stat-val{
  text-shadow:0 0 20px rgba(251,191,36,.5);
  transition:text-shadow .2s
}

/* -------- CURSOR GLOW (desktop) -------- */
.cursor-glow{
  position:fixed;pointer-events:none;z-index:9999;
  width:280px;height:280px;border-radius:50%;
  background:radial-gradient(circle,rgba(251,191,36,.055) 0%,transparent 70%);
  transform:translate(-50%,-50%);
  transition:left .1s ease,top .1s ease;
  mix-blend-mode:screen
}

/* -------- TABLE ROWS -------- */
tr{transition:background .15s}
tbody tr:hover{background:rgba(251,191,36,.04) !important}

/* -------- MODAL ANIMATE -------- */
.modal-box{animation:scaleIn .3s cubic-bezier(.22,1,.36,1) both}

/* -------- REDUCE MOTION -------- */
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important}
  .reveal,.reveal-left,.reveal-right,.reveal-scale{opacity:1;transform:none;transition:none}
}