/* ===== ARROW APOTHECARY – SITE BACKGROUND (arrow-bgfx) ===== */
html {
  background: #fdf8f3;
}

body {
  background: transparent !important;
}

.site-background {
  background: transparent !important;
  background-image: none !important;
}

.bgfx {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background: linear-gradient(180deg, #fff3e8 0%, #fdf8f3 34%, #f8fbf6 100%);
  transform: translateZ(0);
  contain: paint;
}

.bgfx > * {
  position: absolute;
}

/* 1. Soft colour fields: warm peach, sky, mint, blush (same pastels as the cards) */
.bgfx-mesh i {
  border-radius: 50%;
  animation: bgfxMesh 26s ease-in-out infinite alternate;
  will-change: transform;
}

.bgfx-mesh i:nth-child(1) {
  width: 62vmax;
  height: 62vmax;
  left: -22vmax;
  top: -26vmax;
  background: radial-gradient(circle, #ffe0cb 0, rgba(255, 224, 203, 0) 66%);
}

.bgfx-mesh i:nth-child(2) {
  width: 56vmax;
  height: 56vmax;
  right: -24vmax;
  top: -14vmax;
  background: radial-gradient(circle, #d3e6fb 0, rgba(211, 230, 251, 0) 66%);
  animation-duration: 31s;
}

.bgfx-mesh i:nth-child(3) {
  width: 58vmax;
  height: 58vmax;
  left: -20vmax;
  bottom: -30vmax;
  background: radial-gradient(circle, #d3efd8 0, rgba(211, 239, 216, 0) 66%);
  animation-duration: 34s;
}

.bgfx-mesh i:nth-child(4) {
  width: 46vmax;
  height: 46vmax;
  right: -14vmax;
  bottom: -22vmax;
  background: radial-gradient(circle, #fbd9dc 0, rgba(251, 217, 220, 0) 66%);
  animation-duration: 29s;
}

@keyframes bgfxMesh {
  to {
    transform: translate3d(4vmax, 3vmax, 0) scale(1.08);
  }
}

/* 2. Pharmacy-cross pattern, fades out toward the middle of the page */
.bgfx-pattern {
  inset: 0;
  opacity: 0.9;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cg fill='%230d1240' fill-opacity='.07'%3E%3Crect x='30' y='26' width='4' height='12' rx='2'/%3E%3Crect x='26' y='30' width='12' height='4' rx='2'/%3E%3Ccircle cx='6' cy='6' r='1.5'/%3E%3Ccircle cx='58' cy='58' r='1.5'/%3E%3C/g%3E%3C/svg%3E");
  -webkit-mask-image: radial-gradient(130% 80% at 50% 0, #000 0, transparent 70%);
  mask-image: radial-gradient(130% 80% at 50% 0, #000 0, transparent 70%);
}

/* 3. Floating pharmacy shapes (outer = scroll parallax, inner = slow bob) */
.bgfx-sh {
  opacity: 0.7;
  transform: translateZ(0);
}

.bgfx-sh svg {
  display: block;
  width: 100%;
  height: 100%;
  animation: bgfxBob var(--d, 16s) ease-in-out infinite alternate;
  animation-delay: var(--dl, 0s);
}

@keyframes bgfxBob {
  from {
    transform: translateY(0) rotate(var(--r0, -8deg));
  }
  to {
    transform: translateY(-20px) rotate(var(--r1, 10deg));
  }
}

/* 4. Signature: quiet New York skyline, taken from the Arrow Apothecary brand */
.bgfx-city {
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: clamp(110px, 24vh, 230px);
}

/* 5. Paper grain texture */
.bgfx-grain {
  display: none;
}

/* Section tints: soft bands that fade into the background */
.tint {
  padding-bottom: 80px;
  margin-top: 50px;
}

.tint-mint {
  background: linear-gradient(180deg, rgba(227, 243, 230, 0) 0, rgba(227, 243, 230, 0.85) 16%, rgba(227, 243, 230, 0.85) 84%, rgba(227, 243, 230, 0) 100%);
}

.tint-peach {
  background: linear-gradient(180deg, rgba(255, 236, 222, 0) 0, rgba(255, 236, 222, 0.9) 16%, rgba(255, 236, 222, 0.9) 84%, rgba(255, 236, 222, 0) 100%);
}

.tint-sky {
  background: linear-gradient(180deg, rgba(225, 238, 252, 0) 0, rgba(225, 238, 252, 0.9) 16%, rgba(225, 238, 252, 0.9) 84%, rgba(225, 238, 252, 0) 100%);
}

@media (max-width: 700px) {
  .bgfx-sh.hm {
    display: none;
  }
  .bgfx-sh {
    opacity: 0.55;
  }
  .bgfx-pattern {
    opacity: 0.6;
  }
  .tint {
    padding-bottom: 60px;
    margin-top: 30px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bgfx * {
    animation: none !important;
  }
  .bgfx-sh {
    transform: none;
  }
}

@media print {
  .bgfx {
    display: none;
  }
}