/* ============================================================
   ADDITIONS — richer motion, new components
   Appended after main.css. Transform/opacity only, so every
   animation stays on the compositor.
   ============================================================ */

/* ── Scroll progress ───────────────────────────────────── */
.progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px;
  z-index: 90; pointer-events: none;
  background: linear-gradient(90deg, var(--gold), #E4CE85);
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .08s linear;
}

/* ── Ambient cursor light (desktop only) ───────────────── */
.glow {
  position: fixed; width: 480px; height: 480px;
  border-radius: 50%; pointer-events: none; z-index: 0;
  background: radial-gradient(circle, rgba(201,168,76,.055) 0%, transparent 68%);
  transform: translate(-50%, -50%);
  transition: opacity .5s ease;
  opacity: 0;
}
@media (hover: hover) and (pointer: fine) and (min-width: 62rem) {
  .glow.on { opacity: 1; }
}
main, .masthead, .foot { position: relative; z-index: 1; }

/* ── Headline word reveal ──────────────────────────────── */
.reveal-words .w {
  display: inline-block;
  opacity: 0;
  transform: translateY(.5em) rotate(2deg);
  animation: wordIn .8s cubic-bezier(.22,.9,.28,1) forwards;
}
@keyframes wordIn { to { opacity: 1; transform: none; } }

/* ── Directional reveals ───────────────────────────────── */
[data-rise-l], [data-rise-r], [data-scale] {
  opacity: 0;
  transition: opacity .85s cubic-bezier(.22,.9,.28,1),
              transform .85s cubic-bezier(.22,.9,.28,1);
}
[data-rise-l] { transform: translateX(-26px); }
[data-rise-r] { transform: translateX(26px); }
[data-scale]  { transform: scale(.965); }
[data-rise-l].in, [data-rise-r].in, [data-scale].in { opacity: 1; transform: none; }

/* Stagger children of a revealed container */
[data-seq] > * {
  opacity: 0; transform: translateY(18px);
  transition: opacity .7s cubic-bezier(.22,.9,.28,1),
              transform .7s cubic-bezier(.22,.9,.28,1);
}
[data-seq].in > * { opacity: 1; transform: none; }
[data-seq].in > *:nth-child(1) { transition-delay: .04s; }
[data-seq].in > *:nth-child(2) { transition-delay: .12s; }
[data-seq].in > *:nth-child(3) { transition-delay: .20s; }
[data-seq].in > *:nth-child(4) { transition-delay: .28s; }
[data-seq].in > *:nth-child(5) { transition-delay: .36s; }
[data-seq].in > *:nth-child(6) { transition-delay: .44s; }

/* ── Section index ─────────────────────────────────────── */
.sec-head { display: flex; align-items: baseline; gap: 1rem; margin-bottom: 1.6rem; }
.sec-idx {
  font-family: var(--mono); font-size: .7rem; color: var(--gold);
  letter-spacing: .1em; flex-shrink: 0; padding-top: .2rem;
}
.sec-rule { flex: 1; height: 1px; background: var(--line); }

/* ── Numbers strip ─────────────────────────────────────── */
.figures {
  display: grid; gap: 1px;
  background: var(--line);
  border-block: 1px solid var(--line);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 52rem) { .figures { grid-template-columns: repeat(4, 1fr); } }

.figure { background: var(--ink); padding: 1.8rem 1.2rem; text-align: center; }
.figure .n {
  font-family: var(--display); font-size: clamp(2rem, 5vw, 2.9rem);
  color: var(--gold); line-height: 1; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.figure .k {
  font-family: var(--mono); font-size: .64rem; letter-spacing: .11em;
  text-transform: uppercase; color: var(--muted); margin-top: .7rem; display: block;
  line-height: 1.5;
}

/* ── Magnetic buttons (desktop) ────────────────────────── */
@media (hover: hover) and (pointer: fine) {
  .btn { will-change: transform; }
}

/* ── Currently block ───────────────────────────────────── */
.now { border-top: 1px solid var(--line); }
.now-item {
  display: grid; gap: .35rem 1.5rem; padding: 1.1rem 0;
  border-bottom: 1px solid var(--line); grid-template-columns: 1fr;
  align-items: baseline;
}
@media (min-width: 44rem) { .now-item { grid-template-columns: 8.5rem 1fr; } }
.now-item dt {
  font-family: var(--mono); font-size: .66rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--gold);
}
.now-item dd { margin: 0; font-size: var(--step--1); color: var(--muted); }
.now-item dd strong { color: var(--bone); font-weight: 500; }

/* ── Tech ticker ───────────────────────────────────────── */
.ticker {
  overflow: hidden; border-block: 1px solid var(--line);
  padding-block: .9rem; position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.ticker-track { display: flex; gap: 2.6rem; width: max-content; animation: slide 34s linear infinite; }
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker span {
  font-family: var(--mono); font-size: .78rem; letter-spacing: .08em;
  color: var(--muted); white-space: nowrap; text-transform: uppercase;
}
.ticker span::before { content: "◦"; color: var(--gold); margin-right: 2.6rem; }
@keyframes slide { to { transform: translateX(-50%); } }

/* ── Proof list, upgraded ──────────────────────────────── */
.proof-link { position: relative; overflow: hidden; }
.proof-link::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--gold); transform: scaleY(0); transform-origin: 50% 0;
  transition: transform .4s cubic-bezier(.22,.9,.28,1);
}
.proof-link:hover::before { transform: scaleY(1); }
.proof-link .arrow-out {
  opacity: 0; transform: translateX(-6px);
  transition: opacity .3s ease, transform .3s ease;
  color: var(--gold); font-family: var(--mono);
}
.proof-link:hover .arrow-out { opacity: 1; transform: none; }

/* ── Card hover lift, refined ──────────────────────────── */
.card { position: relative; overflow: hidden; }
.card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%),
              rgba(201,168,76,.055), transparent 42%);
  opacity: 0; transition: opacity .35s ease; pointer-events: none;
}
.card:hover::after { opacity: 1; }

/* ── Reading progress on case studies ──────────────────── */
.readbar {
  position: sticky; top: 0; z-index: 45; height: 2px;
  background: var(--line); margin-bottom: -2px;
}
.readbar i {
  display: block; height: 100%; width: 0;
  background: var(--gold); transition: width .1s linear;
}

/* ── Quiet motion for those who ask for it ─────────────── */
@media (prefers-reduced-motion: reduce) {
  .reveal-words .w { opacity: 1; transform: none; animation: none; }
  [data-rise-l], [data-rise-r], [data-scale], [data-seq] > * { opacity: 1; transform: none; }
  .ticker-track { animation: none; }
  .glow { display: none; }
  .progress { transition: none; }
}