/*
 * HiveSuite v2 design system - HOMEPAGE
 * Homepage-only pieces: the big split hero (cursor bee, tilting screenshot, toasts)
 * and the road with the "Dodge the admin" minigame. Load after core.css + components.css.
 */

/* ─── Hero ───────────────────────────────────────── */
.v2-hero { position: relative; overflow: hidden; isolation: isolate; background: var(--v2-cream); padding: calc(var(--v2-nav-h) + clamp(28px, 4vw, 56px)) 0 clamp(56px, 7vw, 96px); }
.v2-hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.v2-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 4vw, 64px); align-items: center; }
.v2-hero__title { margin-top: 1.4rem; font-size: clamp(2.5rem, 5vw, 4.3rem); letter-spacing: -0.03em; line-height: 1.03; }
.v2-word { display: inline-block; white-space: nowrap; }
.v2-hero__sub { margin-top: 1.4rem; max-width: 33rem; color: var(--v2-muted); font-size: clamp(1.08rem, 1.4vw, 1.22rem); }
.v2-hero__sub a { color: var(--v2-ink); font-weight: 700; text-decoration: underline; text-decoration-color: var(--v2-honey); text-decoration-thickness: 3px; text-underline-offset: 3px; }
.v2-hero__ctas { position: relative; margin-top: 2rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem; }
.v2-hero__note { margin-top: 1.5rem; color: var(--v2-muted); font-size: 0.95rem; font-weight: 600; display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; }
.v2-hero__note i { color: var(--v2-leaf); margin-right: 0.35rem; }

@keyframes v2-rise { from { opacity: 0; transform: translateY(0.5em) rotate(4deg); } to { opacity: 1; transform: none; } }
@keyframes v2-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes v2-pop-in { 0% { opacity: 0; transform: scale(0.7) rotate(-6deg); } 100% { opacity: 1; transform: none; } }
.js-anim .v2-hero__title .v2-word { animation: v2-rise 0.7s var(--v2-bounce) both; animation-delay: calc(0.05s + var(--i) * 0.045s); }
.js-anim .v2-hero [data-enter] { animation: v2-up 0.7s var(--v2-ease) both; animation-delay: var(--delay, 0.4s); }
.js-anim .v2-hero__visual { animation: v2-pop-in 0.9s var(--v2-bounce) 0.2s both; }

.v2-hero__visual { position: relative; padding: 6% 2%; }
.v2-hero__hexbg { position: absolute; z-index: -1; left: 50%; top: 50%; width: 82%; translate: -50% -50%; background: var(--v2-honey); animation: v2-spin-slow 80s linear infinite; }
.v2-hero__hexbg--2 { width: 22%; left: 93%; top: 10%; background: var(--v2-comb); animation-duration: 40s; animation-direction: reverse; }
.v2-hero__hexbg--3 { width: 14%; left: 8%; top: 90%; background: var(--v2-leaf-tint); animation-duration: 30s; }
@keyframes v2-spin-slow { to { rotate: 360deg; } }
.v2-hero__shot { --rx: 0deg; --ry: 0deg; position: relative; transform: perspective(1200px) rotateX(var(--rx)) rotateY(var(--ry)); transition: transform 0.6s var(--v2-ease); }
.v2-hero__shot img { width: 100%; filter: drop-shadow(0 26px 30px rgba(35, 26, 18, 0.28)); }

.v2-toast {
    position: absolute; z-index: 3; display: flex; align-items: center; gap: 0.65rem; padding: 0.55rem 0.9rem 0.55rem 0.55rem;
    border-radius: 16px; background: var(--v2-white); border: var(--v2-border); box-shadow: var(--v2-pop);
    font-size: 0.86rem; line-height: 1.25; white-space: nowrap; animation: v2-bob 5s ease-in-out infinite;
}
.v2-toast strong { display: block; font-weight: 800; }
.v2-toast div span { color: var(--v2-soft); font-size: 0.78rem; font-weight: 600; }
.v2-toast__icon { width: 34px; flex-shrink: 0; font-size: 0.85rem; }
.v2-toast--a { left: -4%; top: 4%; rotate: -4deg; }
.v2-toast--b { right: -5%; top: 46%; rotate: 3deg; animation-delay: -1.7s; }
.v2-toast--c { left: 4%; bottom: 0; rotate: -2deg; animation-delay: -3.3s; }
@keyframes v2-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
.js-anim .v2-toast { opacity: 0; scale: 0.6; transition: opacity 0.4s, scale 0.6s var(--v2-bounce); }
.js-anim .v2-toast.is-in { opacity: 1; scale: 1; }

@media (max-width: 960px) {
    .v2-hero__grid { grid-template-columns: minmax(0, 1fr); }
    .v2-hero__copy { text-align: center; }
    .v2-hero__sub { margin-left: auto; margin-right: auto; }
    .v2-hero__ctas, .v2-hero__note { justify-content: center; }
    .v2-hero__visual { max-width: 600px; margin: 0 auto; width: 100%; }
}
@media (max-width: 600px) {
    .v2-toast { font-size: 0.74rem; padding: 0.4rem 0.6rem 0.4rem 0.4rem; }
    .v2-toast__icon { width: 26px; font-size: 0.7rem; }
    .v2-toast div span { display: none; }
    .v2-toast--a { left: 0; top: 0; }
    .v2-toast--b { right: 0; top: 42%; }
    .v2-toast--c { display: none; }
    .v2-hero__ctas .v2-btn { flex: 1 1 100%; }
}


/* ─── On the road: trades + driving van ──────────── */
.v2-road-sec { position: relative; padding: clamp(56px, 7vw, 88px) 0 0; background: var(--v2-white); border-top: var(--v2-border); overflow: hidden; }
.v2-road-sec__title { text-align: center; font-size: clamp(1.7rem, 3.4vw, 2.6rem); }
.v2-road { position: relative; height: 150px; margin-top: 1rem; }
.v2-road__strip { position: absolute; left: 0; right: 0; bottom: 0; height: 46px; background: #3b2f25; border-top: var(--v2-border); }
.v2-road__strip::after { content: ''; position: absolute; left: 0; right: 0; top: 20px; height: 4px; background: repeating-linear-gradient(90deg, var(--v2-honey-2) 0 34px, transparent 34px 70px); }
.v2-road__grass { position: absolute; left: 0; right: 0; bottom: 46px; height: 12px; background: radial-gradient(circle at 11px 12px, #8fd3a6 10px, transparent 10.5px) 0 0 / 22px 12px repeat-x; }
.v2-van { position: absolute; left: 0; bottom: 30px; width: clamp(190px, 22vw, 260px); z-index: 2; will-change: transform; }
.v2-van svg { width: 100%; height: auto; overflow: visible; }
.v2-van__body { animation: v2-rumble 0.35s ease-in-out infinite alternate; }
@keyframes v2-rumble { to { transform: translateY(-1.5px); } }
.v2-van__wheel { transform-box: fill-box; transform-origin: center; }
.v2-van__puff { transform-box: fill-box; transform-origin: center; animation: v2-puff 1.4s ease-out infinite; }
.v2-van__puff--2 { animation-delay: -0.7s; }
@keyframes v2-puff { from { opacity: 0.8; transform: translate(0, 0) scale(0.4); } to { opacity: 0; transform: translate(-26px, -10px) scale(1.4); } }
.v2-road__sign { position: absolute; bottom: 58px; left: 34%; display: flex; flex-direction: column; align-items: center; z-index: 1; }
.v2-road__sign span { padding: 0.35rem 0.7rem; border-radius: 10px; background: var(--v2-leaf); color: #fff; border: var(--v2-border); font-weight: 800; font-size: 0.82rem; white-space: nowrap; }
.v2-road__sign i { width: 4px; height: 34px; background: var(--v2-ink); }
@media (max-width: 640px) { .v2-road__sign { display: none; } }

/* "Dodge the admin" minigame on the road */
.v2-road { transition: height 0.5s var(--v2-ease); }
.v2-road.is-playing, .v2-road.is-over { height: 260px; cursor: pointer; }
/* a smaller van while playing so a jump can clear the paperwork */
.v2-road.is-playing .v2-van, .v2-road.is-over .v2-van { width: 150px; }
.v2-road.is-playing .v2-road__strip::after { animation: v2-dashes 0.5s linear infinite; }
@keyframes v2-dashes { to { background-position: -70px 0; } }
.v2-road.is-playing .v2-road__sign { display: none; }
.v2-game__world { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.v2-obst, .v2-coin { position: absolute; left: 0; bottom: 34px; will-change: transform; }
.v2-obst svg { display: block; overflow: visible; }
.v2-coin { width: 34px; display: grid; place-items: center; aspect-ratio: 100 / 115.47; background: var(--v2-honey); -webkit-mask: var(--v2-hex) center / 100% 100% no-repeat; mask: var(--v2-hex) center / 100% 100% no-repeat; font-weight: 800; color: var(--v2-ink); font-size: 0.95rem; animation: v2-coin 0.9s ease-in-out infinite alternate; }
@keyframes v2-coin { to { translate: 0 -5px; } }
.v2-coin.is-got { animation: v2-got 0.4s var(--v2-bounce) forwards; }
@keyframes v2-got { to { opacity: 0; translate: 0 -40px; scale: 1.6; } }
.v2-plus { position: absolute; z-index: 5; font-family: var(--v2-hand); font-weight: 700; font-size: 1.6rem; color: var(--v2-leaf); pointer-events: none; animation: v2-plus 0.9s ease-out forwards; }
@keyframes v2-plus { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-46px); } }
.v2-road.is-crashed .v2-van { animation: v2-shake 0.4s; }
@keyframes v2-shake { 25% { translate: -6px 0; } 50% { translate: 5px 0; } 75% { translate: -3px 0; } }
.v2-game__hud { position: absolute; left: 16px; top: 12px; z-index: 4; display: none; gap: 0.9rem; align-items: center; padding: 0.4rem 0.9rem; border-radius: 999px; background: var(--v2-white); border: var(--v2-border); box-shadow: 3px 3px 0 var(--v2-ink); font-weight: 800; font-size: 0.95rem; }
.v2-game__hud i { color: var(--v2-honey-deep); }
.v2-game__best { color: var(--v2-soft); font-size: 0.85rem; }
.v2-road.is-playing .v2-game__hud, .v2-road.is-over .v2-game__hud { display: flex; }
.v2-game__overlay { position: absolute; z-index: 4; right: max(24px, calc((100% - 1200px) / 2 + 24px)); top: 8px; display: flex; flex-direction: column; align-items: flex-end; gap: 0.35rem; }
.v2-game__msg { display: none; }
.v2-game__cta { display: none; }
.v2-game__hint { font-family: var(--v2-hand); font-size: 1.3rem; font-weight: 700; color: var(--v2-honey-deep); transform: rotate(-2deg); }
.v2-road.is-playing .v2-game__overlay { display: none; }
.v2-road.is-over .v2-game__overlay {
    left: 50%; right: auto; top: 24px; translate: -50% 0; width: min(440px, calc(100% - 32px)); align-items: center; text-align: center;
    padding: 1rem 1.2rem; border-radius: 22px; background: var(--v2-white); border: var(--v2-border); box-shadow: var(--v2-pop);
    animation: v2-pop 0.45s var(--v2-bounce) both;
}
.v2-road.is-over .v2-game__msg { display: block; font-weight: 700; }
.v2-road.is-over .v2-game__msg strong { font-family: var(--v2-display); font-size: 1.3rem; display: block; }
.v2-road.is-over .v2-game__cta { display: inline-flex; }
.v2-road.is-over .v2-game__hint { display: none; }
.v2-game__btns { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; }
@media (max-width: 640px) {
    .v2-game__overlay { right: 16px; }
    .v2-road.is-playing, .v2-road.is-over { height: 300px; }
}