/* ================================================================
   L&G Klimatech — Shared Styles
   shared.css
   ================================================================ */

/* ── Photo cards ─────────────────────────────────────────────── */
.photo-card img       { transition: transform .5s cubic-bezier(.4,0,.2,1); }
.photo-card:hover img { transform: scale(1.06); }

/* ── Brand pills ─────────────────────────────────────────────── */
.brand-pill       { transition: all .2s; }
.brand-pill:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(10,61,98,.12); }

/* ── Gallery cursor ──────────────────────────────────────────── */
.gallery-item { cursor: pointer; }

/* ── Marquee ─────────────────────────────────────────────────── */
.marquee-wrapper {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.marquee-track {
  display: flex;
  width: max-content;
  align-items: center;
  animation: marquee 28s linear infinite;
}
.marquee-track:hover   { animation-play-state: paused; }
.marquee-track-slow    { animation-duration: 36s; }

/* ── Mobile menu — slide-down ────────────────────────────────── */
#mobile-menu {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s cubic-bezier(.4,0,.2,1);
}
#mobile-menu.menu-open {
  max-height: 320px;
  border-top: 1px solid #f3f4f6;
}

/* ── Hero parallax image ─────────────────────────────────────── */
/* Extends the image beyond the section edges so the parallax
   movement never reveals a gap. !important overrides Tailwind's
   inset-0 (top:0) and h-full (height:100%). */
.hero-parallax {
  top:    -100px !important;
  height: calc(100% + 200px) !important;
  will-change: transform;
}

/* ── Floating CTA ────────────────────────────────────────────── */
#floating-cta {
  position: fixed;
  bottom: 1.5rem;
  right:  1.5rem;
  z-index: 999;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .5rem;
  transform: translateY(calc(100% + 3rem));
  transition: transform .45s cubic-bezier(.34,1.56,.64,1), opacity .4s;
  opacity: 0;
  pointer-events: none;
}
#floating-cta.cta-visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}