/* ============================================================
   CTRLFLOW.AI — FUTURISTIC EFFECTS
   Loaded AFTER style.css. Ambient atmosphere, reactive UI,
   scroll animation, glassmorphism, page-specific polish.
   ============================================================ */

/* ------------------------------------------------------------
   STACKING: lift real content above the fixed ambient layer.
   (nav is fixed/z-index:100 already; these are static by default)
------------------------------------------------------------ */
section,
footer,
main { position: relative; z-index: 1; }

/* ============================================================
   PART 1 — AMBIENT BACKGROUND
   ============================================================ */
.cf-ambient {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

/* faint geometric grid */
.cf-ambient-grid {
  position: absolute;
  inset: -2px;
  background-image:
    linear-gradient(rgba(6, 95, 70, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(6, 95, 70, 0.025) 1px, transparent 1px);
  background-size: 80px 80px;
  pointer-events: none;
}

/* slow drifting violet gradient (Lissajous via keyframes) */
.cf-ambient-gradient {
  position: absolute;
  width: 800px;
  height: 800px;
  top: 50%;
  left: 50%;
  margin: -400px 0 0 -400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(6, 95, 70, 0.08) 0%, transparent 70%);
  filter: blur(80px);
  pointer-events: none;
  --cf-parallax: 0px;
  animation: cfDrift 60s ease-in-out infinite;
  will-change: transform;
}
@keyframes cfDrift {
  0%   { transform: translate3d(-22vw, calc(-12vh + var(--cf-parallax)), 0); }
  25%  { transform: translate3d(20vw,  calc(-18vh + var(--cf-parallax)), 0); }
  50%  { transform: translate3d(24vw,  calc(14vh + var(--cf-parallax)), 0); }
  75%  { transform: translate3d(-18vw, calc(16vh + var(--cf-parallax)), 0); }
  100% { transform: translate3d(-22vw, calc(-12vh + var(--cf-parallax)), 0); }
}

.cf-ambient-particles { position: absolute; inset: 0; pointer-events: none; }
.cf-particle {
  position: absolute;
  top: 0; left: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(6, 95, 70, 0.4) 0%, transparent 70%);
  will-change: transform;
}

/* reduced motion: freeze gradient drift, keep grid + static particles */
.cf-ambient-static .cf-ambient-gradient { animation: none; transform: translate3d(0, 0, 0); }

/* ============================================================
   PART 3 — SCROLL PROGRESS BAR (top of every page)
   ============================================================ */
.cf-scroll-progress {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--color-accent-dark), var(--color-accent));
  transform: scaleX(0);
  transform-origin: left center;
  z-index: 200;
  pointer-events: none;
  box-shadow: 0 0 10px rgba(6, 95, 70, 0.6);
  transition: box-shadow 0.3s ease;
}
.cf-scroll-progress.cf-scroll-complete {
  box-shadow: 0 0 18px rgba(6, 95, 70, 0.9);
  animation: cfProgressPulse 0.6s ease;
}
@keyframes cfProgressPulse {
  0% { opacity: 1; } 50% { opacity: 0.55; } 100% { opacity: 1; }
}

/* ============================================================
   PART 3 — STAGGERED CARD ENTRY
   ============================================================ */
.cf-stagger-item {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.cf-stagger-item.cf-in { opacity: 1; transform: translateY(0); }

/* ============================================================
   PART 4 — GLASSMORPHISM (cards site-wide)
   Refines the style.css .card base; loaded after so it wins.
   ============================================================ */
.card,
.work-card,
.project-card,
.cira-tier-card,
.cira-feature-card,
.cira-social-card,
.testimonial-card-v2,
.comparison-col {
  background: rgba(255, 255, 255, 0.6);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border: 0.5px solid rgba(6, 95, 70, 0.15);
  border-radius: 16px;
}
.card:hover,
.work-card:hover,
.project-card:hover,
.cira-tier-card:hover,
.cira-feature-card:hover,
.cira-social-card:hover,
.testimonial-card-v2:hover,
.comparison-col:hover {
  border-color: rgba(6, 95, 70, 0.4);
  box-shadow: 0 0 40px rgba(6, 95, 70, 0.15);
}

/* more breathing room in grids */
.cira-tiers-grid,
.cira-features-grid,
.cira-social-grid,
.testimonials-grid { gap: 24px; }
.work-grid,
.index-work-grid { gap: 32px; }

/* ============================================================
   PART 2 — 3D TILT base
   ============================================================ */
.cf-tilt {
  transform-style: preserve-3d;
  transition: transform 0.2s ease-out, box-shadow 0.2s ease-out, border-color 0.2s ease-out;
}
.cf-tilt.cf-tilting {
  box-shadow: 0 0 40px rgba(6, 95, 70, 0.18);
  border-color: rgba(6, 95, 70, 0.45);
}

/* ============================================================
   PART 2 — MAGNETIC BUTTON GLOW
   ============================================================ */
.btn-primary.cf-magnetic {
  position: relative;
  overflow: hidden;
  --mouse-x: 50%;
  --mouse-y: 50%;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.btn-primary.cf-magnetic::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(120px circle at var(--mouse-x) var(--mouse-y),
              rgba(255, 255, 255, 0.35) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}
.btn-primary.cf-magnetic:hover {
  transform: scale(1.02);
  box-shadow: 0 0 30px rgba(6, 95, 70, 0.4);
}
.btn-primary.cf-magnetic:hover::before { opacity: 1; }

/* ============================================================
   PART 2 — INLINE LINK GLOW
   Inline links inside body copy only (not nav/buttons/cards).
   ============================================================ */
p a:not(.btn-primary):not(.btn-ghost),
.cira-story-text a,
.faq-answer a {
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease, text-shadow 0.2s ease, color 0.2s ease;
}
p a:not(.btn-primary):not(.btn-ghost):hover,
.cira-story-text a:hover,
.faq-answer a:hover {
  border-bottom: 1px solid var(--color-accent);
  text-shadow: 0 0 8px rgba(6, 95, 70, 0.5);
  color: var(--color-text-primary);
}

/* ============================================================
   PART 2 — NAV LINK UNDERLINE + ACTIVE GLOW
   ============================================================ */
.nav-links a:not(.btn-primary) {
  position: relative;
}
.nav-links a:not(.btn-primary)::after {
  content: '';
  position: absolute;
  left: 0; bottom: -4px;
  width: 100%;
  height: 1px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
.nav-links a:not(.btn-primary):hover::after { transform: scaleX(1); }
.nav-links a.nav-active {
  color: var(--color-accent);
  text-shadow: 0 0 12px rgba(6, 95, 70, 0.45);
}

/* ============================================================
   PART 6/10 — FLAGSHIP TIER ELEVATION + BADGE PULSE
   ============================================================ */
.cira-tier-flagship {
  transform: translateY(-12px);
}
.cira-tier-flagship:hover { transform: translateY(-14px); }
.cira-tier-badge { animation: cfBadgePulse 4s ease-in-out infinite; }
@keyframes cfBadgePulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 rgba(6, 95, 70, 0); }
  50%      { transform: scale(1.06); box-shadow: 0 0 18px rgba(6, 95, 70, 0.5); }
}

/* ============================================================
   PART 7 — MARKETPLACE CARD POLISH
   ============================================================ */
.work-card:hover { transform: translateY(-8px); }
.work-card:hover .work-preview img,
.work-card:hover .wpm { transform: scale(1.05); }
.cf-status-badge {
  position: absolute;
  top: 12px; left: 12px;
  z-index: 4;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.06em;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(6, 95, 70, 0.18);
  border: 0.5px solid rgba(6, 95, 70, 0.45);
  color: #34D399;
  text-shadow: 0 0 8px rgba(6, 95, 70, 0.4);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* active filter chip glow */
.filter-chip.active,
.filter-pill.active,
.type-filter.active,
.industry-filter.active {
  background: rgba(6, 95, 70, 0.15) !important;
  border-color: var(--color-accent) !important;
  color: var(--color-text-primary) !important;
  text-shadow: 0 0 8px rgba(6, 95, 70, 0.5);
  transition: all 0.2s ease;
}

/* ============================================================
   PART 8 — NETWORK STAT NUMBERS
   ============================================================ */
.cf-stat-big {
  font-family: 'Space Grotesk', sans-serif;
  font-style: italic;
  font-weight: 600;
  font-size: 72px;
  line-height: 1;
  color: var(--color-text-primary);
  text-shadow: 0 0 30px rgba(6, 95, 70, 0.3);
}
@media (max-width: 768px) { .cf-stat-big { font-size: 54px; } }

/* ============================================================
   PART 9 — BOOK PAGE: selected card glow + next-button pulse
   ============================================================ */
.step-card { transition: transform 0.2s ease-out, border-color 0.2s ease, box-shadow 0.2s ease; }
.step-card:hover { transform: scale(1.04); box-shadow: 0 0 30px rgba(6, 95, 70, 0.18); }
.step-card.selected,
.step-card.is-selected,
.step-card[aria-selected="true"] {
  border-color: var(--color-accent);
  background: linear-gradient(180deg, rgba(6, 95, 70, 0.12) 0%, transparent 100%);
  box-shadow: inset 0 0 24px rgba(6, 95, 70, 0.12), 0 0 22px rgba(6, 95, 70, 0.18);
}
.btn-next:not(:disabled),
.form-next:not(:disabled),
.step-next:not(:disabled) {
  animation: cfNextPulse 2.2s ease-in-out infinite;
}
@keyframes cfNextPulse {
  0%, 100% { box-shadow: 0 0 0 rgba(6, 95, 70, 0); }
  50%      { box-shadow: 0 0 22px rgba(6, 95, 70, 0.5); }
}

/* ============================================================
   PART 10 — GALLERY hover + LIGHTBOX
   ============================================================ */
.cira-gallery-item { transition: transform 0.25s ease-out, box-shadow 0.25s ease-out; }
.cira-gallery-item:hover {
  transform: scale(1.05) rotate(-0.5deg);
  box-shadow: 0 12px 50px rgba(6, 95, 70, 0.22);
}
.cf-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(4, 4, 4, 0.92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.cf-lightbox.cf-open { opacity: 1; pointer-events: auto; }
.cf-lightbox img {
  max-width: 86vw;
  max-height: 84vh;
  border-radius: 12px;
  box-shadow: 0 0 80px rgba(6, 95, 70, 0.25);
  border: 0.5px solid rgba(6, 95, 70, 0.3);
}
.cf-lightbox-close,
.cf-lightbox-nav {
  position: absolute;
  background: rgba(0, 0, 0, 0.5);
  border: 0.5px solid rgba(6, 95, 70, 0.4);
  color: #34D399;
  width: 44px; height: 44px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  font-size: 20px;
  transition: all 0.2s ease;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.cf-lightbox-close { top: 24px; right: 24px; }
.cf-lightbox-prev { left: 24px; top: 50%; transform: translateY(-50%); }
.cf-lightbox-next { right: 24px; top: 50%; transform: translateY(-50%); }
.cf-lightbox-close:hover,
.cf-lightbox-nav:hover {
  background: rgba(6, 95, 70, 0.25);
  box-shadow: 0 0 20px rgba(6, 95, 70, 0.4);
}

/* ============================================================
   PART 10 — ROADMAP TIMELINE animation
   ============================================================ */
.cira-tl-complete .cira-tl-dot {
  box-shadow: 0 0 16px rgba(6, 95, 70, 0.55);
}
.cira-timeline-item.cf-in-view .cira-tl-dot { animation: cfDotPulse 2.4s ease-in-out infinite; }
@keyframes cfDotPulse {
  0%, 100% { box-shadow: 0 0 12px rgba(6, 95, 70, 0.4); }
  50%      { box-shadow: 0 0 22px rgba(6, 95, 70, 0.75); }
}
.cira-tl-upcoming .cira-tl-dot {
  border-style: dashed;
  animation: cfDashSpin 6s linear infinite;
}
@keyframes cfDashSpin { to { transform: rotate(360deg); } }

/* ============================================================
   PART 12 — MOBILE: drop backdrop-filter entirely for performance.
   Re-blurring the backdrop behind every card on each repaint/scroll
   is a major GPU cost on phones — use a solid opaque surface instead.
   ============================================================ */
@media (max-width: 768px) {
  .card,
  .work-card,
  .project-card,
  .cira-tier-card,
  .cira-feature-card,
  .cira-social-card,
  .testimonial-card-v2,
  .comparison-col {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background: var(--color-bg-surface) !important;
  }
  .cira-tier-flagship { transform: none; }
}

/* ============================================================
   PART 3/13 — REDUCED MOTION: disable all motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .cf-ambient-gradient,
  .cira-tier-badge,
  .cira-timeline-item .cira-tl-dot,
  .cira-tl-upcoming .cira-tl-dot,
  .btn-next:not(:disabled),
  .form-next:not(:disabled),
  .step-next:not(:disabled),
  .cf-scroll-progress.cf-scroll-complete { animation: none !important; }
  .cf-stagger-item { opacity: 1 !important; transform: none !important; transition: none !important; }
  .cf-tilt { transition: none !important; }
  .cira-tier-flagship { transform: none !important; }
}