/* Site-wide motion layer. Loaded by every page; paired with js/site.js.
 *
 * Hooks are data-ee-* attributes, not classes: the dc runtime rewrites each
 * element's class attribute after its first render, which wipes added classes.
 *
 * Safety rule: the hidden state only applies under html.ee-motion, which
 * js/site.js sets only when IntersectionObserver exists and the visitor has not
 * asked for reduced motion. If the script never runs, nothing is hidden.
 *
 * Reveal uses the `translate` property (not `transform`) so it never fights the
 * inline transform styles the .dc.html pages already use.
 */
:root {
  --ee-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Scroll reveal: fade up, staggered by data-ee-d (0-6, set per batch in js/site.js). */
html.ee-motion [data-ee-r] {
  opacity: 0;
  translate: 0 26px;
}
html.ee-motion [data-ee-r][data-ee-in] {
  opacity: 1;
  translate: none;
  transition:
    opacity 0.8s var(--ee-ease) var(--ee-d, 0ms),
    translate 0.8s var(--ee-ease) var(--ee-d, 0ms);
}
[data-ee-d="1"] { --ee-d: 80ms; }
[data-ee-d="2"] { --ee-d: 160ms; }
[data-ee-d="3"] { --ee-d: 240ms; }
[data-ee-d="4"] { --ee-d: 320ms; }
[data-ee-d="5"] { --ee-d: 400ms; }
[data-ee-d="6"] { --ee-d: 480ms; }

/* Hero background: slow settle-in zoom on load. */
html.ee-motion [data-ee-kb] {
  animation: ee-kenburns 2.4s var(--ee-ease) both;
}
@keyframes ee-kenburns {
  from { scale: 1.08; }
  to { scale: 1; }
}

/* Lazy images: shimmer placeholder while loading, soft fade when ready. */
[data-ee-img="wait"] {
  background-color: #26282b;
  background-image: linear-gradient(100deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.06) 50%, rgba(255, 255, 255, 0) 70%);
  background-size: 200% 100%;
  animation: ee-shimmer 1.4s linear infinite;
}
html.ee-motion [data-ee-img="in"] {
  animation: ee-img-in 0.7s var(--ee-ease) both;
}
@keyframes ee-shimmer {
  from { background-position: 150% 0; }
  to { background-position: -50% 0; }
}
@keyframes ee-img-in {
  from { opacity: 0; scale: 1.03; }
  to { opacity: 1; scale: 1; }
}

/* Header gains depth once the page scrolls. */
header[data-ee-header] {
  transition: box-shadow 0.3s ease, background-color 0.3s ease;
}
header[data-ee-header][data-ee-scrolled] {
  box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.6);
}

/* Top bar: on phones the message scrolls as a ticker instead of wrapping to
   three lines, which pushed the hero down. The call link stays fixed. */
@media (max-width: 720px) {
  [data-ee-topbar] > div {
    flex-wrap: nowrap !important;
    padding-top: 7px !important;
    padding-bottom: 7px !important;
  }
  [data-ee-topbar] [data-ee-ticker] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  }
  [data-ee-topbar] [data-ee-ticker] > span {
    display: inline-block;
    padding-left: 100%;
    animation: ee-marquee 16s linear infinite;
  }
  [data-ee-topbar] a {
    flex: 0 0 auto;
    white-space: nowrap;
  }
}
/* Phones: nav links sit on one swipeable row instead of wrapping, which made the
   sticky header ~160px tall. Stopgap until a proper mobile menu is built. */
@media (max-width: 720px) {
  header[data-ee-header] > div {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    row-gap: 8px !important;
  }
  header[data-ee-header] nav {
    flex-wrap: nowrap !important;
    gap: 20px !important;
    width: calc(100% + 48px);
    margin: 0 -24px;
    padding: 2px 24px 4px;
    overflow-x: auto;
    scrollbar-width: none;
    white-space: nowrap;
    -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent);
    mask-image: linear-gradient(90deg, #000 88%, transparent);
  }
  header[data-ee-header] nav::-webkit-scrollbar { display: none; }
  header[data-ee-header] nav a { flex: 0 0 auto; }
  /* Keep the quote CTA visible at the start of the row. */
  header[data-ee-header] nav a:last-child { order: -1; padding: 9px 16px !important; }
}
@keyframes ee-marquee {
  from { translate: 0 0; }
  to { translate: -100% 0; }
}

/* Logo marquee (Home "Brands we install"). The track holds the logo set twice,
   so sliding it by exactly half loops seamlessly. Without motion it falls back
   to a centred, wrapping row with the duplicate set hidden. */
[data-marquee] {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
html.ee-motion [data-marquee-track] {
  animation: ee-logos 40s linear infinite;
}
html.ee-motion [data-marquee]:hover [data-marquee-track] {
  animation-play-state: paused;
}
@keyframes ee-logos {
  from { translate: 0 0; }
  to { translate: -50% 0; }
}
html:not(.ee-motion) [data-marquee] {
  -webkit-mask-image: none;
  mask-image: none;
}
html:not(.ee-motion) [data-marquee-track] {
  width: auto !important;
  flex-wrap: wrap;
  justify-content: center;
  padding-right: 0 !important;
}
html:not(.ee-motion) [data-marquee-dup] {
  display: none !important;
}

/* Review carousel: native scroll-snap row, arrows and autoplay in js/site.js. */
[data-carousel-track] {
  scrollbar-width: none;
}
[data-carousel-track]::-webkit-scrollbar {
  display: none;
}
[data-carousel-track]:focus-visible {
  outline: 2px solid #7cc242;
  outline-offset: 6px;
  border-radius: 14px;
}

@media (prefers-reduced-motion: reduce) {
  [data-carousel-track] {
    scroll-behavior: auto !important;
  }
  [data-ee-img="wait"],
  [data-ee-topbar] [data-ee-ticker] > span {
    animation: none !important;
  }
  [data-ee-topbar] [data-ee-ticker] > span {
    padding-left: 0;
  }
}