/* ================================================================
   FINNRICK ESCROW — motion layer
   Calm, data-first motion in the finnrick.com spirit: things settle
   into place, numbers count, money visibly moves through escrow.
   Only transform/opacity animate. Reduced-motion users get the final
   state with no movement. Hidden states require html.fr-motion (set by
   JS), so content is never lost if scripts fail.
   ================================================================ */
:root { --fr-ease: cubic-bezier(.2, .7, .2, 1); --fr-ease-out: cubic-bezier(.16, 1, .3, 1); }

/* ---- Escrow-flow track: static (final) state for everyone ---- */
.fr-hw-track { position: relative; height: 3px; margin: 30px 0 22px; background: #E4E1D7; border-radius: 3px; }
.fr-hw-track::before, .fr-hw-track::after {
  position: absolute; top: -22px; font-family: var(--fr-font); font-size: 10.5px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--fr-muted);
}
.fr-hw-track::before { content: "You pay \2192  held in escrow"; left: 0; }
.fr-hw-track::after { content: "Brand paid \2713"; right: 0; }
.fr-hw-track-fill {
  position: absolute; inset: 0; border-radius: 3px; transform-origin: left center; transform: scaleX(var(--fr-p, 1));
  background: linear-gradient(90deg, #D9A84D 0%, #13844A 100%);
}
.fr-hw-token {
  position: absolute; top: 50%; left: calc((100% - 16px) * var(--fr-p, 1)); width: 16px; height: 16px; margin-top: -8px;
  border-radius: 50%; background: #13844A; box-shadow: 0 0 0 4px rgba(19, 132, 74, .18);
}
html.fr-motion .fr-hw-track:not(.fr-hw-run) { --fr-p: 0; }
html.fr-motion .fr-hw-track.fr-hw-run:not(.fr-hw-done) .fr-hw-token { background: var(--fr-gold); box-shadow: 0 0 0 4px rgba(217, 168, 77, .22); }
.fr-hw-token i {
  position: absolute; inset: 4px; border-radius: 50%; background: #fff;
}
.fr-hw-step { transition: box-shadow .5s var(--fr-ease), background-color .5s var(--fr-ease); }
.fr-hw-step.fr-hw-lit .fr-hw-num { opacity: 1 !important; color: var(--fr-green) !important; }
.fr-hw-step.fr-hw-now { box-shadow: inset 0 3px 0 var(--fr-gold); background: #FFFFFF !important; }
.fr-hw-done .fr-hw-step.fr-hw-now, .fr-hw-step.fr-hw-now:last-child { box-shadow: inset 0 3px 0 var(--fr-green); }
@media (max-width: 860px) { .fr-hw-track { display: none; } }

/* ---- Header gains depth once scrolled (no motion needed) ---- */
html.fr-scrolled body #masthead { box-shadow: 0 10px 28px -18px rgba(16, 28, 46, .45) !important; }

@media (prefers-reduced-motion: no-preference) {

  /* ---------- Scroll reveal ---------- */
  html.fr-motion .fr-rv {
    opacity: 0; transform: translate3d(0, 18px, 0);
    transition: opacity .75s var(--fr-ease) var(--fr-d, 0ms), transform .75s var(--fr-ease-out) var(--fr-d, 0ms);
  }
  html.fr-motion .fr-rv.fr-in { opacity: 1; transform: none; }

  /* ---------- Hero: living data field ---------- */
  .fr-hero { position: relative; overflow: hidden; }
  .fr-hero > .fr-hero-wrap { position: relative; z-index: 1; }
  .fr-hero::before {
    content: ""; position: absolute; inset: -40px; pointer-events: none;
    background-image: radial-gradient(rgba(16, 28, 46, .13) 1px, transparent 1.3px);
    background-size: 24px 24px;
    -webkit-mask-image: radial-gradient(ellipse 60% 70% at 82% 28%, #000 0%, transparent 70%);
            mask-image: radial-gradient(ellipse 60% 70% at 82% 28%, #000 0%, transparent 70%);
    animation: fr-drift 48s linear infinite;
  }
  .fr-hero::after {
    content: ""; position: absolute; width: 620px; height: 620px; right: -160px; top: -260px; pointer-events: none;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(43, 92, 173, .11) 0%, rgba(217, 168, 77, .06) 38%, transparent 66%);
    animation: fr-float 16s var(--fr-ease) infinite alternate;
  }
  @keyframes fr-drift { to { transform: translate3d(-24px, 24px, 0); } }
  @keyframes fr-float { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-90px, 60px, 0) scale(1.12); } }

  /* Cycling chip: soft underline sweeps under each new word */
  .fr-pchip { position: relative; }
  .fr-pchip::after {
    content: ""; position: absolute; left: .3em; right: .3em; bottom: .06em; height: 2px; border-radius: 2px;
    background: currentColor; opacity: .35; transform-origin: left; animation: fr-chipline 2.2s var(--fr-ease) infinite;
  }
  @keyframes fr-chipline { 0% { transform: scaleX(0); } 22%, 82% { transform: scaleX(1); } 100% { transform: scaleX(1); opacity: 0; } }

  /* ---------- Lanes: lift + pointer-follow light ---------- */
  .fr-lane { transition: transform .35s var(--fr-ease-out), box-shadow .35s var(--fr-ease), background .2s ease !important; overflow: hidden; }
  .fr-lane::before {
    content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s ease;
    background: radial-gradient(260px circle at var(--fr-mx, 50%) var(--fr-my, 50%), rgba(43, 92, 173, .09), transparent 70%);
  }
  .fr-lane:hover { transform: translateY(-4px); box-shadow: 0 18px 36px -22px rgba(16, 28, 46, .45); z-index: 2; }
  .fr-lane:hover::before { opacity: 1; }
  .fr-lane-cta, .fr-guide-cta, .fr-hw-link, .fr-lb-all, .fr-guides-all, .fr-topbar-link { display: inline-block; transition: transform .25s var(--fr-ease-out), color .15s ease !important; }
  .fr-lane:hover .fr-lane-cta, .fr-guide-card:hover .fr-guide-cta,
  .fr-hw-link:hover, .fr-lb-all:hover, .fr-guides-all:hover, .fr-topbar-link:hover { transform: translateX(4px); }

  /* ---------- Topbar: live escrow pulse ---------- */
  .fr-topbar-dot { position: relative; }
  .fr-topbar-dot::after {
    content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--fr-green);
    animation: fr-ping 2.4s var(--fr-ease-out) infinite;
  }
  .fr-band-dot, .stg-foot-badge::before { animation: fr-blink 2.4s ease-in-out infinite; }
  @keyframes fr-ping { 0% { transform: scale(1); opacity: .7; } 80%, 100% { transform: scale(3); opacity: 0; } }
  @keyframes fr-blink { 50% { opacity: .45; } }

  /* ---------- Stats strip: data stream sweeping the navy band ---------- */
  .fr-stats-strip { position: relative; overflow: hidden; }
  .fr-stats-strip::before {
    content: ""; position: absolute; left: 0; top: 0; height: 1px; width: 32%; pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(217, 168, 77, .85), transparent);
    animation: fr-stream 7s linear infinite;
  }
  @keyframes fr-stream { from { transform: translateX(-100%); } to { transform: translateX(320%); } }

  /* ---------- Leaderboard: verified bars fill, rows respond ---------- */
  .fr-lb-pct em.fr-bar::after { transform-origin: left center; transform: scaleX(0); transition: transform 1.2s var(--fr-ease-out) .1s; }
  .fr-lb-pct em.fr-bar.fr-bar-on::after { transform: scaleX(1); }
  a.fr-lb-row { transition: background .15s ease, box-shadow .2s ease !important; }
  a.fr-lb-row:hover { box-shadow: inset 3px 0 0 var(--fr-blue); }
  a.fr-lb-row:hover .fr-lb-name { color: var(--fr-blue) !important; }
  .fr-lb-logo { transition: transform .3s var(--fr-ease-out); }
  a.fr-lb-row:hover .fr-lb-logo { transform: scale(1.08); }

  /* ---------- Escrow-flow track: money moves through escrow ---------- */
  .fr-hw-token { transition: background .4s ease; }
  .fr-hw-track.fr-hw-done .fr-hw-token { animation: fr-settle 2.8s var(--fr-ease-out) .1s infinite; }
  @keyframes fr-settle { 0% { box-shadow: 0 0 0 0 rgba(19, 132, 74, .45); } 70%, 100% { box-shadow: 0 0 0 12px rgba(19, 132, 74, 0); } }
  .fr-hw-num { transition: opacity .5s var(--fr-ease), color .5s var(--fr-ease), transform .5s var(--fr-ease-out); }
  .fr-hw-step.fr-hw-now .fr-hw-num { transform: translateY(-2px); }

  /* ---------- Guide + product cards ---------- */
  .fr-guide-card { will-change: auto; }
  html body .products > .product { transition: transform .3s var(--fr-ease-out), box-shadow .3s var(--fr-ease), border-color .2s ease !important; }
  html body .products > .product:hover { transform: translateY(-4px); box-shadow: 0 20px 38px -26px rgba(16, 28, 46, .5) !important; border-color: #AEB4BF !important; }
  html body .products > .product .product-thumbnail img,
  html body .products > .product .woocommerce-loop-product__link img { transition: transform .6s var(--fr-ease-out) !important; }
  html body .products > .product:hover .product-thumbnail img,
  html body .products > .product:hover .woocommerce-loop-product__link img { transform: scale(1.045); }

  /* ---------- Primary CTAs: tactile press ---------- */
  .fr-nl-btn, body .single_add_to_cart_button, body .wc-proceed-to-checkout .checkout-button, body #place_order, #stg-gate #stg-gate-yes {
    transition: background .15s ease, transform .2s var(--fr-ease-out), box-shadow .2s ease !important;
  }
  .fr-nl-btn:hover, body .single_add_to_cart_button:hover, body .wc-proceed-to-checkout .checkout-button:hover, body #place_order:hover, #stg-gate #stg-gate-yes:hover {
    transform: translateY(-2px); box-shadow: 0 10px 22px -12px rgba(169, 120, 30, .75) !important;
  }
  .fr-nl-btn:active, body .single_add_to_cart_button:active, body #place_order:active { transform: translateY(0); box-shadow: none !important; }
  .fr-nl-input { transition: background .2s ease, box-shadow .25s ease !important; }
  .fr-nl-row:focus-within { box-shadow: 0 0 0 3px rgba(217, 168, 77, .35); }

  /* ---------- Footer + age gate ---------- */
  .fr-soc { transition: transform .25s var(--fr-ease-out), background .15s ease, color .15s ease, border-color .15s ease !important; }
  .fr-soc:hover { transform: translateY(-3px); }
  #stg-gate:not([hidden]) .stg-gate-card { animation: fr-pop .55s var(--fr-ease-out) both; }
  @keyframes fr-pop { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
}