/* ===================================================================
   Durusi — soft-ribbon band
   DBB "Soft-ribbon pattern — exact spec" (05 Brand Colours).

   The base gradient lives here and stays crisp; the three blurred sine
   ribbons are generated by ribbon.js from the band's measured box, so
   the recipe holds at every viewport. Set the pair with two custom
   properties — nothing else in this file is colour-specific:

     .ribbon-band.rb-electric  Electric Teal  -> Blackcurrant
     .ribbon-band.rb-lilac     Bright Lilac   -> Blackcurrant
     .ribbon-band.rb-magenta   Magenta        -> Blackcurrant
     .ribbon-band.rb-mint      Vivid Mint     -> Deep Teal

   Text colour: the top of the band is a bright, high-luminance colour and
   the bottom is near-black, so a single text colour cannot serve both.
   Use .ink-top over the bright upper third and .ink-bottom below it. Both
   pairings clear WCAG AAA — blackcurrant on electric teal is 9.8:1 and
   white on blackcurrant is 16.0:1.
   =================================================================== */

.ribbon-band {
  --ribbon-top: #00E0E8;
  --ribbon-bottom: #2A1B38;

  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(180deg, var(--ribbon-top) 0%, var(--ribbon-bottom) 100%);
}

.ribbon-band.rb-electric { --ribbon-top: #00E0E8; --ribbon-bottom: #2A1B38; }
.ribbon-band.rb-lilac    { --ribbon-top: #CA9FFF; --ribbon-bottom: #2A1B38; }
.ribbon-band.rb-magenta  { --ribbon-top: #FE019A; --ribbon-bottom: #2A1B38; }
.ribbon-band.rb-mint     { --ribbon-top: #45FBB2; --ribbon-bottom: #0C333B; }

/* Artwork layer. Sits behind content, never intercepts pointer events. */
.ribbon-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.ribbon-svg { display: block; width: 100%; height: 100%; }

/* Everything that is not the artwork sits above it. */
.ribbon-band > *:not(.ribbon-bg) { position: relative; z-index: 1; }

/* ── ink ──────────────────────────────────────────────────────────────
   Deliberately mirrors the DBB swatch cards themselves, which label the
   bright end in dark ink and the dark end in white. */
/* !important is not decoration here. glass.css carries
   `.hero h1, main h1, main h2, main h3, main h4, ...{color:#1A1914 !important}`
   to force headings to ink on the light sections, and it has no exclusion for
   a dark band. Without matching !important, every heading inside this
   component renders near-black on a dark gradient. Same story for body copy
   and links. Any new dark band on this site has to answer !important with
   !important — that is the house style, not a shortcut. */
.ribbon-band .ink-top,
.ribbon-band .ink-top h1,
.ribbon-band .ink-top h2,
.ribbon-band .ink-top h3,
.ribbon-band .ink-top p { color: var(--ribbon-bottom) !important; }

.ribbon-band .ink-bottom,
.ribbon-band .ink-bottom h1,
.ribbon-band .ink-bottom h2,
.ribbon-band .ink-bottom h3,
.ribbon-band .ink-bottom p { color: #fff !important; }

.ribbon-band .ink-top .eyebrow  { color: color-mix(in srgb, var(--ribbon-bottom) 72%, transparent); }
.ribbon-band .ink-bottom .eyebrow { color: rgba(255, 255, 255, 0.82); }

/* ── motion ───────────────────────────────────────────────────────────
   sin has period λ, so translating a ribbon by exactly one wavelength is
   seamless. Three long, mutually prime-ish periods keep the composite
   from visibly looping. Only runs once ribbon.js has fitted the artwork
   to the real box, and never under reduced-motion. */
@keyframes ribbonDrift {
  from { transform: translateX(0); }
  to   { transform: translateX(var(--drift)); }
}

@media (prefers-reduced-motion: no-preference) {
  .ribbon-live .ribbon-r {
    animation: ribbonDrift var(--dur, 70s) linear infinite;
    will-change: transform;
  }
}

/* RTL: the artwork is an abstract wave, so it is not mirrored — but the
   drift direction is flipped so it still travels with the reading eye. */
[dir="rtl"] .ribbon-live .ribbon-r { animation-direction: reverse; }