/* LanderLab's Black Friday bar above the nav (src/components/BlackFridayBar.astro):
   near black with a red neon sign, the offer, a split-flap clock to the end
   of the sale and, once a tab, a roll-up shutter that opens the store.
   black-friday.js ticks the clock and closes the bar. The red is the
   ClickFlare deal bar's (deal.css, --deal-red). */
.bfb {
  --bfb-h: 48px;
  --bf-red: #f0283c;
  --bf-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --bf-tube: #ff6b78;
  --bf-glow-text: 0 0 1px #fff, 0 0 5px #ff4d5e, 0 0 12px var(--bf-red), 0 0 24px rgb(240 40 60 / .75);
  --bf-glow-box: 0 0 3px rgb(255 77 94 / .9), 0 0 12px rgb(240 40 60 / .6), inset 0 0 5px rgb(255 77 94 / .55), inset 0 0 12px rgb(240 40 60 / .3);
  /* pinned above the nav, which sits at --top-bar (style.css) */
  position: sticky; top: 0; z-index: 31;
  isolation: isolate; overflow: hidden; overflow: clip;
  color: #fff;
  background:
    radial-gradient(38% 190% at 50% 165%, rgb(240 40 60 / .3) 0%, rgb(240 40 60 / 0) 70%),
    linear-gradient(180deg, #131315 0%, #08080a 100%);
  font: 400 13.5px/1.4 var(--font-ui);
  letter-spacing: -.004em;
}
.bfb::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: var(--grain); background-size: 200px 200px;
  opacity: .12;
}
.bfb.is-closing { transition: height .26s cubic-bezier(.2, .8, .3, 1); }
/* dark and red confetti lying along the bottom edge (deal-confetti.js), under the copy */
.bfb__confetti {
  position: absolute; inset: 0; z-index: 0;
  display: block; width: 100%; height: 100%;
  pointer-events: none;
}
/* before black-friday.js measures it */
:root:has(#bfb) { --top-bar: 48px; }

.bfb__bar {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: center; gap: 20px;
  min-height: var(--bfb-h);
  padding-right: 44px; padding-left: 44px;
}

.bfb__go {
  min-width: 0;
  display: flex; align-items: center; gap: 14px;
  color: rgb(255 255 255 / .78); text-decoration: none;
}
.bfb__go:hover { color: #fff; }

/* the sign: a neon tube round the words, lit by stutters as a tube strikes */
.bfb__sign {
  flex: none;
  display: inline-flex; align-items: center;
  height: 28px; padding: 0 11px 0 12px;
  border: 1.5px solid var(--bf-tube); border-radius: 8px;
  font: 600 12.5px/1 var(--font-display); letter-spacing: .16em; text-transform: uppercase;
  color: #fff4f5;
  text-shadow: var(--bf-glow-text);
  box-shadow: var(--bf-glow-box);
  animation: bf-strike 1.2s .2s steps(1, end) both;
}
.bfb.is-doors .bfb__sign { animation-delay: 1.15s; }
/* the worn letter: the "d" of Friday drops out for a beat now and then */
.bfb__sign [data-k="9"] { animation: bf-buzz 7s 4s steps(1, end) infinite; }

@keyframes bf-strike {
  0%, 9%, 15%, 27%, 34% { color: #5c2830; border-color: #42212a; text-shadow: none; box-shadow: none; }
  7%, 12%, 24%, 30%, 42%, 100% { color: #fff4f5; border-color: var(--bf-tube); text-shadow: var(--bf-glow-text); box-shadow: var(--bf-glow-box); }
}
@keyframes bf-buzz {
  0%, 90%, 92%, 95.5%, 100% { opacity: 1; }
  91%, 94% { opacity: .22; text-shadow: none; }
}

.bfb__msg { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bfb__msg b { font-weight: 600; color: #fff; }
.bfb__msg--mid, .bfb__msg--short, .bfb__msg--tiny { display: none; }

/* the clock: a split-flap board */
.bfb__when {
  flex: none;
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12.5px; color: rgb(255 255 255 / .74);
}
.bfb__clock { display: inline-flex; align-items: center; gap: 7px; }
.bfb__unit { display: inline-flex; align-items: center; gap: 2px; }
.bfb__unit i {
  margin-left: 2px;
  font: 500 11px/1 var(--font-ui); font-style: normal;
  color: rgb(255 255 255 / .72);
}

.bf-flip {
  position: relative;
  display: inline-block; width: 16px; height: 24px;
  border-radius: 4px;
  /* white tiles, black digits */
  background: linear-gradient(180deg, #ffffff 0%, #f4f4f6 50%, #e9e9ec 50%, #dedee2 100%);
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / .08), 0 1px 0 rgb(0 0 0 / .7), 0 2px 6px -2px rgb(0 0 0 / .8);
  perspective: 90px;
  font: 600 14px/24px var(--bf-mono);
  color: #0b0c0f;
  text-align: center;
}
.bf-flip > span {
  position: absolute; inset: 0;
  display: block;
  border-radius: inherit;
  background: inherit;
  backface-visibility: hidden;
}
.bf-flip__t, .bf-flip__ft { clip-path: inset(0 0 50% 0); }
.bf-flip__b, .bf-flip__fb { clip-path: inset(50% 0 0 0); }
.bf-flip__ft { z-index: 2; animation: bf-fold .15s ease-in both; }
.bf-flip__fb { z-index: 2; animation: bf-unfold .15s .15s ease-out both; }
/* the hinge */
.bf-flip::after {
  content: ""; position: absolute; z-index: 3; left: 0; right: 0; top: 50%;
  height: 1px; margin-top: -.5px;
  background: rgb(0 0 0 / .2);
}
@keyframes bf-fold { from { transform: rotateX(0); } to { transform: rotateX(-90deg); } }
@keyframes bf-unfold { from { transform: rotateX(90deg); } to { transform: rotateX(0); } }

.bfb__cta {
  flex: none;
  display: inline-flex; align-items: center; gap: 7px;
  height: 30px; padding: 0 11px 0 13px;
  border-radius: 8px;
  background: #fff; color: #0b0c0f;
  font: 500 13px/1 var(--font-ui); letter-spacing: -.006em;
  text-decoration: none; white-space: nowrap;
  transition: box-shadow .25s ease, transform .25s ease;
}
.bfb__cta svg { width: 15px; height: 10px; }
.bfb__cta path { stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.bfb__cta:hover {
  box-shadow: 0 0 0 3px rgb(240 40 60 / .32), 0 0 22px rgb(240 40 60 / .6);
}

.bfb__close {
  position: absolute; right: 12px; top: 50%;
  display: grid; place-items: center;
  width: 30px; height: 30px; margin-top: -15px;
  border: 0; border-radius: 8px;
  background: none; color: rgb(255 255 255 / .55);
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.bfb__close svg { width: 16px; height: 16px; }
.bfb__close:hover { background: rgb(255 255 255 / .1); color: #fff; }
.bfb__go:focus-visible, .bfb__cta:focus-visible, .bfb__close:focus-visible {
  outline: 2px solid #fff; outline-offset: 2px; border-radius: 6px;
}

/* "What's in it": the line opens the drawer */
.bfb__more {
  flex: none; display: inline-flex; align-items: center; gap: 3px;
  font-weight: 500; color: rgb(255 255 255 / .86);
}
.bfb__more svg { width: 15px; height: 15px; transition: transform .22s ease; }
.bfb__go:hover .bfb__more svg { transform: translateY(1px); }
.bfb.is-open .bfb__more svg { transform: rotate(180deg); }

/* ---------- the drawer: the deal part by part (black-friday-drawer.js) ----------
   In the bar, as the news and ClickFlare bars' drawers are: the bar grows
   (--top-bar follows it, black-friday.js), the confetti settles on its new
   edge. Its parts only move while it's open. */
.bfb__drawer {
  position: relative; z-index: 1;
  display: grid; grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows .34s cubic-bezier(.2, .8, .3, 1), visibility .34s;
}
.bfb.is-open .bfb__drawer { grid-template-rows: 1fr; visibility: visible; }
.bfb__drawer-in { min-height: 0; overflow: hidden; }

.bfb__tiles {
  position: relative;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  padding-top: 16px; padding-bottom: 18px;
  opacity: 0; transform: translateY(-6px);
  transition: opacity .2s ease, transform .3s cubic-bezier(.2, .8, .3, 1);
}
.bfb.is-open .bfb__tiles { opacity: 1; transform: none; transition-delay: .06s; }
.bfb__tiles::before {
  content: ""; position: absolute; top: 0; left: var(--gutter); right: var(--gutter);
  height: 1px; background: rgb(255 255 255 / .1);
}
/* three columns between hairlines, no boxes */
.bfd {
  display: flex; flex-direction: column; align-items: flex-start; min-width: 0;
  padding: 0 24px;
}
.bfd:first-child { padding-left: 0; }
.bfd:last-child { padding-right: 0; }
.bfd + .bfd { border-left: 1px solid rgb(255 255 255 / .08); }
.bfd__art {
  position: relative; align-self: stretch;
  height: 104px; border-radius: 10px; overflow: hidden;
  background: #060607;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .07);
}
/* the neon tag the pricing page's cards have, on the picture's corner */
.bfd__sign {
  position: absolute; top: 8px; left: 8px; z-index: 2;
  display: inline-flex; align-items: center;
  height: 20px; padding: 0 7px 0 8px;
  background: rgb(6 6 7 / .8);
  border: 1.5px solid var(--bf-tube); border-radius: 6px;
  font: 600 9.5px/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase;
  color: #fff4f5;
  text-shadow: var(--bf-glow-text);
  box-shadow: var(--bf-glow-box);
  pointer-events: none;
}
.bfd__title {
  margin: 12px 0 0;
  font: 400 17px/1.25 var(--font-display); letter-spacing: -.012em;
  color: #fff;
  text-wrap: balance;
}
.bfd__line {
  margin: 3px 0 0;
  font: 400 13.5px/1.45 var(--font-ui); color: rgb(255 255 255 / .6);
  text-wrap: pretty;
}
.bfd__line a { color: #fff; font-weight: 500; text-decoration: underline; text-decoration-color: rgb(255 107 120 / .7); text-underline-offset: 3px; }
.bfd__line a:hover { text-decoration-color: #ff6b78; }
.bfd__line a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 3px; }

/* the heatmap: a small page in the sale's black and red that heats up where
   the pointer goes, in red heat (black-friday-drawer.js) */
.bfd-heat { cursor: crosshair; touch-action: manipulation; }
.bfd-heat__page {
  position: absolute; inset: 10px 10px 0;
  border-radius: 8px 8px 0 0;
  background: linear-gradient(180deg, #141416 0%, #0c0c0e 100%);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .07);
}
.bfd-heat__page > * { position: absolute; display: block; border-radius: 4px; background: #26262c; }
.bfd-heat__nav { top: 8px; left: 10px; right: 10px; height: 10px; background: none !important; }
.bfd-heat__nav i, .bfd-heat__nav b { position: absolute; top: 0; display: block; border-radius: 3px; background: #26262c; }
.bfd-heat__nav i { left: 0; width: 18%; height: 8px; margin-top: 1px; }
.bfd-heat__nav b { right: 0; width: 15%; height: 10px; background: #fff; opacity: .85; }
.bfd-heat__h { top: 32%; left: 50%; width: 64%; height: 10px; transform: translateX(-50%); background: #3a3a41; }
.bfd-heat__h--2 { top: calc(32% + 14px); width: 44%; }
.bfd-heat__p { top: 61%; left: 50%; width: 52%; height: 5px; transform: translateX(-50%); }
.bfd-heat__cta { top: 73%; left: 50%; width: 30%; height: 14px; transform: translateX(-50%); background: var(--bf-red); border-radius: 5px; box-shadow: 0 0 12px rgb(240 40 60 / .5); }
.bfd-heat__img { top: 90%; left: 10%; right: 10%; height: 40px; }
.bfd-heat__glow {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%;
  pointer-events: none;
}
/* a click's ring, and the one visitor's pointer */
.bfd-heat__ring {
  position: absolute; z-index: 1;
  width: 26px; height: 26px; margin: -13px 0 0 -13px;
  border: 1.5px solid #fff; border-radius: 50%;
  box-shadow: 0 0 10px rgb(255 77 94 / .9);
  pointer-events: none;
  animation: bfd-ring .65s cubic-bezier(.2, .8, .3, 1) forwards;
}
@keyframes bfd-ring { from { transform: scale(.3); opacity: 1; } to { transform: scale(1.4); opacity: 0; } }
.bfd-heat__ghost {
  position: absolute; top: 0; left: 0; z-index: 2;
  width: 15px; height: 19px; margin: -2px 0 0 -2px;
  opacity: 0; pointer-events: none;
  transition: opacity .25s ease;
}
.bfd-heat__ghost.is-on { opacity: 1; }
.bfd-heat__ghost svg { display: block; width: 100%; height: 100%; fill: #fff; stroke: #0b0c0f; stroke-width: 1.2; stroke-linejoin: round; filter: drop-shadow(0 2px 3px rgb(0 0 0 / .6)); transition: transform .1s ease; }
.bfd-heat__ghost.is-press svg { animation: bfd-press .22s ease; }
@keyframes bfd-press { 50% { transform: scale(.82); } }

/* ClickFlare and LanderLab as two neon signs on a neon tube: the click runs
   in with its ID, the lead runs back, each sign flaring as it lands */
.bfd-cf {
  display: flex; align-items: center; padding: 8px 26px 0;
  background: radial-gradient(70% 80% at 50% 50%, rgb(240 40 60 / .12) 0%, rgb(240 40 60 / 0) 70%), #060607;
}
.bfd-cf__node {
  position: relative; z-index: 1; flex: none;
  display: grid; place-items: center;
  width: 46px; height: 46px; border-radius: 12px;
  background: #0b0b0d;
  border: 1.5px solid var(--bf-tube);
  box-shadow: var(--bf-glow-box);
  animation: bfd-flare 3.6s linear infinite paused;
}
.bfd-cf__node--cf { animation-name: bfd-flare-cf; }
.bfd-cf__node img { display: block; width: 24px; height: 24px; filter: drop-shadow(0 0 6px rgb(95 130 255 / .55)); }
.bfd-cf__node svg { display: block; width: 15px; height: 25px; fill: #fff; filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 6px #ff4d5e); }
/* the tube: a dim red glass, lit where the spark is */
.bfd-cf__tube {
  position: relative; flex: 1; height: 3px; margin: 0 -1px;
  border-radius: 2px;
  background: rgb(255 77 94 / .28);
  box-shadow: 0 0 6px rgb(240 40 60 / .45), inset 0 0 0 1px rgb(255 107 120 / .25);
}
.bfd-cf__tube i {
  position: absolute; top: 50%; left: 0; right: 10px; height: 0;
  animation: bfd-out 3.6s cubic-bezier(.45, 0, .4, 1) infinite paused;
}
.bfd-cf__tube i::before {
  content: ""; position: absolute; top: -5px; left: 0;
  width: 10px; height: 10px; border-radius: 50%;
  background: radial-gradient(circle, #fff 0 30%, #ff9aa4 45%, rgb(240 40 60 / 0) 72%);
  box-shadow: 0 0 14px 3px rgb(255 77 94 / .75);
}
.bfd-cf__tube i + i { animation-name: bfd-back; }
.bfd-cf__label {
  position: absolute; left: 50%; transform: translateX(-50%);
  font: 600 10px/1 var(--bf-mono); font-style: normal; letter-spacing: .08em; text-transform: uppercase;
  color: #fff4f5; opacity: .5;
  text-shadow: 0 0 6px rgb(255 77 94 / .9);
  white-space: nowrap;
  animation: bfd-label-out 3.6s linear infinite paused;
}
.bfd-cf__label--out { top: calc(50% - 16px); }
.bfd-cf__label--back { top: calc(50% + 17px); animation-name: bfd-label-back; }
.bfb.is-open :is(.bfd-cf__node, .bfd-cf__tube i, .bfd-cf__label) { animation-play-state: running; }
@keyframes bfd-out {
  0%        { transform: translateX(0);    opacity: 0; }
  6%, 38%   { opacity: 1; }
  44%, 100% { transform: translateX(100%); opacity: 0; }
}
@keyframes bfd-back {
  0%, 50%   { transform: translateX(100%); opacity: 0; }
  56%, 88%  { opacity: 1; }
  94%, 100% { transform: translateX(0);    opacity: 0; }
}
@keyframes bfd-label-out  { 0%, 46%, 100% { opacity: .45; } 6%, 38% { opacity: 1; } }
@keyframes bfd-label-back { 0%, 50%, 96% { opacity: .45; } 56%, 88% { opacity: 1; } }
/* LanderLab's sign flares as the click lands, ClickFlare's as the lead does */
@keyframes bfd-flare    { 0%, 40%, 56%, 100% { box-shadow: var(--bf-glow-box); } 45% { box-shadow: var(--bf-glow-box), 0 0 26px 4px rgb(255 77 94 / .7); } }
@keyframes bfd-flare-cf { 0%, 90%, 100% { box-shadow: var(--bf-glow-box); } 95% { box-shadow: var(--bf-glow-box), 0 0 26px 4px rgb(255 77 94 / .7); } }

/* the sale: the till's green screen, each plan's price in turn, the saving
   printed under it (4 plans, so each shows a quarter of the loop) */
.bfd-till {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: radial-gradient(60% 90% at 50% 110%, rgb(240 40 60 / .2) 0%, rgb(240 40 60 / 0) 70%), #060607;
}
.bfd-till__screen {
  position: relative; z-index: 1;
  width: 64%; height: 36px; border-radius: 7px;
  background: #07140c;
  box-shadow: inset 0 1px 4px rgb(0 0 0 / .9), 0 1px 0 rgb(255 255 255 / .06), 0 0 0 5px #19191d, 0 0 0 6px rgb(255 255 255 / .08);
  font: 500 12.5px/36px var(--bf-mono); letter-spacing: .07em;
  color: #73ffa6; text-shadow: 0 0 8px rgb(115 255 166 / .55);
  text-align: center; white-space: nowrap; overflow: hidden;
}
.bfd-till__screen s { color: rgb(115 255 166 / .5); text-shadow: none; }
.bfd-till__slip {
  position: relative;
  width: 50%; height: 26px; margin-top: 6px;
  border-radius: 0 0 3px 3px;
  background: #f4f1ea;
  box-shadow: 0 10px 18px -6px rgb(0 0 0 / .7);
  font: 600 11px/26px var(--bf-mono); letter-spacing: .06em; text-transform: uppercase;
  color: #19191c; text-align: center;
}
.bfd-till__screen > span, .bfd-till__slip > span {
  position: absolute; inset: 0;
  opacity: 0;
  animation: bfd-turn calc(var(--n) * 2.6s) steps(1, end) infinite paused;
  animation-delay: calc((var(--n) - var(--k)) * -2.6s);
}
.bfb.is-open .bfd-till span { animation-play-state: running; }
@keyframes bfd-turn { 0% { opacity: 1; } 25% { opacity: 0; } 100% { opacity: 0; } }

/* narrower: the three swipe sideways */
@media (max-width: 960px) {
  .bfb__tiles { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(280px, 46%); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; }
  .bfd { scroll-snap-align: start; padding: 0 18px; }
}

/* the shutter: corrugated steel over the bar, rolled up once a tab */
.bfb__shutter { display: none; }
.bfb.is-doors .bfb__shutter {
  display: block;
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background:
    linear-gradient(90deg, rgb(0 0 0 / .45) 0%, rgb(0 0 0 / 0) 12%, rgb(0 0 0 / 0) 88%, rgb(0 0 0 / .45) 100%),
    repeating-linear-gradient(180deg, #26282d 0, #43464d 2px, #6a6e77 3.5px, #3b3e44 5px, #26282d 8px);
  box-shadow: inset 0 -4px 0 #17181b, 0 6px 12px rgb(0 0 0 / .6);
  animation: bf-doors 1s .3s cubic-bezier(.55, 0, .25, 1) both;
}
/* the handle */
.bfb__shutter i {
  position: absolute; left: 50%; bottom: 7px;
  width: 72px; height: 6px; margin-left: -36px;
  border-radius: 3px;
  background: linear-gradient(180deg, #a3a7b0 0%, #5a5d65 100%);
  box-shadow: 0 1px 2px rgb(0 0 0 / .6);
}
@keyframes bf-doors {
  0% { transform: translateY(0); }
  14% { transform: translateY(5%); }
  100% { transform: translateY(-110%); }
}

@media (max-width: 1140px) {
  .bfb__msg--long { display: none; }
  .bfb__msg--mid { display: inline; }
}
@media (max-width: 960px) {
  .bfb__when-label { display: none; }
}
/* phones: pinned, so one line: the sign, the offer in short, the clock;
   the whole line goes to the plans, so no button */
@media (max-width: 760px) {
  .bfb { --bfb-h: 44px; }
  :root:has(#bfb) { --top-bar: 44px; }
  .bfb__bar { justify-content: flex-start; gap: 10px; padding: 0 38px 0 10px; }
  .bfb__go { flex: 1 1 auto; gap: 8px; }
  .bfb__msg--mid { display: none; }
  .bfb__msg--tiny { display: inline; color: #fff; font-weight: 600; }
  .bfb__sign { height: 24px; padding: 0 7px 0 8px; font-size: 10.5px; letter-spacing: .12em; }
  .bfb__clock { gap: 4px; }
  .bfb__unit i { margin-left: 1px; font-size: 10px; }
  .bf-flip { width: 13px; height: 22px; font-size: 12.5px; line-height: 22px; }
  .bfb__cta { display: none; }
  .bfb__close { right: 4px; }
  /* no room for the arrow: the whole line opens the drawer */
  .bfb__more { display: none; }
  .bfb__tiles { grid-auto-columns: 84%; padding-top: 16px; padding-bottom: 20px; }
}
@media (max-width: 370px) {
  .bfb__msg--tiny { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .bfb__sign, .bfb__sign span { animation: none; }
  .bf-flip__ft, .bf-flip__fb { display: none; }
  .bfb.is-doors .bfb__shutter { display: none; }
  .bfb__drawer, .bfb__tiles { transition: none; }
  .bfd-cf__tube i { display: none; }
  .bfd-cf__node, .bfd-cf__label { animation: none; }
  .bfd-till span { animation: none !important; }
  .bfd-till__screen > span:first-child, .bfd-till__slip > span:first-child { opacity: 1; }
}