/* ═══════════════════════════════════════════════════════════════
   FA LANDING V2 — Animations, Floating Motifs & Visual Life
   Mirrors om-v2.css patterns with FA purple palette + label/scan motif.
   ═══════════════════════════════════════════════════════════════ *//* ─── 1. FLOATING MOTIFS (boxes + shipping labels) ──────────────── */



.hero__motifs {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: -160px;
  pointer-events: none;
  overflow: hidden;
  z-index: -1;
}

.hero__motif {
  position: absolute;
  rotate: var(--bx-tilt, 0deg);
  animation: motif-float var(--bx-dur, 9s) ease-in-out infinite;
  animation-delay: var(--bx-delay, 0s);
  will-change: transform;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform-style: preserve-3d;
}

.hero__motif svg {
  width: 100%;
  height: 100%;
  display: block;
}/* size + depth cue */


.hero__motif--xs {
  width: 26px;
  opacity: 0.28;
}

.hero__motif--s {
  width: 40px;
  opacity: 0.45;
}

.hero__motif--m {
  width: 58px;
  opacity: 0.75;
  filter: drop-shadow(0 4px 6px rgba(80, 30, 120, 0.08));
}

.hero__motif--l {
  width: 86px;
  opacity: 0.95;
  filter: drop-shadow(0 6px 12px rgba(80, 30, 120, 0.12));
}

.hero__motif--xl {
  width: 118px;
  opacity: 1;
  filter: drop-shadow(0 10px 20px rgba(80, 30, 120, 0.15));
}/* Labels are wider than boxes — overrides for tag aspect */


.hero__motif--label.hero__motif--xs {
  width: 38px;
}

.hero__motif--label.hero__motif--s {
  width: 56px;
}

.hero__motif--label.hero__motif--m {
  width: 78px;
}

.hero__motif--label.hero__motif--l {
  width: 108px;
}

.hero__motif--label.hero__motif--xl {
  width: 144px;
}

@keyframes motif-float {

  0%,
  100% {
    translate: 0 0;
    rotate: var(--bx-tilt, 0deg);
  }

  33% {
    translate: 2px -15px;
    rotate: calc(var(--bx-tilt, 0deg) + 3deg);
  }

  66% {
    translate: -2px -8px;
    rotate: calc(var(--bx-tilt, 0deg) - 2.5deg);
  }
}/* ─── 2. FA-FLOW: tinted zone that fades to plain white at bottom ── */



.fa-flow {
  position: relative;
  /* Purple tint is concentrated in the hero zone (0-22%). By ~38-45%
     (around the stats strip / start of bento) we already land on
     #fafbfc — the neutral ink-1 — and hold it through the bento mosaic.
     The next section (pillars) thus reads as a true visual reset. */
  background: linear-gradient(180deg,
      #faf0ff 0%,
      #f3e4fb 14%,
      #f7ecff 24%,
      #fbf5ff 34%,
      #fcfafd 44%,
      #fafbfc 54%,
      #fafbfc 100%);
  overflow: hidden;
  isolation: isolate;
}/* Below-hero motifs (.hero__motif--flow) are transitional whispers into social proof segment. */


.hero__motif--flow {
  opacity: 0.05;
}/* The first 2 motifs immediately below hero get a slight opacity adjustment. */


.hero__motif--flow[style*="top: 95%"],
.hero__motif--flow[style*="top: 108%"] {
  opacity: 0.07;
}

[data-brand="fa"] .fa-flow .hero {
  background: transparent;
  overflow: visible;
}

[data-brand="fa"] .hero {
  position: relative;
}

[data-brand="fa"] .hero__inner {
  position: relative;
  z-index: 1;
}

[data-brand="fa"] .hero__inner--wide {
  max-width: 980px;
}/* ─── 3. FROSTED HALO behind hero copy + FA mockup ─────────────── */



[data-brand="fa"] .hero__inner::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -6%;
  width: min(1180px, calc(100vw - 32px));
  height: 124%;
  transform: translateX(-50%);
  z-index: -1;
  border-radius: 48px;
  background: radial-gradient(ellipse 70% 78% at 50% 50%,
      rgba(255, 255, 255, 0.68) 0%,
      rgba(255, 255, 255, 0.44) 38%,
      rgba(255, 255, 255, 0.18) 62%,
      transparent 82%);

  -webkit-mask-image: radial-gradient(ellipse 78% 86% at 50% 50%, #000 35%, rgba(0, 0, 0, 0.6) 60%, transparent 92%);
  mask-image: radial-gradient(ellipse 78% 86% at 50% 50%, #000 35%, rgba(0, 0, 0, 0.6) 60%, transparent 92%);
  pointer-events: none;
}

.fa-mockup-in {
  z-index: 1;
  position: relative;
}

.fa-mockup-in::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -5%;
  width: min(1240px, calc(100vw - 16px));
  height: 110%;
  transform: translateX(-50%);
  z-index: -1;
  border-radius: 32px;
  background: radial-gradient(ellipse 72% 80% at 50% 50%,
      rgba(255, 255, 255, 0.58) 0%,
      rgba(255, 255, 255, 0.32) 45%,
      transparent 78%);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  -webkit-mask-image: radial-gradient(ellipse 80% 88% at 50% 50%, #000 40%, rgba(0, 0, 0, 0.55) 65%, transparent 92%);
  mask-image: radial-gradient(ellipse 80% 88% at 50% 50%, #000 40%, rgba(0, 0, 0, 0.55) 65%, transparent 92%);
  pointer-events: none;
}/* ─── 4. FA mockup glamorous entrance ──────────────────────────── */



.fa-mockup-in {
  opacity: 1;
}/* ─── 5. FA-GLASS-STRIP (social proof / pas) ─────────────────── */




.fa-glass-strip {
  position: relative;
  z-index: 0;
  background: linear-gradient(180deg,
      rgba(255, 255, 255, 0.42) 0%,
      rgba(255, 255, 255, 0.55) 50%,
      rgba(255, 255, 255, 0.42) 100%);
  backdrop-filter: blur(10px) saturate(115%);
  -webkit-backdrop-filter: blur(10px) saturate(115%);
  border-top: 1px solid rgba(255, 255, 255, 0.55);
  border-bottom: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow:
    0 1px 0 rgba(189, 85, 215, 0.10) inset,
    0 -1px 0 rgba(189, 85, 215, 0.10) inset;
}

@keyframes pulse-border-purple {

  0%,
  100% {
    opacity: 0.55;
  }

  50% {
    opacity: 0.85;
  }
}/* ─── 7. SHIMMER & HOVER ──────────────────────────────────────── */



[data-brand="fa"] .card {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-brand="fa"] .card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(126, 47, 149, 0.10), 0 2px 8px rgba(0, 0, 0, 0.04);
}

[data-brand="fa"] .tile {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

[data-brand="fa"] .tile:hover {
  transform: translateY(-4px) scale(1.04);
}/* Reuse the shimmer from om-v2 if loaded; redefine standalone in case. */


.btn--shimmer {
  position: relative;
  overflow: hidden;
}

.btn--shimmer::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -75%;
  width: 50%;
  height: 200%;
  background: linear-gradient(105deg,
      transparent 40%,
      rgba(255, 255, 255, 0.28) 45%,
      rgba(255, 255, 255, 0.38) 50%,
      rgba(255, 255, 255, 0.28) 55%,
      transparent 60%);
  animation: shimmer 4s ease-in-out infinite;
  pointer-events: none;
}

@keyframes shimmer {

  0%,
  100% {
    translate: -100% 0;
  }

  50% {
    translate: 250% 0;
  }
}

[data-brand="fa"] .glow-card__number.is-visible {
  opacity: 1;
  translate: 0 0;
}/* ─── 9. RESPONSIVE ──────────────────────────────────────────── */



@media (max-width: 900px) {
  .hero__motif:nth-child(n+8) {
    display: none;
  }
}

@media (max-width: 560px) {
  .hero__motifs {
    display: none;
  }}/* ─── 10. REDUCED MOTION ─────────────────────────────────────── */



@media (prefers-reduced-motion: reduce) {
  .fa-mockup-in {
    animation: none;
    opacity: 1;
    transform: none;
    filter: none;
  }

  .hero__motif {
    animation: none;
  }

  [data-brand="fa"] .glow-card::before {
    animation: none;
    opacity: 0.4;
  }

  .btn--shimmer::after {
    animation: none;
    display: none;
  }
}