/* page-battery2.css: Battery storage service page (study 07 design language) */

body{
  background:var(--cream);color:var(--teal);
  font-family:'DM Sans',sans-serif;font-size:17px;line-height:1.65;
  overflow-x:hidden;
}
body::after{
  content:"";position:fixed;inset:0;z-index:99;pointer-events:none;opacity:.4;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.11 0 0 0 0 0.28 0 0 0 0 0.35 0 0 0 0.03 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E");
}
section{padding:clamp(60px,9vh,110px) 0}

/* night machine theming (teal section, like solar's #day) */
#night{background:var(--teal);color:var(--cream);position:relative;overflow:hidden}
#night::before{
  content:"";position:absolute;left:0;right:0;top:0;height:8px;
  background:repeating-linear-gradient(90deg,var(--marigold) 0 40px,transparent 40px 80px);
}
#night .sec-kick{color:var(--marigold)}
#night .script{color:var(--cream)}
#night .sec-sub{color:rgba(251,243,226,.75)}

/* the moon handle */
.moon-sprite{
  position:absolute;width:clamp(56px,10%,92px);aspect-ratio:1;
  left:8%;top:60%;transform:translate(-50%,-50%);
  cursor:grab;user-select:none;-webkit-user-select:none;
  filter:drop-shadow(0 0 14px rgba(251,243,226,.5));
  transition:opacity .3s;
}
.moon-sprite.dim{opacity:.55;filter:none}
.moon-sprite.dragging{cursor:grabbing}

/* battery gauge */
.batt-gauge{margin-bottom:20px}
.bg-label{
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  font-family:'Teko',sans-serif;font-weight:500;font-size:16px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(251,243,226,.75);margin-bottom:8px;
}
.bg-label b{font-size:26px;color:var(--marigold);font-weight:600}
.bg-bar{
  height:22px;border:2px solid rgba(251,243,226,.5);border-radius:12px;
  padding:3px;position:relative;
}
.bg-bar::after{
  content:"";position:absolute;right:-9px;top:50%;transform:translateY(-50%);
  width:6px;height:12px;border-radius:0 3px 3px 0;background:rgba(251,243,226,.5);
}
.bg-bar i{
  display:block;height:100%;border-radius:7px;width:100%;
  background:repeating-linear-gradient(-45deg,var(--marigold) 0 12px,color-mix(in srgb,var(--marigold) 82%, var(--rust)) 12px 24px);
  transition:width .2s linear;
}

/* mobile polish */
@media(max-width:760px){
  .hero-scene img{height:52vh;min-height:320px;object-fit:cover;object-position:40% 45%}
  .hero-copy{margin-top:-56px}
  .hero-copy h1{font-size:clamp(34px,10vw,50px)}
  section{padding:clamp(48px,7vh,80px) 0}
  .sec-sub{padding:0 6px}
  .spread{margin-top:44px}
  .day-stage{padding:10px 10px 8px}
}