/* ─── "Power Your Learning with ORO" card illustration ────────────────────────
   HTML/CSS replacement for assets/lottie/oro-card3.json.

   WHY THIS IS NOT A LOTTIE ANY MORE
   That file had eight layers and six embedded rasters, and every one of the six
   was off-brand: two blue sync glyphs, a blue ring, a blue glow, and two pale
   cyan discs each carrying the ETHEREUM logo. Nothing in it was vector, so
   there was no path to recolour and no text to retype — the artwork WAS the
   file. Two separate problems, not one:

     · palette   — saturated blue and pale cyan on a gold-on-black page
     · substance — an Ethereum mark asserts a chain, and this project's own
                   ledger still reads "Web3 settlement — Planned. No contract
                   is deployed." The card promised a decision nobody has made.

   Same call, and the same fallback, as oro-island.css took for the Rive binary.
   Costs 130 KB less and one fewer network fetch than the file it replaces.

   THE COMPOSITION is the original's, rebuilt rather than reinvented: a dark
   central disc, a smaller satellite above-left, a ring travelling around them,
   and a token badge at the lower right. Only the palette and the badge change
   — gold ramp instead of blue, the ORO mark instead of Ethereum.

   UNITS are cqw against the container, never rem. `html{font-size}` on this
   build is viewport-relative (1rem == 1vw), so rem here would resize the art
   against the viewport instead of against its own card.

   ADDITIVE LAYER. Styles only .oro-card3 and its own oroc3-* children; it does
   not touch .benefits-card-illustration, which still owns the positioning.
   ───────────────────────────────────────────────────────────────────────── */

.oro-card3 {
  container-type: inline-size;
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}

/* the square the whole illustration is laid out inside */
.oro-card3__stage {
  position: relative;
  /* cqw only. `container-type: inline-size` establishes an INLINE container, so
     it supplies cqw/cqi but not cqh — a cqh here would silently resolve against
     the viewport and blow the art up on a short card. */
  width: 72cqw;
  max-height: 100%;
  aspect-ratio: 1;
  --oroc3-gold:  #C9A46A;
  --oroc3-hi:    #EAD795;
  --oroc3-spec:  #FFF2A9;
  --oroc3-deep:  #8C6743;
  --oroc3-ink:   #0A0A0A;
}

/* ── ambient bloom ───────────────────────────────────────────────────────── */
.oroc3-bloom {
  position: absolute;
  inset: -18%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 46%,
    rgb(201 164 106 / .26) 0%,
    rgb(201 164 106 / .10) 34%,
    transparent 68%);
  animation: oroc3-breathe 7s ease-in-out infinite;
}

/* ── the travelling ring ─────────────────────────────────────────────────────
   A conic sweep masked to an annulus. Masking rather than a border keeps the
   gradient continuous around the circle instead of clipping it at four corners. */
.oroc3-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg,
    transparent 0deg,
    rgb(201 164 106 / .12) 40deg,
    var(--oroc3-gold) 130deg,
    var(--oroc3-spec) 172deg,
    var(--oroc3-hi) 200deg,
    rgb(201 164 106 / .10) 280deg,
    transparent 340deg);
  -webkit-mask: radial-gradient(circle, transparent 0 calc(50% - 2.2cqw), #000 calc(50% - 2.2cqw) 50%, transparent 50%);
          mask: radial-gradient(circle, transparent 0 calc(50% - 2.2cqw), #000 calc(50% - 2.2cqw) 50%, transparent 50%);
  animation: oroc3-spin 14s linear infinite;
}

/* a second, slower, fainter ring going the other way — depth without noise */
.oroc3-ring--slow {
  inset: 9%;
  opacity: .5;
  animation-duration: 22s;
  animation-direction: reverse;
}

/* ── the central disc ────────────────────────────────────────────────────── */
.oroc3-disc {
  position: absolute;
  inset: 17%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 38% 30%, #1a1a1a 0%, var(--oroc3-ink) 62%);
  box-shadow:
    inset 0 0 0 .35cqw rgb(201 164 106 / .30),
    inset 0 1.4cqw 3cqw rgb(0 0 0 / .8),
    0 2cqw 6cqw rgb(0 0 0 / .55);
}

/* the specular arc that tells the eye the disc is a solid, not a hole */
.oroc3-disc::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(146deg,
    rgb(255 242 169 / .16) 0%,
    transparent 38%);
}

/* ── the satellite, above and left ───────────────────────────────────────── */
.oroc3-sat {
  position: absolute;
  top: 1%;
  left: 17%;
  width: 21%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, #202020 0%, #070707 70%);
  box-shadow:
    inset 0 0 0 .3cqw rgb(201 164 106 / .26),
    0 1cqw 2.4cqw rgb(0 0 0 / .6);
  animation: oroc3-float 5.5s ease-in-out infinite;
}

/* ── the token badge, lower right ─────────────────────────────────────────
   Where the Ethereum mark used to sit. The mark is the real brand asset, drawn
   as a mask so it takes the gold ramp rather than shipping a second colour. */
.oroc3-badge {
  position: absolute;
  right: 2%;
  bottom: 9%;
  width: 30%;
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(158deg, var(--oroc3-spec) 0%, var(--oroc3-gold) 46%, var(--oroc3-deep) 100%);
  box-shadow:
    inset 0 .3cqw .4cqw rgb(255 242 169 / .7),
    inset 0 -.5cqw .8cqw rgb(90 62 30 / .55),
    0 1.4cqw 3.4cqw rgb(0 0 0 / .55);
  animation: oroc3-float 5.5s ease-in-out infinite .7s;
}

.oroc3-badge__mark {
  width: 62%;
  height: 42%;
  background: var(--oroc3-ink);
  -webkit-mask: url(../brand/oro-mark.svg) center / contain no-repeat;
          mask: url(../brand/oro-mark.svg) center / contain no-repeat;
}

/* ── motion ──────────────────────────────────────────────────────────────── */
@keyframes oroc3-spin   { to { transform: rotate(360deg); } }
@keyframes oroc3-float  { 0%, 100% { translate: 0 0; } 50% { translate: 0 -3.2%; } }
@keyframes oroc3-breathe{ 0%, 100% { opacity: .82; } 50% { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .oroc3-ring,
  .oroc3-sat,
  .oroc3-badge,
  .oroc3-bloom { animation: none; }
}

/* Gradients and masks do not survive forced colours; give the shapes edges. */
@media (forced-colors: active) {
  .oroc3-disc,
  .oroc3-sat,
  .oroc3-badge { border: 1px solid CanvasText; }
  .oroc3-ring,
  .oroc3-bloom { display: none; }
}