/* ============================================================================
   ORO — footer
   Branch: assets/oro-visuals · loaded last

   The page previously ended in TWO stacked footers: main's orox-foot-sc block
   and the inherited Webflow .footer-sc. They shared no rhythm, and the legal
   links appeared twice. This composes them into one footer with a single
   vertical rhythm: CTA → figures → brand → sitemap → disclaimer → legal bar.

   Everything is additive. No rule in oro.css or oro-sections.css is edited.

   Motion: every animation is opt-in via .orof-r reveal classes and every one
   has a prefers-reduced-motion counterpart at the bottom of this file. Nothing
   animates layout — only transform, opacity and background-position.
   ========================================================================== */

.orof {
  --orof-gold-deep:   #8a6b22;
  --orof-gold:        #c8a24c;
  --orof-gold-bright: #e7c75f;
  --orof-gold-light:  #f5e4a8;
  --orof-hair:        rgba(255, 255, 255, .085);
  --orof-hair-lit:    rgba(231, 199, 95, .30);
  --orof-dim:         #9aa0a6;
  --orof-ease:        cubic-bezier(.19, 1, .22, 1);

  position: relative;
  padding-bottom: clamp(40px, 4vw, 72px);
  isolation: isolate;
}

/* Ambient bloom, anchored low so it reads as light spilling off the page edge */
.orof::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -38%;
  width: min(1500px, 130%);
  aspect-ratio: 2 / 1;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center,
    rgba(200, 162, 76, .17) 0%,
    rgba(200, 162, 76, .07) 38%,
    rgba(200, 162, 76, 0) 68%);
  pointer-events: none;
  z-index: -1;
}

/* Oversized mark, bled off the bottom edge. Low enough not to compete with
   text; the drift is 20s and pauses under reduced motion. */
.orof__wm {
  position: absolute;
  left: 50%;
  bottom: -14%;
  width: min(1180px, 108%);
  aspect-ratio: 736 / 302;
  transform: translateX(-50%);
  background: var(--orof-gold);
  -webkit-mask: url("../brand/oro-mark.svg") center / contain no-repeat;
          mask: url("../brand/oro-mark.svg") center / contain no-repeat;
  opacity: .045;
  pointer-events: none;
  z-index: -1;
  animation: orof-drift 26s var(--orof-ease) infinite alternate;
}
@keyframes orof-drift {
  from { transform: translateX(-50%) translateY(0)     scale(1);    }
  to   { transform: translateX(-50%) translateY(-14px) scale(1.035); }
}

/* ── reveal ────────────────────────────────────────────────────────────────
   Blocks start displaced and settle when scrolled into view. The .is-in class
   is added by oro-footer.js; without JS everything stays visible, because the
   resting state is the default and only .orof-r:not(.is-in) hides it. */
.orof-r { will-change: transform, opacity; }
.js-orof .orof-r:not(.is-in) {
  opacity: 0;
  transform: translateY(22px);
}
.js-orof .orof-r {
  transition:
    opacity .85s var(--orof-ease) var(--orof-d, 0ms),
    transform .85s var(--orof-ease) var(--orof-d, 0ms);
}

/* ── 1 · CTA band ─────────────────────────────────────────────────────────── */
.orof__cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(180px, 22vw, 330px);
  align-items: center;
  gap: clamp(24px, 4vw, 72px);
  padding-bottom: clamp(38px, 4vw, 68px);
  border-bottom: 1px solid var(--orof-hair);
}

.orof__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: var(--orox-fs-eyebrow, 12px);
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--orof-gold-bright);
  margin-bottom: clamp(14px, 1.4vw, 22px);
}
.orof__eyebrow-rule {
  width: clamp(26px, 3vw, 52px);
  height: 1px;
  background: linear-gradient(90deg, var(--orof-gold-bright), transparent);
}

.orof__cta-title {
  margin: 0 0 clamp(12px, 1.2vw, 20px);
  font-size: clamp(30px, 3.6vw, 62px);
  line-height: 1.04;
  letter-spacing: -.03em;
  font-weight: 700;
  color: #f2f5fa;
}
.orof__cta-title em {
  font-style: normal;
  background-image: linear-gradient(92deg,
    var(--orof-gold-deep), var(--orof-gold) 26%,
    var(--orof-gold-light) 52%, var(--orof-gold) 74%, var(--orof-gold-deep));
  background-size: 220% 100%;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  animation: orof-sheen 9s linear infinite;
}
@keyframes orof-sheen {
  from { background-position: 0% 50%;   }
  to   { background-position: 220% 50%; }
}

.orof__cta-sub {
  margin: 0 0 clamp(20px, 2vw, 32px);
  max-width: 46ch;
  font-size: var(--orox-fs-p, 16px);
  line-height: 1.7;
  font-weight: 300;
  color: var(--orof-dim);
}

.orof__actions { display: flex; flex-wrap: wrap; gap: 12px; }

.orof__btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 22px;
  border-radius: 99px;
  border: 1px solid var(--orof-hair);
  background: rgba(255, 255, 255, .03);
  color: #f2f5fa;
  font-size: var(--orox-fs-p, 15px);
  font-weight: 500;
  text-decoration: none;
  transition: border-color .4s var(--orof-ease), background .4s var(--orof-ease),
              transform .4s var(--orof-ease), color .4s var(--orof-ease);
}
.orof__btn svg { transition: transform .4s var(--orof-ease); }
.orof__btn:hover { border-color: var(--orof-hair-lit); background: rgba(231, 199, 95, .07); transform: translateY(-2px); }
.orof__btn:hover svg { transform: translateX(4px); }

/* Ink on gold: white on this gold measures 2.41:1 and fails AA. Ink is 8.16:1. */
.orof__btn--gold {
  background: linear-gradient(180deg, var(--orof-gold-bright), var(--orof-gold));
  border-color: transparent;
  color: #0b0b0c;
  font-weight: 650;
}
.orof__btn--gold:hover {
  background: linear-gradient(180deg, var(--orof-gold-light), var(--orof-gold-bright));
  transform: translateY(-2px);
  color: #0b0b0c;
}

.orof__cta-art { position: relative; display: grid; place-items: center; }
.orof__coin {
  width: 100%;
  height: auto;
  max-width: 300px;
  display: block;
  animation: orof-float 7s ease-in-out infinite;
  filter: drop-shadow(0 22px 46px rgba(200, 162, 76, .26));
}
@keyframes orof-float {
  0%, 100% { transform: translateY(0)     rotate(0deg);    }
  50%      { transform: translateY(-13px) rotate(-2.2deg); }
}
.orof__coin-halo {
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%,
    rgba(231, 199, 95, .22), rgba(231, 199, 95, 0) 66%);
  animation: orof-pulse 7s ease-in-out infinite;
}
@keyframes orof-pulse {
  0%, 100% { opacity: .55; transform: scale(.94); }
  50%      { opacity: 1;   transform: scale(1.06); }
}

/* ── 2 · figures ──────────────────────────────────────────────────────────── */
.orof__stats {
  list-style: none;
  margin: 0;
  padding: clamp(28px, 3vw, 46px) 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(18px, 2.4vw, 44px);
  border-bottom: 1px solid var(--orof-hair);
}
.orof__stat { position: relative; padding-left: clamp(14px, 1.4vw, 22px); }
.orof__stat::before {
  content: "";
  position: absolute;
  left: 0; top: .18em; bottom: .18em;
  width: 1px;
  background: linear-gradient(180deg, var(--orof-hair-lit), transparent);
}
.orof__stat-n {
  display: block;
  font-size: clamp(19px, 1.9vw, 32px);
  font-weight: 650;
  letter-spacing: -.02em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--orof-gold-bright);
}
.orof__stat-l {
  display: block;
  margin-top: 6px;
  font-size: var(--orox-fs-eyebrow, 12px);
  letter-spacing: .04em;
  color: var(--orof-dim);
  font-weight: 300;
}

/* ── 3 · brand + updates ──────────────────────────────────────────────────── */
.orof__mid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(28px, 4vw, 80px);
  padding: clamp(30px, 3.4vw, 58px) 0;
  border-bottom: 1px solid var(--orof-hair);
}

.orof__mark {
  display: inline-flex;
  flex-direction: column;
  gap: 8px;
  text-decoration: none;
  margin-bottom: clamp(14px, 1.4vw, 22px);
}
.orof__mark img {
  width: clamp(104px, 9vw, 150px);
  height: auto;
  display: block;
  transition: transform .5s var(--orof-ease), filter .5s var(--orof-ease);
}
.orof__mark:hover img {
  transform: translateY(-2px);
  filter: drop-shadow(0 6px 20px rgba(231, 199, 95, .34));
}
.orof__mark-sub {
  font-size: var(--orox-fs-eyebrow, 12px);
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--orof-dim);
  font-weight: 500;
}

.orof__blurb {
  margin: 0 0 clamp(16px, 1.7vw, 26px);
  max-width: 38ch;
  font-size: var(--orox-fs-p, 16px);
  line-height: 1.7;
  font-weight: 300;
  color: var(--orof-dim);
}

.orof__chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 17px;
  border-radius: 99px;
  border: 1px solid var(--orof-hair);
  background: rgba(255, 255, 255, .03);
  font-size: var(--orox-fs-eyebrow, 12px);
  letter-spacing: .05em;
  color: #d6dade;
}
.orof__chip-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--orof-gold-bright);
  box-shadow: 0 0 0 0 rgba(231, 199, 95, .55);
  animation: orof-ping 2.6s var(--orof-ease) infinite;
}
@keyframes orof-ping {
  0%        { box-shadow: 0 0 0 0   rgba(231, 199, 95, .55); }
  70%, 100% { box-shadow: 0 0 0 9px rgba(231, 199, 95, 0);   }
}

.orof__note-t {
  margin: 0 0 8px;
  font-size: var(--orox-fs-h, 20px);
  font-weight: 600;
  color: #f2f5fa;
  letter-spacing: -.01em;
}
.orof__note-s {
  margin: 0 0 clamp(16px, 1.6vw, 24px);
  max-width: 42ch;
  font-size: var(--orox-fs-p, 15px);
  line-height: 1.7;
  font-weight: 300;
  color: var(--orof-dim);
}

/* Build status — the roadmap's four phases and their real state. Deliberately
   NOT a subscribe field: the site is static with no backend, so a form would
   collect an address and go nowhere. This carries information instead. */
.orof__status { list-style: none; margin: 0; padding: 0; max-width: 480px; }

.orof__st {
  position: relative;
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 12px;
  padding: 11px 0 11px 20px;
  border-top: 1px solid var(--orof-hair);
  font-size: clamp(12.5px, .92vw, 15px);
}
.orof__st:first-child { border-top: 0; }

/* state dot on the rail */
.orof__st::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 1.15em;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #3a3f44;
}
.orof__st.is-done::before { background: var(--orof-gold); }
.orof__st.is-live::before {
  background: var(--orof-gold-bright);
  box-shadow: 0 0 0 0 rgba(231, 199, 95, .5);
  animation: orof-ping 2.6s var(--orof-ease) infinite;
}

.orof__st-q { color: #7e848a; letter-spacing: .04em; font-weight: 500; }
.orof__st-t { color: #d6dade; font-weight: 300; line-height: 1.4; }
.orof__st-s {
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 600;
  color: #71767b;
  white-space: nowrap;
}
.orof__st.is-done .orof__st-s { color: var(--orof-gold); }
.orof__st.is-live .orof__st-s { color: var(--orof-gold-bright); }

.orof__status-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 16px;
  font-size: var(--orox-fs-p, 14px);
  font-weight: 500;
  color: var(--orof-gold-bright);
  text-decoration: none;
  transition: gap .35s var(--orof-ease), color .35s var(--orof-ease);
}
.orof__status-link:hover { gap: 12px; color: var(--orof-gold-light); }

.orof__field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 7px 7px 7px 20px;
  border-radius: 99px;
  border: 1px solid var(--orof-hair);
  background: rgba(255, 255, 255, .028);
  text-decoration: none;
  max-width: 440px;
  transition: border-color .4s var(--orof-ease), background .4s var(--orof-ease);
}
.orof__field:hover { border-color: var(--orof-hair-lit); background: rgba(231, 199, 95, .05); }
.orof__field-txt {
  font-size: var(--orox-fs-p, 15px);
  color: #e8eaed;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.orof__field-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: none;
  padding: 11px 19px;
  border-radius: 99px;
  background: linear-gradient(180deg, var(--orof-gold-bright), var(--orof-gold));
  color: #0b0b0c;
  font-size: var(--orox-fs-eyebrow, 13px);
  font-weight: 650;
  letter-spacing: .01em;
}
.orof__field-btn svg { transition: transform .4s var(--orof-ease); }
.orof__field:hover .orof__field-btn svg { transform: translateX(3px); }

/* ── 4 · sitemap ──────────────────────────────────────────────────────────── */
.orof__grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: clamp(20px, 2.2vw, 40px);
  padding: clamp(32px, 3.6vw, 60px) 0;
  border-bottom: 1px solid var(--orof-hair);
}
.orof__ct {
  margin: 0 0 clamp(13px, 1.3vw, 20px);
  font-size: var(--orox-fs-eyebrow, 12px);
  letter-spacing: .15em;
  text-transform: uppercase;
  font-weight: 600;
  color: #fff;
}
.orof__list { list-style: none; margin: 0; padding: 0; }
.orof__list li { margin-bottom: clamp(9px, .95vw, 15px); }

.orof__list a {
  position: relative;
  display: inline-block;
  font-size: var(--orox-fs-p, 15px);
  font-weight: 300;
  line-height: 1.45;
  color: var(--orof-dim);
  text-decoration: none;
  transition: color .35s var(--orof-ease), transform .35s var(--orof-ease);
}
/* underline grows from the left rather than fading, so the hover reads as a
   deliberate mark being drawn */
.orof__list a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, var(--orof-gold-bright), transparent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s var(--orof-ease);
}
.orof__list a:hover,
.orof__list a:focus-visible { color: var(--orof-gold-light); transform: translateX(3px); }
.orof__list a:hover::after,
.orof__list a:focus-visible::after { transform: scaleX(1); }

/* Not-yet-shipped destinations are shown as inert items with a tag, rather than
   as links to nowhere. */
/* inline, not inline-flex: a flex box makes the badge a sibling column, so a
   label that wraps to two lines leaves the badge stranded beside the block
   instead of following the last word. */
.orof__soon {
  display: inline;
  font-size: var(--orox-fs-p, 15px);
  font-weight: 300;
  line-height: 1.45;
  color: #6d7378;
  cursor: default;
}
.orof__soon i {
  display: inline-block;
  margin-left: 7px;
  vertical-align: 2px;
  font-style: normal;
  font-size: 9.5px;
  letter-spacing: .11em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 5px;
  white-space: nowrap;
  color: var(--orof-gold-bright);
  border: 1px solid rgba(231, 199, 95, .26);
  background: rgba(231, 199, 95, .05);
}

.orof__disclaimer {
  margin: clamp(24px, 2.6vw, 40px) 0 0;
  max-width: 96ch;
  font-size: clamp(11.5px, .86vw, 14px);
  line-height: 1.75;
  font-weight: 300;
  color: #71767b;
}

:where(.orof) a:focus-visible,
:where(.orof) .orof__mark:focus-visible {
  outline: 2px solid var(--orof-gold-bright);
  outline-offset: 3px;
  border-radius: 3px;
}

/* ── 5 · legal bar (the inherited .footer-sc, recomposed) ─────────────────── */
.footer-sc {
  position: relative;
  z-index: 2;
  padding-top: 0 !important;
}
.footer-sc .footer-top {
  padding-bottom: clamp(26px, 2.6vw, 44px);
  gap: 20px;
  flex-wrap: wrap;
}
.footer-sc .footer-down {
  border-top: 1px solid var(--orof-hair, rgba(255, 255, 255, .085));
  padding-top: clamp(24px, 2.4vw, 40px);
  gap: 18px;
  flex-wrap: wrap;
}
.footer-mail-2 {
  position: relative;
  text-decoration: none;
  transition: color .35s cubic-bezier(.19, 1, .22, 1);
}
.footer-mail-2::after {
  content: "";
  position: absolute;
  left: 0; bottom: -.12em;
  width: 100%; height: 1px;
  background: currentColor;
  opacity: .45;
  transform: scaleX(1);
  transform-origin: right;
  transition: transform .5s cubic-bezier(.19, 1, .22, 1);
}
.footer-mail-2:hover { color: #f5e4a8; }
.footer-mail-2:hover::after { transform: scaleX(0); }

/* Social buttons: circular, hairline, gold ring on hover */
.footer-sc .f-media-link {
  background-color: rgba(255, 255, 255, .035) !important;
  border: 1px solid rgba(255, 255, 255, .085);
  border-radius: 50% !important;
  color: #c8ccd0;
  transition: transform .4s cubic-bezier(.19, 1, .22, 1),
              border-color .4s cubic-bezier(.19, 1, .22, 1),
              color .4s cubic-bezier(.19, 1, .22, 1),
              box-shadow .4s cubic-bezier(.19, 1, .22, 1);
}
.footer-sc .f-media-link:hover {
  transform: translateY(-3px);
  border-color: rgba(231, 199, 95, .42);
  color: #f5e4a8;
  box-shadow: 0 8px 22px rgba(200, 162, 76, .20);
}
.footer-sc .terms-link:hover,
.footer-sc .terms-link-2:hover { color: #f5e4a8; }

/* ── responsive ───────────────────────────────────────────────────────────── */
/* Seven columns only where they genuinely fit. At 1440 they force labels like
   "Learn-to-earn pool — 40%" onto three lines, which reads as broken rather
   than dense. */
@media (max-width: 1499px) {
  .orof__grid  { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: clamp(26px, 2.6vw, 42px); }
}
@media (max-width: 991px) {
  .orof__cta   { grid-template-columns: 1fr; }
  .orof__cta-art { display: none; }
  .orof__mid   { grid-template-columns: 1fr; }
  .orof__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .orof__grid  { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .orof__grid  { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 18px; }
  .orof__field { flex-direction: column; align-items: stretch; gap: 10px; padding: 14px; border-radius: 18px; }
  .orof__field-txt { text-align: center; }
  .orof__field-btn { justify-content: center; }
  .orof__wm { bottom: -6%; opacity: .035; }
}
@media (max-width: 420px) {
  .orof__stats { grid-template-columns: 1fr; }
  .orof__grid  { grid-template-columns: 1fr; }
}

/* ── reduced motion ───────────────────────────────────────────────────────────
   Same layout, same colours, no movement. Reveals resolve immediately so no
   content can be left invisible. */
@media (prefers-reduced-motion: reduce) {
  .orof__wm,
  .orof__coin,
  .orof__coin-halo,
  .orof__chip-dot,
  .orof__cta-title em { animation: none !important; }
  .orof__cta-title em { background-position: 40% 50%; }

  .js-orof .orof-r,
  .js-orof .orof-r:not(.is-in) {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .orof__btn:hover,
  .orof__btn--gold:hover,
  .footer-sc .f-media-link:hover,
  .orof__list a:hover { transform: none; }
  .orof__list a::after { transition: none; }
}