@font-face {
  font-family: "Pacifico";
  src: url("fonts/pacifico.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Nunito";
  src: url("fonts/nunito.woff2") format("woff2");
  font-weight: 200 1000;
  font-display: swap;
}

:root {
  --honey: #ffc915;
  --honey-2: #f4a900;
  --amber: #d97d00;
  --ink: #1d1308;
  --ink-2: #4a3717;
  --cream: #fff8e6;
  --cream-2: #fff0c7;
  --paper: #fffdf6;
  --script: "Pacifico", "Brush Script MT", cursive;
  --round: "Nunito", ui-rounded, system-ui, -apple-system, "Segoe UI", sans-serif;
  --comb: 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 0 L56 16 V48 L28 64 L0 48 V16 Z M28 64 V97 M0 16 L-28 0 M56 16 L84 0' fill='none' stroke='%23d97d00' stroke-opacity='.1' stroke-width='2'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--round);
  font-size: 17px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}
h1, h2, h3, p { margin: 0; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; border-radius: 12px; }

.bee-svg .body { fill: var(--honey); }
.bee-svg .body-line { fill: none; stroke: var(--ink); stroke-width: 6; }
.bee-svg .stripes rect, .bee-svg .head, .bee-svg .stinger, .bee-svg .antenna-tip { fill: var(--ink); }
.bee-svg .antenna { fill: none; stroke: var(--ink); stroke-width: 5; stroke-linecap: round; }
.bee-svg .eye { fill: #fff; }
.bee-svg .smile { fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; }
.bee-svg .wing ellipse { fill: rgba(255, 255, 255, .92); stroke: var(--ink); stroke-width: 5; }
.bee-svg .wing { transform-box: fill-box; transform-origin: 50% 100%; animation: flap .09s ease-in-out infinite alternate; }
.bee-svg .wing-back { animation-delay: .045s; }
@keyframes flap { to { transform: scaleY(.45); } }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 26px; border-radius: 999px; border: 3px solid var(--ink);
  background: var(--honey); color: var(--ink); font-weight: 900; font-size: 1.05rem; text-decoration: none;
  box-shadow: 4px 5px 0 var(--ink); cursor: pointer; transition: transform .12s, box-shadow .12s;
  touch-action: manipulation;
}
.btn:hover { transform: translate(-1px, -1px); box-shadow: 5px 6px 0 var(--ink); }
.btn:active { transform: translate(3px, 4px); box-shadow: 1px 1px 0 var(--ink); }

.hero {
  position: relative; min-height: min(100svh, 880px); display: grid; place-items: center; overflow: hidden;
  padding: 110px 18px 120px; text-align: center;
  background:
    radial-gradient(circle at 50% 38%, rgba(255, 201, 21, .28), transparent 60%),
    var(--comb) center / 56px 97px,
    var(--cream);
}
.hero-inner { position: relative; z-index: 2; width: 100%; max-width: 760px; }
.logo-art { width: min(580px, 100%); margin: 0 auto -6px; overflow: visible; }
.flight { fill: none; stroke: var(--ink); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 14 17; animation: march 1.6s linear infinite; }
@keyframes march { to { stroke-dashoffset: -62; } }
.cell { fill: var(--honey); stroke: var(--ink); stroke-width: 7; stroke-linejoin: round; animation: glow 3.2s ease-in-out infinite; }
.c2 { animation-delay: .4s; } .c3 { animation-delay: .8s; } .c4 { animation-delay: 1.2s; }
@keyframes glow { 50% { fill: #ffe07a; } }
.drop { fill: var(--honey); stroke: var(--ink); stroke-width: 5; transform-box: fill-box; transform-origin: 50% 0; animation: drop 2.8s ease-in infinite; }
@keyframes drop {
  0% { transform: translateY(-8px) scale(.4); opacity: 0; }
  25% { transform: translateY(0) scale(1); opacity: 1; }
  60% { transform: translateY(0) scale(1, 1.15); }
  100% { transform: translateY(70px) scale(.9); opacity: 0; }
}
.hero-bee { transform-box: view-box; }

.title {
  font-family: var(--script); font-weight: 400; line-height: 1.02;
  font-size: clamp(3.2rem, 15vw, 7rem);
  color: var(--honey);
  -webkit-text-stroke: .09em var(--ink);
  paint-order: stroke fill;
  letter-spacing: .01em;
  filter: drop-shadow(0 6px 0 rgba(29, 19, 8, .12));
}
.title span { display: block; animation: pop .9s cubic-bezier(.2, 1.6, .4, 1) both; }
.title span + span { animation-delay: .18s; margin-top: -.08em; }
@keyframes pop { from { transform: scale(.4) rotate(-6deg); opacity: 0; } }
.tagline { margin: 22px auto 28px; max-width: 32em; font-size: clamp(1.02rem, 3.8vw, 1.2rem); font-weight: 700; color: var(--ink-2); }
.hint { margin-top: 18px; font-size: .9rem; font-weight: 700; color: var(--amber); animation: nudge 2.4s ease-in-out infinite; }
@keyframes nudge { 50% { transform: translateY(-4px); } }

.honey-top { position: absolute; inset: 0 0 auto 0; height: 22px; z-index: 3; background: linear-gradient(#ffd84d, var(--honey-2)); box-shadow: 0 3px 0 rgba(29, 19, 8, .12); }
.drip {
  position: absolute; top: 14px; left: var(--x); width: var(--w); height: var(--h);
  background: linear-gradient(90deg, #f4a900, #ffc915 45%, #f4a900);
  border-radius: 0 0 999px 999px; transform-origin: 50% 0;
  animation: ooze 5.5s ease-in-out var(--d) infinite;
  box-shadow: inset 3px 0 0 rgba(255, 255, 255, .35);
}
.drip::after {
  content: ""; position: absolute; left: 50%; bottom: 0; width: calc(var(--w) * .6); height: calc(var(--w) * .75);
  margin-left: calc(var(--w) * -.3); border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background: var(--honey-2); opacity: 0; animation: fall 5.5s ease-in var(--d) infinite;
}
@keyframes ooze { 0%, 100% { transform: scaleY(.8); } 55% { transform: scaleY(1.08); } }
@keyframes fall {
  0%, 50% { transform: translateY(0); opacity: 0; }
  55% { opacity: 1; transform: translateY(4px); }
  90% { opacity: 1; }
  100% { transform: translateY(70vh); opacity: 0; }
}

.wave { position: absolute; left: 0; bottom: -1px; width: 100%; height: 64px; z-index: 1; }
.wave path { transform-box: fill-box; }
.wave-a { fill: var(--paper); animation: slide 9s linear infinite; }
.wave-b { fill: var(--honey); opacity: .35; animation: slide 14s linear infinite reverse; }
@keyframes slide { to { transform: translateX(-50%); } }

.section { position: relative; padding: 76px 20px 84px; }
.wrap { max-width: 980px; margin: 0 auto; }
.kicker { font-family: var(--script); color: var(--amber); font-size: 1.35rem; }
.section h2 { margin-top: 4px; font-size: clamp(1.9rem, 7vw, 3rem); font-weight: 900; line-height: 1.1; letter-spacing: -.01em; }
.lead { margin-top: 16px; font-size: 1.1rem; color: var(--ink-2); max-width: 40em; }
.lead.small { font-size: 1rem; }

.storia { background: var(--paper); }
.values { list-style: none; padding: 0; margin: 34px 0 0; display: grid; gap: 18px; }
.value {
  position: relative; padding: 24px 22px 22px 22px; border-radius: 24px; background: #fff; border: 3px solid var(--ink);
  box-shadow: 6px 7px 0 var(--ink);
}
.value-ico { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 16px; background: var(--honey); border: 3px solid var(--ink); font-size: 1.6rem; margin-bottom: 12px; }
.value h3 { font-size: 1.25rem; font-weight: 900; }
.value p { margin-top: 6px; color: var(--ink-2); }
.value:nth-child(2) { transform: rotate(-1deg); }
.value:nth-child(3) { transform: rotate(.8deg); }

.viaggio { background: var(--cream-2) var(--comb) center / 56px 97px; }
.journey { list-style: none; margin: 34px 0 0; padding: 0; position: relative; display: grid; gap: 22px; }
.journey::before { content: ""; position: absolute; left: 30px; top: 20px; bottom: 20px; border-left: 4px dashed var(--ink); opacity: .8; }
.step { position: relative; display: grid; grid-template-columns: 64px 1fr; gap: 16px; align-items: start; }
.step-ico {
  position: relative; z-index: 1; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%;
  background: var(--honey); border: 3px solid var(--ink); font-size: 1.7rem; box-shadow: 3px 4px 0 var(--ink);
}
.step h3 { font-size: 1.2rem; font-weight: 900; padding-top: 6px; }
.step p { color: var(--ink-2); }

.gioco { background: var(--cream); }
.game { margin-top: 30px; display: grid; gap: 28px; justify-items: center; }
.flowers { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 12px; }
.flower {
  width: 66px; height: 80px; padding: 0; border: 0; background: none; cursor: pointer; touch-action: manipulation;
  transition: transform .2s;
}
.flower svg { width: 100%; height: 100%; overflow: visible; transition: transform .35s cubic-bezier(.3, 1.6, .5, 1), opacity .3s; transform-origin: 50% 40%; }
.flower:hover svg { transform: rotate(-8deg) scale(1.06); }
.flower:active svg { transform: scale(.9); }
.flower.used svg { transform: scale(.72) rotate(50deg); opacity: .55; }
.flower .petal { fill: var(--petal); stroke: var(--ink); stroke-width: 3; }
.flower .center { fill: var(--honey-2); stroke: var(--ink); stroke-width: 3; }
.flower .stem { stroke: #3d8b3d; stroke-width: 5; stroke-linecap: round; fill: none; }
.flower .leaf { fill: #5cb85c; stroke: var(--ink); stroke-width: 2.5; }
.jar-wrap { display: grid; justify-items: center; gap: 8px; }
.jar { width: min(230px, 62vw); overflow: visible; }
.jar.bump { animation: bump .45s cubic-bezier(.3, 1.8, .5, 1); }
@keyframes bump { 40% { transform: scale(1.06, .95); } }
.lid { fill: #9a6326; stroke: var(--ink); stroke-width: 4; }
.lid-line { stroke: var(--ink); stroke-width: 3; opacity: .35; }
.cloth { fill: #e85c4a; stroke: var(--ink); stroke-width: 4; stroke-linejoin: round; }
.jar-bg { fill: rgba(255, 255, 255, .6); }
.liquid { transform: translateY(226px); transition: transform .8s cubic-bezier(.3, 1.3, .5, 1); }
.liquid-wave { fill: url(#honeyGrad); animation: liquid 2.4s linear infinite; }
@keyframes liquid { to { transform: translateX(-50px); } }
.shine { fill: #fff; opacity: .5; }
.jar-glass { fill: none; stroke: var(--ink); stroke-width: 6; }
.label { fill: var(--cream); stroke: var(--ink); stroke-width: 3; }
.label-text { font-family: var(--script); font-size: 20px; fill: var(--ink); text-anchor: middle; }
.label-text.small { font-size: 13px; }
.score { font-weight: 900; font-size: 1.1rem; }
.flyer { position: fixed; left: 0; top: 0; width: 46px; height: 42px; z-index: 40; pointer-events: none; }
.win {
  margin: 30px auto 0; max-width: 460px; text-align: center; padding: 24px; border-radius: 24px; background: #fff;
  border: 3px solid var(--ink); box-shadow: 6px 7px 0 var(--ink); animation: pop .6s cubic-bezier(.2, 1.6, .4, 1) both;
}
.win-title { font-family: var(--script); font-size: 2rem; color: var(--amber); }
.win p + p { margin: 6px 0 18px; color: var(--ink-2); }
.confetti { position: fixed; top: -30px; z-index: 50; width: 18px; height: 20px; pointer-events: none; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); animation: confetti var(--t, 2.6s) ease-in forwards; }
@keyframes confetti { to { transform: translate(var(--dx), 110vh) rotate(var(--r)); } }

.curiosita { background: var(--paper); }
.cards { margin-top: 28px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.card { perspective: 900px; height: 190px; padding: 0; border: 0; background: none; cursor: pointer; text-align: left; touch-action: manipulation; }
.card-inner { position: relative; display: block; width: 100%; height: 100%; transition: transform .6s cubic-bezier(.3, 1.3, .5, 1); transform-style: preserve-3d; }
.card.flipped .card-inner { transform: rotateY(180deg); }
.card-front, .card-back {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 16px;
  border-radius: 20px; border: 3px solid var(--ink); box-shadow: 4px 5px 0 var(--ink);
  -webkit-backface-visibility: hidden; backface-visibility: hidden; font-weight: 800; font-size: .95rem; line-height: 1.35;
}
.card-front { background: var(--honey); }
.card-front b { font-size: 1.7rem; font-weight: 1000; line-height: 1; }
.card-back { background: #fff; transform: rotateY(180deg); font-weight: 700; color: var(--ink-2); }

.footer { position: relative; background: var(--honey); padding: 40px 20px calc(40px + env(safe-area-inset-bottom)); text-align: center; }
.footer .wave { bottom: auto; top: -63px; }
.footer .wave-a { fill: var(--honey); }
.footer-inner { max-width: 640px; margin: 0 auto; }
.footer-title { font-family: var(--script); font-size: clamp(1.7rem, 7vw, 2.4rem); line-height: 1.2; }
.footer-inner > p + p { margin-top: 10px; font-weight: 700; }
.footer .made { margin-top: 26px !important; font-size: .82rem; font-weight: 700; opacity: .85; }

.swarm { position: fixed; inset: 0; z-index: 30; pointer-events: none; overflow: hidden; }
.bee { position: absolute; left: 0; top: 0; width: 54px; height: 50px; pointer-events: auto; cursor: pointer; will-change: transform; touch-action: manipulation; }
.bee .bee-svg { width: 100%; height: 100%; transition: transform .25s; }
.bee.left .bee-svg { transform: scaleX(-1); }
.bee.spin .bee-svg { animation: spin .8s cubic-bezier(.3, 1.3, .5, 1); }
.bee.left.spin .bee-svg { animation-name: spin-left; }
@keyframes spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
@keyframes spin-left { from { transform: scaleX(-1) rotate(0); } to { transform: scaleX(-1) rotate(-360deg); } }
.bzz { position: fixed; z-index: 45; pointer-events: none; font-family: var(--script); font-size: 1.3rem; color: var(--amber); -webkit-text-stroke: 1px var(--ink); paint-order: stroke fill; animation: bzz 1s ease-out forwards; }
@keyframes bzz { to { transform: translate(-50%, -48px) scale(1.2); opacity: 0; } }

.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, 1.2, .4, 1); }
.reveal.in { opacity: 1; transform: none; }
.value.reveal.in:nth-child(2) { transform: rotate(-1deg); }
.value.reveal.in:nth-child(3) { transform: rotate(.8deg); }

@media (min-width: 760px) {
  .values { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .card { height: 200px; }
  .game { grid-template-columns: 1fr auto; align-items: center; }
  .flowers { max-width: 300px; }
  .journey { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
  .journey::before { left: 32px; right: 32px; top: 30px; bottom: auto; border-left: 0; border-top: 4px dashed var(--ink); }
  .step { grid-template-columns: 1fr; text-align: left; }
  .bee { width: 64px; height: 58px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .swarm, .drip::after { display: none; }
  .reveal { opacity: 1; transform: none; }
}