/* ===========================================================================
   Motion. Everything here fails OPEN: content is hidden for a reveal only
   under `html.js`, which assets/js/main.js sets on its first line — the same
   file that reveals it again. No script, no class, nothing hidden. The
   Elementor editor runs no site script and shows everything regardless.

   The hero's live dusk scene (assets/img/hero-live.svg) is styled here too: it is
   inlined into the page by main.js, so page CSS reaches inside it.
   =========================================================================== */

.reveal{opacity:1;transform:none}
html.js .reveal{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
html.js .reveal.in{opacity:1;transform:none}
/* phones: a gentler rise, so scrolling never reads as content jumping */
@media (max-width:767px){ html.js .reveal{transform:translateY(12px);transition-duration:.6s} }
body.elementor-editor-active .reveal,
body.elementor-editor-active .reveal.in{opacity:1 !important;transform:none !important}

/* columns side by side arrive one after the other */
html.js .elementor-column.reveal + .elementor-column.reveal{transition-delay:.12s}
html.js .elementor-column.reveal + .elementor-column.reveal + .elementor-column.reveal{transition-delay:.24s}
html.js .elementor-column.reveal + .elementor-column.reveal + .elementor-column.reveal + .elementor-column.reveal{transition-delay:.36s}

/* shared keyframes */
@keyframes mel-run{from{stroke-dashoffset:0}to{stroke-dashoffset:-100}}

/* ----------------------------------------------------- the live night scene */

.mel .mel-scene{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.mel .mel-scene .tw{animation:mel-twinkle var(--t,4s) ease-in-out var(--d,0s) infinite}
@keyframes mel-twinkle{0%,100%{opacity:.9}50%{opacity:.15}}
.mel .mel-scene .shooting{stroke-dasharray:14 86;stroke-dashoffset:14;opacity:0;animation:mel-shoot 11s ease-in 3s infinite}
@keyframes mel-shoot{0%{stroke-dashoffset:14;opacity:0}2%{opacity:1}7%{stroke-dashoffset:-86;opacity:0}100%{stroke-dashoffset:-86;opacity:0}}
.mel .mel-scene .beacon{animation:mel-blink 2.4s steps(1) infinite}
@keyframes mel-blink{0%,60%{opacity:1}61%,100%{opacity:.15}}
.mel .mel-scene .shim{animation:mel-shim 4s ease-in-out var(--sd,0s) infinite}
@keyframes mel-shim{0%,100%{opacity:.15;transform:translateX(0)}50%{opacity:.6;transform:translateX(6px)}}

/* current running down the lines */
.mel .mel-scene .cur,.mel .mel-scene .cur-g{stroke-dasharray:4 96;stroke-dashoffset:0;animation:mel-run var(--dur,3.4s) linear var(--del,0s) infinite;transition:opacity .5s}
.mel .mel-scene .cur{stroke:#FFFFFF;stroke-width:2.4}
.mel .mel-scene .cur-g{stroke:#FCDC25;stroke-width:10;stroke-opacity:.55}
.mel .mel-scene .drop.cur,.mel .mel-scene .drop.cur-g{stroke-dasharray:9 91}
.mel .mel-scene .arc{opacity:0;animation:mel-arc 7s steps(1) 2s infinite}
@keyframes mel-arc{0%,93.9%{opacity:0}94%{opacity:1}95%{opacity:.2}96%{opacity:1}97%,100%{opacity:0}}
.mel .mel-scene .meter-eye{animation:mel-meter 1.1s ease-in-out infinite}
@keyframes mel-meter{0%,100%{fill:#8FC9E8}50%{fill:#FFF6C8}}

/* the lights: every pane fades with its own delay (--wd) when the power moves */
.mel .mel-scene .lit{transition:opacity .25s ease var(--wd,0s)}
.mel .mel-scene .sl-cone,.mel .mel-scene .sl-lamp,.mel .mel-scene .spill{transition:opacity .4s ease .9s}
.mel .mel-scene .flies circle{opacity:0;animation:mel-fly 7s ease-in-out var(--fd,0s) infinite}
@keyframes mel-fly{0%,100%{opacity:0;transform:translate(0,0)}30%{opacity:.95}50%{opacity:.2;transform:translate(var(--fx,0px),var(--fy,0px))}70%{opacity:.85}}

/* the generator, idle until an outage */
.mel .mel-scene .gen-led{fill:#2D6B47;transition:fill .3s}
.mel .mel-scene .puffs circle{opacity:0;transform-box:fill-box;transform-origin:center}
.mel .mel-scene .gen-tag{opacity:0;transition:opacity .4s}

/* boot: dark until main.js starts the power-up */
.mel .mel-scene.is-boot :is(.lit,.sl-cone,.sl-lamp,.spill,.cur,.cur-g){opacity:0;transition-delay:0s}
/* outage: the grid goes down … */
.mel .mel-scene.is-out :is(.cur,.cur-g,.arc){opacity:0;animation-play-state:paused}
.mel .mel-scene.is-out :is(.town .lit,.sl-cone,.sl-lamp){opacity:0;transition-delay:0s}
.mel .mel-scene.is-out:not(.is-gen) :is(.house .lit,.spill){opacity:0;transition-delay:0s}
.mel .mel-scene.is-out .meter-eye{animation:none}
/* … and the generator takes over the house */
.mel .mel-scene.is-gen .gen-led{fill:var(--ok)}
.mel .mel-scene.is-gen .gen{animation:mel-hum .14s linear infinite}
@keyframes mel-hum{0%,100%{transform:translateY(0)}50%{transform:translateY(-.6px)}}
.mel .mel-scene.is-gen .puffs circle{animation:mel-puff 2.2s ease-out infinite}
.mel .mel-scene.is-gen .puffs circle:nth-child(2){animation-delay:.7s}
.mel .mel-scene.is-gen .puffs circle:nth-child(3){animation-delay:1.4s}
@keyframes mel-puff{0%{opacity:.55;transform:translate(0,0) scale(.6)}100%{opacity:0;transform:translate(-14px,-34px) scale(1.8)}}
.mel .mel-scene.is-gen .gen-tag{opacity:1}
.mel .mel-scene.is-gen .gen-tag-dot{animation:mel-tagdot 1.2s ease-in-out infinite}
@keyframes mel-tagdot{50%{opacity:.35}}

/* off screen, everything holds still (main.js) */
.mel .mel-scene.is-away *{animation-play-state:paused !important}

/* a section with the live layer: the content above it takes no clicks where
   it is empty, so the switch and the scene stay reachable */
.mel:not(.elementor-editor-active) :is(.hero-live) > .elementor-container{pointer-events:none}
.mel:not(.elementor-editor-active) :is(.hero-live) > .elementor-container .elementor-widget{pointer-events:auto}

@media (prefers-reduced-motion:reduce){
  html.js .reveal{opacity:1;transform:none;transition:none}
  .mel .mel-scene *{animation:none !important}
  .mel .mel-scene :is(.cur,.cur-g,.shooting,.arc,.flies){display:none}
  .mel .amap-pulse{display:none}
  body .elementor .mel-el-ctaband > .elementor-container::after{animation:none}
}