/* ==========================================================================
   Reusable components: wordmark, nav, buttons, cards, cursor, progress,
   forms, transition overlay
   ========================================================================== */

/* ---- Wordmark / logo lockup ----
   Default (header, always light) is dark-on-light; the footer forces the
   light-on-dark pairing back on since it stays a fixed dark zone. */
.wordmark {
  display: inline-flex;
  align-items: center; /* baseline put the SVG icon's own bottom edge on the text baseline, floating it visibly above the wordmark instead of centering on it */
  gap: var(--sp-3);
  color: var(--c-charcoal);
}

.site-footer .wordmark { color: var(--surface-text-dark-strong); }

.wordmark__mark {
  /* SVG viewBox is cropped tight to the glyph's own bounds (see each page's
     header markup) rather than the icon's full 0..104 square coordinate
     space, which was mostly empty margin — that whitespace made the mark
     read as small next to "INDREVA" even though the box itself was 40px. */
  width: 46px;
  height: 28px;
  flex-shrink: 0;
}

.wordmark__text {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

/* Michroma is reserved for this logotype alone — never for running
   headings — per the brand identity's wordmark construction rules. */
.wordmark__primary {
  font-family: var(--font-wordmark);
  font-weight: 400;
  font-size: var(--fs-sm);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.wordmark__secondary {
  margin-top: 4px;
  font-family: var(--font-body);
  font-size: 0.55rem;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--c-slate-blue);
  max-height: 2em;
  opacity: 1;
  overflow: hidden;
  transition: max-height var(--dur-base) var(--ease-precision),
              opacity var(--dur-fast) var(--ease-precision),
              margin-top var(--dur-base) var(--ease-precision);
}

.site-footer .wordmark__secondary { color: var(--c-steel-grey); }

/* Scrolled header switches to the brand's "short wordmark" — icon + INDREVA
   only, no "TRADE GROUP" subtext — matching the Full Logo vs Icon-Only
   usage rule ("website footer or scrolled header, after full name has
   already appeared on load"). */
.site-header.is-condensed .wordmark__secondary {
  max-height: 0;
  opacity: 0;
  margin-top: 0;
}

/* ---- Primary nav ----
   A plain translucent pill fades in behind the label on hover — no
   gradient, no sheen, just a quiet capsule and a 1px lift. */
.primary-nav { display: flex; align-items: center; gap: var(--sp-5); }

.nav-links { display: flex; align-items: center; gap: var(--sp-1); }

.nav-links a {
  position: relative;
  display: inline-flex;
  align-items: center;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--c-charcoal);
  padding: var(--sp-3) var(--sp-5);
  border-radius: 999px;
  z-index: 0;
  transition: color var(--dur-fast) var(--ease-precision);
}

.nav-links a::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: rgba(46, 58, 70, 0.07);
  opacity: 0;
  transform: scale(0.9);
  transition: opacity var(--dur-fast) var(--ease-precision),
              transform var(--dur-fast) var(--ease-out-soft);
  z-index: -1;
}

.nav-links a:hover::before,
.nav-links a[aria-current="page"]::before {
  opacity: 1;
  transform: scale(1);
}

.nav-links a[aria-current="page"] { color: var(--c-deep-blue-grey); }

/* ---- Buttons ----
   Solid-fill pills. The fill itself stays flat and solid at rest — a
   previous version's permanent gradient sheen washed the colour out and
   read as a dated glossy bevel. On hover only, a thin highlight along the
   top third suggests the pill's own rounded, cylindrical cross-section
   catching light — not a plastic coating over the whole surface. */
.btn {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-6);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: transform var(--dur-base) var(--ease-out-soft),
              box-shadow var(--dur-base) var(--ease-out-soft),
              background var(--dur-fast) var(--ease-precision),
              border-color var(--dur-fast) var(--ease-precision),
              color var(--dur-fast) var(--ease-precision);
  white-space: nowrap;
  min-height: 44px;
}

.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 60%);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out-soft);
  pointer-events: none;
}
.btn--ghost::before, .btn--ghost-on-dark::before { display: none; } /* no fill for the highlight to sit on */

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px -12px rgba(28, 33, 38, 0.35);
}
.btn:hover::before { opacity: 1; }
.btn:active { transform: translateY(0); box-shadow: none; }
.btn:active::before { opacity: 0; }

/* Default CTA is tuned for the site's light surface (Deep Blue-Grey fill —
   pops against the flowy background better than a light Ice Blue fill
   would). The nav overlay and the Vision page's own content are the site's
   dark zones, so their CTAs flip back to the brief's dark-bg pairing
   (Ice Blue fill, per "Deep Blue-Grey bg -> Ice Blue for CTAs"). */
.btn--accent {
  background: var(--c-deep-blue-grey);
  color: var(--c-platinum-white);
}
.btn--accent:hover { background: #24303b; }

.nav-overlay .btn--accent,
body[data-page="vision"] #page-content .btn--accent {
  background: var(--c-ice-blue);
  color: var(--c-charcoal);
}
.nav-overlay .btn--accent:hover,
body[data-page="vision"] #page-content .btn--accent:hover { background: #bcd6e6; }

/* Dark-surface CTAs need a glow the light-surface shadow above can't give
   (a dark drop shadow disappears against a dark background). */
.nav-overlay .btn:hover,
body[data-page="vision"] #page-content .btn:hover {
  box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.5), 0 0 14px rgba(169, 198, 218, 0.22);
}

.btn--ghost {
  background: transparent;
  color: var(--c-charcoal);
  border-color: var(--border-on-light);
}
.btn--ghost:hover {
  border-color: var(--c-deep-blue-grey);
  color: var(--c-deep-blue-grey);
}

/* Reserved for ghost buttons placed on one of the site's dark zones. */
.btn--ghost-on-dark {
  background: transparent;
  color: var(--surface-text-dark-strong);
  border-color: var(--border-on-dark);
}
.btn--ghost-on-dark:hover {
  border-color: var(--c-ice-blue);
  color: var(--c-ice-blue);
}

.btn__arrow { transition: transform var(--dur-fast) var(--ease-out-soft); }
.btn:hover .btn__arrow { transform: translate(3px, -3px); }

/* ---- Mobile nav toggle ---- */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  z-index: var(--z-header);
}
.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--c-charcoal);
  transition: transform var(--dur-fast) var(--ease-precision), opacity var(--dur-fast);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---- Mobile overlay menu ---- */
.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--c-charcoal);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--sp-8) var(--container-pad);
  visibility: hidden;
  /* No static `transform` here: GSAP's xPercent tween owns this element's
     transform entirely (see nav.js). If CSS sets an initial translateX,
     GSAP parses it as a fixed pixel baseline on first tween and stacks its
     own xPercent translation on top of it instead of replacing it, leaving
     the panel stuck off-screen after the "open" tween completes. */
}

.nav-overlay.is-open { visibility: visible; }

.nav-overlay__links { display: flex; flex-direction: column; gap: var(--sp-5); }

.nav-overlay__links a {
  display: inline-block;
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  text-transform: uppercase;
  letter-spacing: var(--track-tight);
  color: var(--text-on-charcoal-strong);
}

.nav-overlay__cta { margin-top: var(--sp-7); align-self: flex-start; }

/* ---- Cards ----
   Reads --surface-* tokens, so it adapts automatically inside the Vision
   page's dark-flipped scope (see base.css) without its own override. */
.card {
  padding: var(--sp-6);
  border: 1px solid var(--surface-border);
  border-radius: 2px;
  background: var(--surface-card-bg);
  backdrop-filter: blur(6px);
}

.card--light {
  background: rgba(46, 58, 70, 0.03);
  border-color: var(--surface-border);
}

.card__index {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  letter-spacing: var(--track-label);
  color: var(--accent-label);
  margin-bottom: var(--sp-4);
}

.card__title {
  font-size: var(--fs-lg);
  margin-bottom: var(--sp-3);
}

.card__body {
  color: var(--surface-text);
  font-size: var(--fs-sm);
}

/* ---- Diagonal clip utility (the recurring movement motif) ---- */
.diagonal-edge {
  clip-path: polygon(0 3%, 100% 0, 100% 97%, 0 100%);
}

/* ---- Custom cursor (desktop only, injected by JS) ----
   A premium chrome-metal arrow image (assets/cursor/cursor-chrome.png)
   replaces the OS pointer entirely. gsap.set/quickTo in cursor.js positions
   this outer element via translate3d at the raw pointer coordinates; the
   <img> inside is offset by a small fixed amount so the arrow's own tip
   (its visual "hotspot") lands exactly on that point instead of the image's
   top-left corner. Scale transforms on hover/press are on the <img>, not
   this wrapper, so the hotspot alignment never shifts. */
.cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  pointer-events: none;
  z-index: var(--z-cursor);
  opacity: 1;
  transition: opacity var(--dur-fast) var(--ease-precision);
}

.cursor__img {
  position: absolute;
  left: -1.4px;
  top: -0.7px;
  width: 18px;
  height: 24px;
  max-width: none; /* .cursor is intentionally 0x0 (see above) — the global img{max-width:100%} reset would otherwise clamp this to zero */
  filter: drop-shadow(0 2px 6px rgba(28, 33, 38, 0.35));
  transform-origin: 8% 4%; /* the arrow's own tip, so scaling never drifts off the pointer */
  transition: transform var(--dur-fast) var(--ease-out-soft);
}

.cursor.is-active .cursor__img { transform: scale(1.3); }

.cursor.is-pressed .cursor__img { transform: scale(0.82); }

.cursor.is-hidden { opacity: 0; }

/* ---- Scroll progress ---- */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 100%;
  z-index: var(--z-progress);
  background: transparent;
}
.scroll-progress__bar {
  height: 100%;
  width: 0%;
  background: var(--c-deep-blue-grey);
  transform-origin: left;
  box-shadow: 0 0 12px rgba(46, 58, 70, 0.35);
}

/* ---- Page transition overlay (diagonal wipe) ----
   Platinum White by default so the wipe reads as part of the same light,
   airy world between pages; Vision (the one dark page) wipes with Charcoal
   instead so arriving at or leaving the deep chapter doesn't flash light. */
.transition-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-transition);
  pointer-events: none;
  visibility: hidden;
}
.transition-overlay__panel {
  position: absolute;
  inset: -10% -10%;
  background: var(--c-platinum-white);
  clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
  transform: skewX(-8deg);
}

body[data-page="vision"] .transition-overlay__panel { background: var(--c-charcoal); }

/* ---- Forms ---- */
.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-bottom: var(--sp-5);
}

.form-field label {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--c-deep-blue-grey);
}

.form-field input,
.form-field select,
.form-field textarea {
  font: inherit;
  font-size: var(--fs-base);
  color: var(--c-charcoal);
  background: rgba(46, 58, 70, 0.03);
  border: 1px solid var(--border-on-light);
  border-radius: 2px;
  padding: var(--sp-4);
  min-height: 44px;
  transition: border-color var(--dur-fast) var(--ease-precision), background var(--dur-fast);
}

.form-field textarea { min-height: 128px; resize: vertical; }

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  border-color: var(--c-ice-blue);
  background: rgba(169, 198, 218, 0.05);
}

.form-field input:invalid[data-touched="true"],
.form-field textarea:invalid[data-touched="true"] {
  border-color: #C97B63;
}

.form-error {
  font-size: var(--fs-2xs);
  color: #E0A98C;
  min-height: 1em;
}

.form-status {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-5);
  border: 1px solid var(--c-slate-blue);
  border-radius: 2px;
  color: var(--c-deep-blue-grey);
  opacity: 0;
  transform: translateY(8px);
}

.form-status.is-visible { opacity: 1; transform: translateY(0); }

/* ---- Chapter marker (the storyline thread that runs through every page) ---- */
.chapter-marker {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
  font-size: var(--fs-2xs);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--surface-muted);
}
.chapter-marker__num {
  color: var(--accent-label);
  font-family: var(--font-display);
}
.chapter-marker__bar {
  width: 28px;
  height: 1px;
  background: var(--surface-border);
  position: relative;
  overflow: hidden;
}
.chapter-marker__bar::after {
  content: '';
  position: absolute;
  inset: 0;
  width: var(--chapter-progress, 16%);
  background: var(--accent-label);
}

/* ---- Trust strip / meta list ---- */
.meta-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-6);
  border-top: 1px solid var(--surface-border);
  border-bottom: 1px solid var(--surface-border);
  padding-block: var(--sp-6);
}

.meta-list__item { display: flex; flex-direction: column; gap: var(--sp-2); }
.meta-list__value {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  color: var(--c-deep-blue-grey);
}
.meta-list__label {
  font-size: var(--fs-xs);
  color: var(--surface-muted);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}

@media (max-width: 860px) {
  .meta-list { grid-template-columns: repeat(2, 1fr); }
}

/* 960px, not 720px: the wordmark + 5 nav links + CTA need real room to
   breathe. Below that they wrap and the CTA gets clipped off-screen at
   common tablet widths (e.g. 768px) — switch to the hamburger earlier. */
@media (max-width: 960px) {
  .nav-links, .primary-nav .btn--accent.header-cta { display: none; }
  .nav-toggle { display: flex; }
}