/* ── Droga do harmonii ─────────────────────────────────────────────── */

:root{
  --cold-a:#2E3338;
  --cold-b:#3B434A;
  --warm-a:#F5EFE6;
  --warm-b:#EAE0D2;

  --ink-cold:#C2CBD2;
  --ink-warm:#333A32;
  --fg-cold:#E8ECEF;
  --fg-warm:#2E3338;

  --sage:#7C9473;
  --terra:#C4703F;

  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}

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

html{scroll-behavior:smooth}

body{
  margin:0;
  font-family:var(--sans);
  background:var(--cold-a);
  -webkit-font-smoothing:antialiased;
}

/* ── Rusztowanie scrollowe ─────────────────────────────────────────── */

.scrolly{
  position:relative;
  height:420vh;
}

.stage{
  position:sticky;
  top:0;
  height:100vh;
  height:100svh;
  overflow:hidden;
  display:flex;
  flex-direction:column;

  /* jedna zmienna niesie całe przejście nastroju */
  --ink:color-mix(in oklab, var(--ink-cold), var(--ink-warm) calc(var(--warm) * 100%));
  --fg: color-mix(in oklab, var(--fg-cold),  var(--fg-warm)  calc(var(--warm) * 100%));
}

/* ── Tło ───────────────────────────────────────────────────────────── */

.bg{
  position:absolute;
  inset:0;
  pointer-events:none;
}
.bg-cold{background:linear-gradient(170deg,var(--cold-a) 0%,var(--cold-b) 100%)}
.bg-warm{
  background:linear-gradient(170deg,var(--warm-a) 0%,var(--warm-b) 100%);
  opacity:var(--warm);
}
/* Ciepłe światło, które wychodzi razem ze słońcem */
.bg-sun{
  background:radial-gradient(circle at 58% 26%,
             rgba(224,164,92,.42) 0%, rgba(224,164,92,.14) 38%, transparent 62%);
  opacity:var(--sun,0);
}

/* ── Teksty ────────────────────────────────────────────────────────── */

.copy{
  position:relative;
  z-index:2;
  flex:0 0 auto;
  padding:clamp(2rem,6vh,4.5rem) clamp(1.25rem,5vw,3rem) 0;
  display:grid;
}

.act-copy{
  grid-area:1/1;
  max-width:34rem;
  margin-inline:auto;
  text-align:center;
  color:var(--fg);
  opacity:0;
  will-change:opacity,transform;
}

.act-copy h2{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(1.6rem,4.4vw,2.9rem);
  line-height:1.14;
  letter-spacing:-0.015em;
  margin:0 0 .7em;
  text-wrap:balance;
}

.act-copy p{
  margin:0;
  font-size:clamp(.95rem,1.9vw,1.1rem);
  line-height:1.6;
  opacity:.82;
  text-wrap:pretty;
}

.act-copy em{
  font-style:normal;
  color:var(--sage);
  font-weight:600;
}

.cta{
  display:inline-block;
  margin-top:1.6em;
  padding:1em 1.9em;
  border-radius:999px;
  background:var(--terra-deep,#A65B2F);   /* 4.80:1 dla #FFF8F2 */
  color:#FFF8F2;
  font-size:clamp(.9rem,1.8vw,1rem);
  font-weight:600;
  letter-spacing:.01em;
  text-decoration:none;
  box-shadow:0 6px 20px -8px rgba(196,112,63,.9);
  transition:transform .18s ease, box-shadow .18s ease;
}
.cta:hover,.cta:focus-visible{
  transform:translateY(-2px);
  box-shadow:0 10px 26px -8px rgba(196,112,63,.95);
}

/* ── Scena ─────────────────────────────────────────────────────────── */

.scene{
  position:relative;
  z-index:1;
  flex:1 1 auto;
  min-height:0;
}

#scene{
  display:block;
  width:100%;
  height:100%;
}

/* Wąski, wysoki ekran: gdyby scena dostała całą resztę wysokości, kadr
   musiałby zmieścić szerokość trzech postaci w pionowym prostokącie i
   sylwetki utonęłyby w niebie. Dostaje więc własny pas przy dole. */
@media (max-width: 720px){
  .scene{flex:0 0 clamp(10rem, 32svh, 17rem)}
  .copy{margin-block:auto}   /* tekst centruje się w tym, co zostało */
}

#bg-lines path{
  fill:none;
  stroke:var(--ink);
  stroke-width:1.6;
  stroke-linecap:round;
}

#ground{
  stroke:var(--ink);
  stroke-width:2.2;
  opacity:.3;
}

.hill,.grass{
  fill:none;
  stroke:var(--ink);
  stroke-linecap:round;
}
.hill{stroke-width:2.2;opacity:.18}
.grass{stroke-width:2.4;opacity:.3}

.limb{
  fill:none;
  stroke:var(--ink);
  stroke-width:5.4;
  stroke-linecap:round;
  stroke-linejoin:round;
}
/* dalsza para łap — lekko wyblakła, żeby czytać głębię */
.dog-far{opacity:.4}
.eye{fill:var(--ink);stroke:none}
.treat{fill:var(--terra);stroke:none}

#leash{
  fill:none;
  stroke:var(--ink);
  stroke-width:3.4;
  stroke-linecap:round;
}

/* Bodźce: krótkie, ostre, migoczące — mają kłuć, nie zdobić */
.stim{
  fill:none;
  stroke:var(--terra);
  stroke-width:3.4;
  stroke-linecap:round;
}

/* Dymek: kontur jak sylwetki, treść w kolorze spokoju */
.speech-box{
  fill:none;
  stroke:var(--ink);
  stroke-width:3.4;
  stroke-linejoin:round;
}
.speech-line{
  fill:none;
  stroke:var(--sage);
  stroke-width:5;
  stroke-linecap:round;
  stroke-dasharray:1;
}

/* Słońce i ptaki — cieplejsze niż kreska sylwetek */
.sun-disc{
  fill:none;
  stroke:var(--terra);
  stroke-width:3.4;
  opacity:.6;
}
.sun-ray{
  fill:none;
  stroke:var(--terra);
  stroke-width:3;
  stroke-linecap:round;
  opacity:.45;
}
.bird{
  fill:none;
  stroke:var(--ink);
  stroke-width:2.6;
  stroke-linecap:round;
  opacity:.35;
}

/* Myśl nad właścicielem — cieńsza niż sylwetka, żeby nie konkurowała */
.glyph{
  fill:none;
  stroke:var(--ink);
  stroke-width:4;
  stroke-linecap:round;
}
.glyph-dot{fill:var(--ink);stroke:none}

/* ── Wskaźnik postępu ──────────────────────────────────────────────── */

.dots{
  position:absolute;
  z-index:3;
  right:clamp(.9rem,2.4vw,2rem);
  top:50%;
  transform:translateY(-50%);
  margin:0;padding:0;
  list-style:none;
  display:grid;
  gap:.7rem;
}
.dot{
  width:7px;height:7px;
  border-radius:50%;
  background:var(--fg);
  opacity:.22;
  transition:opacity .35s ease,transform .35s ease;
}
.dot.is-on{opacity:.85;transform:scale(1.5)}

/* ── Bez animacji ──────────────────────────────────────────────────── */

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

  .scrolly{height:auto}

  /* zostaje flex-column, więc scena może przeskoczyć nad teksty */
  .stage{
    position:static;
    height:auto;
    overflow:visible;
  }

  .scene{order:-1}

  .bg{position:fixed}

  .copy{
    display:block;
    padding-block:clamp(2.5rem,8vh,5rem);
  }

  .act-copy{
    opacity:1 !important;
    transform:none !important;
    pointer-events:auto !important;
    padding-block:clamp(1.5rem,5vh,3rem);
  }

  .scene{height:min(62vh,26rem);flex:none}

  .dots{display:none}

  .cta{transition:none}
  .cta:hover,.cta:focus-visible{transform:none}
}