/* ============================================================
   Chronos — subtle motion
   Long, measured, ease-out. Fades and slow position shifts only.
   No bounce, no spring, no elastic.
   ============================================================ */

/* Default scroll-reveal target: small upward drift + fade.
   Applied by animations.js to common content blocks. */
[data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 720ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 720ms cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
[data-reveal].is-in {
  opacity: 1;
  transform: translateY(0);
}

/* Slightly different reveal style for headlines —
   they breathe rather than slide. */
[data-reveal="fade"] {
  transform: none;
}

/* Hero image — long ken-burns. Starts at 1.06, settles to 1.
   Pure scale, no panning — keeps the brand "measured" feel. */
.tp-hero-image-bg img {
  animation: chr-ken-burns 24s cubic-bezier(0.22, 1, 0.36, 1) both;
  transform-origin: 60% 45%;
}
@keyframes chr-ken-burns {
  from { transform: scale(1.08); }
  to   { transform: scale(1.0); }
}

/* Nav: hairline becomes more present as you scroll past the hero */
.tp-nav {
  transition:
    background-color 320ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 320ms cubic-bezier(0.22, 1, 0.36, 1),
    backdrop-filter 320ms cubic-bezier(0.22, 1, 0.36, 1),
    height 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
.tp-nav-logo img {
  transition: width 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
.tp-nav.is-scrolled {
  background-color: rgba(9,16,40, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* Buttons — slow brightness lift, no scale (per brand guide) */
.tp-btn {
  transition:
    background-color 240ms cubic-bezier(0.22, 1, 0.36, 1),
    color 240ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 240ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 240ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 160ms cubic-bezier(0.22, 1, 0.36, 1);
}
.tp-btn:hover { filter: brightness(1.04); }
.tp-btn:active { transform: translateY(1px); }

/* Nav links — underline grows from left, hairline weight only */
.tp-nav-links a {
  position: relative;
}
.tp-nav-links a::after {
  content: ""; position: absolute;
  left: 0; right: auto; bottom: -6px;
  height: 1px; width: 0;
  background: var(--accent);
  transition: width 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
.tp-nav-links a:hover::after,
.tp-nav-links a.active::after {
  width: 100%;
}

/* Scroll cue — slow vertical drift */
.scrollcue {
  position: relative;
}
.scrollcue::before {
  content: ""; position: absolute;
  left: 50%; bottom: -16px;
  width: 1px; height: 18px;
  background: linear-gradient(to bottom, var(--accent), transparent);
  transform: translateX(-50%);
  animation: chr-scroll-cue 2.4s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}
@keyframes chr-scroll-cue {
  0%   { opacity: 0; transform: translate(-50%, -6px); }
  40%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, 12px); }
}

/* Numbered list items — staggered reveal already covered by [data-reveal] */

/* Reduced motion: opt out of everything */
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .tp-hero-image-bg img { animation: none; }
  .scrollcue::before { animation: none; }
  .tp-nav, .tp-btn, .tp-nav-links a::after,
  .tp-approach-col { transition: none !important; }
  .tp-marquee-track { animation: none !important; }
}

/* ============================================================
   Extended motion
   - Marquee: horizontally scrolling rail
   - Underline grow: hairline strokes that animate in
   - Skyline drift: slow ken-burns on hero strip
   ============================================================ */

/* Marquee — horizontally scrolling rail of text */
.tp-marquee {
  overflow: hidden;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  padding: 22px 0;
  background: var(--bg);
  --marquee-duration: 38s;
}
.tp-marquee-track {
  display: inline-flex;
  white-space: nowrap;
  animation: chr-marquee var(--marquee-duration) linear infinite;
  will-change: transform;
}
.tp-marquee-track:hover { animation-play-state: paused; }
.tp-marquee-item {
  display: inline-flex; align-items: center; gap: 24px;
  padding: 0 32px;
  font-family: var(--font-sans);
  font-size: clamp(28px, 3vw, 48px);
  font-weight: 200;
  letter-spacing: -0.01em;
  color: var(--fg);
  text-transform: none;
}
.tp-marquee-item .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  flex: 0 0 6px;
}
.tp-marquee-item.dim { color: var(--fg-3); }
@keyframes chr-marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* Stats — number counts up softly via opacity drift on enter */
[data-reveal] .tp-stat .n,
.tp-stats [data-reveal] .n { transition: color 720ms cubic-bezier(0.22, 1, 0.36, 1); }

/* Hairline rule grow — for the rule element inside .tp-rail */
.tp-rail[data-reveal] .rule {
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 720ms cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(var(--reveal-delay, 0ms) + 120ms);
}
.tp-rail[data-reveal].is-in .rule { transform: scaleX(1); }

/* Hero text — subtle drift up on initial render (handled by data-reveal),
   plus tiny continuous breathe on the accent word */
.tp-hero-image-headline h1 .accent {
  display: inline-block;
  animation: chr-breathe 6s cubic-bezier(0.22, 1, 0.36, 1) infinite;
  transform-origin: center;
}
@keyframes chr-breathe {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-2px); }
}

/* Skyline strip — a slow, almost imperceptible drift of the image */
.tp-skyline > img {
  animation: chr-skyline-drift 32s cubic-bezier(0.22, 1, 0.36, 1) both;
  transform-origin: 30% 60%;
}
@keyframes chr-skyline-drift {
  from { transform: scale(1.08); }
  to   { transform: scale(1.0); }
}

/* Tier / material card lift — already styled per-component, this is the timing */
.tp-tier, .tp-material {
  transition:
    transform 480ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 480ms cubic-bezier(0.22, 1, 0.36, 1);
}
.tp-tier:hover { transform: translateY(-3px); }
.tp-material:hover { transform: translateY(-3px); }