/* Lightwell V5 — moonrise over the range. Loads after styles.css and overrides the palette + landscape. */
:root{
  --bg:#03080f;--surface:#081426;--surface-2:#122542;
  --purple:#3b6fd6;--purple-bright:#9cc3ff;--lilac:#dfe9ff;--alert:#f5c26b;--amber:#ffd28a;
  --text:#e8eefb;--muted:#8fa3c4;--dim:#4f6486;
  --line:rgba(156,195,255,.16);
}
.aura{background:radial-gradient(50% 40% at 15% 10%,rgba(59,111,214,.18),transparent 60%),radial-gradient(40% 35% at 90% 85%,rgba(156,195,255,.08),transparent 60%)}
.logo i{background:var(--purple-bright);box-shadow:0 0 14px var(--purple-bright)}
.btn-p:hover{box-shadow:0 18px 40px -16px rgba(59,111,214,.8)}
.chip{background:rgba(59,111,214,.28)}
.chip.stalled{background:rgba(245,194,107,.18);color:var(--alert)}
.fill{background:linear-gradient(90deg,var(--purple),var(--purple-bright))}
.rest{background:repeating-linear-gradient(135deg,rgba(245,194,107,.4) 0 3px,transparent 3px 8px)}
.split80 .rail b{background:repeating-linear-gradient(135deg,rgba(245,194,107,.55) 0 3px,transparent 3px 8px)}
input[type=range]::-webkit-slider-runnable-track{background:linear-gradient(90deg,var(--purple),var(--alert))}
input[type=range]::-moz-range-track{background:linear-gradient(90deg,var(--purple),var(--alert))}
.v-ok{background:rgba(59,111,214,.28)}.v-bad{background:rgba(245,194,107,.18);color:var(--alert)}
.svc::before,.tcard::before{background:radial-gradient(60% 50% at 100% 0%,rgba(59,111,214,.28),transparent 70%)}
.svc.dark{background:var(--purple)}
.rig-glow{background:radial-gradient(circle,rgba(59,111,214,.4),rgba(245,194,107,.06) 45%,transparent 70%)}
.mile .list div.on{border-color:var(--alert)}.mile .list div.on .k{color:var(--alert)}
.vis.ring::before{background:var(--purple-bright);box-shadow:0 0 0 14px rgba(156,195,255,.15),0 0 0 34px rgba(156,195,255,.08),0 0 0 62px rgba(156,195,255,.04)}
.vis.cardpay i{background:linear-gradient(135deg,#122542,#3b6fd6);box-shadow:0 30px 60px -20px rgba(59,111,214,.7)}
.person .av{background:linear-gradient(135deg,var(--purple),#122542)}
.person:nth-child(2) .av{background:linear-gradient(135deg,var(--alert),#5b3e12)}
.person:nth-child(3) .av{background:linear-gradient(135deg,var(--purple-bright),#2b4a7a)}
.cta .glow{background:radial-gradient(circle,rgba(59,111,214,.3),transparent 65%)}

/* ---------- landscape ---------- */
.land .stage{background:radial-gradient(120% 80% at 50% 110%,#213a5e 0%,#0d1c36 40%,#03080f 75%)}
.land .sky{background:linear-gradient(180deg,#02060d 0%,#071426 45%,#1a3660 100%)}
.land .stars{opacity:.85;transform:translateY(calc(var(--p) * -8vh))}
.land .moon{position:absolute;left:66%;top:74%;width:min(46vmin,420px);height:min(46vmin,420px);filter:none;opacity:1;border-radius:0;background:none;
  transform:translate(-50%,-50%) translate(calc(var(--p) * -8vw),calc(var(--p) * -58vh)) scale(calc(.8 + var(--p) * .35));will-change:transform}
.land .moon svg{position:relative;width:100%;height:100%;display:block;filter:drop-shadow(0 0 30px rgba(223,233,255,.55))}
.land .moon .halo{position:absolute;inset:-60%;border-radius:50%;background:radial-gradient(circle,rgba(223,233,255,.32) 0%,rgba(156,195,255,.14) 30%,rgba(156,195,255,0) 62%);
  opacity:calc(.5 + var(--p) * .6);transform:scale(calc(.8 + var(--p) * .5))}
.land .clouds{position:absolute;left:-10%;right:-10%;height:30vh;pointer-events:none;
  background:radial-gradient(28% 60% at 18% 60%,rgba(120,150,200,.28),transparent 70%),radial-gradient(22% 55% at 48% 40%,rgba(120,150,200,.22),transparent 70%),radial-gradient(30% 65% at 82% 55%,rgba(120,150,200,.26),transparent 70%);
  filter:blur(14px);animation:drift 60s linear infinite alternate}
.land .clouds.c1{top:44%;opacity:.7;transform:translateY(calc(var(--p) * -16vh))}
.land .clouds.c2{top:56%;opacity:.55;transform:translateY(calc(var(--p) * -26vh)) scaleX(-1);animation-duration:80s}
@keyframes drift{from{background-position:0 0}to{background-position:6vw 0}}
.ridge.m1{--c:#1a3057;transform:translateY(calc(var(--p) * -12vh))}
.ridge.m2{--c:#0e1f3c;transform:translateY(calc(var(--p) * -22vh))}
.ridge.m3{--c:#0a1729;transform:translateY(calc(var(--p) * -36vh))}
.ridge.m4{--c:#050c18;transform:translateY(calc(var(--p) * -52vh))}
.land .mist{bottom:4vh;height:36vh;background:linear-gradient(180deg,rgba(156,195,255,0) 0%,rgba(156,195,255,.14) 50%,rgba(156,195,255,0) 100%);
  transform:translateY(calc(var(--p) * -30vh)) scaleY(calc(1 + var(--p) * .6));opacity:calc(.9 - var(--p) * .6)}
.land .copy{transform:translateY(calc(var(--p) * -18vh));opacity:calc(1 - var(--p) * 1.9)}
.land h1{text-shadow:0 2px 30px rgba(3,8,15,.8)}
.land .kicker{color:var(--purple-bright)}
.readout{background:rgba(8,20,38,.78);top:auto;right:6vw;bottom:auto;top:15vh;transform:translateY(calc(var(--p) * -14vh)) rotate(-1.5deg);width:min(380px,88vw)}

/* short (subpage) hero: moon already partway up, still rises a little */
.land.short .moon{left:70%;top:46%;transform:translate(-50%,-50%) translate(0,calc(var(--p) * -14vh)) scale(calc(.9 + var(--p) * .1))}

/* panorama: moon starts behind the range and rises as the section scrolls into view */
.land.pano .moon{left:50%;top:78%;transform:translate(-50%,-50%) translate(0,calc(var(--q) * -56vh)) scale(calc(.7 + var(--q) * .45))}
.land.pano .moon .halo{opacity:calc(var(--q) * 1.1)}
.land.pano .stars{transform:none}
.land.pano .clouds.c1{transform:translateY(calc(10vh - var(--q) * 10vh))}
.land.pano .clouds.c2{transform:translateY(calc(16vh - var(--q) * 16vh)) scaleX(-1)}
.land.pano .ridge.m1{transform:translateY(calc(14vh - var(--q) * 14vh))}
.land.pano .ridge.m2{transform:translateY(calc(22vh - var(--q) * 22vh))}
.land.pano .ridge.m3{transform:translateY(calc(30vh - var(--q) * 28vh))}
.land.pano .ridge.m4{transform:translateY(calc(38vh - var(--q) * 34vh))}
.land.pano .copy{padding-top:12vh}
.land.pano h2{text-shadow:0 2px 30px rgba(3,8,15,.9)}

/* cta: the same moonrise, smaller */
.cta .stage{background:radial-gradient(120% 80% at 50% 110%,#213a5e 0%,#0d1c36 40%,#03080f 75%)}
.cta .sky{position:absolute;inset:0;background:linear-gradient(180deg,#03080f 0%,#071426 50%,#1a3660 100%);opacity:calc(var(--q) * .9)}
.cta .stars{position:absolute;inset:0;opacity:.6;background-image:radial-gradient(1px 1px at 12% 22%,#fff 60%,transparent 61%),radial-gradient(1.4px 1.4px at 28% 12%,#fff 60%,transparent 61%),radial-gradient(1px 1px at 44% 30%,#fff 60%,transparent 61%),radial-gradient(1px 1px at 58% 8%,#fff 60%,transparent 61%),radial-gradient(1.2px 1.2px at 80% 14%,#fff 60%,transparent 61%),radial-gradient(1px 1px at 90% 34%,#fff 60%,transparent 61%)}
.cta .moon{position:absolute;left:76%;top:74%;width:min(30vmin,260px);height:min(30vmin,260px);transform:translate(-50%,-50%) translate(0,calc(var(--q) * -30vh)) scale(calc(.8 + var(--q) * .3))}
.cta .moon svg{width:100%;height:100%;display:block;filter:drop-shadow(0 0 24px rgba(223,233,255,.5))}
.cta .moon .halo{position:absolute;inset:-60%;border-radius:50%;background:radial-gradient(circle,rgba(223,233,255,.28) 0%,rgba(156,195,255,.12) 30%,transparent 62%);opacity:var(--q)}
.cta .clouds{position:absolute;left:-10%;right:-10%;height:26vh;pointer-events:none;filter:blur(14px);
  background:radial-gradient(28% 60% at 18% 60%,rgba(120,150,200,.22),transparent 70%),radial-gradient(30% 65% at 82% 55%,rgba(120,150,200,.2),transparent 70%)}
.cta .clouds.c1{top:50%}.cta .clouds.c2{top:60%;transform:scaleX(-1)}
.cta .ridge.m1{transform:translateY(calc(24vh - var(--q) * 22vh))}
.cta .ridge.m2{transform:translateY(calc(30vh - var(--q) * 28vh))}
.cta .ridge.m3{transform:translateY(calc(36vh - var(--q) * 34vh))}
.cta .ridge.m4{transform:translateY(calc(42vh - var(--q) * 42vh))}
.cta .mist{position:absolute;left:0;right:0;bottom:4vh;height:30vh;pointer-events:none;background:linear-gradient(180deg,rgba(156,195,255,0),rgba(156,195,255,.12),rgba(156,195,255,0));opacity:calc(var(--q) * .8)}
.cta h2,.cta p{position:relative;z-index:2;text-shadow:0 2px 30px rgba(3,8,15,.9)}
.cta .btns,.cta .mail{position:relative;z-index:2}

@media (max-width:960px){
  .readout{top:auto;bottom:16vh;right:20px;left:20px;width:auto;transform:none}
  .land .moon{left:62%;top:60%;width:52vmin;height:52vmin}
  .land.short .moon{left:70%;top:40%}
  .land.pano .moon{width:56vmin;height:56vmin}
  .cta .moon{left:72%}
}
@media (prefers-reduced-motion:reduce){.land .clouds{animation:none}}