/* =========================================================
   Yogi Ilham — Animation Pack
   Extra motion layer on top of style.css
   All effects are GPU-friendly (transform/opacity/clip-path)
   and fully disabled under prefers-reduced-motion.
   ========================================================= */

/* ---------- PRELOADER (CSS-guaranteed to disappear) ---------- */
.preloader{position:fixed;inset:0;z-index:9999;background:var(--bg);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:22px;animation:plOut .5s var(--ease) 1.6s forwards}
.preloader.pl-done{animation:plOut .45s var(--ease) forwards}
@keyframes plOut{to{opacity:0;visibility:hidden;pointer-events:none}}
.pl-inner{display:flex;align-items:center;gap:14px;font-weight:800;font-size:26px;letter-spacing:-.02em}
.pl-dot{width:20px;height:20px;border-radius:50%;background:var(--grad);box-shadow:0 0 22px var(--glow);
  animation:plDot 1s var(--ease) infinite}
@keyframes plDot{0%,100%{transform:scale(1)}50%{transform:scale(1.45)}}
.pl-bar{width:180px;height:3px;border-radius:3px;background:var(--border);overflow:hidden}
.pl-bar span{display:block;height:100%;width:100%;background:var(--grad);transform:translateX(-100%);
  animation:plBar 1.5s var(--ease) forwards}
@keyframes plBar{to{transform:translateX(0)}}

/* ---------- PAGE TRANSITION ---------- */
html.page-leaving body{opacity:0;transform:translateY(-10px);
  transition:opacity .3s var(--ease),transform .3s var(--ease)}

/* ---------- CURSOR RING (desktop only) ---------- */
.cursor-ring{position:fixed;top:0;left:0;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;
  border:1.5px solid var(--accent);z-index:9998;pointer-events:none;opacity:0;
  transition:opacity .3s ease,width .25s ease,height .25s ease,margin .25s ease,background .25s ease;
  will-change:transform}
.cursor-ring.on{opacity:.55}
.cursor-ring.grow{width:56px;height:56px;margin:-28px 0 0 -28px;background:var(--glow);opacity:.8}

/* ---------- HERO ENTRANCE STAGGER ---------- */
@keyframes heroUp{from{opacity:0;transform:translateY(34px)}to{opacity:1;transform:none}}
@keyframes heroPop{from{opacity:0;transform:scale(.88)}to{opacity:1;transform:none}}
.hero-text>*{animation:heroUp .85s var(--ease) both}
.hero-text>*:nth-child(1){animation-delay:.15s}
.hero-text>*:nth-child(2){animation-delay:.28s}
.hero-text>*:nth-child(3){animation-delay:.40s}
.hero-text>*:nth-child(4){animation-delay:.52s}
.hero-text>*:nth-child(5){animation-delay:.64s}
.hero-text>*:nth-child(6){animation-delay:.76s}
.hero-badge{animation:heroUp .8s var(--ease) both}
.scroll-ind{animation:heroUp .8s var(--ease) 1.2s both}

/* ---------- HERO FLOATING (entrance first, then endless drift) ---------- */
/* Each layer floats on its own rhythm so the motion feels organic, not synced. */
@keyframes heroFloat{
  0%,100%{transform:translate3d(0,0,0) rotate(0deg)}
  25%{transform:translate3d(7px,-13px,0) rotate(.7deg)}
  50%{transform:translate3d(0,-20px,0) rotate(0deg)}
  75%{transform:translate3d(-7px,-9px,0) rotate(-.7deg)}
}
@keyframes ringFloat{0%,100%{translate:0 0}50%{translate:0 -13px}}
@keyframes badgeFloat{
  0%,100%{transform:translate3d(0,0,0)}
  50%{transform:translate3d(0,-15px,0)}
}
.hero-img-wrap{animation:heroPop 1.1s var(--ease) .2s both,
                         heroFloat 7s ease-in-out 1.3s infinite}
.hero-img-ring{animation:spin 14s linear infinite,
                         ringFloat 5.5s ease-in-out infinite}
.hero-badge.b1{animation:heroUp .8s var(--ease) .9s both,
                         badgeFloat 5s ease-in-out 1.7s infinite}
.hero-badge.b2{animation:heroUp .8s var(--ease) 1.05s both,
                         badgeFloat 6.4s ease-in-out 2s infinite}

/* ---------- SECTION HEAD STAGGER ---------- */
.section-head[data-reveal] .eyebrow{opacity:0;transform:translateY(16px);transition:.6s var(--ease)}
.section-head[data-reveal] .section-title{opacity:0;transform:translateY(24px);transition:.75s var(--ease) .1s}
.section-head[data-reveal] .section-sub{opacity:0;transform:translateY(18px);transition:.75s var(--ease) .2s}
.section-head[data-reveal].in .eyebrow,
.section-head[data-reveal].in .section-title,
.section-head[data-reveal].in .section-sub{opacity:1;transform:none}

/* ---------- PAGE-ENTER STAGGER (subpages) ---------- */
@keyframes fadeUpIn{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.page-enter .back-link{animation:fadeUpIn .7s var(--ease) both}
.page-enter .eyebrow{animation:fadeUpIn .7s var(--ease) .08s both}
.page-enter .page-title{animation:fadeUpIn .8s var(--ease) .16s both}
.page-enter .page-lead{animation:fadeUpIn .8s var(--ease) .24s both}
.page-enter .pcard-tags{animation:fadeUpIn .8s var(--ease) .32s both}
.page-enter .cs-hero-img{animation:fadeUpIn .9s var(--ease) .40s both}

/* ---------- IMAGE CLIP REVEAL ---------- */
/* no transform transition here: parallax drives transform every frame */
.about-visual[data-reveal] img{clip-path:inset(0 0 100% 0);
  transition:clip-path 1.1s var(--ease) .15s}
.about-visual[data-reveal].in img{clip-path:inset(0 0 0 0)}
.about-quote{opacity:0;transform:translateY(20px);transition:.7s var(--ease) .9s}
.about-visual[data-reveal].in .about-quote{opacity:1;transform:none}

.projects-grid[data-stagger] .pcard-media img{clip-path:inset(0 0 100% 0);
  transition:clip-path .9s var(--ease),transform .6s var(--ease)}
.projects-grid[data-stagger].in .pcard-media img{clip-path:inset(0 0 0 0)}
.projects-grid[data-stagger].in .pcard:nth-child(1) .pcard-media img{transition-delay:.15s}
.projects-grid[data-stagger].in .pcard:nth-child(2) .pcard-media img{transition-delay:.28s}
.projects-grid[data-stagger].in .pcard:nth-child(3) .pcard-media img{transition-delay:.41s}

.cs-gallery[data-stagger] img{clip-path:inset(0 0 100% 0);
  transition:clip-path .8s var(--ease),transform .4s var(--ease)}
.cs-gallery[data-stagger].in img{clip-path:inset(0 0 0 0)}
.cs-gallery[data-stagger].in img:nth-child(2){transition-delay:.14s}
.cs-gallery[data-stagger].in img:nth-child(3){transition-delay:.28s}

/* ---------- MOUSE SPOTLIGHT ON CARDS ---------- */
.pcard,.edu-card,.stat,.tl-card,.cs-metric,.achv{position:relative}
.pcard::after,.edu-card::after,.stat::after,.tl-card::after,.cs-metric::after,.achv::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:1;
  background:radial-gradient(300px circle at var(--mx,50%) var(--my,50%),var(--glow),transparent 68%);
  opacity:0;transition:opacity .35s ease}
.pcard:hover::after,.edu-card:hover::after,.stat:hover::after,
.tl-card:hover::after,.cs-metric:hover::after,.achv:hover::after{opacity:1}
.pcard-body,.edu-card>*,.stat>*,.tl-card>*,.cs-metric>*,.achv>*{position:relative;z-index:2}

/* ---------- GLARE SWEEP ---------- */
.pcard-media::before{content:"";position:absolute;top:0;left:-70%;width:45%;height:100%;z-index:2;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.4),transparent);
  transform:skewX(-18deg);opacity:0;pointer-events:none}
.pcard:hover .pcard-media::before{opacity:1;animation:glare 1.1s var(--ease)}
@keyframes glare{from{left:-70%}to{left:140%}}

/* ---------- RIPPLE ---------- */
.ripple{position:absolute;border-radius:50%;transform:scale(0);pointer-events:none;
  background:rgba(255,255,255,.5);animation:rippleGo .65s var(--ease) forwards;z-index:5}
@keyframes rippleGo{to{transform:scale(2.6);opacity:0}}

/* ---------- BACK-TO-TOP PROGRESS RING ---------- */
.to-top::before{content:"";position:absolute;inset:-5px;border-radius:17px;padding:2px;pointer-events:none;
  background:conic-gradient(var(--accent) calc(var(--scrollp,0) * 360deg),transparent 0);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude}

/* ---------- TIMELINE DOT PULSE ---------- */
.tl-item.active .tl-dot{animation:dotPulse 2.2s ease-in-out infinite}
@keyframes dotPulse{0%,100%{box-shadow:0 0 0 0 var(--glow)}50%{box-shadow:0 0 0 9px transparent}}

/* ---------- MICRO-INTERACTIONS ---------- */
.stat:hover .stat-num{animation:gradShift 1.6s ease infinite}
.edu-card:hover .edu-icon{animation:iconPop .6s var(--ease)}
@keyframes iconPop{0%,100%{transform:scale(1) rotate(0)}40%{transform:scale(1.18) rotate(-8deg)}}
.achv:hover i,.contact-line:hover .ic i{animation:iconPop .6s var(--ease)}
.pcard:hover .pcard-title{color:var(--accent);transition:color .3s ease}

/* ---------- THEME TOGGLE ---------- */
.theme-toggle i{display:inline-block;transition:transform .5s var(--ease)}
.theme-toggle:hover i{transform:rotate(160deg)}
.theme-toggle.spin i{animation:tSpin .6s var(--ease)}
@keyframes tSpin{from{transform:rotate(0) scale(.6);opacity:.3}to{transform:rotate(360deg) scale(1);opacity:1}}

/* ---------- CHIP IDLE BOB ---------- */
.chip{animation:chipBob 4.5s ease-in-out infinite}
.chip:nth-child(2n){animation-delay:.5s}
.chip:nth-child(3n){animation-delay:1s}
.chip:nth-child(5n){animation-delay:1.6s}
@keyframes chipBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
/* animation must be dropped (not paused) so the :hover transform can win */
.chip:hover{animation:none}

/* ---------- NAV LINK LIFT ---------- */
.nav-links a{transition:color .25s ease,transform .25s var(--ease)}
.nav-links a:hover{transform:translateY(-2px)}

/* ---------- FOOTER REVEAL ---------- */
.footer-inner>*,.footer-bottom>*{opacity:0;transform:translateY(24px);transition:.7s var(--ease)}
.site-footer.in-view .footer-inner>*,.site-footer.in-view .footer-bottom>*{opacity:1;transform:none}
.site-footer.in-view .footer-inner>*:nth-child(2){transition-delay:.1s}
.site-footer.in-view .footer-inner>*:nth-child(3){transition-delay:.2s}
.site-footer.in-view .footer-bottom>*:nth-child(2){transition-delay:.15s}

/* ---------- HERO PARTICLES ---------- */
.particle{position:absolute;border-radius:50%;background:var(--accent);pointer-events:none;z-index:1;
  animation:floatP linear infinite}
@keyframes floatP{0%{transform:translateY(0);opacity:0}12%{opacity:.45}88%{opacity:.45}
  100%{transform:translateY(-170px);opacity:0}}

/* ---------- CONFETTI (form success) ---------- */
.confetti{position:fixed;width:9px;height:9px;z-index:9997;pointer-events:none;border-radius:2px;
  animation:confFall 1.5s var(--ease) forwards}
@keyframes confFall{0%{transform:translate(0,0) rotate(0);opacity:1}
  100%{transform:translate(var(--dx),var(--dy)) rotate(var(--rot));opacity:0}}
.form-btn.ok{background:linear-gradient(135deg,#3ddc84,#22c55e)}

/* =========================================================
   REDUCED MOTION GUARDS — everything hidden must become visible
   ========================================================= */
@media(prefers-reduced-motion:reduce){
  .preloader{display:none!important}
  .cursor-ring,.particle{display:none!important}
  .about-visual[data-reveal] img,.projects-grid[data-stagger] .pcard-media img,
  .cs-gallery[data-stagger] img{clip-path:none!important}
  .about-quote,
  .section-head[data-reveal] .eyebrow,.section-head[data-reveal] .section-title,
  .section-head[data-reveal] .section-sub,
  .footer-inner>*,.footer-bottom>*,.hero-text>*,.hero-img-wrap,.hero-img-ring,.hero-badge,.scroll-ind{
    opacity:1!important;transform:none!important;animation:none!important}
  .chip{animation:none!important}
}
.reduce-motion .preloader,.reduce-motion .cursor-ring,.reduce-motion .particle{display:none!important}
.reduce-motion .about-visual img,.reduce-motion .pcard-media img,.reduce-motion .cs-gallery img{clip-path:none!important}
.reduce-motion .about-quote,.reduce-motion .section-head .eyebrow,
.reduce-motion .section-head .section-title,.reduce-motion .section-head .section-sub,
.reduce-motion .footer-inner>*,.reduce-motion .footer-bottom>*,.reduce-motion .hero-text>*,
.reduce-motion .hero-img-wrap,.reduce-motion .hero-badge,.reduce-motion .scroll-ind{
  opacity:1!important;transform:none!important;animation:none!important}
.reduce-motion .chip{animation:none!important}