/* ============================================================
   GEM — interaction & primitive layer
   Everything editable (color, type, spacing, block style
   variations) already lives in theme.json. This file only adds
   what theme.json cannot express: hover transforms, keyframes,
   backdrop blur, and a few brand primitives (gold line, diamond
   mark, disclaimer opacity) exposed as block-editor-friendly
   utility classes any block can pick up via "Additional CSS class(es)".
   ============================================================ */

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ---------- Card / group hover lift (pairs with block style variations) ---------- */
.is-style-card,
.is-style-gold-rule {
  transition:
    transform var(--wp--custom--duration--slow) var(--wp--custom--easing--editorial),
    border-color var(--wp--custom--duration--slow) var(--wp--custom--easing--editorial),
    background-color var(--wp--custom--duration--slow) var(--wp--custom--easing--editorial);
}
.is-style-card:hover,
.is-style-gold-rule:hover {
  transform: translateY(-6px);
}
.is-style-card:hover {
  border-color: rgba(190, 168, 125, 0.2) !important;
}

/* ---------- Link behavior ----------
   website.css owns all link styling on brand components (nav, footer,
   buttons). No global link overrides here, so the design stays exact. */

/* ---------- Buttons: lift on hover (color swap already handled in theme.json) ---------- */
.wp-block-button__link {
  transition:
    background-color var(--wp--custom--duration--base) var(--wp--custom--easing--editorial),
    color var(--wp--custom--duration--base) var(--wp--custom--easing--editorial),
    border-color var(--wp--custom--duration--base) var(--wp--custom--easing--editorial),
    transform var(--wp--custom--duration--base) var(--wp--custom--easing--editorial);
}
.wp-block-button__link:hover { transform: translateY(-2px); }
.is-style-secondary .wp-block-button__link:hover {
  border-color: var(--wp--preset--color--antique-gold) !important;
  color: var(--wp--preset--color--antique-gold) !important;
}

/* ---------- Sticky nav blur ---------- */
.gem-nav-blur {
  background-color: rgba(10, 10, 10, 0.92);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

/* ---------- Vertical gold rule — the signature opener element ---------- */
.gem-gold-line {
  display: block;
  width: 2px;
  height: 80px;
  background: var(--wp--preset--color--antique-gold);
  border: none;
  animation: gem-line-reveal var(--wp--custom--duration--entrance) var(--wp--custom--easing--editorial) both;
}
@keyframes gem-line-reveal {
  from { height: 0; opacity: 0; }
  to   { height: 80px; opacity: 1; }
}

/* ---------- Entrance fade-up, with stagger utility classes ---------- */
.gem-fade-up {
  animation: gem-fade-up var(--wp--custom--duration--entrance) var(--wp--custom--easing--editorial) both;
}
.gem-fade-up.gem-delay-1 { animation-delay: .15s; }
.gem-fade-up.gem-delay-2 { animation-delay: .3s; }
.gem-fade-up.gem-delay-3 { animation-delay: .45s; }
.gem-fade-up.gem-delay-4 { animation-delay: .6s; }
@keyframes gem-fade-up {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Disclaimer — 10px, low-opacity legal text ---------- */
.gem-disclaimer {
  color: rgba(255, 255, 255, 0.15);
  font-size: var(--wp--preset--font-size--disclaimer);
  line-height: var(--wp--custom--line-height--loose);
  text-align: center;
}
.is-light-mode .gem-disclaimer { color: rgba(26, 26, 26, 0.35); }

/* ---------- Inline italic-gold emphasis — the headline "payload" word ---------- */
.gem-emphasis {
  color: var(--wp--preset--color--antique-gold);
  font-style: italic;
  font-family: var(--wp--preset--font-family--playfair-display);
}

/* ---------- Diamond mark ◆ ---------- */
.gem-diamond {
  color: var(--wp--preset--color--antique-gold);
  font-size: 0.7em;
  vertical-align: middle;
  display: inline-block;
}

/* ---------- Performance figure — muted trailing % ---------- */
.gem-perf sup,
.gem-perf .gem-perf-suffix {
  font-size: 0.55em;
  color: rgba(255, 255, 255, 0.2);
  font-weight: 400;
  vertical-align: super;
}

/* ---------- Section label spacing (mono, uppercase, wide tracking) ---------- */
.gem-section-label {
  font-family: var(--wp--preset--font-family--dm-mono);
  font-size: var(--wp--preset--font-size--label);
  letter-spacing: var(--wp--custom--tracking--label);
  color: var(--wp--preset--color--antique-gold);
  text-transform: uppercase;
}

/* ---------- Progress segments (structural-shifts style pattern) ---------- */
.gem-progress-track {
  display: flex;
  gap: var(--wp--preset--spacing--20);
}
.gem-progress-segment {
  height: 2px;
  flex: 1 1 0;
  background: rgba(255, 255, 255, 0.15);
  overflow: hidden;
}
.gem-progress-segment > span {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--wp--preset--color--antique-gold);
}
.gem-progress-segment.is-active > span { width: 100%; }

/* ---------- Light-surface helper (IM / factsheet pages) ---------- */
.is-light-mode,
.is-light-mode.wp-site-blocks {
  background-color: var(--wp--preset--color--warm-white);
  color: var(--wp--preset--color--charcoal);
}