/* SWISS Instalacije: page scene for subpages (usluge, o nama, kontakt, service pages).
   One static drawing that is painted once, one small layer with the line that fills while
   the visitor scrolls. No pinning, no extra scroll length. Without JavaScript, and with
   reduced motion, the finished state is shown. CSP safe: the script only writes CSSOM. */

.pscene {
  background: none; /* the scene never paints its own background, so it always matches the page */
  --ps-w: 3;        /* width of the line that fills */
  --ps-bw: 2.2;     /* width of the beads */
  --ps-gap: 12;     /* distance between beads */
  --ps-hot: var(--brand, #c2272b);
  --ps-cold: #7fb3d5;
  --ps-stale: var(--text-subtle, #8a8a8a);

  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  contain: layout paint;
}

.pscene__art,
.pscene__fx {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

/* ---------- the drawing, same language as the house scene ---------- */

.es-edge { fill: none; stroke: #4a4a4a; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }
.es-thin { fill: none; stroke: #2e2e2e; stroke-width: 1; stroke-linecap: round; }
.es-furn { fill: #222222; stroke: #2e2e2e; stroke-width: 1.25; stroke-linejoin: round; }
.es-timber { fill: none; stroke: #2c2c2c; stroke-width: 3; stroke-linecap: round; }
.es-glass { fill: #1f262b; stroke: #4a4a4a; stroke-width: 1; }
.es-eq { fill: #1e1e1e; stroke: #575757; stroke-width: 1.5; stroke-linejoin: round; }
.es-eq-line { fill: none; stroke: #353535; stroke-width: 1; stroke-linecap: round; }
.es-grille { fill: none; stroke: #575757; stroke-width: 3; stroke-linecap: round; }
.es-blade, .es-hub { fill: #575757; }
.es-ufh-idle { fill: #151515; stroke: #3b3b3b; stroke-width: 1.5; }
.es-pipe { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.es-pipe--duct { stroke-width: 6; stroke-linecap: butt; }
.es-pipe--base { stroke: #3b3b3b; }
.es-fan { transform-box: fill-box; transform-origin: center; }

/* the shared world knows seasons through these variables */
.es-v-sun { display: var(--es-sun, none); }
.es-v-moon { display: var(--es-moon, none); }
.es-v-homelights { display: var(--es-homelights, none); }
.es-v-green-tree { display: var(--es-green-tree, none); }
.es-v-autumn-tree { display: var(--es-autumn-tree, none); }
.es-v-spring-tree { display: var(--es-spring-tree, none); }
.es-v-winter-tree { display: var(--es-winter-tree, none); }
.es-v-snow-ground { display: var(--es-snow-ground, none); }
.es-v-snow-caps { display: var(--es-snow-caps, none); }
.es-v-puddles { display: var(--es-puddles, none); }
.es-v-ground-leaves { display: var(--es-ground-leaves, none); }
.es-v-lamplight { display: var(--es-lamplight, none); }
.es-v-glow-warm { display: var(--es-glow-warm, none); opacity: var(--es-glow-warm-o, 1); }
.es-v-glow-cool { display: var(--es-glow-cool, none); opacity: var(--es-glow-cool-o, 1); }
.es-v-hp-blades { display: var(--es-hp-blades, inline); }
.es-v-ac-blades { display: var(--es-ac-blades, inline); }

/* ---------- the line that fills, the beads and the status light ---------- */

.ps-fill {
  fill: none;
  stroke-width: var(--ps-w);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1 1;
  stroke-dashoffset: 0;
}

.ps-fill--hot { stroke: var(--ps-hot); }
.ps-fill--cold { stroke: var(--ps-cold); }
.ps-fill--stale { stroke: var(--ps-stale); }
.ps-fill--duct { stroke-width: calc(var(--ps-w) * 2); stroke-linecap: butt; }

.ps-flow {
  fill: none;
  stroke: rgba(242, 242, 240, 0.85);
  stroke-width: var(--ps-bw);
  stroke-dasharray: 0.1 var(--ps-gap);
  stroke-linecap: round;
  opacity: 0;
}

.ps-step.is-on .ps-flow { opacity: 1; }

.ps-dot { fill: var(--ps-hot); stroke: var(--ps-hot); stroke-width: 1.5; opacity: 0; }
.ps-step.is-on .ps-dot { opacity: 1; }

.ps-fan--hot .es-blade, .ps-fan--hot .es-hub { fill: #dd585c; }
.ps-fan--cold .es-blade, .ps-fan--cold .es-hub { fill: var(--ps-cold); }

.ps-led { fill: var(--ps-hot); }
.ps-glow { opacity: 0; }
.pscene.is-done .ps-glow { opacity: 1; }

/* lights in the drawing come on step by step; without the script they are simply on */
.pscene.is-enhanced .es-lit,
.pscene.is-enhanced .ps-lit { opacity: 0; transition: opacity 0.35s ease-out; }
.pscene.is-enhanced.is-done-2 .l1,
.pscene.is-enhanced.is-done-2 .l2 { opacity: 1; }
.pscene.is-enhanced.is-done-3 .l1,
.pscene.is-enhanced.is-done-3 .l2,
.pscene.is-enhanced.is-done-3 .l3,
.pscene.is-enhanced.is-done-3 .l4,
.pscene.is-enhanced.is-done-3 .l6 { opacity: 1; }
.pscene.is-enhanced.is-done .es-lit,
.pscene.is-enhanced.is-done .ps-lit { opacity: 1; }

/* the whole house lights up once its system is running */
.pscene[data-done="1"] .pscene__art,
.pscene[data-done="2"] .pscene__art { --es-glow-warm: inline; --es-glow-warm-o: 0.55; }
.pscene[data-done="3"] .pscene__art,
.pscene[data-done="4"] .pscene__art {
  --es-glow-warm: inline; --es-glow-warm-o: 0.55;
  --es-glow-cool: inline; --es-glow-cool-o: 0.5;
}

/* ---------- page hero: the scene fills the whole band, the text sits on top ---------- */

.page-hero {
  position: relative;
  display: grid;
  align-items: center;
  min-height: min(72vh, 620px);
  overflow: hidden;
}

.page-hero__scene {
  position: absolute;
  inset: 0;
}

.page-hero .pscene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
}

/* keeps the text readable where it crosses the drawing */
.page-hero__scene::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--bg, #151515) 0%, var(--bg, #151515) 26%, rgba(21, 21, 21, 0) 64%);
  pointer-events: none;
}

.page-hero__text {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 72px 24px;
}

.page-hero__text > * { max-width: 34rem; }

@media (max-width: 999px) {
  .page-hero {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
  }

  .page-hero__scene {
    position: relative;
    inset: auto;
    width: 100%;
    height: min(38vh, 300px);
  }

  .page-hero__scene::after {
    background: linear-gradient(var(--bg, #151515), rgba(21, 21, 21, 0) 16%, rgba(21, 21, 21, 0) 76%, var(--bg, #151515));
  }

  .page-hero__text { padding: 10px 16px 36px; }
  .page-hero__text > * { max-width: none; }
}

/* ---------- the map on the contact page ---------- */

.pscene--map { --ps-w: 5; --ps-bw: 3.4; --ps-gap: 18; }
.ps-block { fill: #ffffff; fill-opacity: 0.022; }
.ps-road { fill: none; stroke: #ffffff; stroke-opacity: 0.055; stroke-width: 12; stroke-linecap: round; }
.ps-river { fill: none; stroke: #7fb3d5; stroke-opacity: 0.12; stroke-width: 20; stroke-linecap: round; }
.ps-house { fill: #ffffff; fill-opacity: 0.05; }
.ps-pin { fill: #2f2f2f; stroke: #575757; stroke-width: 2; transition: fill 0.35s ease-out, stroke 0.35s ease-out; }
.pscene.is-done .ps-pin { fill: var(--ps-hot); stroke: var(--ps-hot); }
.ps-pin-ring { fill: none; stroke: var(--ps-hot); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; }

/* ---------- motion ---------- */

@media (prefers-reduced-motion: no-preference) {
  .pscene.is-enhanced .ps-step.is-on .ps-flow { animation: ps-flow 0.9s steps(14) infinite; }
  .pscene.is-enhanced .ps-step.is-on .ps-fill { animation: ps-blink 0.34s steps(1) 2; }
  .pscene.is-enhanced .ps-step.is-on .ps-fan { animation: ps-spin 1.8s steps(27) infinite; }
  .pscene.is-enhanced:not(.is-done) .ps-led { animation: ps-led 0.8s steps(1) infinite; }
  .pscene.is-enhanced.is-done .ps-pin-ring { animation: ps-pulse 2.4s steps(24) infinite; }
}

.pscene.is-offscreen *,
.pscene.is-offscreen *::before,
.pscene.is-offscreen *::after { animation-play-state: paused !important; }

@keyframes ps-flow { to { stroke-dashoffset: calc((var(--ps-gap) + 0.1) * -1); } }
@keyframes ps-blink { 0%, 49% { opacity: 0.3; } 50%, 100% { opacity: 1; } }
@keyframes ps-spin { to { transform: rotate(360deg); } }
@keyframes ps-led { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0.2; } }
@keyframes ps-pulse { 0% { transform: scale(0.6); opacity: 0.7; } 100% { transform: scale(1.8); opacity: 0; } }