/* ═══════════════════════════════════════════════════════
   iCANDY EVENTS — ANIMATION STYLES
   ═══════════════════════════════════════════════════════ */

/* ─── Base Animation States ─────────────────────────── */
[data-animate] {
  opacity: 0;
  will-change: transform, opacity;
}

[data-animate="fade-up"] {
  transform: translateY(40px);
}

[data-animate="fade-down"] {
  transform: translateY(-40px);
}

[data-animate="fade-up-delay"] {
  transform: translateY(40px);
}

[data-animate="fade-up-delay-2"] {
  transform: translateY(40px);
}

[data-animate="fade-up-stagger"] {
  transform: translateY(40px);
}

[data-animate="split-text"] {
  opacity: 1;
}

[data-animate="parallax-reveal"] {
  transform: translateY(60px);
}

[data-animate="gallery-reveal"] {
  transform: scale(0.9) translateY(30px);
}

/* ─── Visible States ────────────────────────────────── */
.animated {
  opacity: 1 !important;
  transform: none !important;
  transition: all 0.8s var(--ease-out-expo);
}

/* ─── Parallax layers ───────────────────────────────── */
.parallax-slow { will-change: transform; }
.parallax-medium { will-change: transform; }
.parallax-fast { will-change: transform; }

/* ─── Card hover depth ──────────────────────────────── */
.glass-card {
  transition: transform 0.5s var(--ease-out-expo), box-shadow 0.5s var(--ease-out-expo);
}

.glass-card:hover {
  box-shadow: 0 16px 60px rgba(0, 0, 0, 0.5), 0 0 40px rgba(201, 169, 110, 0.05);
}

/* ─── Text reveal animation ─────────────────────────── */
.char-reveal {
  display: inline-block;
  opacity: 0;
  transform: translateY(30px) rotate(3deg);
}

.word-reveal {
  display: inline-block;
  overflow: hidden;
}

.word-reveal > span {
  display: inline-block;
  transform: translateY(100%);
}

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

.img-reveal::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--bg-primary);
  transform-origin: right;
  transition: transform 1s var(--ease-out-expo);
}

.img-reveal.revealed::after {
  transform: scaleX(0);
}

/* ─── Floating animation variations ─────────────────── */
@keyframes float1 {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  33% { transform: translate(10px, -15px) rotate(2deg); }
  66% { transform: translate(-8px, -25px) rotate(-1deg); }
}

@keyframes float2 {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  33% { transform: translate(-12px, -20px) rotate(-3deg); }
  66% { transform: translate(15px, -10px) rotate(2deg); }
}

@keyframes float3 {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(8px, -18px) rotate(4deg); }
  50% { transform: translate(-5px, -30px) rotate(-2deg); }
  75% { transform: translate(12px, -12px) rotate(1deg); }
}

/* ─── Glow pulse ────────────────────────────────────── */
@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 20px rgba(201, 169, 110, 0.2); }
  50% { box-shadow: 0 0 40px rgba(201, 169, 110, 0.4), 0 0 60px rgba(201, 169, 110, 0.1); }
}

/* ─── Gradient shift ────────────────────────────────── */
@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.text-gradient,
.text-gradient-warm {
  background-size: 200% auto;
  animation: gradientShift 6s ease-in-out infinite;
}

/* ─── Shimmer effect ────────────────────────────────── */
@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* ─── Slow zoom on background images ────────────────── */
@keyframes slowZoom {
  0% { transform: scale(1); }
  100% { transform: scale(1.05); }
}

/* ─── Metric counter glow ───────────────────────────── */
.metric.counting .metric__number {
  animation: glowPulse 0.5s ease-in-out;
}

/* ─── Scroll-triggered slide-in for timeline ────────── */
.timeline__card-inner {
  transition: all 1s var(--ease-out-expo);
}

.timeline__card--left .timeline__card-inner {
  transform: translateX(-50px) translateY(20px);
  opacity: 0;
}

.timeline__card--right .timeline__card-inner {
  transform: translateX(50px) translateY(20px);
  opacity: 0;
}

.timeline__card-inner.visible {
  transform: translateX(0) translateY(0);
  opacity: 1;
}

/* ─── Service card hover effects ────────────────────── */
.service-card__inner::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(201, 169, 110, 0.03) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.5s;
  pointer-events: none;
}

.service-card:hover .service-card__inner::before {
  opacity: 1;
}

/* ─── Gallery masonry animations ────────────────────── */
.gallery-item {
  transition: all 0.6s var(--ease-out-expo);
}

.gallery-item::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(201, 169, 110, 0.1), transparent);
  opacity: 0;
  transition: opacity 0.4s;
  z-index: 1;
  border-radius: 16px;
}

.gallery-item:hover::before {
  opacity: 1;
}

/* ─── Testimonial cards float effect ────────────────── */
.testimonial {
  transition: transform 0.5s var(--ease-out-expo);
}

.testimonial:hover {
  transform: translateY(-6px);
}

/* ─── Reason cards entrance ─────────────────────────── */
.reason-card {
  transition: all 0.6s var(--ease-out-expo);
}

/* ─── Smooth number counting ────────────────────────── */
.metric__number {
  transition: color 0.3s;
  font-variant-numeric: tabular-nums;
}

/* ─── Nav link hover underline ──────────────────────── */
.nav__link::after {
  transition: width 0.4s var(--ease-out-expo);
}

/* ─── Before After handle hover ─────────────────────── */
.before-after__handle-circle {
  transition: transform 0.3s var(--ease-out-expo), box-shadow 0.3s;
}

.before-after__container:hover .before-after__handle-circle {
  transform: scale(1.1);
  box-shadow: 0 4px 30px rgba(201, 169, 110, 0.6);
}

/* ─── Mobile menu animation ─────────────────────────── */
@media (max-width: 768px) {
  .nav__links {
    position: fixed;
    inset: 0;
    background: rgba(10, 10, 15, 0.98);
    backdrop-filter: blur(30px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
    transform: translateX(100%);
    transition: transform 0.5s var(--ease-out-expo);
    z-index: 5;
  }

  .nav__links.open {
    transform: translateX(0);
  }

  .nav__links .nav__link {
    font-size: 18px;
    opacity: 0;
    transform: translateX(30px);
    transition: all 0.4s var(--ease-out-expo);
  }

  .nav__links.open .nav__link {
    opacity: 1;
    transform: translateX(0);
  }

  .nav__links.open .nav__link:nth-child(1) { transition-delay: 0.1s; }
  .nav__links.open .nav__link:nth-child(2) { transition-delay: 0.15s; }
  .nav__links.open .nav__link:nth-child(3) { transition-delay: 0.2s; }
  .nav__links.open .nav__link:nth-child(4) { transition-delay: 0.25s; }
  .nav__links.open .nav__link:nth-child(5) { transition-delay: 0.3s; }
  .nav__links.open .nav__link:nth-child(6) { transition-delay: 0.35s; }
  .nav__links.open .nav__link:nth-child(7) { transition-delay: 0.40s; }
  .nav__links.open .nav__link:nth-child(8) { transition-delay: 0.45s; }
}