/* motion-v2.css — Enhanced motion + transition layer for landing page.
   Loaded after styles-v2.css to layer on top of base styles. */

/* ─────────── Scroll progress bar ─────────── */
.tb-scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px;
  z-index: 9999; pointer-events: none;
  background: transparent;
}
.tb-scroll-progress > i {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--coral), var(--teal), var(--plum));
  transform-origin: 0 50%; transform: scaleX(0);
  transition: transform .15s linear;
  box-shadow: 0 0 10px var(--coral);
}

/* ─────────── Cursor glow (subtle radial follow) ─────────── */
.tb-cursor-glow {
  position: fixed; pointer-events: none; z-index: 1;
  width: 480px; height: 480px; border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, color-mix(in oklab, var(--coral) 18%, transparent) 0%, transparent 60%);
  mix-blend-mode: screen;
  opacity: 0; transition: opacity 1s ease;
  filter: blur(40px);
}
.tb-cursor-glow.on { opacity: 0.85; }
@media (max-width: 980px) { .tb-cursor-glow { display: none; } }
@media (prefers-reduced-motion: reduce) { .tb-cursor-glow { display: none; } }

/* ─────────── Hero parallax (orchestra responds to scroll) ─────────── */
.tb-hero { perspective: 1000px; }
.tb-hero-grid > div:last-child { will-change: transform; }

/* ─────────── Section gradient bleeds (smooth section transitions) ─────────── */
.tb-section-bleed {
  position: relative;
}
.tb-section-bleed::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 120px;
  background: linear-gradient(180deg, transparent, color-mix(in oklab, var(--coral) 4%, transparent) 50%, transparent);
  pointer-events: none; z-index: 1;
}

/* ─────────── Enhanced reveals with stagger + blur ─────────── */
html.tb-reveal-ready .tb-reveal {
  opacity: 0;
  transform: translateY(28px);
  filter: blur(8px);
  transition: opacity .9s cubic-bezier(.2,.8,.2,1),
              transform .9s cubic-bezier(.2,.8,.2,1),
              filter .9s cubic-bezier(.2,.8,.2,1);
}
html.tb-reveal-ready .tb-reveal.in {
  opacity: 1; transform: none; filter: blur(0);
}

/* Staggered children: any direct child gets +.06s delay per index */
.tb-reveal-stack > * { transition-delay: 0s; }
.tb-reveal-stack.in > *:nth-child(1) { transition-delay: 0s; }
.tb-reveal-stack.in > *:nth-child(2) { transition-delay: .08s; }
.tb-reveal-stack.in > *:nth-child(3) { transition-delay: .16s; }
.tb-reveal-stack.in > *:nth-child(4) { transition-delay: .24s; }
.tb-reveal-stack.in > *:nth-child(5) { transition-delay: .32s; }
.tb-reveal-stack.in > *:nth-child(6) { transition-delay: .4s; }
.tb-reveal-stack.in > *:nth-child(7) { transition-delay: .48s; }

/* Rise variant: dramatic upward sweep */
html.tb-reveal-ready .tb-reveal-rise {
  opacity: 0; transform: translateY(64px) scale(0.96); filter: blur(12px);
  transition: opacity 1.1s cubic-bezier(.2,.8,.2,1),
              transform 1.1s cubic-bezier(.2,.8,.2,1),
              filter 1.1s cubic-bezier(.2,.8,.2,1);
}
html.tb-reveal-ready .tb-reveal-rise.in { opacity: 1; transform: none; filter: blur(0); }

/* Slide-in variants */
html.tb-reveal-ready .tb-reveal-l { transform: translateX(-40px); }
html.tb-reveal-ready .tb-reveal-l.in { transform: none; }
html.tb-reveal-ready .tb-reveal-r { transform: translateX(40px); }
html.tb-reveal-ready .tb-reveal-r.in { transform: none; }

/* ─────────── Hero headline char-by-char animation ─────────── */
.tb-hero h1 .charword { display: inline-block; }
.tb-hero h1 .ch {
  display: inline-block; opacity: 0;
  transform: translateY(60%) rotate(8deg);
  transition: opacity .8s cubic-bezier(.2,.8,.2,1), transform .8s cubic-bezier(.2,.8,.2,1);
}
.tb-hero h1.tb-typed .ch { opacity: 1; transform: none; }

/* ─────────── Magnetic button ─────────── */
.tb-btn { will-change: transform; transition: transform .3s cubic-bezier(.2,.8,.2,1), background .25s, border-color .25s, box-shadow .3s, color .25s; }
.tb-btn:hover { transform: translateY(-2px); }

/* ─────────── Animated counter ─────────── */
.tb-counters {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-top: 80px;
}
@media (max-width: 720px) { .tb-counters { grid-template-columns: 1fr 1fr; } }
.tb-counter {
  background: var(--bg);
  padding: 36px 24px;
  display: flex; flex-direction: column; gap: 10px;
  position: relative;
}
.tb-counter::after {
  content: ""; position: absolute; left: 0; top: 0; height: 2px; width: 0;
  background: linear-gradient(90deg, var(--coral), var(--teal));
  transition: width 1.2s cubic-bezier(.2,.8,.2,1);
}
.tb-counter.in::after { width: 100%; }
.tb-counter .num {
  font-family: 'Source Serif 4', serif;
  font-weight: 300;
  font-size: clamp(40px, 5vw, 64px);
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.tb-counter .num .it { font-style: italic; background: linear-gradient(110deg, var(--coral), var(--teal)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.tb-counter .num .suffix { font-style: italic; color: var(--coral); }
.tb-counter .lbl {
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.tb-counter .desc { color: var(--ink-2); font-size: 13px; line-height: 1.5; margin-top: 4px; }

/* ─────────── Big numerical stat moment ─────────── */
.tb-stat-moment {
  padding: 140px 0 100px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.tb-stat-moment::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(ellipse 60% 50% at 50% 50%, color-mix(in oklab, var(--coral) 18%, transparent), transparent 70%);
  filter: blur(60px);
}
.tb-stat-moment .big {
  font-family: 'Source Serif 4', serif;
  font-weight: 200;
  font-size: clamp(120px, 18vw, 280px);
  line-height: 0.9;
  letter-spacing: -0.05em;
  background: linear-gradient(180deg, var(--ink) 30%, var(--coral) 70%, var(--teal));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  font-feature-settings: "ss01";
}
.tb-stat-moment .big .it { font-style: italic; }
.tb-stat-moment .cap {
  font-family: 'Geist Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 24px;
}
.tb-stat-moment .sub {
  font-family: 'Source Serif 4', serif;
  font-style: italic;
  font-size: clamp(18px, 2vw, 24px);
  color: var(--ink-2);
  margin: 24px auto 0;
  max-width: 56ch;
  line-height: 1.5;
}

/* ─────────── Scroll-linked rotation for dot/orb on hero ─────────── */
.tb-hero[data-scroll] .tb-orchestra .ring.r1 { animation-duration: 18s; }

/* ─────────── Marquee enhanced (faster on hover) ─────────── */
.tb-marquee:hover .tb-marquee-track { animation-play-state: paused; }

/* ─────────── Spotlight sweep on cards ─────────── */
.tb-feat, .tb-card {
  position: relative;
  overflow: hidden;
}
.tb-feat::after, .tb-card::after {
  content: ""; position: absolute;
  width: 600px; height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in oklab, var(--coral) 10%, transparent) 0%, transparent 60%);
  pointer-events: none;
  opacity: 0; transition: opacity .4s;
  left: var(--mx, 50%); top: var(--my, 50%);
  transform: translate(-50%, -50%);
}
.tb-feat:hover::after, .tb-card:hover::after { opacity: 1; }

/* ─────────── Section divider ─────────── */
.tb-section-divider {
  position: relative;
  height: 200px;
  display: flex; align-items: center; justify-content: center;
}
.tb-section-divider::before {
  content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px;
  background: linear-gradient(180deg, transparent, var(--line) 30%, var(--line) 70%, transparent);
}
.tb-section-divider .pill {
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: 8px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg);
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; gap: 8px;
}
.tb-section-divider .pill::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--coral);
  box-shadow: 0 0 8px var(--coral);
  animation: tb-blink 1.6s ease-in-out infinite;
}

/* ─────────── Quote moment (massive editorial) ─────────── */
.tb-quote {
  padding: 120px 0;
  text-align: left;
  position: relative;
}
.tb-quote blockquote {
  font-family: 'Source Serif 4', serif;
  font-weight: 300;
  font-style: italic;
  font-size: clamp(36px, 5.5vw, 80px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin: 0 0 36px;
  max-width: 22ch;
  color: var(--ink);
  text-wrap: balance;
}
.tb-quote blockquote .em {
  font-style: normal;
  background: linear-gradient(110deg, var(--coral), var(--teal));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.tb-quote .who {
  font-family: 'Geist Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: flex; align-items: center; gap: 14px;
}
.tb-quote .who::before {
  content: ""; width: 32px; height: 1px; background: var(--coral);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .tb-scroll-progress > i { transition: none; }
  html.tb-reveal-ready .tb-reveal,
  html.tb-reveal-ready .tb-reveal-rise,
  html.tb-reveal-ready .tb-reveal-l,
  html.tb-reveal-ready .tb-reveal-r {
    opacity: 1; transform: none; filter: none; transition: none;
  }
}