/* RAQMANA — fx: small scroll moments, loaded on every page, driven by assets/js/fx.js.
   One moment per screenful, each under a second, each plays once. Only transform and opacity move.
   With reduced motion, or without JavaScript, nothing here applies and everything is shown in place
   (every rule is scoped to html.fx-ok, which fx.js sets only when motion is allowed).

   1. Footer logo: points assemble the logo, then the image takes over (the logo slot is 260 px wide)
   2. Contact "sent" shield: a small shield of points in the thank-you dialog
   3. Signal: one cyan point runs along a hairline at the top of a section (Home: Standard; Strategy: Pillars)
   4. The cyan mark before section labels grows in with its heading
   5. Dividers draw left to right (spec rows, Services table rows, steps)
   6. Card top edges light up as cards arrive (Services cards draw in; partner cards sweep once)
   7. Numbers count up (in fx.js) */

/* Page-to-page cross-fade (Chrome, Edge, Safari 18.2+; others simply load the page). The header keeps
   its own name, so it stays put while the content fades. Off with reduced motion. */
@view-transition { navigation: auto; }
::view-transition-group(root) { animation-duration: 220ms; animation-timing-function: var(--ease); }
.site-header { view-transition-name: rq-header; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* Looping animations pause while off screen (class set by fx.js) */
.fx-paused, .fx-paused *, .fx-paused::before, .fx-paused::after, .fx-paused *::before, .fx-paused *::after { animation-play-state: paused !important; }

/* The copyright year (filled in by fx.js; always applies) */
.footer-year { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- 1. Footer logo */
.footer-brand img { width: min(260px, 72vw); height: auto; }
.fx-logo { position: relative; display: inline-block; vertical-align: top; }
.fx-logo canvas { position: absolute; left: -32px; top: -28px; width: calc(100% + 64px); height: calc(100% + 56px); pointer-events: none; }
.fx-ok .fx-logo img { transition: opacity 500ms var(--ease); }
.fx-ok .fx-logo.is-waiting img,
.fx-ok .fx-logo.is-assembling img { opacity: 0; }

/* ---------------------------------------------------------------- 2. Contact shield */
.fx-shield { display: block; width: 84px; height: 96px; margin-bottom: var(--s-4); }

/* ---------------------------------------------------------------- 3. Signal */
.fx-signal-row { position: absolute; top: 0; inset-inline: 0; pointer-events: none; }
.fx-signal { position: relative; display: block; height: 1px; background: var(--rq-cyan-edge); overflow: visible; }
.fx-signal::after {
  content: "";
  position: absolute;
  top: -2px;
  left: 0;
  width: 72px;
  height: 5px;
  border-radius: 3px;
  background: linear-gradient(90deg, transparent, rgba(var(--rq-cyan-rgb), .55) 70%, var(--rq-white));
  box-shadow: 0 0 12px rgba(var(--rq-cyan-rgb), .8);
  opacity: 0;
}
[dir="rtl"] .fx-signal::after { left: auto; right: 0; background: linear-gradient(-90deg, transparent, rgba(var(--rq-cyan-rgb), .55) 70%, var(--rq-white)); }
.fx-ok .fx-signal.is-on::after { animation: fx-signal 1100ms var(--ease-io, ease-in-out) 1 forwards; }
.fx-ok[dir="rtl"] .fx-signal.is-on::after { animation-name: fx-signal-rtl; }
@keyframes fx-signal {
  0% { opacity: 0; left: 0; }
  12% { opacity: 1; }
  88% { opacity: 1; }
  100% { opacity: 0; left: calc(100% - 72px); }
}
@keyframes fx-signal-rtl {
  0% { opacity: 0; right: 0; }
  12% { opacity: 1; }
  88% { opacity: 1; }
  100% { opacity: 0; right: calc(100% - 72px); }
}

/* ---------------------------------------------------------------- 4. The mark grows in with its heading */
.fx-ok.reveal-ready [data-reveal] .eyebrow .mark { transform-origin: left center; transition: transform 600ms var(--ease) calc(var(--reveal-delay, 0ms) + 160ms); }
.fx-ok.reveal-ready[dir="rtl"] [data-reveal] .eyebrow .mark { transform-origin: right center; }
.fx-ok.reveal-ready [data-reveal]:not(.is-revealed) .eyebrow .mark { transform: skewX(var(--slant)) scaleX(0); }

/* ---------------------------------------------------------------- 5. Dividers draw left to right */
.fx-ok .fx-draw .spec-row { position: relative; border-top-color: transparent; }
.fx-ok .fx-draw .spec-row::before,
.fx-ok .fx-draw tbody tr::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  height: 1px;
  background: var(--line);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 700ms var(--ease) calc(var(--fx-i, 0) * 70ms);
}
.fx-ok .fx-draw .spec-row::before { top: -1px; }
.fx-ok .fx-draw tbody tr { position: relative; }
.fx-ok .fx-draw tbody :is(th, td) { border-bottom-color: transparent; }
.fx-ok .fx-draw tbody tr::after { bottom: 0; }
.fx-ok .fx-draw.steps li { border-top-color: transparent; position: relative; }
.fx-ok .fx-draw.steps li::after {
  content: "";
  position: absolute;
  top: -2px;
  inset-inline: 0;
  height: 2px;
  background: var(--rq-cyan);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 700ms var(--ease) calc(var(--fx-i, 0) * 110ms);
}
.fx-ok[dir="rtl"] .fx-draw .spec-row::before,
.fx-ok[dir="rtl"] .fx-draw tbody tr::after,
.fx-ok[dir="rtl"] .fx-draw.steps li::after { transform-origin: right center; }
.fx-ok .fx-draw.is-drawn .spec-row::before,
.fx-ok .fx-draw.is-drawn tbody tr::after,
.fx-ok .fx-draw.is-drawn.steps li::after { transform: none; }

/* ---------------------------------------------------------------- 6. Card top edges */
.fx-ok .fx-edge.svc-card::before { transform: scaleX(0); transform-origin: left center; transition: transform 800ms var(--ease) calc(var(--fx-i, 0) * 90ms); }
.fx-ok[dir="rtl"] .fx-edge.svc-card::before { transform-origin: right center; }
.fx-ok .fx-edge.svc-card.is-lit::before { transform: none; }
.fx-ok .fx-edge.partner-card { position: relative; }
.fx-ok .fx-edge.partner-card::before {
  content: "";
  position: absolute;
  top: 0;
  inset-inline: 0;
  height: 2px;
  background: var(--rq-cyan);
  transform: scaleX(0);
  transform-origin: left center;
  opacity: 0;
  pointer-events: none;
}
.fx-ok[dir="rtl"] .fx-edge.partner-card::before { transform-origin: right center; }
.fx-ok .fx-edge.partner-card.is-lit::before { animation: fx-sweep 1300ms var(--ease) calc(var(--fx-i, 0) * 90ms) 1 both; }
@keyframes fx-sweep {
  0% { transform: scaleX(0); opacity: 1; }
  55% { transform: scaleX(1); opacity: 1; }
  100% { transform: scaleX(1); opacity: 0; }
}