/* ========================================
   intelgallery.css — Organized & Cleaned
   ======================================== */

/* ── Custom Properties ── */
:root {
  --d: 20000ms;
  --angle: 90deg;
  --gradX: 100%;
  --gradY: 50%;
  --c1: var(--swatch--brand);
  --c2: var(--swatch--dark);
}

@property --angle {
  syntax: '<angle>';
  initial-value: 90deg;
  inherits: true;
}

@property --gradX {
  syntax: '<percentage>';
  initial-value: 50%;
  inherits: true;
}

@property --gradY {
  syntax: '<percentage>';
  initial-value: 0%;
  inherits: true;
}

/* ── Keyframes ── */
@keyframes scroll-pipeline {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-100% - 2rem));
  }
}

@keyframes scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-100% - 1rem));
  }
}

@keyframes loop {
  to {
    offset-distance: 100%;
  }
}

@keyframes gradient-rotate {
  100% {
    transform: translate(0%, 0%) rotate(360deg);
  }
}

@keyframes trimLine {
  0% {
    clip-path: inset(0 0 100% 0);
  }
  50% {
    clip-path: inset(0 0 0 0);
  }
  100% {
    clip-path: inset(0 0 100% 0);
  }
}

/* ── Pipeline Status ── */
[data-pipeline-status='bad'] {
  background-color: #f8226a;
}

[data-pipeline-status='good'] {
  background-color: #01e69d;
}

[data-pipeline-status='good'] .status_icon {
  display: block;
}

[data-pipeline-status='event'] .fabric_item_contain {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  height: 1.75rem;
}

/* ── Scroll Animations ── */
.scroll-pipeline {
  animation: scroll-pipeline 20s linear infinite;
}

.scroll-pipeline-left {
  animation: scroll-pipeline 15s linear infinite;
}

.reverse-pipeline {
  animation-direction: reverse;
}

.scroll {
  animation: scroll 35s linear infinite;
}

.reverse {
  animation-direction: reverse;
}

/* ── Layout ── */
.pipeline_row,
.fabric_row {
  max-width: fit-content;
}

.fabric_item {
  -webkit-transform: translateZ(0);
}

/* ── Gradient Masks ── */
.fabric_gradient {
  mask: linear-gradient(
    to right,
    transparent 0%,
    transparent 25%,
    var(--_theme---background) 50%,
    transparent 75%,
    transparent 100%
  );
}

.fabric_gradient.is-small {
  mask: linear-gradient(
    to right,
    transparent 0%,
    transparent 10%,
    var(--_theme---background) 50%,
    transparent 90%,
    transparent 100%
  );
}

[data-theme-mask='true'] {
  mask: linear-gradient(
    to right,
    transparent 0%,
    var(--_theme---background) 25%,
    var(--_theme---background) 75%,
    transparent 100%
  );
}

/* ── Pipeline Row Line ── */
.pipelines_visual_row::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: var(--swatch--grey-3);
}

/* ── Visual Logo ── */
.visual_logo_box {
  box-shadow:
    rgba(35, 34, 38, 0.08) 0px 0px 0px 1px,
    rgba(35, 34, 38, 0.04) 0px 1px 1px -0.5px,
    rgba(35, 34, 38, 0.04) 0px 3px 3px -1.5px,
    rgba(35, 34, 38, 0.04) 0px 6px 6px -3px,
    rgba(14, 63, 126, 0.04) 0px 12px 12px -6px,
    rgba(35, 34, 38, 0.5) 0px 24px 24px -12px;
}

/* ── Logo Connector Base (shared pseudo-elements) ── */
.logo_box.is-fabric::after,
.logo_fabric_bottom::before,
.logo_fabric_bottom::after {
  content: '';
  position: absolute;

  background-color: var(--swatch--grey-3);
}

.logo_fabric_bottom::before {
  height: 200px;
  width: 1px;
  top: 100%;
  left: 50%;
}

/* ── Supercharge Icons ── */
.supercharge_icon {
  box-shadow:
    0 0 0 1px #0e3f7e0f,
    0 1px 1px -0.5px #2a334608,
    0 3px 3px -1.5px #2a33460d,
    0 5px 5px -2.5px #2a334608,
    0 16px 16px -8px #2a33460a;
}

.supercharge_icon_border {
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  padding: 2px;
  border-radius: 8px;
}

/* FIX: Added missing semicolon after var(--swatch--brand) and unit on `left` */
.supercharge_icon_border::before {
  content: '';
  background:
    conic-gradient(
      from 0deg at 50% 50%,
      transparent 260deg,
      rgb(255, 77, 135) 360deg,
      transparent 361deg
    ),
    var(--swatch--dark-3);
  height: 250px;
  width: 250px;
  left: -25px;
  position: absolute;
  top: -70px;
  animation: gradient-rotate 4s linear infinite;
}

.is-supercharge {
  animation: gradient-rotate 8s linear infinite;
}

/* ── Grid Lines Section ── */
.grid-lines-section {
  background: #222;
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 7px,
    rgba(0, 0, 0, 0.8) 9px,
    rgba(0, 0, 0, 0.8) 13px,
    transparent 13px
  );
}

/* ========================================
   RESPONSIVE — Logo Box Connectors
   ======================================== */

/* ── Desktop (992px+) ── */
@media (min-width: 992px) {
  .logo_box:nth-child(1)::after,
  .logo_box:nth-child(2)::after,
  .logo_box:nth-child(3)::after,
  .logo_box:nth-child(5)::after,
  .logo_box:nth-child(6)::after,
  .logo_box:nth-child(7)::after {
    content: '';
    height: 25px;
    width: 1px;
    background-color: var(--swatch--grey-3);
    position: absolute;
    top: 100%;
    left: 50%;
  }

  .logo_box:nth-child(4)::after {
    content: '';
    height: 50px;
    width: 1px;
    background-color: var(--swatch--grey-3);
    position: absolute;
    top: 100%;
    left: 50%;
  }

  .logo_bottom::after {
    content: '';
    height: 1px;
    width: 100%;
    max-width: 31.5rem;
    background-color: var(--swatch--grey-3);
    position: absolute;
    bottom: 0;
  }

  .logo_box.is-fabric::after {
    height: 20px;
    width: 1px;
    top: 100%;
    left: 50%;
  }

  .logo_fabric_bottom::after {
    height: 1px;
    width: 100%;
    max-width: 45rem;
    bottom: 0;
    left: auto;
    right: auto;
  }

  /* Stream variant (container query) */
  @container (width < 75rem) {
    .logo_wrap.is-stream {
      display: flex;
      flex-wrap: wrap;
      width: 25rem;
    }

    .features_card_visual_top {
      height: 11rem;
    }

    .logo_box.is-stream:nth-child(1)::after,
    .logo_box.is-stream:nth-child(2)::after,
    .logo_box.is-stream:nth-child(3)::after,
    .logo_box.is-stream:nth-child(4)::after {
      content: '';
      height: 0;
      width: 1px;
      background-color: var(--swatch--grey-3);
      position: absolute;
      top: 100%;
      left: 50%;
    }

    .logo_box.is-stream:nth-child(5)::after,
    .logo_box.is-stream:nth-child(6)::after,
    .logo_box.is-stream:nth-child(7)::after {
      content: '';
      height: 25px;
      width: 1px;
      background-color: var(--swatch--grey-3);
      position: absolute;
      top: 100%;
      left: 50%;
    }

    .logo_box.is-stream:nth-child(6)::after {
      height: 50px;
    }

    .logo_bottom::after {
      max-width: 10.4rem;
      left: auto;
      right: auto;
    }
  }
}

/* ── Tablet (768px – 991px) ── */
@media (min-width: 768px) and (max-width: 991px) {
  .logo_box:nth-child(1)::after,
  .logo_box:nth-child(2)::after,
  .logo_box:nth-child(3)::after,
  .logo_box:nth-child(5)::after,
  .logo_box:nth-child(6)::after,
  .logo_box:nth-child(7)::after {
    content: '';
    height: 25px;
    width: 1px;
    background-color: var(--swatch--grey-3);
    position: absolute;
    top: 100%;
    left: 50%;
  }

  .logo_box:nth-child(4)::after {
    content: '';
    height: 50px;
    width: 1px;
    background-color: var(--swatch--grey-3);
    position: absolute;
    top: 100%;
    left: 50%;
  }

  .logo_bottom::after {
    content: '';
    height: 1px;
    width: 100%;
    max-width: 31.51rem;
    background-color: var(--swatch--grey-3);
    position: absolute;
    bottom: 0;
  }

  .logo_box.is-fabric::after {
    height: 20px;
    width: 1px;
    top: 100%;
    left: 50%;
  }

  .logo_fabric_bottom::after {
    height: 1px;
    width: 100%;
    max-width: 37.3rem;
    bottom: 0;
    left: auto;
    right: auto;
  }
}

/* ── Large Mobile (480px – 767px) ── */
@media (min-width: 480px) and (max-width: 767px) {
  .logo_box:nth-child(1)::after,
  .logo_box:nth-child(2)::after,
  .logo_box:nth-child(3)::after,
  .logo_box:nth-child(4)::after {
    content: '';
    height: 0;
    width: 1px;
    background-color: var(--swatch--grey-3);
    position: absolute;
    top: 100%;
    left: 50%;
  }

  .logo_box:nth-child(5)::after,
  .logo_box:nth-child(7)::after {
    content: '';
    height: 16px;
    width: 1px;
    background-color: var(--swatch--grey-3);
    position: absolute;
    top: 100%;
    left: 50%;
  }

  .logo_box:nth-child(6)::after {
    content: '';
    height: 50px;
    width: 1px;
    background-color: var(--swatch--grey-3);
    position: absolute;
    top: 100%;
    left: 50%;
  }

  .logo_bottom::after {
    content: '';
    height: 1px;
    width: 100%;
    max-width: 10.4rem;
    background-color: var(--swatch--grey-3);
    position: absolute;
    bottom: 0;
    left: auto;
    right: auto;
  }

  .logo_box.is-fabric:nth-child(5)::after,
  .logo_box.is-fabric:nth-child(6)::after,
  .logo_box.is-fabric:nth-child(7)::after {
    height: 100%;
    width: 1px;
    top: 100%;
    left: 50%;
  }

  .logo_fabric_bottom::after {
    height: 1px;
    width: 100%;
    max-width: 12.5rem;
    bottom: 0;
    left: auto;
    right: auto;
  }
}

/* ── Small Mobile (max 479px) ── */
@media (max-width: 479px) {
  .logo_box:nth-child(1)::after,
  .logo_box:nth-child(2)::after,
  .logo_box:nth-child(3)::after,
  .logo_box:nth-child(4)::after,
  .logo_box:nth-child(5)::after,
  .logo_box:nth-child(6)::after {
    content: '';
    height: 0;
    width: 1px;
    background-color: var(--swatch--grey-3);
    position: absolute;
    top: 100%;
    left: 50%;
  }

  .logo_box:nth-child(7)::after {
    content: '';
    height: 50px;
    width: 1px;
    background-color: var(--swatch--grey-3);
    position: absolute;
    top: 100%;
    left: 50%;
  }

  .logo_box.is-fabric:nth-child(5)::after,
  .logo_box.is-fabric:nth-child(6)::after {
    height: 0;
    width: 1px;
    top: 100%;
    left: 50%;
  }

  .logo_box.is-fabric:nth-child(7)::after {
    height: 200px;
    width: 1px;
    top: 100%;
    left: 50%;
  }

  .logo_fabric_bottom::after {
    height: 1px;
    width: 0;
    max-width: 12.5rem;
    bottom: 0;
    left: auto;
    right: auto;
  }
}

/* ── Small Mobile Portrait — Supercharge Lines ── */
@media only screen and (max-width: 477px) and (orientation: portrait) {
  .supercharge_ip_wrap:nth-child(3)::before {
    content: '';
    position: absolute;
    bottom: 1.75rem;
    left: 40%;
    width: 1px;
    height: 60px;
    background-color: var(--swatch--grey-3);
    clip-path: inset(0 0 100% 0);
    animation: trimLine 2s linear infinite;
  }

  .supercharge_ip_wrap:nth-child(4)::before {
    content: '';
    position: absolute;
    bottom: 1.75rem;
    left: 60%;
    width: 1px;
    height: 60px;
    background-color: var(--swatch--grey-3);
    clip-path: inset(0 0 100% 0);
  }

  .is-event:nth-child(1)::before {
    content: '';
    position: absolute;
    top: 1.75rem;
    left: 80%;
    width: 1px;
    height: 60px;
    background-color: var(--swatch--grey-3);
    clip-path: inset(0 0 100% 0);
  }

  .is-event:nth-child(4)::before {
    content: '';
    position: absolute;
    top: 1.75rem;
    left: 20%;
    width: 1px;
    height: 60px;
    background-color: var(--swatch--grey-3);
    clip-path: inset(0 0 100% 0);
    animation: trimLine 2s linear infinite;
  }
}