/* ============================================================
   Covington Scroll FX — styles
   Tokens expected (define on :root or a wrapper):
   --navy #14276C  --navy-2 #1B3088  --navy-deep #0C1C52
   --gold #2A9D6E  --gold-soft #BFE3D2  --mint #34C295
   --ink #1a1a1a   --paper #fafaf7
   ============================================================ */

/* Fallback token defs so the plugin works even without theme vars */
.umph-marquee, .umph-manifesto, .umph-h {
  --navy: #14276C; --navy-2: #1B3088; --navy-deep: #0C1C52;
  --gold: #2A9D6E; --gold-soft: #BFE3D2; --mint: #34C295;
  --ink: #1a1a1a; --paper: #fafaf7;
}

/* shared helpers used by the gallery intro panel */
.umph-h .eyebrow.kicker {
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  letter-spacing: .15em; text-transform: uppercase; color: var(--gold);
  display: inline-flex; align-items: center; gap: 12px;
}
.umph-h .eyebrow.kicker::before { content:""; width: 32px; height: 1px; background: var(--gold); }
.umph-h .h-serif { font-family: 'Lora', Georgia, serif; font-weight: 600; letter-spacing: -.005em; }
.umph-h .h2 { font-size: 40px; line-height: 1.1; }
.umph-h .h-serif em { font-style: italic; font-weight: 500; color: var(--gold); }
.umph-h .body-copy { font-size: 16px; line-height: 1.7; }
/* intro title/desc default colours (moved off inline styles so Style controls can override) */
.umph-h .hx-intro-title { color: #fff; margin: 6px 0 0; }
.umph-h .hx-intro-desc { color: rgba(255,255,255,.72); }

/* 1 — VELOCITY MARQUEE */
.umph-marquee {
  background: var(--navy-deep); color: #fff;
  padding: 14px 0; overflow: hidden; position: relative;
  border-top: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.umph-marquee .mq-row { display: flex; overflow: hidden; }
.umph-track {
  display: flex; align-items: center; gap: 32px;
  white-space: nowrap; padding: 10px 16px; flex: none;
  will-change: transform;
}
.mq-word {
  font-family: 'Lora', serif; font-weight: 600; font-style: italic;
  font-size: clamp(26px, 3.8vw, 54px); line-height: 1; color: #fff;
  letter-spacing: -.01em;
}
.mq-word.out {
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,.45);
}
.mq-sep { color: var(--gold); font-size: clamp(16px,2vw,26px); opacity: .9; }

/* 2 — PINNED MANIFESTO (word-by-word scrub) */
.umph-manifesto { background: var(--paper); position: relative; }
.umph-manifesto .mf-pin { height: 100vh; min-height: 560px; display: flex; align-items: center; }
.umph-manifesto .mf-inner { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 32px; }
.mf-eyebrow {
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--gold);
  display: inline-flex; align-items: center; gap: 12px; margin-bottom: 28px;
}
.mf-eyebrow::before { content:""; width: 32px; height: 1px; background: var(--gold); }
.mf-text {
  font-family: 'Lora', serif; font-weight: 600;
  font-size: clamp(30px, 4.6vw, 66px); line-height: 1.2;
  letter-spacing: -.012em; color: var(--navy); margin: 0;
  text-wrap: balance;
}
.mf-text .w { color: rgba(20,39,108,.15); transition: color .25s ease; }
.mf-text .w.lit { color: var(--navy); }
.mf-text .w.accent { color: rgba(42,157,110,.18); }
.mf-text .w.accent.lit { color: var(--gold); font-style: italic; }

/* 2b — MANIFESTO + PARALLAX BACKGROUND (the "umph-parallax" effect) */
/* NOTE: no overflow:hidden on the section itself — it pins .mf-pin, and an
   overflow-clipped ancestor breaks ScrollTrigger's position:fixed pin (the
   section rides up over the marquee on resize/refresh). Clip the oversized
   image with .px-bg-wrap, a sibling of .mf-pin, instead. */
.umph-manifesto.has-parallax { background: var(--navy-deep); }
.umph-manifesto.has-parallax .px-bg-wrap {
  position: absolute; inset: 0; overflow: hidden; z-index: 0;
}
.umph-manifesto.has-parallax .px-bg {
  position: absolute; top: -26%; left: 0; right: 0; bottom: -26%;
  background-position: center; background-size: cover; background-repeat: no-repeat;
  will-change: transform;
}
.umph-manifesto.has-parallax.has-overlay::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(900px 420px at 15% 0%, rgba(43,182,130,.18), transparent 60%),
    linear-gradient(180deg, rgba(12,28,82,.66), rgba(12,28,82,.5));
}
.umph-manifesto.has-parallax .mf-pin { position: relative; z-index: 2; }
/* light word colours so the statement reads over the image */
.umph-manifesto.has-parallax .mf-text { color: #fff; }
.umph-manifesto.has-parallax .mf-text .w { color: rgba(255,255,255,.18); }
.umph-manifesto.has-parallax .mf-text .w.lit { color: #fff; }
.umph-manifesto.has-parallax .mf-text .w.accent { color: rgba(52,194,149,.28); }
.umph-manifesto.has-parallax .mf-text .w.accent.lit { color: var(--mint); font-style: italic; }

/* 3 — HORIZONTAL SCROLL GALLERY (pinned) */
.umph-h { background: var(--navy); position: relative; }
.hx-viewport { overflow-x: auto; scrollbar-width: none; }
.hx-viewport::-webkit-scrollbar { display: none; }
.hx-track {
  display: flex; gap: 28px; align-items: stretch;
  width: max-content; padding: 104px 40px;
}
.hx-panel { flex: 0 0 auto; }
.hx-intro {
  width: clamp(300px, 32vw, 440px);
  display: flex; flex-direction: column; justify-content: center; gap: 14px;
  padding-right: 16px;
}
.hx-intro .scroll-hint {
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--gold);
  display: inline-flex; align-items: center; gap: 10px; margin-top: 6px;
}
.hx-card {
  width: clamp(300px, 33vw, 440px);
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.14);
  border-radius: 10px; padding: 20px; display: flex; flex-direction: column; gap: 14px;
  transition: border-color .3s ease, transform .3s ease;
}
.hx-card:hover { border-color: var(--gold); transform: translateY(-4px); }
.hx-img {
  aspect-ratio: 4/3; border-radius: 8px; overflow: hidden;
  border: 1px solid rgba(255,255,255,.12); position: relative;
}
.hx-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hx-num {
  font-family: 'Lora', serif; font-weight: 700; font-size: 30px;
  color: var(--gold); line-height: 1;
}
.hx-card h3 { font-family: 'Lora', serif; font-size: 21px; color: #fff; margin: 0; }
.hx-card p { margin: 0; color: rgba(255,255,255,.7); font-size: 14px; line-height: 1.6; }

@media (max-width: 900px) {
  .hx-card, .hx-intro { width: 78vw; }
}