/* ============================================================================
   Motion overlays.
   ----------------------------------------------------------------------------
   Nothing in this file hides content, so none of it needs a JS-ready guard.
   Every rule here adds a 1px OVERLAY on top of a hairline the design already
   paints. The overlay starts at scaleX(0) and opacity 0 — invisible — and the
   real border underneath is never touched. So if gsap.min.js 404s, throws, or
   is blocked, the page renders exactly as it does today: the overlays simply
   never draw, and the hairlines they sit on are already there.

   That property is the whole reason this is the signature rather than a set of
   fade-ups: the finished state is byte-identical to the shipped design.
   ========================================================================== */

@property --aq-draw { syntax: '<number>'; inherits: false; initial-value: 0; }
@property --aq-ink  { syntax: '<number>'; inherits: false; initial-value: 0; }

/* The drawing mark. Sits exactly on top of an existing border, in the site's
   blue, and fades its ink back out once it has crossed — so what remains is
   the ordinary hairline the design always had, not a coloured line. */
.aq-rule { position: relative; }
.aq-rule::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  /* Brightest at the leading edge, falling away behind it — a pen tip with ink
     drying in its wake, not a bar sliding across. scaleX squashes the gradient
     with the element, so the bright end stays exactly at the tip at every
     frame. This is what makes the mark read as drawing at low opacity; a flat
     fill has to be twice as bright to say the same thing. */
  background: linear-gradient(90deg,
    rgba(120, 184, 255, 0) 0%,
    currentColor 45%,
    currentColor 88%,
    #dcecff 100%);
  color: #78b8ff;
  transform: scaleX(var(--aq-draw, 0));
  transform-origin: left center;
  opacity: var(--aq-ink, 0);
  pointer-events: none;
  will-change: transform, opacity;
}
.aq-rule--bottom::after { bottom: -1px; }
.aq-rule--top::after    { top: -1px; }
/* The closing sign-off is the one rule that runs back toward the title block.
   The gradient has to flip with it, or the pen tip ends up at the tail. */
.aq-rule--rtl::after {
  transform-origin: right center;
  background: linear-gradient(270deg,
    rgba(120, 184, 255, 0) 0%,
    currentColor 45%,
    currentColor 88%,
    #dcecff 100%);
}
/* The green rule belongs to the credentials strip, where the credential itself
   is already green (glass.css:42). Two colours on the page, used consistently. */
.aq-rule--green::after  { color: #72dfa6; }

/* A tick that strikes down the left of an eyebrow, matching .eyebrow::before's
   existing 24px rule (editorial.css:40) rather than inventing a new mark. */
.aq-tick { position: relative; }

@media (prefers-reduced-motion: reduce) {
  /* Belt and braces. The JS never builds these under reduce — gsap.matchMedia
     gates every effect — but if one ever escaped, it must not paint. */
  .aq-rule::after { display: none; }
}