/* ============================================================
   SP SOLAR — coming soon
   The scene is driven entirely by CSS variables that app.js
   rewrites every frame as the sun moves.
   ============================================================ */

:root{
  /* live values, overwritten by JS */
  --sun-x: 50%;
  --sun-y: 30%;
  --sky-1: #0a3d6b;
  --sky-2: #2b8cc4;
  --sky-3: #ffd9a0;
  --sun-c: 255,214,110;
  --sun-s: 1;          /* size multiplier            */
  --lum:   1;          /* 0 = night, 1 = full day    */
  --night: 0;          /* inverse of --lum, eased    */
  --flow:  1.6s;       /* power-line dash speed      */

  --ink:  #05070f;
  --leaf: #35d6a4;
}

*{ -webkit-tap-highlight-color: transparent; }

html,body{ height:100%; overscroll-behavior:none; }
body{
  overflow:hidden;
  font-feature-settings:"cv11","ss01";
  cursor: crosshair;
}

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ============================================================
   SCENE
   ============================================================ */
.scene{ position:fixed; inset:0; z-index:0; overflow:hidden; touch-action:none; }

.sky{
  position:absolute; inset:-2px;
  background:
    radial-gradient(120% 80% at var(--sun-x) var(--sun-y),
      rgba(var(--sun-c), calc(.30 * var(--lum))) 0%,
      rgba(var(--sun-c), calc(.10 * var(--lum))) 26%,
      transparent 62%),
    linear-gradient(to bottom, var(--sky-1) 0%, var(--sky-2) 52%, var(--sky-3) 100%);
}

/* --- stars ------------------------------------------------ */
.stars{ position:absolute; inset:0; opacity:var(--night); transition:opacity .5s linear; }
.star{
  position:absolute; width:2px; height:2px; border-radius:50%;
  background:#fff; box-shadow:0 0 5px rgba(255,255,255,.85);
  animation: tw 4s ease-in-out infinite;
}
@keyframes tw{ 0%,100%{opacity:.18; transform:scale(.7)} 50%{opacity:1; transform:scale(1)} }

/* --- sun / moon ------------------------------------------- */
.sun{
  position:absolute; left:var(--sun-x); top:var(--sun-y);
  width:0; height:0;
  transform:translateZ(0);
  will-change:left,top;
}
.sun > *{ position:absolute; left:50%; top:50%; translate:-50% -50%; border-radius:50%; }

.sun__halo{
  width:calc(96vmin * var(--sun-s)); height:calc(96vmin * var(--sun-s));
  background:radial-gradient(circle, rgba(var(--sun-c),.20) 0%, rgba(var(--sun-c),.06) 38%, transparent 70%);
  opacity:calc(.25 + .75 * var(--lum));
  filter:blur(6px);
}
.sun__glow{
  width:calc(26vmin * var(--sun-s)); height:calc(26vmin * var(--sun-s));
  background:radial-gradient(circle, rgba(var(--sun-c),.85) 0%, rgba(var(--sun-c),.32) 42%, transparent 72%);
  filter:blur(10px);
}
.sun__core{
  width:calc(6.4vmin * var(--sun-s)); height:calc(6.4vmin * var(--sun-s));
  background:radial-gradient(circle at 38% 34%, #fff 0%, rgb(var(--sun-c)) 58%, rgba(var(--sun-c),.65) 100%);
  box-shadow:0 0 60px 12px rgba(var(--sun-c),.55), 0 0 160px 40px rgba(var(--sun-c),.22);
}
/* moon craters, only visible once it's night */
.sun__core::before,
.sun__core::after{
  content:""; position:absolute; border-radius:50%;
  background:rgba(90,105,150,.30); opacity:var(--night);
}
.sun__core::before{ width:26%; height:26%; left:22%; top:30%; }
.sun__core::after { width:15%; height:15%; left:58%; top:58%; }

.sun__rays{
  width:calc(38vmin * var(--sun-s)); height:calc(38vmin * var(--sun-s));
  background:conic-gradient(from 0deg,
    rgba(var(--sun-c),.16) 0deg 6deg, transparent 6deg 30deg,
    rgba(var(--sun-c),.16) 30deg 36deg, transparent 36deg 60deg,
    rgba(var(--sun-c),.16) 60deg 66deg, transparent 66deg 90deg,
    rgba(var(--sun-c),.16) 90deg 96deg, transparent 96deg 120deg,
    rgba(var(--sun-c),.16) 120deg 126deg, transparent 126deg 150deg,
    rgba(var(--sun-c),.16) 150deg 156deg, transparent 156deg 180deg,
    rgba(var(--sun-c),.16) 180deg 186deg, transparent 186deg 210deg,
    rgba(var(--sun-c),.16) 210deg 216deg, transparent 216deg 240deg,
    rgba(var(--sun-c),.16) 240deg 246deg, transparent 246deg 270deg,
    rgba(var(--sun-c),.16) 270deg 276deg, transparent 276deg 300deg,
    rgba(var(--sun-c),.16) 300deg 306deg, transparent 306deg 330deg,
    rgba(var(--sun-c),.16) 330deg 336deg, transparent 336deg 360deg);
  mask:radial-gradient(circle, transparent 16%, #000 34%, transparent 72%);
  -webkit-mask:radial-gradient(circle, transparent 16%, #000 34%, transparent 72%);
  opacity:calc(.55 * var(--lum));
  filter:blur(1.5px);
  animation:spin 90s linear infinite;
}
/* uses the `rotate` property so it never clobbers the `translate` centring */
@keyframes spin{ from{ rotate:0deg } to{ rotate:360deg } }

/* --- lens flare ------------------------------------------- */
.flares{ position:absolute; inset:0; opacity:calc(.5 * var(--lum)); mix-blend-mode:screen; }
.flare{
  position:absolute; border-radius:50%; translate:-50% -50%;
  border:1px solid rgba(var(--sun-c),.22);
  background:radial-gradient(circle, rgba(var(--sun-c),.14), transparent 70%);
}

/* wide low-angle light wash across the rooftops */
.beam{
  position:absolute; inset:auto 0 0 0; height:46%;
  background:linear-gradient(to top, rgba(var(--sun-c),.20), transparent 78%);
  opacity:var(--lum); mix-blend-mode:screen; pointer-events:none;
}
.haze{
  position:absolute; inset:auto 0 0 0; height:34%;
  background:linear-gradient(to top, rgba(255,255,255,.10), transparent);
  opacity:calc(.6 * var(--lum));
}

/* ============================================================
   SKYLINE + PANELS
   ============================================================ */
.skyline{ position:absolute; inset:0; }

.bldg{
  position:absolute; bottom:8.5%;
  background:linear-gradient(to top, #04060d 0%, #0a1020 62%, #131e38 100%);
  box-shadow:0 -14px 40px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.035);
}
/* roofline catches the light — this is what makes the skyline read */
.bldg::before{
  content:""; position:absolute; left:0; right:0; top:0; height:2px;
  background:rgb(var(--sun-c));
  opacity:calc(.12 + .55 * var(--lum));
  box-shadow:0 0 12px rgba(var(--sun-c),.5);
}
.bldg::after{ /* warm wash down the sunlit face */
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, transparent 42%, rgba(var(--sun-c),.30));
  opacity:calc(.25 + .75 * var(--lum));
}
.win{
  position:absolute; width:5px; height:7px; border-radius:1px;
  background:rgba(var(--sun-c),.9);
  box-shadow:0 0 8px rgba(var(--sun-c),.7);
  opacity:calc(var(--night) * var(--w, .8));
  transition:opacity .6s ease;
}

/* solar panels ------------------------------------------- */
.panel{ position:absolute; bottom:100%; width:var(--pw,52px); height:0; }
.panel__mast{
  position:absolute; left:50%; bottom:0; width:2px; height:9px;
  translate:-50% 0; background:#0d1526;
}
.panel__face{
  position:absolute; left:0; bottom:9px; width:100%; height:calc(var(--pw,52px) * .40);
  transform-origin:50% 100%;
  rotate: var(--tilt, 0deg);
  border-radius:2px;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.10) 0 1px, transparent 1px 25%),
    repeating-linear-gradient(0deg,  rgba(255,255,255,.10) 0 1px, transparent 1px 50%),
    linear-gradient(160deg, #16305c 0%, #0c1c3a 55%, #071227 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.10), 0 6px 14px rgba(0,0,0,.45);
  will-change:rotate;
}
.panel__face::after{ /* specular catch — brightens as the panel aligns with the sun */
  content:""; position:absolute; inset:0; border-radius:2px;
  background:linear-gradient(150deg, rgba(var(--sun-c),.95) 0%, rgba(var(--sun-c),.35) 40%, transparent 72%);
  opacity:calc(var(--al, 0) * .85);
}
.panel__led{
  position:absolute; left:50%; bottom:1px; width:3px; height:3px; translate:-50% 0;
  border-radius:50%; background:var(--leaf,#35d6a4);
  box-shadow:0 0 6px #35d6a4; opacity:var(--night);
  animation:blink 2.4s steps(1) infinite;
}
@keyframes blink{ 0%,72%{opacity:var(--night)} 73%,100%{opacity:calc(var(--night) * .15)} }

/* ground + live power line -------------------------------- */
/* z-index lifts the ground + live power line above .scrim so the
   energy flowing off the array stays visible behind the footer */
.ground{
  position:absolute; inset:auto 0 0 0; height:8.5%; z-index:3;
  background:linear-gradient(to bottom, rgba(3,5,12,.65), #010207 70%);
  border-top:1px solid rgba(255,255,255,.07);
}
.wire{
  position:absolute; left:0; right:0; top:-2px; height:2px;
  background:repeating-linear-gradient(90deg,
    var(--leaf) 0 11px, transparent 11px 26px);
  opacity:calc(.35 + .55 * var(--lum));
  animation:flow var(--flow) linear infinite;
  filter:drop-shadow(0 0 6px rgba(53,214,164,.85));
}
@keyframes flow{ to{ background-position-x:26px } }

/* --- overlays --------------------------------------------- */
.scrim{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    linear-gradient(to right, rgba(5,7,15,.86) 0%, rgba(5,7,15,.55) 46%, transparent 78%),
    linear-gradient(to top,   rgba(5,7,15,.94) 0%, transparent 34%);
}
.vignette{
  position:absolute; inset:0; z-index:4; pointer-events:none;
  box-shadow:inset 0 0 200px 40px rgba(0,0,0,.55);
}
.grain{
  position:absolute; inset:0; z-index:4; pointer-events:none; opacity:.16; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='.55'/></svg>");
}

/* ============================================================
   UI
   ============================================================ */
/* the crosshair advertises the draggable sky; the UI keeps normal cursors */
main{ height:100%; pointer-events:none; cursor:default; }
main a, main button, main input, main form, main label{ pointer-events:auto; }
.contact, .cx{ pointer-events:auto; }
.chips li{ cursor:pointer; }

/* logo */
.brand{ position:relative; display:inline-flex; align-items:center; }
.brand::before{ /* warm halo so the white mark sits in the scene, not on it */
  content:""; position:absolute; left:-18px; top:50%;
  width:74px; height:74px; translate:0 -50%; border-radius:50%;
  background:radial-gradient(circle, rgba(255,176,32,.26), transparent 66%);
  opacity:.7; transition:opacity .35s;
}
.brand:hover::before{ opacity:1; }
.brand__img{
  position:relative; display:block;
  height:70px; width:auto;
  filter:drop-shadow(0 2px 10px rgba(0,0,0,.5));
}

/* status pill */
.status{
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 13px; border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(5,7,15,.42); backdrop-filter:blur(10px);
  color:rgba(255,255,255,.72);
}
.status__dot{
  width:6px; height:6px; border-radius:50%; background:#35d6a4;
  box-shadow:0 0 0 0 rgba(53,214,164,.6); animation:pulse 2.2s ease-out infinite;
}
@keyframes pulse{ to{ box-shadow:0 0 0 9px rgba(53,214,164,0) } }

/* eyebrow */
.eyebrow{
  display:flex; align-items:center; gap:12px;
  font-family:"JetBrains Mono",monospace; font-size:10.5px;
  letter-spacing:.26em; text-transform:uppercase; color:rgba(255,255,255,.5);
}
.eyebrow__line{ width:34px; height:1px; background:linear-gradient(90deg,#ffb020,transparent); }

/* headline */
.headline{
  font-family:"Bricolage Grotesque",sans-serif; font-weight:800;
  font-size:clamp(2.4rem, 7.4vw, 5.4rem);
  line-height:.94; letter-spacing:-.035em;
  text-wrap:balance;
  text-shadow:0 12px 50px rgba(0,0,0,.55);
}
.headline em{
  font-weight:400; letter-spacing:0;
  font-size:1.05em; line-height:1;
  text-shadow:0 0 42px rgba(255,176,32,.45);
}

/* ---------- contact tiles ---------- */
.cx{
  position:relative; display:flex; align-items:center; gap:11px; min-width:0;
  padding:12px 13px; border-radius:14px;
  border:1px solid rgba(255,255,255,.13);
  background:rgba(9,12,22,.5); backdrop-filter:blur(12px);
  overflow:hidden;
  transition:transform .25s cubic-bezier(.2,.8,.3,1), border-color .25s, background .25s, box-shadow .25s;
}
.cx::before{ /* warm sheen that sweeps in on hover */
  content:""; position:absolute; inset:0;
  background:linear-gradient(120deg, rgba(255,176,32,.16), transparent 62%);
  opacity:0; transition:opacity .3s;
}
.cx:hover{
  transform:translateY(-3px);
  border-color:rgba(255,176,32,.5);
  background:rgba(9,12,22,.72);
  box-shadow:0 14px 34px rgba(0,0,0,.4);
}
.cx:hover::before{ opacity:1; }

.cx__ico{
  position:relative; display:grid; place-items:center; flex:none;
  width:34px; height:34px; border-radius:10px;
  border:1px solid rgba(255,176,32,.3);
  background:rgba(255,176,32,.11); color:#ffb020;
  transition:background .25s, color .25s, border-color .25s;
}
.cx:hover .cx__ico{ background:rgba(255,176,32,.2); color:#ffd07a; }

.cx__body{ position:relative; display:flex; flex-direction:column; }
.cx__k{
  font-family:"JetBrains Mono",monospace; font-size:8.5px;
  letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.42);
}
/* tiles size to their content, so real numbers/emails are never clipped */
.cx__v{
  margin-top:3px; font-size:13px; font-weight:500; color:rgba(255,255,255,.94);
  white-space:nowrap;
}

/* WhatsApp gets the green treatment — it's the fastest way to reach a rooftop team */
.cx--wa::before{ background:linear-gradient(120deg, rgba(37,211,102,.18), transparent 62%); }
.cx--wa .cx__ico{ border-color:rgba(37,211,102,.34); background:rgba(37,211,102,.12); color:#25d366; }
.cx--wa:hover{ border-color:rgba(37,211,102,.55); }
.cx--wa:hover .cx__ico{ background:rgba(37,211,102,.22); color:#5ff09a; }

/* the address isn't a link, so it shouldn't behave like one */
.cx--static{ cursor:default; }
.cx--static:hover{ transform:none; border-color:rgba(255,255,255,.13); background:rgba(9,12,22,.5); box-shadow:none; }
.cx--static:hover::before{ opacity:0; }
.cx--static:hover .cx__ico{ background:rgba(255,176,32,.11); color:#ffb020; }

/* chips */
.chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chips li{
  padding:7px 13px; border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.035); backdrop-filter:blur(8px);
  font-size:11.5px; color:rgba(255,255,255,.68);
  transition:border-color .25s, color .25s, transform .25s, background .25s;
}
.chips li:hover{
  border-color:rgba(255,176,32,.55); color:#fff;
  background:rgba(255,176,32,.08); transform:translateY(-2px);
}
.chips__gov{
  border-color:rgba(53,214,164,.35) !important;
  color:rgba(53,214,164,.95) !important;
}

/* footer credits */
.foot{
  font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(255,255,255,.35);
}
.foot__sep{
  width:3px; height:3px; border-radius:50%;
  background:rgba(255,255,255,.22);
}
.credit{
  position:relative; color:rgba(255,255,255,.6);
  transition:color .25s, text-shadow .25s;
}
.credit::after{ /* amber underline that wipes in from the left */
  content:""; position:absolute; left:0; right:0; bottom:-3px; height:1px;
  background:linear-gradient(90deg,#ffb020,#ff7a18);
  transform:scaleX(0); transform-origin:left; transition:transform .3s cubic-bezier(.2,.8,.3,1);
}
.credit:hover{ color:#ffc44d; text-shadow:0 0 18px rgba(255,176,32,.5); }
.credit:hover::after{ transform:scaleX(1); }

/* drag hint */
.hint{ color:rgba(255,255,255,.45); display:flex; align-items:center; gap:8px; transition:opacity .6s; }
.hint.gone{ opacity:0; }
.hint__dot{
  width:9px; height:9px; border-radius:50%;
  border:1px solid rgba(255,176,32,.9);
  animation:nudge 2.4s ease-in-out infinite;
}
@keyframes nudge{ 0%,100%{ transform:translateX(0); opacity:.45 } 50%{ transform:translateX(6px); opacity:1 } }

/* ============================================================
   HUD
   ============================================================ */
.hud{
  position:fixed; right:22px; bottom:22px; z-index:20; width:214px;
  padding:14px 16px 15px; border-radius:15px;
  border:1px solid rgba(255,255,255,.13);
  background:rgba(6,9,18,.62); backdrop-filter:blur(16px) saturate(140%);
  box-shadow:0 20px 60px rgba(0,0,0,.5);
  font-family:"JetBrains Mono",monospace; color:#fff;
  pointer-events:none;
}
.hud__head{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.hud__title{ font-size:9px; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.42); }
.hud__state{
  font-size:8.5px; font-weight:700; letter-spacing:.14em;
  padding:3px 7px; border-radius:5px;
  color:#35d6a4; background:rgba(53,214,164,.12); border:1px solid rgba(53,214,164,.3);
}
.hud__state.night{ color:#8ea4ff; background:rgba(142,164,255,.12); border-color:rgba(142,164,255,.3); }

.hud__big{ margin-top:9px; font-size:34px; font-weight:700; line-height:1; letter-spacing:-.04em;
  font-variant-numeric:tabular-nums; color:#ffc44d; }
.hud__big small{ margin-left:5px; font-size:12px; font-weight:400; color:rgba(255,255,255,.4); letter-spacing:0; }

.hud__bar{ margin-top:11px; height:4px; border-radius:99px; background:rgba(255,255,255,.10); overflow:hidden; }
.hud__bar i{
  display:block; height:100%; width:0%; border-radius:99px;
  background:linear-gradient(90deg,#ff7a18,#ffc44d);
  box-shadow:0 0 12px rgba(255,176,32,.6);
  transition:width .12s linear;
}

.hud__grid{ margin-top:13px; display:grid; grid-template-columns:1fr 1fr; gap:9px 10px; }
.hud__grid dt{ font-size:8.5px; letter-spacing:.13em; text-transform:uppercase; color:rgba(255,255,255,.36); }
.hud__grid dd{ margin-top:2px; font-size:12px; font-variant-numeric:tabular-nums; color:rgba(255,255,255,.88); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1024px){
  .hud{ width:190px; right:16px; bottom:16px; }
  .hud__big{ font-size:29px; }
}

@media (max-width:768px){
  html,body{ height:auto; min-height:100%; }
  body{ overflow-x:hidden; overflow-y:auto; cursor:default; }
  main{ min-height:100svh; height:auto; }

  /* let the page scroll vertically, but still steer the sun sideways */
  .scene{ touch-action:pan-y; }

  .scrim{ background:linear-gradient(to top, rgba(5,7,15,.95) 12%, rgba(5,7,15,.62) 55%, rgba(5,7,15,.35) 100%); }
  .headline{ font-size:clamp(2.15rem, 10.5vw, 3.4rem); }
  .brand__img{ height:55px; }

  .hud{
    position:relative; right:auto; bottom:auto; left:auto;
    width:auto; margin:0 1.5rem 1.75rem; border-radius:14px;
  }
  .hud__grid{ grid-template-columns:repeat(4,1fr); }
  .bldg{ opacity:.9; }

  /* the power line runs right through the footer at this height — give the
     text a soft bed so the dashes read as passing behind it */
  footer{ position:relative; }
  footer::before{
    content:""; position:absolute; inset:-10px -1.5rem -1.5rem; z-index:-1;
    background:linear-gradient(to top, rgba(5,7,15,.94) 58%, rgba(5,7,15,.5) 82%, transparent);
  }
}

@media (max-width:420px){
  .hud__grid{ grid-template-columns:1fr 1fr; }
}

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