/* SWISS Instalacije: hero scroll scene "kuća kroz godinu", version 3.
   Built for phones: every shot is a static drawing that is painted once. Scrolling
   changes only transform and opacity of whole layers, which the GPU handles. The only
   repainting parts are small overlays (the running installation) and the weather
   sheets, and they animate only while their shot is on screen.
   Load after the theme stylesheet. The script sets only attributes and CSSOM values,
   which the strict CSP allows. */

.energy {
  --es-top: 76px;        /* height of the sticky header on desktop */
  --es-track: 450vh;     /* scroll length of the whole scene */
  --es-bg: var(--bg, #151515);
  --es-surface: var(--surface-1, #1b1b1b);
  --es-line: var(--line, #2a2a2a);
  --es-text: var(--text, #f2f2f0);
  --es-muted: var(--text-muted, #a3a3a3);
  --es-subtle: var(--text-subtle, #8a8a8a);
  --es-hot: var(--brand, #c2272b);
  --es-hot-soft: var(--brand-text, #dd585c);
  --es-focus: var(--focus, #f2f2f0);
  --es-cold: #7fb3d5;    /* illustration only, never for text */
  --es-edge: #4a4a4a;
  --es-idle: #3b3b3b;

  position: relative;
  height: calc(100vh - var(--es-top) + var(--es-track));
  height: calc(100svh - var(--es-top) + var(--es-track));
  background: var(--es-bg);
  color: var(--es-text);
}

.energy__defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.energy__stage {
  position: sticky;
  top: var(--es-top);
  height: calc(100vh - var(--es-top));
  height: calc(100svh - var(--es-top));
  overflow: hidden;
}

/* ---------- scene layers ---------- */

.energy__visual {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 34%;
  overflow: hidden;
  background: var(--es-bg);
  contain: strict;
}

.energy__skies,
.energy__weather,
.energy__shots,
.energy__sky,
.es-wx,
.energy__shot,
.energy__shot > svg {
  position: absolute;
  inset: 0;
}

.energy__shot > svg,
.energy__facade-art {
  display: block;
  width: 100%;
  height: 100%;
}

.energy__sky,
.es-wx {
  opacity: 0;
}

.energy__sky:not(.is-on),
.es-wx:not(.is-on) {
  display: none;
}

.energy__sky[data-on~="0"],
.es-wx[data-on~="0"] {
  opacity: 1;
}

.energy__sky--0 { background: radial-gradient(ellipse 72% 70% at 58% 40%, #2b2121, rgba(21, 21, 21, 0) 74%); }
.energy__sky--1 { background: radial-gradient(ellipse 72% 70% at 58% 40%, #1b222b, rgba(21, 21, 21, 0) 74%); }
.energy__sky--2 { background: radial-gradient(ellipse 72% 70% at 58% 40%, #1b2424, rgba(21, 21, 21, 0) 74%); }
.energy__sky--3 { background: radial-gradient(ellipse 72% 70% at 58% 40%, #2e231c, rgba(21, 21, 21, 0) 74%); }
.energy__sky--4 { background: radial-gradient(ellipse 72% 70% at 58% 40%, #27201b, rgba(21, 21, 21, 0) 74%); }
.energy__sky--5 { background: radial-gradient(ellipse 72% 70% at 58% 40%, #191c25, rgba(21, 21, 21, 0) 74%); }

/* shots are 12% larger than the box, so sliding them never shows an edge.
   Only the shots on screen get their own layer, so a phone keeps far less in memory. */
.energy__shot {
  inset: -6%;
}

.energy__shot.is-active {
  will-change: transform, opacity;
}

.energy__shot:not(.energy__shot--s0) {
  visibility: hidden;
  opacity: 0;
}

.energy__shot.is-active .energy__fx {
  will-change: transform;
}

.energy__facade {
  position: absolute;
  inset: 0;
  overflow: hidden;
  will-change: transform;
}

.energy__facade-art {
  will-change: transform;
}

.energy__scan {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -1px;
  width: 2px;
  background: linear-gradient(rgba(221, 88, 92, 0), #dd585c 20%, #dd585c 80%, rgba(221, 88, 92, 0));
  box-shadow: 0 0 22px 6px rgba(194, 39, 43, 0.25);
  opacity: 0;
}

/* soft edges so the scene melts into the page */
.energy__visual::before,
.energy__visual::after {
  content: "";
  position: absolute;
  z-index: 1;
  pointer-events: none;
}

.energy__visual::before {
  top: 0;
  bottom: 0;
  left: 0;
  width: 26%;
  background: linear-gradient(90deg, var(--es-bg), rgba(21, 21, 21, 0));
}

.energy__visual::after {
  inset: 0;
  background: linear-gradient(var(--es-bg), rgba(21, 21, 21, 0) 12%, rgba(21, 21, 21, 0) 88%, var(--es-bg));
}

/* ---------- what each shot shows of the shared drawing ---------- */

.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); }

.energy__shot--s0 { --es-green-tree: inline; --es-homelights: inline; --es-lamplight: inline; --es-hp-blades: none; }
.energy__shot--s1 { --es-winter-tree: inline; --es-snow-ground: inline; --es-snow-caps: inline; --es-lamplight: inline; --es-glow-warm: inline; --es-hp-blades: none; }
.energy__shot--s2 { --es-spring-tree: inline; --es-puddles: inline; --es-hp-blades: none; }
.energy__shot--s3 { --es-green-tree: inline; --es-sun: inline; --es-glow-cool: inline; --es-ac-blades: none; }
.energy__shot--s4 { --es-autumn-tree: inline; --es-ground-leaves: inline; }
.energy__shot--s5 {
  --es-green-tree: inline; --es-moon: inline; --es-homelights: inline; --es-lamplight: inline;
  --es-glow-warm: inline; --es-glow-warm-o: 0.55; --es-glow-cool: inline; --es-glow-cool-o: 0.55;
  --es-hp-blades: none; --es-ac-blades: none;
}

/* ---------- drawing styles ---------- */

.es-edge { fill: none; stroke: var(--es-edge); 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: var(--es-edge); 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: var(--es-idle); 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: var(--es-idle); }
.es-pipe--fill { stroke-dasharray: 1 1; stroke-dashoffset: 0; }
.es-pipe--hot { stroke: var(--es-hot); }
.es-pipe--cold { stroke: var(--es-cold); }
.es-pipe--stale { stroke: var(--es-subtle); }

.es-pipe--flow {
  stroke: rgba(242, 242, 240, 0.85);
  stroke-width: 2.2;
  stroke-dasharray: 0.1 12;
  opacity: 0;
}

.es-pipe--flow.es-pipe--duct {
  stroke-width: 3.2;
  stroke-dasharray: 0.1 13;
  stroke-linecap: round;
}

.energy__shot.is-flowing .es-pipe--flow { opacity: 1; }

.es-fan { transform-box: fill-box; transform-origin: center; }
.es-fan--hot .es-blade, .es-fan--hot .es-hub { fill: var(--es-hot-soft); }
.es-fan--cold .es-blade, .es-fan--cold .es-hub { fill: var(--es-cold); }

.es-ufh-dot { fill: var(--es-hot); stroke: var(--es-hot); stroke-width: 1.5; }
.energy.is-enhanced .es-ufh-dot:not(.is-on) { display: none; }

.es-air, .es-vair, .es-shimmer, .es-drop, .es-haze path { fill: none; stroke-linecap: round; }
.es-air { stroke: var(--es-cold); stroke-width: 1.5; stroke-dasharray: 4 7; }
.es-vair { stroke-width: 1.5; stroke-dasharray: 4 7; }
.es-vair--in { stroke: var(--es-cold); }
.es-vair--out { stroke: var(--es-subtle); }
.es-shimmer { stroke: var(--es-hot-soft); stroke-width: 1.25; stroke-dasharray: 5 9; }
.es-drop { stroke: var(--es-cold); stroke-width: 1.5; }
.es-haze path { stroke: var(--es-hot-soft); stroke-width: 1.25; stroke-dasharray: 6 10; opacity: 0.45; }
.es-tank-fill { opacity: 0.7; }
.es-ripple { fill: none; stroke: var(--es-cold); stroke-width: 1; opacity: 0; transform-box: fill-box; transform-origin: center; }
.es-vapor circle { fill: #8f989f; opacity: 0; transform-box: fill-box; transform-origin: center; }

/* weather sheets: HTML layers moved with transforms, so the GPU does the work */
.es-sheet,
.es-hsheet {
  position: absolute;
  top: 0;
  left: 0;
}

.es-wx.is-on .es-sheet,
.es-wx.is-on .es-hsheet,
.es-wx.is-on .es-band {
  will-change: transform;
}

.es-sheet {
  width: 100%;
  aspect-ratio: 1 / 2;
  transform: translate3d(0, -50%, 0);
}

.es-hsheet {
  height: 100%;
  aspect-ratio: 2 / 1;
  transform: translate3d(-50%, 0, 0);
}

.es-sheet svg,
.es-hsheet svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* one layer per effect: stars, clouds and birds are thin bands at the top */
.es-band { position: absolute; top: 0; left: 0; width: 100%; }
.es-band svg { display: block; width: 100%; height: 100%; }
.es-band--stars { height: 42%; }
.es-band--clouds { height: 26%; }
.es-band--birds { top: 18%; width: 12%; height: auto; aspect-ratio: 2 / 1; }

/* ---------- HUD, hotspots ---------- */

.energy__hud {
  position: absolute;
  top: 28px;
  right: 40px;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: flex-end;
  gap: 6px 28px;
  margin: 0;
  padding: 8px 16px;
  border-radius: 4px;
  background: rgba(21, 21, 21, 0.8);
  pointer-events: none;
}

.energy__season { font-size: 1rem; font-weight: 600; color: var(--es-text); }
.energy__season:empty { display: none; }
.energy__readout { display: inline-flex; align-items: baseline; gap: 10px; }
.energy__readout-label { font-size: 0.875rem; color: var(--es-muted); }

.energy__readout-value {
  min-width: 4.2ch;
  font-size: clamp(1.25rem, 0.95rem + 0.9vw, 1.75rem);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--es-text);
}

.energy__hotspot {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  border-radius: 50%;
  text-decoration: none;
}

.energy__hotspot.is-hidden { visibility: hidden; }

.energy__hotspot::before {
  content: "";
  width: 12px;
  height: 12px;
  border: 1.5px solid var(--es-subtle);
  border-radius: 50%;
  background: var(--es-bg);
  box-shadow: 0 0 0 4px rgba(21, 21, 21, 0.6);
}

.energy__hotspot:hover::before,
.energy__hotspot:focus-visible::before { border-color: var(--es-text); }

.energy__hotspot-label {
  position: absolute;
  bottom: calc(100% - 2px);
  left: 50%;
  padding: 6px 10px;
  border: 1px solid var(--es-line);
  border-radius: 4px;
  background: var(--es-surface);
  color: var(--es-text);
  font-size: 0.8125rem;
  font-weight: 600;
  white-space: nowrap;
  transform: translateX(-50%);
  opacity: 0;
  pointer-events: none;
}

.energy__hotspot:hover .energy__hotspot-label,
.energy__hotspot:focus-visible .energy__hotspot-label { opacity: 1; }

.energy[data-stage="1"] .energy__hotspot--hp::before,
.energy[data-stage="1"] .energy__hotspot--ufh::before { border-color: var(--es-hot-soft); background: var(--es-hot); }
.energy[data-stage="2"] .energy__hotspot--tank::before,
.energy[data-stage="3"] .energy__hotspot--ac::before { border-color: var(--es-cold); background: var(--es-cold); }
.energy[data-stage="4"] .energy__hotspot--vent::before { background: var(--es-text); }

/* ---------- text panel ---------- */

.energy__panel {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 24px;
  pointer-events: none;
}

.energy__steps {
  display: grid;
  width: min(42%, 540px);
  container-type: inline-size;
}

.energy__step {
  grid-area: 1 / 1;
  align-self: center;
  opacity: 0;
  pointer-events: none;
  transform: translateY(14px);
  transition: opacity 0.45s ease-out, transform 0.45s ease-out;
}

.energy__step.is-current {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

.energy__title {
  margin: 0 0 24px;
  font-size: clamp(2.125rem, 1.35rem + 2vw, 3rem);
  font-size: clamp(1.75rem, 9cqi, 3rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--es-text);
  text-wrap: balance;
  overflow-wrap: break-word;
  hyphens: auto;
}

.energy__heading {
  margin: 0 0 16px;
  font-size: clamp(1.625rem, 1.2rem + 1.1vw, 2.25rem);
  font-weight: 600;
  line-height: 1.2;
  color: var(--es-text);
  text-wrap: balance;
  overflow-wrap: break-word;
  hyphens: auto;
}

.energy__text {
  max-width: 34em;
  margin: 0 0 28px;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--es-muted);
}

.energy__step--intro .energy__text { font-size: 1.1875rem; color: var(--es-text); }

.energy__more {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--es-text);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--es-hot);
  text-underline-offset: 6px;
}

.energy__more:hover { text-decoration-thickness: 2px; }

.energy__actions { display: flex; flex-wrap: wrap; gap: 16px; }

/* Buttons for the preview. In the project, use the site's existing button classes. */
.energy__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 32px;
  border: 1px solid transparent;
  border-radius: 4px;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: background-color 0.2s ease-out, border-color 0.2s ease-out;
}

.energy__btn--primary { background: var(--es-hot); color: #ffffff; }
.energy__btn--primary:hover { background: var(--brand-hover, #b33f2e); }
.energy__btn--ghost { border-color: #6b6b6b; color: var(--es-text); }
.energy__btn--ghost:hover { border-color: var(--es-text); }

.energy a:focus-visible { outline: 2px solid var(--es-focus); outline-offset: 2px; }

.energy__cue {
  position: relative;
  display: block;
  width: 1px;
  height: 48px;
  margin-top: 48px;
  background: var(--es-line);
}

.energy__cue::after {
  content: "";
  position: absolute;
  top: 0;
  left: -2px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--es-hot);
}

.energy__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 40px 0 0 -14px;
  pointer-events: auto;
}

.energy__nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
  color: var(--es-subtle);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.25s ease-out;
}

.energy__nav-link::before,
.energy__nav-link::after {
  content: "";
  position: absolute;
  right: 14px;
  bottom: 6px;
  left: 14px;
  height: 2px;
}

.energy__nav-link::before { background: var(--es-line); }

.energy__nav-link::after {
  background: var(--es-hot);
  transform: scaleX(var(--fill, 0));
  transform-origin: left center;
}

.energy__nav-link:hover,
.energy__nav-link[aria-current] { color: var(--es-text); }

/* ---------- motion, only when allowed and only where it is seen ---------- */

@media (prefers-reduced-motion: no-preference) {
  .es-lit { animation: es-light 0.6s ease-out both; }
  .es-lit.l1 { animation-delay: 0.5s; }
  .es-lit.l2 { animation-delay: 0.75s; }
  .es-lit.l3 { animation-delay: 1s; }
  .es-lit.l4 { animation-delay: 1.25s; }
  .es-lit.l5 { animation-delay: 1.5s; }
  .es-lit.l6 { animation-delay: 1.75s; }

  .energy__cue::after { animation: es-cue 2.2s ease-in-out infinite; }

  /* animations inside the drawing repaint it, so they run in about 15 steps per second:
     smooth enough for slow, small movement, and a quarter of the work */
  .energy__shot.is-active .es-fan--idle { animation: es-spin 6s steps(90) infinite; }
  .energy__shot.is-active .es-fan--hot,
  .energy__shot.is-active .es-fan--cold { animation: es-spin 1.8s steps(27) infinite; }
  .energy__shot.is-active.is-flowing .es-pipe--flow { animation: es-flow 0.9s steps(14) infinite; }
  .energy__shot.is-active.is-flowing .es-pipe--flow.es-pipe--duct { animation: es-flow-duct 1s steps(15) infinite; }
  .energy__shot.is-active .es-air,
  .energy__shot.is-active .es-vair { animation: es-dash-11 0.8s steps(12) infinite; }
  .energy__shot.is-active .es-shimmer { animation: es-dash 1s steps(15) infinite; }
  .energy__shot.is-active .es-haze path { animation: es-dash-16 1.1s steps(16) infinite; }
  .energy__shot.is-active .es-drop { animation: es-drip 1.1s steps(16) infinite; }
  .energy__shot.is-active .es-drop:nth-child(2) { animation-delay: -0.4s; }
  .energy__shot.is-active .es-drop:nth-child(3) { animation-delay: -0.75s; }
  .energy__shot.is-active .es-vapor circle { animation: es-puff 3.2s steps(48) infinite; }
  .energy__shot.is-active .es-vapor circle:nth-child(2) { animation-delay: -1.1s; }
  .energy__shot.is-active .es-vapor circle:nth-child(3) { animation-delay: -2.2s; }
  .energy__shot.is-active .es-ripple { animation: es-ripple 2.4s steps(36) infinite; }
  .energy__shot.is-active .es-ripple.p1 { animation-delay: -0.8s; }
  .energy__shot.is-active .es-ripple.p2 { animation-delay: -1.6s; }

  .es-wx.is-on .es-sheet { animation: es-sheet-fall 16s linear infinite; }
  .es-wx--rain.is-on .es-sheet { animation-duration: 1.1s; }
  .es-wx.is-on .es-hsheet { animation: es-sheet-drift 14s linear infinite; }
  .es-wx.is-on .es-band--stars { animation: es-twinkle 4.8s ease-in-out infinite; }
  .es-wx.is-on .es-band--clouds { animation: es-drift 40s ease-in-out infinite alternate; }
  .es-wx.is-on .es-band--birds { animation: es-bird 20s linear infinite; }
}

/* phones: one weather animation at a time (snow, rain or leaves); clouds and stars hold still */
@media (max-width: 999px) {
  .es-wx.is-on .es-band--clouds,
  .es-wx.is-on .es-band--stars { animation: none; }
}

/* readout for ?scene-debug=1 */
.energy__debug {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  margin: 0;
  padding: 4px 8px;
  background: #000000;
  color: var(--es-text);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

/* nothing animates while the scene is off screen */
.energy.is-offscreen *,
.energy.is-offscreen *::before,
.energy.is-offscreen *::after {
  animation-play-state: paused !important;
}

@media (prefers-reduced-motion: reduce) {
  .energy__step { transform: none; transition: opacity 0.2s linear; }
}

@keyframes es-light { from { opacity: 0; } to { opacity: 1; } }
@keyframes es-cue { 0% { transform: translateY(0); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(43px); opacity: 0; } }
@keyframes es-spin { to { transform: rotate(360deg); } }
@keyframes es-flow { to { stroke-dashoffset: -12.1; } }
@keyframes es-flow-duct { to { stroke-dashoffset: -13.1; } }
/* each dash animation moves exactly one dash period, so the loop has no jump */
@keyframes es-dash { to { stroke-dashoffset: -14; } }
@keyframes es-dash-11 { to { stroke-dashoffset: -11; } }
@keyframes es-dash-16 { to { stroke-dashoffset: -16; } }
@keyframes es-drip { 0% { transform: translateY(0); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(58px); opacity: 0; } }
@keyframes es-puff { 0% { transform: translateY(0) scale(0.5); opacity: 0.3; } 100% { transform: translateY(-38px) scale(1.5); opacity: 0; } }
@keyframes es-ripple { 0% { transform: scale(0.2); opacity: 0.8; } 100% { transform: scale(1.6); opacity: 0; } }
/* sheets hold two identical halves, so moving by one half loops without a seam */
@keyframes es-sheet-fall { from { transform: translate3d(0, -50%, 0); } to { transform: translate3d(0, 0, 0); } }
@keyframes es-sheet-drift { from { transform: translate3d(-50%, 0, 0); } to { transform: translate3d(0, 0, 0); } }
@keyframes es-twinkle { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
@keyframes es-drift { from { transform: translate3d(-24px, 0, 0); } to { transform: translate3d(24px, 0, 0); } }
@keyframes es-bird { from { transform: translate3d(-100%, 0, 0); } to { transform: translate3d(840%, 0, 0); } }

/* ---------- tablets and phones ---------- */

@media (max-width: 999px) {
  .energy { --es-top: 64px; }

  .energy__stage { display: flex; flex-direction: column; }

  .energy__visual {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    flex: 1 1 auto;
    min-height: 170px;
  }

  .energy__visual::before { display: none; }

  .energy__visual::after {
    background: linear-gradient(var(--es-bg), rgba(21, 21, 21, 0) 12%, rgba(21, 21, 21, 0) 86%, var(--es-bg));
  }

  .energy__sky--0 { background: radial-gradient(ellipse 80% 70% at 50% 42%, #2b2121, rgba(21, 21, 21, 0) 76%); }
  .energy__sky--1 { background: radial-gradient(ellipse 80% 70% at 50% 42%, #1b222b, rgba(21, 21, 21, 0) 76%); }
  .energy__sky--2 { background: radial-gradient(ellipse 80% 70% at 50% 42%, #1b2424, rgba(21, 21, 21, 0) 76%); }
  .energy__sky--3 { background: radial-gradient(ellipse 80% 70% at 50% 42%, #2e231c, rgba(21, 21, 21, 0) 76%); }
  .energy__sky--4 { background: radial-gradient(ellipse 80% 70% at 50% 42%, #27201b, rgba(21, 21, 21, 0) 76%); }
  .energy__sky--5 { background: radial-gradient(ellipse 80% 70% at 50% 42%, #191c25, rgba(21, 21, 21, 0) 76%); }

  .energy__hud {
    top: 8px;
    right: auto;
    left: 10px;
    justify-content: flex-start;
    gap: 4px 18px;
    padding: 6px 10px;
  }

  .energy__panel {
    flex: none;
    height: auto;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0 16px calc(16px + var(--es-bottom-space, 0px));
    justify-content: flex-start;
  }

  .energy__nav { order: -1; justify-content: center; margin: 0 -8px 10px; }
  .energy__nav-link { padding: 0 10px; font-size: 0.8125rem; }
  .energy__nav-link::before,
  .energy__nav-link::after { right: 10px; left: 10px; }
  .energy__steps { width: 100%; }
  .energy__step--intro .energy__text { font-size: 1rem; margin-bottom: 20px; }
  .energy__text { font-size: 1rem; margin-bottom: 16px; }
  .energy__heading { margin-bottom: 10px; }
  .energy__title { margin-bottom: 14px; }
  .energy__actions { flex-wrap: nowrap; gap: 10px; }

  .energy__btn {
    flex: 1 1 0;
    min-height: 48px;
    padding: 0 8px;
    font-size: 0.9375rem;
    letter-spacing: 0;
    white-space: nowrap;
  }

  .energy__hotspot,
  .energy__cue { display: none; }
}

@media (max-width: 599px) {
  .es-edge { stroke-width: 1.8; }
  .es-eq { stroke-width: 2; }
  .es-pipe { stroke-width: 4.2; }
  .es-pipe--duct { stroke-width: 7.5; }
  .es-pipe--flow { stroke-width: 3; }
  .es-pipe--flow.es-pipe--duct { stroke-width: 4; }
  .energy__readout-label { font-size: 0.8125rem; }
  .energy__season { font-size: 0.875rem; }
}