/* ==========================================================================
   EliteBlocc — Certification / Trust Marquee Component
   File: assets/css/components/ebc-marquee.css
   Version: 1.0

   PURPOSE
   The scrolling certification ticker used on Homepage, Product Hub,
   Technical Hub, Sustainability, and any future pages. Previously
   duplicated in 4 separate page CSS files with slightly different
   class names and @keyframe identifiers. Unified here.

   EXISTING PAGES — dual-class approach (no HTML changes needed)
   Each page wrapper still carries its original class (eb-trust-marquee,
   eb-ph-marquee, eb-th-marquee, eb-sus-marquee). The shared base styles
   now come from this file by targeting all known wrapper class names.
   Page CSS retains only accent-colour overrides.

   NEW PAGES — canonical classes
   Use:  <div class="ebc-marquee" aria-hidden="true">
           <div class="ebc-marquee__track">
             <span class="ebc-marquee__item">
               <span class="ebc-marquee__dot" aria-hidden="true"></span>
               Passivhaus Ready
             </span>
           </div>
         </div>

   THEMING
   Override these CSS custom properties on the page-level wrapper:
   --ebc-mq-bg        background colour
   --ebc-mq-border    border/fade colour
   --ebc-mq-dot       dot colour
   --ebc-mq-text      item text colour
   --ebc-mq-text-hover item text colour on wrapper hover
   --ebc-mq-speed     animation duration (default 40s)

   Example — emerald-accented variant (Sustainability page):
   .eb-sus-marquee {
     --ebc-mq-border: rgba(16, 185, 129, 0.14);
     --ebc-mq-dot:    rgba(16, 185, 129, 0.5);
   }
   ========================================================================== */

/* ── Shared wrapper rules — all known marquee wrappers + canonical class ── */

.ebc-marquee,
.eb-trust-marquee,
.eb-ph-marquee,
.eb-th-marquee,
.eb-sus-marquee {
  position:      relative;
  background:    var(--ebc-mq-bg, #0b0d0f);
  border-top:    1px solid var(--ebc-mq-border, rgba(245, 158, 11, 0.18));
  border-bottom: 1px solid var(--ebc-mq-border, rgba(245, 158, 11, 0.18));
  overflow:      hidden;
  padding:       10px 0;
}

/* Fade edges — left */
.ebc-marquee::before,
.eb-trust-marquee::before,
.eb-ph-marquee::before,
.eb-th-marquee::before,
.eb-sus-marquee::before {
  content:        '';
  position:       absolute;
  top:            0;
  bottom:         0;
  left:           0;
  width:          80px;
  z-index:        2;
  pointer-events: none;
  background:     linear-gradient(
    to right,
    var(--ebc-mq-bg, #0b0d0f) 40%,
    transparent
  );
}

/* Fade edges — right */
.ebc-marquee::after,
.eb-trust-marquee::after,
.eb-ph-marquee::after,
.eb-th-marquee::after,
.eb-sus-marquee::after {
  content:        '';
  position:       absolute;
  top:            0;
  bottom:         0;
  right:          0;
  width:          80px;
  z-index:        2;
  pointer-events: none;
  background:     linear-gradient(
    to left,
    var(--ebc-mq-bg, #0b0d0f) 40%,
    transparent
  );
}

/* ── Track — scrolling inner strip ── */

.ebc-marquee__track,
.eb-trust-marquee__track,
.eb-ph-marquee__track,
.eb-th-marquee__track,
.eb-sus-marquee__track {
  display:      flex;
  align-items:  center;
  white-space:  nowrap;
  width:        max-content;
  animation:    ebc-marquee-scroll var(--ebc-mq-speed, 40s) linear infinite;
  will-change:  transform;
}

/* Pause on hover */
.ebc-marquee:hover          .ebc-marquee__track,
.eb-trust-marquee:hover     .eb-trust-marquee__track,
.eb-ph-marquee:hover        .eb-ph-marquee__track,
.eb-th-marquee:hover        .eb-th-marquee__track,
.eb-sus-marquee:hover       .eb-sus-marquee__track {
  animation-play-state: paused;
}

@keyframes ebc-marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ── Item ── */

.ebc-marquee__item,
.eb-trust-marquee__item,
.eb-ph-marquee__item,
.eb-th-marquee__item,
.eb-sus-marquee__item {
  display:        inline-flex;
  align-items:    center;
  gap:            7px;
  font-family:    monospace;
  font-size:      0.66rem;
  font-weight:    600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color:          var(--ebc-mq-text, rgba(255, 255, 255, 0.52));
  padding:        0 28px;
  white-space:    nowrap;
  user-select:    none;
  -webkit-user-select: none;
  transition:     color 0.2s ease;
}

.ebc-marquee:hover          .ebc-marquee__item,
.eb-trust-marquee:hover     .eb-trust-marquee__item,
.eb-ph-marquee:hover        .eb-ph-marquee__item,
.eb-th-marquee:hover        .eb-th-marquee__item,
.eb-sus-marquee:hover       .eb-sus-marquee__item {
  color: var(--ebc-mq-text-hover, rgba(255, 255, 255, 0.8));
}

/* ── Dot ── */

.ebc-marquee__dot,
.eb-trust-marquee__dot,
.eb-ph-marquee__dot,
.eb-th-marquee__dot,
.eb-sus-marquee__dot {
  width:         5px;
  height:        5px;
  border-radius: 50%;
  background:    var(--ebc-mq-dot, rgba(245, 158, 11, 0.6));
  flex-shrink:   0;
}

/* ── Separator (Homepage only) ── */

.eb-trust-marquee__sep {
  color:       var(--ebc-mq-sep, rgba(245, 158, 11, 0.32));
  font-size:   1rem;
  flex-shrink: 0;
}

/* ── Reduced motion ── */

@media (prefers-reduced-motion: reduce) {
  .ebc-marquee__track,
  .eb-trust-marquee__track,
  .eb-ph-marquee__track,
  .eb-th-marquee__track,
  .eb-sus-marquee__track {
    animation: none;
  }
}

/* ==========================================================================
   PAGE-LEVEL THEME OVERRIDES
   Each page only needs to override the CSS variables that differ.
   All structural styles come from the base rules above.
   ========================================================================== */

/* Homepage — gold accent (default, no overrides needed) */

/* Product Hub — gold accent, slightly faster */
.eb-ph-marquee {
  --ebc-mq-speed:  42s;
  --ebc-mq-border: rgba(245, 158, 11, 0.16);
  --ebc-mq-dot:    rgba(245, 158, 11, 0.5);
  --ebc-mq-text:   rgba(255, 255, 255, 0.4);
}

/* Technical Hub — gold accent, slightly different speed */
.eb-th-marquee {
  --ebc-mq-speed:  44s;
  --ebc-mq-border: rgba(245, 158, 11, 0.16);
  --ebc-mq-dot:    rgba(245, 158, 11, 0.5);
  --ebc-mq-text:   rgba(255, 255, 255, 0.4);
}

/* Sustainability — emerald-accented */
.eb-sus-marquee {
  --ebc-mq-bg:     #090b0a;
  --ebc-mq-speed:  48s;
  --ebc-mq-border: rgba(16, 185, 129, 0.14);
  --ebc-mq-dot:    rgba(16, 185, 129, 0.5);
  --ebc-mq-text:   rgba(255, 255, 255, 0.4);
}