/* ══════════════════════════════════════════════════════════════════════════
   SunScout — 2026 geometric premium layer
   --------------------------------------------------------------------------
   Loaded after the inline styles, so it refines rather than replaces them.
   Delete the two <link>/<script> tags in index.html to remove it entirely.

   Rules this layer holds itself to, from CLAUDE.md:
     · vanilla CSS, no framework, no build step
     · no WebGL, no 3D scroll effects, no video
     · animation is transform/opacity only, so it stays on the compositor
     · every motion is off under prefers-reduced-motion
   ══════════════════════════════════════════════════════════════════════════ */

:root{
  --geo-navy:#17324D;
  --geo-sky:#4FA8DA;
  --geo-marigold:#F2A93B;
  --geo-line:rgba(23,50,77,.13);
  --geo-line-soft:rgba(23,50,77,.07);
  --geo-ease:cubic-bezier(.22,.61,.36,1);
  --geo-ease-out:cubic-bezier(.16,1,.3,1);
}

/* Tabular, evenly-spaced numerals everywhere a number is doing real work. */
.p-stat b,.count,.tab-count-badge,#pStatCount,.geo-num,.geo-ticker{
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}

/* ── 1. Scroll progress ───────────────────────────────────────────────────
   Fixed hairline across the top. Width is driven by a CSS variable that
   motion.js updates from a rAF-throttled scroll listener. */
#geoProgress{
  position:fixed;top:0;left:0;height:3px;width:100%;z-index:9999;
  pointer-events:none;background:transparent;
}
#geoProgress::after{
  content:'';display:block;height:100%;
  width:var(--geo-progress,0%);
  background:linear-gradient(90deg,var(--geo-navy),var(--geo-sky) 55%,var(--geo-marigold));
  transform-origin:left center;
  transition:width .08s linear;
}

/* ── 2. Geometric hero furniture ──────────────────────────────────────────
   A hairline grid and corner crosshairs. Purely decorative, pointer-events
   none, and drawn with gradients so there is no extra request. */
.hero{position:relative;overflow:hidden}
.geo-grid{
  position:absolute;inset:0;pointer-events:none;z-index:1;
  background-image:
    linear-gradient(to right,rgba(255,255,255,.10) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(255,255,255,.10) 1px,transparent 1px);
  background-size:88px 88px;
  mask-image:radial-gradient(ellipse 80% 70% at 50% 40%,#000 30%,transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 40%,#000 30%,transparent 78%);
  opacity:0;
}
.hero[data-hero-img="on"] .geo-grid{opacity:1}
/* On the pale fallback ground the white grid is invisible — use navy. */
.hero:not([data-hero-img="on"]) .geo-grid{
  opacity:.55;
  background-image:
    linear-gradient(to right,var(--geo-line-soft) 1px,transparent 1px),
    linear-gradient(to bottom,var(--geo-line-soft) 1px,transparent 1px);
}
.geo-tick{
  position:absolute;width:13px;height:13px;pointer-events:none;z-index:2;opacity:.5;
  border:0 solid currentColor;color:var(--geo-navy);
}
.hero[data-hero-img="on"] .geo-tick{color:rgba(255,255,255,.8)}
.geo-tick.tl{top:14px;left:14px;border-top-width:1.5px;border-left-width:1.5px}
.geo-tick.tr{top:14px;right:14px;border-top-width:1.5px;border-right-width:1.5px}
.geo-tick.bl{bottom:14px;left:14px;border-bottom-width:1.5px;border-left-width:1.5px}
.geo-tick.br{bottom:14px;right:14px;border-bottom-width:1.5px;border-right-width:1.5px}
@media(max-width:700px){.geo-tick{width:9px;height:9px}.geo-grid{background-size:56px 56px}}

/* ── 3. Section headers ───────────────────────────────────────────────────
   An index numeral, a label, and a rule that draws itself in on reveal. */
/* Padding matches .grid (14px 20px) so the numeral lines up with the cards
   and the status bar rather than floating on its own centred column. */
.geo-sec{
  display:flex;align-items:baseline;gap:14px;
  margin:34px 0 2px;padding:0 20px;
}
.geo-sec .geo-idx{
  /* Not --geo-marigold: as small bold type on the cream ground that is
     1.56:1. The darker amber keeps the same hue family at 4.93:1. Everywhere
     else --geo-marigold is a rule, a dot or a focus ring, not text, so it
     stays as it is. */
  font-size:11px;font-weight:900;letter-spacing:2px;color:#8C5200;
  flex:0 0 auto;
}
.geo-sec .geo-label{
  font-size:11.5px;font-weight:900;letter-spacing:2.2px;text-transform:uppercase;
  color:var(--geo-navy);flex:0 0 auto;
}
.geo-sec .geo-rule{
  flex:1 1 auto;height:1px;background:var(--geo-line);
  transform-origin:left center;
}
.geo-ready .geo-sec .geo-rule{transform:scaleX(0)}
.geo-ready .geo-sec.is-in .geo-rule{
  transform:scaleX(1);
  transition:transform 1.1s var(--geo-ease-out) .1s;
}
@media(max-width:700px){.geo-sec{padding:0 14px;margin-top:24px;gap:10px}}

/* ── 4. Reveal on scroll ──────────────────────────────────────────────────
   transform + opacity only. Applied by motion.js via .geo-reveal, and the
   .is-in class is what actually plays it, so nothing is hidden if the
   script never runs (no-JS and error cases both stay readable). */
.geo-ready .geo-reveal{
  opacity:0;
  transform:translate3d(0,18px,0);
  transition:opacity .62s var(--geo-ease-out),transform .62s var(--geo-ease-out);
  transition-delay:var(--geo-delay,0ms);
  will-change:opacity,transform;
}
.geo-ready .geo-reveal.is-in{opacity:1;transform:none;will-change:auto}
/* No script, or it threw: nothing above ever gets hidden in the first place. */

/* ── 5. Cards ─────────────────────────────────────────────────────────────
   A hairline that sweeps across the top edge on hover, and a small lift.
   No tilt or perspective — CLAUDE.md rules out 3D. */
.card{position:relative;transition:transform .34s var(--geo-ease),box-shadow .34s var(--geo-ease)}
.card::after{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;z-index:3;
  background:linear-gradient(90deg,var(--geo-navy),var(--geo-sky) 50%,var(--geo-marigold));
  transform:scaleX(0);transform-origin:left center;
  transition:transform .5s var(--geo-ease-out);
  pointer-events:none;
}
@media(hover:hover) and (pointer:fine){
  .card:hover{transform:translateY(-5px);box-shadow:0 16px 40px rgba(23,50,77,.16)}
  .card:hover::after{transform:scaleX(1)}
}
.card:focus-within::after{transform:scaleX(1)}

/* ── 6. Auto-scrolling ticker ─────────────────────────────────────────────
   Decorative and navigational only — it never carries a filter control, so
   auto-advancing it cannot change what the visitor is looking at.

   WCAG 2.2.2 (Pause, Stop, Hide) requires any motion that starts
   automatically and lasts more than five seconds to be pausable. Hence the
   real button, the hover/focus pause, and the reduced-motion stop below. */
.geo-ticker-wrap{
  position:relative;display:flex;align-items:center;gap:10px;
  border-top:1px solid var(--geo-line);border-bottom:1px solid var(--geo-line);
  background:linear-gradient(90deg,rgba(23,50,77,.03),rgba(79,168,218,.05),rgba(242,169,59,.04));
  margin:14px 0 2px;padding:0 10px 0 0;overflow:hidden;
}
.geo-ticker{
  display:flex;flex:1 1 auto;overflow:hidden;
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
}
.geo-track{
  display:flex;align-items:center;flex:0 0 auto;gap:0;
  animation:geo-marquee var(--geo-marquee-dur,42s) linear infinite;
}
.geo-ticker-wrap[data-paused="true"] .geo-track{animation-play-state:paused}
.geo-track span{
  display:inline-flex;align-items:center;gap:9px;
  padding:11px 20px;white-space:nowrap;
  font-size:11.5px;font-weight:900;letter-spacing:1.6px;text-transform:uppercase;
  color:var(--geo-navy);
}
.geo-track span::after{
  content:'';width:5px;height:5px;flex:0 0 auto;
  background:var(--geo-marigold);transform:rotate(45deg);
}
@keyframes geo-marquee{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

.geo-pause{
  flex:0 0 auto;width:30px;height:30px;border-radius:50%;
  border:1px solid var(--geo-line);background:#fff;color:var(--geo-navy);
  font-size:11px;line-height:1;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  font-family:inherit;transition:background .2s,border-color .2s;
}
.geo-pause:hover{background:#F4F8FB;border-color:var(--geo-sky)}
.geo-pause:focus-visible{outline:3px solid var(--geo-marigold);outline-offset:2px}
@media(max-width:700px){
  .geo-track span{padding:10px 14px;font-size:10.5px;letter-spacing:1.2px}
  .geo-pause{width:34px;height:34px}
}

/* ── 7. Stat count-up ─────────────────────────────────────────────────────
   The value is swapped by script; this only keeps the glyphs from jittering
   as the digits change. */
.p-stat b{transition:color .3s var(--geo-ease)}
.geo-counting{opacity:.92}

/* ── 8. Buttons: a quiet sheen, not a bounce ──────────────────────────── */
.show-more-btn,.tab-btn,.city-btn{
  transition:transform .22s var(--geo-ease),box-shadow .22s var(--geo-ease),
             background .22s var(--geo-ease),color .22s var(--geo-ease),
             border-color .22s var(--geo-ease);
}
@media(hover:hover) and (pointer:fine){
  .show-more-btn:hover{transform:translateY(-2px)}
  .city-btn:hover{transform:translateY(-1px)}
}

/* ── 9. Back-to-top, as a geometric marker ───────────────────────────── */
#back-to-top{transition:opacity .3s var(--geo-ease),transform .3s var(--geo-ease)}

/* ══════════════════════════════════════════════════════════════════════════
   REDUCED MOTION — one block, and it is comprehensive.
   Nothing animates, nothing auto-scrolls, nothing is left invisible.
   ══════════════════════════════════════════════════════════════════════════ */
@media(prefers-reduced-motion:reduce){
  .geo-ready .geo-reveal{opacity:1!important;transform:none!important;transition:none!important}
  .geo-ready .geo-sec .geo-rule{transform:scaleX(1)!important;transition:none!important}
  .geo-track{animation:none!important;transform:none!important}
  .geo-ticker{mask-image:none;-webkit-mask-image:none}
  .card,.card::after,.show-more-btn,.city-btn,.tab-btn,#back-to-top,#geoProgress::after{
    transition:none!important;
  }
  .card:hover{transform:none!important}
  .card::after{transform:scaleX(0)!important}
}