/* ==========================================================================
   INFINITY DEVELOPMENTS - LUXURY ANIMATIONS & EFFECTS
   Theme: Infinity Logo Brand Colors (Sapphire Blue, Azure & Cyan)
   Curves: High-Fashion Cubic-Bezier Easing (0.16, 1, 0.3, 1)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Keyframes & Ambient Effects
   -------------------------------------------------------------------------- */

/* Shimmer Light Sweep on Azure & Cyan Elements */
@keyframes themeShine {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.shimmer-theme {
  background: linear-gradient(
    90deg,
    rgba(0, 138, 210, 0) 0%,
    rgba(143, 213, 246, 0.4) 50%,
    rgba(0, 138, 210, 0) 100%
  );
  background-size: 200% 100%;
  animation: themeShine 4s infinite linear;
}

/* Pulsing Ambient Glow */
@keyframes pulseGlow {
  0% {
    box-shadow: 0 0 0 0 rgba(0, 138, 210, 0.6);
  }
  70% {
    box-shadow: 0 0 0 16px rgba(0, 138, 210, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(0, 138, 210, 0);
  }
}

.pulse-glow {
  animation: pulseGlow 3s infinite ease-out;
}

/* Subtle Floating Effect */
@keyframes subtleFloat {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

.floating-element {
  animation: subtleFloat 6s ease-in-out infinite;
}

/* Smooth Image Fade & Slide for Tab Switches */
@keyframes luxuryImageFadeIn {
  0% {
    opacity: 0;
    transform: scale(1.04);
    filter: blur(4px);
  }
  100% {
    opacity: 1;
    transform: scale(1);
    filter: blur(0px);
  }
}

.animate-image-fade {
  animation: luxuryImageFadeIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* --------------------------------------------------------------------------
   2. Scroll Reveal Animations (Silky Smooth Awwwards Quality)
   -------------------------------------------------------------------------- */

/* Fade Up (Standard Editorial Reveal) */
.reveal-fade-up {
  opacity: 0;
  transform: translateY(32px);
  filter: blur(4px);
  transition: opacity 0.95s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.95s cubic-bezier(0.16, 1, 0.3, 1),
              filter 0.95s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform, filter;
}

.reveal-fade-up.is-revealed {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0px);
}

/* Fade In (Subtle Opacity + De-blur) */
.reveal-fade-in {
  opacity: 0;
  filter: blur(6px);
  transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1),
              filter 1s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, filter;
}

.reveal-fade-in.is-revealed {
  opacity: 1;
  filter: blur(0px);
}

/* Slide Left Reveal */
.reveal-slide-left {
  opacity: 0;
  transform: translateX(-40px);
  filter: blur(4px);
  transition: opacity 0.95s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.95s cubic-bezier(0.16, 1, 0.3, 1),
              filter 0.95s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform, filter;
}

.reveal-slide-left.is-revealed {
  opacity: 1;
  transform: translateX(0);
  filter: blur(0px);
}

/* Slide Right Reveal */
.reveal-slide-right {
  opacity: 0;
  transform: translateX(40px);
  filter: blur(4px);
  transition: opacity 0.95s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.95s cubic-bezier(0.16, 1, 0.3, 1),
              filter 0.95s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform, filter;
}

.reveal-slide-right.is-revealed {
  opacity: 1;
  transform: translateX(0);
  filter: blur(0px);
}

/* Scale Up Reveal */
.reveal-scale-up {
  opacity: 0;
  transform: scale(0.94);
  filter: blur(4px);
  transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1),
              transform 1s cubic-bezier(0.16, 1, 0.3, 1),
              filter 1s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform, filter;
}

.reveal-scale-up.is-revealed {
  opacity: 1;
  transform: scale(1);
  filter: blur(0px);
}

/* Curtain Image Reveal (Image zooms gently from 1.08 -> 1.0 as it unblurs) */
.reveal-curtain-image {
  overflow: hidden;
  position: relative;
}

.reveal-curtain-image img,
.reveal-curtain-image video {
  opacity: 0;
  transform: scale(1.08);
  filter: blur(6px);
  transition: opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1),
              transform 1.2s cubic-bezier(0.16, 1, 0.3, 1),
              filter 1.1s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform, filter;
}

.reveal-curtain-image.is-revealed img,
.reveal-curtain-image.is-revealed video {
  opacity: 1;
  transform: scale(1);
  filter: blur(0px);
}

/* Masked Text Reveal (Sliding up from invisible baseline) */
.reveal-text-mask {
  overflow: hidden;
  display: block;
}

.reveal-text-mask > * {
  transform: translateY(115%);
  opacity: 0;
  transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.9s ease;
  will-change: transform, opacity;
}

.reveal-text-mask.is-revealed > * {
  transform: translateY(0);
  opacity: 1;
}

/* Character & Word Line Reveal */
.text-line-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1), transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
}

.text-line-reveal.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* --------------------------------------------------------------------------
   3. Stagger Delay Utilities
   -------------------------------------------------------------------------- */
.delay-50  { transition-delay: 0.05s !important; }
.delay-100 { transition-delay: 0.1s !important; }
.delay-150 { transition-delay: 0.15s !important; }
.delay-200 { transition-delay: 0.2s !important; }
.delay-250 { transition-delay: 0.25s !important; }
.delay-300 { transition-delay: 0.3s !important; }
.delay-350 { transition-delay: 0.35s !important; }
.delay-400 { transition-delay: 0.4s !important; }
.delay-450 { transition-delay: 0.45s !important; }
.delay-500 { transition-delay: 0.5s !important; }
.delay-600 { transition-delay: 0.6s !important; }
.delay-700 { transition-delay: 0.7s !important; }
.delay-800 { transition-delay: 0.8s !important; }

/* Auto-staggering children inside .reveal-stagger-group */
.reveal-stagger-group > *:nth-child(1) { transition-delay: 0.06s; }
.reveal-stagger-group > *:nth-child(2) { transition-delay: 0.14s; }
.reveal-stagger-group > *:nth-child(3) { transition-delay: 0.22s; }
.reveal-stagger-group > *:nth-child(4) { transition-delay: 0.30s; }
.reveal-stagger-group > *:nth-child(5) { transition-delay: 0.38s; }
.reveal-stagger-group > *:nth-child(6) { transition-delay: 0.46s; }
.reveal-stagger-group > *:nth-child(7) { transition-delay: 0.54s; }
.reveal-stagger-group > *:nth-child(8) { transition-delay: 0.62s; }

/* --------------------------------------------------------------------------
   4. Interactive Hover & Micro-Animations
   -------------------------------------------------------------------------- */

/* Hover Lift Card Effect */
.hover-lift {
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.35s ease;
  will-change: transform, box-shadow;
}

.hover-lift:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(3, 18, 69, 0.09);
  border-color: rgba(0, 138, 210, 0.35);
}

/* Image Zoom on Parent Hover */
.hover-zoom-wrap {
  overflow: hidden;
}

.hover-zoom-wrap img {
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

.hover-zoom-wrap:hover img {
  transform: scale(1.05);
}

/* Magnetic Button Arrow Translation */
.magnetic-arrow-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: color 0.3s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.magnetic-arrow-btn .btn-arrow-icon {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.magnetic-arrow-btn:hover .btn-arrow-icon {
  transform: translate(4px, -4px);
}

/* --------------------------------------------------------------------------
   5. Marquee & Continuous Scroll Elements
   -------------------------------------------------------------------------- */
@keyframes luxuryMarquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.marquee-container {
  overflow: hidden;
  white-space: nowrap;
  position: relative;
  width: 100%;
  padding: 24px 0;
  border-top: 1px solid var(--border-hairline);
  border-bottom: 1px solid var(--border-hairline);
  background: var(--bg-tertiary);
}

.marquee-content {
  display: inline-flex;
  gap: 40px;
  animation: luxuryMarquee 35s linear infinite;
}

.marquee-content:hover {
  animation-play-state: paused;
}

.marquee-item {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--text-secondary);
}

.marquee-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand-cyan);
  box-shadow: 0 0 8px rgba(56, 189, 248, 0.6);
}

/* Scroll Down Prompt Indicator */
.scroll-prompt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--brand-cyan);
  margin-top: 30px;
  opacity: 0.85;
}

.scroll-line {
  width: 1px;
  height: 36px;
  background: linear-gradient(180deg, var(--brand-azure) 0%, transparent 100%);
  animation: scrollDrop 2s infinite ease-in-out;
}

@keyframes scrollDrop {
  0% { transform: scaleY(0); transform-origin: top; }
  50% { transform: scaleY(1); transform-origin: top; }
  51% { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* --------------------------------------------------------------------------
   6. Why Choose Us — Staggered Card Entrance Animation
   Cards slide up one by one as the carousel enters view, mirroring the
   cinematic stagger reveal seen in the reference video.
   -------------------------------------------------------------------------- */

@keyframes whoCardSlideUp {
  0% {
    opacity: 0;
    transform: translateY(36px);
    filter: blur(5px);
  }
  60% {
    filter: blur(0px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0px);
  }
}

/* Inner content pop-in when a card slides into view during carousel navigation */
@keyframes whoCardContentIn {
  0% {
    opacity: 0;
    transform: translateY(12px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Base state: hidden before section is revealed */
.who-card-stagger {
  opacity: 0;
  transform: translateY(36px);
  filter: blur(5px);
  will-change: opacity, transform, filter;
}

/* Revealed state: triggered when .who-carousel-viewport gets .cards-revealed class */
.who-carousel-viewport.cards-revealed .who-card-stagger {
  animation: whoCardSlideUp 0.78s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Sequential stagger delays — each card slightly after the last */
.who-carousel-viewport.cards-revealed .who-card-stagger-1 {
  animation-delay: 0.08s;
}
.who-carousel-viewport.cards-revealed .who-card-stagger-2 {
  animation-delay: 0.22s;
}
.who-carousel-viewport.cards-revealed .who-card-stagger-3 {
  animation-delay: 0.36s;
}

/* Micro-animation applied to card inner content on carousel slide transitions */
.who-carousel-card.card-entering .who-slide-title,
.who-carousel-card.card-entering .who-slide-text {
  animation: whoCardContentIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.who-carousel-card.card-entering .who-slide-title {
  animation-delay: 0s;
}
.who-carousel-card.card-entering .who-slide-text {
  animation-delay: 0.1s;
  opacity: 0;
}

/* Arrow button enhanced hover with micro-translate */
.who-arrow-btn i {
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.who-arrow-btn:hover i {
  transform: translateX(-2px);
}
#whoNextBtn:hover i {
  transform: translateX(2px);
}

/* Eyebrow tag accent underline draw animation */
@keyframes whoEyebrowUnderline {
  0% { transform: scaleX(0); transform-origin: left; }
  100% { transform: scaleX(1); transform-origin: left; }
}

.who-header-block.is-revealed .who-eyebrow-tag {
  position: relative;
}

.who-header-block.is-revealed .who-eyebrow-tag::after {
  content: '';
  display: block;
  height: 1.5px;
  background: var(--brand-azure);
  margin-top: 5px;
  transform-origin: left;
  animation: whoEyebrowUnderline 0.55s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both;
}