/* ── Hero ──
   Sized for a standard 1366×768 laptop: the logo, FarMapa title,
   tagline, description and CTA should all fit above the fold (~85vh)
   so visitors can see "what" and "why" without scrolling. */
.hero {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 24px 32px 48px;
  text-align: center;
}
/* All hero content sits above the ambiance layer. */
.hero > :not(.hero-ambiance) { position: relative; z-index: 1; }

.hero-eyebrow {
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sage-dark);
  margin-bottom: 14px;
}

.hero-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(3.5rem, 11vw, 7.5rem);
  font-weight: 300;
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--forest);
  margin-bottom: 20px;
}
.hero-title em { font-style: italic; }

.hero-divider {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 18px;
}
.hero-divider-line { width: 48px; height: 1px; background: var(--sage); }
.hero-divider-dot  { width: 4px; height: 4px; border-radius: 50%; background: var(--sage); }

.hero-tagline {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(1.15rem, 2.8vw, 1.6rem);
  font-weight: 400;
  font-style: italic;
  color: var(--text-mid);
  line-height: 1.5;
  margin-bottom: 14px;
}

.hero-desc {
  font-size: 0.95rem;
  font-weight: 300;
  line-height: 1.75;
  color: var(--text-muted);
  max-width: 460px;
  margin-bottom: 28px;
}

/* ── Hero ambiance: bees + flowers ──
   Pointer-events disabled so the layer never intercepts clicks on the
   CTA or text. Sits behind everything else (z-index:0; siblings get 1). */
.hero-ambiance {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

/* Flowers — hand-drawn PNGs scattered around the hero corners and
   edges, deliberately avoiding the central text column. Each one
   has its own size, baseline rotation, and sway timing. */
.hero-flower {
  position: absolute;
  opacity: 0.85;
  pointer-events: none;
  transform-origin: center;
  height: auto;
  will-change: transform;
  /* Higher than .hero-bee so petals occlude a bee that drifts past
     — the bee looks like it's flying under the flower. */
  z-index: 2;
}

/* 13 flowers: 8 full-size originals + 5 smaller duplicates reusing
   the same PNGs to give a sense of depth (small = further away).
   Positions reach further into the mid-band of the hero, not only
   hugging the perimeter. Two rules govern placement:

     - The CTA "Explore the map" button sits roughly centred at
       (x 480-800, y 420-473) on a 1280×800 hero. All flowers stay
       clear of an 80px-buffered rectangle around it: no flower has
       both an x-overlap with [420, 860] AND a y-overlap with [340, 560].
     - Duplicates are placed between the large flowers so the whole
       collection feels scattered rather than clustered on the edges.

   Widths: originals 60-140px, duplicates 30-40px. Sway baseline
   rotations are all distinct across all 13, spanning −30° to +28°. */
.hero-flower-1  { top:  2%; left:  3%; width: 110px; animation: flower-sway-1  5.0s ease-in-out infinite; }
.hero-flower-2  { top:  6%; right: 4%; width:  70px; animation: flower-sway-2  5.8s ease-in-out infinite; }
.hero-flower-3  { top: 36%; left: 13%; width:  95px; animation: flower-sway-3  4.4s ease-in-out infinite; }
.hero-flower-4  { top: 15%; right:10%; width: 130px; animation: flower-sway-4  5.4s ease-in-out infinite; }
.hero-flower-6  { top: 52%; left:  4%; width: 140px; animation: flower-sway-6  6.0s ease-in-out infinite; }
.hero-flower-7  { top: 54%; right: 6%; width: 115px; animation: flower-sway-7  5.2s ease-in-out infinite; }
/* Duplicates — same PNGs at ≤40px to read as far-away flowers. */
.hero-flower-9  { top:  8%; left: 22%; width:  32px; animation: flower-sway-9  3.8s ease-in-out infinite; }
.hero-flower-10 { top: 48%; left: 22%; width:  38px; animation: flower-sway-10 5.6s ease-in-out infinite; }
.hero-flower-11 { top: 22%; right:28%; width:  30px; animation: flower-sway-11 4.0s ease-in-out infinite; }
.hero-flower-12 { top: 46%; right:22%; width:  40px; animation: flower-sway-12 6.4s ease-in-out infinite; }

/* Each sway rocks ±3° around its own distinct baseline. No two
   flowers share a baseline — the spread is ~58°, so adjacent flowers
   tilt noticeably differently. */
@keyframes flower-sway-1  { 0%,100% { transform: rotate(-13deg); } 50% { transform: rotate( -7deg); } }
@keyframes flower-sway-2  { 0%,100% { transform: rotate(  9deg); } 50% { transform: rotate( 15deg); } }
@keyframes flower-sway-3  { 0%,100% { transform: rotate( -8deg); } 50% { transform: rotate( -2deg); } }
@keyframes flower-sway-4  { 0%,100% { transform: rotate( 19deg); } 50% { transform: rotate( 25deg); } }
@keyframes flower-sway-6  { 0%,100% { transform: rotate(  5deg); } 50% { transform: rotate( 11deg); } }
@keyframes flower-sway-7  { 0%,100% { transform: rotate(-28deg); } 50% { transform: rotate(-22deg); } }
@keyframes flower-sway-9  { 0%,100% { transform: rotate( 25deg); } 50% { transform: rotate( 31deg); } }
@keyframes flower-sway-10 { 0%,100% { transform: rotate(-17deg); } 50% { transform: rotate(-11deg); } }
@keyframes flower-sway-11 { 0%,100% { transform: rotate(  3deg); } 50% { transform: rotate(  9deg); } }
@keyframes flower-sway-12 { 0%,100% { transform: rotate(-33deg); } 50% { transform: rotate(-27deg); } }

/* Bees — position and rotation are both driven from JS on every
   frame (see initBees() at the bottom of this file). We're no
   longer using CSS motion-path / offset-rotate because the bee's
   rotation now has to follow its *actual* velocity vector, which
   can deflect away from the path during bee-to-bee avoidance —
   CSS motion-path would always rotate to the original path tangent
   regardless of where the bee actually ends up.

   Each underlying path is still a cubic-bezier (defined in the JS
   `d` strings for bees 1/2/3), used as a moving target that a weak
   pull force steers the bee toward when it's not avoiding another
   bee. When two bees come within 120px, a repulsion force curves
   both away in opposite directions; both forces feed into a
   velocity-renormalisation step so speed stays constant — only
   direction changes. */
.hero-bee {
  position: absolute;
  top: 0;
  left: 0;
  width: 80px;
  height: 80px;
  object-fit: contain;
  pointer-events: none;
  will-change: transform;
  transform-origin: center center;
  z-index: 1;
  /* Hidden until initBees() writes the first transform — otherwise
     each bee would render briefly at ambiance (0, 0) before JS
     moves it to its path start. */
  visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .hero-flower, .hero-bee { animation: none !important; }
}

/* CTA button — uses --forest-bg so cream text passes WCAG AA. */
.cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 15px 40px;
  background: var(--forest-bg);
  color: var(--cream);
  font-family: 'DM Sans', sans-serif;
  font-size: 0.95rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 2px;
  transition: background 0.25s, transform 0.2s;
}
.cta-btn:hover,
.cta-btn:focus-visible {
  background: var(--forest-bg-hover);
  transform: translateY(-2px);
}
.cta-arrow { display: inline-block; transition: transform 0.2s; }
.cta-btn:hover .cta-arrow,
.cta-btn:focus-visible .cta-arrow { transform: translateX(4px); }

/* ── Features strip ── */
.features {
  margin-top: 100px;
  display: flex;
  gap: 56px;
  justify-content: center;
  border-top: 1px solid var(--cream-dark);
  padding-top: 60px;
  flex-wrap: wrap;
}

.feature { text-align: center; max-width: 240px; }
.feature-icon { margin-bottom: 16px; display: block; line-height: 1; }
.feature-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.25rem;          /* 20px — meets the 20px floor */
  font-weight: 400;
  color: var(--forest);
  line-height: 1.3;
  margin-bottom: 10px;
}
.feature-desc { font-size: 1rem; line-height: 1.65; color: var(--text-muted); }

/* ── Category ticker (infinite horizontal scroll) ── */
.cat-ticker {
  position: relative;
  overflow: hidden;
  padding: 36px 0;
  border-top: 1px solid var(--cream-dark);
  border-bottom: 1px solid var(--cream-dark);
  background: rgba(247, 243, 235, 0.55);
}
/* Soft fade edges so items don't snap in/out abruptly. */
.cat-ticker::before,
.cat-ticker::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 96px;
  pointer-events: none;
  z-index: 1;
}
.cat-ticker::before { left: 0;  background: linear-gradient(to right, var(--cream), rgba(247,243,235,0)); }
.cat-ticker::after  { right: 0; background: linear-gradient(to left,  var(--cream), rgba(247,243,235,0)); }

.cat-ticker-track {
  display: flex;
  width: max-content;
  gap: 56px;
  align-items: center;
  /* Position is driven entirely from JS via requestAnimationFrame
     (see initTicker). No CSS animation, so no animation/transform
     conflicts with the wheel handler. */
  will-change: transform;
  backface-visibility: hidden;
}

.cat-ticker-item {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  padding: 8px 16px;
  border-radius: 18px;
  background: transparent;
  font-family: 'DM Sans', sans-serif;
  font-size: 1rem;
  font-weight: 400;
  color: var(--text-mid);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.3s ease;
  /* Promote each item to its own compositor layer so the emoji PNGs
     don't get re-rasterised during the parent's animated transform. */
  transform: translateZ(0);
  backface-visibility: hidden;
}
.cat-ticker-item:hover,
.cat-ticker-item:focus-visible { background: var(--cream-warm); }
.cat-ticker-item-icon {
  width: 28px;
  height: 28px;
  display: block;
  flex-shrink: 0;
  image-rendering: auto;
}
.cat-ticker-item-text { display: flex; flex-direction: column; min-width: 0; }
.cat-ticker-item-head { display: flex; align-items: center; gap: 8px; }
.cat-ticker-item-name { white-space: nowrap; }

/* Count badge — collapsed by default; max-width animates in on hover. */
.cat-ticker-item-count {
  display: inline-block;
  max-width: 0;
  padding: 1px 0;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--forest-bg);
  background: rgba(123, 182, 105, 0.18);
  border-radius: 999px;
  white-space: nowrap;
  opacity: 0;
  overflow: hidden;
  transition: max-width 0.35s ease, padding 0.35s ease, opacity 0.25s ease 0.05s;
}
.cat-ticker-item:hover .cat-ticker-item-count {
  max-width: 90px;
  padding: 1px 9px;
  opacity: 1;
}

/* Description — sage green sub-line; collapses when not hovered. */
.cat-ticker-item-desc {
  font-size: 0.85rem;
  color: var(--sage-dark);
  white-space: nowrap;
  max-width: 0;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-width 0.4s ease, max-height 0.35s ease, opacity 0.3s ease 0.05s, margin-top 0.35s ease;
}
.cat-ticker-item:hover .cat-ticker-item-desc {
  max-width: 480px;
  max-height: 26px;
  opacity: 1;
  margin-top: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .cat-ticker-item-count,
  .cat-ticker-item-desc { transition: none; }
}

/* ── Desktop (>768px): readable hero copy ── */
@media (min-width: 769px) {
  .hero-tagline { font-size: clamp(1.5rem, 2.8vw, 1.8rem); }
  .hero-desc    { font-size: 1.125rem; line-height: 1.75; max-width: 720px; }
}

/* Bee orbits need enough horizontal room to stay ≥80px clear of the
   flowers that hug the left/right edges. Below ~900px that buffer
   collapses, so we hide the whole ambiance layer rather than let the
   bees clip into petals. */
@media (max-width: 899px) {
  .hero-ambiance { display: none; }
}

/* ── Mobile ── */
@media (max-width: 768px) {
  .hero { padding: 48px 20px 56px; }
  .cta-btn { width: 100%; max-width: 320px; justify-content: center; }
  .features { gap: 32px; margin-top: 60px; }
  .cat-ticker { padding: 24px 0; }
  .cat-ticker-track { gap: 36px; }
  .cat-ticker-item { font-size: 0.9rem; }
  .cat-ticker-item img { width: 22px; height: 22px; }
}
@media (max-width: 480px) {
  .hero { padding: 36px 16px 48px; }
  .hero-title { font-size: clamp(2.8rem, 17vw, 10rem); }
  .features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
  .feature { max-width: none; }
}