/* =============================================
   HERO 3D — Aeronex Solar Interactive Hero
   ============================================= */

/* ---------- Header override for dark hero ---------- */
/* Make header visible over the dark hero sky */
.site-header {
  background: rgba(4, 17, 30, 0.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

/* Keep white background when scrolled (existing behaviour) */
.site-header.is-scrolled,
.site-header.is-open {
  background: rgba(255, 255, 255, 0.96) !important;
  border-bottom-color: transparent !important;
  backdrop-filter: blur(18px) !important;
}

/* Nav pill — lighten text so it reads on dark */
/* .site-header:not(.is-scrolled):not(.is-open) .site-nav {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.18);
} */
.site-header:not(.is-scrolled):not(.is-open) .site-nav a {
  color: rgba(255, 255, 255, 0.88);
}
.site-header:not(.is-scrolled):not(.is-open) .site-nav a:hover,
.site-header:not(.is-scrolled):not(.is-open) .site-nav a.active {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}

/* Logo — white pill background so it's always visible */
.site-header:not(.is-scrolled):not(.is-open) .brand img {
  background: rgba(255, 255, 255, 0.96);
  border-radius: 8px;
  padding: 4px 8px;
}

/* Mobile toggle — visible on dark */
.site-header:not(.is-scrolled):not(.is-open) .nav-toggle {
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.25);
}


.hero3d {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: #102a43;
}

/* Editorial hero treatment: use the photograph as the visual anchor. */
.hero3d .sky-gradient {
  background:
    linear-gradient(90deg, rgba(9, 28, 43, .92) 0%, rgba(9, 28, 43, .72) 42%, rgba(9, 28, 43, .32) 100%),
    linear-gradient(180deg, rgba(10, 34, 52, .18), rgba(10, 34, 52, .58)),
    url("https://images.unsplash.com/photo-1509391366360-2e959784a276?auto=format&fit=crop&w=2200&q=88") center/cover;
}
.hero3d[data-period="morning"] .sky-gradient,
.hero3d[data-period="day"] .sky-gradient,
.hero3d[data-period="evening"] .sky-gradient,
.hero3d[data-period="night"] .sky-gradient { background:
  linear-gradient(90deg, rgba(9, 28, 43, .92) 0%, rgba(9, 28, 43, .72) 42%, rgba(9, 28, 43, .32) 100%),
  linear-gradient(180deg, rgba(10, 34, 52, .18), rgba(10, 34, 52, .58)),
  url("https://images.unsplash.com/photo-1509391366360-2e959784a276?auto=format&fit=crop&w=2200&q=88") center/cover;
}
.hero3d .clouds-layer,
.hero3d .horizon3d,
.hero3d .sun3d,
.hero3d .burst-particles { display: none; }


/* =============================================
   SKY SCENE
   ============================================= */
.sky3d {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.sky-gradient {
  position: absolute;
  inset: 0;
  transition: background 2s ease;
  background: linear-gradient(to bottom,#04111e 0%,#091f3a 30%,#133a6b 55%,#1e5a8a 70%,#2e7bb5 80%,#5baee0 90%,#a8d8f4 96%,#d4eeff 100%);
}

.hero3d[data-period="morning"] .sky-gradient {
  background: linear-gradient(to bottom,#0d1f35 0%,#1a3a6a 30%,#2d6098 55%,#e07b3a 70%,#f4a64e 80%,#f7c878 90%,#fde9b8 100%);
}
.hero3d[data-period="day"] .sky-gradient {
  background: linear-gradient(to bottom,#0a2a54 0%,#1155a8 25%,#1e7fd0 55%,#4daee8 78%,#87cdf6 92%,#c7e9ff 100%);
}
.hero3d[data-period="evening"] .sky-gradient {
  background: linear-gradient(to bottom,#110b25 0%,#2b1760 25%,#6b2d7a 48%,#c44e55 68%,#f0844a 82%,#f8c77a 93%,#fde9c0 100%);
}
.hero3d[data-period="night"] .sky-gradient {
  background: linear-gradient(to bottom,#010812 0%,#030e22 35%,#061733 65%,#092040 100%);
}

/* ---------- Stars ---------- */
.stars-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.5s ease;
}
.hero3d[data-period="night"] .stars-layer,
.hero3d[data-period="evening"] .stars-layer { opacity: 1; }
.star-dot {
  position: absolute;
  background: white;
  border-radius: 50%;
  opacity: 0.6;
}
.star-dot.star-twinkle {
  animation: starTwinkle var(--dur,3s) ease-in-out infinite var(--delay,0s);
  will-change: opacity;
}
@keyframes starTwinkle {
  0%,100% { opacity:0.25; }
  50%      { opacity:1; }
}

/* ---------- Clouds ---------- */
.clouds-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.5s ease;
}
.hero3d[data-period="morning"] .clouds-layer,
.hero3d[data-period="day"] .clouds-layer { opacity: 0.85; }
.hero3d[data-period="evening"] .clouds-layer { opacity: 0.4; }

.cloud {
  position: absolute;
  border-radius: 50px;
  filter: blur(2px);
}
.cloud::before,.cloud::after {
  content:"";
  position:absolute;
  background:inherit;
  border-radius:50%;
}
.cloud.c1 {
  background:rgba(255,255,255,0.82);
  width:160px;height:40px;
  top:18%;left:10%;
  animation:cloudDrift 22s linear infinite;
}
.cloud.c1::before { width:80px;height:70px;top:-35px;left:20px;background:rgba(255,255,255,0.82); }
.cloud.c1::after  { width:60px;height:55px;top:-25px;left:70px;background:rgba(255,255,255,0.82); }

.cloud.c2 {
  background:rgba(255,255,255,0.65);
  width:210px;height:50px;
  top:28%;left:55%;
  animation:cloudDrift 34s linear infinite 8s;
}
.cloud.c2::before { width:100px;height:85px;top:-42px;left:30px;background:rgba(255,255,255,0.65); }
.cloud.c2::after  { width:75px;height:65px;top:-32px;left:100px;background:rgba(255,255,255,0.65); }

.cloud.c3 {
  background:rgba(255,255,255,0.5);
  width:130px;height:35px;
  top:12%;left:70%;
  animation:cloudDrift 28s linear infinite 4s;
}
.cloud.c3::before { width:65px;height:55px;top:-28px;left:18px;background:rgba(255,255,255,0.5); }

@keyframes cloudDrift {
  0%   { transform:translateX(0); }
  50%  { transform:translateX(40px); }
  100% { transform:translateX(0); }
}

/* =============================================
   3D SUN
   ============================================= */
.sun3d {
  position:absolute;
  top:8%;
  left:50%;
  transform:translateX(-50%) translateY(-120px);
  width:120px;height:120px;
  background:none;border:none;
  cursor:pointer;
  z-index:10;
  padding:0;
  animation:sunRise 2.4s cubic-bezier(0.34,1.56,0.64,1) forwards;
  transition:top 1.2s ease, left 1.2s ease, opacity 1.2s ease;
}
.sun3d:focus { outline: 3px solid rgba(255,220,50,0.6); outline-offset: 6px; border-radius: 50%; }
.sun3d:hover .sun-inner { transform:scale(1.12); }

@keyframes sunRise {
  from { transform:translateX(-50%) translateY(120px); opacity:0; }
  to   { transform:translateX(-50%) translateY(0);    opacity:1; }
}

.hero3d[data-period="morning"] .sun3d { top:22%;left:18%; }
.hero3d[data-period="day"]     .sun3d { top:6%; left:50%; }
.hero3d[data-period="evening"] .sun3d { top:24%;left:80%; }
.hero3d[data-period="night"]   .sun3d { opacity:0;pointer-events:none; }

.sun-inner {
  position:relative;
  width:100%;height:100%;
  transition:transform 0.4s cubic-bezier(0.34,1.56,0.64,1);
}

.sun-core3d {
  position:absolute;
  inset:12px;
  border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#fff7a0,#ffd200 45%,#ff8c00 75%,#e05c00);
  box-shadow:
    0 0 0 4px rgba(255,220,50,0.35),
    0 0 35px 12px rgba(255,180,0,0.5);
  will-change: transform;
}
.sun-core3d::after {
  content:"";
  position:absolute;
  inset:-24px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,180,0,0.35) 0%, rgba(255,140,0,0.12) 55%, transparent 75%);
  pointer-events:none;
  animation:sunGlowScale 3s ease-in-out infinite;
  will-change:transform, opacity;
}
@keyframes sunGlowScale {
  0%,100% { transform:scale(0.92); opacity:0.75; }
  50%     { transform:scale(1.15); opacity:1; }
}

.sun-rays {
  position:absolute;
  inset:0;
}

.sun-rays span {
  position:absolute;
  top:50%;left:50%;
  width:6px;
  background:linear-gradient(to right,rgba(255,220,50,0.9),transparent);
  border-radius:3px;
  transform-origin:0 0;
}
.sun-rays span:nth-child(1){height:52px;transform:rotate(0deg)   translate(50%,-50%);}
.sun-rays span:nth-child(2){height:44px;transform:rotate(45deg)  translate(50%,-50%);}
.sun-rays span:nth-child(3){height:52px;transform:rotate(90deg)  translate(50%,-50%);}
.sun-rays span:nth-child(4){height:44px;transform:rotate(135deg) translate(50%,-50%);}
.sun-rays span:nth-child(5){height:52px;transform:rotate(180deg) translate(50%,-50%);}
.sun-rays span:nth-child(6){height:44px;transform:rotate(225deg) translate(50%,-50%);}
.sun-rays span:nth-child(7){height:52px;transform:rotate(270deg) translate(50%,-50%);}
.sun-rays span:nth-child(8){height:44px;transform:rotate(315deg) translate(50%,-50%);}

.sun-corona {
  position:absolute;
  inset:-8px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,200,0,0.12) 60%,transparent 100%);
  animation:coronaPulse 4s ease-in-out infinite;
}
@keyframes coronaPulse {
  0%,100%{transform:scale(1);opacity:0.6;}
  50%    {transform:scale(1.22);opacity:1;}
}

.sun-hint {
  position:absolute;
  bottom:-28px;left:50%;
  transform:translateX(-50%);
  background:rgba(255,220,50,0.92);
  color:#1a0a00;
  font-size:0.68rem;font-weight:900;letter-spacing:0.08em;
  padding:3px 10px;border-radius:999px;
  white-space:nowrap;
  opacity:0;
  animation:hintAppear 1s ease 3s forwards;
  pointer-events:none;
}
@keyframes hintAppear { to{opacity:1;} }

/* Night moon */
.hero3d[data-period="night"] .sky3d::after {
  content:"🌕";
  position:absolute;
  font-size:80px;
  top:10%;right:16%;
  filter:drop-shadow(0 0 35px rgba(220,220,180,0.7));
}

/* =============================================
   GROUND / HORIZON SCENE
   ============================================= */
.horizon3d {
  position:absolute;
  bottom:0;left:0;right:0;
  height:42%;
  pointer-events:none;
}

.ground-hill {
  position:absolute;
  bottom:0;
  border-radius:50% 50% 0 0;
}
.ground-hill.h1 {
  background:linear-gradient(to top,#0b2e14,#1a5c28);
  width:70%;height:55%;left:-8%;
}
.ground-hill.h2 {
  background:linear-gradient(to top,#0e3518,#21703a);
  width:55%;height:45%;right:-6%;
}
.hero3d[data-period="night"] .ground-hill.h1{background:linear-gradient(to top,#040e07,#0a2010);}
.hero3d[data-period="night"] .ground-hill.h2{background:linear-gradient(to top,#050f08,#0c2514);}
.hero3d[data-period="evening"] .ground-hill.h1{background:linear-gradient(to top,#140a1a,#2d1a40);}
.hero3d[data-period="evening"] .ground-hill.h2{background:linear-gradient(to top,#17091e,#351e4a);}

/* House */
.scene-house {
  position:absolute;
  bottom:32%;left:18%;
  width:110px;
}
.house-roof {
  width:0;height:0;
  border-left:62px solid transparent;
  border-right:62px solid transparent;
  border-bottom:44px solid #8b3a3a;
  filter:drop-shadow(0 -2px 8px rgba(0,0,0,0.3));
}
.house-wall {
  background:linear-gradient(to bottom,#e8d5b0,#d4c09a);
  height:58px;
  display:flex;
  align-items:center;
  justify-content:space-around;
  padding:8px 10px 0;
}
.house-window {
  width:22px;height:22px;
  border-radius:2px;
  background:rgba(255,200,80,0.9);
  box-shadow:0 0 12px rgba(255,200,80,0.6);
  animation:windowFlicker 4s ease-in-out infinite;
}
@keyframes windowFlicker{0%,90%,100%{opacity:1;}95%{opacity:0.7;}}
.house-door {
  width:18px;height:32px;
  background:#6b3a28;
  border-radius:2px 2px 0 0;
  align-self:flex-end;
}

/* Solar roof panels */
.scene-panels {
  position:absolute;
  bottom:36%;left:10%;
  display:flex;gap:4px;
  transform:perspective(300px) rotateX(20deg) rotateY(-15deg);
}
.roof-panel {
  width:38px;height:24px;
  background:linear-gradient(135deg,#1a5c8f,#0d3260 50%,#1a5c8f);
  border:1px solid rgba(100,180,255,0.3);
  border-radius:2px;
  position:relative;
  box-shadow:0 4px 10px rgba(0,0,0,0.4);
}
.roof-panel::after {
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(110deg,rgba(255,255,255,0.25) 0%,transparent 40%);
}
.hero3d[data-period="day"] .roof-panel,
.hero3d[data-period="morning"] .roof-panel {
  box-shadow:0 4px 10px rgba(0,0,0,0.4),0 0 16px rgba(80,180,255,0.4);
}

/* =============================================
   SUN BURST PARTICLES
   ============================================= */
.burst-particles {
  position:absolute;inset:0;
  pointer-events:none;z-index:20;
}
.burst-particle {
  position:absolute;
  border-radius:50%;
  animation:burstFly var(--dur,1.2s) ease-out forwards;
  opacity:0;
}
@keyframes burstFly {
  0%  {transform:translate(0,0) scale(1);opacity:1;}
  100%{transform:translate(var(--tx,0),var(--ty,0)) scale(0);opacity:0;}
}

/* =============================================
   HERO CONTENT LAYOUT
   ============================================= */
.hero3d-inner {
  position:relative;z-index:5;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(290px,400px);
  gap:clamp(20px,3vw,48px);
  align-items:center;
  min-height:100vh;
  padding:110px clamp(20px,5vw,72px) 48px;
}

/* ---------- Hero Message ---------- */
.hero3d-message { color:white; }

.eyebrow3d {
  display:inline-flex;align-items:center;gap:10px;
  font-size:0.78rem;font-weight:900;letter-spacing:0.1em;text-transform:uppercase;
  color:#ffd166;
  margin-bottom:22px;
  background:rgba(255,209,102,0.12);
  border:1px solid rgba(255,209,102,0.25);
  border-radius:999px;padding:6px 16px;
  backdrop-filter:blur(4px);
  animation:eyebrowSlide 1s ease 0.3s both;
}
@keyframes eyebrowSlide {
  from{opacity:0;transform:translateY(14px);}
  to  {opacity:1;transform:none;}
}
.eyebrow-dot {
  width:8px;height:8px;border-radius:50%;
  background:#ffd166;flex-shrink:0;
  animation:dotPulse 1.8s ease-in-out infinite;
}
@keyframes dotPulse {
  0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(255,209,102,0.6);}
  50%    {transform:scale(1.3);box-shadow:0 0 0 6px rgba(255,209,102,0);}
}

.hero3d h1 {
  font-size:clamp(2.55rem,4.9vw,4.8rem);
  line-height:1.06;color:white;margin-bottom:20px;
  animation:h1Slide 1s ease 0.5s both;
  text-shadow:0 4px 24px rgba(0,0,0,0.4);
}
@keyframes h1Slide {
  from{opacity:0;transform:translateY(20px);}
  to  {opacity:1;transform:none;}
}
.hero3d h1 em {
  font-style:normal;
  background: none;
  color: #d6a84f;
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}

.hero3d-copy {
  font-size:clamp(.92rem,1.2vw,1rem);
  color:rgba(255,255,255,0.82);line-height:1.7;max-width:540px;
  animation:h1Slide 1s ease 0.7s both;
}

.hero3d-actions {
  display:flex;gap:14px;flex-wrap:wrap;margin-top:32px;
  animation:h1Slide 1s ease 0.9s both;
}

.btn3d-primary {
  display:inline-flex;align-items:center;gap:8px;
  background:#2f7d55;
  color:#fff;font-weight:800;font-family:var(--body);font-size:0.88rem;
  padding:12px 20px;border-radius:5px;text-decoration:none;
  box-shadow:0 8px 24px rgba(0,0,0,0.18);
  transition:transform 0.25s ease,box-shadow 0.25s ease;
}
.btn3d-primary:hover{transform:translateY(-3px);box-shadow:0 16px 48px rgba(255,160,28,0.6);}

.btn3d-ghost {
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,255,255,0.12);color:white;font-weight:800;
  font-family:var(--body);font-size:0.95rem;
  padding:12px 20px;border-radius:5px;
  border:1px solid rgba(255,255,255,0.25);text-decoration:none;
  backdrop-filter:blur(6px);
  transition:transform 0.25s ease,background 0.25s ease;
}
.btn3d-ghost:hover{transform:translateY(-3px);background:rgba(255,255,255,0.2);}

.hero3d-contact {
  display:flex;gap:20px;flex-wrap:wrap;margin-top:28px;
  animation:h1Slide 1s ease 1.1s both;
}
.hero3d-contact a {
  display:inline-flex;align-items:center;gap:8px;
  color:rgba(255,255,255,0.7);font-size:0.88rem;font-weight:700;
  text-decoration:none;transition:color 0.2s;
}
.hero3d-contact a:hover{color:#ffd166;}
.hero3d-contact i{color:#ffd166;}

/* =============================================
   POWER DEMO 3D CARD
   ============================================= */
.power-demo3d {
  background:rgba(8,28,52,0.78);
  border:1px solid rgba(80,160,255,0.2);
  border-radius:8px;padding:16px;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  box-shadow:0 20px 48px rgba(0,0,0,0.32),0 0 0 1px rgba(255,255,255,0.04),inset 0 1px 0 rgba(255,255,255,0.08);
  animation:cardSlide 1s ease 0.8s both;
  position:relative;overflow:hidden;
  transform:translateZ(0);
}
.power-demo3d::before {
  content:"";
  position:absolute;top:-1px;left:-1px;right:-1px;height:2px;
  background:linear-gradient(90deg,transparent,rgba(80,180,255,0.8),#ffd166,rgba(80,180,255,0.8),transparent);
  border-radius:24px 24px 0 0;
}
@keyframes cardSlide {
  from{opacity:0;transform:translateX(32px);}
  to  {opacity:1;transform:none;}
}

.demo3d-header {
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:12px;gap:8px;
}
.demo3d-title {
  font-weight:800;font-size:0.88rem;
  color:rgba(255,255,255,0.9);letter-spacing:0.04em;
}
.demo3d-live {
  display:inline-flex;align-items:center;gap:7px;
  font-size:0.72rem;font-weight:800;color:#4ade80;
  background:rgba(74,222,128,0.1);
  border:1px solid rgba(74,222,128,0.25);
  border-radius:999px;padding:4px 10px;white-space:nowrap;
}
.live-dot3d {
  width:7px;height:7px;background:#4ade80;border-radius:50%;
  animation:livePulse 1.4s ease-in-out infinite;
}
@keyframes livePulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:0.4;transform:scale(0.6);}}

/* =============================================
   FLOW 3D SCENE
   ============================================= */
.flow3d-scene {
  display:flex;align-items:center;justify-content:space-between;
  gap:6px;margin-bottom:10px;padding:10px 0;
}

.flow3d-node {
  display:flex;flex-direction:column;align-items:center;
  gap:4px;flex:0 0 auto;position:relative;
}

.node3d-icon {
  width:48px;height:48px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  transition:transform 0.25s ease,box-shadow 0.25s ease;
  position:relative;overflow:hidden;
  will-change:transform;
}
.node3d-icon::after {
  content:"";position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,0.12) 0%,transparent 60%);
  border-radius:inherit;
}
.node3d-icon svg{width:22px;height:22px;position:relative;z-index:1;}

.node-solar3d .node3d-icon {
  background:linear-gradient(135deg,#ffb800,#ff6f00);
  box-shadow:0 6px 20px rgba(255,180,0,0.4);color:#fff;
  animation:nodeFloat 3s ease-in-out infinite;
}
.node-home3d .node3d-icon {
  background:linear-gradient(135deg,#22c55e,#15803d);
  box-shadow:0 6px 20px rgba(34,197,94,0.35);color:#fff;
  animation:nodeFloat 3s ease-in-out infinite 0.6s;
}
.node-grid3d .node3d-icon {
  background:linear-gradient(135deg,#3b82f6,#1d4ed8);
  box-shadow:0 6px 20px rgba(59,130,246,0.35);color:#fff;
  animation:nodeFloat 3s ease-in-out infinite 1.2s;
}
@keyframes nodeFloat{
  0%,100%{transform:translateY(0);}
  50%    {transform:translateY(-3px);}
}
.node3d-icon.node-bump {
  transform:scale(1.18) !important;
}

.hero3d[data-period="night"] .node-grid3d .node3d-icon {
  background:linear-gradient(135deg,#f97316,#ea580c);
  box-shadow:0 6px 20px rgba(249,115,22,0.4);
}
.hero3d[data-period="night"] .node-solar3d .node3d-icon {
  background:linear-gradient(135deg,#475569,#1e293b);
  box-shadow:0 6px 20px rgba(100,100,100,0.2);
  animation:none;
}

.node3d-label {
  font-size:0.7rem;font-weight:800;
  color:rgba(255,255,255,0.6);letter-spacing:0.06em;text-transform:uppercase;text-align:center;
}
.node3d-value {
  font-size:0.82rem;font-weight:900;
  color:#ffd166;font-family:var(--display,'Sora',sans-serif);text-align:center;
}

/* Flow Arrows */
.flow3d-arrow {
  flex:1;position:relative;height:6px;
  display:flex;align-items:center;min-width:0;
}
.flow3d-path {
  width:100%;height:3px;border-radius:3px;position:relative;overflow:visible;
}
.arrow-primary .flow3d-path  { background:linear-gradient(to right,rgba(255,184,0,0.3),rgba(255,184,0,0.6)); }
.arrow-secondary .flow3d-path { background:linear-gradient(to right,rgba(34,197,94,0.3),rgba(59,130,246,0.6)); }
.hero3d[data-period="night"] .arrow-secondary .flow3d-path {
  background:linear-gradient(to left,rgba(249,115,22,0.3),rgba(249,115,22,0.6));
}

.flow3d-particle {
  position:absolute;width:10px;height:10px;border-radius:50%;
  top:50%;transform:translateY(-50%);
  will-change:left, opacity;
}
.arrow-primary .flow3d-particle   { background:radial-gradient(circle,#ffe566,#ffb800);box-shadow:0 0 8px rgba(255,220,0,0.8); }
.arrow-secondary .flow3d-particle { background:radial-gradient(circle,#86efac,#22c55e);box-shadow:0 0 8px rgba(34,197,94,0.8); }
.hero3d[data-period="night"] .arrow-secondary .flow3d-particle {
  background:radial-gradient(circle,#fdba74,#f97316);
  box-shadow:0 0 8px rgba(249,115,22,0.8);
}

.flow3d-particle.p1{animation:particleFlow 2s  linear infinite;}
.flow3d-particle.p2{animation:particleFlow 2s  linear infinite 0.67s;}
.flow3d-particle.p3{animation:particleFlow 2s  linear infinite 1.33s;}
@keyframes particleFlow{
  0%  {left:-5px;opacity:0;}
  10% {opacity:1;}
  90% {opacity:1;}
  100%{left:calc(100% + 5px);opacity:0;}
}
.hero3d[data-period="night"] .arrow-secondary .flow3d-particle.p1{animation:particleFlowRev 2s linear infinite;}
.hero3d[data-period="night"] .arrow-secondary .flow3d-particle.p2{animation:particleFlowRev 2s linear infinite 0.67s;}
.hero3d[data-period="night"] .arrow-secondary .flow3d-particle.p3{animation:particleFlowRev 2s linear infinite 1.33s;}
@keyframes particleFlowRev{
  0%  {left:calc(100% + 5px);opacity:0;}
  10% {opacity:1;}
  90% {opacity:1;}
  100%{left:-5px;opacity:0;}
}

.hero3d[data-period="night"] #flowArrow1{opacity:0.15;}
.hero3d[data-period="night"] #flowArrow1 .flow3d-particle{display:none;}

.flow3d-arrow-head {
  width:0;height:0;
  border-top:5px solid transparent;border-bottom:5px solid transparent;
  flex-shrink:0;margin-left:2px;
}
.arrow-primary  .flow3d-arrow-head{border-left:8px solid rgba(255,184,0,0.7);}
.arrow-secondary .flow3d-arrow-head{border-left:8px solid rgba(59,130,246,0.7);}
.hero3d[data-period="night"] .arrow-secondary .flow3d-arrow-head{border-left:none;border-right:8px solid rgba(249,115,22,0.7);}

/* =============================================
   STATUS & TOTALS
   ============================================= */
.flow3d-status {
  display:flex;gap:6px;align-items:baseline;
  padding:7px 10px;
  background:rgba(255,255,255,0.05);border-radius:8px;
  margin-bottom:10px;border-left:3px solid #ffd166;
}
.flow3d-status strong{color:#ffd166;font-size:0.82rem;white-space:nowrap;flex-shrink:0;}
.flow3d-status span{color:rgba(255,255,255,0.7);font-size:0.75rem;line-height:1.4;}

.energy-totals3d {
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:6px;margin:0 0 10px;
}
.total3d-item {
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.07);
  border-radius:8px;padding:7px 10px;
  transition:background 0.3s ease;
}
.total3d-item:hover{background:rgba(255,255,255,0.08);}
.total3d-item dt{
  font-size:0.64rem;font-weight:800;
  color:rgba(255,255,255,0.45);letter-spacing:0.08em;text-transform:uppercase;margin-bottom:2px;
}
.total3d-item dd{
  margin:0;font-size:0.92rem;font-weight:900;color:white;
  font-family:var(--display,'Sora',sans-serif);
  display:flex;align-items:baseline;gap:3px;
}
.total3d-item dd small{font-size:0.68rem;font-weight:700;color:rgba(255,255,255,0.45);}
.val-export{color:#4ade80;}
.val-import{color:#f97316;}

/* =============================================
   DEMO CONTROLS
   ============================================= */
.demo3d-controls {
  display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:10px;
}
.period-toggle3d{display:flex;gap:4px;flex-wrap:wrap;flex:1;}
.period-btn3d {
  flex:1;min-width:0;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:8px;color:rgba(255,255,255,0.6);
  cursor:pointer;font:700 0.72rem var(--body);
  padding:7px 4px;text-align:center;white-space:nowrap;
  transition:background 0.2s,color 0.2s,border-color 0.2s,transform 0.15s;
}
.period-btn3d:hover{background:rgba(255,255,255,0.12);color:rgba(255,255,255,0.9);transform:translateY(-1px);}
.period-btn3d.active{
  background:rgba(47,125,85,.28);
  border-color:rgba(93,157,115,.7);color:#b8ddc5;
}

.pause-btn3d {
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:8px;color:rgba(255,255,255,0.6);
  cursor:pointer;font:700 0.72rem var(--body);
  padding:7px 10px;white-space:nowrap;
  transition:background 0.2s,color 0.2s;
  display:flex;align-items:center;gap:5px;
}
.pause-btn3d:hover{background:rgba(255,255,255,0.12);color:white;}

.meter-note3d{font-size:0.66rem;color:rgba(255,255,255,0.3);line-height:1.5;margin:0;}

/* =============================================
   PAUSED STATE
   ============================================= */
.hero3d.is-paused .flow3d-particle{animation-play-state:paused!important;}
.hero3d.is-paused .live-dot3d{background:rgba(255,255,255,0.4);animation:none;}
.hero3d.is-paused .sun-rays{animation-play-state:paused;}
.hero3d.is-paused .sun-core3d,
.hero3d.is-paused .sun-core3d::after{animation-play-state:paused;}
.hero3d.is-paused .node3d-icon{animation-play-state:paused;}

/* Pause all animations when scrolled offscreen */
.hero3d.hero-offscreen *,
.hero3d.hero-offscreen *::before,
.hero3d.hero-offscreen *::after {
  animation-play-state: paused !important;
}

@media (prefers-reduced-motion: reduce) {
  .hero3d *,
  .hero3d *::before,
  .hero3d *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* =============================================
   RESPONSIVE
   ============================================= */
@media (max-width:1100px){
  .hero3d-inner{grid-template-columns:1fr;gap:32px;padding-top:130px;}
  .sun3d{width:90px;height:90px;}
  .hero3d[data-period="morning"] .sun3d{top:16%;left:15%;}
  .hero3d[data-period="day"]     .sun3d{top:5%; left:48%;}
  .hero3d[data-period="evening"] .sun3d{top:16%;left:82%;}
}
@media (max-width:680px){
  .hero3d h1{font-size:2.4rem;}
  .power-demo3d{padding:16px;}
  .flow3d-scene{gap:4px;}
  .node3d-icon{width:50px;height:50px;}
  .node3d-icon svg{width:22px;height:22px;}
  .period-btn3d{font-size:0.66rem;padding:6px 2px;}
  .sun3d{width:70px;height:70px;}
  .scene-house,.scene-panels{display:none;}
}

/* Keep the photographic treatment after the interactive period themes. */
.hero3d .sky-gradient,
.hero3d[data-period="morning"] .sky-gradient,
.hero3d[data-period="day"] .sky-gradient,
.hero3d[data-period="evening"] .sky-gradient,
.hero3d[data-period="night"] .sky-gradient {
  background:
    linear-gradient(90deg, rgba(9, 28, 43, .92) 0%, rgba(9, 28, 43, .72) 42%, rgba(9, 28, 43, .32) 100%),
    linear-gradient(180deg, rgba(10, 34, 52, .18), rgba(10, 34, 52, .58)),
    url("https://images.unsplash.com/photo-1509391366360-2e959784a276?auto=format&fit=crop&w=2200&q=88") center/cover;
}