/* PNSmart — homepage scene states, sims, and the circuit-trace story */

.scene-copy { position: relative; }

/* hero art layering + legibility gradient */
.hero-art { z-index: -2; }
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(8,26,17,0.6), rgba(8,26,17,0.12) 65%),
    linear-gradient(180deg, rgba(8,26,17,0.4), rgba(8,26,17,0.28) 45%, rgba(8,26,17,0.9) 88%, #081A11 100%);
  pointer-events: none;
}

/* status lines light in sequence once a scene is active */
.scene.active .status-line { opacity: 1; transform: none; }
.scene.active .status-stack .status-line:nth-of-type(1) { transition-delay: 0.45s; }
.scene.active .status-stack .status-line:nth-of-type(2) { transition-delay: 0.85s; }
.scene.active .status-stack .status-line:nth-of-type(3) { transition-delay: 1.25s; }
.scene.active .status-stack .status-line:nth-of-type(4) { transition-delay: 1.65s; }
.scene.active .status-stack .status-line:nth-of-type(5) { transition-delay: 2.05s; }
.scene.active .status-stack .status-line:nth-of-type(6) { transition-delay: 2.45s; }

/* ---------- Scene 2 · solar ---------- */
.s2-panel { transition: stroke 0.6s 0.4s, filter 0.6s 0.4s; }
.scene.active .s2-panel { stroke: #A7E86D; filter: drop-shadow(0 0 8px rgba(167,232,109,0.6)); }

/* ---------- Scene 3 · breakers ---------- */
.breaker { fill: #113020; stroke: #224B31; stroke-width: 1; transition: fill 0.35s, stroke 0.35s; }
.scene.active .breaker { fill: #2E7D4F; stroke: #9ECFA4; }
.scene.active .breakers rect:nth-of-type(1)  { transition-delay: 0.5s; }
.scene.active .breakers rect:nth-of-type(2)  { transition-delay: 0.62s; }
.scene.active .breakers rect:nth-of-type(3)  { transition-delay: 0.74s; }
.scene.active .breakers rect:nth-of-type(4)  { transition-delay: 0.86s; }
.scene.active .breakers rect:nth-of-type(5)  { transition-delay: 0.98s; }
.scene.active .breakers rect:nth-of-type(6)  { transition-delay: 1.1s; }
.scene.active .breakers rect:nth-of-type(7)  { transition-delay: 1.22s; }
.scene.active .breakers rect:nth-of-type(8)  { transition-delay: 1.34s; }
.scene.active .breakers rect:nth-of-type(9)  { transition-delay: 1.46s; }
.scene.active .breakers rect:nth-of-type(10) { transition-delay: 1.58s; }
.scene.active .breakers rect:nth-of-type(11) { transition-delay: 1.7s; }
.scene.active .breakers rect:nth-of-type(12) { transition-delay: 1.82s; }

/* ---------- Scene 4 · battery & outage drill ---------- */
.s4-fill {
  fill: #4E9B63; opacity: 0.9;
  transform: scaleY(0.02); transform-origin: bottom; transform-box: fill-box;
  transition: transform 2.2s var(--ease) 0.6s;
}
.scene.active .s4-fill { transform: scaleY(0.86); }
.s4-grid, .s4-gridline { transition: opacity 0.5s 2.6s; }
.scene.active .s4-grid { opacity: 0.22; }
.scene.active .s4-gridline { opacity: 0.12; }
.s4-window { fill: #0E2719; transition: fill 0.6s 3.2s; }
.scene.active .s4-window { fill: #EFC96E; }

/* ---------- Scene 5 · lighting modes ---------- */
.room-wrap[data-mode="morning"] { --bulb:#FFE9BE; --bulb-op:0.7;  --cone-op:0.10; --shade:0.03; --accent:#9ECFA4; --accent-op:0.5; --room:#0E2C20; }
.room-wrap[data-mode="work"]    { --bulb:#EAF6FF; --bulb-op:1;    --cone-op:0.16; --shade:0.2;  --accent:#A7E86D; --accent-op:0.7; --room:#103024; }
.room-wrap[data-mode="relax"]   { --bulb:#FFD489; --bulb-op:0.85; --cone-op:0.12; --shade:0.4;  --accent:#D9A441; --accent-op:0.55; --room:#0B2318; }
.room-wrap[data-mode="dinner"]  { --bulb:#FFC46B; --bulb-op:0.8;  --cone-op:0.10; --shade:0.6;  --accent:#D9A441; --accent-op:0.7; --room:#0A1F16; }
.room-wrap[data-mode="cinema"]  { --bulb:#9FB6FF; --bulb-op:0.35; --cone-op:0.05; --shade:1;    --accent:#A7E86D; --accent-op:0.35; --room:#071612; }
.room-wrap[data-mode="night"]   { --bulb:#FFB35C; --bulb-op:0.25; --cone-op:0.03; --shade:1;    --accent:#D9A441; --accent-op:0.2; --room:#06130C; }
.room-wrap[data-mode="away"]    { --bulb:#FFB35C; --bulb-op:0;    --cone-op:0;    --shade:1;    --accent:#D9A441; --accent-op:0; --room:#05100A; }

.s5-room { fill: var(--room, #0B2318); transition: fill 0.9s; }
.s5-bulb { fill: var(--bulb, #FFD489); opacity: 0; transition: opacity 0.9s, fill 0.9s; }
.scene.active .s5-bulb { opacity: var(--bulb-op, 0.85); }
.s5-cone { fill: var(--bulb, #FFD489); opacity: 0; transition: opacity 0.9s, fill 0.9s; }
.scene.active .s5-cone { opacity: var(--cone-op, 0.12); }
.s5-shade {
  fill: #163A26; stroke: #224B31;
  transform: scaleY(var(--shade, 0.4)); transform-origin: top; transform-box: fill-box;
  transition: transform 1.3s var(--ease);
}
.s5-accent { fill: var(--accent, #D9A441); opacity: 0; transition: opacity 0.9s, fill 0.9s; }
.scene.active .s5-accent { opacity: var(--accent-op, 0.5); }

/* ---------- Scene 7 · sleep ---------- */
.s7-shade {
  fill: #0E2719; opacity: 0.97;
  transform: scaleY(0.06); transform-origin: top; transform-box: fill-box;
  transition: transform 2.2s var(--ease) 0.8s;
}
.scene.active .s7-shade { transform: scaleY(1); }
.s7-lamp { fill: #FFB35C; opacity: 0; transition: opacity 1.1s 1.8s; }
.scene.active .s7-lamp { opacity: 0.85; }
.s7-path circle { opacity: 0.06; transition: opacity 0.6s; }
.scene.active .s7-path circle { opacity: 0.95; }
.scene.active .s7-path circle:nth-of-type(1) { transition-delay: 2.2s; }
.scene.active .s7-path circle:nth-of-type(2) { transition-delay: 2.45s; }
.scene.active .s7-path circle:nth-of-type(3) { transition-delay: 2.7s; }
.scene.active .s7-path circle:nth-of-type(4) { transition-delay: 2.95s; }

/* ---------- Scene 8 · kitchen ---------- */
.s8-screen { fill: #0E2719; transition: fill 0.7s 0.5s; }
.scene.active .s8-screen { fill: #9ECFA4; }
.s8-burner circle { stroke: #224B31; transition: stroke 0.6s; }
.scene.active .s8-burner circle { stroke: #D9A441; }
.scene.active .s8-burner circle:nth-of-type(1) { transition-delay: 0.9s; }
.scene.active .s8-burner circle:nth-of-type(2) { transition-delay: 1.1s; }
.scene.active .s8-burner circle:nth-of-type(3) { transition-delay: 1.3s; }
.s8-oven { fill: #0E2719; transition: fill 0.9s 1.4s; }
.scene.active .s8-oven { fill: #B96A1E; }

/* ---------- Scene 9 · water ---------- */
.s9-handle {
  fill: #9ECFA4;
  transform-box: fill-box; transform-origin: 50% 100%;
  transition: transform 0.8s var(--ease) 1.7s, fill 0.8s 1.7s;
}
.scene.active .s9-handle { transform: rotate(90deg); fill: #D9A441; }
.s9-leak { fill: #FF7B6B; opacity: 0; transform-box: fill-box; transform-origin: center; }
.scene.active .s9-leak { opacity: 1; animation: leakPulse 1.3s ease-in-out infinite 0.7s; }
@keyframes leakPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.5); } }
.s9-leak-label { opacity: 0; transition: opacity 0.5s 1s; }
.scene.active .s9-leak-label { opacity: 1; }

/* ---------- Scene 10 · security ---------- */
.s10-lens { fill: #0E2719; transition: fill 0.5s 0.4s; }
.scene.active .s10-lens { fill: #A7E86D; }
.s10-cone { fill: #A7E86D; opacity: 0; transition: opacity 0.9s 0.6s; }
.scene.active .s10-cone { opacity: 0.12; }
.s10-sconce { fill: #EFC96E; opacity: 0; transition: opacity 0.6s 0.8s; }
.scene.active .s10-sconce { opacity: 1; }
.s10-visitor { opacity: 0; transform: translateX(-22px); transition: opacity 1s 1.2s, transform 1s var(--ease) 1.2s; }
.scene.active .s10-visitor { opacity: 1; transform: none; }
.s10-card { opacity: 0; transition: opacity 0.6s 1.9s; }
.scene.active .s10-card { opacity: 1; }
.s10-lock circle { transition: stroke 0.5s 2.3s; }
.scene.active .s10-lock circle { stroke: #A7E86D; }

/* ---------- Scene 11 · EV ---------- */
.s11-screen { fill: #0E2719; transition: fill 0.6s 0.5s; }
.scene.active .s11-screen { fill: #A7E86D; }
.s11-port { fill: #A7E86D; }
.s11-bar {
  fill: #4E9B63;
  transform: scaleX(0.02); transform-origin: left; transform-box: fill-box;
  transition: transform 2.6s var(--ease) 1.1s;
}
.scene.active .s11-bar { transform: scaleX(0.78); }

/* ---------- Scene 12 · robotics ---------- */
.s12-vac { transform: translateX(-36px); transition: transform 2.6s var(--ease) 0.8s; }
.scene.active .s12-vac { transform: translateX(46px); }
.s12-mower { animation: mowerRun 7s ease-in-out infinite alternate paused; }
.scene.active .s12-mower { animation-play-state: running; }
@keyframes mowerRun { from { transform: translateX(0); } to { transform: translateX(150px); } }
.s12-poolbot { animation: poolBot 6s ease-in-out infinite alternate paused; }
.scene.active .s12-poolbot { animation-play-state: running; }
@keyframes poolBot { from { transform: translateX(-24px); } to { transform: translateX(48px); } }

/* ---------- Scene 13 · garden ---------- */
.s13-rain line { opacity: 0; }
.scene.active .s13-rain line { animation: rainFall 1.2s linear infinite; }
.scene.active .s13-rain line:nth-of-type(2) { animation-delay: 0.4s; }
.scene.active .s13-rain line:nth-of-type(3) { animation-delay: 0.8s; }
@keyframes rainFall {
  0% { transform: translateY(0); opacity: 0; }
  25% { opacity: 0.85; }
  100% { transform: translateY(26px); opacity: 0; }
}

/* ---------- Scene 14 · care ---------- */
.s14-path circle { opacity: 0.07; transition: opacity 0.55s; }
.scene.active .s14-path circle { opacity: 1; }
.scene.active .s14-path circle:nth-of-type(1) { transition-delay: 0.7s; }
.scene.active .s14-path circle:nth-of-type(2) { transition-delay: 1s; }
.scene.active .s14-path circle:nth-of-type(3) { transition-delay: 1.3s; }
.scene.active .s14-path circle:nth-of-type(4) { transition-delay: 1.6s; }
.scene.active .s14-path circle:nth-of-type(5) { transition-delay: 1.9s; }
.s14-ring { fill: none; stroke: #D9A441; stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; }
.scene.active .s14-ring { animation: ringPulse 2.6s ease-out infinite 1.2s; }
@keyframes ringPulse {
  0% { transform: scale(1); opacity: 0.8; }
  100% { transform: scale(1.9); opacity: 0; }
}

/* ---------- Scene 15 · pets ---------- */
.s15-rfid { opacity: 0; transition: opacity 0.7s 0.9s; }
.scene.active .s15-rfid { opacity: 1; }
.s15-cat { transform: translateX(-16px); transition: transform 2s var(--ease) 0.5s; }
.scene.active .s15-cat { transform: none; }

/* ---------- Scene 16 · local AI ---------- */
.s16-agent { fill: #0C2416; stroke: #4E9B63; stroke-width: 2; transition: stroke 0.5s, fill 0.5s; }
.scene.active .s16-agent { stroke: #A7E86D; fill: #113524; }
.scene.active g:nth-of-type(1) > .s16-agent { transition-delay: 0.4s; }
.s16-corepulse { transform-box: fill-box; transform-origin: center; animation: corePulse 3.4s ease-in-out infinite paused; }
.scene.active .s16-corepulse { animation-play-state: running; }
@keyframes corePulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }
.s16-ring, .s16-ring2 { animation: ringFade 4s ease-in-out infinite paused; }
.s16-ring2 { animation-delay: 2s; }
.scene.active .s16-ring, .scene.active .s16-ring2 { animation-play-state: running; }
@keyframes ringFade { 0%, 100% { opacity: 0.15; } 50% { opacity: 0.5; } }
.s16-cloud, .s16-slash { opacity: 0; transition: opacity 0.6s; }
#scene-ai.sim .s16-cloud { opacity: 0.7; }
#scene-ai.sim .s16-slash { opacity: 1; }

/* ---------- Scene 17 · digital twin ---------- */
.s17-scan { animation: scanY 5s ease-in-out infinite paused; }
.scene.active .s17-scan { animation-play-state: running; }
@keyframes scanY { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(296px); } }

/* ---------- Scene 18 · finale ---------- */
.fin-trace { stroke-dasharray: 700; stroke-dashoffset: 700; transition: stroke-dashoffset 2.4s var(--ease) 0.4s; }
.scene.active .fin-trace { stroke-dashoffset: 0; }

@media (prefers-reduced-motion: reduce) {
  .s4-fill, .s5-shade, .s7-shade, .s11-bar, .s12-vac, .s15-cat { transition: none; }
  .trace-svg { display: none; }
}

/* photo-room lighting modes */
.room-wrap[data-mode="morning"] { --ph-b: 1.05; --ph-t: rgba(255,240,200,0.10); }
.room-wrap[data-mode="work"]    { --ph-b: 1.12; --ph-t: rgba(215,235,255,0.10); }
.room-wrap[data-mode="relax"]   { --ph-b: 0.92; --ph-t: rgba(255,185,105,0.18); }
.room-wrap[data-mode="dinner"]  { --ph-b: 0.78; --ph-t: rgba(255,165,80,0.26); }
.room-wrap[data-mode="cinema"]  { --ph-b: 0.45; --ph-t: rgba(30,50,110,0.45); }
.room-wrap[data-mode="night"]   { --ph-b: 0.32; --ph-t: rgba(255,150,60,0.28); }
.room-wrap[data-mode="away"]    { --ph-b: 0.24; --ph-t: rgba(4,10,7,0.6); }

/* ---------- HUD flow overlays on scene images ---------- */
.photo-card .hud, .hero-art .hud {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}
.hud-line {
  stroke: #F2A93B; stroke-width: 2; fill: none;
  stroke-dasharray: 6 8;
  animation: dashFlow 1.3s linear infinite;
  filter: drop-shadow(0 0 5px rgba(242, 169, 59, 0.9));
  opacity: 0.95;
}
.hud-dot { fill: #FFD37A; filter: drop-shadow(0 0 6px rgba(242, 169, 59, 1)); }
.hud-ring {
  fill: none; stroke: #F2A93B; stroke-width: 1.6;
  transform-box: fill-box; transform-origin: center;
  animation: hudRing 2.6s ease-out infinite;
}
@keyframes hudRing {
  0% { transform: scale(0.4); opacity: 0.95; }
  100% { transform: scale(2.8); opacity: 0; }
}
.hud-pulse { fill: #FFF3D6; filter: drop-shadow(0 0 8px rgba(242, 169, 59, 1)); }
.hud-tag rect { fill: rgba(10, 26, 17, 0.72); stroke: rgba(255, 211, 122, 0.5); }
.hud-tag text { fill: #FFF7E6; font: 600 10px Sora, system-ui, sans-serif; letter-spacing: 0.06em; }
.hud-leader { stroke: rgba(242, 169, 59, 0.6); stroke-width: 1.2; }
.scene-visual .hud { opacity: 0; transition: opacity 0.8s var(--ease) 0.35s; }
.scene.active .scene-visual .hud, .hero .hud, .finale .hud { opacity: 1; }

/* scene images keep their native wide aspect */
.scene-photo img, .finale-wide img { aspect-ratio: auto; }

/* gentle Ken Burns movement on photos */
.photo-card img { animation: kb 26s ease-in-out infinite alternate; }
@keyframes kb { from { transform: scale(1); } to { transform: scale(1.07) translate(1.2%, -1.2%); } }
.hero-art img { animation: kbh 38s ease-in-out infinite alternate; }
@keyframes kbh { from { transform: scale(1.02); } to { transform: scale(1.1); } }

@media (prefers-reduced-motion: reduce) {
  .hud-line { animation: none; }
  .hud-ring { animation: none; opacity: 0.35; }
  .hud-pulse { display: none; }
  .photo-card img, .hero-art img { animation: none; }
}

/* ============================================================
   Ecosystem map — animated "what we do" hub at top of homepage
   ============================================================ */
.eco-map { padding-top: clamp(3rem, 6vw, 4.5rem); }
.eco-stage {
  position: relative;
  margin: 0 auto;
  max-width: 1000px;
}
.eco-svg { width: 100%; height: auto; overflow: visible; display: block; }

/* spokes + travelling pulses */
.eco-spoke {
  fill: none;
  stroke: rgba(47, 163, 94, 0.28);
  stroke-width: 1.6;
  stroke-dasharray: 5 7;
  animation: dashFlow 1.5s linear infinite;
}
.eco-pulse { fill: #E8A93B; filter: drop-shadow(0 0 6px rgba(232, 169, 59, 0.95)); }

/* core */
.eco-orbit {
  stroke: rgba(232, 169, 59, 0.5);
  stroke-width: 1.4;
  stroke-dasharray: 3 9;
  transform-box: fill-box;
  transform-origin: center;
  animation: ecoSpin 26s linear infinite;
}
.eco-breathe {
  stroke: rgba(87, 194, 120, 0.5);
  stroke-width: 1.4;
  transform-box: fill-box;
  transform-origin: center;
  animation: ecoBreathe 4.6s ease-in-out infinite;
}
.eco-core { }
.eco-core-g { transform-box: fill-box; transform-origin: center; animation: ecoBreathe 4.6s ease-in-out infinite; }
.eco-core-bolt { animation: ecoFlicker 3.2s ease-in-out infinite; }
.eco-core-name {
  font-family: "Sora", sans-serif; font-weight: 700; font-size: 20px;
  fill: #F6FAF5; letter-spacing: 0.02em;
}
@keyframes ecoSpin { to { transform: rotate(360deg); } }
@keyframes ecoBreathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
@keyframes ecoFlicker { 0%, 100% { opacity: 1; } 45% { opacity: 0.72; } }

/* nodes */
.eco-node { cursor: pointer; }
.eco-node-bg {
  fill: #FFFFFF;
  stroke: rgba(21, 58, 35, 0.16);
  stroke-width: 1.5;
  transition: fill 0.3s, stroke 0.3s, transform 0.3s var(--ease);
  transform-box: fill-box;
  transform-origin: center;
  filter: drop-shadow(0 8px 20px rgba(23, 64, 39, 0.12));
}
.eco-icon { color: #2FA35E; transition: color 0.3s; }
.eco-label {
  font-family: "Sora", sans-serif; font-weight: 600; font-size: 15px;
  fill: #24402F;
  transition: fill 0.3s;
  dominant-baseline: middle;
}
.eco-node:hover .eco-node-bg, .eco-node:focus-visible .eco-node-bg {
  fill: #2FA35E;
  stroke: #2FA35E;
  transform: scale(1.12);
}
.eco-node:hover .eco-icon, .eco-node:focus-visible .eco-icon { color: #fff; }
.eco-node:hover .eco-label, .eco-node:focus-visible .eco-label { fill: #1C7A43; }

/* reveal-in: nodes pop when the section scrolls into view */
.eco-node { opacity: 0; transform: scale(0.6); transform-box: fill-box; transform-origin: center; }
.eco-map.in-view .eco-node { animation: ecoPop 0.6s var(--ease) forwards; animation-delay: var(--d); }
@keyframes ecoPop { to { opacity: 1; transform: scale(1); } }

/* process strip */
.eco-process {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 0.5rem 0.7rem;
  margin-top: clamp(1.5rem, 4vw, 2.6rem);
}
.eco-step {
  font-family: "Sora", sans-serif; font-weight: 600; font-size: 0.92rem;
  color: #24402F;
  background: #fff;
  border: 1px solid rgba(21, 58, 35, 0.16);
  border-radius: 999px;
  padding: 0.5rem 1.15rem;
  box-shadow: 0 6px 16px rgba(23, 64, 39, 0.08);
}
.eco-arrow { color: #E8A93B; font-weight: 700; }

.eco-caption {
  display: none;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.3rem 0.5rem;
  margin: 1.2rem auto 0;
  max-width: 340px;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--text-faint);
  text-align: center;
}
@media (max-width: 640px) {
  /* labels overlap in a 12-node ring at phone width — show icons only;
     the caption below + the Solutions section list every system by name. */
  .eco-label { display: none; }
  .eco-core-name { font-size: 34px; }
  .eco-icon { stroke-width: 2.2; }
  .eco-node-bg { stroke-width: 2; }
  .eco-caption { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  .eco-spoke, .eco-orbit, .eco-core-g, .eco-core-bolt, .eco-breathe { animation: none; }
  .eco-pulse { display: none; }
  .eco-map.in-view .eco-node { animation: none; opacity: 1; transform: scale(1); }
  .eco-node { opacity: 1; transform: scale(1); }
}