/* ==========================================================================
   CODNASTA CLASSIC LUXURY ANIMATIONS
   Custom Easing Curves, Staggered Motion & Scroll-Triggered 3D Keyframes
   ========================================================================== */

:root {
  /* Classic Luxury Easing Curves */
  --ease-classic: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.25, 1, 0.5, 1);
}

/* --------------------------------------------------------------------------
   1. Base & Advanced Keyframe Definitions
   -------------------------------------------------------------------------- */

/* Classic Fade Up */
@keyframes classicFadeUp {
  0% {
    opacity: 0;
    transform: translateY(24px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Classic Fade Scale */
@keyframes classicFadeScale {
  0% {
    opacity: 0;
    transform: scale(0.96);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* Ambient Pulse */
@keyframes ambientPulse {
  0%, 100% {
    transform: scale(1) translate(0, 0);
    opacity: 0.15;
  }
  50% {
    transform: scale(1.08) translate(-10px, 15px);
    opacity: 0.25;
  }
}

/* 3D Flip Up */
@keyframes flipUp {
  0% {
    opacity: 0;
    transform: perspective(600px) rotateX(-20deg) translateY(30px);
    transform-origin: bottom center;
  }
  100% {
    opacity: 1;
    transform: perspective(600px) rotateX(0deg) translateY(0);
  }
}

/* Perspective Tilt-Up (Unfold) */
@keyframes perspectiveTiltUp {
  0% {
    opacity: 0;
    transform: translateY(40px) scale(0.92) rotateX(15deg);
    transform-origin: 50% 100%;
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1) rotateX(0deg);
  }
}

/* Isometric Slide & Settle */
@keyframes isometricSettle {
  0% {
    opacity: 0;
    transform: translate3d(-12px, 30px, 0) rotateX(12deg) rotateY(-8deg) scale(0.96);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotateX(0deg) rotateY(0deg) scale(1);
  }
}

/* Architectural Clip Reveal */
@keyframes clipReveal {
  0% {
    opacity: 0;
    clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
    transform: scale(1.04);
  }
  100% {
    opacity: 1;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    transform: scale(1);
  }
}

/* Depth-of-Field Focus Entry */
@keyframes depthFocus {
  0% {
    opacity: 0;
    filter: blur(12px) saturate(0.2);
    transform: translateY(-16px) scale(0.97);
  }
  100% {
    opacity: 1;
    filter: blur(0px) saturate(1);
    transform: translateY(0) scale(1);
  }
}

/* --------------------------------------------------------------------------
   2. IntersectionObserver Viewport Classes
   -------------------------------------------------------------------------- */

/* Base initial hidden state for elements that animate on scroll */
.reveal-on-scroll {
  opacity: 0;
  will-change: opacity, transform, filter, clip-path;
}

.reveal-fade-up.is-visible {
  animation: classicFadeUp 0.85s var(--ease-classic) forwards;
  animation-delay: var(--delay, 0s);
}

.reveal-tilt-up.is-visible {
  animation: perspectiveTiltUp 0.85s var(--ease-classic) forwards;
  animation-delay: var(--delay, 0s);
}

.reveal-flip-up.is-visible {
  animation: flipUp 0.85s var(--ease-classic) forwards;
  animation-delay: var(--delay, 0s);
}

.reveal-isometric.is-visible {
  animation: isometricSettle 0.85s var(--ease-classic) forwards;
  animation-delay: var(--delay, 0s);
}

.reveal-clip.is-visible {
  animation: clipReveal 0.9s var(--ease-soft) forwards;
  animation-delay: var(--delay, 0s);
}

.reveal-depth.is-visible {
  animation: depthFocus 0.75s var(--ease-classic) forwards;
  animation-delay: var(--delay, 0s);
}

/* --------------------------------------------------------------------------
   3. Hero Entrance Orchestration
   -------------------------------------------------------------------------- */
.hero-eyebrow {
  animation: classicFadeUp 0.8s var(--ease-classic) both;
  animation-delay: 0.1s;
}

.hero-title {
  animation: classicFadeUp 0.9s var(--ease-classic) both;
  animation-delay: 0.25s;
}

.hero-description {
  animation: classicFadeUp 0.9s var(--ease-classic) both;
  animation-delay: 0.4s;
}

.hero-actions {
  animation: classicFadeUp 0.9s var(--ease-classic) both;
  animation-delay: 0.55s;
}

.hero-proof-list {
  animation: classicFadeUp 0.9s var(--ease-classic) both;
  animation-delay: 0.7s;
}

.hero-visual {
  animation: classicFadeScale 1.1s var(--ease-classic) both;
  animation-delay: 0.35s;
}

.hero-ambient-glow {
  animation: ambientPulse 12s ease-in-out infinite;
}

/* --------------------------------------------------------------------------
   4. Interactive Micro-Interactions
   -------------------------------------------------------------------------- */
.btn {
  transition: transform 0.3s var(--ease-classic),
              background-color 0.3s var(--ease-classic),
              box-shadow 0.3s var(--ease-classic),
              border-color 0.3s var(--ease-classic);
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(10, 56, 87, 0.12);
}

.btn:active {
  transform: translateY(0);
}

.btn i {
  transition: transform 0.3s var(--ease-classic);
}

.btn:hover i {
  transform: translateX(4px);
}

.hero-glass-card {
  transition: transform 0.4s var(--ease-classic),
              box-shadow 0.4s var(--ease-classic);
}

.hero-glass-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px rgba(4, 29, 46, 0.35);
}

.glass-card-icon i {
  transition: transform 0.4s var(--ease-classic);
}

.hero-glass-card:hover .glass-card-icon i {
  transform: scale(1.12);
}

.nav-link {
  position: relative;
  transition: color 0.3s var(--ease-classic);
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0%;
  height: 2px;
  background-color: var(--color-navy);
  transition: width 0.3s var(--ease-classic);
}

.nav-link:hover::after,
.nav-link.active::after {
  width: 100%;
}

/* --------------------------------------------------------------------------
   5. Accessibility (Reduced Motion)
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .reveal-on-scroll {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
  }

  .hero-eyebrow,
  .hero-title,
  .hero-description,
  .hero-actions,
  .hero-proof-list,
  .hero-visual,
  .hero-ambient-glow,
  .division-card {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
  }

  .btn,
  .hero-glass-card,
  .nav-link {
    transition: none !important;
  }
}