/* ==========================================================================
   VERIX ENERGY - SITE ENHANCEMENT LAYER
   Layers on top of styles.css. Linked AFTER the existing stylesheet on every
   page. Covers: scroll-reveal staggering, animated counters, image treatments
   (ken-burns / parallax / overlays), micro-interactions, savings calculator.

   ---- VERIX INTEGRATION NOTES (changes from the original downloaded file) ----
   1. TYPOGRAPHY OVERRIDE DISABLED. The original imported Fraunces (serif) +
      Inter from Google Fonts and reassigned every heading/body font. That would
      replace the site's self-hosted Satoshi brand type, add an external network
      request, and swap in two faces the brand direction specifically avoids.
      The @import and global font-family/size overrides are commented out below.
      --font-display / --font-body are aliased to Satoshi so the calculator and
      counters still get a defined font. To try the serif direction, uncomment
      the block. (Flagged for owner decision.)
   2. GOLD ALIASES added: the package expects --gold-primary / --gold-highlight;
      this site defines --gold / --gold-hi. Aliased below so brand gold is used.
   3. .reveal is scoped to html.js (matching styles.css) so content is never
      left invisible if JavaScript fails to run.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. VARIABLE ALIASES + TYPOGRAPHY
   -------------------------------------------------------------------------- */

:root {
  /* Bridge the package's expected names to the site's brand gold ramp */
  --gold-primary: var(--gold);
  --gold-highlight: var(--gold-hi);
  /* --gold-deep already matches the site variable of the same name */

  /* Point the package's font vars at the site's Satoshi stack */
  --font-display: 'Satoshi', system-ui, -apple-system, sans-serif;
  --font-body: 'Satoshi', system-ui, -apple-system, sans-serif;
}

/* ---- Original serif typography direction (DISABLED - see note 1) ----------
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,700&family=Inter:wght@400;500;600&display=swap');
:root{
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}
h1, h2, h3,
.hero-headline, .section-headline {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.01em;
}
h1, .hero-headline { font-size: clamp(2.5rem, 5vw, 4.25rem); }
h2, .section-headline { font-size: clamp(1.75rem, 3.2vw, 2.75rem); }
body, p, li, a, span, div { font-family: var(--font-body); }
p { line-height: 1.65; }
--------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   2. SCROLL-REVEAL STAGGER
   The site's styles.css + main.js already fade .reveal elements in. This adds
   the optional per-element stagger via data-reveal-delay -> --reveal-delay.
   Scoped to html.js so no-JS visitors still see all content.
   -------------------------------------------------------------------------- */

html.js .reveal {
  transition-delay: var(--reveal-delay, 0ms);
}

@media (prefers-reduced-motion: reduce) {
  html.js .reveal { transition-delay: 0ms; }
}

/* --------------------------------------------------------------------------
   3. ANIMATED COUNTERS
   <span class="counter" data-target="500" data-suffix="+">0</span>
   -------------------------------------------------------------------------- */

.counter {
  font-family: var(--font-display);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--gold-primary, #D4AF37);
}

/* --------------------------------------------------------------------------
   4. IMAGE TREATMENTS - ken burns, gradient overlays, parallax band
   -------------------------------------------------------------------------- */

.img-frame {
  position: relative;
  overflow: hidden;
}

.img-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.04);
  transition: transform 8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Slow continuous zoom while in view - toggled by JS adding .kb-active */
.img-frame.kb-active img {
  transform: scale(1.14);
}

.img-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0.55) 100%
  );
  pointer-events: none;
}

.img-frame.overlay-strong::after {
  background: linear-gradient(
    180deg,
    rgba(0,0,0,0.2) 0%,
    rgba(0,0,0,0.75) 100%
  );
}

/* Parallax band (e.g. the solar-panel-sunset section) */
.parallax-band {
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
}

@media (max-width: 768px) {
  /* background-attachment:fixed is unreliable on mobile Safari - disable */
  .parallax-band {
    background-attachment: scroll;
  }
}

/* --------------------------------------------------------------------------
   5. MICRO-INTERACTIONS
   [VERIX v2] These rules used to target .card, .benefit-card, .feature-card and
   .cta-button. This site has ZERO elements carrying any of those classes, so
   every card hover here was dead code and none of it ever fired. They are
   rewritten against the classes the pages actually use.

   Treatment follows each element's form rather than applying one blanket lift:
   a bordered box can rise off the page, but a full-width row separated only by
   a rule has no edges to lift, and a timeline entry owns an absolutely
   positioned tick that a transform would drag out of alignment. Those get
   colour and ground shifts instead of movement.
   -------------------------------------------------------------------------- */

a, button, .btn {
  transition: transform 0.2s ease, box-shadow 0.2s ease,
              background-color 0.2s ease, color 0.2s ease,
              border-color 0.2s ease;
}

.btn, button[type="submit"] {
  position: relative;
}

/* Every button lifts. The glow differs so the outline variant does not read as
   a washed-out copy of the solid one. */
.btn:hover, button[type="submit"]:hover {
  transform: translateY(-2px);
}
.btn-solid:hover, button[type="submit"]:hover {
  box-shadow: 0 10px 26px -8px rgba(212, 175, 55, 0.5);
}
.btn-outline:hover {
  border-color: var(--gold-hi);
  color: var(--gold-hi);
  background: rgba(212, 175, 55, 0.06);
  box-shadow: 0 8px 22px -10px rgba(212, 175, 55, 0.32);
}
.btn:active, button[type="submit"]:active {
  transform: translateY(0);
  box-shadow: none;
}

/* Nav: sweep an underline in from the leading edge. Skips .active, which
   already owns the 2px border underneath and would otherwise double up. */
.nav-links a { position: relative; }
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  background: var(--gold-hi);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.nav-links a:not(.active):hover::after,
.nav-links a:not(.active):focus-visible::after {
  transform: scaleX(1);
  transform-origin: left center;
}

/* Genuine cards: bordered boxes, so they lift. */
.story-slot, .variety-item {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.35s ease;
}
.story-slot:hover, .variety-item:hover {
  transform: translateY(-6px);
  border-color: var(--gold);
  box-shadow: 0 20px 40px -16px rgba(0, 0, 0, 0.6);
}

/* Full-width rows: no edges to lift, so the ground warms instead. The negative
   margin lets the tint breathe past the text without shifting the text itself.
   .explainer-point is the same shape as .why-row (padding + a top rule), so it
   gets the same handling rather than a card lift it has no box for. */
.why-row, .explainer-point {
  padding-inline: 1.5rem;
  margin-inline: -1.5rem;
  transition: background-color 0.3s ease;
}
.why-row h3, .explainer-point h3 { transition: color 0.3s ease; }
.why-row:hover, .explainer-point:hover { background: rgba(212, 175, 55, 0.04); }
.why-row:hover h3, .explainer-point:hover h3 { color: var(--gold-hi); }

/* Process steps: a top rule and nothing else, so lift the block and light the rule. */
.step {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              border-top-color 0.3s ease;
}
.step h3 { transition: color 0.3s ease; }
.step:hover { transform: translateY(-4px); border-top-color: var(--gold-hi); }
.step:hover h3 { color: var(--gold-hi); }

/* Timeline: the tick is absolutely positioned against the rail, so moving the
   item would pull it off. Grow the tick instead. */
.timeline-item::before {
  transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.3s ease;
}
.timeline-item h3 { transition: color 0.3s ease; }
.timeline-item:hover::before { width: 34px; background: var(--gold-hi); }
.timeline-item:hover h3 { color: var(--gold-hi); }

/* Stat columns: divided by rules, so tint the ground. */
.glance-item { transition: background-color 0.3s ease; }
.glance-item:hover { background: rgba(212, 175, 55, 0.04); }

/* FAQ: a summary is a real control and should say so. */
.faq-list summary {
  transition: color 0.2s ease;
  cursor: pointer;
}
.faq-list summary:hover { color: var(--gold-hi); }

/* Trust strip. */
.trust-row p { transition: color 0.3s ease; }
.trust-row p:hover { color: var(--text); }

/* Images: zoom on hover.
   This CANNOT be a transform on the <img> itself. Ken burns already owns that
   property on an 8s transition, so a hover scale there would fight it and take
   eight seconds to answer the cursor. The zoom goes on a wrapper element, and
   the two transforms compose: ken burns keeps drifting the image inside the
   frame while the wrapper answers the pointer in 0.5s. */
.img-zoom {
  display: block;
  overflow: hidden;
  transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}
/* Inside a .photo-frame the <img> is position:absolute;inset:0. Transforming an
   ancestor makes THAT ancestor the containing block for absolute descendants,
   so the wrapper has to fill the frame itself. Leave it in normal flow and it
   collapses to zero height and takes the image down with it. */
.photo-frame .img-zoom { position: absolute; inset: 0; }
/* On a variety card the image is in normal flow, so the wrapper carries the box. */
.variety-item .img-zoom { position: relative; width: 100%; aspect-ratio: 4 / 3; }
.variety-item .img-zoom img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.img-frame:hover .img-zoom { transform: scale(1.04); }
.variety-item:hover .img-zoom { transform: scale(1.06); }

/* --------------------------------------------------------------------------
   5b. REDUCED MOTION
   Everything above trades in transform. Under reduce, keep the state changes
   that carry meaning (colour, ground, border) and drop the movement.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .btn:hover, button[type="submit"]:hover,
  .story-slot:hover, .variety-item:hover, .step:hover {
    transform: none;
  }
  .img-frame:hover .img-zoom, .variety-item:hover .img-zoom {
    transform: none;
  }
  .nav-links a::after { transition: none; }
  .timeline-item:hover::before { width: 22px; }
  .img-zoom, .story-slot, .variety-item, .step, .why-row, .glance-item {
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  }
}

/* --------------------------------------------------------------------------
   6. SAVINGS CALCULATOR WIDGET
   -------------------------------------------------------------------------- */

.savings-calc {
  background: linear-gradient(155deg, #111111 0%, #0a0a0a 100%);
  border: 1px solid rgba(212, 175, 55, 0.25);
  border-radius: 16px;
  padding: clamp(1.5rem, 4vw, 3rem);
  max-width: 720px;
  margin: 0 auto;
}

.savings-calc__title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: #fff;
  margin-bottom: 0.5rem;
}

.savings-calc__sub {
  color: rgba(255,255,255,0.6);
  font-size: 0.9rem;
  margin-bottom: 2rem;
}

.savings-calc__row {
  margin-bottom: 1.75rem;
}

.savings-calc__label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  color: rgba(255,255,255,0.85);
  font-size: 0.95rem;
  margin-bottom: 0.5rem;
}

.savings-calc__label strong {
  color: var(--gold-highlight, #EFCB68);
  font-family: var(--font-display);
  font-size: 1.15rem;
}

.savings-calc__slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  border-radius: 2px;
  background: rgba(255,255,255,0.15);
  outline: none;
}

.savings-calc__slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--gold-primary, #D4AF37);
  border: 3px solid #0a0a0a;
  cursor: pointer;
  box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.15);
  transition: box-shadow 0.2s ease;
}

.savings-calc__slider::-webkit-slider-thumb:hover {
  box-shadow: 0 0 0 8px rgba(212, 175, 55, 0.2);
}

.savings-calc__slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--gold-primary, #D4AF37);
  border: 3px solid #0a0a0a;
  cursor: pointer;
}

.savings-calc__plan-select {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.savings-calc__plan-btn {
  flex: 1;
  min-width: 90px;
  padding: 0.6rem 0.75rem;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 8px;
  background: rgba(255,255,255,0.03);
  color: rgba(255,255,255,0.7);
  font-size: 0.85rem;
  cursor: pointer;
  text-align: center;
}

.savings-calc__plan-btn.active {
  border-color: var(--gold-primary, #D4AF37);
  background: rgba(212, 175, 55, 0.12);
  color: var(--gold-highlight, #EFCB68);
}

.savings-calc__result {
  margin-top: 2rem;
  padding-top: 1.75rem;
  border-top: 1px solid rgba(255,255,255,0.1);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

@media (max-width: 480px) {
  .savings-calc__result { grid-template-columns: 1fr; }
}

.savings-calc__result-item {
  text-align: left;
}

.savings-calc__result-label {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.45);
  margin-bottom: 0.35rem;
}

.savings-calc__result-value {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  color: var(--gold-primary, #D4AF37);
}

.savings-calc__disclaimer {
  margin-top: 1.5rem;
  font-size: 0.75rem;
  color: rgba(255,255,255,0.35);
  line-height: 1.5;
}

.savings-calc__cta {
  margin-top: 1.5rem;
  width: 100%;
  display: block;
  text-align: center;
}