/* RGAB public website: shared motion and interaction layer (styles).
   Pairs with assets/js/rgab-motion.js and is loaded on every page right after rgab.css.

   Rules this file keeps:
   - CSS first. Anything that animates is wrapped in prefers-reduced-motion: no-preference, so reduced motion gets the final,
     fully visible state and nothing moves. The static look (spacing, colours, focus) lives outside that block.
   - No content is hidden until JavaScript runs. The only hidden-until-revealed state is .reveal, which rgab-interactions.js and
     rgab-motion.js add themselves; without JavaScript, or with reduced motion, those classes are never added.
   - Only opacity and transform are animated, so no animation can shift the layout.
   - Brand colours only (navy, charcoal, gold and their tints from rgab.css); easing and durations are tokens below (150-700 ms). */

:root {
  --m-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --m-fast: 160ms;
  --m-base: 280ms;
  --m-slow: 600ms;
  --m-line: rgba(27, 42, 75, 0.55);   /* control borders: about 3.5:1 on white (WCAG 1.4.11) */
  --m-error: #B3261E;
  --m-header: 96px;
}

/* ---------- Anchors: land below the sticky header ---------- */
html { scroll-padding-top: var(--m-header); }
/* A word that cannot fit (a long heading word or an e-mail address at 200% text on a phone) wraps instead of pushing the page sideways. */
main { overflow-wrap: break-word; }
[data-m-item][hidden], [data-m-section][hidden], .m-empty[hidden] { display: none !important; }

/* ---------- Inline links: a gold sweep under the existing underline (the underline stays: links are never colour-only) ---------- */
body:not([data-page="tool"]) main :is(p, li, td, dd) a:not(.btn):not(.card-link) {
  background: linear-gradient(var(--gold), var(--gold)) no-repeat 0 100% / 0 2px;
}
body:not([data-page="tool"]) main :is(p, li, td, dd) a:not(.btn):not(.card-link):is(:hover, :focus-visible) {
  background-size: 100% 2px;
}

/* ---------- Buttons: press feedback ---------- */
.btn-primary:hover { box-shadow: 0 8px 20px rgba(215, 184, 94, 0.32); }
.btn-secondary:hover { box-shadow: 0 8px 20px rgba(11, 17, 30, 0.22); }

/* ---------- Cards: keyboard equivalent of hover ---------- */
.card:focus-within {
  box-shadow: 0 16px 32px rgba(27, 42, 75, 0.10);
  border-color: rgba(215, 184, 94, 0.35);
}
.card:focus-within::before { right: 0; }
.destination-card:hover .destination-index,
.destination-card:focus-within .destination-index { background: var(--gold); border-color: var(--gold); color: var(--navy); }
.list-plain.grid > li:hover::marker { color: var(--gold-text); }

/* ---------- Section headings: a short gold rule under each centred section heading ---------- */
.section-header h2::after {
  content: '';
  display: block;
  width: 56px;
  height: 2px;
  margin: 14px auto 0;
  background: var(--gold);
  transform-origin: center;
}
.section-header h2 { margin-bottom: 0.4em; }

/* ---------- Home hero ---------- */
.hero { overflow: clip; }   /* the drifting glow below is wider than the hero; clip it without making the hero a scroll area */
.hero::before {
  content: '';
  position: absolute;
  inset: -30% -20%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(38% 46% at 28% 42%, rgba(215, 184, 94, 0.14), transparent 70%),
    radial-gradient(34% 44% at 76% 62%, rgba(110, 140, 215, 0.12), transparent 70%);
}
.hero h1::after {
  content: '';
  display: block;
  width: 88px;
  height: 3px;
  margin: 20px auto 0;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--gold), var(--sand));
  transform-origin: left center;
}
@media (min-width: 1000px) {
  .hero.has-sky h1::after { margin-left: 0; }
}
.m-w { display: inline-block; }

/* ---------- FAQ accordion: plus/minus marker (the <details> element keeps its native semantics and keyboard use) ---------- */
summary.faq-q {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
summary.faq-q::-webkit-details-marker { display: none; }
summary.faq-q::after {
  content: '';
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
  background:
    linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat,
    linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat;
  color: var(--gold-text);
}
details[open] > summary.faq-q::after {
  background:
    linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat,
    linear-gradient(currentColor, currentColor) center / 2px 0 no-repeat;
}
summary.faq-q:hover { color: var(--gold-text); }

/* ---------- Counters: keep their width while the digits change ---------- */
.stat-count.m-fixed { display: inline-block; min-width: var(--m-w, 0); text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- Process timeline: a rail with a node per step; the gold fill follows the reader ---------- */
.steps { position: relative; padding-left: 28px; }
.step { position: relative; }
.step::before {
  content: '';
  position: absolute;
  left: -28px;
  top: 32px;
  width: 14px;
  height: 14px;
  box-sizing: border-box;
  border-radius: 50%;
  background: var(--soft-white);
  border: 2px solid rgba(27, 42, 75, 0.35);
  z-index: 1;
}
.step::after {
  content: '';
  position: absolute;
  left: -22px;
  top: 46px;
  bottom: -32px;
  width: 2px;
  background:
    linear-gradient(var(--gold-text), var(--gold-text)) top / 100% calc(var(--m-p, 0) * 100%) no-repeat,
    rgba(27, 42, 75, 0.14);
}
.step:last-child::after { display: none; }
.step > div:not(.step-num) { min-width: 0; }
.step.is-done::before, .step.is-current::before { background: var(--gold); border-color: var(--gold-text); }
.step.is-current .step-num { color: var(--navy); }

/* ---------- Live filter (destinations) ---------- */
.m-filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin: 24px 0 8px; }
.m-search { position: relative; flex: 1 1 260px; max-width: 420px; }
.m-search input {
  width: 100%;
  min-height: 44px;
  padding: 10px 14px 10px 42px;
  border: 1px solid var(--m-line);
  border-radius: 999px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%231B2A4B' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") 14px center / 18px no-repeat;
  color: var(--navy);
  font-family: inherit;
  font-size: 0.95rem;
}
.m-search input::placeholder { color: var(--charcoal); opacity: 1; }
.m-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.m-chip {
  min-height: 44px;
  padding: 8px 18px;
  border: 1px solid var(--m-line);
  border-radius: 999px;
  background: #fff;
  color: var(--navy);
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
}
.m-chip:hover { border-color: var(--gold-text); }
.m-chip[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: var(--soft-white); }
.m-count { margin: 0 0 20px; font-size: 0.85rem; color: var(--charcoal); min-height: 1.4em; }
.m-clear {
  margin-left: 8px;
  padding: 4px 4px;
  border: 0;
  background: none;
  color: var(--navy);
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}

/* ---------- Comparison table: row and column highlight ---------- */
.data-table tbody tr:hover td { background: rgba(215, 184, 94, 0.14); }
.data-table .m-col { background: rgba(215, 184, 94, 0.14); }

/* ---------- Reading progress, section pill, mini call to action ---------- */
.m-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 101; pointer-events: none; }
.m-progress i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold-text), var(--gold)); transform-origin: left center; transform: scaleX(var(--m-prog, 0)); }
.m-here {
  position: fixed;
  top: 76px;
  left: 24px;
  z-index: 90;
  max-width: calc(100% - 48px);
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--navy);
  color: var(--soft-white);
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  box-shadow: 0 6px 18px rgba(11, 17, 30, 0.22);
  visibility: hidden;
  opacity: 0;
}
.m-here.is-on { visibility: visible; opacity: 1; }
.toc-nav a.is-active { font-weight: 700; color: var(--gold-text); }
.toc-nav a[aria-current="location"] { text-decoration-thickness: 2px; }

.m-cta {
  position: fixed;
  left: 24px;
  bottom: 24px;
  z-index: 80;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: calc(100vw - 120px);
  padding: 8px 8px 8px 16px;
  border-radius: var(--radius);
  background: var(--navy);
  color: var(--soft-white);
  box-shadow: 0 14px 34px rgba(11, 17, 30, 0.35);
  visibility: hidden;
  opacity: 0;
}
.m-cta.is-on { visibility: visible; opacity: 1; }
.m-cta-t { font-family: var(--font-headline); font-size: 0.95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.m-cta .btn { padding: 10px 16px; font-size: 0.78rem; }
.m-cta-x {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(255, 253, 248, 0.45);
  border-radius: 50%;
  background: transparent;
  color: var(--soft-white);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
}
.m-cta-x:hover { border-color: var(--gold); color: var(--gold); }
.m-cta :focus-visible, .m-cta-x:focus-visible { outline-color: var(--soft-white); box-shadow: 0 0 0 2px var(--midnight); }
@media (max-width: 480px) {
  .steps { padding-left: 22px; }
  .step::before { left: -22px; width: 12px; height: 12px; }
  .step::after { left: -17px; top: 44px; }
}
@media (max-width: 640px) {
  .m-cta { left: 16px; bottom: 16px; max-width: calc(100vw - 108px); }
  .m-cta-t { display: none; }
  .m-here { left: 16px; max-width: calc(100% - 32px); }
}

/* ---------- Forms: label highlight, valid and invalid states, completion meter, success and busy states ---------- */
.field-label { transition: color var(--m-fast) ease; }
.field-label:has(+ .field-input:focus) { color: var(--gold-text); }
.m-form .field-input:user-invalid {
  border-color: var(--m-error);
}
.m-form input.field-input:user-invalid, .m-form select.field-input:user-invalid {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23B3261E' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v6M12 16.5v.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px;
}
.m-form select.field-input:user-invalid { background-position: right 38px center; }
.m-form input.field-input:user-valid:not([data-geo]):not([type="checkbox"]) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%231B2A4B' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px;
}
.m-meter-wrap { margin: 0 0 20px; }
.m-meter { height: 6px; margin: 0 0 8px; border-radius: 3px; background: rgba(27, 42, 75, 0.14); overflow: hidden; }
.m-meter i { display: block; height: 100%; background: linear-gradient(90deg, var(--navy), var(--gold-text)); transform-origin: left center; transform: scaleX(var(--m-f, 0)); }
.m-meter-t { margin: 0; font-size: 0.8rem; color: var(--charcoal); }
.m-meter-wrap.is-complete .m-meter-t { color: var(--navy); font-weight: 700; }
.form-status.is-success::before, .form-status.is-busy::before {
  content: '';
  display: inline-block;
  box-sizing: border-box;
  width: 22px;
  height: 22px;
  margin-right: 10px;
  border-radius: 50%;
  vertical-align: -5px;
}
.form-status.is-success::before {
  background: var(--navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D7B85E' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.form-status.is-busy::before { border: 3px solid rgba(27, 42, 75, 0.25); border-top-color: var(--navy); }

/* ---------- Motion (everything below is switched off by prefers-reduced-motion) ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* Page: the content eases in as the loader fades (CSS only, so it also runs with scripts off, and always ends fully visible) */
  main { animation: m-main 460ms ease 330ms backwards; }

  /* Scroll reveal: staggered by column; --rd is set by rgab-motion.js. The fill is "backwards" so the settled state is the normal style. */
  .reveal.reveal-visible { animation: m-rise var(--m-slow) var(--m-ease) var(--rd, 0ms) backwards; }

  .section-header.reveal:not(.reveal-visible) h2::after { transform: scaleX(0); }
  .section-header.reveal-visible h2::after { animation: m-draw 700ms var(--m-ease) 220ms backwards; }

  /* Home hero */
  .hero::before { animation: m-drift 28s ease-in-out infinite alternate; }
  .hero.m-off::before, .hero.m-off h1::after { animation-play-state: paused; }
  .hero h1::after { animation: m-draw 700ms var(--m-ease) 950ms backwards; }
  .hero .markets, .hero .subhead, .hero .lede, .hero .cta-row { animation: m-rise 600ms var(--m-ease) backwards; }
  .hero .markets { animation-delay: 420ms; }
  .hero .subhead { animation-delay: 900ms; }
  .hero .lede { animation-delay: 1000ms; }
  .hero .cta-row { animation-delay: 1100ms; }
  .hero h1:not(.m-split) { animation: m-fade 600ms ease 480ms backwards; }
  .m-split .m-w { animation: m-word 640ms var(--m-ease) calc(480ms + var(--i, 0) * 70ms) backwards; }
  .m-parallax .hero > .container { transform: translate3d(0, calc(var(--m-py, 0) * 1px), 0); will-change: transform; }

  /* Cards */
  .card, .list-plain.grid > li { transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease, opacity var(--m-base) ease; }
  .list-plain.grid > li { transition-property: transform, opacity; }
  .card .card-icon { transition: color 200ms ease, transform 360ms var(--m-ease); transform-origin: 50% 60%; }
  .card:hover .card-icon, .card:focus-within .card-icon { transform: translateY(-3px) rotate(-5deg) scale(1.08); }
  .card:focus-within { transform: translateY(-4px); }
  .destination-index { transition: background-color var(--m-base) ease, color var(--m-base) ease, border-color var(--m-base) ease; }
  .list-plain.grid > li:hover { transform: translateX(4px); }
  @media (hover: hover) and (pointer: fine) {
    .grid:has(> .card:hover) > .card:not(:hover) { opacity: 0.84; }
  }

  /* Buttons and links */
  .btn { transition: opacity 150ms ease, transform 150ms ease, box-shadow var(--m-base) ease; }
  .btn:active { transform: translateY(1px) scale(0.985); transition-duration: 80ms; }
  body:not([data-page="tool"]) main :is(p, li, td, dd) a:not(.btn):not(.card-link) { transition: background-size 280ms var(--m-ease), color var(--m-fast) ease; }

  /* FAQ */
  summary.faq-q::after { transition: background-size var(--m-base) var(--m-ease); }
  .faq-item[open] > .faq-a { animation: m-fade var(--m-base) ease; }

  /* Timeline */
  .step::before { transition: background-color var(--m-base) ease, border-color var(--m-base) ease, transform var(--m-base) var(--m-ease); }
  .step.is-current::before { transform: scale(1.25); }
  .step-num { transition: color var(--m-base) ease; }

  /* Filter */
  .m-chip { transition: background-color var(--m-fast) ease, border-color var(--m-fast) ease, color var(--m-fast) ease; }
  .m-pop { animation: m-rise 420ms var(--m-ease) backwards; }
  .data-table tbody td { transition: background-color var(--m-fast) ease; }

  /* Reading progress, section pill, mini call to action */
  .m-here { transition: opacity var(--m-base) ease, visibility 0s linear var(--m-base); }
  .m-here.is-on { transition-delay: 0s; }
  .m-cta { transform: translateY(16px); transition: opacity var(--m-base) ease, transform var(--m-base) var(--m-ease), visibility 0s linear var(--m-base); }
  .m-cta.is-on { transform: none; transition-delay: 0s; }
  .m-cta-x { transition: color var(--m-fast) ease, border-color var(--m-fast) ease; }

  /* Forms */
  .field-input { transition: border-color var(--m-base) ease, box-shadow var(--m-base) ease, background-color var(--m-base) ease; }
  .field-input:focus { box-shadow: 0 0 0 4px rgba(215, 184, 94, 0.22); }
  .m-meter i { transition: transform 360ms var(--m-ease); }
  .form-status.is-success::before { animation: m-pop 520ms var(--m-ease) backwards; }
  .form-status.is-busy::before { animation: m-spin 800ms linear infinite; }

  @keyframes m-main { from { opacity: 0; } }
  @keyframes m-fade { from { opacity: 0; } }
  @keyframes m-rise { from { opacity: 0; transform: translate3d(0, 22px, 0); } }
  @keyframes m-word { from { opacity: 0; transform: translate3d(0, 0.5em, 0); } }
  @keyframes m-draw { from { transform: scaleX(0); } }
  @keyframes m-pop { from { opacity: 0; transform: scale(0.4); } }
  @keyframes m-spin { to { transform: rotate(360deg); } }
  @keyframes m-drift {
    from { transform: translate3d(-3%, -2%, 0) scale(1); }
    to { transform: translate3d(3%, 2%, 0) scale(1.08); }
  }
}

/* Reduced motion: the loading veil already hides itself in rgab.css; the progress bar is a scroll-linked motion cue, so it is not drawn */
@media (prefers-reduced-motion: reduce) {
  .m-progress { display: none; }
}

@media print {
  .reveal { opacity: 1 !important; transform: none !important; }
  .m-progress, .m-here, .m-cta { display: none !important; }
}