/* ===================================================
   TAHAP 2 — ANIMATION.CSS
   Semua motion, transisi, keyframes, hover states.
=================================================== */

/* ---------- Fold intro overlay ---------- */
.fold-overlay {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: flex;
  pointer-events: none;
}
.fold-panel {
  flex: 1;
  background: var(--charcoal);
  border-right: 1px solid var(--line);
  transform-origin: top;
  animation: foldOpen 1.1s var(--ease) forwards;
  animation-delay: calc(var(--i) * 0.06s);
}
.fold-panel:last-child { border-right: none; }
@keyframes foldOpen {
  0% { transform: scaleY(1); }
  100% { transform: scaleY(0); }
}

/* ---------- Nav ---------- */
.nav {
  transition: border-color 0.3s ease, background 0.3s ease;
}
.nav-links a { transition: color 0.25s var(--ease); }
.nav-links a:hover { color: var(--champagne); }
.nav-cta { transition: all 0.25s var(--ease); }
.nav-cta:hover { background: var(--gold); color: var(--void); border-color: var(--gold); }

.nav--scrolled {
  background: rgba(10, 10, 15, 0.88);
  border-bottom-color: rgba(201, 169, 97, 0.22);
}

/* ---------- Buttons ---------- */
.btn { transition: all 0.3s var(--ease); }
.btn-primary:hover { background: var(--champagne); transform: translateY(-2px); }
.btn-ghost:hover { border-color: var(--gold); color: var(--gold); }

/* ---------- Marquee scroll ---------- */
.strip-track { animation: scroll 32s linear infinite; }
@keyframes scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.strip:hover .strip-track { animation-play-state: paused; }

/* ---------- Collection cards ---------- */
.c-card { transition: background 0.3s var(--ease); }
.c-card:hover { background: var(--charcoal-2); }
.c-fold { transition: transform 0.5s var(--ease); }
.c-card:hover .c-fold { transform: scaleX(1); }

/* ---------- Gallery ---------- */
.g-item { transition: transform 0.45s var(--ease), border-color 0.45s var(--ease); }
.g-item:hover { transform: translateY(-4px); border-color: var(--gold-dim); }

/* ---------- Lightbox ---------- */
.lightbox { transition: opacity 0.3s var(--ease); }
.lightbox-img { transition: transform 0.35s var(--ease); }
.lightbox:not(.is-open) .lightbox-img { transform: scale(0.96); }

/* ---------- FAQ accordion ---------- */
.faq-answer { transition: height 0.35s var(--ease); }
.faq-icon::before, .faq-icon::after { transition: transform 0.3s var(--ease); }
.faq-item.is-open .faq-icon::after { transform: translate(-50%, -50%) rotate(90deg) scaleY(0); }
.faq-item.is-open .faq-question { color: var(--gold); }

/* ---------- Before & After handle ---------- */
.ba-handle, .ba-after { transition: none; } /* controlled live by JS while dragging */

/* ---------- WhatsApp float ---------- */
.wa-float {
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
  box-shadow: 0 6px 24px rgba(201,169,97,0.25);
}
.wa-float:hover { transform: scale(1.08); }
.wa-float {
  animation: waPulse 2.6s ease-in-out infinite;
}
@keyframes waPulse {
  0%, 100% { box-shadow: 0 6px 24px rgba(201,169,97,0.25); }
  50% { box-shadow: 0 6px 30px rgba(201,169,97,0.5); }
}

/* ---------- Scroll reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .fold-overlay { display: none; }
  .strip-track { animation: none; }
  .wa-float { animation: none; }
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  * {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}