/* =====================================================
   MendAI Labs — Animations & Enhanced Visuals
   ===================================================== */

/* ── Scroll-reveal ──────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity .7s cubic-bezier(.22,1,.36,1),
              transform .7s cubic-bezier(.22,1,.36,1);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Directional variants */
.reveal-left {
  opacity: 0;
  transform: translateX(-48px);
  transition: opacity .7s cubic-bezier(.22,1,.36,1),
              transform .7s cubic-bezier(.22,1,.36,1);
}
.reveal-left.visible {
  opacity: 1;
  transform: translateX(0);
}

.reveal-right {
  opacity: 0;
  transform: translateX(48px);
  transition: opacity .7s cubic-bezier(.22,1,.36,1),
              transform .7s cubic-bezier(.22,1,.36,1);
}
.reveal-right.visible {
  opacity: 1;
  transform: translateX(0);
}

.reveal-scale {
  opacity: 0;
  transform: scale(.88);
  transition: opacity .7s cubic-bezier(.22,1,.36,1),
              transform .7s cubic-bezier(.22,1,.36,1);
}
.reveal-scale.visible {
  opacity: 1;
  transform: scale(1);
}

/* Heading clip-path reveal */
.reveal-clip {
  opacity: 0;
  clip-path: inset(0 100% 0 0);
  transition: opacity .01s,
              clip-path .8s cubic-bezier(.22,1,.36,1);
}
.reveal-clip.visible {
  opacity: 1;
  clip-path: inset(0 0% 0 0);
}

.reveal-delay-1 { transition-delay: .08s; }
.reveal-delay-2 { transition-delay: .16s; }
.reveal-delay-3 { transition-delay: .24s; }
.reveal-delay-4 { transition-delay: .32s; }
.reveal-delay-5 { transition-delay: .40s; }
.reveal-delay-6 { transition-delay: .52s; }

/* ── Hero enhancements ──────────────────────────────── */

.hero {
  position: relative;
  overflow: hidden;
}

/* Gradient animated headline */
.hero h1 .accent {
  background: linear-gradient(90deg, #60A5FA, #A9CCFF, #93C5FD, #60A5FA);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradient-shift 5s ease infinite;
}
@keyframes gradient-shift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Hero cards — static (no float animation) */

/* ── Nav ────────────────────────────────────────────── */
.nav {
  transition: box-shadow .3s;
}
.nav.scrolled {
  box-shadow: 0 2px 32px rgba(0,0,0,.4);
}
.nav-links a {
  position: relative;
}
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -4px; left: 0;
  width: 0; height: 2px;
  background: var(--orange);
  transition: width .25s;
}
.nav-links a:hover::after { width: 100%; }

/* ── Section tags — pulse ring ──────────────────────── */
.section-tag,
.section-tag-dark {
  position: relative;
}

/* ── Mission section ────────────────────────────────── */
.mission::before {
  content: '';
  position: absolute;
  top: -200px; right: -200px;
  width: 600px; height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(37,99,235,.06) 0%, transparent 70%);
  pointer-events: none;
}
.mission { position: relative; }

.problem-box {
  transition: box-shadow .3s, transform .3s;
}
.problem-box:hover {
  box-shadow: 0 8px 32px rgba(37,99,235,.12);
  transform: translateY(-2px);
}

.problem-item {
  transition: transform .2s;
}
.problem-item:hover { transform: translateX(4px); }

.stat-box {
  position: relative;
  overflow: hidden;
  transition: transform .2s;
}
.stat-box:hover { transform: scale(1.03); }
.stat-box::before {
  content: '';
  position: absolute;
  top: -50%; left: -50%;
  width: 200%; height: 200%;
  background: linear-gradient(45deg, transparent 30%, rgba(37,99,235,.1) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform .6s;
}
.stat-box:hover::before { transform: translateX(100%); }

/* ── Solution section ───────────────────────────────── */
.solution {
  position: relative;
  overflow: hidden;
}
.solution::after {
  content: '';
  position: absolute;
  bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: 80%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(37,99,235,.3), transparent);
}

/* Module card glow on hover */
.module-card {
  position: relative;
  overflow: hidden;
}
.module-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(37,99,235,.15), transparent 60%);
  transition: opacity .3s;
  pointer-events: none;
}
.module-card:hover::before { opacity: 1; }

/* Partner/advisor card glow on hover — same effect as the module cards */
.partner-card {
  position: relative;
  overflow: hidden;
}
.partner-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(37,99,235,.15), transparent 60%);
  transition: opacity .3s;
  pointer-events: none;
}
.partner-card:hover::before { opacity: 1; }

/* Workflow glow animation */
.wf-icon {
  box-shadow: 0 0 0 0 rgba(37,99,235,0);
  transition: box-shadow .3s, transform .2s;
}
.wf-icon:hover {
  transform: scale(1.1);
  box-shadow: 0 0 24px rgba(37,99,235,.5);
}

/* Spin animation on the cycle SVG feedback arc */
@keyframes pulse-orange {
  0%, 100% { opacity: 1; }
  50%       { opacity: .5; }
}
/* The orange dashed arcs pulse */
.cycle-svg .orange-arc {
  animation: pulse-orange 2.5s ease-in-out infinite;
}

/* SVG path draw-in animation */
.cycle-svg path,
.cycle-svg circle {
  stroke-dashoffset: var(--dash-len, 1000);
  transition: stroke-dashoffset 1.2s cubic-bezier(.22,1,.36,1);
}
.cycle-diagram.drawn .cycle-svg path,
.cycle-diagram.drawn .cycle-svg circle {
  stroke-dashoffset: 0;
}


/* Parallax wrapper for sections */
.parallax-bg {
  will-change: transform;
}

/* Section line separator animation */
.section-line {
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--orange), var(--teal));
  margin: 16px auto 0;
  transition: width 1s cubic-bezier(.22,1,.36,1);
  border-radius: 2px;
}
.section-header.visible .section-line,
.section-header .section-line.visible {
  width: 64px;
}

/* Section h2 — subtle zoom entrance */
.section-header h2 {
  transition: opacity .7s cubic-bezier(.22,1,.36,1),
              transform .7s cubic-bezier(.22,1,.36,1);
  opacity: 0;
  transform: scale(.96) translateY(12px);
}
.section-header.visible h2 {
  opacity: 1;
  transform: scale(1) translateY(0);
}

/* Section tag entrance */
.section-tag, .section-tag-dark {
  display: inline-block;
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity .5s cubic-bezier(.22,1,.36,1),
              transform .5s cubic-bezier(.22,1,.36,1);
}
.section-header.visible .section-tag,
.section-header.visible .section-tag-dark {
  opacity: 1;
  transform: translateY(0);
}

/* Vision statement parallax container */
.vision {
  overflow: hidden;
}

/* Hover glow on cycle nodes */
.cycle-node .wf-icon {
  transition: transform .25s, box-shadow .25s;
}
.cycle-node:hover .wf-icon {
  transform: scale(1.12);
  box-shadow: 0 0 28px rgba(37,99,235,.55);
}
.cycle-node:hover .cycle-label {
  color: rgba(255,255,255,1);
}

/* ── Founders ───────────────────────────────────────── */
.founder-card {
  transition: box-shadow .3s, transform .3s;
  position: relative;
  overflow: hidden;
}
.founder-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--orange), var(--teal));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s cubic-bezier(.22,1,.36,1);
}
.founder-card:hover {
  box-shadow: 0 16px 48px rgba(37,99,235,.15);
  transform: translateY(-4px);
}
.founder-card:hover::before { transform: scaleX(1); }

.founder-avatar {
  transition: transform .3s, box-shadow .3s;
}
.founder-card:hover .founder-avatar {
  transform: scale(1.08);
  box-shadow: 0 0 0 4px rgba(37,99,235,.25);
}

/* ── Partner cards ──────────────────────────────────── */
.partner-card {
  transition: box-shadow .25s, transform .25s;
}
.partner-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,.1);
}
.partner-avatar {
  transition: background .3s;
}
.partner-card:hover .partner-avatar {
  background: linear-gradient(135deg, var(--orange), #1E40AF);
}

/* ── Backing items ──────────────────────────────────── */
.backing-item {
  transition: border-color .25s, box-shadow .25s;
}
.backing-item:hover {
  border-color: var(--orange);
  box-shadow: 0 4px 20px rgba(37,99,235,.1);
}
.backing-icon {
  transition: transform .3s;
}
.backing-item:hover .backing-icon { transform: scale(1.15) rotate(-5deg); }

/* ── Milestones ─────────────────────────────────────── */
.milestone-item {
  transition: transform .2s;
}
.milestone-item:hover { transform: translateX(6px); }
.milestone-item:hover .m-dot {
  box-shadow: 0 0 10px rgba(22,163,74,.6);
}
.milestone-item:hover .upcoming-dot {
  box-shadow: 0 0 10px rgba(37,99,235,.6);
}

.market-stat {
  transition: background .3s;
}
.market-stat:hover { background: var(--dark-3); }
.market-num {
  transition: transform .2s;
}
.market-stat:hover .market-num { transform: scale(1.05); }

/* ── Buttons ────────────────────────────────────────── */
.btn-primary {
  position: relative;
  overflow: hidden;
}
.btn-primary::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.15) 50%, transparent 100%);
  transform: translateX(-100%);
  transition: transform .4s;
}
.btn-primary:hover::after { transform: translateX(100%); }

/* ── Pull quote ─────────────────────────────────────── */
.pull-quote {
  transition: border-color .3s, background .3s;
}
.pull-quote:hover {
  border-color: var(--teal);
  background: rgba(29,78,216,.06);
}

/* ── Contact section ────────────────────────────────── */
.contact {
  position: relative;
  overflow: hidden;
}

/* ── Pilot banner ───────────────────────────────────── */
.pilot-banner {
  animation: glow-border 3s ease-in-out infinite alternate;
}
@keyframes glow-border {
  from { box-shadow: 0 0 0 0 rgba(29,78,216,0); }
  to   { box-shadow: 0 0 20px rgba(29,78,216,.3); }
}

/* ── Scroll progress bar ────────────────────────────── */
#scroll-progress {
  position: fixed;
  top: 0; left: 0;
  width: 0%;
  height: 3px;
  background: linear-gradient(90deg, var(--orange-lt), var(--orange));
  z-index: 200;
  transition: width .1s linear;
}

/* ── Smooth section separators ──────────────────────── */
.section-light,
.section-mid {
  position: relative;
}

/* ── Mouse-tracking glow on module cards ────────────── */
/* (handled via JS) */

/* =====================================================
   Interactive JS helpers (added via script)
   ===================================================== */