/* Purposeful motion: static first, activated only in view. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .18s; }
.public-energy { padding:clamp(20px,3vw,36px); border:1px solid var(--line); border-radius:24px; background:var(--surface); }
.energy-heading { display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap; }
.energy-heading .eyebrow { margin:0; }
.energy-map { width:100%; margin:24px 0 16px; overflow:visible; }
.flow-track { fill:none; stroke:var(--line-strong); stroke-width:3; }
.flow-dots { fill:none; stroke:var(--accent); stroke-width:5; stroke-linecap:round; stroke-dasharray:1 17; opacity:0; }
.public-energy[data-state="live"] .flow-dots { opacity:1; }
.public-energy[data-state="live"].in-view .flow-dots { animation:flow-travel 1.8s linear infinite; }
.public-energy[data-grid-direction="export"] .grid-flow,.public-energy[data-battery-direction="supplying"] .battery-flow { animation-direction:reverse!important; }
.public-energy[data-solar-idle="true"] .solar-flow,.public-energy[data-grid-direction="idle"] .grid-flow,.public-energy[data-battery-direction="idle"] .battery-flow { opacity:0; }
.flow-node rect { fill:var(--surface-2); stroke:var(--line-strong); }
.flow-node text { text-anchor:middle; fill:var(--muted-strong); font:15px var(--font); }
.flow-node .flow-value { fill:var(--text); font-size:24px; font-weight:650; }
.flow-hub rect { stroke:var(--accent); }
.energy-caption { margin-bottom:8px; font-size:.9rem; color:var(--muted-strong); }
.public-energy .fine-print { margin:0; font-size:.78rem; }
@keyframes flow-travel { to { stroke-dashoffset:-36; } }
.automation-chain { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; padding:0; margin:24px 0; list-style:none; }
.automation-chain li { background:var(--surface-2); border:1px solid var(--line); border-radius:12px; padding:14px 12px; font-size:.82rem; }
.automation-chain b { display:block; color:var(--accent); font-size:.68rem; text-transform:uppercase; letter-spacing:.1em; margin-bottom:6px; }
.automation-chain.in-view li { animation:chain-step 6s ease-in-out infinite; }
.automation-chain li:nth-child(2) { animation-delay:1.5s; }
.automation-chain li:nth-child(3) { animation-delay:3s; }
@keyframes chain-step { 0%,25% { border-color:var(--accent); background:var(--surface-3); box-shadow:0 0 0 1px var(--accent); } 35%,100% { border-color:var(--line); box-shadow:none; } }
.ev-story { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:50px; align-items:start; }
.ev-story-visual { position:sticky; top:140px; margin:0; }
.ev-screen { position:relative; border-radius:18px; overflow:hidden; border:1px solid var(--line-strong); background:#fff; }
.ev-screen img { width:100%; height:auto; }
.ev-highlight { position:absolute; border:3px solid #087f7b; background:rgba(81,215,209,.12); border-radius:8px; transition:all .45s ease; pointer-events:none; }
.ev-screen[data-ev-region="0"] .ev-highlight { left:0;top:0;width:25%;height:20%; }
.ev-screen[data-ev-region="1"] .ev-highlight { left:25%;top:31%;width:25%;height:40%; }
.ev-screen[data-ev-region="2"] .ev-highlight { left:0;top:73%;width:50%;height:27%; }
.ev-story-visual figcaption { color:var(--muted-strong); font-size:.88rem; margin-top:16px; }
.ev-story-steps article { min-height:50vh; padding:35px 0; border-top:1px solid var(--line); }
.ev-story-steps button { display:block; width:100%; padding:0; border:0; background:transparent; text-align:left; cursor:pointer; font-size:clamp(1.35rem,2vw,1.9rem); line-height:1.2; font-weight:600; }
.ev-story-steps button span { display:block; font-size:.8rem; color:var(--accent); margin-bottom:18px; }
.ev-story-steps button[aria-pressed="true"] { color:var(--accent); }
.ev-story-steps p { margin-top:18px; color:var(--muted-strong); }
.day-comparison { max-width:900px; margin:auto; }
.day-scene { position:relative; overflow:hidden; height:340px; background:#172b40; border-radius:24px; color:#fff; margin-bottom:28px; }
.day-sky { position:absolute; inset:0; background:linear-gradient(145deg,#426577,#152632); transition:background .4s; }
.day-caption { position:absolute;left:26px;top:22px;font-size:.85rem; }
.day-sun { position:absolute;right:15%;top:45px;width:50px;height:50px;border-radius:50%;background:#e5b375; }
.day-house { position:absolute;left:25%;top:120px;width:50%;height:160px;background:#28434b;border:2px solid #66848c;display:flex;gap:22px;align-items:center;justify-content:center; }
.day-roof { position:absolute;top:-70px;left:-10%;width:120%;height:70px;background:#172d36;clip-path:polygon(50% 0,100% 100%,0 100%); }
.day-window { width:45px;height:55px;background:#101f2b;border:3px solid #68828a;transition:background .4s,box-shadow .4s; }
.day-door { width:45px;height:90px;background:#10242e;align-self:flex-end; }
.day-car { position:absolute;right:-80px;bottom:0;width:90px;height:38px;background:#7fa6b1;border-radius:28px 30px 8px 8px; }
.day-events { position:absolute;bottom:12px;left:0;right:0;display:flex;justify-content:center;gap:10px; }
.day-events span { background:#0b1b26;padding:6px 10px;border-radius:8px;font-size:.72rem; }
.day-scene[data-day-state="1"] .day-window,.day-scene[data-day-state="2"] .day-window,.day-scene[data-day-state="3"] .day-window { background:#ffcf8c;box-shadow:0 0 26px #ffcf8c66; }
.day-scene[data-day-state="2"] .day-car,.day-scene[data-day-state="3"] .day-car { box-shadow:0 0 0 3px #51d7d1; }
.day-scene[data-day-state="3"] .day-house { border-color:#51d7d1; }
.day-comparison label { display:block;font-size:.9rem;font-weight:600; }
.day-comparison input[type="range"] { width:100%;accent-color:var(--accent);min-height:40px;cursor:ew-resize; }
.day-range-labels { display:flex;justify-content:space-between;color:var(--muted);font-size:.8rem; }
.day-comparison [data-day-summary] { text-align:center;margin-top:16px;min-height:3.5em; }
html.motion-ready .hero-image { animation:hero-dusk 18s ease-in-out infinite alternate; animation-play-state:paused; }
html.motion-ready .hero.in-view .hero-image { animation-play-state:running; }
@keyframes hero-dusk { from { transform:scale(1);filter:brightness(.98) saturate(.9); } to { transform:scale(1.045);filter:brightness(.8) saturate(1.16); } }
html.motion-ready [data-motion]:not(.in-view) *,html.motion-ready [data-motion]:not(.in-view) *::before,html.motion-ready [data-motion]:not(.in-view) *::after { animation-play-state:paused!important; }
html.page-hidden *,html.page-hidden *::before,html.page-hidden *::after { animation-play-state:paused!important; }
.button,.article-card,.setup-grid article { transition:transform .2s ease,box-shadow .2s ease,border-color .2s; }
@media(hover:hover) { .button:hover,.article-card:hover,.setup-grid article:hover { transform:translateY(-3px); } }
details[open] { border-color:var(--accent); }
details[open] > p { animation:faq-enter .2s ease-out; }
@keyframes faq-enter { from { opacity:0;transform:translateY(-4px); } to { opacity:1;transform:none; } }
.brand-mark { overflow:hidden; }
.brand-mark img { width:100%;height:100%; }
.home-page .site-header:not(.scrolled) .brand,.home-page .site-header:not(.scrolled) .site-nav a:not(.nav-cta) { color:#f4f7f5; }
.home-page .site-header:not(.scrolled) .brand small { color:#c0ccce; }
.hero .eyebrow { color:#51d7d1; }
html[data-theme="light"] .button.primary,html[data-theme="light"] .site-nav .nav-cta { color:#fff; }
@media(max-width:860px) { .home-page .site-header:not(.scrolled) .site-nav.open a:not(.nav-cta) { color:var(--text); } }
@media(min-width:861px) and (max-width:1200px) { .site-nav { gap:13px; }.site-nav a { font-size:.82rem; }.brand small { font-size:.58rem; }.header-inner {gap:16px;} }
@media(max-width:860px) { .ev-story {grid-template-columns:1fr;gap:22px;}.ev-story-visual {position:relative;top:auto;}.ev-story-steps article {min-height:0;padding:25px 0;}.energy-map {margin:18px 0;}.day-events {flex-wrap:wrap;}.day-house {left:15%;width:60%;}.day-car {right:-45px;width:65px;} }
@media(prefers-reduced-motion:reduce) { html {scroll-behavior:auto!important;} *,*::before,*::after {animation:none!important;transition:none!important;} .hero-image {transform:none!important;} ::view-transition-old(root),::view-transition-new(root){animation:none!important;} }