/* ═══════════════════════════════════════════════════════════
   BE30 MOTION — keyframes, reveal states, cursor, loader
═══════════════════════════════════════════════════════════ */

/* ────────────────────────────────────────────────────────
   KEYFRAMES
──────────────────────────────────────────────────────── */

@keyframes hbm {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@keyframes mq {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@keyframes be30-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  33%       { transform: translateY(-8px) rotate(1deg); }
  66%       { transform: translateY(-4px) rotate(-0.5deg); }
}

@keyframes be30-pulse-ring {
  0%   { transform: scale(1);    opacity: 0.6; }
  100% { transform: scale(1.8);  opacity: 0; }
}

@keyframes be30-scroll-line {
  0%   { transform: scaleY(0);   opacity: 1; }
  60%  { transform: scaleY(1);   opacity: 1; }
  100% { transform: scaleY(1) translateY(6px); opacity: 0; }
}

/* ────────────────────────────────────────────────────────
   HERO MARQUEE
──────────────────────────────────────────────────────── */

.hero-blue-marquee {
  display: flex;
  gap: 0;
  width: max-content;
  animation: hbm 48s linear infinite;
}

/* ────────────────────────────────────────────────────────
   SCROLL REVEALS — base state (GSAP animates .fu elements)
   CSS .fu/.vis kept as fallback for no-JS contexts.
──────────────────────────────────────────────────────── */

.fu {
  opacity: 0;
  transform: translateY(32px);
  /* JS overrides these; CSS is the no-JS fallback */
}
.fu.vis {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity   var(--dur-slow) var(--ease-out-expo),
    transform var(--dur-slow) var(--ease-out-expo);
}

/* Stagger delays */
.d1 { transition-delay: 0.1s; }
.d2 { transition-delay: 0.2s; }
.d3 { transition-delay: 0.3s; }
.d4 { transition-delay: 0.4s; }
.d5 { transition-delay: 0.5s; }

/* Reduced motion: skip all animations */
@media (prefers-reduced-motion: reduce) {
  .fu { opacity: 1 !important; transform: none !important; transition: none !important; }
  .hero-blue-marquee, .mq-in { animation: none !important; }
}

/* No-JS fallback: GSAP sets elements visible; if it fails, this makes them visible */
.no-js .fu { opacity: 1 !important; transform: none !important; }

/* ────────────────────────────────────────────────────────

/* ────────────────────────────────────────────────────────
   LOADER
──────────────────────────────────────────────────────── */

.be30-loader {
  position: fixed;
  inset: 0;
  background: var(--white);
  z-index: var(--z-loader);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
}

/* Botella en el loader */
.be30-loader-bottle {
  height: clamp(120px, 22vh, 200px);
  width: auto;
  object-fit: contain;
  opacity: 0;
  transform: translateY(12px);
  filter: drop-shadow(0 12px 32px rgba(56,168,186,0.25));
  mix-blend-mode: multiply;
  -webkit-mask-image: linear-gradient(to bottom, black 55%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 55%, transparent 100%);
}

/* Logo en el loader */
.be30-loader-brand {
  height: clamp(50px, 8vh, 80px);
  width: auto;
  object-fit: contain;
  opacity: 0;
  transform: translateY(12px);
  display: block;
}

.be30-loader-line {
  width: clamp(8rem, 18vw, 13rem);
  height: 2px;
  background: var(--border);
  border-radius: 2px;
  position: relative;
  overflow: hidden;
}
.be30-loader-bar {
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--blue), var(--blue2));
  border-radius: 2px;
}

.be30-loader-tagline {
  font-size: 0.75rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: 0;
}

/* ────────────────────────────────────────────────────────
   FLOATING PROBLEM PILLS
──────────────────────────────────────────────────────── */

.prob-float {
  animation: be30-float 6s ease-in-out infinite;
}
.pf1 { animation-delay: 0s;    }
.pf2 { animation-delay: -1.5s; }
.pf3 { animation-delay: -3s;   }
.pf4 { animation-delay: -4.5s; }

@media (prefers-reduced-motion: reduce) {
  .prob-float { animation: none; }
}

/* ────────────────────────────────────────────────────────
   INGREDIENT ORBIT (bento bc1)
──────────────────────────────────────────────────────── */

.ing-orbit {
  animation: be30-float 8s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .ing-orbit { animation: none; }
}

/* ────────────────────────────────────────────────────────
   HERO TRUST PULSE
──────────────────────────────────────────────────────── */

.trust-avatars::after {
  content: '';
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #2f9e44;
  margin-left: 8px;
  animation: be30-pulse-ring 1.8s ease-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .trust-avatars::after { animation: none; }
}