/* =========================================================
   TLC — Design Upgrade Layer
   Enhanced animations, motion design, and visual language.
   Loaded after styles.css — selectively extends/overrides.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;1,9..144,300;1,9..144,400&family=JetBrains+Mono:wght@300;400;500&display=swap');

/* ── Design tokens ──────────────────────────────────────── */
:root {
  --du-display:         "Fraunces", "Cormorant Garamond", Georgia, serif;
  --du-mono:            "JetBrains Mono", ui-monospace, "Courier New", monospace;
  --du-brand-blue:      #174be1;
  --du-brand-blue-soft: #3d67fb;
  --du-ease-expo:       cubic-bezier(0.22, 1, 0.36, 1);
  --du-ease-drama:      cubic-bezier(0.83, 0, 0.17, 1);
}

/* ── Enhanced scroll reveals ────────────────────────────── */
.reveal {
  transition:
    opacity  0.9s var(--du-ease-expo),
    transform 0.9s var(--du-ease-expo);
}

.reveal-delay-1 { transition-delay: 80ms;  }
.reveal-delay-2 { transition-delay: 160ms; }
.reveal-delay-3 { transition-delay: 240ms; }
.reveal-delay-4 { transition-delay: 320ms; }

/* ── Hero background photo via CSS pseudo-element ──────── */
/* Restores the photo without needing an <img> in the HTML */
.hero--home .hero__bg::before {
  content: '';
  position: absolute;
  inset: -4%;
  width: 108%;
  height: 108%;
  background-image: url('https://images.unsplash.com/photo-1449157291145-7efd050a4d0e?q=80&w=2400&auto=format&fit=crop');
  background-size: cover;
  background-position: center;
  opacity: 0.62;
  z-index: 0;
  animation: du-bg-rise 18s ease-out forwards;
}

@keyframes du-bg-rise {
  from { transform: scale(1.1) translateY(18px); }
  to   { transform: scale(1.04) translateY(0);   }
}

/* ── Hero kicker label ──────────────────────────────────── */
.home-hero__kicker {
  display: block;
  font-family: var(--du-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--du-brand-blue-soft);
  margin-bottom: 1.25rem;
  opacity: 0;
  animation: du-fade-up 0.8s 0.5s var(--du-ease-expo) both;
}

/* ── Brand board card in hero rail ─────────────────────── */
.home-hero__brand-card {
  position: relative;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(5,7,13,0.35);
  overflow: hidden;
  padding: 20px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.home-hero__brand-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid rgba(23,75,225,0.18);
  pointer-events: none;
}

.home-hero__brand-image {
  width: 100%;
  height: auto;
  display: block;
}

/* ── Hero radial blue glow overlays ─────────────────────── */
.hero--home .hero__stage::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 15% 30%, rgba(23,75,225,0.14), transparent 46%),
    radial-gradient(ellipse at 85% 80%, rgba(61,103,251,0.08), transparent 40%);
  pointer-events: none;
  z-index: 1;
}

/* ── Hero scan line ─────────────────────────────────────── */
.hero-scan-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(61,103,251,0.55), transparent);
  pointer-events: none;
  z-index: 4;
  animation: du-scan 7s linear infinite;
}

@keyframes du-scan {
  0%   { top: -2%;   opacity: 0; }
  8%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { top: 102%;  opacity: 0; }
}

/* ── Film grain overlay ─────────────────────────────────── */
.hero-grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  opacity: 0.17;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.75'/></svg>");
}

/* ── Parallax grid overlay ──────────────────────────────── */
.hero-parallax-grid {
  position: absolute;
  inset: -5%;
  width: 110%;
  height: 110%;
  pointer-events: none;
  z-index: 2;
  will-change: transform;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse at center, #000 15%, transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 15%, transparent 72%);
}

/* ── Word-up hero title ─────────────────────────────────── */
.liminal-title {
  font-family: var(--du-display);
}

.liminal-title .line {
  display: block;
  overflow: hidden;
  padding: 0.04em 0 0.08em;
}

.liminal-title .word {
  display: inline-block;
  vertical-align: baseline;
  white-space: pre;
}

.liminal-title .word > span {
  display: inline-block;
  transform: translateY(110%);
  animation: du-word-up 1s var(--du-ease-drama) forwards;
  white-space: pre;
}

.liminal-title em {
  display: inline-block;
}

@keyframes du-word-up {
  to { transform: translateY(0); }
}

/* ── TypedCycle ─────────────────────────────────────────── */
.typed-cycle-container {
  display: inline-block;
  overflow: hidden;
  vertical-align: baseline;
  font-style: italic;
  color: var(--du-brand-blue-soft);
}

.typed-word {
  display: inline-block;
}

.typed-word.word-enter {
  animation: du-word-up 0.9s var(--du-ease-drama) both;
}

.typed-word.word-exit {
  animation: du-word-down 0.4s var(--du-ease-drama) forwards;
}

@keyframes du-word-down {
  from { transform: translateY(0);     }
  to   { transform: translateY(-110%); }
}

/* ── Hero fade-up: top marker row and meta strip ────────── */
.home-hero__top {
  animation: du-fade-up 1s 0.3s var(--du-ease-expo) both;
}

.home-hero__meta-item {
  animation: du-fade-up 1s 1.4s var(--du-ease-expo) both;
}

.home-hero__meta-item:nth-child(2) { animation-delay: 1.5s; }
.home-hero__meta-item:nth-child(3) { animation-delay: 1.6s; }
.home-hero__meta-item:nth-child(4) { animation-delay: 1.7s; }

@keyframes du-fade-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

/* ── Metric dial font upgrade ───────────────────────────── */
.metric-dial__value {
  font-family: var(--du-display);
  font-weight: 300;
  font-size: clamp(52px, 6vw, 80px);
  line-height: 1;
  letter-spacing: -0.04em;
}

/* ── Quote / manifesto font upgrade ─────────────────────── */
.quote-mega {
  font-family: var(--du-display);
  font-weight: 300;
  font-size: clamp(28px, 4.2vw, 66px);
  line-height: 1.08;
  letter-spacing: -0.025em;
}

.quote-mega em {
  font-style: italic;
  color: var(--du-brand-blue-soft);
}

/* ── Section label monospace ────────────────────────────── */
.section__label {
  font-family: var(--du-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

/* ── Capability card: active blue bottom line ───────────── */
.cap-card {
  position: relative;
  overflow: visible;
}

.cap-card::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  height: 2px;
  background: var(--du-brand-blue);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s var(--du-ease-expo);
}

.cap-card.is-active::after {
  transform: scaleX(1);
}

/* ── Stage card hover lift ──────────────────────────────── */
.home-stage-card {
  transition:
    transform  0.45s var(--du-ease-expo),
    box-shadow 0.45s var(--du-ease-expo);
}

.home-stage-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 48px rgba(5,7,13,0.1);
}

/* ── Insight tile hover lift ────────────────────────────── */
.insight-tile {
  transition: transform 0.4s var(--du-ease-expo);
}

.insight-tile:hover {
  transform: translateY(-4px);
}

/* ── Button arrow slide ─────────────────────────────────── */
.btn__arrow {
  display: inline-block;
  transition: transform 0.3s var(--du-ease-expo);
}

.btn:hover .btn__arrow {
  transform: translateX(6px);
}

/* ── Nav active pulse dot ───────────────────────────────── */
.nav__link {
  position: relative;
}

.nav__link.active::before {
  content: '';
  position: absolute;
  left: -12px;
  top: 50%;
  width: 6px;
  height: 6px;
  background: var(--du-brand-blue);
  border-radius: 50%;
  transform: translateY(-50%);
  animation: du-nav-pulse 2.4s ease-in-out infinite;
}

.nav--transparent .nav__link.active::before {
  background: var(--du-brand-blue-soft);
}

@keyframes du-nav-pulse {
  0%, 100% { transform: translateY(-50%) scale(1);   opacity: 1;   }
  50%       { transform: translateY(-50%) scale(1.6); opacity: 0.4; }
}

/* ── Footer ticker ──────────────────────────────────────── */
.footer-ticker {
  overflow: hidden;
  border-top: 1px solid rgba(255,255,255,0.13);
  border-bottom: 1px solid rgba(255,255,255,0.13);
  padding: 22px 0;
  margin-bottom: 72px;
  white-space: nowrap;
}

.footer-ticker:hover .footer-ticker-track {
  animation-play-state: paused;
}

.footer-ticker-track {
  display: inline-flex;
  gap: 48px;
  animation: du-ticker 38s linear infinite;
  white-space: nowrap;
}

@keyframes du-ticker {
  from { transform: translateX(0);    }
  to   { transform: translateX(-50%); }
}

.ticker-item {
  display: inline-flex;
  align-items: center;
  gap: 48px;
  font-family: var(--du-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(18px, 2vw, 26px);
  letter-spacing: -0.01em;
  color: rgba(255,255,255,0.82);
}

.ticker-item::after {
  content: '✦';
  font-size: 11px;
  color: var(--du-brand-blue-soft);
  font-style: normal;
}

/* ── Typography: display classes → Fraunces ─────────────── */
.display-xl, .display-lg, .display-md, .display-sm {
  font-family: var(--du-display);
}

/* ── Eyebrow labels → JetBrains Mono ────────────────────── */
.hero__eyebrow {
  font-family: var(--du-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

/* ── Enhanced reveal transition easing ──────────────────── */
.reveal {
  transition:
    opacity  0.9s var(--du-ease-expo),
    transform 0.9s var(--du-ease-expo);
}

/* ── Page hero parallax ──────────────────────────────────── */
/* overflow:hidden clips the extended ::before during scroll */
.page-hero {
  overflow: hidden;
}

/* Extend below so the downward-translate parallax doesn't
   clip at the bottom; ratio×px is always a valid <length>. */
.page-hero::before {
  bottom: -80px;
  will-change: transform;
  transform: translateY(calc(var(--page-scroll, 0) * 50px));
}

/* Page-hero shell: subtle scale + fade as it exits the viewport.
   ratio × number = number (valid for scale/opacity)
   ratio × px     = px     (valid for translateY)            */
.page-hero__shell {
  position: relative;
  will-change: transform, opacity;
  transform:
    scale(calc(1 - var(--page-scroll, 0) * 0.06))
    translateY(calc(var(--page-scroll, 0) * -32px));
  opacity: calc(1 - var(--page-scroll, 0) * 0.45);
}

/* ── Page hero: scan line + grain on dark variant ────────── */
.page-hero--dark .page-hero__shell .hero-scan-line {
  z-index: 10;
}

.page-hero--dark .page-hero__shell .hero-grain {
  z-index: 9;
  opacity: 0.12;
}

/* Sand variant: very subtle grain, no scan line */
.page-hero--sand .page-hero__shell .hero-scan-line {
  display: none;
}

.page-hero--sand .page-hero__shell .hero-grain {
  z-index: 9;
  opacity: 0.06;
  mix-blend-mode: multiply;
}

/* ── Page hero: dark heading + eyebrow colour ────────────── */
.page-hero--dark .hero__eyebrow {
  color: var(--du-brand-blue-soft);
}

.page-hero--dark .display-lg em,
.page-hero--dark .display-md em {
  color: var(--du-brand-blue-soft);
  font-style: italic;
}

/* ── Home hero: improved bg parallax depth ───────────────── */
/* Background moves at ~40% of stage speed for extra depth */
.hero--home .hero__bg {
  transform:
    translateY(calc(var(--hero-progress, 0) * 28px))
    scale(calc(1 - var(--hero-progress, 0) * 0.04));
}

/* ── Reduced motion: disable all new animations ─────────── */
@media (prefers-reduced-motion: reduce) {
  .hero__bg-photo,
  .hero-scan-line,
  .home-hero__top,
  .home-hero__meta-item,
  .liminal-title .word > span,
  .typed-word,
  .footer-ticker-track {
    animation: none !important;
  }

  .liminal-title .word > span {
    transform: none !important;
  }

  .home-hero__top,
  .home-hero__meta-item {
    opacity: 1 !important;
  }

  .page-hero::before { transform: none !important; }
  .page-hero__shell  { transform: none !important; opacity: 1 !important; }
}

/* Homepage hero final override. This is the active Vite site's hero source of truth. */
/* display:block kills the flex/justify-content:flex-end from .hero base class which
   would otherwise push the sticky stage to the bottom of the 170svh section. */
.hero--home {
  display: block;
  min-height: 170svh;
  padding: 0;
  overflow: visible;
  background: linear-gradient(180deg, var(--charcoal) 0%, var(--charcoal) 54%, var(--sand) 100%);
  color: var(--white);
}

.hero--home .hero__stage {
  position: sticky;
  top: 0;
  width: calc(100% - ((min(14vw, 176px) * 2) * var(--hero-progress)));
  min-height: 100svh;
  height: 100svh;
  overflow: hidden;
  margin-inline: auto;
  border: 1px solid rgba(255, 255, 255, calc(0.14 * var(--hero-progress)));
  border-radius: calc(34px * var(--hero-progress));
  background:
    linear-gradient(135deg, rgba(21, 27, 25, 0.98), rgba(45, 45, 45, 0.92) 52%, rgba(84, 112, 90, 0.88)),
    var(--charcoal);
  opacity: calc(1 - (0.18 * var(--hero-progress)));
  transform: translateY(calc(58px * var(--hero-progress))) scale(calc(1 - (0.1 * var(--hero-progress))));
  transform-origin: center center;
  isolation: isolate;
}

.hero--home .hero__content {
  position: absolute;
  inset: 0;
  z-index: 10;
  width: 100%;
  max-width: none;
  min-height: 0;
  margin: 0;
  padding: 0;
  display: block;
}

.home-hero {
  position: absolute;
  top: calc(var(--nav-height) + clamp(1.25rem, 4vh, 2.75rem));
  left: 50%;
  width: min(calc(100% - 4rem), var(--max-width));
  min-height: 0;
  display: block;
  opacity: calc(1 - (0.52 * var(--hero-progress)));
  transform: translateX(-50%) translateY(calc(-18px * var(--hero-progress)));
}

.home-hero__top {
  margin-bottom: clamp(1rem, 2.2vh, 1.45rem);
  width: 100%;
}

.home-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(300px, 0.68fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  min-height: 0;
  padding-block: 0;
}

.home-hero__title {
  max-width: 760px;
  margin-bottom: clamp(1rem, 2vh, 1.35rem);
  font-size: clamp(3.6rem, 6.1vw, 5.35rem);
  line-height: 0.98;
  letter-spacing: 0;
}

.home-hero__meta {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin-top: clamp(1.2rem, 2.8vh, 2rem);
  padding-top: clamp(0.85rem, 1.8vh, 1.15rem);
}

@media (max-height: 820px) and (min-width: 769px) {
  .home-hero {
    top: calc(var(--nav-height) + 1rem);
  }

  .home-hero__title {
    font-size: clamp(3.15rem, 5.3vw, 4.35rem);
  }

  .home-hero__rail {
    width: min(100%, 360px);
  }
}

@media (max-width: 768px) {
  .hero--home {
    min-height: 150svh;
  }

  .hero--home .hero__stage {
    width: calc(100% - ((min(8vw, 44px) * 2) * var(--hero-progress)));
    border-radius: calc(24px * var(--hero-progress));
    transform: translateY(calc(26px * var(--hero-progress))) scale(calc(1 - (0.08 * var(--hero-progress))));
  }

  .home-hero {
    top: calc(var(--nav-height) + 2rem);
    left: var(--gutter);
    right: var(--gutter);
    width: auto;
    transform: translateY(calc(-10px * var(--hero-progress)));
  }

  .home-hero__grid,
  .home-hero__meta {
    grid-template-columns: 1fr;
  }

  .home-hero__rail,
  .hero--home .hero__scroll {
    display: none;
  }
}

/* Hero placement fix: anchor the opening content below the nav, never mid-screen. */
.hero--home .hero__content {
  position: absolute;
  inset: 0;
  z-index: 10;
  width: 100%;
  max-width: none;
  min-height: 0;
  padding: 0;
  display: block;
}

.hero--home .home-hero {
  position: absolute;
  top: calc(var(--nav-height) + 1.25rem) !important;
  left: 50%;
  width: min(calc(100% - 4rem), var(--max-width));
  min-height: 0;
  display: block;
  opacity: calc(1 - (0.36 * var(--hero-progress)));
  transform: translateX(-50%) translateY(calc(-18px * var(--hero-progress)));
}

.hero--home .home-hero__top {
  margin-bottom: clamp(1rem, 2vh, 1.35rem);
}

.hero--home .home-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(280px, 0.64fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}

.hero--home .home-hero__title {
  font-size: clamp(3rem, 5.2vw, 4.75rem);
}

.hero--home .home-hero__meta {
  margin-top: clamp(1rem, 2.4vh, 1.75rem);
}

@media (max-height: 820px) and (min-width: 769px) {
  .hero--home .home-hero {
    top: calc(var(--nav-height) + 1rem) !important;
  }

  .hero--home .home-hero__title {
    font-size: clamp(2.75rem, 4.7vw, 4rem);
  }

  .hero--home .home-hero__subtitle,
  .hero--home .home-hero__note {
    font-size: 0.96rem;
    line-height: 1.5;
  }

  .hero--home .home-hero__brand-card {
    max-width: 320px;
    margin-left: auto;
  }
}

@media (max-width: 768px) {
  .hero--home .home-hero {
    top: calc(var(--nav-height) + 1.5rem);
    left: var(--gutter);
    right: var(--gutter);
    width: auto;
    transform: translateY(calc(-10px * var(--hero-progress)));
  }
}