/*!
 * premium-polish.css  -  Raydn sitewide premium layer (Tier 1 + Tier 2)
 * Purpose: give EVERY card, glass surface, CTA, icon and slider the same
 *          Apple-tier motion + material language. Additive only; no new
 *          content, no layout changes. Namespaced/scoped so it upgrades
 *          existing components without breaking them.
 *
 * Palette (locked): amber #f5a524, navy #0d1b2e, positive green #4ade80.
 * NO red. NO dashes in any user-visible string (there are none here).
 */

/* ---- 0. GLOBAL MOTION + MATERIAL TOKENS ------------------------------- */
/* --dur/--ease were referenced by existing CSS but never defined. Define
   them here so existing transitions (e.g. .faq-question svg) also smooth. */
:root{
  --ease: cubic-bezier(.2,.7,.2,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --dur: .35s;
  --dur-fast: .18s;

  /* Elevation scale (rest / hover / overlay) */
  --rdn-elev-1: 0 2px 10px rgba(6,12,24,.28);
  --rdn-elev-2: 0 10px 34px rgba(6,12,24,.42);
  --rdn-elev-3: 0 22px 60px rgba(6,12,24,.55);

  /* Glass tints */
  --rdn-glass-bg: rgba(255,255,255,.045);
  --rdn-glass-border: rgba(255,255,255,.10);
  --rdn-glass-hi: inset 0 1px 0 rgba(255,255,255,.10);
}

/* ---- 1. TABULAR FIGURES on stats + calculator outputs ----------------- */
[id^="res-"], [id$="-display"], .rdn-cvs__val, .hero__stat, .metal-stat,
.mob-hero__stat, .onsite-loadcalc__stat, .stat, .amq__verdict-card__bignum,
.rdn-payband__end, .founder-card__bignum{
  font-variant-numeric: tabular-nums;
  font-feature-settings:"tnum" 1,"lnum" 1;
}

/* ---- 2. TYPOGRAPHIC CRAFT: tighten large display type ----------------- */
h1, .hero__title, .founder-card__title, .final-cta h2, .section-title,
.town-hero__title{
  letter-spacing:-.022em;
}

/* ---- 3. UNIVERSAL CARD UPGRADE ---------------------------------------- */
/* Applies the amber ghost bar + inner top highlight + hover-lift to the
   full family of card/panel/tile components. Uses shared easing. The bar
   is a 1px amber-to-transparent hairline (whisper, not slab). */
.all-services-card, .amq__tool-card, .anatomy__card, .area-card, .ba-card,
.battery-card, .calc-card, .case-study-card, .case-study-teaser-card,
.check-card, .compare-quote__card, .cost-compare__tile, .cvf-card,
.decoder-card, .edmonton-solar-card, .ev-install-card, .ev-lm-card,
.fin-section-card, .flag-card, .founder-card, .gallery-card, .gallery__card,
.hero-details__panel, .inaction-card, .lead-magnet__card, .lm-card,
.northstar__panel, .onsite-card, .onsite-loadcalc__card, .work-type-card,
.decoder-card, .anatomy__card, .bank-card{
  position: relative;
  transition: transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
  will-change: transform;
}
/* amber ghost bar across the top edge */
.all-services-card::after, .amq__tool-card::after, .anatomy__card::after,
.area-card::after, .battery-card::after, .calc-card::after,
.case-study-card::after, .check-card::after, .cost-compare__tile::after,
.cvf-card::after, .decoder-card::after, .edmonton-solar-card::after,
.ev-install-card::after, .ev-lm-card::after, .fin-section-card::after,
.flag-card::after, .gallery-card::after, .gallery__card::after,
.inaction-card::after, .lead-magnet__card::after, .lm-card::after,
.northstar__panel::after, .onsite-card::after, .work-type-card::after,
.bank-card::after{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height:2px;
  border-radius: 14px 14px 0 0;
  background: linear-gradient(90deg,
              rgba(245,165,36,0) 0%,
              rgba(245,165,36,.9) 50%,
              rgba(245,165,36,0) 100%);
  opacity:.55;
  transform: scaleX(.6);
  transform-origin:center;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  pointer-events:none;
  z-index:2;
}
/* hover: lift + shadow bloom + bar brightens and stretches full width */
.all-services-card:hover, .amq__tool-card:hover, .anatomy__card:hover,
.area-card:hover, .battery-card:hover, .calc-card:hover,
.case-study-card:hover, .check-card:hover, .cost-compare__tile:hover,
.cvf-card:hover, .decoder-card:hover, .edmonton-solar-card:hover,
.ev-install-card:hover, .ev-lm-card:hover, .fin-section-card:hover,
.flag-card:hover, .gallery-card:hover, .gallery__card:hover,
.inaction-card:hover, .lead-magnet__card:hover, .lm-card:hover,
.northstar__panel:hover, .onsite-card:hover, .work-type-card:hover,
.bank-card:hover, .founder-card:hover, .hero-details__panel:hover{
  transform: translateY(-4px);
  box-shadow: var(--rdn-elev-2);
}
.all-services-card:hover::after, .amq__tool-card:hover::after,
.anatomy__card:hover::after, .area-card:hover::after,
.battery-card:hover::after, .calc-card:hover::after,
.case-study-card:hover::after, .check-card:hover::after,
.cost-compare__tile:hover::after, .cvf-card:hover::after,
.decoder-card:hover::after, .edmonton-solar-card:hover::after,
.ev-install-card:hover::after, .ev-lm-card:hover::after,
.fin-section-card:hover::after, .flag-card:hover::after,
.gallery-card:hover::after, .gallery__card:hover::after,
.inaction-card:hover::after, .lead-magnet__card:hover::after,
.lm-card:hover::after, .northstar__panel:hover::after,
.onsite-card:hover::after, .work-type-card:hover::after,
.bank-card:hover::after{
  opacity:1;
  transform: scaleX(1);
}

/* ---- 4. INNER TOP HIGHLIGHT on frosted glass surfaces ----------------- */
/* Simulates a lit top edge on any element already using backdrop-filter. */
.hero-details__panel, .hero__calc, .cta-pill-glass, .northstar__panel,
.rr-hero-estimate, .amq__verdict-card, .compare-quote__card{
  box-shadow: var(--rdn-glass-hi), var(--rdn-elev-1);
}

/* ---- 5. UNIVERSAL CTA / BUTTON POLISH --------------------------------- */
.btn, .rr-belief__btn, .calc-cta, .lead-magnet__card-cta, .final-cta a,
.compare-quote__result-cta{
  position: relative;
  overflow: hidden;
  transition: transform var(--dur-fast) var(--ease),
              box-shadow var(--dur) var(--ease),
              background var(--dur) var(--ease);
  isolation: isolate;
}
.btn:hover, .rr-belief__btn:hover, .calc-cta:hover,
.lead-magnet__card-cta:hover, .final-cta a:hover{
  transform: translateY(-2px);
  box-shadow: var(--rdn-elev-2);
}
.btn:active, .rr-belief__btn:active, .calc-cta:active{
  transform: translateY(0) scale(.99);
}
/* subtle single sheen sweep on primary CTAs (restrained, one pass) */
.btn--primary::before, .rr-belief__btn::before, .calc-cta::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(115deg,
              rgba(255,255,255,0) 30%,
              rgba(255,255,255,.28) 50%,
              rgba(255,255,255,0) 70%);
  transform: translateX(-120%);
  transition: transform .6s var(--ease-out);
  pointer-events:none;
  z-index:1;
}
.btn--primary:hover::before, .rr-belief__btn:hover::before,
.calc-cta:hover::before{
  transform: translateX(120%);
}

/* ---- 6. AMBER FOCUS RINGS (a11y + brand, replaces browser blue) ------- */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible,
.ba-slider:focus-visible, .rdn-wipe__grip:focus-visible,
input[type="range"]:focus-visible{
  outline: 2px solid var(--amber,#f5a524);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ---- 7. ROTATE-ON-INTERACT ICONS (standardize) ----------------------- */
/* Ensure any chevron/plus toggler animates on the shared easing. */
.faq-question svg, .nav__dropdown-trigger svg, [data-rotate-icon] svg,
.accordion__trigger svg{
  transition: transform var(--dur) var(--ease);
}
.nav__dropdown-trigger[aria-expanded="true"] svg,
.accordion__trigger[aria-expanded="true"] svg,
[data-rotate-icon].is-open svg{
  transform: rotate(180deg);
}
/* external-link arrows nudge diagonally on hover */
.hero-trust__chip--link:hover svg, .footer__trust-link:hover svg,
.hp-team-strip__verify:hover svg{
  transform: translate(2px,-2px);
  transition: transform var(--dur-fast) var(--ease);
}

/* ---- 8. RANGE SLIDER premium thumb (calculators) ---------------------- */
input[type="range"]{ transition: filter var(--dur-fast) var(--ease); }
input[type="range"]::-webkit-slider-thumb{
  transition: transform var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
}
input[type="range"]:active::-webkit-slider-thumb{
  transform: scale(1.18);
  box-shadow: 0 4px 18px rgba(245,165,36,.55);
}
input[type="range"]:active{ filter: saturate(1.15); }

/* count-up flash: brief amber tick when a stat updates */
.rdn-countup-flash{ animation: rdn-tick .5s var(--ease); }
@keyframes rdn-tick{
  0%{ color:var(--amber,#f5a524); }
  100%{ color:inherit; }
}

/* ---- 9. SELECTION + SCROLLBAR craft ----------------------------------- */
::selection{ background: rgba(245,165,36,.28); color:#fff; }
::-webkit-scrollbar{ width:11px; height:11px; }
::-webkit-scrollbar-track{ background: #0b1626; }
::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg,#3a4a63,#1a2942);
  border-radius:999px;
  border:2px solid #0b1626;
}
::-webkit-scrollbar-thumb:hover{
  background: linear-gradient(180deg,#f5a524,#c07f13);
}

/* ---- 10. REDUCED MOTION RESPECT --------------------------------------- */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}


/* ======================================================================
   TIER 3 + TIER 4  -  depth, light, choreography, finishing 2%
   Isolated namespaces (rdn-rise, rdn-skel--calc) so nothing collides
   with the intentionally-disabled legacy .reveal system.
   ====================================================================== */

/* ---- T3.1 ELEVATION SCALE (reuse existing --shadow-* semantics) ------ */
/* Map our three-step elevation onto rest/hover/overlay consistently.
   These extend, not replace, the site's --shadow-sm/md/lg. */
:root{
  --rdn-radius-card: 14px;   /* single card radius token */
  --rdn-radius-pill: 999px;  /* single pill radius token */
  --rdn-radius-inner: 10px;  /* inner controls */
}

/* ---- T3.2 INNER-GLASS HIGHLIGHT on ALL frosted surfaces -------------- */
/* Any element already using backdrop-filter gets the lit top edge, so the
   glass reads consistent everywhere, not just the six hand-styled ones. */
.cta-pill-glass, .compare-quote__result, .fee-banner, .hero__badge,
.micro-chip, .hero-trust__chip, .lead-magnet__card, .onsite-loadcalc__card,
.amq__tool-card, .bank-card, .decoder-card, .northstar__panel{
  box-shadow: var(--rdn-glass-hi), var(--rdn-elev-1);
}

/* ---- T3.3 UNIFIED REVEAL-ON-SCROLL (new, safe namespace) ------------- */
/* Opt-in rise+fade. JS adds .rdn-rise--in when the element enters view.
   Children with [data-rise-child] stagger. Reduced-motion neutralizes it. */
.rdn-rise{
  opacity:0;
  transform: translateY(14px);
  transition: opacity .6s var(--ease-out), transform .6s var(--ease-out);
  will-change: opacity, transform;
}
.rdn-rise.rdn-rise--in{
  opacity:1;
  transform: translateY(0);
}
.rdn-rise [data-rise-child]{
  opacity:0;
  transform: translateY(12px);
  transition: opacity .55s var(--ease-out), transform .55s var(--ease-out);
}
.rdn-rise.rdn-rise--in [data-rise-child]{
  opacity:1;
  transform: translateY(0);
}
.rdn-rise.rdn-rise--in [data-rise-child]:nth-child(2){ transition-delay:.08s; }
.rdn-rise.rdn-rise--in [data-rise-child]:nth-child(3){ transition-delay:.16s; }
.rdn-rise.rdn-rise--in [data-rise-child]:nth-child(4){ transition-delay:.24s; }
.rdn-rise.rdn-rise--in [data-rise-child]:nth-child(5){ transition-delay:.32s; }
.rdn-rise.rdn-rise--in [data-rise-child]:nth-child(6){ transition-delay:.40s; }

/* ---- T4.1 CORNER-RADIUS COHESION (gentle enforcement) ---------------- */
/* Nudge stray radii toward the token scale without touching pills/circles. */
.calc-card, .check-card, .area-card, .flag-card, .decoder-card,
.anatomy__card, .fin-section-card, .inaction-card, .cost-compare__tile{
  border-radius: var(--rdn-radius-card);
}

/* ---- T4.2 CALCULATOR LOADING SHIMMER (reuse rdn-skel-shimmer kf) ------ */
/* A brief amber-tinted skeleton so results never pop in cold. JS toggles
   .rdn-calc-loading on the results container. */
.rdn-calc-loading [id^="res-"],
.rdn-calc-loading .rdn-cvs__val{
  color: transparent !important;
  background: linear-gradient(90deg,
              rgba(245,165,36,.10) 25%,
              rgba(245,165,36,.22) 37%,
              rgba(245,165,36,.10) 63%);
  background-size: 400% 100%;
  animation: rdn-skel-shimmer 1.2s infinite linear;
  border-radius: 6px;
  -webkit-background-clip: padding-box;
}

/* ---- T4.3 BUTTON SHEEN refinement (respect reduced motion; one pass) - */
/* (base sheen defined in Tier 1; here we ensure it never loops and is off
   for touch-primary devices where hover is not meaningful). */
@media (hover: none){
  .btn--primary::before, .rr-belief__btn::before, .calc-cta::before{
    display:none;
  }
}

/* ---- T4.4 REDUCED MOTION also neutralizes rise + shimmer ------------- */
@media (prefers-reduced-motion: reduce){
  .rdn-rise, .rdn-rise [data-rise-child]{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }
  .rdn-calc-loading [id^="res-"],
  .rdn-calc-loading .rdn-cvs__val{
    animation:none !important;
    color:inherit !important;
    background:none !important;
  }
}

/* ---- WAVE 10: calculator action copied-confirmation state ------------ */
/* Amber confirmation flash on the share/copy button. No red, per brand. */
.rdn-calc-action__btn.is-copied {
  background: rgba(245, 165, 36, 0.16);
  border-color: rgba(245, 165, 36, 0.75);
  color: #f5a524;
  transition: background var(--dur-fast, .18s) var(--ease, ease),
              border-color var(--dur-fast, .18s) var(--ease, ease),
              color var(--dur-fast, .18s) var(--ease, ease);
}