/* ==========================================================================
   CADAS NETWORK — FULL ANIMATION LAYER
   Dimuat SETELAH style.css. Murni tambahan: hapus <link> ke file ini
   (dan assets/js/animations.js) kalau ingin kembali ke tampilan semula.
   ========================================================================== */

:root {
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ---------- 1. PAGE LOADER ---------- */
.page-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  background: var(--bg);
  transition: opacity 0.6s ease, visibility 0.6s ease, transform 0.8s var(--ease-out);
}
.page-loader.done {
  opacity: 0;
  visibility: hidden;
  transform: scale(1.04);
  pointer-events: none;
}
.page-loader .pl-logo {
  height: 54px;
  width: auto;
  animation: plPulse 1.4s ease-in-out infinite;
}
.page-loader .pl-bar {
  width: 160px;
  height: 3px;
  border-radius: 3px;
  background: var(--border);
  overflow: hidden;
}
.page-loader .pl-bar i {
  display: block;
  height: 100%;
  width: 40%;
  border-radius: 3px;
  background: var(--grad-brand);
  animation: plSlide 1.1s var(--ease-out) infinite;
}
@keyframes plPulse {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(45, 217, 232, 0)); }
  50% { transform: scale(1.06); filter: drop-shadow(0 0 18px rgba(45, 217, 232, 0.55)); }
}
@keyframes plSlide {
  0% { transform: translateX(-110%); }
  100% { transform: translateX(300%); }
}


/* ---------- 2. SCROLL PROGRESS + CURSOR GLOW + AURORA ---------- */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 100%;
  z-index: 10000;
  transform-origin: 0 50%;
  transform: scaleX(0);
  background: linear-gradient(90deg, #7C6CF6, #2DD9E8, #34D399);
  box-shadow: 0 0 12px rgba(45, 217, 232, 0.7);
  pointer-events: none;
}

.cursor-glow {
  position: fixed;
  top: 0;
  left: 0;
  width: 520px;
  height: 520px;
  margin: -260px 0 0 -260px;
  z-index: -1;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(45, 217, 232, 0.13), rgba(124, 108, 246, 0.07) 40%, transparent 68%);
  opacity: 0;
  transition: opacity 0.5s ease;
  will-change: transform;
}
.cursor-glow.on { opacity: 1; }
html[data-theme="light"] .cursor-glow {
  background: radial-gradient(circle, rgba(8, 145, 178, 0.12), rgba(109, 91, 224, 0.06) 40%, transparent 68%);
}

.aurora {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}
.aurora i {
  position: absolute;
  border-radius: 50%;
  will-change: transform;
}
.aurora i:nth-child(1) {
  width: 62vmax; height: 62vmax;
  top: -28vmax; right: -20vmax;
  background: radial-gradient(circle, rgba(124, 108, 246, 0.20), transparent 62%);
  animation: drift1 26s ease-in-out infinite alternate;
}
.aurora i:nth-child(2) {
  width: 54vmax; height: 54vmax;
  bottom: -26vmax; left: -18vmax;
  background: radial-gradient(circle, rgba(45, 217, 232, 0.14), transparent 62%);
  animation: drift2 32s ease-in-out infinite alternate;
}
.aurora i:nth-child(3) {
  width: 38vmax; height: 38vmax;
  top: 38%; left: 42%;
  background: radial-gradient(circle, rgba(52, 211, 153, 0.08), transparent 62%);
  animation: drift3 38s ease-in-out infinite alternate;
}
html[data-theme="light"] .aurora i:nth-child(1) { background: radial-gradient(circle, rgba(109, 91, 224, 0.12), transparent 62%); }
html[data-theme="light"] .aurora i:nth-child(2) { background: radial-gradient(circle, rgba(8, 145, 178, 0.10), transparent 62%); }
html[data-theme="light"] .aurora i:nth-child(3) { background: radial-gradient(circle, rgba(14, 157, 110, 0.06), transparent 62%); }

@keyframes drift1 { to { transform: translate(-14vmax, 16vmax) scale(1.15); } }
@keyframes drift2 { to { transform: translate(18vmax, -12vmax) scale(1.2); } }
@keyframes drift3 { to { transform: translate(-16vmax, -10vmax) scale(0.8); } }

/* ---------- 3. NAVBAR ---------- */
header {
  transition: transform 0.45s var(--ease-out), padding 0.3s ease;
}
header.nav-hidden { transform: translateY(-120%); }
header .navbar {
  transition: box-shadow 0.35s ease, background-color 0.25s ease, border-color 0.25s ease, padding 0.3s ease;
}
header.scrolled .navbar {
  box-shadow: 0 14px 40px -14px rgba(0, 0, 0, 0.55), 0 0 0 1px var(--border);
}
header.scrolled { padding-top: 8px; }

/* Entrance navbar */
@keyframes navIn {
  from { opacity: 0; transform: translateY(-22px); }
  to { opacity: 1; transform: none; }
}
body.is-loaded header .navbar { animation: navIn 0.8s var(--ease-out) 0.1s backwards; }

/* Garis bawah animasi untuk menu */
.nav-links a {
  background-image: linear-gradient(90deg, var(--cyan), var(--violet));
  background-repeat: no-repeat;
  background-position: 50% calc(100% - 4px);
  background-size: 0% 2px;
  transition: background-size 0.35s var(--ease-out), background-color 0.15s, color 0.15s;
}
.nav-links a:hover { background-size: calc(100% - 30px) 2px; }

/* Logo */
.logo-full-img { transition: transform 0.5s var(--ease-spring); }
.logo:hover .logo-full-img { transform: rotate(-6deg) scale(1.08); }

/* Hamburger -> X lebih smooth */
.menu-toggle .bar { transition: transform 0.35s var(--ease-out), opacity 0.2s ease; }

/* Link di drawer masuk berurutan */
.offcanvas.open .offcanvas-nav a {
  animation: drawerLink 0.55s var(--ease-out) backwards;
}
.offcanvas.open .offcanvas-nav a:nth-child(1) { animation-delay: 0.10s; }
.offcanvas.open .offcanvas-nav a:nth-child(2) { animation-delay: 0.15s; }
.offcanvas.open .offcanvas-nav a:nth-child(3) { animation-delay: 0.20s; }
.offcanvas.open .offcanvas-nav a:nth-child(4) { animation-delay: 0.25s; }
.offcanvas.open .offcanvas-nav a:nth-child(5) { animation-delay: 0.30s; }
.offcanvas.open .offcanvas-nav a:nth-child(6) { animation-delay: 0.35s; }
.offcanvas.open .offcanvas-nav a:nth-child(7) { animation-delay: 0.40s; }
.offcanvas.open .offcanvas-footer { animation: drawerLink 0.55s var(--ease-out) 0.45s backwards; }
@keyframes drawerLink {
  from { opacity: 0; transform: translateX(28px); }
  to { opacity: 1; transform: none; }
}

/* Toggle tema: ikon berputar */
.theme-toggle svg { transition: transform 0.6s var(--ease-spring); }
.theme-toggle:hover svg { transform: rotate(180deg) scale(1.1); }

/* ---------- 4. SCROLL REVEAL (varian arah + stagger) ---------- */
.reveal {
  opacity: 0;
  transform: translateY(34px) scale(0.985);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
}
.reveal.in { opacity: 1; transform: none; }

/* Container grid: kontainer tampil, anak-anaknya yang masuk satu-satu */
.reveal.stagger { opacity: 1; transform: none; transition: none; }
.reveal.stagger:not(.in) > * { opacity: 0; }
.reveal.stagger.in > * {
  animation: popIn 0.85s var(--ease-out) backwards;
  animation-delay: calc(var(--i, 0) * 90ms);
}
@keyframes popIn {
  from { opacity: 0; transform: translateY(40px) scale(0.94); }
  to { opacity: 1; transform: none; }
}

/* Section head: eyebrow, paragraf */
.section-head.reveal .eyebrow-line {
  opacity: 0;
  letter-spacing: 0.4em;
  transition: opacity 0.8s ease 0.1s, letter-spacing 1.1s var(--ease-out) 0.1s;
}
.section-head.reveal.in .eyebrow-line { opacity: 1; letter-spacing: 0.08em; }
.section-head.reveal p, .page-head.reveal p {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.8s ease 0.45s, transform 0.8s var(--ease-out) 0.45s;
}
.section-head.reveal.in p, .page-head.reveal.in p { opacity: 1; transform: none; }

/* Judul: kata naik dari balik mask */
.w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.12em; margin-bottom: -0.12em; }
.wi {
  display: inline-block;
  transform: translateY(115%) rotate(4deg);
  transition: transform 0.9s var(--ease-out);
  transition-delay: calc(var(--wi, 0) * 55ms + 120ms);
}
.reveal.in .wi, body.is-loaded .hero .wi, .in-view .wi { transform: none; }

/* ---------- 5. HERO ---------- */
.hero .eyebrow { opacity: 0; transform: translateY(16px); }
body.is-loaded .hero .eyebrow { animation: heroUp 0.8s var(--ease-out) 0.15s forwards; }

.hero h1 .grad {
  display: inline-block;
  background: linear-gradient(110deg, #7C6CF6, #2DD9E8, #7C6CF6);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  opacity: 0;
  transform: translateY(24px);
}
body.is-loaded .hero h1 .grad {
  animation: heroUp 0.9s var(--ease-out) 0.65s forwards, gradShift 7s linear 1.5s infinite;
}
@keyframes gradShift { to { background-position: -200% 0; } }

.hero p.lead, .hero .hero-ctas, .hero .trust-chip-row { opacity: 0; transform: translateY(22px); }
body.is-loaded .hero p.lead { animation: heroUp 0.9s var(--ease-out) 0.85s forwards; }
body.is-loaded .hero .hero-ctas { animation: heroUp 0.9s var(--ease-out) 1.0s forwards; }
body.is-loaded .hero .trust-chip-row { animation: heroUp 0.9s var(--ease-out) 1.15s forwards; }
body.is-loaded .hero .trust-chip:nth-child(1) { animation: chipIn 0.7s var(--ease-spring) 1.25s backwards; }
body.is-loaded .hero .trust-chip:nth-child(2) { animation: chipIn 0.7s var(--ease-spring) 1.35s backwards; }
body.is-loaded .hero .trust-chip:nth-child(3) { animation: chipIn 0.7s var(--ease-spring) 1.45s backwards; }
@keyframes heroUp { to { opacity: 1; transform: none; } }
@keyframes chipIn { from { opacity: 0; transform: scale(0.7) translateY(10px); } to { opacity: 1; transform: none; } }

/* Kartu rekomendasi: masuk dari kanan, lalu tetap melayang (float bawaan) */
.reco-card { opacity: 0; }
body.is-loaded .reco-card {
  animation: recoIn 1.1s var(--ease-out) 0.5s forwards, float 6s ease-in-out 1.6s infinite;
}
@keyframes recoIn {
  from { opacity: 0; transform: translateX(80px) rotate(6deg) scale(0.9); }
  to { opacity: 1; transform: translateY(0) rotate(1.5deg); }
}
.reco-features li { opacity: 0; transform: translateX(-14px); }
body.is-loaded .reco-features li { animation: liIn 0.6s var(--ease-out) backwards; animation-fill-mode: forwards; }
body.is-loaded .reco-features li:nth-child(1) { animation-delay: 1.1s; }
body.is-loaded .reco-features li:nth-child(2) { animation-delay: 1.25s; }
body.is-loaded .reco-features li:nth-child(3) { animation-delay: 1.4s; }
@keyframes liIn { to { opacity: 1; transform: none; } }
.reco-badge { animation: badgePulse 2.4s ease-in-out infinite; }
@keyframes badgePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(45, 217, 232, 0.5); }
  50% { box-shadow: 0 0 0 9px rgba(45, 217, 232, 0); }
}

/* Cincin sinyal di titik "aktif" */
.pulse-dot { position: relative; }
.pulse-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--cyan);
  animation: ping 1.8s cubic-bezier(0, 0, 0.2, 1) infinite;
}
@keyframes ping {
  0% { transform: scale(1); opacity: 0.9; }
  100% { transform: scale(4.2); opacity: 0; }
}

/* Statistik hero */
.hero-stats .stat { opacity: 0; transform: translateY(18px); }
body.is-loaded .hero-stats .stat { animation: heroUp 0.8s var(--ease-out) forwards; }
body.is-loaded .hero-stats .stat:nth-child(1) { animation-delay: 1.3s; }
body.is-loaded .hero-stats .stat:nth-child(2) { animation-delay: 1.45s; }
body.is-loaded .hero-stats .stat:nth-child(3) { animation-delay: 1.6s; }

/* Tombol utama: denyut cahaya + kilau menyapu */
.btn-primary, .nav-cta, .reco-btn { position: relative; overflow: hidden; isolation: isolate; }
.btn-primary::after, .nav-cta::after, .reco-btn::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: -70%;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  transform: skewX(-22deg);
  z-index: -1;
  animation: shine 4.5s ease-in-out infinite;
}
@keyframes shine {
  0%, 55% { left: -70%; }
  100% { left: 140%; }
}
.hero .btn-primary { animation: ctaGlow 2.8s ease-in-out infinite; }
@keyframes ctaGlow {
  0%, 100% { box-shadow: 0 12px 30px rgba(45, 217, 232, 0.25); }
  50% { box-shadow: 0 14px 44px rgba(45, 217, 232, 0.55), 0 0 0 6px rgba(45, 217, 232, 0.08); }
}
.btn-primary, .btn-ghost, .nav-cta, .reco-btn {
  transition: transform 0.25s var(--ease-spring), filter 0.2s, background-color 0.2s, box-shadow 0.3s;
}
.btn-primary:active, .btn-ghost:active, .nav-cta:active, .reco-btn:active { transform: scale(0.95); }
.btn-primary:hover { transform: translateY(-3px); }
.btn-ghost:hover { transform: translateY(-3px); }

/* Ripple klik */
.ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
  transform: scale(0);
  animation: rippleOut 0.7s ease-out forwards;
  pointer-events: none;
  z-index: 0;
}
.btn-ghost { position: relative; overflow: hidden; }
.btn-ghost .ripple { background: rgba(45, 217, 232, 0.35); }
@keyframes rippleOut { to { transform: scale(3); opacity: 0; } }

/* ---------- 6. KARTU: spotlight, ikon, tilt ---------- */
:where(.card) { position: relative; }
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), rgba(45, 217, 232, 0.14), transparent 55%);
  transition: opacity 0.35s ease;
  z-index: 0;
}
.card:hover::before { opacity: 1; }
html[data-theme="light"] .card::before {
  background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), rgba(8, 145, 178, 0.10), transparent 55%);
}
.card { transition: transform 0.35s var(--ease-out), border-color 0.25s ease, box-shadow 0.3s ease, background-color 0.25s ease, color 0.25s ease; }
/* Kartu yang juga .reveal: pertahankan transisi fade-in masuk */
.card.reveal { transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out), border-color 0.25s ease, box-shadow 0.3s ease; }
.card.reveal.stagger { transition: border-color 0.25s ease, box-shadow 0.3s ease; }
.card.tilting { transition: transform 0.12s linear, border-color 0.25s ease, box-shadow 0.3s ease; }

/* Ikon fitur: mengambang pelan, memantul saat hover */
.fi, .service-icon, .lb-ic { transition: transform 0.5s var(--ease-spring); }
.fi svg, .service-icon svg, .lb-ic svg { animation: iconBob 4.5s ease-in-out infinite; }
.bento .card:nth-child(2) .fi svg, .services-grid .card:nth-child(2) .service-icon svg { animation-delay: -1.2s; }
.bento .card:nth-child(3) .fi svg, .services-grid .card:nth-child(3) .service-icon svg { animation-delay: -2.4s; }
.bento .card:nth-child(4) .fi svg { animation-delay: -3.4s; }
@keyframes iconBob {
  0%, 100% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(-3px) rotate(4deg); }
}
.card:hover .fi, .card:hover .service-icon { transform: scale(1.18) rotate(-8deg); }

/* Daftar layanan masuk bergiliran saat kartu muncul */
.service ul li { transition: transform 0.3s var(--ease-out), color 0.2s; }
.service:hover ul li { transform: translateX(6px); }
.service:hover ul li:nth-child(2) { transition-delay: 0.05s; }
.service:hover ul li:nth-child(3) { transition-delay: 0.1s; }

/* ---------- 7. PAKET ---------- */
.pkg-speed { transition: transform 0.4s var(--ease-spring), color 0.3s; font-variant-numeric: tabular-nums; }
.pkg:hover .pkg-speed { transform: scale(1.1); }
.pkg.featured { animation: featuredGlow 3.2s ease-in-out infinite; }
@keyframes featuredGlow {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(45, 217, 232, 0)); }
  50% { filter: drop-shadow(0 0 22px rgba(45, 217, 232, 0.4)); }
}
.pkg-tag { animation: tagWiggle 3.5s ease-in-out infinite; }
@keyframes tagWiggle {
  0%, 82%, 100% { transform: rotate(0) scale(1); }
  86% { transform: rotate(-6deg) scale(1.08); }
  92% { transform: rotate(5deg) scale(1.08); }
  96% { transform: rotate(-3deg) scale(1.04); }
}

/* ---------- 8. STATS BAND & COVERAGE ---------- */
.stats-band .sb-num, .hero-stats b, .cov-num, .reco-price b, .pkg-price { font-variant-numeric: tabular-nums; }
.stats-band .sb-item { transition: transform 0.4s var(--ease-spring); }
.stats-band .sb-item:hover { transform: translateY(-6px) scale(1.06); }
.area-chip {
  transition: transform 0.35s var(--ease-spring), background-color 0.2s, border-color 0.2s, color 0.2s;
}
.area-chip:hover { transform: translateY(-4px) scale(1.07); }
.reveal.in .coverage-areas .area-chip { animation: chipIn 0.6s var(--ease-spring) backwards; }
.coverage-areas .area-chip:nth-child(1) { animation-delay: 0.3s; }
.coverage-areas .area-chip:nth-child(2) { animation-delay: 0.4s; }
.coverage-areas .area-chip:nth-child(3) { animation-delay: 0.5s; }
.coverage-areas .area-chip:nth-child(4) { animation-delay: 0.6s; }
.coverage-areas .area-chip:nth-child(5) { animation-delay: 0.7s; }
.cov-pill svg { animation: pinBounce 2.2s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes pinBounce {
  0%, 100% { transform: translateY(0); }
  40% { transform: translateY(-5px); }
  55% { transform: translateY(0) scaleY(0.9); }
}

/* ---------- 9. FAQ ---------- */
.faq-chip { transition: transform 0.3s var(--ease-spring), background-color 0.2s, border-color 0.2s, color 0.2s; }
.faq-chip:hover { transform: translateY(-3px) scale(1.05); }
.faq-item { transition: transform 0.3s var(--ease-out), border-color 0.2s, background-color 0.2s; }
.faq-item:hover { transform: translateX(5px); }
.faq-item[open] > *:not(summary) { animation: faqOpen 0.5s var(--ease-out); }
@keyframes faqOpen {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: none; }
}
.faq-item summary::after { transition: transform 0.4s var(--ease-spring); }

/* ---------- 10. FOOTER & LINK ---------- */
footer .foot-col { transition: transform 0.3s var(--ease-out); }
footer a { transition: color 0.2s, transform 0.25s var(--ease-out); }
footer .foot-col a:hover { transform: translateX(4px); }
.back-link { display: inline-block; transition: transform 0.3s var(--ease-out), color 0.2s; }
.back-link:hover { transform: translateX(5px); }

/* Form di halaman daftar: fokus lebih hidup */
input, select, textarea {
  transition: border-color 0.2s, box-shadow 0.3s ease, background-color 0.25s ease, transform 0.25s var(--ease-out);
}
input:focus, select:focus, textarea:focus {
  box-shadow: 0 0 0 4px rgba(45, 217, 232, 0.16);
  transform: translateY(-1px);
}

/* ---------- 11. HP / TOUCH ---------- */
@media (hover: none), (pointer: coarse) {
  .cursor-glow { display: none; }
  .card::before { display: none; }
  .faq-item:hover { transform: none; }
}
@media (max-width: 700px) {
  .aurora i:nth-child(3) { display: none; }
  .reveal { transform: translateY(24px); }
}

/* Parallax blob aurora lewat properti translate (tidak bentrok dengan animasi drift) */
.aurora i { translate: 0 var(--py, 0px); }