/* ============================================
   LANI CREATIVES — ANIMATION SYSTEM
   ============================================ */

/* --- Keyframe Definitions --- */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(60px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-40px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(-60px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(60px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.85); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes shimmer {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-15px); }
}

@keyframes pulse-gold {
  0%, 100% { box-shadow: 0 0 0 0 rgba(201, 169, 110, 0.4); }
  50% { box-shadow: 0 0 25px 8px rgba(201, 169, 110, 0.15); }
}

@keyframes slideInMask {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}

@keyframes lineExpand {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@keyframes rotateIn {
  from { opacity: 0; transform: rotate(-8deg) scale(0.9); }
  to { opacity: 1; transform: rotate(0) scale(1); }
}

@keyframes bounceSubtle {
  0%, 100% { transform: translateY(0); }
  25% { transform: translateY(-8px); }
  50% { transform: translateY(0); }
  75% { transform: translateY(-4px); }
}

@keyframes typewriter {
  from { width: 0; }
  to { width: 100%; }
}

@keyframes blink {
  0%, 50% { border-color: transparent; }
  51%, 100% { border-color: var(--gold); }
}

@keyframes particle-drift {
  0% { transform: translate(0, 0) scale(1); opacity: 0; }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% { transform: translate(var(--drift-x, 100px), var(--drift-y, -200px)) scale(0); opacity: 0; }
}

@keyframes hero-zoom {
  0% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

@keyframes nav-slide-down {
  from { transform: translateY(-100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* --- Scroll-Triggered Animation Classes --- */
.reveal {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

.reveal-left {
  opacity: 0;
  transform: translateX(-60px);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-left.active {
  opacity: 1;
  transform: translateX(0);
}

.reveal-right {
  opacity: 0;
  transform: translateX(60px);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-right.active {
  opacity: 1;
  transform: translateX(0);
}

.reveal-scale {
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-scale.active {
  opacity: 1;
  transform: scale(1);
}

/* Stagger delays for child elements */
.stagger-1 { transition-delay: 0.1s; }
.stagger-2 { transition-delay: 0.2s; }
.stagger-3 { transition-delay: 0.3s; }
.stagger-4 { transition-delay: 0.4s; }
.stagger-5 { transition-delay: 0.5s; }
.stagger-6 { transition-delay: 0.6s; }

/* --- Image Reveal Effect --- */
.img-reveal {
  position: relative;
  overflow: hidden;
}

.img-reveal::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--gold);
  z-index: 2;
  transform: scaleX(1);
  transform-origin: right;
  transition: transform 0.8s cubic-bezier(0.77, 0, 0.175, 1);
}

.img-reveal.active::before {
  transform: scaleX(0);
}

.img-reveal img {
  transform: scale(1.3);
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.4s;
}

.img-reveal.active img {
  transform: scale(1);
}

/* --- Text Shimmer Effect --- */
.text-shimmer {
  background: linear-gradient(
    90deg,
    var(--gold) 0%,
    #fff 25%,
    var(--gold) 50%,
    #fff 75%,
    var(--gold) 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer 4s linear infinite;
}

/* --- Line Decoration Animation --- */
.line-animated {
  display: block;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.line-animated.active {
  transform: scaleX(1);
}

/* --- Magnetic Hover Effect (enhanced by JS) --- */
.magnetic {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* --- Parallax Layer --- */
.parallax-layer {
  will-change: transform;
  transition: transform 0.1s linear;
}

/* --- Gold Particle Canvas --- */
#particle-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

/* --- Counter Animation --- */
.counter-value {
  display: inline-block;
  font-variant-numeric: tabular-nums;
}

/* --- Scroll Indicator --- */
.scroll-indicator {
  animation: bounceSubtle 2s ease-in-out infinite;
}

/* --- Hero Background Zoom --- */
.hero-bg-zoom {
  animation: hero-zoom 8s ease-out forwards;
}

/* --- Nav Animation --- */
.nav-animated {
  animation: nav-slide-down 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* --- Gradient Background Animation --- */
.gradient-animated {
  background-size: 200% 200%;
  animation: gradient-shift 8s ease infinite;
}

/* --- Hover Card Lift --- */
.card-lift {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.card-lift:hover {
  transform: translateY(-12px);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.4);
}

/* --- Reduced Motion --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal, .reveal-left, .reveal-right, .reveal-scale {
    opacity: 1;
    transform: none;
  }
}