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

/* `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); } }

.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 {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
  .float { animation: none !important; }
  .hover-card:hover { transform: none; }
  .bar-fill { 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 (prefers-reduced-motion: reduce) { .carousel-track { transition: none; } }

/* U-factor comparison bars */
.bar-fill { width: 0; transition: width 1.2s cubic-bezier(.4,0,.2,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;
}