/* SterlingOak – uvodna scena (generira scripts/scena.mjs, ne mijenjati ručno) */

/* ---------- položaj: scena pokriva uvod, poravnata dolje i desno ---------- */

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}

.scene {
  position: absolute;
  right: 0;
  bottom: 0;
  width: auto;
  min-width: 100%;
  max-width: none;
  height: 100%;
  aspect-ratio: 1600 / 1320;
}

@media (max-width: 760px) {
  .scene {
    transform: translateX(6%);
  }
}

/* ---------- boje godišnjih doba ---------- */

.scene {
  --sky-0: #E2E2E2;
  --sky-1: #F2F1EF;
  --sky-2: #F5ECE3;
  --glow: #F0CFAD;
  --glow-o: .95;
  --hill-far: #D5D3D0;
  --far-trees: #C9C7C4;
  --hill-mid: #B9B7B4;
  --meadow-0: #9A9895;
  --meadow-1: #7E7C79;
  --fore: #6F6D6A;
  --grass: #6F6D6A;
  --trunk: #4F4239;
  --crown: #4F4239;
  --crown-rim: #5E5047;
  --crown-shade: #43372E;
  --shadow: rgba(80, 78, 75, .35);
  --puff: #BDB6AA;
  --setter-line: none;
}

[data-sezona="proljece"] .scene {
  --sky-0: #D9E1DF;
  --sky-1: #EEF2EE;
  --sky-2: #F1EFE3;
  --glow: #EADDB5;
  --glow-o: .8;
  --hill-far: #D0D6CB;
  --far-trees: #BCC6B2;
  --hill-mid: #B3BDA7;
  --meadow-0: #9FAA8F;
  --meadow-1: #848F75;
  --fore: #6E785F;
  --grass: #6E785F;
  --trunk: #4F4239;
  --crown: #62744B;
  --crown-rim: #8AA06A;
  --crown-shade: #4E5D3B;
  --shadow: rgba(70, 80, 60, .35);
  --puff: #AEB89E;
  --setter-line: none;
}

[data-sezona="ljeto"] .scene {
  --sky-0: #D3DFE8;
  --sky-1: #EFF1EC;
  --sky-2: #F6E8D0;
  --glow: #F6D29A;
  --glow-o: 1;
  --hill-far: #D4D3C3;
  --far-trees: #BFBFA6;
  --hill-mid: #B9B597;
  --meadow-0: #ADA47C;
  --meadow-1: #928962;
  --fore: #7A7353;
  --grass: #7A7353;
  --trunk: #4F4239;
  --crown: #4A5838;
  --crown-rim: #66784A;
  --crown-shade: #3A462C;
  --shadow: rgba(80, 72, 45, .4);
  --puff: #CFC3A0;
  --setter-line: none;
}

[data-sezona="jesen"] .scene {
  --sky-0: #E3DFDB;
  --sky-1: #F2EEE9;
  --sky-2: #F4E3D0;
  --glow: #EDB98A;
  --glow-o: .95;
  --hill-far: #D8D1C9;
  --far-trees: #C9B9A6;
  --hill-mid: #BEB2A5;
  --meadow-0: #A39684;
  --meadow-1: #877966;
  --fore: #6F6355;
  --grass: #6F6355;
  --trunk: #4A3B30;
  --crown: #8B4513;
  --crown-rim: #B7632A;
  --crown-shade: #6A3410;
  --shadow: rgba(80, 66, 50, .35);
  --puff: #BFB2A0;
  --setter-line: none;
}

[data-sezona="zima"] .scene {
  --sky-0: #CDD5DE;
  --sky-1: #E9EDF1;
  --sky-2: #F3F2F0;
  --glow: #E6E2DE;
  --glow-o: .6;
  --hill-far: #E4E8EC;
  --far-trees: #DDE3E9;
  --hill-mid: #D3D9DF;
  --meadow-0: #F4F6F8;
  --meadow-1: #E1E6EB;
  --fore: #D7DDE3;
  --grass: transparent;
  --trunk: #4A3F38;
  --crown: transparent;
  --crown-rim: transparent;
  --crown-shade: transparent;
  --shadow: rgba(110, 125, 140, .35);
  --puff: #FFFFFF;
  --setter-line: #B3BDC7;
}

.scene .sky-0 { stop-color: var(--sky-0); }
.scene .sky-1 { stop-color: var(--sky-1); }
.scene .sky-2 { stop-color: var(--sky-2); }
.scene .glow-0 { stop-color: var(--glow); stop-opacity: var(--glow-o); }
.scene .glow-1 { stop-color: var(--glow); stop-opacity: calc(var(--glow-o) * .45); }
.scene .glow-2 { stop-color: var(--sky-2); stop-opacity: 0; }
.scene .meadow-0 { stop-color: var(--meadow-0); }
.scene .meadow-1 { stop-color: var(--meadow-1); }
.scene .scn-hill-far { fill: var(--hill-far); }
.scene .scn-far-trees { fill: var(--far-trees); }
.scene .scn-hill-mid { fill: var(--hill-mid); }
.scene .scn-fore { fill: var(--fore); }
.scene .scn-grass { stroke: var(--grass); }
.scene .scn-trunk { fill: var(--trunk); }
.scene .scn-branches { stroke: var(--trunk); }
.scene .scn-snowcap { stroke: #FFFFFF; }
.scene .scn-crown { fill: var(--crown); }
.scene .scn-crown-rim { fill: var(--crown-rim); }
.scene .scn-crown-shade { fill: var(--crown-shade); }
[data-sezona="zima"] .scene .scn-crown-rim,
[data-sezona="zima"] .scene .scn-crown-shade { display: none; }
.scene .sun-rays { fill: #FBE7C2; opacity: .28; }

/* ---------- psi ---------- */

.scene .setter-coat { fill: url(#scn-belton); stroke: var(--setter-line); stroke-width: 1.2; }
.scene .setter-far { fill: #D9D3CC; stroke: var(--setter-line); stroke-width: 1.2; }
.scene .setter-mark { fill: #9A5A2E; }
.scene .dog-eye { fill: #2B211B; }
.scene .tongue { fill: #E06C7E; }
.scene .dog--red .coat { fill: #8B4513; }
.scene .dog--red .coat-far { fill: #6E3410; }
.scene .dog--black .coat { fill: #2A221D; }
.scene .dog--black .coat-far { fill: #17120F; }
.scene .dog--black .tan { fill: #B9783F; }
.scene .dog--black .dog-eye { fill: #4A3A2E; }
.scene .dog-shadow { fill: var(--shadow); }
.scene .puff { fill: var(--puff); opacity: 0; }
/* jesen: crveni jazavčar u ustima nosi list, pa mu jezik ne viri */
[data-sezona="jesen"] .scene .dog--red .tongue { display: none; }

/* ---------- vrijeme i odjeća: prikazuje se samo sloj za trenutno godišnje doba ---------- */

.scene .wx { display: none; }
[data-sezona="proljece"] .scene .wx--proljece,
[data-sezona="ljeto"] .scene .wx--ljeto,
[data-sezona="jesen"] .scene .wx--jesen,
[data-sezona="zima"] .scene .wx--zima { display: inline; }
[data-sezona="zima"] .scene .scn-grass { display: none; }

/* ---------- trk ---------- */

.scene {
  --run-from: -1400px;
  --run-to: 1000px;
  --run-dur: 10s;
  --run-delay: -5.8s;
}

@media (max-width: 760px) {
  .scene {
    --run-from: -560px;
    --run-to: 900px;
    --run-dur: 6s;
    --run-delay: -2.3s;
  }
}

.scene .pack {
  animation: scn-run var(--run-dur) linear var(--run-delay) infinite;
}

/* svaki pas malo prestiže ili zaostaje */
.scene .runner--setter { --gait: .46s; --swing: 30deg; --hop: -9px; --jx: 34px; animation: scn-jostle 2.7s ease-in-out infinite alternate; }
.scene .runner--red { --gait: .27s; --swing: 34deg; --hop: -6px; --jx: 55px; animation: scn-jostle 1.9s ease-in-out -.7s infinite alternate; }
.scene .runner--black { --gait: .25s; --swing: 34deg; --hop: -6px; --jx: 45px; animation: scn-jostle 2.3s ease-in-out -1.5s infinite alternate; }

/* galop: prednje noge zajedno, stražnje zajedno; u skoku su ispružene */
.scene .leg {
  transform-box: fill-box;
  transform-origin: 50% 6%;
  animation: scn-gallop var(--gait) ease-in-out infinite;
}

.scene .leg--hind { animation-delay: calc(var(--gait) / -2); }
.scene .leg--front.leg--far { animation-delay: calc(var(--gait) * -.1); }
.scene .leg--hind.leg--far { animation-delay: calc(var(--gait) * -.6); }

.scene .dog__bounce { animation: scn-hop var(--gait) ease-in-out infinite; }
.scene .dog__body { transform-box: fill-box; transform-origin: 50% 50%; animation: scn-pitch var(--gait) ease-in-out infinite; }
.scene .ear { transform-box: fill-box; transform-origin: 50% 8%; animation: scn-ear var(--gait) ease-in-out infinite; }
.scene .tongue { transform-box: fill-box; transform-origin: 50% 0; animation: scn-tongue calc(var(--gait) / 2) ease-in-out infinite alternate; }
.scene .scarf-tail { transform-box: fill-box; transform-origin: 100% 40%; animation: scn-scarf .28s ease-in-out infinite alternate; }
.scene .dog-shadow { transform-box: fill-box; transform-origin: 50% 50%; animation: scn-shadow var(--gait) ease-in-out infinite; }
.scene .puff { transform-box: fill-box; transform-origin: 50% 50%; animation: scn-puff var(--gait) ease-out infinite; }
.scene .puff--2 { animation-delay: calc(var(--gait) * -.33); }
.scene .puff--3 { animation-delay: calc(var(--gait) * -.66); }

@keyframes scn-run {
  from { transform: translateX(var(--run-from)); }
  to { transform: translateX(var(--run-to)); }
}

@keyframes scn-jostle {
  from { transform: translateX(calc(var(--jx) * -1)); }
  to { transform: translateX(var(--jx)); }
}

@keyframes scn-gallop {
  0%, 100% { transform: rotate(calc(var(--swing) * -1)); }
  50% { transform: rotate(var(--swing)); }
}

@keyframes scn-hop {
  0%, 100% { transform: translateY(var(--hop)); }
  50% { transform: translateY(0); }
}

@keyframes scn-pitch {
  0%, 100% { transform: rotate(-2deg); }
  50% { transform: rotate(2.5deg); }
}

@keyframes scn-ear {
  0%, 100% { transform: rotate(48deg); }
  50% { transform: rotate(8deg); }
}

@keyframes scn-tongue {
  from { transform: rotate(-14deg); }
  to { transform: rotate(12deg); }
}

@keyframes scn-scarf {
  from { transform: rotate(-7deg) scaleY(1); }
  to { transform: rotate(5deg) scaleY(.75); }
}

@keyframes scn-shadow {
  0%, 100% { transform: scaleX(.72); opacity: .55; }
  50% { transform: scaleX(1); opacity: 1; }
}

@keyframes scn-puff {
  0% { transform: translate(0, 0) scale(.3); opacity: .85; }
  100% { transform: translate(-28px, -8px) scale(1.6); opacity: 0; }
}

/* ---------- čestice ---------- */

.scene .snow-sway { animation: scn-sway 5s ease-in-out infinite alternate; }
.scene .snow-layer--far { animation: scn-fall 26s linear infinite; }
.scene .snow-layer--near { animation: scn-fall 13s linear infinite; }
.scene .rain-layer { animation: scn-rain .95s linear infinite; }
.scene .fog--a { animation: scn-fog 70s linear -20s infinite; }
.scene .fog--b { animation: scn-fog 95s linear -60s infinite; }
.scene .sun-rays { transform-box: fill-box; transform-origin: 50% 50%; animation: scn-spin 90s linear infinite; }

.scene .leaf { animation: scn-leaf var(--dur) linear var(--delay) infinite; }
.scene .leaf__spin { transform-box: fill-box; transform-origin: 50% 50%; animation: scn-leaf-spin var(--spin) ease-in-out infinite alternate; }
.scene .leaf--1 { --dx: -143px; --dy: 402px; --dur: 10.9s; --delay: -12.2s; --spin: 1.5s; }
.scene .leaf--2 { --dx: -165px; --dy: 307px; --dur: 12.9s; --delay: -2.9s; --spin: 2.3s; }
.scene .leaf--3 { --dx: -205px; --dy: 374px; --dur: 12.1s; --delay: -0.5s; --spin: 1.7s; }
.scene .leaf--4 { --dx: -310px; --dy: 849px; --dur: 8.1s; --delay: -8.4s; --spin: 1.4s; }
.scene .leaf--5 { --dx: -22px; --dy: 425px; --dur: 12.8s; --delay: -3.2s; --spin: 1.5s; }
.scene .leaf--6 { --dx: 38px; --dy: 409px; --dur: 9.6s; --delay: -10.5s; --spin: 2.3s; }
.scene .leaf--7 { --dx: -197px; --dy: 372px; --dur: 13s; --delay: -7s; --spin: 1.7s; }
.scene .leaf--8 { --dx: -183px; --dy: 901px; --dur: 8.6s; --delay: -2.6s; --spin: 2.1s; }
.scene .leaf--9 { --dx: 18px; --dy: 415px; --dur: 12.1s; --delay: -12.3s; --spin: 2s; }
.scene .leaf--10 { --dx: -65px; --dy: 355px; --dur: 12s; --delay: -3.3s; --spin: 2.1s; }
.scene .leaf--11 { --dx: -78px; --dy: 421px; --dur: 11.1s; --delay: -9.8s; --spin: 1.4s; }
.scene .leaf--12 { --dx: -111px; --dy: 967px; --dur: 11.6s; --delay: -6.1s; --spin: 2.4s; }
.scene .leaf--13 { --dx: -273px; --dy: 463px; --dur: 9.6s; --delay: -7.5s; --spin: 2.3s; }
.scene .leaf--14 { --dx: -195px; --dy: 398px; --dur: 9.8s; --delay: -0.4s; --spin: 2.5s; }
.scene .leaf--15 { --dx: -164px; --dy: 391px; --dur: 9.4s; --delay: -7.1s; --spin: 1.6s; }
.scene .leaf--16 { --dx: -30px; --dy: 902px; --dur: 8.9s; --delay: -5s; --spin: 2.5s; }
.scene .leaf--17 { --dx: -267px; --dy: 487px; --dur: 8.5s; --delay: -11.1s; --spin: 1.8s; }
.scene .leaf--18 { --dx: -180px; --dy: 462px; --dur: 13s; --delay: -2.1s; --spin: 1.7s; }

.scene .butterfly--a { animation: scn-flutter 13s ease-in-out infinite; }
.scene .butterfly--b { animation: scn-flutter 17s ease-in-out -6s infinite reverse; }
.scene .butterfly__wings { transform-box: fill-box; transform-origin: 50% 50%; animation: scn-flap .2s ease-in-out infinite alternate; }

@keyframes scn-sway { from { transform: translateX(-14px); } to { transform: translateX(14px); } }
@keyframes scn-fall { to { transform: translateY(1320px); } }
@keyframes scn-rain { to { transform: translate(-352px, 1320px); } }
@keyframes scn-fog { from { transform: translateX(-1000px); } to { transform: translateX(1700px); } }
@keyframes scn-spin { to { transform: rotate(360deg); } }
@keyframes scn-leaf {
  0% { transform: translate(0, 0); opacity: 0; }
  6%, 88% { opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)); opacity: 0; }
}
@keyframes scn-leaf-spin {
  from { transform: rotate(-50deg) translateX(-12px); }
  to { transform: rotate(80deg) translateX(12px); }
}
@keyframes scn-flutter {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(70px, -40px); }
  45% { transform: translate(150px, -10px); }
  70% { transform: translate(90px, 28px); }
}
@keyframes scn-flap { to { transform: scaleX(.25); } }

/* ---------- zaustavljanje ---------- */

/* gumb za zaustavljanje, i kad uvod nije na ekranu (štedi bateriju) */
.scene.is-paused,
.scene.is-paused *,
.scene.is-offscreen,
.scene.is-offscreen * {
  animation-play-state: paused !important;
}

/* bez pokreta: psi stoje, snijeg i lišće miruju, kiše nema */
@media (prefers-reduced-motion: reduce) {
  .scene,
  .scene * {
    animation: none !important;
  }

  .scene .rain-layer,
  .scene .puffs,
  .hero .scene-toggle {
    display: none;
  }
}

.scene-toggle {
  position: absolute;
  right: var(--gutter);
  bottom: 1rem;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--color-line);
  border-radius: 50%;
  background: rgba(249, 249, 249, 0.8);
  color: var(--color-text);
  cursor: pointer;
}

.scene-toggle:hover {
  background: var(--color-bg);
}

.scene-toggle svg {
  width: 1.1rem;
  height: 1.1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.scene-toggle__play { display: none; fill: currentColor; }
.scene-toggle[aria-pressed="true"] .scene-toggle__play { display: inline; }
.scene-toggle[aria-pressed="true"] .scene-toggle__pause { display: none; }