/* =====================================================================
   PREMIUM ANIMATION LAYER
   File terpisah, aditif — TIDAK mengubah warna, layout, ukuran, atau
   struktur konten style.css asli. Hanya menambahkan gerakan halus
   (transform / opacity / filter / backdrop-filter) di atas tema yang
   sudah ada. Aman dihapus kapan saja tanpa merusak apa pun.
   ===================================================================== */

:root{
  --anim-accent: #2563eb;      /* biru elektrik — sama dengan aksen asli situs */
  --anim-accent-soft: #60a5fa;
  --anim-ease: cubic-bezier(.16,1,.3,1);
  --anim-ease-soft: cubic-bezier(.22,1,.36,1);
}

/* Hormati preferensi pengguna yang sensitif terhadap gerakan */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}

/* =====================================================================
   0. LATAR LEBIH HIDUP — particle canvas dibuat lebih terlihat (opacity
   dinaikkan di sini, jumlah/kecerahan partikel diatur lewat script.js),
   ditambah beberapa layer dekoratif bertema electrical/automation:
   circuit-trace lines yang "mengalir", node/solder-pad berkedip, dan
   roda gigi (gear) berputar pelan di sudut layar. Semua fixed & di
   belakang konten (z-index rendah), aman dihapus tanpa merusak apa pun.
   ===================================================================== */
#particles{
  opacity:0.85 !important;
}

/* ---- Circuit trace SVG (lihat markup #circuitTraces di index.php) ---- */
#circuitTraces{
  position:fixed;
  inset:0;
  width:100%; height:100%;
  z-index:-1;
  pointer-events:none;
  opacity:0.4;
}
#circuitTraces path{
  fill:none;
  stroke:url(#circuitGrad);
  stroke-width:1.4;
  stroke-linecap:round;
  stroke-dasharray:10 14;
  animation:circuitFlow 3.6s linear infinite;
}
#circuitTraces path:nth-child(2n){ animation-duration:4.6s; animation-direction:reverse; }
#circuitTraces path:nth-child(3n){ animation-duration:5.4s; }
#circuitTraces circle{
  fill:var(--anim-accent-soft);
  animation:circuitNode 2.6s ease-in-out infinite;
}
@keyframes circuitFlow{
  to{ stroke-dashoffset:-240; }
}
@keyframes circuitNode{
  0%,100%{ opacity:.35; r:2.2; }
  50%{ opacity:1; r:3.4; }
}
@media (prefers-reduced-motion: reduce){
  #circuitTraces path{ animation:none; }
  #circuitTraces circle{ animation:none; }
}

/* ---- Roda gigi berputar pelan di sudut layar (tema robotika) ---- */
body::after{
  content:"";
  position:fixed;
  z-index:-1;
  pointer-events:none;
  top:-140px; right:-140px;
  width:420px; height:420px;
  opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='%2360a5fa' d='M50 6l4 10 10-4 2 11 11-1-2 11 10 5-6 9 8 8-9 6 4 10-11 2 -1 11-11-2-4 10-9-6-8 8-6-9-11 4-2-11-11 1 2-11-10-5 6-9-8-8 9-6-4-10 11-2 1-11 11 2z'/%3E%3Ccircle cx='50' cy='50' r='16' fill='%230a1220'/%3E%3C/svg%3E");
  background-size:contain;
  background-repeat:no-repeat;
  animation:gearSpin 34s linear infinite;
}
#gearDecorBL{
  position:fixed;
  z-index:-1;
  pointer-events:none;
  bottom:-160px; left:-160px;
  width:360px; height:360px;
  opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='%232563eb' d='M50 6l4 10 10-4 2 11 11-1-2 11 10 5-6 9 8 8-9 6 4 10-11 2 -1 11-11-2-4 10-9-6-8 8-6-9-11 4-2-11-11 1 2-11-10-5 6-9-8-8 9-6-4-10 11-2 1-11 11 2z'/%3E%3Ccircle cx='50' cy='50' r='16' fill='%230a1220'/%3E%3C/svg%3E");
  background-size:contain;
  background-repeat:no-repeat;
  animation:gearSpin 44s linear infinite reverse;
}
@keyframes gearSpin{
  to{ transform:rotate(360deg); }
}
@media (prefers-reduced-motion: reduce){
  body::after, #gearDecorBL{ animation:none; }
}

/* =====================================================================
   1. SCROLL PROGRESS BAR
   ===================================================================== */
#scrollProgress{
  position:fixed;
  top:0; left:0;
  height:3px;
  width:0%;
  z-index:9999;
  pointer-events:none;
  background:linear-gradient(90deg, var(--anim-accent), var(--anim-accent-soft));
  box-shadow:0 0 8px rgba(37,99,235,.55), 0 0 2px rgba(96,165,250,.8);
  transition:width .12s linear;
}

/* =====================================================================
   2. NAVBAR GLASSMORPHISM SAAT SCROLL
   Hanya menambah class saat scroll — warna dasar tetap dari style.css,
   kita cuma menambahkan blur + transparansi + shadow tipis.
   ===================================================================== */
#navbar{
  transition:background-color .45s var(--anim-ease),
             backdrop-filter .45s var(--anim-ease),
             box-shadow .45s var(--anim-ease),
             border-color .45s var(--anim-ease),
             transform .45s var(--anim-ease);
}
#navbar.navbar-glass{
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  box-shadow:0 10px 30px rgba(15,23,42,.08), 0 1px 0 rgba(37,99,235,.12);
}
#navbar.navbar-hide{ transform:translateY(-100%); }

/* =====================================================================
   3. REVEAL ON SCROLL (fade + blur + slide) — progressive enhancement.
   Elemen HANYA disembunyikan jika JS aktif (html.js-anim), jadi kalau
   JS mati, semua konten tetap tampil normal seperti biasa.
   ===================================================================== */
html.js-anim [data-aos],
html.js-anim .anim-reveal{
  opacity:0;
  will-change:transform,opacity,filter;
  transition:opacity .9s var(--anim-ease),
             transform .9s var(--anim-ease),
             filter .9s var(--anim-ease);
}
html.js-anim [data-aos="fade-up"]{ transform:translateY(34px); filter:blur(6px); }
html.js-anim [data-aos="fade-right"]{ transform:translateX(-44px); filter:blur(6px); }
html.js-anim [data-aos="fade-left"]{ transform:translateX(44px); filter:blur(6px); }
html.js-anim .anim-reveal{ transform:translateY(26px) scale(.985); filter:blur(4px); }
html.js-anim .anim-reveal.reveal-scale{ transform:scale(.9); filter:blur(3px); }

html.js-anim [data-aos].aos-in,
html.js-anim .anim-reveal.aos-in{
  opacity:1;
  transform:translate(0,0) scale(1);
  filter:blur(0);
}

/* Hero (foto + info kanan): reveal jauh lebih cepat & tanpa blur berat,
   karena elemen ini selalu ada di layar pertama kali dibuka — tidak
   perlu drama fade lambat seperti kartu-kartu yang muncul saat discroll. */
html.js-anim .anim-fast-reveal{
  transition-duration:.45s !important;
  transition-timing-function:var(--anim-ease-soft) !important;
  filter:none !important;
  transform:translateY(10px) !important;
}
html.js-anim .anim-fast-reveal.aos-in{
  transform:translate(0,0) !important;
}

/* =====================================================================
   4. HOVER ELEGAN + MICRO-INTERACTION (kartu & chip)
   Hanya menambahkan transform/box-shadow — tidak override warna.
   ===================================================================== */
.edu-card,
.exp-full-card,
.ach-lcard,
.skills-panel,
.contact-item,
.stat-item{
  transition:transform .5s var(--anim-ease-soft), box-shadow .5s var(--anim-ease-soft);
}
.edu-card:hover,
.exp-full-card:hover,
.ach-lcard:hover,
.skills-panel:hover{
  transform:translateY(-4px);
  box-shadow:0 22px 50px rgba(15,23,42,.10), 0 0 0 1px rgba(37,99,235,.10);
}
.contact-item:hover{
  transform:translateX(4px);
}
.stat-item{ transition:transform .35s var(--anim-ease-soft); }
.stat-item:hover{ transform:translateY(-3px); }

.skill-chip,
.course-tag,
.proj-tag-mini,
.sp-chip{
  transition:transform .3s var(--anim-ease-soft), box-shadow .3s var(--anim-ease-soft), border-color .3s;
}
.skill-chip:hover,
.course-tag:hover,
.sp-chip:hover{
  transform:translateY(-2px) scale(1.03);
  box-shadow:0 6px 16px rgba(37,99,235,.18);
}

/* Skill progress bars: animasi mengisi halus saat masuk viewport */
.bar-fill{
  transition:width 1.1s var(--anim-ease);
}
html.js-anim .bar-fill.bar-animate-init{ width:0 !important; }

/* =====================================================================
   5. TOMBOL — micro-interaction + glow + ripple halus
   ===================================================================== */
.btn-primary,
.btn-outline,
.proj-filter-btn{
  position:relative;
  overflow:hidden;
  transition:transform .35s var(--anim-ease-soft), box-shadow .35s var(--anim-ease-soft);
}
.btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 28px rgba(37,99,235,.30);
}
.btn-outline:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 22px rgba(37,99,235,.14);
}
.btn-primary:active,
.btn-outline:active,
.proj-filter-btn:active{
  transform:translateY(0) scale(.96);
}

/* Ripple halus berbasis CSS variable posisi klik (di-set oleh JS) */
.btn-primary::after,
.btn-outline::after,
.proj-filter-btn::after{
  content:"";
  position:absolute;
  top:var(--ripple-y,50%);
  left:var(--ripple-x,50%);
  width:8px; height:8px;
  background:radial-gradient(circle, rgba(96,165,250,.55) 0%, rgba(37,99,235,0) 70%);
  border-radius:50%;
  transform:translate(-50%,-50%) scale(0);
  opacity:0;
  pointer-events:none;
}
.btn-primary.rippling::after,
.btn-outline.rippling::after,
.proj-filter-btn.rippling::after{
  animation:btnRipple .6s var(--anim-ease-soft);
}
@keyframes btnRipple{
  0%{ transform:translate(-50%,-50%) scale(0); opacity:.65; }
  100%{ transform:translate(-50%,-50%) scale(24); opacity:0; }
}

/* =====================================================================
   6. FLOATING PROFILE PHOTO + GLOW LEMBUT
   Float diterapkan pada .photo-frame (child), parallax scroll pada
   .hero-photo-wrap (parent) — dua elemen berbeda agar transform tidak
   saling tabrakan.
   ===================================================================== */
.photo-frame{
  animation:photoFloat 6.5s ease-in-out infinite;
  will-change:transform;
}
.hero-photo-wrap:hover .photo-frame{
  animation-play-state:paused;
}
@keyframes photoFloat{
  0%,100%{ transform:translateY(0) rotate(0deg); }
  50%{ transform:translateY(-10px) rotate(.4deg); }
}

.photo-frame{
  position:relative;
}
.photo-frame::after{
  content:"";
  position:absolute;
  inset:-14px;
  border-radius:inherit;
  background:radial-gradient(closest-side, rgba(37,99,235,.22), rgba(37,99,235,0) 72%);
  opacity:.55;
  z-index:-1;
  animation:glowPulse 4.5s ease-in-out infinite;
  pointer-events:none;
}
@keyframes glowPulse{
  0%,100%{ opacity:.35; transform:scale(.97); }
  50%{ opacity:.65; transform:scale(1.04); }
}

/* Glow lembut pada elemen penting lain */
.status-dot,
.avail-dot{
  animation:dotGlow 2.4s ease-in-out infinite;
}
@keyframes dotGlow{
  0%,100%{ box-shadow:0 0 0 0 rgba(37,99,235,.55); }
  50%{ box-shadow:0 0 0 6px rgba(37,99,235,0); }
}

.gpa-badge,
.accent-name{
  transition:text-shadow .4s, box-shadow .4s;
}
.gpa-badge:hover{
  box-shadow:0 0 18px rgba(37,99,235,.28);
}

/* Logo UNJ (edu-logo-box) — glow lebih kuat & berdenyut, plus cincin
   scan tipis berputar supaya terasa lebih "electronic". Tidak mengubah
   ukuran/posisi kotak aslinya, hanya menambah lapisan glow di belakang. */
.edu-logo-box{
  position:relative;
}
.edu-logo-box::before{
  content:"";
  position:absolute;
  inset:-16px;
  border-radius:20px;
  background:radial-gradient(closest-side, rgba(37,99,235,.55), rgba(37,99,235,0) 72%);
  z-index:-1;
  animation:unjGlowPulse 3.2s ease-in-out infinite;
  pointer-events:none;
}
.edu-logo-box::after{
  content:"";
  position:absolute;
  inset:-6px;
  border-radius:16px;
  border:1.5px solid transparent;
  border-top-color:var(--anim-accent-soft);
  border-right-color:var(--anim-accent-soft);
  opacity:.55;
  pointer-events:none;
  animation:unjRingSpin 5s linear infinite;
}
@keyframes unjGlowPulse{
  0%,100%{ opacity:.45; transform:scale(.94); }
  50%{ opacity:.9; transform:scale(1.08); }
}
@keyframes unjRingSpin{
  to{ transform:rotate(360deg); }
}
@media (prefers-reduced-motion: reduce){
  .edu-logo-box::before, .edu-logo-box::after{ animation:none; }
}

/* =====================================================================
   7. PARALLAX RINGAN (posisi diatur lewat JS via CSS variable)
   ===================================================================== */
.hero-photo-wrap{
  transform:translateY(var(--parallax-y, 0px));
  will-change:transform;
  perspective:800px; /* konteks 3D untuk efek tilt foto di bawah */
}

/* Tilt 3D lembut pada foto (nilai rotateX/Y di-set oleh JS saat hover) */
.hero-photo{
  transition:transform .25s var(--anim-ease-soft);
  will-change:transform;
}

/* =====================================================================
   7B. SHINE SWEEP PADA NAMA (efek kilau lewat, warna dasar tidak berubah)
   ===================================================================== */
.accent-name{
  position:relative;
  display:inline-block;
}
.accent-name::before{
  content:"";
  position:absolute;
  inset:-2px -6px;
  background:linear-gradient(100deg, transparent 30%, rgba(255,255,255,.8) 48%, rgba(255,255,255,.8) 52%, transparent 70%);
  background-size:250% 100%;
  background-position:-120% 0;
  mix-blend-mode:overlay;
  pointer-events:none;
  animation:nameShine 5s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce){
  .accent-name::before{ animation:none; display:none; }
}
@keyframes nameShine{
  0%, 55%{ background-position:-120% 0; }
  100%{ background-position:160% 0; }
}

/* =====================================================================
   8B. CURSOR SPOTLIGHT — glow lembut mengikuti kursor di hero section
   Posisi diatur JS lewat --spot-x / --spot-y. Non-aktif di perangkat
   sentuh & reduced-motion.
   ===================================================================== */
.hero-section::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:0;
  transition:opacity .4s var(--anim-ease);
  background:radial-gradient(280px circle at var(--spot-x,50%) var(--spot-y,50%),
              rgba(37,99,235,.10), transparent 70%);
}
.hero-section.spotlight-active::after{
  opacity:1;
}

/* =====================================================================
   9. AURORA BACKGROUND — gradient bergerak halus di belakang hero
   Ditambahkan sebagai pseudo-element ::before pada section, di belakang
   konten (z-index rendah) supaya tidak mengganggu apa pun.
   ===================================================================== */
.hero-section{
  position:relative;
  isolation:isolate;
}
.hero-section::before{
  content:"";
  position:absolute;
  inset:-10% -10% -10% -10%;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(38% 42% at 18% 22%, rgba(37,99,235,.24), transparent 70%),
    radial-gradient(32% 38% at 82% 78%, rgba(34,211,238,.20), transparent 70%),
    radial-gradient(30% 34% at 85% 15%, rgba(37,99,235,.16), transparent 70%);
  background-size:140% 140%;
  animation:auroraDrift 16s ease-in-out infinite;
  filter:blur(30px);
}
@keyframes auroraDrift{
  0%,100%{ background-position:0% 0%, 100% 100%, 100% 0%; }
  50%{ background-position:12% 8%, 88% 92%, 90% 6%; }
}
@media (prefers-reduced-motion: reduce){
  .hero-section::before{ animation:none; }
}

/* =====================================================================
   10. STAGGERED TEXT REVEAL — hero-info & judul section
   Class ditambahkan oleh JS (.stagger-child), delay per anak diatur
   lewat inline style transitionDelay.
   ===================================================================== */
html.js-anim .stagger-child{
  opacity:0;
  transform:translateY(16px);
  transition:opacity .6s var(--anim-ease), transform .6s var(--anim-ease);
}
html.js-anim .stagger-child.aos-in{
  opacity:1;
  transform:translateY(0);
}

/* =====================================================================
   11. JUDUL SECTION — underline "digambar" saat muncul
   ===================================================================== */
.section-title{
  position:relative;
  display:inline-block;
}
.section-title::after{
  content:"";
  position:absolute;
  left:0; bottom:-8px;
  height:3px;
  width:100%;
  background:linear-gradient(90deg, var(--anim-accent), var(--anim-accent-soft));
  border-radius:2px;
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .9s var(--anim-ease) .15s;
}
html.js-anim .section-header.aos-in .section-title::after,
html.js-anim .section-header:not([data-aos]) .section-title::after{
  transform:scaleX(1);
}
.section-header:not(.section-header) .section-title::after{ transform:scaleX(1); }

/* =====================================================================
   12. ZOOM HALUS PADA FOTO GALERI / PROJECT SAAT HOVER
   ===================================================================== */
.edu-photo,
.proj-overlay-thumb img,
.proj-card-new img,
.edu-logo-box img{
  transition:transform .5s var(--anim-ease-soft), filter .5s var(--anim-ease-soft);
}
.edu-photo:hover,
.proj-card-new:hover img{
  transform:scale(1.06);
  filter:brightness(1.05);
}

/* =====================================================================
   13. STAT ITEM — pop-in dengan sedikit bounce saat count-up mulai
   ===================================================================== */
html.js-anim .stat-item{
  opacity:0;
  transform:translateY(14px) scale(.94);
  transition:opacity .55s var(--anim-ease), transform .55s cubic-bezier(.34,1.56,.64,1);
}
html.js-anim .stat-item.aos-in{
  opacity:1;
  transform:translateY(0) scale(1);
}

/* =====================================================================
   8. TRANSISI SINEMATIK ANTAR SECTION
   Konten dalam tiap section (bukan section itu sendiri, agar tinggi
   halaman & posisi scroll tidak pernah berubah) fade + blur + slide
   halus saat section mulai terlihat.
   ===================================================================== */
html.js-anim .section > .container,
html.js-anim .section > .hero-grid{
  transition:opacity 1s var(--anim-ease), transform 1s var(--anim-ease), filter 1s var(--anim-ease);
}
html.js-anim .section.section-leaving > .container,
html.js-anim .section.section-leaving > .hero-grid{
  opacity:.55;
  filter:blur(2px);
}

/* Smooth-scroll cursor line highlight saat navigasi via navbar */
.nav-links a{
  position:relative;
}
.nav-links a::after{
  content:"";
  position:absolute;
  left:0; bottom:-4px;
  width:0%;
  height:2px;
  background:var(--anim-accent);
  transition:width .35s var(--anim-ease-soft);
}
.nav-links a:hover::after,
.nav-links a.nav-active::after{
  width:100%;
}