/* ==========================================================================
   DRINK EAT! LODY - dodatki do css/style.css (ładowany PO nim, tylko na
   lody.html)
   --------------------------------------------------------------------------
   Kolory przychodzą z motywu [data-theme="lody"] (style.css, sekcja 0):
   niebieski zamiast czerwieni, błękit lodu zamiast sera, truskawka zamiast
   złotej skórki, lodowa biel zamiast ciasta. Tu tylko to, co na stronie
   z pizzą było „pizzowe" na sztywno:

    1. Kursor          4. Mapa jak gałka lodów
    2. Automat         5. Finał (rożek)
    3. Scena (deser)   6. Sekcje (doodle, stopka)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Kursor (tylko mysz): błękitna strzałka, nad linkami mini rożek
   -------------------------------------------------------------------------- */
@media (pointer: fine) {
  html {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='34' viewBox='0 0 28 34'%3E%3Cpath d='M3 2.5V26l6.5-5.5 4 9.5 4.5-2-4-9.2 8.5-.3Z' fill='%239ADBFF' stroke='%231C0D0A' stroke-width='2.6' stroke-linejoin='round'/%3E%3C/svg%3E") 3 3, auto;
  }
  /* rożek czubkiem w lewy górny róg (tam „klika"), gałka truskawkowa z wisienką */
  a, button, [role="button"], .pizza-map__pin {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'%3E%3Cpath d='M3 3 25.5 13.5 13.5 25.5Z' fill='%23E7A54F' stroke='%231C0D0A' stroke-width='2.4' stroke-linejoin='round'/%3E%3Cpath d='M9.5 7.5 15 18M14.5 9.8 19.6 15M7.6 11.6l7.8 7.8' stroke='%23B97A2E' stroke-width='1.6' stroke-linecap='round'/%3E%3Cpath d='M15.6 28.2a9.6 9.6 0 1 1 12.6-12.6c1.8 1.2 2.6 3.3 1.4 5-1 1.4-.3 2.9.4 4.2.9 1.7-.6 3.6-2.5 3.2-1.4-.3-2.6.4-3.4 1.6-1.4 2-4.2 1.3-5.3.3-.9-.8-2.2-1.6-3.2-1.7Z' fill='%23FF9BC6' stroke='%231C0D0A' stroke-width='2.4' stroke-linejoin='round'/%3E%3Cpath d='M18.3 14.6a6 6 0 0 1 4.6-1.6' fill='none' stroke='%23FFC4DA' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='29' cy='10.6' r='3.4' fill='%23E8344E' stroke='%231C0D0A' stroke-width='2'/%3E%3C/svg%3E") 3 3, pointer;
  }
}

/* --------------------------------------------------------------------------
   2. Automat z lodami (rysunek: js/art-ice.js) - pętle w spoczynku, tylko
   CSS (scena ich nie rusza): neon „oddycha", promienie logo ICE CREAM
   powoli się kręcą. Przy ograniczonym ruchu stoją (style.css, sekcja 13).
   -------------------------------------------------------------------------- */
.machine--ice .m-neon { animation: neon-breathe 2.6s ease-in-out infinite; }
.machine--ice .m-neon + .m-neon { animation-delay: -1.3s; }
@keyframes neon-breathe { 50% { opacity: 0.45; } }
.machine--ice .m-logo__rays {
  transform-box: view-box;
  transform-origin: 138px 468px;
  animation: spin 18s linear infinite;
}

/* --------------------------------------------------------------------------
   3. Scena: kubek lodów zamiast zdjęcia pizzy, zimna mgiełka zamiast pary
   (pozycje względem automatu - jak .story__pizza / .story__steam)
   -------------------------------------------------------------------------- */
.story__sundae svg, .cta__cone-art svg { width: 100%; height: auto; overflow: visible; }
/* Deser stoi przed dolną częścią automatu, ekran z „GOTOWE!" zostaje
   odsłonięty: --k = szerokość rysunku / szerokość automatu, --top = górna
   krawędź (w % wysokości automatu). Mgiełka ma tę samą ramkę, tylko wyżej
   o przesunięcie deseru z motion.js (yPercent -10 → 0,1 × --k × 0,6). */
.motion .story__machine { --k: 1.5; --top: 55%; }
.motion .story__sundae {
  left: calc((1 - var(--k)) * 50%); top: var(--top);
  width: calc(var(--k) * 100%);
  filter: none;
}
.motion .story__chill {
  left: calc((1 - var(--k)) * 50%); top: calc(var(--top) - var(--k) * 6%);
  width: calc(var(--k) * 100%);
  aspect-ratio: 1;
}
@media (max-width: 899.98px) {
  .motion .story__machine { --k: 1.4; --top: 56%; }
}
.chill { position: absolute; width: 44%; }
.chill svg { width: 100%; height: auto; overflow: visible; }
.chill--l { left: -14%; top: 22%; }
.chill--r { right: -16%; top: 17%; transform: scaleX(-1); }

/* mgiełka opada i rozpływa się (para na pizzy unosi się do góry);
   prawy obłoczek w innym rytmie niż lewy */
.steam--chill .steam__wisp { animation-name: chill; animation-duration: 2.8s; }
.chill--r .steam__wisp { animation-delay: -1.4s; }
.chill--r .steam__wisp:nth-child(2) { animation-delay: -2.2s; }
.chill--r .steam__wisp:nth-child(3) { animation-delay: -0.5s; }
@keyframes chill {
  0% { transform: translateY(-10px) scale(0.75); opacity: 0; }
  35% { opacity: 1; }
  100% { transform: translateY(14px) scale(1.06); opacity: 0; }
}

/* --------------------------------------------------------------------------
   4. Mapa „Cała Polska na jednej gałce": obrys z wafla, województwa
   w smakach lodów (błękit, wanilia, truskawka), posypka, pinezki-wisienki.
   Markup: js/main.js (te same klasy co mapa-pizza + warstwy lodów).
   -------------------------------------------------------------------------- */
.places { --doodle: rgba(214, 60, 128, 0.2); }
.places .section-title { --fill: var(--cream); }
.places__ribbon-fill { stroke: var(--cheese); }

.pizza-map__board { background: var(--cream); }
.pizza-map__outline path { stroke-width: 56; }
.pizza-map__crust path { fill: #E7A54F; stroke: #E7A54F; stroke-width: 44; }
.pizza-map__waffle path { stroke-width: 44; stroke-linejoin: round; stroke-linecap: round; }
.pizza-map__crust-edge path { fill: #B97A2E; stroke: #B97A2E; stroke-width: 12; }
.pizza-map__slice {
  fill: #9ADBFF;
  stroke: var(--ink);
  stroke-width: 2.4;
  stroke-opacity: 0.35;
}
.pizza-map__slice:nth-child(4n+2) { fill: #FFF1C9; }
.pizza-map__slice:nth-child(4n+3) { fill: #FFC4DA; }
.pizza-map__slice:nth-child(4n) { fill: #C9EDFF; }
.pizza-map__slice:hover { fill: #FFFFFF; }
.pizza-map__sprinkles { pointer-events: none; }
.pizza-map__sprinkles rect { stroke: var(--ink); stroke-width: 2.6; }

/* pinezka-wisienka */
.pizza-map__pulse { stroke: var(--red); }
.pizza-map__stem { fill: none; stroke: var(--ink); stroke-width: 5; stroke-linecap: round; }
.pizza-map__leaf { fill: #3E9B4F; stroke: var(--ink); stroke-width: 3.5; stroke-linejoin: round; }
.pizza-map__berry { fill: #E8344E; stroke: var(--ink); stroke-width: 5; }
.pizza-map__shine { fill: none; stroke: #FFC2CC; stroke-width: 4.5; stroke-linecap: round; }
.pizza-map__pin.is-active .pizza-map__cherry,
.pizza-map__pin:focus-visible .pizza-map__cherry { transform: scale(1.25) rotate(-8deg); }
.pizza-map__tip { color: var(--cheese); }

/* --------------------------------------------------------------------------
   5. Finał: rożek wyskakuje z automatu (kiwa się ze scrollem - motion.js)
   -------------------------------------------------------------------------- */
/* rożek przed dolną częścią automatu (ekran z „GOTOWE!" odsłonięty),
   czubek trochę poniżej automatu - jak pizza, która z niego wyskakuje */
.cta__cone {
  left: 15%; top: 56%;
  width: 70%;
}
.cta__cone-art { filter: drop-shadow(0 6px 0 rgba(28, 13, 10, 0.3)); }
/* mgiełka w ramce rożka (bez przesunięcia yPercent -12 z motion.js) */
.cta__chill { left: 0; top: 50%; width: 100%; aspect-ratio: 1; }
.cta__chill .chill { width: 46%; }
.cta__chill .chill--l { left: -16%; top: -2%; }
.cta__chill .chill--r { right: -16%; top: -6%; }

/* --------------------------------------------------------------------------
   6. Sekcje
   -------------------------------------------------------------------------- */
/* stopka: granat zamiast czarnego - ciemna, ale „lodowa" */
.site-footer { --bg: #0A1A3F; --doodle: rgba(154, 219, 255, 0.07); }