/* TAB — Playful edition. Prato · cielo · nuvole · bianco. Pieno di animazioni. */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&family=Caveat:wght@500;700&display=swap');

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

:root {
  /* Palette */
  --sky-1:     #bfe3f5;  /* cielo chiaro */
  --sky-2:     #92ccea;  /* cielo medio */
  --sky-3:     #5fb0dc;  /* cielo saturo */
  --grass-1:   #c7e38a;  /* prato chiaro */
  --grass-2:   #7ec04b;  /* prato medio */
  --grass-3:   #3f8c3b;  /* prato scuro */
  --cloud:     #ffffff;
  --cream:     #fffef5;  /* bianco caldo per i pannelli */
  --ink:       #0f2a1a;  /* verde scurissimo, quasi nero */
  --ink-dim:   #3a5a46;
  --ink-soft:  #6a8578;
  --sun:       #ffd36b;
  --hot:       #ff6b3d;  /* accento caldo per CTA e highlight */
  --berry:     #e8488a;
  --line:      #0f2a1a;

  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body:    'Space Grotesk', system-ui, sans-serif;
  --font-ui:      'JetBrains Mono', ui-monospace, monospace;
  --font-hand:    'Caveat', cursive;

  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 36px;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body { min-height: 100vh; overflow-x: hidden; }

a { color: var(--ink); text-underline-offset: 3px; }
a:hover { color: var(--hot); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  margin: 0;
  line-height: 1.02;
  letter-spacing: -0.02em;
}
p { margin: 0; text-wrap: pretty; }
button { font: inherit; cursor: pointer; }

.wrap { max-width: 1280px; margin: 0 auto; padding: 0 28px; }
@media (max-width: 720px) { .wrap { padding: 0 18px; } }

.mono { font-family: var(--font-ui); }
.hand { font-family: var(--font-hand); font-weight: 700; }
.dim  { color: var(--ink-dim); }

/* ======= Topbar ======= */
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 254, 245, 0.82);
  backdrop-filter: blur(10px);
  border-bottom: 2px solid var(--line);
}
.topbar-inner {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 14px 0;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--ink);
}
.brand .tabkey {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 2px solid var(--ink);
  border-radius: var(--r-sm);
  background: var(--cream);
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  box-shadow: 3px 3px 0 var(--ink);
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.brand:hover .tabkey {
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 var(--ink);
}
.brand .tabkey .arr { opacity: .7; }
.brand .meta {
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.nav {
  display: flex;
  gap: 24px;
  margin-left: auto;
  flex-wrap: wrap;
  font-family: var(--font-ui);
  font-size: 13px;
  letter-spacing: 0.03em;
  text-transform: lowercase;
}
.nav a {
  text-decoration: none;
  color: var(--ink-dim);
  padding: 4px 2px;
  border-bottom: 2px solid transparent;
  transition: color 120ms ease, border-color 120ms ease;
}
.nav a:hover, .nav a.active { color: var(--ink); border-bottom-color: var(--hot); }
.nav a.cta {
  color: var(--cream);
  background: var(--ink);
  padding: 6px 12px;
  border-radius: var(--r-sm);
  border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 var(--hot);
}
.nav a.cta:hover { background: var(--hot); color: var(--cream); border-color: var(--hot); box-shadow: 3px 3px 0 var(--ink); }

/* Hamburger (visibile solo <= 780px) */
.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  padding: 0;
  background: var(--cream);
  border: 2px solid var(--ink);
  border-radius: 10px;
  box-shadow: 3px 3px 0 var(--ink);
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  margin-left: auto;
}
.nav-toggle span {
  display: block;
  width: 22px; height: 2.5px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform .2s ease, opacity .15s ease;
}
.nav-toggle.is-open span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

@media (max-width: 780px) {
  .topbar-inner { flex-wrap: wrap; }
  .nav-toggle { display: inline-flex; }
  .nav {
    display: none;
    width: 100%;
    order: 3;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    font-size: 15px;
    margin-left: 0;
    padding-top: 12px;
    border-top: 1px solid var(--line);
    margin-top: 10px;
  }
  .nav.is-open { display: flex; }
  .nav a {
    padding: 10px 4px;
    border-bottom: 1px solid rgba(15,42,26,.08);
  }
  .nav a:last-child { border-bottom: none; }
  .nav a.cta { text-align: center; margin-top: 6px; }
}

/* ======= HERO (cielo + prato + nuvole + sole) ======= */
.hero {
  position: relative;
  overflow: hidden;
  padding-top: 60px;
  min-height: 92vh;
  background: linear-gradient(180deg, var(--sky-1) 0%, var(--sky-2) 100%);
}
.hero-sun {
  position: absolute;
  top: 60px;
  right: 8%;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, #fff3c2 0%, var(--sun) 55%, #f8b94b 100%);
  box-shadow: 0 0 60px rgba(255, 211, 107, 0.65), 0 0 140px rgba(255, 211, 107, 0.3);
  animation: sunBob 8s ease-in-out infinite;
  z-index: 1;
}
.hero-sun::before {
  content: "";
  position: absolute;
  inset: -18px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0deg 12deg, rgba(255,211,107,.55) 12deg 18deg, transparent 18deg 42deg, rgba(255,211,107,.55) 42deg 48deg, transparent 48deg 72deg, rgba(255,211,107,.55) 72deg 78deg, transparent 78deg 102deg, rgba(255,211,107,.55) 102deg 108deg, transparent 108deg 132deg, rgba(255,211,107,.55) 132deg 138deg, transparent 138deg 162deg, rgba(255,211,107,.55) 162deg 168deg, transparent 168deg 192deg, rgba(255,211,107,.55) 192deg 198deg, transparent 198deg 222deg, rgba(255,211,107,.55) 222deg 228deg, transparent 228deg 252deg, rgba(255,211,107,.55) 252deg 258deg, transparent 258deg 282deg, rgba(255,211,107,.55) 282deg 288deg, transparent 288deg 312deg, rgba(255,211,107,.55) 312deg 318deg, transparent 318deg 342deg, rgba(255,211,107,.55) 342deg 348deg, transparent 348deg 360deg);
  -webkit-mask: radial-gradient(circle, transparent 68px, black 70px, black 100%);
          mask: radial-gradient(circle, transparent 68px, black 70px, black 100%);
  animation: sunSpin 40s linear infinite;
}
@keyframes sunSpin { to { transform: rotate(360deg); } }
@keyframes sunBob  { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

.cloud {
  position: absolute;
  background: var(--cloud);
  border-radius: 60px;
  opacity: .96;
  box-shadow: inset -10px -6px 0 rgba(143, 191, 224, 0.22);
  z-index: 1;
  pointer-events: none;
}
.cloud::before, .cloud::after {
  content: "";
  position: absolute;
  background: var(--cloud);
  border-radius: 50%;
  box-shadow: inset -4px -4px 0 rgba(143, 191, 224, 0.22);
}
.cloud-1 { width: 180px; height: 44px; top: 90px; left: -200px; animation: drift1 55s linear infinite; }
.cloud-1::before { width: 70px; height: 70px; top: -32px; left: 28px; }
.cloud-1::after  { width: 48px; height: 48px; top: -22px; left: 92px; }
.cloud-2 { width: 140px; height: 36px; top: 170px; left: -160px; animation: drift2 75s linear infinite; animation-delay: -20s; }
.cloud-2::before { width: 54px; height: 54px; top: -24px; left: 22px; }
.cloud-2::after  { width: 40px; height: 40px; top: -18px; left: 70px; }
.cloud-3 { width: 220px; height: 52px; top: 240px; left: -260px; animation: drift1 90s linear infinite; animation-delay: -40s; opacity: .8; }
.cloud-3::before { width: 80px; height: 80px; top: -38px; left: 30px; }
.cloud-3::after  { width: 54px; height: 54px; top: -26px; left: 110px; }
@keyframes drift1 { from { transform: translateX(0); } to { transform: translateX(calc(100vw + 300px)); } }
@keyframes drift2 { from { transform: translateX(0); } to { transform: translateX(calc(100vw + 300px)); } }

/* Erba in basso — SVG via CSS */
.grass-strip {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 42px;
  z-index: 2;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 42' preserveAspectRatio='none'><g fill='%233f8c3b'><path d='M0 42 L6 18 L12 42 Z'/><path d='M14 42 L22 8 L28 42 Z'/><path d='M30 42 L36 22 L42 42 Z'/><path d='M44 42 L54 4 L60 42 Z'/><path d='M62 42 L70 18 L76 42 Z'/><path d='M78 42 L88 12 L94 42 Z'/><path d='M96 42 L104 24 L110 42 Z'/><path d='M112 42 L122 6 L128 42 Z'/><path d='M130 42 L138 18 L144 42 Z'/><path d='M146 42 L156 10 L162 42 Z'/><path d='M164 42 L172 22 L178 42 Z'/><path d='M180 42 L190 6 L196 42 Z'/></g></svg>");
  background-size: 200px 42px;
  background-repeat: repeat-x;
  animation: sway 6s ease-in-out infinite;
  transform-origin: bottom center;
}
@keyframes sway {
  0%,100% { transform: skewX(0deg); }
  50%     { transform: skewX(-2deg); }
}

.hero-content {
  position: relative;
  z-index: 3;
  padding-bottom: 280px;
  pointer-events: none;
}
.hero-content a,
.hero-content button,
.hero-content .btn,
.hero-content .hero-side-box { pointer-events: auto; }
@media (max-width: 820px) { .hero-content { padding-bottom: 220px; } }

/* ======= VILLAGGIO: tendone + tende + personaggi ======= */
.village {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 62%;
  z-index: 1;
  pointer-events: none;
}

/* Hero video di sfondo */
.hero-video {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}
.hero-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* HERO: testo bianco con box sotto per leggibilità sul video */
.hero .hero-title {
  color: var(--cream);
  text-shadow: none;
}
/* Logo immagine al posto del titolo testuale */
.hero-title.hero-title-img {
  text-shadow: none;
  margin-top: 10px;
  margin-bottom: 24px;
  line-height: 1;
  filter: none;
  animation: logoBob 6s ease-in-out infinite;
}
.hero-title.hero-title-img img {
  display: block;
  width: 100%;
  max-width: min(1200px, 92vw);
  height: auto;
}
@keyframes logoBob {
  0%, 100% { transform: translateY(0) rotate(0); }
  50%      { transform: translateY(-6px) rotate(-.4deg); }
}

/* Versione spezzata: 4 immagini sovrapposte allo stesso bounding box, animate separate */
.hero-title.hero-title-split {
  animation: none; /* le parti si muovono per conto loro */
  filter: none;
}
.hero-title.hero-title-split .logo-stack {
  position: relative;
  display: block;
  width: 100%;
  max-width: min(1200px, 92vw);
  /* aspect ratio basato sulle immagini originali (~1000x250) */
  aspect-ratio: 1000 / 250;
}
.hero-title.hero-title-split .logo-part {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  filter: none;
  transform-origin: center center;
  will-change: transform;
}
.hero-title.hero-title-split .logo-slash {
  animation: logoSlash 4.2s ease-in-out infinite;
  transform-origin: 8% 60%;
}
.hero-title.hero-title-split .logo-root {
  animation: logoRoot 5s ease-in-out infinite;
  transform-origin: 20% 60%;
}
.hero-title.hero-title-split .logo-dash {
  animation: logoDash 2.4s ease-in-out infinite;
  animation-delay: -.3s;
}
.hero-title.hero-title-split .logo-camp {
  animation: logoCamp 5s ease-in-out infinite;
  transform-origin: 80% 60%;
}
@keyframes logoSlash {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%      { transform: translateY(-18px) rotate(-14deg); }
}
@keyframes logoRoot {
  0%, 100% { transform: translateY(-14px) rotate(-2deg) scale(1); }
  50%      { transform: translateY(14px) rotate(2deg) scale(1.02); }
}
@keyframes logoDash {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  25%      { transform: translate(6px, -10px) rotate(12deg); }
  50%      { transform: translate(0, -18px)  rotate(0deg); }
  75%      { transform: translate(-6px,-10px) rotate(-12deg); }
}
@keyframes logoCamp {
  0%, 100% { transform: translateY(14px) rotate(2deg); }
  50%      { transform: translateY(-14px) rotate(-2deg); }
}
.hero .hero-title .dot { color: var(--hot); }
.hero .hero-title .wave:nth-child(1)  { color: #ff6b3d; } /* / */
.hero .hero-title .wave:nth-child(2)  { color: #ffd36b; } /* R */
.hero .hero-title .wave:nth-child(3)  { color: #3fa34d; } /* o */
.hero .hero-title .wave:nth-child(4)  { color: #5fb0dc; } /* o */
.hero .hero-title .wave:nth-child(5)  { color: #e8488a; } /* T */
.hero .hero-title .wave:nth-child(6)  { color: #fffef5; } /* - */
.hero .hero-title .wave:nth-child(7)  { color: #ffd36b; } /* C */
.hero .hero-title .wave:nth-child(8)  { color: #ff6b3d; } /* a */
.hero .hero-title .wave:nth-child(9)  { color: #5fb0dc; } /* m */
.hero .hero-title .wave:nth-child(10) { color: #3fa34d; } /* p */

.hero .hero-lede {
  color: var(--cream);
  background: rgba(15,42,26,.62);
  padding: 14px 18px;
  border-radius: 10px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 6px 24px rgba(0,0,0,.25);
  display: inline-block;
}
/* BOX combinato: date in colonna a sx + "ci vediamo nel prato!" + freccia a dx */
.hero .hero-side-box {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 22px;
  background: rgba(15,42,26,.62);
  padding: 18px 22px;
  border-radius: 14px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 6px 24px rgba(0,0,0,.25);
}
.hero .hero-dates-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}
.hero .hero-dates-col .keycap { min-width: 88px; text-align: center; }
.hero .hero-side-right {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.hero .hero-arrow {
  margin-top: -4px;
  display: block;
}
.hero .hero-eyebrow {
  background: rgba(15,42,26,.62);
  border-color: var(--cream);
  color: var(--cream);
  box-shadow: 3px 3px 0 rgba(0,0,0,.25);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.hero .hand-box {
  display: inline-block;
  background: rgba(15,42,26,.62);
  padding: 10px 14px;
  border-radius: 10px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 6px 24px rgba(0,0,0,.25);
}
.hero .keycap {
  box-shadow: 0 4px 14px rgba(0,0,0,.3), 3px 3px 0 var(--ink);
}
.hero .hero-title {
  font-size: clamp(56px, 11vw, 180px);
}
.village-svg {
  width: 100%; height: 100%;
  display: block;
}

/* grande tendone: respira leggermente */
.bigtent { transform-origin: 700px 430px; animation: tentBreathe 4s ease-in-out infinite; }
@keyframes tentBreathe {
  0%, 100% { transform: scaleY(1); }
  50%      { transform: scaleY(1.012); }
}
.bigtent .bunt-flags polygon { animation: buntWave 2.2s ease-in-out infinite; transform-origin: center top; }
.bigtent .bunt-flags polygon:nth-child(2) { animation-delay: -.2s; }
.bigtent .bunt-flags polygon:nth-child(3) { animation-delay: -.4s; }
.bigtent .bunt-flags polygon:nth-child(4) { animation-delay: -.6s; }
.bigtent .bunt-flags polygon:nth-child(5) { animation-delay: -.8s; }
.bigtent .bunt-flags polygon:nth-child(6) { animation-delay: -1.0s; }
.bigtent .bunt-flags polygon:nth-child(7) { animation-delay: -1.2s; }
@keyframes buntWave {
  0%, 100% { transform: translateY(0) rotate(0); }
  50%      { transform: translateY(2px) rotate(6deg); }
}
.bigtent .flags polygon { transform-origin: 700px 190px; animation: flagWave 1.5s ease-in-out infinite; }
@keyframes flagWave {
  0%, 100% { transform: scaleX(1); }
  50%      { transform: scaleX(.7); }
}

/* tende campeggio: piccolo ondeggio */
.camptent { transform-origin: center bottom; animation: tentSway 3.5s ease-in-out infinite; }
.ct1 { animation-delay: -0.5s; }
.ct2 { animation-delay: -1.2s; }
.ct3 { animation-delay: -1.8s; }
.ct4 { animation-delay: -2.3s; }
.ct5 { animation-delay: -0.8s; }
@keyframes tentSway {
  0%, 100% { transform: skewX(0); }
  50%      { transform: skewX(1deg); }
}

/* alberi che ondeggiano */
.tree { transform-origin: center bottom; animation: treeSway 4.2s ease-in-out infinite; }
.tree-1 { animation-delay: -0.4s; }
.tree-2 { animation-delay: -1.1s; }
.tree-3 { animation-delay: -2.0s; }
@keyframes treeSway {
  0%, 100% { transform: rotate(-1deg); }
  50%      { transform: rotate(1.5deg); }
}

/* personaggi che saltano/si muovono */
.person { transform-origin: center bottom; }
.p1 { animation: jump 1.1s ease-in-out infinite; }
.p2 { animation: sway 2s ease-in-out infinite; transform-origin: 700px 440px; }
.p3 { animation: jump 0.95s ease-in-out infinite; animation-delay: -0.3s; }
.p4 { /* seduto, solo lieve bob */
  animation: bob 2.4s ease-in-out infinite;
}
.p5 { animation: run 1.6s ease-in-out infinite; }
.p6 { animation: bob 2.2s ease-in-out infinite; animation-delay: -0.7s; }

@keyframes jump {
  0%, 100% { transform: translateY(0); }
  45%      { transform: translateY(-22px); }
  55%      { transform: translateY(-22px); }
}
@keyframes sway {
  0%, 100% { transform: rotate(-1deg); }
  50%      { transform: rotate(1deg); }
}
@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}
@keyframes run {
  0%   { transform: translateX(0) translateY(0); }
  25%  { transform: translateX(-40px) translateY(-10px); }
  50%  { transform: translateX(-80px) translateY(0); }
  75%  { transform: translateX(-40px) translateY(-10px); }
  100% { transform: translateX(0) translateY(0); }
}

/* braccio che saluta */
.p2 .wave-arm {
  transform-origin: 693px 414px;
  animation: waveArm 1s ease-in-out infinite;
}
@keyframes waveArm {
  0%, 100% { transform: rotate(0); }
  50%      { transform: rotate(-30deg); }
}

/* pallone che rimbalza */
.ball { transform-origin: center; animation: bounce 1.3s ease-in-out infinite; }
@keyframes bounce {
  0%, 100% { transform: translate(0, 0) scale(1, 1); }
  30%      { transform: translate(-40px, -45px) scale(0.95, 1.05); }
  60%      { transform: translate(-80px, 0) scale(1.1, 0.9); }
}

/* uccelli che attraversano il cielo */
.bird { transform-origin: center; }
.b1 { animation: fly1 18s linear infinite; }
.b2 { animation: fly2 22s linear infinite; animation-delay: -8s; }
@keyframes fly1 {
  0%   { transform: translate(-40px, 80px); }
  100% { transform: translate(1440px, 120px); }
}
@keyframes fly2 {
  0%   { transform: translate(-40px, 140px); }
  100% { transform: translate(1440px, 90px); }
}

/* particellare fumo dal bbq */
.smoke-particles .puff {
  transform-origin: 383px 420px;
  animation: puff-rise 3.2s ease-out infinite;
  will-change: transform, opacity;
}
.smoke-particles .p-a { animation-delay: 0s;    animation-duration: 3.2s; }
.smoke-particles .p-b { animation-delay: -.5s;  animation-duration: 3.6s; }
.smoke-particles .p-c { animation-delay: -1s;   animation-duration: 2.8s; }
.smoke-particles .p-d { animation-delay: -1.6s; animation-duration: 3.4s; }
.smoke-particles .p-e { animation-delay: -2.2s; animation-duration: 3s;   }
.smoke-particles .p-f { animation-delay: -2.7s; animation-duration: 3.8s; }

@keyframes puff-rise {
  0%   { transform: translate(0, 0)        scale(0.3); opacity: 0; }
  15%  {                                               opacity: .9; }
  60%  { transform: translate(-10px, -50px) scale(1.1); opacity: .55; }
  100% { transform: translate(-22px, -95px) scale(1.6); opacity: 0; }
}
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--cream);
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 8px 14px;
  box-shadow: 3px 3px 0 var(--ink);
  margin-bottom: 28px;
}
.hero-eyebrow .blink {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--hot);
  animation: blink 1.2s ease-in-out infinite;
}
@keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: .25; } }

.hero-title {
  font-size: clamp(80px, 16vw, 240px);
  line-height: 0.82;
  letter-spacing: -0.05em;
  font-weight: 700;
  color: var(--ink);
  margin-top: 10px;
  margin-bottom: 24px;
  position: relative;
}
.hero-title .dot { color: var(--hot); }
.hero-title .wave {
  display: inline-block;
  animation: waveLetter 2.8s ease-in-out infinite;
  transform-origin: 50% 80%;
}
.hero-title .wave:nth-child(1) { animation-delay: 0s; }
.hero-title .wave:nth-child(2) { animation-delay: .08s; }
.hero-title .wave:nth-child(3) { animation-delay: .16s; }
@keyframes waveLetter {
  0%, 60%, 100% { transform: translateY(0) rotate(0); }
  30%           { transform: translateY(-14px) rotate(-3deg); }
}

.hero-stack {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  margin-top: clamp(140px, 18vh, 240px);
  gap: 48px;
  align-items: end;
}
.hero-lede {
  font-size: clamp(18px, 1.8vw, 24px);
  line-height: 1.45;
  max-width: 32ch;
  font-weight: 500;
}
.hero-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}
@media (max-width: 820px) {
  .hero-stack { grid-template-columns: 1fr; }
  .hero-side { align-items: flex-start; }
  .hero-sun { width: 90px; height: 90px; top: 80px; right: 24px; }
}

/* ======= Floating keycaps (easter eggs in hero) ======= */
.floater {
  position: absolute;
  z-index: 6;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--cream);
  border: 2px solid var(--ink);
  border-radius: var(--r-sm);
  box-shadow: 3px 3px 0 var(--ink);
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  animation: float 4s ease-in-out infinite;
}
a.floater { text-decoration: none; cursor: pointer; transition: box-shadow .15s ease, filter .15s ease; }
a.floater:hover { box-shadow: 5px 5px 0 var(--ink); filter: brightness(1.05); }
a.floater:active { box-shadow: 1px 1px 0 var(--ink); }
.floater.f-talk      { top: calc(clamp(260px, 38vh, 420px) - 120px); left: 16%; background: var(--hot);   color: var(--cream); border-color: var(--ink); animation-delay: -0.4s; --rot: -6deg; z-index: 6; }
.floater.f-workshop  { top: calc(clamp(300px, 42vh, 460px) - 120px); left: 34%; background: var(--berry); color: var(--cream); animation-delay: -1.2s; --rot: 4deg; padding: 9px 14px 8px; text-align: left; align-items: center; z-index: 6; }
.floater.f-birra     { top: calc(46% + 150px); left: calc(50% + 30px); transform: translate(-50%, -50%); background: var(--sun); color: var(--ink); animation-delay: -2.1s; --rot: -3deg; z-index: 6; }
.floater.f-cucina    { top: calc(48% + 200px); right: 4%; background: var(--sky-3); color: var(--ink); animation-delay: -1.7s; --rot: 5deg; z-index: 6; }
.floater.f-campeggio { bottom: calc(clamp(140px, 22vh, 260px) + 400px); right: 4%; background: var(--cream); color: var(--ink); animation-delay: -3s; --rot: 8deg; z-index: 6; }
@keyframes float {
  0%,100% { transform: translateY(0) rotate(var(--rot, 0deg)); }
  50%     { transform: translateY(-14px) rotate(var(--rot, 0deg)); }
}
/* birra è centrato: serve override delle keyframes per mantenere il translate -50% */
.floater.f-birra { animation: float-center 4s ease-in-out infinite; }
@keyframes float-center {
  0%,100% { transform: translate(-50%, -50%) rotate(var(--rot, 0deg)); }
  50%     { transform: translate(-50%, calc(-50% - 14px)) rotate(var(--rot, 0deg)); }
}

/* ======= SCROLL CUE ======= */
.scroll-cue {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  z-index: 5;
  animation: cue-bounce 2.2s ease-in-out infinite;
  cursor: pointer;
}
.scroll-cue:hover { color: var(--hot); }
.scroll-cue-mouse {
  width: 26px;
  height: 42px;
  border: 2.5px solid var(--ink);
  border-radius: 14px;
  background: var(--cream);
  position: relative;
  box-shadow: 2px 2px 0 var(--ink);
}
.scroll-cue-wheel {
  position: absolute;
  top: 7px;
  left: 50%;
  transform: translateX(-50%);
  width: 3px;
  height: 7px;
  background: var(--hot);
  border-radius: 2px;
  animation: cue-wheel 1.6s ease-in-out infinite;
}
@keyframes cue-bounce {
  0%,100% { transform: translateX(-50%) translateY(0); }
  50%     { transform: translateX(-50%) translateY(6px); }
}
@keyframes cue-wheel {
  0%   { transform: translateX(-50%) translateY(0);  opacity: 1; }
  70%  { transform: translateX(-50%) translateY(14px); opacity: 0; }
  100% { transform: translateX(-50%) translateY(0);  opacity: 0; }
}
@media (max-width: 820px) {
  .scroll-cue { bottom: 16px; }
  .scroll-cue-label { display: none; }
}

/* ======= CTAs ======= */
.btn-row { display: flex; gap: 14px; flex-wrap: wrap; }
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 26px;
  border: 2px solid var(--ink);
  border-radius: var(--r-sm);
  background: var(--ink);
  color: var(--cream);
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: -0.01em;
  box-shadow: 4px 4px 0 var(--hot);
  transition: transform 140ms cubic-bezier(.3,1.4,.5,1), box-shadow 140ms ease;
}
.btn:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--hot);
}
.btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--hot); }
.btn.ghost {
  background: var(--cream);
  color: var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
}
.btn.ghost:hover { box-shadow: 6px 6px 0 var(--ink); }
.btn.accent {
  background: var(--hot);
  color: var(--cream);
  box-shadow: 4px 4px 0 var(--ink);
}
.btn .arr { transition: transform 200ms ease; }
.btn:hover .arr { transform: translateX(4px); }

/* ======= Sections ======= */
section { padding: 96px 0; position: relative; }
.sec-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-bottom: 16px;
}
.sec-eyebrow::before {
  content: "";
  width: 22px; height: 2px;
  background: var(--hot);
}
.h-1 { font-size: clamp(36px, 5vw, 72px); line-height: 1.02; letter-spacing: -0.025em; }
.h-2 { font-size: clamp(24px, 2.6vw, 36px); line-height: 1.1; letter-spacing: -0.015em; }
.h-3 { font-size: 22px; line-height: 1.15; letter-spacing: -0.01em; }

/* ======= Tiles ======= */
.tile {
  background: var(--cream);
  border: 2px solid var(--ink);
  border-radius: var(--r-lg);
  padding: 28px;
  box-shadow: 5px 5px 0 var(--ink);
  transition: transform 160ms cubic-bezier(.3,1.4,.5,1), box-shadow 160ms ease;
}
.tile.hov:hover {
  transform: translate(-3px, -3px) rotate(-0.3deg);
  box-shadow: 8px 8px 0 var(--ink);
}
.tile.tilt-l { transform: rotate(-1.2deg); }
.tile.tilt-r { transform: rotate(1.2deg); }
.tile.accent { background: var(--hot); color: var(--cream); border-color: var(--ink); }
.tile.sun    { background: var(--sun);  color: var(--ink); }
.tile.grass  { background: var(--grass-2); color: var(--ink); }
.tile.sky    { background: var(--sky-1); color: var(--ink); }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
@media (max-width: 900px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

/* ======= Keycap (reusable) ======= */
.keycap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--cream);
  border: 2px solid var(--ink);
  border-radius: var(--r-sm);
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  box-shadow: 2px 2px 0 var(--ink);
  color: var(--ink);
}
.keycap.sun    { background: var(--sun); }
.keycap.grass  { background: var(--grass-1); }
.keycap.sky    { background: var(--sky-1); }
.keycap.hot    { background: var(--hot); color: var(--cream); }
.keycap.berry  { background: var(--berry); color: var(--cream); }

/* ======= Marquee ======= */
.marquee {
  border-top: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  background: var(--ink);
  color: var(--cream);
  overflow: hidden;
  padding: 14px 0;
}
.marquee-track {
  display: inline-flex;
  gap: 36px;
  white-space: nowrap;
  animation: marquee 28s linear infinite;
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.marquee-track span { display: inline-flex; align-items: center; gap: 18px; }
.marquee-track .star { color: var(--hot); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ======= Schedule (semplice) ======= */
.schedule-preview {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}
@media (max-width: 720px) {
  .schedule-preview { grid-template-columns: 1fr; gap: 22px; }
}
.schedule-day {
  background: var(--cream);
  border: 2px solid var(--ink);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: 6px 6px 0 var(--ink);
}
.schedule-day-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 24px;
  background: var(--grass-1);
  border-bottom: 2px solid var(--ink);
  font-family: var(--font-display);
}
.schedule-row {
  display: grid;
  grid-template-columns: 90px 1fr;
  border-bottom: 1.5px solid var(--ink);
  transition: background 120ms ease;
}
.schedule-row:last-child { border-bottom: none; }
.schedule-row:hover { background: rgba(126, 192, 75, 0.15); }
.schedule-time {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 13px;
  padding: 14px 14px;
  border-right: 1.5px solid var(--ink);
  background: var(--cream);
  display: flex; align-items: center;
}
.schedule-item {
  padding: 14px 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.schedule-item .title-line {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}

/* ======= Footer ======= */
.site-footer {
  padding: 72px 0 40px;
  background: var(--grass-3);
  color: var(--cream);
  border-top: 2px solid var(--ink);
  position: relative;
  overflow: hidden;
}
.site-footer a { color: var(--cream); }
.site-footer a:hover { color: var(--sun); }
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
}
@media (max-width: 820px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }

/* ======= Tweaks panel ======= */
.tweaks {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 100;
  background: var(--cream);
  color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: var(--r-md);
  padding: 16px 18px;
  font-family: var(--font-ui);
  font-size: 12px;
  width: 260px;
  box-shadow: 5px 5px 0 var(--ink);
  display: none;
}
.tweaks.show { display: block; }
.tweaks h4 { font-family: var(--font-ui); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-dim); margin-bottom: 10px; font-weight: 700; }
.tweaks .group { margin-bottom: 14px; }
.tweaks .group-label { display: flex; justify-content: space-between; margin-bottom: 6px; color: var(--ink-dim); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.tweaks .seg { display: flex; border: 2px solid var(--ink); border-radius: var(--r-sm); overflow: hidden; }
.tweaks .seg button {
  flex: 1; padding: 8px 6px;
  background: transparent; border: none;
  border-right: 1.5px solid var(--ink);
  color: var(--ink-dim);
  font-family: var(--font-ui);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
}
.tweaks .seg button:last-child { border-right: none; }
.tweaks .seg button.on { background: var(--hot); color: var(--cream); font-weight: 700; }
.tweaks .seg button:hover:not(.on) { background: var(--sky-1); }

/* ======= Utility ======= */
.hidden { display: none !important; }
.wiggle:hover { animation: wiggle .6s ease; }
@keyframes wiggle {
  0%,100% { transform: rotate(0); }
  25% { transform: rotate(-3deg); }
  75% { transform: rotate(3deg); }
}

/* Underline sketch */
.sketch {
  position: relative; display: inline-block;
}
.sketch::after {
  content: "";
  position: absolute; left: -4px; right: -4px; bottom: -6px; height: 10px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'><path d='M2 7 Q 18 2 35 6 T 72 5 T 98 6' stroke='%23ff6b3d' stroke-width='3' fill='none' stroke-linecap='round'/></svg>") center/100% 100% no-repeat;
}


/* ======= PAGINE INTERNE: sole + nuvole pixel art ======= */
.page-hero .hero-sun {
  background: url("../assets/sun-pixel.png") center/contain no-repeat;
  border-radius: 0;
  box-shadow: none;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  animation: sunFlip 3.2s steps(1) infinite;
}
.page-hero .hero-sun::before { content: none; display: none; }

@keyframes sunFlip {
  0%   { transform: scale(1, 1); }
  25%  { transform: scale(1, -1); }
  50%  { transform: scale(-1, -1); }
  75%  { transform: scale(-1, 1); }
  100% { transform: scale(1, 1); }
}

.page-hero .cloud {
  background: url("../assets/cloud-pixel.png") center/contain no-repeat !important;
  border-radius: 0;
  box-shadow: none;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  /* aspect ~ 696/378 ≈ 1.84 */
}
.page-hero .cloud::before,
.page-hero .cloud::after { content: none !important; display: none !important; }

.page-hero .cloud-1 { width: 220px; height: 120px; }
.page-hero .cloud-2 { width: 170px; height: 92px; }
.page-hero .cloud-3 { width: 260px; height: 142px; }