/**
 * ==============================================================================
 * SOURCESWAP — COMPLETE LUXURY ANIMATION SYSTEM (animations.css)
 * Hardware-Accelerated (GPU Compositor), 60fps/120fps Ultra-Smooth Transitions
 * ==============================================================================
 */

/* --------------------------------------------------------------------------
   1. GLOBAL TIMING & EASING TOKENS
   -------------------------------------------------------------------------- */
:root {
  --ease-hero: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-header-morph: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --ease-reveal: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-float: cubic-bezier(0.45, 0.05, 0.55, 0.95);
}


/* ==============================================================================
   2. FIXED HEADER (SMOOTH 2.0s MORPH AFTER HERO)
   ============================================================================== */
.header-wrapper {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  z-index: 1000;
  max-width: 1160px;
  contain: layout style; /* Isolates header layout to eliminate full-page reflows */
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  
  /* Smooth 2-second morph curve */
  transition: 
    max-width 2.0s var(--ease-header-morph),
    padding 2.0s var(--ease-header-morph),
    transform 0.5s ease;
  will-change: max-width, padding;
}

.header-wrapper .navbar {
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  transition: 
    height 2.0s var(--ease-header-morph),
    padding 2.0s var(--ease-header-morph),
    background-color 0.5s ease,
    backdrop-filter 0.5s ease,
    box-shadow 0.5s ease,
    border-color 0.5s ease;
  will-change: height, padding, box-shadow;
}

/* Condensed state after scrolling past Hero */
.header-wrapper.header-condensed {
  max-width: 900px !important;
  padding-top: 10px !important;
}

.header-wrapper.header-condensed .navbar {
  height: 58px !important;
  padding: 0 14px !important;
  background-color: rgba(82, 85, 82, 0.88) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.22), 0 0 0 1px rgba(255, 255, 255, 0.12) !important;
}

[data-theme="dark"] .header-wrapper.header-condensed .navbar {
  background-color: rgba(26, 30, 36, 0.88) !important;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(168, 255, 26, 0.2) !important;
}

/* Offset body padding so top content does not get hidden under fixed header */
body {
  padding-top: clamp(76px, 9vw, 98px);
}


/* ==============================================================================
   3. HERO SECTION SEQUENTIAL LOAD-IN (PURE GPU KEYFRAMES)
   ============================================================================== */
@keyframes heroFadeUp {
  0% {
    opacity: 0;
    transform: translate3d(0, 22px, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes heroScaleUp {
  0% {
    opacity: 0;
    transform: translate3d(0, 20px, 0) scale(0.96);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes avatarPop {
  0% {
    opacity: 0;
    transform: scale3d(0.5, 0.5, 1);
  }
  100% {
    opacity: 1;
    transform: scale3d(1, 1, 1);
  }
}

/* Row 1: Members Pill */
.hero-row-1 {
  animation: heroFadeUp 0.85s var(--ease-hero) 0.05s backwards;
  will-change: transform, opacity;
}

.hero-row-1 .avatar-stack-img {
  animation: avatarPop 0.5s var(--ease-spring) backwards;
}
.hero-row-1 .avatar-stack-img:nth-child(1) { animation-delay: 0.15s; }
.hero-row-1 .avatar-stack-img:nth-child(2) { animation-delay: 0.22s; }
.hero-row-1 .avatar-stack-img:nth-child(3) { animation-delay: 0.29s; }

/* Row 2: Headline */
.hero-row-2 {
  animation: heroFadeUp 0.95s var(--ease-hero) 0.20s backwards;
  will-change: transform, opacity;
}

/* Row 3: Description Subtitle */
.hero-row-3 {
  animation: heroFadeUp 0.85s var(--ease-hero) 0.32s backwards;
  will-change: transform, opacity;
}

/* Row 4: Search Bar */
.hero-row-4 {
  animation: heroScaleUp 0.90s var(--ease-hero) 0.44s backwards;
  will-change: transform, opacity;
}

/* Row 5: Filter Tags Row */
.hero-row-5 {
  animation: heroFadeUp 0.80s var(--ease-hero) 0.56s backwards;
  will-change: transform, opacity;
}

/* Individual Tag Pills Staggered Sequence */
.hero-row-5 .tag-pill {
  animation: heroFadeUp 0.6s var(--ease-hero) backwards;
}
.hero-row-5 .tag-pill:nth-child(1) { animation-delay: 0.60s; }
.hero-row-5 .tag-pill:nth-child(2) { animation-delay: 0.66s; }
.hero-row-5 .tag-pill:nth-child(3) { animation-delay: 0.72s; }
.hero-row-5 .tag-pill:nth-child(4) { animation-delay: 0.78s; }
.hero-row-5 .tag-pill:nth-child(5) { animation-delay: 0.84s; }


/* ==============================================================================
   4. SCROLL REVEAL ENGINE (INTERSECTION OBSERVER DRIVEN)
   ============================================================================== */
[data-animate] {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  transition: opacity 0.85s var(--ease-reveal), transform 0.85s var(--ease-reveal);
  will-change: opacity, transform;
  backface-visibility: hidden;
}

[data-animate].in-view {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}


/* ==============================================================================
   SECTION 2: INFINITE LOGO MARQUEE
   ============================================================================== */
.marquee-container[data-animate] {
  transform: translate3d(0, 20px, 0);
  transition: opacity 0.95s var(--ease-reveal), transform 0.95s var(--ease-reveal);
}

.marquee-container.in-view .marquee-caption {
  letter-spacing: clamp(0.1em, 0.18em, 0.22em);
  transition: letter-spacing 1.2s var(--ease-reveal);
}


/* ==============================================================================
   SECTION 3: MOST REQUESTED ALTERNATIVES (ALL 16 CARDS INDIVIDUAL CASCADE)
   ============================================================================== */
.targets-section .targets-header[data-animate] {
  transform: translate3d(0, 24px, 0);
  transition: opacity 0.85s var(--ease-reveal), transform 0.85s var(--ease-reveal);
}

.targets-grid .target-item-card {
  opacity: 0;
  transform: translate3d(0, 20px, 0) scale(0.97);
  transition: 
    opacity 0.65s var(--ease-reveal), 
    transform 0.65s var(--ease-reveal),
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);
  will-change: opacity, transform;
  backface-visibility: hidden;
}

.targets-grid.in-view .target-item-card {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

/* Restored: Complete 16-card silky cascade delays */
.targets-grid.in-view .target-item-card:nth-child(1)  { transition-delay: 0.04s; }
.targets-grid.in-view .target-item-card:nth-child(2)  { transition-delay: 0.08s; }
.targets-grid.in-view .target-item-card:nth-child(3)  { transition-delay: 0.12s; }
.targets-grid.in-view .target-item-card:nth-child(4)  { transition-delay: 0.16s; }
.targets-grid.in-view .target-item-card:nth-child(5)  { transition-delay: 0.20s; }
.targets-grid.in-view .target-item-card:nth-child(6)  { transition-delay: 0.24s; }
.targets-grid.in-view .target-item-card:nth-child(7)  { transition-delay: 0.28s; }
.targets-grid.in-view .target-item-card:nth-child(8)  { transition-delay: 0.32s; }
.targets-grid.in-view .target-item-card:nth-child(9)  { transition-delay: 0.36s; }
.targets-grid.in-view .target-item-card:nth-child(10) { transition-delay: 0.40s; }
.targets-grid.in-view .target-item-card:nth-child(11) { transition-delay: 0.44s; }
.targets-grid.in-view .target-item-card:nth-child(12) { transition-delay: 0.48s; }
.targets-grid.in-view .target-item-card:nth-child(13) { transition-delay: 0.52s; }
.targets-grid.in-view .target-item-card:nth-child(14) { transition-delay: 0.56s; }
.targets-grid.in-view .target-item-card:nth-child(15) { transition-delay: 0.60s; }
.targets-grid.in-view .target-item-card:nth-child(16) { transition-delay: 0.64s; }

/* Micro-interaction hover */
.target-item-card:hover {
  transform: translate3d(0, -3px, 0) scale(1.015);
}


/* ==============================================================================
   SECTION 4: INTERACTIVE SWAP MATRIX (COLLISION & POP PHYSICS)
   ============================================================================== */
.swap-matrix-container .matrix-header[data-animate] {
  transform: translate3d(0, 24px, 0);
  transition: opacity 0.85s var(--ease-reveal), transform 0.85s var(--ease-reveal);
}

/* Left Card slides gently from left */
.matrix-cards-stage .card-locked {
  opacity: 0;
  transform: translate3d(-32px, 0, 0);
  transition: opacity 0.9s var(--ease-reveal), transform 0.9s var(--ease-reveal);
  will-change: opacity, transform;
}

/* Right Card slides gently from right */
.matrix-cards-stage .card-liberated {
  opacity: 0;
  transform: translate3d(32px, 0, 0);
  transition: opacity 0.9s var(--ease-reveal), transform 0.9s var(--ease-reveal);
  will-change: opacity, transform;
}

/* Center VS Badge Elastic Pop */
.matrix-cards-stage .matrix-vs-badge {
  opacity: 0;
  transform: translate3d(-50%, -50%, 0) scale(0.3) rotate(-15deg);
  transition: 
    opacity 0.7s var(--ease-spring), 
    transform 0.8s var(--ease-spring);
  transition-delay: 0.3s;
  will-change: opacity, transform;
}

.matrix-cards-stage.in-view .card-locked,
.matrix-cards-stage.in-view .card-liberated {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.matrix-cards-stage.in-view .matrix-vs-badge {
  opacity: 1;
  transform: translate3d(-50%, -50%, 0) scale(1) rotate(0deg);
}

/* Stagger points inside cards */
.matrix-cards-stage.in-view .matrix-point {
  opacity: 0;
  animation: heroFadeUp 0.6s var(--ease-reveal) forwards;
}
.matrix-cards-stage.in-view .matrix-point:nth-child(1) { animation-delay: 0.35s; }
.matrix-cards-stage.in-view .matrix-point:nth-child(2) { animation-delay: 0.45s; }
.matrix-cards-stage.in-view .matrix-point:nth-child(3) { animation-delay: 0.55s; }

/* Matrix Bottom Action Strip */
.matrix-action-strip[data-animate] {
  transform: translate3d(0, 20px, 0);
  transition: opacity 0.8s var(--ease-reveal), transform 0.8s var(--ease-reveal);
  transition-delay: 0.2s;
}

.matrix-action-strip[data-animate].in-view {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* Tab Switching Crossfade */
.matrix-tab-switching .pane-targets,
.matrix-tab-switching .pane-points-list {
  opacity: 0;
  transform: translate3d(0, 6px, 0);
  transition: opacity 0.16s ease, transform 0.16s ease;
}


/* ==============================================================================
   SECTION 5: FULL-BLEED OPEN ECOSYSTEM (RADAR & AMBIENT FLOATING PHYSICS)
   ============================================================================== */
.ecosystem-section[data-animate] .ecosystem-content {
  opacity: 0;
  transform: translate3d(0, 18px, 0) scale(0.95);
  transition: opacity 0.95s var(--ease-reveal), transform 0.95s var(--ease-reveal);
  will-change: opacity, transform;
}

.ecosystem-section[data-animate].in-view .ecosystem-content {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

/* Radar pulse wave */
@keyframes radarRipple {
  0% { transform: translate3d(-50%, -50%, 0) scale(0.92); opacity: 0.3; }
  50% { transform: translate3d(-50%, -50%, 0) scale(1.02); opacity: 0.7; }
  100% { transform: translate3d(-50%, -50%, 0) scale(0.92); opacity: 0.3; }
}

.ecosystem-section[data-animate] .ecosystem-radar-ring {
  opacity: 0;
  transform: translate3d(-50%, -50%, 0) scale(0.85);
  transition: opacity 1.2s var(--ease-reveal), transform 1.2s var(--ease-reveal);
  will-change: opacity, transform;
}

.ecosystem-section[data-animate].in-view .ring-outer {
  opacity: 0.5;
  transform: translate3d(-50%, -50%, 0) scale(1);
  transition-delay: 0.15s;
  animation: radarRipple 8s var(--ease-float) infinite;
  animation-delay: 1.4s;
}

.ecosystem-section[data-animate].in-view .ring-inner {
  opacity: 0.75;
  transform: translate3d(-50%, -50%, 0) scale(1);
  transition-delay: 0.28s;
  animation: radarRipple 8s var(--ease-float) infinite;
  animation-delay: 1.8s;
}

/* Satellite Blossom Entrance */
.ecosystem-tile {
  opacity: 0;
  transition: opacity 0.85s var(--ease-reveal);
  will-change: opacity, transform;
}

.ecosystem-section.in-view .ecosystem-tile {
  opacity: 1;
}

.ecosystem-section.in-view .tile-nextcloud { transition-delay: 0.14s; }
.ecosystem-section.in-view .tile-plausible { transition-delay: 0.22s; }
.ecosystem-section.in-view .tile-penpot    { transition-delay: 0.30s; }
.ecosystem-section.in-view .tile-obsidian  { transition-delay: 0.38s; }
.ecosystem-section.in-view .tile-bitwarden { transition-delay: 0.46s; }
.ecosystem-section.in-view .tile-supabase  { transition-delay: 0.54s; }
.ecosystem-section.in-view .tile-immich    { transition-delay: 0.62s; }

/* Weightless Floating Ambient Physics */
@keyframes ecoFloatVertical {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -7px, 0); }
}

@keyframes ecoFloatHorizontalLeft {
  0%, 100% { transform: translate3d(0, -50%, 0); }
  50% { transform: translate3d(0, calc(-50% - 6px), 0); }
}

@keyframes ecoFloatHorizontalRight {
  0%, 100% { transform: translate3d(0, -50%, 0); }
  50% { transform: translate3d(0, calc(-50% - 6px), 0); }
}

@keyframes ecoFloatBottomCenter {
  0%, 100% { transform: translate3d(-50%, 0, 0); }
  50% { transform: translate3d(-50%, -6px, 0); }
}

.ecosystem-section.in-view .tile-nextcloud { animation: ecoFloatVertical 6s var(--ease-float) infinite; animation-delay: 0.8s; }
.ecosystem-section.in-view .tile-plausible { animation: ecoFloatVertical 6.5s var(--ease-float) infinite; animation-delay: 1.2s; }
.ecosystem-section.in-view .tile-penpot    { animation: ecoFloatHorizontalLeft 6s var(--ease-float) infinite; animation-delay: 1.5s; }
.ecosystem-section.in-view .tile-obsidian  { animation: ecoFloatHorizontalRight 6s var(--ease-float) infinite; animation-delay: 1.8s; }
.ecosystem-section.in-view .tile-bitwarden { animation: ecoFloatVertical 6.2s var(--ease-float) infinite; animation-delay: 2.1s; }
.ecosystem-section.in-view .tile-supabase  { animation: ecoFloatVertical 6.8s var(--ease-float) infinite; animation-delay: 2.4s; }
.ecosystem-section.in-view .tile-immich    { animation: ecoFloatBottomCenter 6.4s var(--ease-float) infinite; animation-delay: 2.7s; }


/* ==============================================================================
   SECTION 6: BLOG / ARTICLES SECTION
   ============================================================================== */
.articles-section .articles-header[data-animate] {
  transform: translate3d(0, 24px, 0);
  transition: opacity 0.85s var(--ease-reveal), transform 0.85s var(--ease-reveal);
}

.articles-grid .article-card {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  transition: 
    opacity 0.8s var(--ease-reveal), 
    transform 0.8s var(--ease-reveal),
    box-shadow var(--transition-fast),
    border-color var(--transition-fast);
  will-change: opacity, transform;
  backface-visibility: hidden;
}

.articles-grid.in-view .article-card {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.articles-grid.in-view .article-card:nth-child(1) { transition-delay: 0.10s; }
.articles-grid.in-view .article-card:nth-child(2) { transition-delay: 0.22s; }
.articles-grid.in-view .article-card:nth-child(3) { transition-delay: 0.34s; }

/* Article Card Hover Animation */
.article-card:hover {
  transform: translate3d(0, -4px, 0);
}

.article-card:hover .article-cover-img {
  transform: scale3d(1.04, 1.04, 1);
}

.articles-cta-wrap[data-animate] {
  transform: translate3d(0, 18px, 0);
  transition: opacity 0.75s var(--ease-reveal), transform 0.75s var(--ease-reveal);
  transition-delay: 0.35s;
}

.articles-cta-wrap[data-animate].in-view {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}


/* ==============================================================================
   SECTION 7: FAQ & APP REQUEST SECTION
   ============================================================================== */
.exact-faq-container .faq-left-card {
  opacity: 0;
  transform: translate3d(-30px, 0, 0);
  transition: opacity 0.9s var(--ease-reveal), transform 0.9s var(--ease-reveal);
  will-change: opacity, transform;
}

.exact-faq-container .faq-right-card {
  opacity: 0;
  transform: translate3d(30px, 0, 0);
  transition: opacity 0.9s var(--ease-reveal), transform 0.9s var(--ease-reveal);
  transition-delay: 0.15s;
  will-change: opacity, transform;
}

.exact-faq-container.in-view .faq-left-card,
.exact-faq-container.in-view .faq-right-card {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* Cascading Accordion Rows */
.faq-row {
  opacity: 0;
  transform: translate3d(0, 12px, 0);
  transition: opacity 0.55s var(--ease-reveal), transform 0.55s var(--ease-reveal);
  will-change: opacity, transform;
}

.exact-faq-container.in-view .faq-row:nth-child(1) { opacity: 1; transform: translate3d(0,0,0); transition-delay: 0.20s; }
.exact-faq-container.in-view .faq-row:nth-child(2) { opacity: 1; transform: translate3d(0,0,0); transition-delay: 0.28s; }
.exact-faq-container.in-view .faq-row:nth-child(3) { opacity: 1; transform: translate3d(0,0,0); transition-delay: 0.36s; }
.exact-faq-container.in-view .faq-row:nth-child(4) { opacity: 1; transform: translate3d(0,0,0); transition-delay: 0.44s; }


/* ==============================================================================
   SECTION 8: PRE-FOOTER LIME NEWSLETTER BANNER
   ============================================================================== */
.prefooter-banner-section .lime-cta-card {
  opacity: 0;
  transform: translate3d(0, 30px, 0) scale(0.97);
  transition: 
    opacity 0.95s var(--ease-reveal), 
    transform 0.95s var(--ease-reveal),
    box-shadow 0.95s var(--ease-reveal);
  will-change: opacity, transform;
}

.prefooter-banner-section.in-view .lime-cta-card {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

/* Stagger avatar stack in banner */
.lime-cta-card .lime-avatar {
  animation: avatarPop 0.5s var(--ease-spring) backwards;
}
.prefooter-banner-section.in-view .lime-avatar:nth-child(1) { animation-delay: 0.3s; }
.prefooter-banner-section.in-view .lime-avatar:nth-child(2) { animation-delay: 0.4s; }
.prefooter-banner-section.in-view .lime-avatar:nth-child(3) { animation-delay: 0.5s; }


/* ==============================================================================
   SECTION 9: OBSIDIAN FOOTER & WALL-TO-WALL WATERMARK
   ============================================================================== */
.footer-main-grid > div {
  opacity: 0;
  transform: translate3d(0, 20px, 0);
  transition: opacity 0.8s var(--ease-reveal), transform 0.8s var(--ease-reveal);
  will-change: opacity, transform;
}

.site-footer-obsidian.in-view .footer-main-grid > div:nth-child(1) { opacity: 1; transform: translate3d(0,0,0); transition-delay: 0.08s; }
.site-footer-obsidian.in-view .footer-main-grid > div:nth-child(2) { opacity: 1; transform: translate3d(0,0,0); transition-delay: 0.16s; }
.site-footer-obsidian.in-view .footer-main-grid > div:nth-child(3) { opacity: 1; transform: translate3d(0,0,0); transition-delay: 0.24s; }
.site-footer-obsidian.in-view .footer-main-grid > div:nth-child(4) { opacity: 1; transform: translate3d(0,0,0); transition-delay: 0.32s; }

.footer-social-btn {
  transition: transform var(--transition-fast), background-color var(--transition-fast);
}

.footer-social-btn:hover {
  transform: translate3d(0, -2px, 0);
}

/* Wall-to-Wall Watermark Mask Rise */
.footer-watermark span {
  opacity: 0;
  transform: translate3d(0, 28%, 0);
  transition: opacity 1.2s var(--ease-reveal), transform 1.2s var(--ease-reveal);
  transition-delay: 0.25s;
  will-change: opacity, transform;
}

.site-footer-obsidian.in-view .footer-watermark span {
  opacity: 1;
  transform: translate3d(0, 12%, 0);
}


/* ==============================================================================
   5. ACCESSIBILITY — PREFERS REDUCED MOTION
   ============================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  
  .hero-row-1, .hero-row-2, .hero-row-3, .hero-row-4, .hero-row-5,
  [data-animate],
  .target-item-card,
  .article-card,
  .card-locked,
  .card-liberated,
  .matrix-vs-badge,
  .lime-cta-card,
  .footer-watermark span {
    opacity: 1 !important;
    transform: none !important;
  }
}