/* ============================================================
   MIKI UNIVERSE — MOTION LAYER
   Lapisan animasi tambahan: scroll reveal, tilt 3D, magnetic
   button, podium Top Langganan, ambient glow, scroll progress.
   File ini TERPISAH dari style.css biar gampang di-include cuma
   di halaman yang butuh (sekarang: index.html).
   ============================================================ */

/* ---------- SCROLL PROGRESS BAR ---------- */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0%;
  background: linear-gradient(90deg, rgba(34,201,99,.9), rgba(255,255,255,.95));
  z-index: 1000001; pointer-events: none;
  transition: width .08s linear;
}

/* ---------- AMBIENT HERO GLOW ---------- */
.hero-orb-field {
  position: absolute; inset: -120px 0 auto 0; height: 640px;
  overflow: hidden; pointer-events: none; z-index: 0;
}
.hero-orb {
  position: absolute; border-radius: 50%;
  filter: blur(60px);
  opacity: .55;
  transform: translate3d(var(--ox, 0px), var(--oy, 0px), 0);
  transition: transform 1.1s cubic-bezier(.16,.8,.24,1);
  will-change: transform;
}
.hero-orb.o1 {
  width: 420px; height: 420px; left: 8%; top: 10px;
  background: radial-gradient(circle, rgba(34,201,99,.55), transparent 70%);
  animation: orbDrift1 16s ease-in-out infinite;
}
.hero-orb.o2 {
  width: 380px; height: 380px; right: 6%; top: 60px;
  background: radial-gradient(circle, rgba(255,255,255,.28), transparent 70%);
  animation: orbDrift2 20s ease-in-out infinite;
}
.hero-orb.o3 {
  width: 300px; height: 300px; left: 40%; top: 220px;
  background: radial-gradient(circle, rgba(34,201,99,.25), transparent 70%);
  animation: orbDrift3 24s ease-in-out infinite;
}
@keyframes orbDrift1 {
  0%,100% { margin-left: 0; margin-top: 0; }
  50% { margin-left: 30px; margin-top: 24px; }
}
@keyframes orbDrift2 {
  0%,100% { margin-left: 0; margin-top: 0; }
  50% { margin-left: -26px; margin-top: 18px; }
}
@keyframes orbDrift3 {
  0%,100% { margin-left: 0; margin-top: 0; }
  50% { margin-left: 18px; margin-top: -22px; }
}
.hero { position: relative; z-index: 1; }

/* ---------- SCROLL REVEAL ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  filter: blur(4px);
  transition: opacity .8s cubic-bezier(.16,.8,.24,1),
              transform .8s cubic-bezier(.16,.8,.24,1),
              filter .8s cubic-bezier(.16,.8,.24,1);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal].is-revealed {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}
[data-reveal="fade"] { transform: none; }
[data-reveal="left"] { transform: translateX(-32px); }
[data-reveal="left"].is-revealed { transform: translateX(0); }
[data-reveal="right"] { transform: translateX(32px); }
[data-reveal="right"].is-revealed { transform: translateX(0); }
[data-reveal="scale"] { transform: scale(.92); }
[data-reveal="scale"].is-revealed { transform: scale(1); }

/* ---------- TILT (3D hover) ---------- */
.tilt {
  perspective: 900px;
}
.tilt-inner {
  transform: rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg)) translateZ(0);
  transition: transform .5s cubic-bezier(.16,.8,.24,1);
  transform-style: preserve-3d;
  will-change: transform;
}
.tilt:hover .tilt-inner,
.tilt:focus-within .tilt-inner {
  transition: transform .08s linear;
}

/* ---------- SECTION TITLE GLOW ---------- */
.section-title { position: relative; }

/* ---------- MAGNETIC BUTTON ---------- */
.magnetic {
  transform: translate3d(var(--mx, 0px), var(--my, 0px), 0);
  transition: transform .35s cubic-bezier(.16,.8,.24,1), background .22s;
}
.magnetic:active { transition: transform .08s; }

/* ---------- TOP LANGGANAN — PODIUM ---------- */
#top-list.cards {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: center;
  gap: 18px;
}
#top-list .card {
  flex: 1 1 220px;
  max-width: 260px;
  position: relative;
  overflow: hidden;
}
/* sweep highlight on hover */
#top-list .card::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.10) 50%, transparent 60%);
  background-size: 220% 220%;
  background-position: 120% 0;
  opacity: 0;
  transition: opacity .3s, background-position .7s ease;
  pointer-events: none;
}
#top-list .card:hover::after { opacity: 1; background-position: -20% 0; }

@media (min-width: 680px) {
  #top-list.cards { align-items: flex-end; }
  #top-list .card[data-rank="1"] { order: 2; transform: translateY(-16px); }
  #top-list .card[data-rank="2"] { order: 1; }
  #top-list .card[data-rank="3"] { order: 3; }
}

/* podium color language — sesuai medali, bukan dekorasi doang */
#top-list .card[data-rank="1"] {
  border-color: rgba(255,208,110,.35);
  background: linear-gradient(180deg, rgba(38,30,10,.92), rgba(8,6,2,.99));
  box-shadow: 0 18px 46px rgba(0,0,0,.5), 0 0 0 1px rgba(255,208,110,.12), 0 0 34px rgba(255,190,80,.10);
  animation: none;
}
#top-list .card[data-rank="1"] .rank { color: #ffd06e; text-shadow: 0 0 22px rgba(255,208,110,.5); }
#top-list .card[data-rank="1"] .tag {
  background: rgba(255,208,110,.12); border-color: rgba(255,208,110,.34); color: #ffd06e;
}
#top-list .card[data-rank="1"]::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, transparent, #ffd06e, transparent);
  animation: shimmerBar 2.6s ease-in-out infinite;
}
@keyframes shimmerBar { 0%,100%{opacity:.35;} 50%{opacity:1;} }

#top-list .card[data-rank="2"] {
  border-color: rgba(210,215,224,.28);
  box-shadow: 0 14px 36px rgba(0,0,0,.4), 0 0 0 1px rgba(210,215,224,.08);
}
#top-list .card[data-rank="2"] .rank { color: #dfe3ea; }

#top-list .card[data-rank="3"] {
  border-color: rgba(198,140,101,.28);
  box-shadow: 0 14px 36px rgba(0,0,0,.4), 0 0 0 1px rgba(198,140,101,.10);
}
#top-list .card[data-rank="3"] .rank { color: #d69a70; }

/* gentle idle float so podium feels alive even without hover (paused if reduced motion) */
#top-list .card { animation: cardFloat 5s ease-in-out infinite; }
#top-list .card[data-rank="2"] { animation-delay: .3s; }
#top-list .card[data-rank="3"] { animation-delay: .6s; }
@keyframes cardFloat {
  0%,100% { margin-top: 0; }
  50% { margin-top: -6px; }
}

/* ---------- COUNTER NUMBER ---------- */
[data-count] { font-variant-numeric: tabular-nums; }

/* ---------- LINK / SERVICE / TRUST CARD LIFT ---------- */
.service, .trust-card, .linkhub-card, .recent-mini-card {
  transition: transform .35s cubic-bezier(.16,.8,.24,1), border-color .3s, box-shadow .35s;
}
.recent-mini-card:hover { transform: translateY(-6px); }

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    transition: none !important;
    opacity: 1 !important; transform: none !important; filter: none !important;
  }
  .hero-orb, #top-list .card, .tilt-inner, .magnetic {
    animation: none !important;
    transition: none !important;
  }
  html { scroll-behavior: auto; }
}

/* ---------- TOUCH DEVICES: skip tilt & idle float, keep reveal ---------- */
@media (hover: none) {
  .tilt-inner { transform: none !important; }
  #top-list .card { animation: none; }
}