/* BRC motion layer — transform/opacity only. Uses the individual `translate`/`scale`
   properties so existing theme transforms are never overridden. */
@media (prefers-reduced-motion: no-preference) {
  /* 1. Hero entrance */
  .bm-js .hero-amino > h1, .bm-js .hero-amino > .ha-sub,
  .bm-js .hero-amino > .trust, .bm-js .hero-amino > .hero-cta,
  .bm-js .pdp .pdp-title, .bm-js .pdp .pdp-price, .bm-js .pdp .buy-card {
    opacity: 0; translate: 0 14px;
    animation: bm-rise .9s cubic-bezier(.22,1,.36,1) forwards;
  }
  .bm-js .hero-amino > h1 { animation-delay: .10s }
  .bm-js .hero-amino > .ha-sub, .bm-js .pdp .pdp-price { animation-delay: .22s }
  .bm-js .hero-amino > .trust, .bm-js .pdp .buy-card { animation-delay: .34s }
  .bm-js .hero-amino > .hero-cta { animation-delay: .46s }
  .bm-js .hero-amino > .ha-img, .bm-js .pdp .pdp-img { opacity: 0; animation: bm-fade 1.1s ease-out .05s forwards }
  .bm-js .hero-amino > .ha-img:nth-child(2) { animation-delay: .18s }
  .bm-js .hero-amino > .ha-img:nth-child(3) { animation-delay: .30s }
  .bm-js .hero-amino > .ha-img:nth-child(4) { animation-delay: .42s }
  @keyframes bm-rise { to { opacity: 1; translate: 0 0 } }
  @keyframes bm-fade { to { opacity: 1 } }

  /* 2. Scroll reveal for blocks the theme doesn't already reveal */
  .bm-rv { opacity: 0; translate: 0 20px;
    transition: opacity .7s cubic-bezier(.22,1,.36,1), translate .7s cubic-bezier(.22,1,.36,1); }
  .bm-rv.bm-in { opacity: 1; translate: 0 0 }

  /* 3. Staggered grid: extend theme's 4-step stagger to any length */
  .bm-js .rv-stagger.in > *, .bm-js .rel-grid.bm-in > * { transition-delay: calc(var(--bm-i, 0) * 70ms) }
  .bm-js .rel-grid > * { opacity: 0; translate: 0 16px;
    transition: opacity .6s cubic-bezier(.22,1,.36,1), translate .6s cubic-bezier(.22,1,.36,1); }
  .bm-js .rel-grid.bm-in > * { opacity: 1; translate: 0 0 }

  /* 4. Hover lifts (pointer devices only) */
  @media (hover: hover) {
    .wa-card, .g-card, .mint-card, .rel-card, .buy-tier {
      transition: translate .35s cubic-bezier(.22,1,.36,1), scale .35s cubic-bezier(.22,1,.36,1);
    }
    .wa-card:hover, .g-card:hover, .mint-card:hover, .rel-card:hover { translate: 0 -4px }
    .buy-tier:hover { translate: 0 -2px }
    .wa-btn, .mint-cta, .rs-btn { transition: translate .25s ease, scale .25s ease }
    .wa-btn:hover, .mint-cta:hover, .rs-btn:hover { translate: 0 -2px }
    .wa-btn:active, .mint-cta:active, .rs-btn:active { translate: 0 0; scale: .98 }
  }
}

/* 5. Hero vial bob + frame fix — 2026-10-14: bob moved to .ha-img wrapper (cream bg matches hero, so
   the img's multiply blend stays inside it; animating the img alone exposed the frame). */
@media (prefers-reduced-motion: no-preference) {
  .hero-amino .ha-img { animation: brc-bob2 var(--d, 6.5s) ease-in-out var(--dl, 0s) infinite; will-change: transform }
  .bm-js .hero-amino > .ha-img { opacity: 0; animation: bm-fade 1.1s ease-out .05s forwards, brc-bob2 var(--d, 6.5s) ease-in-out var(--dl, 0s) infinite }
  .bm-js .hero-amino > .ha-img:nth-child(2) { animation-delay: .18s, var(--dl, 0s) }
  .bm-js .hero-amino > .ha-img:nth-child(3) { animation-delay: .30s, var(--dl, 0s) }
  .bm-js .hero-amino > .ha-img:nth-child(4) { animation-delay: .42s, var(--dl, 0s) }
  .hero-amino .ha-big { --a: -14px; --r: 1.5deg; --d: 7s }
  .hero-amino .ha-tb  { --a: -10px; --r: -2deg; --d: 5.5s; --dl: -1.8s }
  .hero-amino .ha-bpc { --a: -8px; --r: 1.2deg; --d: 6s; --dl: -3.1s }
  .hero-amino .ha-nad { --a: -12px; --r: -1.5deg; --d: 8s; --dl: -.9s }
  .hero-amino .ha-img img { -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 78%, transparent 100%); mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 78%, transparent 100%) }
  @keyframes brc-bob2 { 0%, 100% { transform: translateY(0) rotate(0deg) } 50% { transform: translateY(var(--a, -10px)) rotate(var(--r, 1deg)) } }
}

/* Slow-connection opt-out (class set by head-inline snippet) */
html.no-motion .bm-rv { opacity: 1 !important; translate: none !important; transition: none !important; }
html.no-motion .wa-card, html.no-motion .g-card, html.no-motion .mint-card, html.no-motion .rel-card, html.no-motion .buy-tier,
html.no-motion .wa-btn, html.no-motion .mint-cta, html.no-motion .rs-btn { transition: none !important; translate: none !important; scale: none !important; }