/* ================================================================
   StartupLab — Motion System
   Shared motion tokens, scroll-reveal primitives, hover
   micro-interactions, and hero choreography.
   Loaded on every page, after shared.css.
   ================================================================ */

:root {
  /* Easing */
  --ease-premium: cubic-bezier(0.22, 1, 0.36, 1);

  /* Durations */
  --dur-fast: 200ms;
  --dur-standard: 380ms;
  --dur-large: 700ms;
  --dur-hero: 1400ms;
}

/* ================================================================
   Scroll-reveal primitives
   Apply via motion.js (auto) or manually with class names below.
   Stagger is controlled with the --reveal-delay custom property,
   set inline by motion.js based on sibling order.
   ================================================================ */
.reveal,
.reveal-scale,
.reveal-img {
  transition-delay: var(--reveal-delay, 0ms);
}

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--dur-large) var(--ease-premium),
              transform var(--dur-large) var(--ease-premium);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-scale {
  opacity: 0;
  transform: scale(0.95);
  transition: opacity var(--dur-large) var(--ease-premium),
              transform var(--dur-large) var(--ease-premium);
  will-change: opacity, transform;
}
.reveal-scale.is-visible {
  opacity: 1;
  transform: scale(1);
}

/* Image reveal: fade + gentle scale settle */
.reveal-img {
  opacity: 0;
  transform: scale(1.04);
  transition: opacity var(--dur-hero) var(--ease-premium),
              transform var(--dur-hero) var(--ease-premium);
  will-change: opacity, transform;
}
.reveal-img.is-visible {
  opacity: 1;
  transform: scale(1);
}

/* ================================================================
   Navigation — scroll state
   ================================================================ */
header.site-header {
  /* backdrop-filter is intentionally excluded from this transition —
     animating blur radius on a sticky, composited element causes
     ghosting/smearing artifacts in Chromium. It switches instantly. */
  transition: background-color var(--dur-standard) var(--ease-premium),
              box-shadow var(--dur-standard) var(--ease-premium),
              border-color var(--dur-standard) var(--ease-premium);
}
header.site-header.is-scrolled {
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04), 0 12px 32px -16px rgba(15, 23, 42, 0.12);
}

/* ================================================================
   Navigation — link micro-interactions
   ================================================================ */
.nav-links > a,
.nav-dropdown-trigger {
  position: relative;
  transition: color var(--dur-fast) var(--ease-premium),
              background var(--dur-fast) var(--ease-premium),
              transform var(--dur-fast) var(--ease-premium);
}
.nav-links > a:hover,
.nav-dropdown-trigger:hover {
  transform: translateY(-2px);
}
.nav-links > a.active,
.nav-dropdown-trigger.active {
  transform: translateY(0);
}
/* ================================================================
   Buttons — lift + soft glow
   ================================================================ */
.btn {
  transition: transform var(--dur-fast) var(--ease-premium),
              box-shadow var(--dur-fast) var(--ease-premium),
              background var(--dur-fast) var(--ease-premium),
              border-color var(--dur-fast) var(--ease-premium);
}
.btn:hover {
  transform: translateY(-2px);
}
.btn-primary:hover {
  box-shadow: 0 12px 28px -8px rgba(49, 94, 239, 0.45), 0 0 0 1px rgba(49, 94, 239, 0.08);
}
.btn-outline:hover {
  box-shadow: 0 8px 20px -10px rgba(15, 23, 42, 0.15);
}
.btn-on-blue:hover {
  box-shadow: 0 12px 28px -8px rgba(0, 0, 0, 0.25);
}

/* Magnetic targets (transform applied by motion.js) */
[data-magnetic] {
  transition: transform var(--dur-fast) var(--ease-premium);
}

/* ================================================================
   Cards — lift + border glow on hover
   ================================================================ */
.feature-card, .price-card, .service-card, .step-card, .partner-panel,
.svc-card, .flagship-card, .growth-col, .event-card, .program-card,
.member-card, .blog-card, .resource-card {
  transition: transform var(--dur-large) var(--ease-premium),
              box-shadow var(--dur-large) var(--ease-premium),
              border-color var(--dur-large) var(--ease-premium);
}
.feature-card:hover, .price-card:hover, .service-card:hover, .step-card:hover,
.partner-panel:hover, .svc-card:hover, .flagship-card:hover, .growth-col:hover,
.event-card:hover, .program-card:hover, .member-card:hover, .blog-card:hover,
.resource-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 48px -16px rgba(15, 23, 42, 0.12);
  border-color: var(--primary-200);
}

/* "Most Popular" / featured plan card — slow, calm glow pulse */
.price-card.featured,
.plan-card.featured {
  position: relative;
  isolation: isolate;
  animation: motion-featured-glow 8s ease-in-out infinite;
}
.price-card.featured:hover,
.plan-card.featured:hover {
  transform: translateY(-6px);
}
@keyframes motion-featured-glow {
  0%, 100% { box-shadow: 0 0 0 1px var(--primary-200), 0 20px 25px -5px rgba(0,0,0,0.10), 0 8px 10px -6px rgba(0,0,0,0.10); }
  50% { box-shadow: 0 0 0 1px var(--primary-300), 0 0 32px -4px rgba(49,94,239,0.35), 0 20px 25px -5px rgba(0,0,0,0.10), 0 8px 10px -6px rgba(0,0,0,0.10); }
}

/* ================================================================
   Images — layered hover (community / gallery cards)
   ================================================================ */
.community-imgs img,
.gallery-collage img,
.event-card img,
.community-hero-img img {
  transition: transform var(--dur-large) var(--ease-premium);
}
.community-imgs a:hover img,
.event-card:hover img {
  transform: scale(1.03);
}

/* ================================================================
   Footer — soft entrance + social hover
   ================================================================ */
.footer-demo {
  transition: opacity var(--dur-large) var(--ease-premium);
}
.footer-bottom .socials a,
.social-btn {
  display: inline-flex;
  transition: transform var(--dur-fast) var(--ease-premium),
              color var(--dur-fast) var(--ease-premium),
              text-shadow var(--dur-fast) var(--ease-premium),
              border-color var(--dur-fast) var(--ease-premium),
              background var(--dur-fast) var(--ease-premium);
}
.footer-bottom .socials a:hover {
  transform: translateY(-2px);
  color: #fff;
  text-shadow: 0 0 16px rgba(74, 114, 241, 0.55);
}
.social-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px -8px rgba(49, 94, 239, 0.35);
}

/* ================================================================
   Partner / university logos — grayscale to color
   ================================================================ */
.logo-row img,
.uni-logos img,
.partner-panel img {
  filter: grayscale(1) opacity(0.55);
  transition: filter var(--dur-large) var(--ease-premium);
}
.logo-row img:hover,
.uni-logos img:hover,
.partner-panel img:hover {
  filter: grayscale(0) opacity(1);
}

/* ================================================================
   Stat counters
   ================================================================ */
.stat-num {
  font-variant-numeric: tabular-nums;
}

/* ================================================================
   Step / journey cards — connector line draw-in
   ================================================================ */
.step-card .connector-line {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-hero) var(--ease-premium);
  transition-delay: var(--reveal-delay, 0ms);
}
.step-card.is-visible .connector-line {
  transform: scaleX(1);
}
.step-card .step-num {
  transition: box-shadow var(--dur-standard) var(--ease-premium),
              transform var(--dur-standard) var(--ease-premium);
}
.step-card.is-visible .step-num {
  box-shadow: 0 0 0 6px var(--primary-50a);
}

/* ================================================================
   Hero — headline reveal, background glow, CTA entrance
   ================================================================ */
.hero, .community-hero, .pricing-hero, .services-hero,
.ecosystem-hero, .about-hero, .contact-hero {
  position: relative;
}
.hero .container,
.community-hero .container,
.pricing-hero .container,
.services-hero .container,
.ecosystem-hero .container,
.about-hero .container,
.contact-hero .container {
  position: relative;
  z-index: 1;
}

.hero-glow {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(640px circle at 72% 38%, rgba(49, 94, 239, 0.14), transparent 65%);
  opacity: 0;
  animation: motion-glow-in 1.8s var(--ease-premium) forwards;
  animation-delay: 0.2s;
}
@keyframes motion-glow-in {
  to { opacity: 1; }
}

@keyframes motion-hero-in {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero-line {
  display: block;
  opacity: 0;
  transform: translateY(24px);
  animation: motion-hero-in 0.7s var(--ease-premium) forwards;
}
.hero-line:nth-of-type(1) { animation-delay: 0.05s; }
.hero-line:nth-of-type(2) { animation-delay: 0.18s; }
.hero-line:nth-of-type(3) { animation-delay: 0.31s; }
.hero-line:nth-of-type(4) { animation-delay: 0.44s; }

.hero p.lead, .hero .tagline, .hero-ctas, .hero-lead {
  opacity: 0;
  transform: translateY(20px);
  animation: motion-hero-in 0.7s var(--ease-premium) forwards;
}
.hero p.lead, .hero-lead { animation-delay: 0.56s; }
.hero .tagline { animation-delay: 0.64s; }
.hero-ctas { animation-delay: 0.72s; }

/* ================================================================
   Hero — ecosystem graphic choreography
   ================================================================ */
.hero-visual {
  perspective: 1000px;
}
.orbit-wrap {
  transition: transform 0.6s var(--ease-premium);
}

/* Center node — gentle float + breathe + glow pulse.
   Applied to the inner dot (not .orbit-node, which already owns the
   counter-spin animation — combining transform animations on the same
   element causes one to silently override the other). */
.dot.center-dot {
  animation: motion-node-breathe-float 6s ease-in-out infinite,
             motion-node-glow 4s ease-in-out infinite;
}
@keyframes motion-node-breathe-float {
  0%, 100% { transform: scale(1) translateY(0); }
  50% { transform: scale(1.03) translateY(-6px); }
}
@keyframes motion-node-glow {
  0%, 100% { box-shadow: 0 0 40px 12px rgba(49, 94, 239, 0.3); }
  50% { box-shadow: 0 0 56px 18px rgba(49, 94, 239, 0.45); }
}

/* Connection lines — soft fade-in on load (staggered via inline animation-delay) */
.orbit-svg line {
  opacity: 0;
  animation: motion-line-in 1s var(--ease-premium) forwards;
}
@keyframes motion-line-in {
  from { opacity: 0; }
  to   { opacity: var(--line-opacity, 0.4); }
}

/* Traveling light particles along connection lines */
.orbit-particle {
  filter: drop-shadow(0 0 3px currentColor);
}

/* Ecosystem nodes — sequential reveal on load.
   .orbit-node already has `animation: counter-spin-orbit ...` (transform);
   the entrance animation below only touches opacity, so it layers on top
   without a transform composite conflict. The scale-in lives on the
   inner .dot/label, which have no animation of their own. */
.orbit-node:not(.center) {
  animation: counter-spin-orbit 60s linear infinite,
             motion-orbit-fade-in 0.6s var(--ease-premium) forwards;
  opacity: 0;
}
.orbit-node:not(.center) .dot,
.orbit-node:not(.center) > span {
  animation: motion-orbit-scale-in 0.6s var(--ease-premium) forwards;
  transform: scale(0.95);
}
@keyframes motion-orbit-fade-in {
  to { opacity: 1; }
}
@keyframes motion-orbit-scale-in {
  to { transform: scale(1); }
}
.orbit-node:not(.center):nth-of-type(2), .orbit-node:not(.center):nth-of-type(2) .dot, .orbit-node:not(.center):nth-of-type(2) > span { animation-delay: 0.6s; }
.orbit-node:not(.center):nth-of-type(3), .orbit-node:not(.center):nth-of-type(3) .dot, .orbit-node:not(.center):nth-of-type(3) > span { animation-delay: 0.7s; }
.orbit-node:not(.center):nth-of-type(4), .orbit-node:not(.center):nth-of-type(4) .dot, .orbit-node:not(.center):nth-of-type(4) > span { animation-delay: 0.8s; }
.orbit-node:not(.center):nth-of-type(5), .orbit-node:not(.center):nth-of-type(5) .dot, .orbit-node:not(.center):nth-of-type(5) > span { animation-delay: 0.9s; }
.orbit-node:not(.center):nth-of-type(6), .orbit-node:not(.center):nth-of-type(6) .dot, .orbit-node:not(.center):nth-of-type(6) > span { animation-delay: 1.0s; }
.orbit-node:not(.center):nth-of-type(7), .orbit-node:not(.center):nth-of-type(7) .dot, .orbit-node:not(.center):nth-of-type(7) > span { animation-delay: 1.1s; }
.orbit-node:not(.center):nth-of-type(8), .orbit-node:not(.center):nth-of-type(8) .dot, .orbit-node:not(.center):nth-of-type(8) > span { animation-delay: 1.2s; }

/* ================================================================
   Tabbed / filterable content — fade-swap on selection change
   ================================================================ */
.jf-image, .jf-content, #eco-heading, #eco-subtext {
  transition: opacity var(--dur-standard) var(--ease-premium),
              transform var(--dur-standard) var(--ease-premium);
}
.tab-fade-out {
  opacity: 0;
  transform: translateY(8px);
}

/* ================================================================
   Page transitions
   ================================================================ */
body {
  opacity: 1;
  transition: opacity 0.35s var(--ease-premium);
}
body.motion-leaving {
  opacity: 0;
}

/* ================================================================
   Cursor glow follower (desktop only, decorative)
   ================================================================ */
.motion-cursor-glow {
  position: fixed;
  top: 0; left: 0;
  width: 480px; height: 480px;
  margin: -240px 0 0 -240px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(49, 94, 239, 0.10) 0%, rgba(49, 94, 239, 0) 70%);
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transition: opacity var(--dur-standard) var(--ease-premium);
  will-change: transform, opacity;
}
.motion-cursor-glow.is-active {
  opacity: 1;
}

/* ================================================================
   Reduced motion
   ================================================================ */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal, .reveal-scale, .reveal-img,
  body.motion-leaving {
    opacity: 1 !important;
  }
  .orbit-wrap, .orbit-node, .orbit-node.center .dot.center-dot,
  .orbit-node.center { animation: none !important; }
  .motion-cursor-glow { display: none !important; }
  .orbit-svg line { stroke-dashoffset: 0 !important; }
}

/* ================================================================
   Mobile — disable heavy/parallax-only effects
   ================================================================ */
@media (max-width: 768px), (hover: none) {
  .motion-cursor-glow { display: none !important; }
  .orbit-wrap { transform: none !important; }
}