/* ============================================================
   HC-FX — Lapisan interaksi & animasi gaya halalcreative.id
   Dipakai bersama oleh order/default.php dan ien-landing
   (program_view.php). File ini TIDAK mendefinisikan warna baru —
   semua warna diambil dari variabel tema yang sudah ada di tiap
   halaman (--brand/--gold di order, --blue di ien-landing) lewat
   fallback var(--a, var(--b, #hex)). Jadi begitu file ini di-load
   di halaman manapun, otomatis ikut skema putih-biru Imalah
   halaman itu — tidak perlu diubah manual.

   Isinya murni "lapisan gerak": orb gradient mengambang, kartu
   glow/tilt saat hover, tombol magnetic, reveal-on-scroll dengan
   beberapa varian, counter angka berjalan, indikator tab yang
   meluncur, progress bar scroll, dan spotlight kursor.

   Semua animasi menghormati prefers-reduced-motion, dan efek yang
   butuh mouse presisi (tilt/magnetic/spotlight) otomatis nonaktif
   di layar sentuh lewat @media(pointer:fine).
   ============================================================ */

:root{
  --hc-a:  var(--brand,  var(--blue,  #1565C0));
  --hc-a2: var(--brand-lt, var(--blue-2, #3A9BE0));
  --hc-a3: var(--brand-dk, var(--navy2, #0A3A73));
  /* --hc-g: aksen kedua. Kalau halaman punya variabel gold (order/default.php punya,
     ien-landing tidak), pakai itu; kalau tidak ada, JANGAN jatuh ke warna baru — pakai
     --hc-a2 lagi supaya halaman yang temanya murni biru (ien-landing) tetap murni biru. */
  --hc-g:  var(--gold, var(--gold2, var(--hc-a2)));
  --hc-ease: var(--ease, cubic-bezier(.16,1,.3,1));
}

@media (prefers-reduced-motion: reduce){
  .hc-orb,.hc-tab-indicator,.hc-progress,.hc-counter-live{transition:none !important;animation:none !important}
}

/* ============ ORB GRADIENT MENGAMBANG (hero background) ============ */
.hc-orbs{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.hc-orb{position:absolute;border-radius:50%;filter:blur(50px);opacity:.55;
  background:radial-gradient(circle at 35% 35%, var(--hc-a2), transparent 70%);
  animation:hc-drift 16s ease-in-out infinite;will-change:transform}
.hc-orb.hc-orb-gold{background:radial-gradient(circle at 35% 35%, var(--hc-g), transparent 70%);opacity:.4}
.hc-orb.hc-orb-1{width:280px;height:280px;top:-60px;left:-40px;animation-duration:18s}
.hc-orb.hc-orb-2{width:220px;height:220px;bottom:-50px;right:-30px;animation-duration:14s;animation-delay:-4s}
.hc-orb.hc-orb-3{width:160px;height:160px;top:40%;right:12%;animation-duration:20s;animation-delay:-9s}
@keyframes hc-drift{
  0%,100%{transform:translate(0,0) scale(1)}
  33%{transform:translate(18px,-22px) scale(1.08)}
  66%{transform:translate(-16px,14px) scale(.95)}
}
@media (prefers-reduced-motion: reduce){.hc-orb{animation:none}}

/* ============ REVEAL ON SCROLL (varian tambahan) ============ */
.hc-reveal{opacity:0;transform:translateY(22px);transition:opacity .6s var(--hc-ease),transform .6s var(--hc-ease)}
.hc-reveal.hc-in{opacity:1;transform:none}
.hc-reveal-left{opacity:0;transform:translateX(-32px);transition:opacity .6s var(--hc-ease),transform .6s var(--hc-ease)}
.hc-reveal-left.hc-in{opacity:1;transform:none}
.hc-reveal-scale{opacity:0;transform:scale(.9);transition:opacity .5s var(--hc-ease),transform .5s var(--hc-ease)}
.hc-reveal-scale.hc-in{opacity:1;transform:none}
/* Stagger — anak-anak container [data-hc-stagger] dapat delay bertingkat via JS (custom prop --hc-d) */
[data-hc-stagger] > *{transition-delay:calc(var(--hc-d,0) * 70ms)}
@media (prefers-reduced-motion: reduce){
  .hc-reveal,.hc-reveal-left,.hc-reveal-scale{opacity:1;transform:none;transition:none}
}

/* ============ KARTU GLOW + TILT ============ */
.hc-glow-card{position:relative;transition:transform .35s var(--hc-ease),box-shadow .35s var(--hc-ease);transform-style:preserve-3d}
@media(hover:hover) and (pointer:fine){
  .hc-glow-card:hover{box-shadow:0 18px 40px -12px color-mix(in srgb, var(--hc-a) 45%, transparent),0 4px 14px rgba(20,45,90,.08)}
}
.hc-glow-card::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;
  background:linear-gradient(135deg, var(--hc-a2), var(--hc-g), var(--hc-a2));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;transition:opacity .35s var(--hc-ease);pointer-events:none}
@media(hover:hover) and (pointer:fine){.hc-glow-card:hover::before{opacity:1}}

/* Spotlight kursor — highlight radial mengikuti posisi mouse di dalam kartu */
.hc-spotlight{position:relative;overflow:hidden}
.hc-spotlight::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(220px circle at var(--hc-x,50%) var(--hc-y,50%), color-mix(in srgb, var(--hc-a2) 18%, transparent), transparent 70%);
  transition:opacity .3s var(--hc-ease)}
@media(hover:hover) and (pointer:fine){.hc-spotlight:hover::after{opacity:1}}

/* ============ TOMBOL MAGNETIC + RIPPLE ============ */
.hc-magnetic{position:relative;display:inline-flex;will-change:transform;transition:transform .25s var(--hc-ease)}
.hc-ripple{position:relative}
.hc-ripple.hc-ripple-clip{overflow:hidden}
.hc-ripple-dot{position:absolute;border-radius:50%;background:rgba(255,255,255,.55);
  transform:scale(0);animation:hc-ripple .6s ease-out forwards;pointer-events:none}
@keyframes hc-ripple{to{transform:scale(1);opacity:0}}

/* ============ TEKS GRADIENT BERGERAK ============ */
.hc-gradient-text{background:linear-gradient(100deg, var(--hc-a) 0%, var(--hc-g) 45%, var(--hc-a2) 100%);
  background-size:220% auto;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:hc-gradient-shift 5s ease-in-out infinite}
@keyframes hc-gradient-shift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

/* ============ BADGE PULSE-GLOW ============ */
.hc-pulse-glow{animation:hc-pulse-glow 2.2s ease-in-out infinite}
@keyframes hc-pulse-glow{0%,100%{opacity:1;filter:brightness(1)}50%{opacity:.85;filter:brightness(1.18)}}

/* ============ ROTASI LAMBAT (ikon/aksen dekoratif) ============ */
.hc-rotate-slow{animation:hc-rotate-slow 14s linear infinite}
@keyframes hc-rotate-slow{from{transform:rotate(0)}to{transform:rotate(360deg)}}

/* ============ FLOAT HALUS ============ */
.hc-float{animation:hc-float 4s ease-in-out infinite}
@keyframes hc-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}

/* ============ INDIKATOR TAB YANG MELUNCUR ============ */
[data-hc-tabs]{position:relative}
.hc-tab-indicator{position:absolute;top:0;left:0;height:100%;border-radius:inherit;background:var(--hc-a);
  z-index:0;transition:transform .35s var(--hc-ease),width .35s var(--hc-ease);pointer-events:none}

/* ============ PROGRESS BAR SCROLL (atas halaman) ============ */
.hc-progress{position:fixed;top:0;left:0;height:3px;width:0%;z-index:9999;
  background:linear-gradient(90deg, var(--hc-a), var(--hc-g), var(--hc-a2));pointer-events:none;
  transition:width .1s linear}

/* ============ COUNTER ANGKA BERJALAN ============ */
.hc-counter-live{font-variant-numeric:tabular-nums}

/* ============ MARQUEE — jeda halus saat disentuh/hover (pelengkap marquee yang sudah ada) ============ */
.hc-marquee-pause:hover .promo-track,
.hc-marquee-pause:active .promo-track{animation-play-state:paused}