/* card_fx.css — the small drawings inside cards (templates/_landing_fx.html).

   Loaded by the landing page (before landing.css, which holds the rest of the
   drawings) and by /pricing. A drawing rests on its finished frame and only
   moves inside a live container: a landing grid once it has scrolled in
   (.lp-bento.in), or any element marked .fx-live.
   Zero raw hex: every color is var(--bento-*). */

/* ---- Drawing box ---- */
.lp-fx {
  position: relative;
  isolation: isolate;
  flex: none;
  width: 100%;
  height: 72px;
  margin: 0 0 var(--sp-2);
  color: var(--bento-ink);
}
.lp-fx svg { display: block; overflow: visible; }
.lp-fx svg * {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.lp-fx span, .lp-fx i, .lp-fx b { display: block; }

/* Shared keyframes */
@keyframes fx-spin { to { transform: rotate(360deg); } }
@keyframes fx-spin-back { to { transform: rotate(-360deg); } }


/* 26. coin: a coin tossed and flipped */
.fx-coin { display: flex; align-items: center; perspective: 300px; }
.fx-coin > span {
  display: grid; place-items: center;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--bento-highlight);
  border: 3px solid var(--bento-ink);
  box-shadow: inset 0 -4px 0 color-mix(in srgb, var(--bento-ink) 18%, transparent);
}
.fx-coin b { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid var(--bento-ink); }
@keyframes fx-coin {
  0%, 35% { transform: translateY(0) rotateY(0); }
  55% { transform: translateY(-14px) rotateY(360deg); }
  75%, 100% { transform: translateY(0) rotateY(720deg); }
}
:is(.lp-bento.in, .fx-live) .fx-coin > span { animation: fx-coin 3.4s cubic-bezier(.4, 0, .3, 1) infinite; }

/* 27. path: a dotted trail marching to a map pin */
.fx-path { display: flex; align-items: center; }
.fx-path .fx-path__trail { stroke-dasharray: 4 5; }
.fx-path .fx-path__pin path { fill: var(--bento-ink); }
.fx-path .fx-path__pin circle { fill: var(--bento-highlight); stroke: none; }
.fx-path__pin { transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes fx-march { to { stroke-dashoffset: -18; } }
@keyframes fx-bob { from { transform: translateY(0) scaleY(1); } to { transform: translateY(-5px) scaleY(1.04); } }
:is(.lp-bento.in, .fx-live) .fx-path__trail { animation: fx-march 1s linear infinite; }
:is(.lp-bento.in, .fx-live) .fx-path__pin { animation: fx-bob .8s ease-in-out infinite alternate; }

/* 28. burst: a star pulsing inside slowly turning rays */
.fx-burst { display: flex; align-items: center; }
.fx-burst .fx-burst__rays path { stroke-width: 2.5; }
.fx-burst .fx-burst__star { fill: var(--bento-highlight); }
.fx-burst__rays, .fx-burst__star { transform-box: view-box; transform-origin: 32px 31px; }
.fx-burst__rays path:nth-child(odd) { opacity: .45; }
@keyframes fx-star { 0%, 100% { transform: scale(1) rotate(0); } 50% { transform: scale(1.2) rotate(10deg); } }
@keyframes fx-twinkle { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
:is(.lp-bento.in, .fx-live) .fx-burst__rays { animation: fx-spin 14s linear infinite; }
:is(.lp-bento.in, .fx-live) .fx-burst__rays path:nth-child(odd) { animation: fx-twinkle 1.6s ease-in-out infinite; }
:is(.lp-bento.in, .fx-live) .fx-burst__star { animation: fx-star 2.4s var(--ease-spring) infinite; }

/* 29. radar: a sweep finding points on a scope */
.fx-radar.lp-fx {
  width: 68px; height: 68px;
  overflow: hidden;
  border-radius: 50%;
  border: 2px solid var(--bento-ink);
  background:
    linear-gradient(var(--bento-tan-100), var(--bento-tan-100)) center / 100% 1px no-repeat,
    linear-gradient(var(--bento-tan-100), var(--bento-tan-100)) center / 1px 100% no-repeat,
    repeating-radial-gradient(circle, transparent 0 11px, var(--bento-tan-100) 11px 12px),
    var(--bento-white);
}
.fx-radar__sweep {
  position: absolute; inset: 0;
  border-radius: 50%;
  background: conic-gradient(transparent 0 70%, var(--bento-highlight));
  transform: rotate(40deg);
}
.fx-radar i { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--bento-ink); }
.fx-radar i:nth-of-type(1) { left: 40px; top: 14px; }
.fx-radar i:nth-of-type(2) { left: 14px; top: 36px; }
.fx-radar i:nth-of-type(3) { left: 42px; top: 44px; }
@keyframes fx-blip { 0%, 100% { opacity: .15; transform: scale(.8); } 20% { opacity: 1; transform: scale(1.3); } 45% { opacity: 1; transform: scale(1); } }
:is(.lp-bento.in, .fx-live) .fx-radar__sweep { animation: fx-spin 2.4s linear infinite; }
:is(.lp-bento.in, .fx-live) .fx-radar i { animation: fx-blip 2.4s ease-out calc(var(--i) * .8s) infinite both; }


/* 30. gift: the lid pops and three sparks fly out */
.fx-gift { display: flex; align-items: flex-end; }
.fx-gift__box { position: relative; width: 60px; height: 60px; transform-origin: 50% 100%; }
.fx-gift__body,
.fx-gift__lid {
  position: absolute;
  border: 2.5px solid var(--bento-ink);
  background: linear-gradient(90deg, transparent calc(50% - 4px), var(--bento-highlight) 0 calc(50% + 4px), transparent 0), var(--bento-tan-100);
}
.fx-gift__body { left: 5px; right: 5px; bottom: 0; height: 36px; border-top: 0; border-radius: 0 0 6px 6px; }
.fx-gift__lid { left: 0; right: 0; bottom: 34px; height: 14px; z-index: 1; border-radius: 4px; background-color: var(--bento-tan-200); transform-origin: 0 100%; }
.fx-gift__lid::before,
.fx-gift__lid::after {
  content: "";
  position: absolute;
  bottom: 100%;
  width: 13px; height: 9px;
  border: 2.5px solid var(--bento-ink);
  border-radius: 50%;
  background: var(--bento-highlight);
}
.fx-gift__lid::before { right: 50%; transform: rotate(-20deg); }
.fx-gift__lid::after { left: 50%; transform: rotate(20deg); }
.fx-gift i {
  position: absolute; left: 50%; bottom: 44px;
  width: 8px; height: 8px;
  background: var(--bento-highlight);
  border: 1.5px solid var(--bento-ink);
  opacity: 0;
  transform: translate(-50%, 0) rotate(45deg);
}
.fx-gift i:nth-of-type(1) { --dx: -24px; }
.fx-gift i:nth-of-type(2) { --dx: 0px; }
.fx-gift i:nth-of-type(3) { --dx: 24px; }
@keyframes fx-squash { 0%, 26%, 100% { transform: none; } 32% { transform: scale(1.08, .9); } 40% { transform: none; } }
@keyframes fx-lid { 0%, 30%, 100% { transform: none; } 42% { transform: translateY(-16px) rotate(-20deg); } 62% { transform: translateY(-12px) rotate(-15deg); } 76% { transform: none; } }
@keyframes fx-spark {
  0%, 34% { opacity: 0; transform: translate(-50%, 0) rotate(45deg) scale(.4); }
  48% { opacity: 1; }
  80%, 100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), -30px) rotate(225deg) scale(1); }
}
:is(.lp-bento.in, .fx-live) .fx-gift__box { animation: fx-squash 3.6s ease-in-out infinite; }
:is(.lp-bento.in, .fx-live) .fx-gift__lid { animation: fx-lid 3.6s cubic-bezier(.3, 1.4, .5, 1) infinite; }
:is(.lp-bento.in, .fx-live) .fx-gift i { animation: fx-spark 3.6s ease-out calc(var(--i) * 80ms) infinite; }

/* 31. calendar: a light runs through the twelve months of the year */
.fx-calendar { display: flex; align-items: center; }
.fx-calendar__sheet {
  width: 116px;
  border: 2px solid var(--bento-ink);
  border-radius: 8px;
  background: var(--bento-white);
}
.fx-calendar__sheet > b { position: relative; height: 14px; border-radius: 5px 5px 0 0; background: var(--bento-ink); }
.fx-calendar__sheet > b::before,
.fx-calendar__sheet > b::after {
  content: "";
  position: absolute; top: -6px;
  width: 4px; height: 11px;
  border-radius: 2px;
  background: var(--bento-tan-300);
}
.fx-calendar__sheet > b::before { left: 24px; }
.fx-calendar__sheet > b::after { right: 24px; }
.fx-calendar__sheet > div { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; padding: 6px; }
.fx-calendar__sheet span { height: 13px; border-radius: 3px; background: var(--bento-tan-100); }
@keyframes fx-month {
  0%, 22%, 100% { background: var(--bento-tan-100); transform: none; }
  7% { background: var(--bento-highlight); transform: scale(1.25); box-shadow: 0 0 0 1.5px var(--bento-ink); }
}
:is(.lp-bento.in, .fx-live) .fx-calendar__sheet span { animation: fx-month 3.6s ease-out calc(var(--i) * .3s) infinite; }

/* 32. tag: a price tag swings on its hole, with a glint across it */
.fx-tag { display: flex; align-items: center; }
.fx-tag__card {
  position: relative;
  overflow: hidden;
  display: flex; align-items: center; justify-content: flex-end;
  width: 124px; height: 52px;
  padding-right: 16px;
  margin-left: 4px;
  box-sizing: border-box;
  border: 2.5px solid var(--bento-ink);
  border-radius: 6px 14px 14px 6px;
  background: #f6d365;
  transform-origin: 14px 50%;
  transform: rotate(-6deg);
}
.fx-tag__card::before {
  content: "";
  position: absolute; left: 9px; top: 50%;
  width: 10px; height: 10px; margin-top: -5px;
  box-sizing: border-box;
  border-radius: 50%;
  border: 2px solid var(--bento-ink);
  background: var(--bento-white);
}
.fx-tag__card::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 30%, color-mix(in srgb, var(--bento-white) 75%, transparent) 50%, transparent 70%);
  transform: translateX(-120%);
}
/* The figure sits above the glint (z-index) so the sweep never washes it out. */
.fx-tag__card b { position: relative; z-index: 2; font-family: var(--font-display); font-size: 1.6rem; font-weight: 700; line-height: 1; letter-spacing: 0; white-space: nowrap; font-variant-numeric: tabular-nums; color: #1c1a17; }
@keyframes fx-swing { 0%, 100% { transform: rotate(-6deg); } 25% { transform: rotate(10deg); } 50% { transform: rotate(-12deg); } 75% { transform: rotate(4deg); } }
@keyframes fx-glint { 0%, 55% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }
:is(.lp-bento.in, .fx-live) .fx-tag__card { animation: fx-swing 3.2s ease-in-out infinite; }
:is(.lp-bento.in, .fx-live) .fx-tag__card::after { animation: fx-glint 3.2s ease-in-out infinite; }

/* 33. bolt: a lightning bolt strikes and sends out two shock rings */
.fx-bolt { display: flex; align-items: center; }
.fx-bolt svg { position: relative; z-index: 1; margin-left: 14px; }
.fx-bolt .fx-bolt__glyph { fill: var(--bento-highlight); stroke-width: 2.5; }
.fx-bolt__glyph { transform-box: fill-box; transform-origin: 50% 50%; }
.fx-bolt i {
  position: absolute; left: 34px; top: 50%;
  width: 56px; height: 56px;
  margin: -28px 0 0 -28px;
  border-radius: 50%;
  border: 2px solid var(--bento-highlight-edge);
  opacity: 0;
}
@keyframes fx-zap {
  0%, 56%, 100% { transform: none; }
  60% { transform: scale(1.2) rotate(-8deg); }
  66% { transform: scale(.92) rotate(3deg); }
  74% { transform: scale(1.05); }
  82% { transform: none; }
}
@keyframes fx-shock { 0%, 58% { opacity: 0; transform: scale(.5); } 64% { opacity: 1; } 100% { opacity: 0; transform: scale(1.7); } }
:is(.lp-bento.in, .fx-live) .fx-bolt__glyph { animation: fx-zap 2.8s ease-out infinite; }
:is(.lp-bento.in, .fx-live) .fx-bolt i { animation: fx-shock 2.8s ease-out infinite; }
:is(.lp-bento.in, .fx-live) .fx-bolt i + i { animation-delay: .25s; }

/* 34. seats: one dot per seat in the offer. A band of ink runs corner to
   corner through the grid, each dot ringing in yellow as it passes, and the
   whole grid drifts up and down slowly. Colour and size only ever change on
   compositor properties (opacity, transform) of a dot's own layers. */
.fx-seats__grid { display: grid; grid-template-columns: repeat(10, 11px); gap: 7px; }
.fx-seats__grid span {
  position: relative;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--bento-tan-200);
}
.fx-seats__grid span::before,
.fx-seats__grid span::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: 50%;
  opacity: 0;
}
.fx-seats__grid span::before { background: var(--bento-highlight); }
.fx-seats__grid span::after  { background: var(--bento-ink); }
@keyframes fx-seat-core { 0%, 34%, 100% { opacity: 0; transform: scale(.5); } 12% { opacity: 1; transform: scale(1.15); } }
@keyframes fx-seat-ring { 0%, 34%, 100% { opacity: 0; transform: scale(1); } 8% { opacity: .95; transform: scale(1.1); } 22% { opacity: 0; transform: scale(2.3); } }
@keyframes fx-seat-drift { 0%, 100% { transform: translateY(-3px); } 50% { transform: translateY(3px); } }
:is(.lp-bento.in, .fx-live) .fx-seats__grid { animation: fx-seat-drift 5.5s ease-in-out infinite; }
:is(.lp-bento.in, .fx-live) .fx-seats__grid span::after  { animation: fx-seat-core 3.4s ease-in-out calc(var(--i) * 85ms) infinite; }
:is(.lp-bento.in, .fx-live) .fx-seats__grid span::before { animation: fx-seat-ring 3.4s ease-out calc(var(--i) * 85ms) infinite; }

@media (prefers-reduced-motion: reduce) {
  .lp-fx, .lp-fx *, .lp-fx *::before, .lp-fx *::after { animation: none !important; }
}