/* ---------------------------------------------------------------------------
   Shared styles for the SunRite funnel. Motion timings and easing match
   tssolar.profusion.solutions.
   --------------------------------------------------------------------------- */

:root {
  /* Arbitrary-value mirrors of the boxShadow tokens in theme.js, so markup can
     use either `shadow-card` (Tailwind utility) or `shadow-[var(--shadow-card)]`
     (the literal class the tssolar capture uses) and get the same result. */
  --shadow-card: 0 4px 24px -4px hsl(212 69% 33% / .1);
  --shadow-card-hover: 0 8px 32px -4px hsl(212 69% 33% / .15);
}

/* `clip` rather than `hidden`: it stops sideways scroll without turning the
   root into a scroll container. Set on html because overflow on body just
   propagates to the viewport and never actually clips. */
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }

/* Match the reference site: default Tailwind (system) sans stack, no webfont. */
body {
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  color: hsl(212 50% 15%);
}

/* Scroll-reveal — mirrors the site's useScrollReveal hook (threshold 0.2) */
.reveal        { opacity: 0; transform: translateY(2.5rem); transition: opacity 1s cubic-bezier(.4,0,.2,1), transform 1s cubic-bezier(.4,0,.2,1); }
.reveal.is-in  { opacity: 1; transform: none; }
.stagger       { opacity: 0; transform: translateY(3rem); transition: opacity .7s cubic-bezier(.4,0,.2,1), transform .7s cubic-bezier(.4,0,.2,1); }
.stagger.is-in { opacity: 1; transform: none; }
.stagger-scale       { opacity: 0; transform: scale(.95); transition: opacity .7s cubic-bezier(.4,0,.2,1), transform .7s cubic-bezier(.4,0,.2,1); }
.stagger-scale.is-in { opacity: 1; transform: none; }
.stagger-l       { opacity: 0; transform: translateX(-2rem); transition: opacity .7s cubic-bezier(.4,0,.2,1), transform .7s cubic-bezier(.4,0,.2,1); }
.stagger-r       { opacity: 0; transform: translateX(2rem);  transition: opacity .7s cubic-bezier(.4,0,.2,1), transform .7s cubic-bezier(.4,0,.2,1); }
.stagger-l.is-in, .stagger-r.is-in { opacity: 1; transform: none; }

/* Cards stack full-width on small screens, so slide them in vertically —
   a horizontal offset there only pushes content past the viewport edge. */
@media (max-width: 767px) {
  .stagger-l, .stagger-r { transform: translateY(2rem); }
}

.float { animation: float 6s ease-in-out infinite; }
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* Reference-site keyframes not otherwise covered by the .reveal/.stagger
   family above. slide-up-fade and slide-in-right come from the tssolar
   capture's own animate-slide-up-fade / animate-slide-in-right classes;
   accordion-down/up back the Radix-style [data-state] accordion pattern in
   case a page needs a real expand/collapse (none of hub/bills/families do,
   but meet-your-installer may). All four are additive — nothing above
   depends on them. */
@keyframes slide-up-fade {
  0%  { opacity: 0; transform: translate3d(0, 50px, 0); filter: blur(2px); }
  100% { opacity: 1; transform: translateZ(0); filter: blur(0); }
}
.animate-slide-up-fade {
  animation: slide-up-fade 1.8s cubic-bezier(.25,.46,.45,.94);
  animation-fill-mode: both;
}

@keyframes slide-in-right {
  0%   { opacity: 0; transform: translate(-20px); }
  100% { opacity: 1; transform: translate(0); }
}
.animate-slide-in-right { animation: slide-in-right .3s ease-out; }

@keyframes accordion-down {
  0%   { height: 0; }
  100% { height: var(--radix-accordion-content-height, auto); }
}
@keyframes accordion-up {
  0%   { height: var(--radix-accordion-content-height, auto); }
  100% { height: 0; }
}
.animate-accordion-down { animation: accordion-down .2s ease-out; }
.animate-accordion-up   { animation: accordion-up .2s ease-out; }

.hover-card { transition: box-shadow .3s cubic-bezier(.4,0,.2,1), transform .3s cubic-bezier(.4,0,.2,1); }
.hover-card:hover { box-shadow: 0 8px 32px -4px hsl(212 69% 33% / .15); transform: translateY(-4px); }

@media (prefers-reduced-motion: reduce) {
  .reveal, .stagger, .stagger-scale, .stagger-l, .stagger-r,
  .animate-slide-up-fade, .animate-slide-in-right,
  .animate-accordion-down, .animate-accordion-up {
    opacity: 1 !important; transform: none !important; transition: none !important; animation: none !important;
  }
  .float { animation: none !important; }
  .hover-card:hover { transform: none; }
  .bar-fill, .vbar-fill { transition: none !important; }
  .line-draw { stroke-dashoffset: 0 !important; transition: none !important; }
  .area-fade, .dot-pop { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* Accordion */
.acc-panel   { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s cubic-bezier(.4,0,.2,1); }
.acc-item.open .acc-panel { grid-template-rows: 1fr; }
.acc-panel > div { overflow: hidden; }
.acc-item.open .acc-chevron { transform: rotate(180deg); }
.acc-chevron { transition: transform .2s; }

/* Carousel */
/* Transform-based rather than scroll-based: a mandatory-snap scroll container
   swallows programmatic scrollLeft/scrollTo, so the arrows silently did nothing.
   Translating the track is what the reference site's Embla does anyway. */
.carousel-viewport { overflow: hidden; }
.carousel-track {
  display: flex;
  transition: transform .5s cubic-bezier(.4, 0, .2, 1);
  will-change: transform;
}
.carousel-slide { flex: 0 0 100%; }
@media (min-width: 768px) { .carousel-slide { flex-basis: 50%; } }
@media (min-width: 1024px) { .carousel-slide { flex-basis: 33.3333%; } }
@media (prefers-reduced-motion: reduce) { .carousel-track { transition: none; } }

/* U-factor / bar-chart style comparison bars */
.bar-fill { width: 0; transition: width 1.2s cubic-bezier(.4,0,.2,1); }

/* Vertical bar chart (Projected Electricity Bill Increases) */
.vbar-fill { height: 0; transition: height 1.2s cubic-bezier(.4,0,.2,1); align-self: flex-end; }

/* SVG line/area chart (the EIA rate-history trend on /why-bills-keep-rising).
   The line draws itself left-to-right by animating stroke-dashoffset down to 0,
   and the area under it fades in behind. initLineChart() in the page's own
   script measures each path with getTotalLength() and sets --len, because the
   dash length has to match the path exactly or the reveal stutters. */
.line-draw {
  stroke-dasharray: var(--len);
  stroke-dashoffset: var(--len);
  transition: stroke-dashoffset 1.6s cubic-bezier(.4,0,.2,1);
}
.is-in .line-draw { stroke-dashoffset: 0; }
.area-fade { opacity: 0; transition: opacity 1s ease-out .4s; }
.is-in .area-fade { opacity: 1; }
.dot-pop { opacity: 0; transform: scale(.4); transform-origin: center; transition: opacity .4s ease-out, transform .4s cubic-bezier(.34,1.56,.64,1); }
.is-in .dot-pop { opacity: 1; transform: scale(1); }

/* Content the client still has to supply. Delete the class to clear the marker. */
.is-placeholder { outline: 2px dashed #f59e0b; outline-offset: 4px; position: relative; }
.is-placeholder::after {
  content: "PLACEHOLDER"; position: absolute; top: -.65rem; left: .75rem;
  background: #f59e0b; color: #fff; font-size: .6rem; font-weight: 700;
  letter-spacing: .08em; padding: .1rem .4rem; border-radius: .25rem;
}