/* Hero: sky, sun rays, meadow backdrop, drifting honeycomb, floating pieces,
   honey dripping from the top edge, Buzz with orbiting specials. */
.hero {
  position: relative; min-height: 100svh; overflow: hidden; isolation: isolate;
  display: grid; align-items: center; padding: 120px 0 90px;
}
.hero-sky { position: absolute; inset: 0; z-index: -5; background: radial-gradient(120% 80% at 70% 10%, #fff6c9 0%, #ffe07a 22%, #8fd7ff 55%, #4cb3f5 100%); }
.hero-rays {
  position: absolute; left: 68%; top: 18%; width: 220vmax; height: 220vmax; translate: -50% -50%;
  background: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, .28) 0deg 7deg, transparent 7deg 18deg);
  mask: radial-gradient(circle, #000 0%, transparent 55%); -webkit-mask: radial-gradient(circle, #000 0%, transparent 55%);
  animation: spin 90s linear infinite;
}
@keyframes spin { to { rotate: 360deg; } }
.hero-meadow {
  position: absolute; inset: auto -5% -2% -5%; height: 62%; z-index: -4;
  background: url(/assets/img/meadow.webp) center 78% / cover no-repeat;
  mask: linear-gradient(to bottom, transparent 0, #000 28%); -webkit-mask: linear-gradient(to bottom, transparent 0, #000 28%);
}
.hero-comb {
  position: absolute; inset: -10%; z-index: -3; opacity: .22;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'%3E%3Cpath d='M28 0l28 16v33L28 65 0 49V16zM28 65l28 16v33M28 65L0 81v33' fill='none' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E");
  background-size: 56px 97px;
  mask: radial-gradient(70% 60% at 30% 40%, #000, transparent 75%); -webkit-mask: radial-gradient(70% 60% at 30% 40%, #000, transparent 75%);
  animation: comb 40s linear infinite;
}
@keyframes comb { to { background-position: 56px 97px; } }
.hero-floaters { position: absolute; inset: 0; z-index: -2; pointer-events: none; }
.floater { position: absolute; width: var(--s); opacity: var(--o, 1); filter: blur(var(--bl, 0)) drop-shadow(0 8px 10px rgba(60, 28, 6, .25)); animation: float var(--t, 9s) ease-in-out var(--dl, 0s) infinite alternate; }
@keyframes float { from { transform: translate3d(0, 0, 0) rotate(var(--r0, -8deg)); } to { transform: translate3d(var(--dx, 20px), var(--dy, -40px), 0) rotate(var(--r1, 10deg)); } }
.bee-fly { position: absolute; width: 54px; left: 0; top: 0; will-change: transform; filter: drop-shadow(0 6px 6px rgba(60, 28, 6, .3)); }
.hero-drip {
  position: absolute; inset: 58px 0 auto; height: 110px; z-index: 1; pointer-events: none;
  background: url(/assets/img/DripEdgeWide.webp) 0 -30px / 520px auto repeat-x;
  filter: drop-shadow(0 6px 6px rgba(180, 90, 0, .35));
  animation: drip-in 1.4s var(--ease-out) both .2s;
}
@keyframes drip-in { from { transform: translateY(-100%); } }

.hero-inner {
  width: 100%; max-width: 1240px; margin-inline: auto; padding-inline: var(--gutter);
  display: grid; gap: 8px; align-items: center; position: relative; z-index: 2;
}
@media (min-width: 960px) { .hero-inner { grid-template-columns: 1.25fr .75fr; gap: 24px; } }
.hero-copy { position: relative; display: grid; justify-items: start; gap: 16px; text-align: left; }
.hero-copy::before { content: ""; position: absolute; inset: 8% -6% -4% -10%; z-index: -1; background: radial-gradient(closest-side, rgba(255, 249, 225, .82), rgba(255, 249, 225, .45) 60%, transparent); filter: blur(10px); pointer-events: none; }
@media (max-width: 959px) { .hero-copy { justify-items: center; text-align: center; } .hero-copy .cta-row { justify-content: center; } }
.hero-logo { width: min(330px, 70vw); filter: drop-shadow(0 18px 24px rgba(60, 28, 6, .35)); animation: logo-in 1.1s var(--ease-spring) both .35s, bob 5s ease-in-out 1.5s infinite; transform-origin: 50% 80%; }
@keyframes logo-in { from { opacity: 0; transform: scale(.4) rotate(-6deg); } }
@keyframes bob { 50% { transform: translateY(-8px) rotate(-1deg); } }
.hero-kicker span {
  display: inline-block; padding: 8px 18px; border-radius: 999px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; font-size: .82rem;
  background: rgba(255, 255, 255, .85); color: var(--wood); box-shadow: 0 8px 18px -10px rgba(60, 28, 6, .6);
  animation: rise .8s var(--ease-out) both .7s;
}
.hero-title { font-size: clamp(2.3rem, 5.2vw, 4rem); }
.hero-title span { display: inline-block; animation: word .9s var(--ease-spring) both; }
.hero-title span:nth-child(1) { animation-delay: .8s; }
.hero-title span:nth-child(2) { animation-delay: .95s; color: var(--honey-hi); }
.hero-title span:nth-child(3) { animation-delay: 1.1s; }
@keyframes word { from { opacity: 0; transform: translateY(50%) scale(.6) rotate(4deg); } }
.hero-lede { max-width: 32ch; font-size: clamp(1.1rem, 1.9vw, 1.35rem); font-weight: 800; color: var(--wood-dark); text-shadow: 0 1px 0 rgba(255, 255, 255, .6); animation: rise .8s var(--ease-out) both 1.25s; }
.hero-copy .cta-row { animation: rise .8s var(--ease-out) both 1.4s; }
@keyframes rise { from { opacity: 0; transform: translateY(24px); } }
.hero-try { display: inline-flex; align-items: center; gap: 10px; font-weight: 900; color: var(--wood); text-decoration: none; padding: 6px 4px; animation: rise .8s var(--ease-out) both 1.6s; }
.hero-try:hover { text-decoration: underline; text-underline-offset: 4px; }
.hero-try-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--pink); box-shadow: 0 0 0 0 rgba(255, 95, 162, .7); animation: ping 1.6s infinite; }
@keyframes ping { to { box-shadow: 0 0 0 14px rgba(255, 95, 162, 0); } }

.hero-buzz { position: relative; justify-self: center; width: min(520px, 78vw); aspect-ratio: 1; display: grid; place-items: center; }
@media (max-width: 959px) { .hero-buzz { order: -1; width: min(240px, 58vw); margin: 0 auto -36px; } .hero-logo { width: min(250px, 64vw); } .hero { padding-top: 84px; } }
.buzz-glow { position: absolute; inset: 8%; border-radius: 50%; background: radial-gradient(circle, rgba(255, 245, 190, .95), rgba(255, 210, 80, .45) 45%, transparent 70%); animation: glow 4s ease-in-out infinite; }
@keyframes glow { 50% { transform: scale(1.08); opacity: .8; } }
.buzz-img { position: relative; width: 86%; filter: drop-shadow(0 30px 30px rgba(60, 28, 6, .35)); animation: buzz-in 1.2s var(--ease-spring) both .5s, hover 3.2s ease-in-out 1.7s infinite; }
@keyframes buzz-in { from { opacity: 0; transform: translate(40%, 30%) scale(.3) rotate(25deg); } }
@keyframes hover { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-18px) rotate(2deg); } }
.buzz-orbit { position: absolute; width: 22%; filter: drop-shadow(0 10px 10px rgba(60, 28, 6, .3)); animation: orbit 14s linear infinite, pop-in .8s var(--ease-spring) both; }
.buzz-orbit.o1 { animation-delay: 0s, 1.6s; }
.buzz-orbit.o2 { animation-delay: -4.6s, 1.8s; width: 24%; }
.buzz-orbit.o3 { animation-delay: -9.3s, 2s; width: 18%; }
@keyframes orbit {
  from { transform: rotate(0deg) translateX(min(250px, 36vw)) rotate(0deg); }
  to { transform: rotate(360deg) translateX(min(250px, 36vw)) rotate(-360deg); }
}
@keyframes pop-in { from { opacity: 0; scale: 0; } }

.scroll-cue { position: absolute; left: 50%; bottom: 22px; translate: -50%; width: 30px; height: 48px; border: 3px solid rgba(255, 255, 255, .95); border-radius: 20px; z-index: 3; box-shadow: 0 4px 12px rgba(60, 28, 6, .25); }
.scroll-cue span { position: absolute; left: 50%; top: 8px; width: 6px; height: 10px; margin-left: -3px; border-radius: 3px; background: #fff; animation: cue 1.6s ease-in-out infinite; }
@keyframes cue { 60% { transform: translateY(14px); opacity: 0; } 61% { transform: none; opacity: 0; } 100% { opacity: 1; } }