/* ── 1. Base ── */
.reveal {
  opacity: 0;
  will-change: transform, opacity;
  transition:
    opacity  0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── 2. Variants ── */
.reveal-up    { transform: translateY(32px);   }
.reveal-left  { transform: translateX(-32px);  }
.reveal-right { transform: translateX(32px);   }
.reveal-scale { transform: scale(0.95) translateY(16px); }

/* ── 3. Visible state ── */
.reveal.visible {
  opacity: 1;
  transform: translateY(0) translateX(0) scale(1);
}

/* ── 4. Stagger delays ── */
.reveal[style*="--stagger-delay"] {
  transition-delay: var(--stagger-delay, 0s);
}

/* ── 5. Tipe khusus ── */
.eyebrow-line::before {
  transform-origin: left;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.2s;
}
.eyebrow-line.visible::before {
  transform: scaleX(1) !important;
}

/* ── 6. Hover lift effect ── */
.product-card.visible {
  transition:
    opacity  0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.25s ease;
}
.product-card.visible:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 16px 40px rgba(44, 26, 14, 0.13);
}

/* ── 7. Value row ── */
.value-row {
  position: relative;
}
.value-row::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--brown-pale, #C8A882);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  border-radius: 2px;
}
.value-row.visible::before {
  transform: scaleY(1);
}

/* ── 8. Step number ── */
.step-num {
  transition:
    background 0.15s ease,
    color 0.15s ease,
    transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.step-card.reveal { transform: translateY(28px); }
.step-card.visible .step-num {
  animation: stepPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  animation-delay: calc(var(--stagger-delay, 0s) + 0.15s);
}
@keyframes stepPop {
  0%   { transform: scale(0.8); }
  100% { transform: scale(1); }
}

/* ── 9. Contact channel-row: sliding underline ── */
.channel-row {
  position: relative;
  overflow: hidden;
}
.channel-row::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 0.5px;
  background: var(--brown-pale, #C8A882);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.channel-row.visible::after { transform: scaleX(1); }
.channel-row:last-child::after { display: none; }

/* ── 10. Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal-up,
  .reveal-left,
  .reveal-right,
  .reveal-scale {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
  .value-row::before { transform: scaleY(1) !important; }
  .channel-row::after { transform: scaleX(1) !important; }
}