/* ─── Hero dynamic island ──────────────────────────────────────────────────
   HTML/CSS replacement for assets/images/oro-dynamic-island-1.riv.

   WHY THIS IS NOT A RIVE FILE ANY MORE
   The island's copy read "Congrats! / You swapped crypto!" and its confirm glyph
   was the inherited template blue. Its two embedded rasters (a stock photograph and the
   Bitcoin + Ethereum pair) were swappable and were swapped — but the copy and
   the glyph are VECTOR PATHS inside the binary, with no string in the file to
   retype and no .rev source to re-export. VISUALS_PLAN Track F names this exact
   case and its fallback: "binary — if it cannot be re-authored, replace the hero
   island with an HTML/CSS equivalent". That is what this is.

   It was the single most prominent element on the page, and it claimed a
   payments product on an education token.

   GEOMETRY is measured off the last Rive render at 1440px wide, where the
   .hero-phone-island box is 735 × 417 and the pill sits at left 28.10%,
   top 51.92%, 56.33% × 19.78%. Everything below is expressed in `cqw` against
   that box so the island scales exactly as the letterboxed canvas used to —
   and so it is immune to this site's 1rem == 1vw root sizing.

   ADDITIVE LAYER. It styles only .oro-island and its own oroi-* children.
   It does not touch .hero-phone-island, which still owns the positioning.
   ───────────────────────────────────────────────────────────────────────── */

.oro-island {
  container-type: inline-size;
  pointer-events: none;
}

/* ---- the pill ----------------------------------------------------------- */
.oro-island .oroi-pill {
  position: absolute;
  left: 28.1%;
  top: 51.92%;
  width: 56.33%;
  height: 11.22cqw;                       /* 82.5 / 735 — the measured height */

  display: flex;
  align-items: center;
  gap: 1.6cqw;
  padding: 0 1.55cqw 0 1.05cqw;

  border-radius: 999px;
  background: #050505;
  /* the rim is the only gold on the surface itself: a gold slab here would turn
     the phone's midtones olive and fight the ground */
  box-shadow:
    inset 0 0 0 .12cqw rgba(231, 199, 95, .14),
    0 1.4cqw 3.4cqw rgba(0, 0, 0, .55);

  animation: oroi-in .9s cubic-bezier(.2, .8, .2, 1) both;
}

/* ---- the coin pair -----------------------------------------------------
   Two ORO discs at the overlap the Bitcoin/Ethereum pair used to hold, so the
   island's left mass is unchanged. The rear disc is held back in tone so the
   pair still reads as two objects at depth rather than one gold blob. */
.oro-island .oroi-coins {
  position: relative;
  flex: none;
  width: 7.9cqw;
  height: 7.9cqw;
}
.oro-island .oroi-coin {
  position: absolute;
  border-radius: 50%;
  display: block;
}
.oro-island .oroi-coin::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 58%;
  height: 58%;
  background: rgba(10, 8, 4, .86);
  -webkit-mask: url(../brand/oro-mark.svg) no-repeat center / contain;
          mask: url(../brand/oro-mark.svg) no-repeat center / contain;
}
.oro-island .oroi-coin-b {
  left: 0; top: 0; width: 63%; height: 63%;
  background: radial-gradient(120% 120% at 32% 24%, #E7C75F 0%, #C8A24C 34%, #A3803A 68%, #6E541B 100%);
  box-shadow: inset 0 0 0 .1cqw rgba(8, 8, 8, .85);
}
.oro-island .oroi-coin-f {
  right: 0; bottom: 0; width: 64%; height: 64%;
  background: radial-gradient(120% 120% at 30% 22%, #F5E4A8 0%, #E7C75F 26%, #C8A24C 58%, #8A6B22 100%);
  box-shadow: inset 0 0 0 .1cqw rgba(8, 8, 8, .9), -.22cqw -.22cqw 0 .22cqw rgba(5, 5, 5, .95);
}

/* ---- the copy ------------------------------------------------------------
   Two rows, the same 1 : 1.5 relationship the original held. Headings never go
   gold — near-white on the dark plate, with the eyebrow dropped to .55. */
.oro-island .oroi-copy {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .25cqw;
}
.oro-island .oroi-eyebrow {
  font-size: 1.78cqw;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: 0;
  color: rgba(242, 245, 250, .55);
  white-space: nowrap;
}
.oro-island .oroi-title {
  font-size: 2.72cqw;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -.02em;
  color: #F2F5FA;
  white-space: nowrap;
}

/* ---- the camera lens ----------------------------------------------------
   The phone's punch-hole, not branding. It keeps its place and its dark mass;
   only its specular loses the blue. */
.oro-island .oroi-lens {
  flex: none;
  width: 2.5cqw;
  height: 2.5cqw;
  border-radius: 50%;
  background:
    radial-gradient(60% 60% at 36% 32%, rgba(231, 199, 95, .30) 0%, rgba(231, 199, 95, 0) 60%),
    radial-gradient(100% 100% at 50% 50%, #14120c 0%, #070706 100%);
  box-shadow: inset 0 0 0 .08cqw rgba(255, 255, 255, .06);
}

/* ---- the confirm glyph ---------------------------------------------------
   Was an inherited blue disc. Same tinted-disc + bright-glyph treatment, moved
   onto the gold ramp — a tint rather than a fill, because a solid gold disc
   this size becomes the brightest thing in the hero and steals the headline. */
.oro-island .oroi-check {
  flex: none;
  display: grid;
  place-items: center;
  width: 7.62cqw;                         /* 56 / 735 — the measured disc */
  height: 7.62cqw;
  border-radius: 50%;
  background: radial-gradient(100% 100% at 50% 40%, rgba(231, 199, 95, .16) 0%, rgba(231, 199, 95, .06) 100%);
  box-shadow: inset 0 0 0 .1cqw rgba(231, 199, 95, .18);
}
.oro-island .oroi-check svg {
  width: 55%;
  height: 55%;
  color: #E7C75F;
  animation: oroi-tick .5s cubic-bezier(.2, .8, .2, 1) .55s both;
}
.oro-island .oroi-check path {
  stroke-dasharray: 24;
  stroke-dashoffset: 0;
}

/* ---- motion --------------------------------------------------------------
   One entrance, then still. The original idled; a hero element that keeps
   moving under the headline costs more than it returns. */
@keyframes oroi-in {
  from { opacity: 0; transform: translateY(-14%) scale(.965); }
  to   { opacity: 1; transform: none; }
}
@keyframes oroi-tick {
  from { opacity: 0; transform: scale(.7); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .oro-island .oroi-pill,
  .oro-island .oroi-check svg { animation: none; }
}