/* ==========================================================================
   HNB Foods — motion layer
   Scroll reveals, parallax, tilt, marquee, counters and the honey effects.
   Everything here is progressive: without JS the `js-motion` class is never
   added, so all content stays visible and static.
   ========================================================================== */

:root {
  --out: cubic-bezier(.22, .8, .3, 1);
  --spring: cubic-bezier(.34, 1.4, .5, 1);
}

/* ====================================================== 1. SCROLL PROGRESS */
.progress {
  position: fixed; inset: 0 0 auto; height: 3px; z-index: 210;
  transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--gold), var(--orange), var(--gold-light));
  will-change: transform;
}

/* ============================================================= 2. REVEALS */
.js-motion [data-reveal] {
  opacity: 0;
  transition: opacity .85s var(--out), transform .85s var(--out), filter .85s var(--out);
  transition-delay: var(--d, 0ms);
  will-change: opacity, transform;
}
.js-motion [data-reveal="up"]    { transform: translateY(34px); }
.js-motion [data-reveal="down"]  { transform: translateY(-26px); }
.js-motion [data-reveal="left"]  { transform: translateX(-42px); }
.js-motion [data-reveal="right"] { transform: translateX(42px); }
.js-motion [data-reveal="scale"] { transform: scale(.90); }
.js-motion [data-reveal="blur"]  { transform: translateY(24px); filter: blur(12px); }
.js-motion [data-reveal="flip"]  { transform: perspective(900px) rotateX(-14deg) translateY(28px); }

.js-motion [data-reveal].is-in {
  opacity: 1; transform: none; filter: none;
}

/* letter-by-letter headline */
.js-motion .split span {
  display: inline-block;
  opacity: 0; transform: translateY(.7em) rotate(3deg);
  transition: opacity .6s var(--out), transform .7s var(--spring);
  transition-delay: calc(var(--i, 0) * 38ms);
}
.js-motion .split.is-in span { opacity: 1; transform: none; }

/* ================================================= 3. HERO: video + drip */
.js-motion .hero__media video,
.js-motion .hero__media img {
  animation: kenburns 26s ease-in-out infinite alternate;
}
@keyframes kenburns {
  from { transform: scale(1) translate3d(0, 0, 0); }
  to   { transform: scale(1.09) translate3d(-1.5%, -1%, 0); }
}

/* honey pouring down over the top of the hero */
.hero__honey {
  position: absolute; inset: 0 0 auto; z-index: 1; pointer-events: none;
  color: var(--gold);
  opacity: .62;
}
.hero__honey svg { width: 100%; height: clamp(26px, 3.4vw, 52px); display: block; }

/* the cream wave that hands the hero over to the next section */
.hero__wave {
  position: absolute; inset: auto 0 -1px; z-index: 2; pointer-events: none;
  line-height: 0; color: var(--cream);
}
.hero__wave svg { width: 100%; height: clamp(40px, 6vw, 84px); display: block; }

/* slow falling honey drops */
.drop {
  position: absolute; top: 0; width: 9px; height: 9px; border-radius: 0 50% 50% 50%;
  background: linear-gradient(160deg, var(--gold-light), var(--honey));
  transform: rotate(45deg); opacity: 0; z-index: 1; pointer-events: none;
  box-shadow: 0 0 10px rgba(233, 162, 39, .5);
}
.js-motion .drop { animation: drip 7s cubic-bezier(.5, 0, .9, .4) infinite; }
@keyframes drip {
  0%       { transform: translateY(0) rotate(45deg) scale(.5); opacity: 0; }
  12%      { opacity: .95; }
  75%      { opacity: .8; }
  100%     { transform: translateY(72vh) rotate(45deg) scale(1.15); opacity: 0; }
}

/* ================================================================ 4. BEE */
.bee-lane {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 2;
}
.bee-x { position: absolute; top: var(--top, 24%); left: 0; }
.js-motion .bee-x { animation: bee-x var(--dur, 28s) linear infinite; animation-delay: var(--delay, 0s); }
.bee-y { color: var(--gold-light); filter: drop-shadow(0 3px 8px rgba(0, 0, 0, .35)); }
.js-motion .bee-y { animation: bee-y 3.4s ease-in-out infinite alternate; }
.bee-y svg { width: clamp(22px, 2.6vw, 34px); height: auto; }

@keyframes bee-x { from { transform: translateX(-12vw); } to { transform: translateX(112vw); } }
@keyframes bee-y {
  from { transform: translateY(-14px) rotate(-7deg); }
  to   { transform: translateY(46px) rotate(7deg); }
}
.js-motion .bee-wing { animation: flutter .18s ease-in-out infinite alternate; transform-origin: 60% 70%; }
@keyframes flutter { from { transform: scaleY(1); } to { transform: scaleY(.45); } }

/* ======================================================== 5. HONEYCOMB */
.js-motion .honeycomb-bg::before { animation: comb 34s linear infinite; }
@keyframes comb { to { background-position: 56px 96px; } }

/* ========================================================== 6. MARQUEE */
.marquee {
  overflow: hidden; padding: .9rem 0;
  background: linear-gradient(90deg, var(--ink), #5A3A20 50%, var(--ink));
  border-block: 1px solid rgba(255, 198, 92, .18);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track { display: flex; align-items: center; gap: 2.75rem; width: max-content; }
.js-motion .marquee__track { animation: slide var(--speed, 38s) linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes slide { to { transform: translateX(-50%); } }

.marquee__item {
  display: inline-flex; align-items: center; gap: .6rem; white-space: nowrap;
  font: 700 .84rem var(--font-body); letter-spacing: .12em; text-transform: uppercase;
  color: #F3E2CE;
}
.marquee__item svg { width: 15px; height: 15px; color: var(--gold-light); }
.marquee__item b { color: var(--gold-light); }

/* ============================================================ 7. TILT */
.js-motion .tilt {
  transform: perspective(1000px)
             rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg))
             translateY(var(--ty, 0px)) scale(var(--sc, 1));
  transition: transform .5s var(--out), box-shadow .4s var(--ease);
}
.js-motion .tilt.is-tilting { transition: transform .08s linear, box-shadow .4s var(--ease); }
.js-motion .card.tilt:hover { --ty: -8px; --sc: 1.015; }

/* shine sweep across product imagery */
.card__media::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(104deg, transparent 36%, rgba(255, 255, 255, .5) 50%, transparent 64%);
  transform: translateX(-130%);
  transition: transform .9s var(--out);
}
.card:hover .card__media::after { transform: translateX(130%); }

/* ====================================================== 8. BUTTON SHINE */
.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn::after {
  content: ""; position: absolute; z-index: -1; top: -20%; left: -80%;
  width: 45%; height: 140%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .38), transparent);
  transform: skewX(-22deg);
  transition: left .7s var(--out);
}
.btn:hover::after { left: 135%; }
.btn--ghost::after { background: linear-gradient(100deg, transparent, rgba(241, 113, 64, .16), transparent); }

/* WhatsApp float: gentle attention ring */
.wa-float { isolation: isolate; }
.wa-float::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 100px;
  background: var(--whatsapp);
}
.js-motion .wa-float::before { animation: ring 2.8s cubic-bezier(.3, 0, .2, 1) infinite; }
@keyframes ring {
  0%   { transform: scale(1); opacity: .55; }
  70%  { transform: scale(1.45); opacity: 0; }
  100% { transform: scale(1.45); opacity: 0; }
}

/* ===================================================== 9. FLY TO CART */
.fly-clone {
  position: fixed; z-index: 199; border-radius: 12px; object-fit: cover;
  pointer-events: none; box-shadow: var(--shadow-lg);
  transition: transform .85s cubic-bezier(.55, -.15, .35, 1), opacity .85s ease-in, border-radius .85s ease;
}

/* ======================================================= 10. COUNTERS */
.stat { text-align: center; }
.stat__num {
  display: block;
  font: 700 clamp(2.6rem, 7vw, 4.6rem)/1 var(--font-display);
  background: linear-gradient(120deg, var(--gold-light), var(--orange) 55%, var(--gold));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  letter-spacing: -.02em;
}
.stat__label {
  display: block; margin-top: .45rem;
  font-size: .82rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(231, 218, 202, .72);
}
.section--cream .stat__label, .section:not(.section--dark) .stat__label { color: var(--muted); }

/* =========================================== 11. SHIMMER / GRADIENT TEXT */
.grad {
  background: linear-gradient(100deg, var(--orange), var(--gold) 45%, var(--orange-dark));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.js-motion .shimmer {
  background: linear-gradient(100deg,
    currentColor 20%, var(--gold-light) 42%, #fff 50%, var(--gold-light) 58%, currentColor 80%);
  background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  animation: shimmer 7s linear infinite;
}
@keyframes shimmer { from { background-position: 160% 0; } to { background-position: -60% 0; } }

/* ========================================================= 12. PARALLAX */
.js-motion [data-parallax] { will-change: transform; }
.js-motion [data-parallax] > img,
.js-motion [data-parallax] > .video-card { transform: translate3d(0, var(--py, 0px), 0); }

/* ======================================================= 13. THE CAUSE */
.cause {
  position: relative; isolation: isolate; overflow: hidden;
  background: radial-gradient(120% 130% at 15% 0%, #4A2E18 0%, var(--ink) 55%);
  color: #E8DBCA;
}
.cause::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='96' viewBox='0 0 56 96'%3E%3Cpath fill='none' stroke='%23FFC65C' stroke-width='1.4' d='M28 0l24 14v28L28 56 4 42V14z M28 56l24 14v28M28 56L4 70v28'/%3E%3C/svg%3E");
  background-size: 56px 96px;
}
.js-motion .cause::before { animation: comb 44s linear infinite; }
.cause h2, .cause h3 { color: var(--cream); }

.cause__ribbon {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .45rem 1.05rem; border-radius: 100px;
  background: rgba(255, 198, 92, .12); border: 1px solid rgba(255, 198, 92, .35);
  color: var(--gold-light);
  font: 700 .76rem var(--font-body); letter-spacing: .14em; text-transform: uppercase;
}
.cause__ribbon svg { width: 14px; height: 14px; }

/* the four-step flow */
.flow { display: grid; gap: 1.15rem; grid-template-columns: minmax(0, 1fr); counter-reset: f; }
@media (min-width: 700px)  { .flow { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .flow { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.flow__step {
  position: relative; counter-increment: f;
  padding: 1.6rem 1.35rem;
  background: rgba(255, 255, 255, .045);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: var(--radius-lg);
  transition: background .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.flow__step:hover { background: rgba(255, 255, 255, .08); border-color: rgba(255, 198, 92, .4); transform: translateY(-5px); }
.flow__step::before {
  content: "0" counter(f);
  display: block; margin-bottom: .85rem;
  font: 700 .8rem var(--font-body); letter-spacing: .18em;
  color: var(--gold-light); opacity: .85;
}
/* the connector line that draws itself between the steps */
@media (min-width: 1040px) {
  .flow__step:not(:last-child)::after {
    content: ""; position: absolute; top: 50%; right: -1.15rem; width: 1.15rem; height: 2px;
    background: linear-gradient(90deg, rgba(255, 198, 92, .55), rgba(255, 198, 92, .1));
    transform: scaleX(0); transform-origin: 0 50%;
    transition: transform .6s var(--out) var(--d, 0ms);
  }
  .flow.is-in .flow__step::after { transform: scaleX(1); }
}
.flow__step .ic {
  width: 44px; height: 44px; display: grid; place-items: center; border-radius: 13px;
  background: rgba(233, 162, 39, .16); color: var(--gold-light); margin-bottom: .9rem;
}
.flow__step .ic svg { width: 22px; height: 22px; }
.flow__step h3 { font-size: 1.08rem; margin-bottom: .3rem; }
.flow__step p { font-size: .9rem; color: rgba(231, 218, 202, .7); margin: 0; }

/* pull-quote for the philosophy line */
.pull {
  position: relative; margin: 0;
  padding: clamp(1.5rem, 4vw, 2.5rem) clamp(1.5rem, 4vw, 3rem);
  border-left: 3px solid var(--gold);
  background: linear-gradient(100deg, rgba(255, 198, 92, .1), transparent 70%);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}
.pull p {
  font: 400 clamp(1.15rem, 2.4vw, 1.6rem)/1.5 var(--font-display);
  color: var(--cream); margin: 0;
}
.pull p em { font-style: normal; color: var(--gold-light); }
.pull footer { margin-top: 1rem; font-size: .84rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(231, 218, 202, .6); }

/* signature block */
.signature { text-align: center; }
.signature__mark {
  font: 400 clamp(1.9rem, 5vw, 2.8rem)/1 'Fraunces', Georgia, serif;
  font-style: italic; color: var(--gold-light); margin-bottom: .3rem;
}
.js-motion .signature__mark {
  background: linear-gradient(100deg, var(--gold), var(--gold-light) 50%, var(--gold));
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: shimmer 8s linear infinite;
}

/* ==================================================== 14. FLOAT / PULSE */
.js-motion .float { animation: float 6s ease-in-out infinite; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

.js-motion .pulse-dot::before {
  content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--success); margin-right: .5rem; vertical-align: middle;
  animation: livedot 2s ease-in-out infinite;
}
@keyframes livedot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(31, 138, 76, .6); }
  50%      { box-shadow: 0 0 0 6px rgba(31, 138, 76, 0); }
}

/* ======================================================= 15. NAV LINKS */
.nav__links a::before {
  content: ""; position: absolute; left: 50%; right: 50%; bottom: .3rem; height: 2px;
  border-radius: 2px; background: var(--orange);
  transition: left .3s var(--out), right .3s var(--out);
}
.nav__links a:hover::before { left: .85rem; right: .85rem; }
@media (max-width: 940px) { .nav__links a::before { display: none; } }

/* ==================================================== 16. CARD ENTRANCE */
.js-motion .grid > .card { --d: calc(var(--i, 0) * 90ms); }

/* ================================================== 17. REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
  .js-motion [data-reveal],
  .js-motion .split span,
  .js-motion .flow__step::after {
    opacity: 1 !important; transform: none !important; filter: none !important;
  }
  .js-motion .hero__media video, .js-motion .hero__media img,
  .js-motion .bee-x, .js-motion .bee-y, .js-motion .bee-wing,
  .js-motion .drop, .js-motion .marquee__track, .js-motion .honeycomb-bg::before,
  .js-motion .cause::before, .js-motion .float, .js-motion .shimmer,
  .js-motion .signature__mark, .js-motion .wa-float::before, .js-motion .pulse-dot::before {
    animation: none !important;
  }
  .bee-lane, .drop { display: none; }
  .progress { display: none; }
}

/* light variant of the flow step, for use on cream sections */
.flow__step.light {
  background: var(--white); border-color: var(--line-soft);
}
.flow__step.light:hover { background: var(--white); border-color: var(--gold); }
.flow__step.light::before { color: var(--orange-dark); }
.flow__step.light .ic { background: var(--orange-soft); color: var(--orange-dark); }
.flow__step.light h3 { color: var(--ink); }
.flow__step.light p { color: var(--muted); }
.flow.light-flow .flow__step::after {
  background: linear-gradient(90deg, rgba(233,162,39,.7), rgba(233,162,39,.15));
}

/* the cause band that sits on the home page */
.cause-band { position: relative; overflow: hidden; }
.cause-band__big {
  font: 700 clamp(3.2rem, 13vw, 9rem)/.92 var(--font-display);
  letter-spacing: -.03em; margin: 0;
}
.cause-band__sub {
  font: 600 clamp(1rem, 2.4vw, 1.35rem)/1.4 var(--font-body);
  letter-spacing: .02em; color: var(--gold-light); margin: .35rem 0 0;
}