/* ═════════════════════════════════════════════════════════════════════════════
   ORO · MAGIC PRIMITIVES
   Vanilla ports of three MagicUI components.

   This site is static HTML with no React, no Tailwind and no build step, so the
   shadcn registry packages cannot be installed here. Stripped of their JSX the
   originals are almost entirely CSS, so these are reimplementations rather than
   approximations — same animation, same knobs, same names.

     .orox-marquee   ←  MagicUI <Marquee>      (pure CSS)
     .orob           ←  MagicUI <BentoGrid> / <BentoCard>
     .oroc           ←  MagicUI <Confetti>     (engine in oro-magic.js)

   ADDITIVE ONLY. No selector in this file overrides an existing rule in
   oro.css, oro-sections.css or oro-footer.css.
   ═════════════════════════════════════════════════════════════════════════════ */


/* ─────────────────────────────────────────────────────────────────────────────
   1 · MARQUEE
   MagicUI exposes its knobs as arbitrary Tailwind properties — [--duration:20s]
   and [--gap:1rem]. Those are just custom properties, so the exact same names
   are kept: anything written against the React component transfers unchanged.

     <div class="orox-marquee" data-pause-on-hover style="--duration:20s">
       <div class="orox-marquee__g"> …items… </div>
       <div class="orox-marquee__g" aria-hidden="true"> …same items… </div>
     </div>

   Groups are duplicated in markup rather than cloned in JS — the animation ends
   exactly one group-width along, so a second identical group is what makes the
   loop seamless. Author a third when one group is narrower than the container.

   props → attributes:  reverse → data-reverse · vertical → data-vertical
                        pauseOnHover → data-pause-on-hover
   ───────────────────────────────────────────────────────────────────────────── */
.orox-marquee {
  --duration: 40s;
  --gap: 1rem;
  display: flex;
  flex-direction: row;
  gap: var(--gap);
  overflow: hidden;
}
.orox-marquee[data-vertical] { flex-direction: column; }

.orox-marquee__g {
  display: flex;
  flex-direction: row;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-around;
  gap: var(--gap);
  min-width: 100%;
  animation: orox-marquee-x var(--duration) linear infinite;
}
.orox-marquee[data-vertical] .orox-marquee__g {
  flex-direction: column;
  min-width: 0;
  min-height: 100%;
  animation-name: orox-marquee-y;
}

@keyframes orox-marquee-x {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-100% - var(--gap))); }
}
@keyframes orox-marquee-y {
  from { transform: translateY(0); }
  to   { transform: translateY(calc(-100% - var(--gap))); }
}

.orox-marquee[data-reverse] .orox-marquee__g { animation-direction: reverse; }
.orox-marquee[data-pause-on-hover]:hover .orox-marquee__g,
.orox-marquee[data-pause-on-hover]:focus-within .orox-marquee__g { animation-play-state: paused; }

/* MagicUI fades the ends with four gradient overlays filled from `background`.
   That only works over a flat colour, and every surface here sits on a bloom
   gradient, so the fade is a mask on the marquee itself — background-agnostic
   and one element lighter. */
.orox-marquee[data-fade] {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
}
.orox-marquee[data-fade][data-vertical] {
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
}


/* ─────────────────────────────────────────────────────────────────────────────
   2 · BENTO GRID
   MagicUI's BentoCard hides its body and slides a CTA up on hover. That works
   for four feature tiles; it does not work for a sitemap, where every link has
   to stay visible and clickable for both readers and crawlers. So the card
   shell is taken — radius, hairline, glass, span system, hover lift, pointer
   spotlight — and the content stays put. The hover *background* treatment is
   kept for the one card that carries a marquee.
   ───────────────────────────────────────────────────────────────────────────── */
.orob {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.1vw, 18px);
  padding: clamp(32px, 3.6vw, 60px) 0;
  border-bottom: 1px solid var(--orof-hair);
}

.orob__card {
  position: relative;
  display: flex;
  flex-direction: column;
  grid-column: span 1;
  min-height: clamp(210px, 19vw, 268px);
  padding: clamp(18px, 1.7vw, 26px);
  border: 1px solid var(--orof-hair);
  border-radius: clamp(14px, 1.2vw, 20px);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .028), rgba(255, 255, 255, 0) 62%),
    rgba(10, 8, 5, .34);
  box-shadow: inset 0 1px 0 rgba(245, 242, 236, .055);
  overflow: hidden;
  isolation: isolate;
  transition:
    border-color .5s var(--orof-ease),
    background-color .5s var(--orof-ease),
    transform .5s var(--orof-ease);
}
.orob__card--wide { grid-column: span 2; }

/* Pointer spotlight. --mx/--my are written by oro-magic.js; the fallback keeps
   the card correct before the first pointer event and on touch, where the
   variables are never set at all. */
.orob__card::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: radial-gradient(
    340px circle at var(--mx, 50%) var(--my, 0%),
    rgba(231, 199, 95, .10),
    transparent 68%);
  opacity: 0;
  transition: opacity .5s var(--orof-ease);
  pointer-events: none;
  z-index: 0;
}
.orob__card:hover { border-color: var(--orof-hair-lit); transform: translateY(-3px); }
.orob__card:hover::before,
.orob__card:focus-within::before { opacity: 1; }

/* Everything authored inside a card sits above the spotlight and the marquee —
   except the background layer itself, which is explicitly excluded. */
.orob__card > *:not(.orob__bg) { position: relative; z-index: 2; }

/* Pinned to the foot of the card so the link list above it stays fully legible;
   the list is what the section is for, the marquee is texture. */
.orob__bg {
  position: absolute;
  right: 0;
  bottom: clamp(14px, 1.2vw, 20px);
  left: 0;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  pointer-events: none;
  opacity: .5;
  transition: opacity .6s var(--orof-ease);
}
.orob__bg > * { width: 100%; }
.orob__card:hover .orob__bg { opacity: .8; }

/* The wide card is two columns across, so its list reflows into two and leaves
   the bottom band clear for the marquee. */
.orob__card--wide .orof__list {
  columns: 2;
  column-gap: clamp(18px, 1.8vw, 32px);
}
.orob__card--wide .orof__list li { break-inside: avoid; }
.orob__card--wide { padding-bottom: clamp(96px, 8vw, 124px); }

/* The marquee tile — MagicUI's blurred-figure treatment, sharpening on hover. */
.orob__tile {
  flex-shrink: 0;
  width: clamp(124px, 11vw, 152px);
  padding: 11px 13px;
  border: 1px solid rgba(245, 242, 236, .10);
  border-radius: 12px;
  background: rgba(245, 242, 236, .04);
  filter: blur(1px);
  transition: filter .35s var(--orof-ease), background-color .35s var(--orof-ease);
}
.orob__card:hover .orob__tile { filter: blur(0); }
.orob__tile-n {
  display: block;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.3;
  color: rgba(245, 242, 236, .84);
}
.orob__tile-s {
  display: block;
  margin-top: 5px;
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--orof-gold-bright);
}

@media (max-width: 1200px) {
  .orob { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .orob__card--wide { grid-column: span 2; }
}
@media (max-width: 640px) {
  .orob { grid-template-columns: 1fr; }
  .orob__card,
  .orob__card--wide { grid-column: span 1; min-height: 0; }
  /* One column wide, so the two-column reflow and the marquee band both go. */
  .orob__card--wide .orof__list { columns: 1; }
  .orob__card--wide { padding-bottom: clamp(18px, 1.7vw, 26px); }
  .orob__bg { display: none; }
}


/* ─────────────────────────────────────────────────────────────────────────────
   3 · POSSIBILITIES STRIP
   Replaces the wave-type divider that used to sit here. That band was 494px
   tall to carry ~115px of ink, which is where the empty space came from; this
   is roughly a third of the height and actually says something.
   ───────────────────────────────────────────────────────────────────────────── */
.orox-poss-sc {
  padding-block: clamp(46px, 5vw, 78px);
  overflow: hidden;
}
.orox-poss__title {
  margin: 0 0 clamp(22px, 2.4vw, 38px);
  text-align: center;
  font-size: var(--orox-fs-title, clamp(30px, 3.3vw, 60px));
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -.015em;
  color: var(--orox-paper, #F5F2EC);
}
.orox-poss__title em {
  font-style: normal;
  color: var(--orox-turq, #C9A46A);
}

/* Full-bleed: the rail escapes the content column so the fade resolves at the
   viewport edge rather than mid-page, which is what makes it read as a rail
   and not as a cropped row. */
.orox-poss__rail { width: 100%; }

.orox-poss__c {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1vw, 14px);
  flex-shrink: 0;
  padding: clamp(12px, 1.1vw, 16px) clamp(16px, 1.5vw, 22px);
  border: 1px solid var(--orox-line, rgb(245 242 236 / .10));
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, 0)),
    rgba(10, 8, 5, .38);
  box-shadow: var(--orox-glass-hi, inset 0 1px 0 rgb(245 242 236 / .14));
  transition: border-color .45s var(--orox-ease, cubic-bezier(.19, 1, .22, 1));
}
.orox-poss__c:hover { border-color: var(--orof-hair-lit, rgba(231, 199, 95, .30)); }

.orox-poss__i {
  flex-shrink: 0;
  font-size: clamp(19px, 1.6vw, 24px);
  line-height: 1;
  /* Named explicitly so the glyphs render as colour emoji on every platform
     rather than falling back to the body face and rendering as tofu. */
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}
.orox-poss__tx { display: flex; flex-direction: column; gap: 2px; white-space: nowrap; }
.orox-poss__tx b {
  font-size: var(--orox-fs-h, clamp(15px, 1.1vw, 18px));
  font-weight: 500;
  line-height: 1.2;
  color: var(--orox-paper, #F5F2EC);
}
.orox-poss__tx i {
  font-style: normal;
  font-size: var(--orox-fs-p, clamp(12.5px, .9vw, 15px));
  font-weight: 300;
  line-height: 1.3;
  color: var(--orox-dim, #A39D92);
}

@media (max-width: 640px) {
  .orox-poss__tx { white-space: normal; }
  .orox-poss__c  { padding: 11px 15px; }
}


/* ─────────────────────────────────────────────────────────────────────────────
   4 · CONFETTI
   A full-bleed canvas pinned over its positioned parent. It must never take a
   click — the CTA it celebrates is underneath it.
   ───────────────────────────────────────────────────────────────────────────── */
.oroc {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  pointer-events: none;
}

/* The canvas needs a positioned parent and the footer CTA is `static`. Scoped
   through :has() so it applies only where a canvas was actually placed — this
   cannot reach any other .orof__cta, now or later. */
.orof__cta:has(> .oroc) { position: relative; }


/* ─────────────────────────────────────────────────────────────────────────────
   REDUCED MOTION
   Same layout, same colours, nothing moves. The marquee holds at its start
   position and stays readable; confetti is suppressed at the engine, not here.
   ───────────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .orox-marquee__g { animation: none; }
  .orox-marquee    { flex-wrap: wrap; overflow: auto hidden; }
  .orob__card:hover { transform: none; }
  .orob__card:hover .orob__tile { filter: none; }
  .orob__tile { filter: none; }
}