/* =========================================================
   Podaj Drzewko!: wersja 3D (nadpisania do style.css)
   ========================================================= */

:root {
  --facets: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='104' viewBox='0 0 120 104'%3E%3Cpolygon points='0,0 60,0 30,52' fill='%23fff' fill-opacity='.07'/%3E%3Cpolygon points='60,0 120,0 90,52' fill='%23fff' fill-opacity='.02'/%3E%3Cpolygon points='30,52 90,52 60,0' fill='%23000' fill-opacity='.06'/%3E%3Cpolygon points='0,104 30,52 60,104' fill='%23fff' fill-opacity='.04'/%3E%3Cpolygon points='60,104 90,52 120,104' fill='%23000' fill-opacity='.05'/%3E%3Cpolygon points='30,52 90,52 60,104' fill='%23fff' fill-opacity='.06'/%3E%3Cpolygon points='0,0 30,52 0,104' fill='%23000' fill-opacity='.03'/%3E%3Cpolygon points='120,0 90,52 120,104' fill='%23fff' fill-opacity='.03'/%3E%3C/svg%3E");
}

/* przyciski z lekką „bryłą” */
.v3d .btn { background-image: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 55%, rgba(0, 0, 0, .05)); }

/* ---------- HERO 3D ----------
   Hero zajmuje jeden ekran pod żółtym paskiem (jego wysokość, --topbar-h, mierzy main.js).
   Komputer: napis i karta po lewej, po prawej scena z krasnalem i drogowskazem.
   Tablet i telefon: wszystko jedno pod drugim, krasnal pod kartą, jeśli starczy miejsca.
   Rozmiary zależą też od wysokości okna (vh), żeby całość mieściła się na niskich laptopach. */
:root { --topbar-h: 42px; }
.hero3d {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: calc(100vh - var(--topbar-h));
  min-height: calc(100svh - var(--topbar-h));
  padding: calc(var(--nav-h) + clamp(4px, 1.6vh, 24px)) 0 clamp(12px, 2.6vh, 36px);
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, #8fd0c2 0%, #c4e8de 38%, #e3f1ed 62%, #e3f1ed 100%);
}
.hero3d__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; touch-action: pan-y; }
.hero3d__inner {
  position: relative; z-index: 3; flex: 1 0 auto;
  width: min(1200px, 100% - 32px); margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 580px) minmax(0, 1fr);
  grid-template-rows: 1fr auto auto 1fr;
  grid-template-areas: ". stage" "brand stage" "card stage" ". stage";
  column-gap: clamp(28px, 4vw, 72px);
  pointer-events: none; /* kliknięcia w puste miejsca trafiają do sceny 3D (drzewka się kołyszą) */
}

/* napis: dolna krawędź „Drzewko!” zachodzi na kartę */
.v3d .hero__brand { grid-area: brand; z-index: 4; text-align: left; pointer-events: none; }
.v3d .pill { margin: 0 0 4px 6px; }
.v3d .wordmark { --wm-w: min(440px, 44vh); width: var(--wm-w); margin: 0 0 calc(var(--wm-w) * -.075) calc(var(--wm-w) * -.03); }

.hero3d__card {
  grid-area: card; position: relative; z-index: 3;
  padding: clamp(22px, 3.8vh, 42px) clamp(22px, 2.8vw, 40px) clamp(14px, 2.6vh, 30px);
  border-radius: 30px;
  background: var(--facets), linear-gradient(160deg, rgba(30, 107, 88, .93), rgba(15, 61, 52, .91));
  background-size: 120px 104px, auto;
  color: #fff; text-align: left;
  box-shadow: 0 36px 60px -30px rgba(10, 40, 34, .75), inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 -6px 0 rgba(0, 0, 0, .12);
  animation: rise .9s .35s both;
  pointer-events: auto;
}
.hero3d h1 {
  font-size: clamp(1.7rem, min(3.4vw, 4.8vh), 2.85rem); font-weight: 800; line-height: 1.04;
  margin: 0 0 .38em; text-shadow: 0 3px 0 rgba(0, 0, 0, .18);
}
/* trzy poziomy tekstu: lead (biały, pogrubiony), opis (jaśniejszy), drobna linijka o terminach */
.hero__lead { font-size: clamp(1.02rem, min(1.5vw, 2.4vh), 1.22rem); font-weight: 700; line-height: 1.45; color: #fff; max-width: 30em; margin: 0; }
.hero__text { font-size: clamp(.92rem, min(1.2vw, 2.15vh), 1.04rem); line-height: 1.55; color: #cfeee5; max-width: 34em; margin: .6em 0 clamp(16px, 2.8vh, 28px); }
.hero__ctas { display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-start; gap: 12px 24px; }
.hero__ctas .btn { flex: none; }
.hero__ctas .btn--lg { font-size: clamp(1rem, 2.2vh, 1.18rem); }
.hero__ctas .link { font-size: .96rem; line-height: 1.4; max-width: 15em; }
.hero__info { margin: clamp(12px, 2.2vh, 20px) 0 0; font-size: .86rem; line-height: 1.45; color: #a9d4c9; }
.hero__info svg { display: inline-block; width: 18px; height: 18px; margin-right: .45em; vertical-align: -4px; color: var(--yellow); }

/* pole na krasnala (rysuje go scena 3D) i drogowskaz w lewym dolnym rogu tego pola */
.hero3d__stage { grid-area: stage; min-height: 0; }
.hero3d__props { grid-area: stage; align-self: end; justify-self: start; position: relative; width: 266px; }
.v3d .sign { position: relative; left: auto; bottom: auto; }
.v3d .sticker { left: 168px; bottom: -6px; }
.v3d .sign__board { background-image: var(--facets), repeating-linear-gradient(180deg, transparent 0 30px, rgba(0, 0, 0, .12) 30px 32px); background-size: 120px 104px, auto; }

.v3d .mascot { position: absolute; z-index: 4; right: auto; bottom: auto; left: -999px; top: 0; width: 1px; height: 1px; animation: none; }
.v3d .mascot[hidden] { display: none; }
.v3d .mascot__btn { width: 100%; height: 100%; border-radius: 40px; }
.v3d .mascot__btn:focus-visible { outline: 3px dashed var(--yellow-600); outline-offset: 4px; }
.v3d .bubble { right: 18%; bottom: calc(96% + 24px); }
.v3d .snow-toggle { top: calc(var(--nav-h) + 12px); left: auto; right: max(16px, (100% - 1200px) / 2); background: rgba(255, 255, 255, .7); }
.webgl-note { display: none; }
.no-webgl .webgl-note { display: block; position: absolute; z-index: 3; left: 16px; right: 16px; bottom: 16px; text-align: center; margin: 0; background: #fff; color: var(--ink); padding: .6em 1em; border-radius: 12px; font-size: .9rem; }

/* ---------- Diorama ---------- */
.life3d { position: relative; width: 100%; max-width: 500px; aspect-ratio: 1; margin: 0 auto; }
.life3d::before {
  content: ""; position: absolute; left: 14%; right: 14%; bottom: 13%; height: 12%;
  border-radius: 50%; background: radial-gradient(closest-side, rgba(15, 61, 52, .3), transparent);
}
.life3d canvas { position: relative; width: 100%; height: 100%; display: block; cursor: grab; touch-action: pan-y; }
.life3d.is-drag canvas { cursor: grabbing; }
.life3d__hint {
  position: absolute; left: 50%; top: 3%; translate: -50% 0;
  display: inline-flex; align-items: center; gap: .45em;
  background: rgba(255, 255, 255, .85); color: var(--green);
  padding: .4em .85em; border-radius: 999px;
  font: 800 .78rem/1 var(--font-body);
  box-shadow: var(--shadow-sm);
  pointer-events: none; white-space: nowrap;
  transition: opacity .4s;
}
.life3d__hint svg { width: 16px; height: 16px; }
.life3d.is-drag .life3d__hint { opacity: 0; }

/* ---------- Mini-ilustracje ---------- */
canvas.mini { display: block; width: 100%; aspect-ratio: 22 / 17; }
.step__art canvas.mini { filter: drop-shadow(0 16px 18px rgba(15, 61, 52, .18)); }
.v3d .step__art { width: min(250px, 100%); }
.v3d .step:not(:last-child)::after { top: 76px; }
.loc canvas.mini { aspect-ratio: 24 / 16; border-radius: 18px; background: radial-gradient(ellipse at 50% 35%, #f1faf7, #d3efe6 75%); }
canvas.join-card__art { width: min(330px, 100%); aspect-ratio: 26 / 17; margin: -10px auto 4px; }
canvas.mini--note { width: 130px; height: 130px; aspect-ratio: 1; }
.v3d .note { grid-template-columns: 130px 1fr; }
.v3d .tip__icon { background: var(--facets), var(--mint-100); background-size: 60px 52px, auto; }
canvas.mini--icon { width: 48px; height: 48px; aspect-ratio: 1; }

/* ---------- Lupa: obrazy 3D ---------- */
.xray__svg.is-3d .xray-flat { display: none; }

/* ---------- Mapa 3D ---------- */
/* mapa może wyjść poza kolumnę treści w stronę prawej krawędzi ekranu (maks. 160 px);
   kontener tej sekcji nie może więc przycinać rysowania (content-visibility to robi) */
.points > .container { content-visibility: visible; }
.points__map { margin: 0 clamp(-160px, calc((1200px - 100vw) / 2 + 16px), 0px) 0 0; }
.map3d { margin: 0; }
.map3d__stage { position: relative; aspect-ratio: 16 / 10; }
.map3d__stage canvas { width: 100%; height: 100%; display: block; }
.map3d__labels { position: absolute; inset: 0; pointer-events: none; }
.map3d__label { position: absolute; left: 0; top: 0; white-space: nowrap; will-change: transform; }
.map3d__label.is-district { font: 900 10.5px/1 var(--font-body); letter-spacing: .18em; color: rgba(78, 64, 56, .62); }
.map3d__label.is-mark {
  font: 800 11px/1 var(--font-body); color: var(--ink);
  background: rgba(255, 253, 243, .88); padding: .3em .55em; border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
}
.map3d__pin {
  position: absolute; left: 0; top: 0;
  width: 40px; height: 52px; padding: 0;
  border: 0; border-radius: 20px;
  background: transparent; cursor: pointer;
}
.map3d__pin:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }
.map3d__compass {
  position: absolute; right: 10px; top: 6px;
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  border: 2px solid rgba(168, 147, 133, .7); color: var(--yellow);
  font: 900 .8rem/1 var(--font-body);
}
.map3d__cap { margin: 6px 0 0; text-align: center; font-size: .82rem; font-weight: 700; color: var(--brown-300); }
.no-webgl .map3d__stage { background: var(--brown-700); border-radius: 24px; }

/* ---------- Pogoda: ilustracja ogródka w przekroju ----------
   Elementy mrozu mają klasę .wf, odwilży .wt; przełącznik ustawia data-w na .weather. */
.weather__stage { position: relative; aspect-ratio: 16 / 10; border-radius: 22px; overflow: hidden; background: #dbe8ee; }
.weather__svg { display: block; width: 100%; height: 100%; }
.weather__svg .wf, .weather__svg .wt { transition: opacity .8s ease; }
.weather[data-w="frost"] .weather__svg .wt, .weather[data-w="thaw"] .weather__svg .wf { opacity: 0; }
.weather[data-w="thaw"] .weather__svg .wt { transition-delay: .15s; }
/* choinka zimą stoi w doniczce, w odwilż „schodzi” do dołka */
.weather__svg .wx-tree { transform: translateY(-34px); transition: transform 1s cubic-bezier(.6, -.2, .3, 1.3); }
.weather[data-w="thaw"] .weather__svg .wx-tree { transform: none; transition-delay: .2s; }
.weather__svg .wx-pot { transition: opacity .5s ease; }
.weather[data-w="thaw"] .weather__svg .wx-pot { transition-delay: .3s; }
/* termometr: słupek rośnie i zmienia kolor */
.weather__svg .wx-merc, .weather__svg .wx-bulb { fill: #5aa9d6; transition: fill .8s, transform 1s cubic-bezier(.34, 1.3, .6, 1); }
.weather__svg .wx-merc { transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(.32); }
.weather[data-w="thaw"] .weather__svg .wx-merc { transform: scaleY(.8); }
.weather[data-w="thaw"] .weather__svg .wx-merc, .weather[data-w="thaw"] .weather__svg .wx-bulb { fill: #f25f5c; }
/* wzgórza i daleki las zmieniają kolor */
.weather__svg .wx-hill1, .weather__svg .wx-hill2, .weather__svg .wx-far { transition: fill .9s; }
.weather__svg .wx-hill1 { fill: #e2edf2; }
.weather__svg .wx-hill2 { fill: #f1f6f8; }
.weather__svg .wx-far { fill: #9dbcb4; }
.weather[data-w="thaw"] .weather__svg .wx-hill1 { fill: #b7dfc2; }
.weather[data-w="thaw"] .weather__svg .wx-hill2 { fill: #9fd3ab; }
.weather[data-w="thaw"] .weather__svg .wx-far { fill: #4f9a72; }
.weather__svg .wx-txt { font-family: var(--font-head); font-weight: 800; }
.weather__svg .wx-temp { font-size: 22px; }
.weather__svg .wx-sign { font-size: 17px; letter-spacing: .02em; }
/* ruch: śnieg pada, słońce się obraca, kałuża faluje */
.weather__svg .wx-fall { animation: wxFall 9s linear infinite; }
@keyframes wxFall { to { transform: translateY(172px); } }
.weather__svg .wx-rays { transform-box: fill-box; transform-origin: center; animation: wxSpin 40s linear infinite; }
@keyframes wxSpin { to { transform: rotate(360deg); } }
.weather__svg .wx-ripple { transform-box: fill-box; transform-origin: center; animation: wxRipple 2.6s ease-out infinite; }
@keyframes wxRipple { from { transform: scale(.4); opacity: 1; } to { transform: scale(2.2); opacity: 0; } }

/* ---------- Finał 3D ---------- */
.final3d { overflow: hidden; padding-bottom: 0; }
.final3d.wave-top { overflow: visible; }
.final3d__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; }
.final3d .final__content { pointer-events: none; }
.final3d .final__content .btn, .final3d .final__content a { pointer-events: auto; }
.final3d__space { height: clamp(280px, 30vw, 380px); }
.final3d .final__moon { z-index: 0; }

/* ---------- FAQ: bombka 3D ---------- */
.has-bauble .v3d .acc__ico { background-image: var(--bauble-img); }

/* ---------- Okno i sukces ---------- */
.modal__head-img { display: block; width: 100%; height: 110px; object-fit: cover; background: linear-gradient(180deg, #dcf1ea, #a6decf); }
.success__img { display: block; width: 150px; height: 150px; margin: 0 auto 6px; transform-origin: 50% 90%; }
.success:not([hidden]) .success__img { animation: grow .9s .05s cubic-bezier(.34, 1.56, .64, 1) both; }

/* ---------- Responsywność ---------- */
@media (max-width: 1700px) {
  .hero3d__props { scale: .82; transform-origin: 0 100%; }
}
@media (max-width: 1180px) {
  .hero3d__props { display: none; }
}
/* tablet i telefon: napis, karta, a pod nią krasnal */
@media (max-width: 900px) {
  /* tablet i telefon: mapa na całą szerokość ekranu */
  .map3d { margin-inline: -16px; }
  .map3d__cap { padding-inline: 16px; }
  .hero3d__inner {
    width: min(640px, 100% - 32px);
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto 1fr;
    grid-template-areas: "brand" "card" "stage";
  }
  .v3d .hero__brand { text-align: center; }
  .v3d .pill { margin-left: 0; }
  .v3d .wordmark { --wm-w: min(420px, 84vw, 34vh); margin-inline: auto; }
  .hero3d__card { text-align: center; }
  .hero__lead, .hero__text { margin-inline: auto; }
  .hero__ctas { justify-content: center; }
  /* tablet i telefon: dymek po lewej stronie krasnala, ogonek w prawo */
  .v3d .bubble { right: calc(82% + 14px); bottom: 30%; max-width: min(220px, 62vw); padding: 9px 13px 10px; transform-origin: 110% 80%; }
  .v3d .bubble__text { font-size: .88rem; line-height: 1.28; }
  .v3d .bubble__label { font-size: .6rem; }
  .v3d .bubble__dots { margin-top: 6px; }
  .v3d .bubble__tail { top: auto; right: -22px; bottom: 12px; width: 26px; height: 22px; transform: rotate(-90deg) scaleX(-1); }
  .v3d .step:not(:last-child)::after { top: auto; }
}
@media (max-width: 640px) {
  /* niższy pasek i menu, żeby hero zmieściło się na ekranie telefonu */
  .v3d .bubble { bottom: 8%; } /* niski krasnal na telefonie: dymek przy jego dole, żeby nie wchodził na kartę */
  :root { --topbar-h: 50px; --nav-h: 62px; } /* main.js podaje dokładną wysokość paska */
  .topbar__link { padding: .5em .9em; }
  .hero3d { padding-top: var(--nav-h); padding-bottom: 14px; }
  /* „Pierwsza edycja we Wrocławiu” jest już w żółtym pasku, więc na telefonie bez plakietki */
  .v3d .pill { display: none; }
  .v3d .wordmark { --wm-w: min(290px, 76vw, 36vh); }
  .hero3d__card { border-radius: 22px; padding: 26px 16px 16px; }
  .hero3d h1 { font-size: clamp(1.5rem, 4.1vh, 1.7rem); }
  .hero__lead { font-size: .98rem; line-height: 1.42; }
  .hero__text { font-size: .9rem; line-height: 1.5; margin-bottom: 16px; }
  .hero__ctas { flex-direction: column; gap: 10px; }
  .hero__ctas .btn--lg { font-size: 1.04rem; padding: .85em 1.5em .78em; }
  .hero__ctas .link { font-size: .9rem; max-width: 18em; }
  .hero__info { font-size: .8rem; margin-top: 12px; }
  .v3d .note { grid-template-columns: 1fr; }
  canvas.mini--note { margin: 0 auto; }
  .map3d__compass { width: 30px; height: 30px; right: 12px; top: -10px; font-size: .7rem; }
  .map3d__label.is-district { font-size: 8.5px; }
  .map3d__label.is-mark { font-size: 9.5px; }
}