/* ==========================================================================
   Ferrands Home Hero — "tastes SO GOOD!" banner-plate + composited tubs
   Namespace: .ffh- (Ferrands Food Hero)
   ========================================================================== */

.ffh-hero {
  --ffh-ink: #141414;

  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  background: linear-gradient(135deg, #C2014E 0%, #C2014E 45%, #0293E5 55%, #0293E5 100%);
}

.ffh-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---- the banner-plate image, full-bleed, aspect-ratio locked ---- */

.ffh-banner {
  position: relative;
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  aspect-ratio: 1535 / 1024;
  overflow: hidden;
}

.ffh-banner__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---- real, invisible link over the baked-in "Find Ferrands Near You" button ---- */

.ffh-cta-hit {
  position: absolute;
  left: 8%;
  top: 71.5%;
  width: 26%;
  height: 10%;
  border-radius: 999px;
  display: block;
}

.ffh-cta-hit:focus-visible {
  outline: 3px solid #FFFFFF;
  outline-offset: 3px;
  box-shadow: 0 0 0 6px rgba(2, 147, 229, 0.45);
}

@media (hover: hover) and (pointer: fine) {
  .ffh-cta-hit:hover {
    background: rgba(255, 255, 255, 0.08);
  }
}

/* ---- the panel zone: positioned exactly over the empty panel in the image ---- */

.ffh-panel-zone {
  position: absolute;
  left: 49%;
  top: 13%;
  width: 46.8%;
  height: 76.8%;
  pointer-events: none;
}

.ffh-cluster {
  position: absolute;
  inset: 0;
}

.ffh-tub {
  position: absolute;
  object-fit: contain;
  width: auto;
  height: auto;
  will-change: transform;
  animation: ffh-float var(--ffh-float-dur, 2.6s) ease-in-out var(--ffh-float-delay, 0s) infinite alternate;
  pointer-events: auto;
}

.ffh-tub-shadow {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(4, 14, 26, 0.4), rgba(4, 14, 26, 0) 72%);
  filter: blur(2px);
  z-index: 0;
}

/* positions — relative to the panel zone */
.ffh-tub--vanilla    { left: 6%;  bottom: 14%; width: 42%; z-index: 2; --ffh-rot: -4deg; }
.ffh-tub--chocolate  { right: 4%; bottom: 20%; width: 40%; z-index: 1; --ffh-rot: 5deg; }
.ffh-tub--strawberry { left: 14%; bottom: 4%;  width: 40%; z-index: 3; --ffh-rot: -2deg; }
.ffh-tub--banana     { right: 12%; bottom: 6%; width: 38%; z-index: 2; --ffh-rot: 4deg; }
.ffh-tub--peanut     { left: 30%; bottom: -4%; width: 44%; z-index: 4; --ffh-rot: 14deg; }

.ffh-tub {
  transform: rotate(var(--ffh-rot, 0deg));
}

.ffh-shadow--vanilla    { left: 8%;  bottom: 10%; width: 34%; height: 9%; }
.ffh-shadow--chocolate  { right: 6%; bottom: 16%; width: 32%; height: 8%; }
.ffh-shadow--strawberry { left: 16%; bottom: 0%;  width: 32%; height: 8%; }
.ffh-shadow--banana     { right: 14%; bottom: 2%; width: 30%; height: 8%; }
.ffh-shadow--peanut     { left: 32%; bottom: -8%; width: 36%; height: 9%; }

@keyframes ffh-float {
  from { transform: translateY(0) rotate(var(--ffh-rot, 0deg)); }
  to   { transform: translateY(-18px) rotate(calc(var(--ffh-rot, 0deg) + 2deg)); }
}

/* ---- floor reflection of the tubs (matches the image's own baked-in reflective floor) ---- */

.ffh-panel__reflection {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 30%;
  transform: scaleY(-1);
  opacity: 0.14;
  -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent);
  mask-image: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent);
  pointer-events: none;
}

/* ---- hover (fine pointer only) ---- */

@media (hover: hover) and (pointer: fine) {
  .ffh-tub {
    transition: transform 0.28s cubic-bezier(0.2, 0.7, 0.3, 1), filter 0.28s;
  }
  .ffh-tub:hover {
    animation-play-state: paused;
    transform: translateY(-14px) rotate(-3deg) scale(1.04);
    filter: drop-shadow(0 24px 30px rgba(0, 0, 0, 0.28));
    z-index: 9;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ffh-tub {
    animation: none !important;
    transform: rotate(var(--ffh-rot, 0deg)) !important;
  }
}