/* ==========================================================================
   Venuralink · site-motion.css
   Additive-only motion layer. Zero edits to site.css.

   Ships three features:
     F02 · Card hover choreography (auto-enhances .venue and .v-card)
     F03 · Scroll-reveal utility (opt-in via data-reveal)
     F04 · Live activity ticker (opt-in via .vr-ticker)

   Rules honoured:
     - All motion respects prefers-reduced-motion
     - Never moves more than 8px
     - Uses existing brand tokens (--copper, --emerald, --navy, etc.)
     - Duration 180-500ms, cubic-bezier(.2,.7,.3,1) for entrances
     - Uses higher specificity than existing rules so cascade wins without
       overriding your existing CSS (safe to disable this file → instant revert)

   Session 21 · 24 Sep 2026
   ========================================================================== */


/* --------------------------------------------------------------------------
   F02 · Card hover choreography
   Enhances existing .venue.venue--v2 and .v-card cards.
   Additive: existing translateY(-2px) is REPLACED by our transform via the
   higher-specificity selectors below. Existing transition is preserved.
   -------------------------------------------------------------------------- */

/* Venue card (venues.html) — .venue.venue--v2 chain gives specificity 0,0,2,0
   which beats .venue:hover (0,0,1,1). */
article.venue.venue--v2{
  transition:
    transform .32s cubic-bezier(.2,.7,.3,1),
    box-shadow .32s cubic-bezier(.2,.7,.3,1),
    border-color .32s ease !important;
}
article.venue.venue--v2:hover{
  transform:translateY(-6px) !important;
  box-shadow:
    0 24px 48px -12px rgba(10,25,47,0.22),
    0 8px 16px -8px rgba(10,25,47,0.12) !important;
  border-color:rgba(10,25,47,0.14) !important;
}

/* Vendor card (vendors.html) — .v-card is specificity 0,0,1,0; we bump to
   0,0,2,0 by prepending :where(article, button, a).
   NOTE: :where() has 0 specificity, so the compound is just .v-card = 0,0,1,0.
   Use .v-card.v-card instead to force 0,0,2,0 without breaking semantics. */
.v-card.v-card{
  transition:
    transform .32s cubic-bezier(.2,.7,.3,1),
    box-shadow .32s cubic-bezier(.2,.7,.3,1),
    border-color .32s ease !important;
}
.v-card.v-card:hover{
  transform:translateY(-6px) !important;
  box-shadow:
    0 24px 48px -12px rgba(10,25,47,0.22),
    0 8px 16px -8px rgba(10,25,47,0.12) !important;
  border-color:rgba(10,25,47,0.14) !important;
}

/* Media eyebrow micro-shift on hover — the "Ikoyi · Lagos" pill nudges right */
article.venue.venue--v2 .venue__eyebrow,
.v-card .v-card__eyebrow{
  transition: transform .32s cubic-bezier(.2,.7,.3,1);
}
article.venue.venue--v2:hover .venue__eyebrow,
.v-card:hover .v-card__eyebrow{
  transform: translateX(3px);
}

/* Meter dots — a subtle brightening pulse on hover so the card feels alive.
   The .meter__dots colour is var(--vr-green) or var(--emerald); we lift
   opacity slightly and let the existing colour do the work. */
article.venue.venue--v2 .meter__dots,
.v-card .v-card__meter-dots{
  transition: filter .32s cubic-bezier(.2,.7,.3,1);
}
article.venue.venue--v2:hover .meter__dots,
.v-card:hover .v-card__meter-dots{
  filter: brightness(1.08) saturate(1.15);
}

/* Verified-chip pulse dot — bloom the halo slightly on hover.
   The existing box-shadow is `0 0 0 2px rgba(217,122,58,0.15)` on venues
   or `rgba(200,109,81,.15)` on vendors — we just widen the ring. */
article.venue.venue--v2 .verified-chip::before,
.v-card .v-card__verified::before{
  transition: box-shadow .32s cubic-bezier(.2,.7,.3,1);
}
article.venue.venue--v2:hover .verified-chip::before{
  box-shadow: 0 0 0 4px rgba(217,122,58,0.20) !important;
}
.v-card:hover .v-card__verified::before{
  box-shadow: 0 0 0 4px rgba(200,109,81,0.20) !important;
}

/* Reduced motion — kill card lift + keep colour changes only */
@media (prefers-reduced-motion: reduce){
  article.venue.venue--v2,
  article.venue.venue--v2:hover,
  .v-card.v-card,
  .v-card.v-card:hover{
    transform: none !important;
    transition: border-color .18s ease, box-shadow .18s ease !important;
  }
  article.venue.venue--v2 .venue__eyebrow,
  .v-card .v-card__eyebrow,
  article.venue.venue--v2 .meter__dots,
  .v-card .v-card__meter-dots{
    transition: none !important;
    transform: none !important;
    filter: none !important;
  }
}


/* --------------------------------------------------------------------------
   F03 · Scroll-reveal (opt-in)
   Any element with data-reveal fades + lifts as it enters the viewport.
   If element also has data-reveal-stagger, direct children stagger 120ms.
   -------------------------------------------------------------------------- */

[data-reveal]{
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity .55s cubic-bezier(.2,.7,.3,1),
    transform .55s cubic-bezier(.2,.7,.3,1);
  will-change: opacity, transform;
}
[data-reveal].vr-in{
  opacity: 1;
  transform: translateY(0);
}

/* Stagger children: each direct child of a [data-reveal-stagger] element
   gets an incremental delay after the parent enters. Cap at 8 children. */
[data-reveal-stagger] > *{
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity .55s cubic-bezier(.2,.7,.3,1),
    transform .55s cubic-bezier(.2,.7,.3,1);
  will-change: opacity, transform;
}
[data-reveal-stagger].vr-in > *{ opacity: 1; transform: translateY(0); }
[data-reveal-stagger].vr-in > *:nth-child(1){ transition-delay: 0ms; }
[data-reveal-stagger].vr-in > *:nth-child(2){ transition-delay: 100ms; }
[data-reveal-stagger].vr-in > *:nth-child(3){ transition-delay: 200ms; }
[data-reveal-stagger].vr-in > *:nth-child(4){ transition-delay: 300ms; }
[data-reveal-stagger].vr-in > *:nth-child(5){ transition-delay: 400ms; }
[data-reveal-stagger].vr-in > *:nth-child(6){ transition-delay: 500ms; }
[data-reveal-stagger].vr-in > *:nth-child(7){ transition-delay: 600ms; }
[data-reveal-stagger].vr-in > *:nth-child(8){ transition-delay: 700ms; }

/* Reduced motion — no fade, no lift, just show */
@media (prefers-reduced-motion: reduce){
  [data-reveal],
  [data-reveal-stagger] > *{
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}


/* --------------------------------------------------------------------------
   F04 · Live activity ticker
   A small line with a pulsing dot + rotating message.
   Sits under the hero waitlist form on index.html.
   -------------------------------------------------------------------------- */

.vr-ticker{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
  padding: 8px 16px 8px 14px;
  background: rgba(10,25,47,0.04);
  border: 1px solid rgba(10,25,47,0.08);
  border-radius: 999px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(10,25,47,0.70);
  font-weight: 500;
  max-width: 100%;
  overflow: hidden;
}

/* Dark variant for use inside .section--navy */
.section--navy .vr-ticker,
.vr-ticker--dark{
  background: rgba(253,251,247,0.06);
  border-color: rgba(253,251,247,0.14);
  color: rgba(253,251,247,0.75);
}

.vr-ticker__dot{
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #C86D51; /* copper */
  flex-shrink: 0;
}
.vr-ticker__dot::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid #C86D51;
  animation: vr-ticker-pulse 2.4s cubic-bezier(.2,.7,.3,1) infinite;
}
@keyframes vr-ticker-pulse{
  0%   { transform: scale(1);   opacity: 0.9; }
  70%  { transform: scale(2.6); opacity: 0;   }
  100% { transform: scale(2.6); opacity: 0;   }
}

.vr-ticker__text{
  display: inline-block;
  min-height: 1em;
  transition:
    opacity .28s cubic-bezier(.2,.7,.3,1),
    transform .28s cubic-bezier(.2,.7,.3,1);
}
.vr-ticker__text[data-fade="out"]{
  opacity: 0;
  transform: translateY(-3px);
}
.vr-ticker__text[data-fade="in"]{
  opacity: 0;
  transform: translateY(3px);
  animation: vr-ticker-in .34s cubic-bezier(.2,.7,.3,1) forwards;
}
@keyframes vr-ticker-in{
  to{ opacity: 1; transform: translateY(0); }
}

/* Counter number gets slight emphasis */
.vr-ticker__num{
  color: #B85B35; /* copper-deep */
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.section--navy .vr-ticker__num,
.vr-ticker--dark .vr-ticker__num{
  color: #E8A98C; /* copper-lite for dark bg */
}

/* Reduced motion — freeze the dot, kill message rotation */
@media (prefers-reduced-motion: reduce){
  .vr-ticker__dot::after{ animation: none; opacity: 0; }
  .vr-ticker__text,
  .vr-ticker__text[data-fade="out"],
  .vr-ticker__text[data-fade="in"]{
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}