/* FBReveal - Facebook wholesale special price reveal (MasterQuote)
   Namespace: fbr-   Host: the dark grand-total card (#15131A)
   Default styles = settled final state. `.fbr-play` layers the one-time choreography on top.
   Only transform, opacity and stroke-dashoffset animate. */

.fbr {
  --fbr-ink: #FBF7F1;
  --fbr-amber: #FF9E2C;
  --fbr-hi: #FFB35C;
  --fbr-deep: #E07F12;
  --fbr-green: #17B877;
  --fbr-ease: cubic-bezier(.22, 1, .36, 1);
  --fbr-back: cubic-bezier(.34, 1.35, .64, 1);
  --fbr-big: clamp(38px, 11.5vw, 58px);
  position: relative;
  display: block;
  width: 100%;
  max-width: 100%;
  color: var(--fbr-ink);
  font-family: var(--san, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  text-align: left;
}

/* screen-reader sentence; everything visual is aria-hidden */
.fbr-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.fbr-stage { position: relative; }

/* ---------- row 1: "Your total" (play only) / Regular price, struck ---------- */
.fbr-row1 {
  position: relative;
  min-height: 20px;
  line-height: 20px;
  font-size: 14px;
}
.fbr-lbl-total {
  position: absolute;
  left: 0;
  top: 0;
  color: rgba(251, 247, 241, .62);
  font-weight: 500;
  letter-spacing: .02em;
  white-space: nowrap;
}
.fbr-old {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  max-width: 100%;
}
.fbr-old-lbl {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(251, 247, 241, .62);
  white-space: nowrap;
}
.fbr-old-num {
  position: relative;
  display: inline-block;
  font-size: 15px;
  font-weight: 600;
  color: rgba(251, 247, 241, .74);
  white-space: nowrap;
}

/* the drawn strike line (SVG, not text-decoration) */
.fbr-strike {
  position: absolute;
  left: -5%;
  top: 0;
  width: 110%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.fbr-strike line {
  fill: none;
  stroke: var(--fbr-amber);
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}
.fbr-strike-sm line { stroke-width: 2; }
.fbr-strike-lg line { stroke-width: 3.5; }

/* ---------- row 2: the badge ---------- */
.fbr-badge-row {
  min-height: 28px;
  margin: 10px 0 8px;
}
.fbr-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  box-sizing: border-box;
  height: 28px;
  max-width: 100%;
  padding: 0 13px 0 11px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  color: #15131A;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: linear-gradient(100deg, var(--fbr-hi), var(--fbr-amber) 55%, var(--fbr-deep));
  box-shadow: 0 8px 20px -8px rgba(255, 158, 44, .6), inset 0 1px 0 rgba(255, 255, 255, .35);
}
.fbr-badge-pct { font-weight: 800; letter-spacing: -.01em; }
.fbr-badge-sep {
  flex: none;
  width: 1px;
  height: 13px;
  background: rgba(21, 19, 26, .28);
}
.fbr-badge-lbl { overflow: hidden; text-overflow: ellipsis; }

/* ---------- row 3: the big number ---------- */
.fbr-big {
  position: relative;
  font-size: var(--fbr-big);
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -.025em;
  white-space: nowrap;
}
.fbr-big-clip {
  position: relative;
  display: inline-block;
  vertical-align: top;
  max-width: 100%;
  padding: 0 .05em;
  margin: 0 -.05em;
  overflow: hidden;
}
.fbr-new {
  position: relative;
  z-index: 1;
  display: inline-block;
}
.fbr-hero {
  --fbr-dx: 0px;
  --fbr-dy: -44px;
  --fbr-s: .3;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  display: inline-block;
  transform-origin: 0 0;
  will-change: transform, opacity;
}
.fbr-glow {
  position: absolute;
  left: -8%;
  right: -8%;
  top: -90%;
  bottom: -70%;
  z-index: 0;
  pointer-events: none;
  opacity: 0;               /* settled state: no lingering haze (NEO witness: it read as a smudge) */
  background: radial-gradient(ellipse 42% 48% at 34% 52%,
    rgba(255, 158, 44, .55), rgba(255, 158, 44, .18) 50%, rgba(255, 158, 44, 0) 100%);
}
.fbr-sweep {
  position: absolute;
  left: 0;
  top: -10%;
  bottom: -10%;
  width: 100%;
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-110%);
  background: linear-gradient(100deg,
    rgba(255, 179, 92, 0) 36%, rgba(255, 241, 218, .45) 50%, rgba(255, 179, 92, 0) 64%);
}
.fbr-mote {
  position: absolute;
  bottom: 22%;
  z-index: 3;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  background: var(--fbr-hi);
  box-shadow: 0 0 6px 1px rgba(255, 179, 92, .65);
}
.fbr-mote:nth-of-type(1) { left: .45em; width: 3px; height: 3px; }
.fbr-mote:nth-of-type(2) { left: 1.4em; bottom: 34%; }
.fbr-mote:nth-of-type(3) { left: 2.3em; width: 5px; height: 5px; bottom: 16%; }
.fbr-mote:nth-of-type(4) { left: 3.2em; bottom: 40%; width: 3px; height: 3px; }
.fbr-mote:nth-of-type(5) { left: 4.0em; bottom: 26%; }

/* ---------- row 4: savings ---------- */
.fbr-save {
  margin-top: 8px;
  min-height: 20px;
  line-height: 20px;
  font-size: 14px;
  font-weight: 500;
  color: var(--fbr-green);
}
.fbr-save b { font-weight: 700; }
.fbr-save .fbr-yp { color: rgba(251, 247, 241, .78); font-weight: 500; }

/* =====================================================================
   THE CHOREOGRAPHY (only under .fbr-play). Timeline in ms:
     0    full price + "Your total" fade in
     700  badge drops in, glow warms
     950  strike line draws across the full price (420ms)
     1400 struck price lifts up and shrinks into row 1 (FLIP, 450ms)
     1450 new price rises in and rolls down full -> final (JS, 950ms)
     1700 small struck "Regular price" fades in
     2050 light sweep crosses the new price (800ms)
     2100 five light motes drift up (staggered, 800ms)
     2350 "You save" rises in
     ~3.1s settled
   ===================================================================== */

.fbr-play .fbr-lbl-total { animation: fbr-lbl-total 1700ms linear both; }
@keyframes fbr-lbl-total {
  0%   { opacity: 0; transform: translateY(6px); animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
  19%  { opacity: 1; transform: none; }
  82%  { opacity: 1; transform: none; animation-timing-function: ease-in; }
  100% { opacity: 0; transform: translateY(-8px); }
}

.fbr-play .fbr-hero { animation: fbr-hero 1850ms linear both; }
@keyframes fbr-hero {
  0%    { opacity: 0; transform: translate(0, 10px) scale(1); animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
  17.3% { opacity: 1; transform: translate(0, 0) scale(1); }
  75.7% { opacity: 1; transform: translate(0, 0) scale(1); animation-timing-function: cubic-bezier(.6, 0, .2, 1); }
  /* the flying price fades as it leaves, so it never sits on top of the new one rising in (NEO WebKit frame) */
  86%   { opacity: .2; animation-timing-function: ease-in; }
  100%  { opacity: 0; transform: translate(var(--fbr-dx), var(--fbr-dy)) scale(var(--fbr-s)); }
}

.fbr-play .fbr-strike-lg line { animation: fbr-strike 420ms cubic-bezier(.65, 0, .35, 1) 950ms both; }
@keyframes fbr-strike {
  from { stroke-dashoffset: 1; }
  to   { stroke-dashoffset: 0; }
}

.fbr-play .fbr-badge { animation: fbr-badge 460ms cubic-bezier(.34, 1.35, .64, 1) 700ms both; }
@keyframes fbr-badge {
  from { opacity: 0; transform: translateY(-8px) scale(.94); }
  to   { opacity: 1; transform: none; }
}

@keyframes fbr-rise {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: none; }
}
.fbr-play .fbr-old  { animation: fbr-rise 420ms cubic-bezier(.22, 1, .36, 1) 1700ms both; }
.fbr-play .fbr-save { animation: fbr-rise 480ms cubic-bezier(.22, 1, .36, 1) 2350ms both; }

.fbr-play .fbr-new { animation: fbr-new 520ms cubic-bezier(.22, 1, .36, 1) 1580ms both; }
@keyframes fbr-new {
  from { opacity: 0; transform: translateY(12px) scale(.98); }
  to   { opacity: 1; transform: none; }
}

.fbr-play .fbr-glow { animation: fbr-glow 2300ms linear 700ms both; }
@keyframes fbr-glow {
  0%   { opacity: 0;   transform: scale(.92); animation-timing-function: ease-out; }
  17%  { opacity: .38; transform: scale(1);   animation-timing-function: ease-in-out; }
  30%  { opacity: .16; transform: scale(.98); animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
  48%  { opacity: .95; transform: scale(1.03); animation-timing-function: cubic-bezier(.4, 0, .6, 1); }
  100% { opacity: 0;   transform: scale(1); }
}

.fbr-play .fbr-sweep { animation: fbr-sweep 800ms cubic-bezier(.45, 0, .2, 1) 2050ms both; }
@keyframes fbr-sweep {
  0%   { opacity: 0; transform: translateX(-110%); }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(110%); }
}

.fbr-play .fbr-mote { animation: fbr-mote 800ms cubic-bezier(.2, .6, .3, 1) both; }
.fbr-play .fbr-mote:nth-of-type(1) { animation-delay: 2100ms; }
.fbr-play .fbr-mote:nth-of-type(2) { animation-delay: 2160ms; }
.fbr-play .fbr-mote:nth-of-type(3) { animation-delay: 2240ms; }
.fbr-play .fbr-mote:nth-of-type(4) { animation-delay: 2300ms; }
.fbr-play .fbr-mote:nth-of-type(5) { animation-delay: 2380ms; }
@keyframes fbr-mote {
  0%   { opacity: 0; transform: translateY(0) scale(.5); }
  25%  { opacity: 1; transform: translateY(-8px) scale(1); }
  100% { opacity: 0; transform: translateY(-32px) scale(.7); }
}

/* ---------- reduced motion: straight to the settled state ---------- */
@media (prefers-reduced-motion: reduce) {
  .fbr-play *, .fbr-play *::before, .fbr-play *::after {
    animation: none !important;
    transition: none !important;
  }
  .fbr-play .fbr-hero,
  .fbr-play .fbr-lbl-total,
  .fbr-play .fbr-sweep,
  .fbr-play .fbr-mote { display: none !important; }
}