/* ═══════════════════════════════════════════════════════════════════
   Thynk Cloud — Feel Polish v2 (cohesion layer)
   Principle: award-level feel = ONE easing family, ONE rhythm,
   fewer things moving at once, and zero wasted rendering.
   Additive + reversible: remove this file and the site is unchanged.
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. PERF · below-the-fold sections render lazily ─────────────────
   The browser skips layout/paint for far-offscreen sections entirely.
   Biggest single Core-Web-Vitals win available without a build step. */
main > section:nth-of-type(n+6),
footer {
  content-visibility: auto;
  contain-intrinsic-size: auto 760px;
}

/* ── 2. MOTION COHESION · one easing curve everywhere ────────────────
   Mixed curves ("ease", "ease-in-out", custom) read as noise.
   Everything now decelerates on the same expo-out curve. */
:root { --tc-ease-out: cubic-bezier(0.16, 1, 0.3, 1); }

.reveal {
  transition-duration: 0.7s, 0.7s;
  transition-timing-function: var(--tc-ease-out), var(--tc-ease-out);
}
.tilt-card, .magnetic-wrap, .social-3d, .tc-partner-chip {
  transition-timing-function: var(--tc-ease-out);
}

/* ── 3. TYPOGRAPHY RHYTHM ────────────────────────────────────────────
   Balanced headline rag + no orphan words in body copy.
   These two lines are the cheapest "expensive look" in CSS. */
main h1, main h2, main h3, main [role="heading"] { text-wrap: balance; }
main p { text-wrap: pretty; }

@media (min-width: 1100px) {
  main section h2 { letter-spacing: -0.028em !important; }
}

/* Brand-green text selection — tiny, but people notice. */
::selection { background: rgba(45, 184, 75, 0.32); color: #eafff2; }

/* Anchor jumps (#contact etc.) land clear of the fixed nav. */
[id] { scroll-margin-top: 96px; }

/* ── 4. SCROLL DEPTH · hero orbs drift with scroll ───────────────────
   Progressive: browsers with scroll-driven animations get gentle
   parallax depth; everyone else sees the site exactly as before. */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    /* Composed with the ambient orb-drift loop (injected later by a
       component <style>), so higher specificity + both animations listed.
       tcOrb* animates `translate` (not `transform`) so the two effects
       stack instead of the later one clobbering the earlier. */
    #home .orb-1 { animation: orb-drift-1 18s ease-in-out 0s infinite, tcOrbA linear both; animation-timeline: auto, scroll(root); }
    #home .orb-2 { animation: orb-drift-2 22s ease-in-out 3s infinite, tcOrbB linear both; animation-timeline: auto, scroll(root); }
    #home .orb-3 { animation: orb-drift-3 26s ease-in-out 6s infinite, tcOrbC linear both; animation-timeline: auto, scroll(root); }
  }
}
@keyframes tcOrbA { to { translate: 0 -150px; } }
@keyframes tcOrbB { to { translate: 0 110px; } }
@keyframes tcOrbC { to { translate: -40px -80px; } }

/* ── 5. SIGNATURE FOCUS · offstage sections stop performing ──────────
   polish.js toggles .tc-offstage on sections that leave the viewport;
   their infinite loops (sheen sweeps, marquees, pulses, sparkles)
   pause instead of burning CPU/GPU behind the scroll. .reveal is
   excluded so scroll-driven entrances are never frozen mid-range. */
.tc-offstage *:not(.reveal) { animation-play-state: paused !important; }