/* ============================================================
   Hero channel constellation — WhatsApp · Telegram (left)
                                Discord  · Slack    (right)
   ------------------------------------------------------------
   Decorative background art for .hero.v7. Sits above the aurora
   (z 0) and pattern grid (z 1) but below the content container
   (z 2), so it reads as part of the background rather than as
   content. aria-hidden + pointer-events:none throughout.

   Placement has three tiers, because the hero column is a fixed
   1200px and centred:
     >= 1500px  tiles anchored off the centre line, entirely
                outside the column — nothing can ever overlap.
     1280-1499  tiles pinned to the viewport edge, smaller, and
                dropped to the vertical bands where the copy is
                narrowest (the logo row and the lead paragraph).
     < 1280px   no margin left to live in, so the layer is hidden
                rather than allowed to sit under the headline.
   ============================================================ */

/* The markup carries an inline display:none, so if this stylesheet ever fails
   to load the layer degrades to nothing instead of dumping four unstyled,
   page-wide SVGs into the hero. !important is what overrides that inline rule
   — it is not fighting any other stylesheet.
   (The [hidden] attribute cannot be used for this: Bootstrap reboot ships
   [hidden]{display:none!important}, which would win.) */
.chan-field {
  display: block !important;
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.chan {
  position: absolute;
  margin: 0;
  width: var(--sz);
  height: var(--sz);
  opacity: 0;
  animation: chan-in 1s cubic-bezier(0.22, 1, 0.36, 1) var(--in) forwards;
}

/* Brand-tinted bloom on the dark backdrop, so the tile reads as
   lit from within rather than pasted on. */
.chan-aura {
  position: absolute;
  inset: -52%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, var(--glow), transparent 66%);
  filter: blur(22px);
  opacity: 0.62;
  animation: chan-breathe var(--dur) ease-in-out var(--phase) infinite alternate;
}

/* The glass tile. The float lives here, not on .chan, so it cannot
   fight the entrance transform on the parent. */
.chan-tile {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: 30%;
  /* Two layers: a periodic specular glint over the base glass. */
  background: linear-gradient(
        112deg,
        transparent 36%,
        rgba(255, 255, 255, 0.24) 46%,
        transparent 57%
      )
      -150% 0 / 280% 100% no-repeat,
    linear-gradient(
      155deg,
      rgba(255, 255, 255, 0.16),
      rgba(255, 255, 255, 0.035) 55%,
      rgba(255, 255, 255, 0.08)
    );
  border: 1px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  box-shadow: 0 26px 70px -18px var(--glow),
    0 0 34px -6px var(--glow),
    0 0 0 1px rgba(255, 255, 255, 0.05) inset,
    0 1px 0 rgba(255, 255, 255, 0.28) inset;
  animation: chan-float var(--dur) ease-in-out var(--phase) infinite alternate,
    chan-sheen 7s ease-in-out var(--phase) infinite;
}

/* Two offset "incoming signal" rings per tile. */
.chan-tile::before,
.chan-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid var(--brand);
  opacity: 0;
  animation: chan-ping 4.4s cubic-bezier(0.2, 0.6, 0.3, 1) var(--phase) infinite;
}
.chan-tile::after {
  animation-delay: calc(var(--phase) + 1.5s);
}

.chan-mark {
  position: relative;
  z-index: 1;
  width: 46%;
  height: 46%;
  display: block;
  filter: drop-shadow(0 3px 14px var(--glow)) drop-shadow(0 0 3px var(--glow));
}

/* Signal wire running from each tile toward the headline, with a
   packet travelling along it — the channels feeding the army. */
.chan-wire {
  position: absolute;
  top: 50%;
  width: var(--wire);
  height: 1px;
  opacity: 0.45;
}
.chan-wire::after {
  content: "";
  position: absolute;
  top: -2.5px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 12px 2px var(--glow);
}

.chan--left .chan-wire {
  left: 100%;
  background: linear-gradient(90deg, var(--brand), transparent);
}
.chan--left .chan-wire::after {
  animation: chan-packet-r 3.8s linear var(--phase) infinite;
}
.chan--right .chan-wire {
  right: 100%;
  background: linear-gradient(270deg, var(--brand), transparent);
}
.chan--right .chan-wire::after {
  animation: chan-packet-l 3.8s linear var(--phase) infinite;
}

/* ---------- Per-channel identity, size and rhythm ----------
   Sizes and phases are deliberately mismatched so the four never
   bob in unison, and the lower pair sits further out and larger
   to give each flank some depth. The left/right anchors are
   written as "outer edge of the tile, N px clear of the centre
   line", which keeps them off the 600px half-column at any width. */
.chan--wa {
  --brand: #25d366;
  --glow: rgba(37, 211, 102, 0.44);
  --sz: 100px;
  --wire: 118px;
  --in: 0.18s;
  --from: -40px;
  --phase: 0s;
  --dur: 7.5s;
  top: 150px;
  right: calc(50% + 604px);
}
.chan--tg {
  --brand: #2aabee;
  --glow: rgba(42, 171, 238, 0.52);
  --sz: 116px;
  --wire: 148px;
  --in: 0.38s;
  --from: -40px;
  --phase: -2.1s;
  --dur: 8.8s;
  top: 372px;
  right: calc(50% + 620px);
}
.chan--dc {
  --brand: #5865f2;
  --glow: rgba(88, 101, 242, 0.8);
  --sz: 100px;
  --wire: 118px;
  --in: 0.28s;
  --from: 40px;
  --phase: -1.1s;
  --dur: 8.1s;
  top: 132px;
  left: calc(50% + 604px);
}
.chan--sl {
  --brand: #ecb22e;
  --glow: rgba(236, 178, 46, 0.52);
  --sz: 116px;
  --wire: 148px;
  --in: 0.48s;
  --from: 40px;
  --phase: -3.2s;
  --dur: 9.4s;
  top: 356px;
  left: calc(50% + 620px);
}

@keyframes chan-in {
  from {
    opacity: 0;
    transform: translateX(var(--from)) scale(0.84);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes chan-float {
  from {
    transform: translate3d(0, -11px, 0) rotate(-2.5deg);
  }
  to {
    transform: translate3d(0, 13px, 0) rotate(2.5deg);
  }
}
@keyframes chan-sheen {
  0%,
  72% {
    background-position: -150% 0, 0 0;
  }
  100% {
    background-position: 250% 0, 0 0;
  }
}
@keyframes chan-breathe {
  from {
    transform: scale(0.86);
    opacity: 0.36;
  }
  to {
    transform: scale(1.06);
    opacity: 0.64;
  }
}
@keyframes chan-ping {
  0% {
    transform: scale(1);
    opacity: 0.6;
  }
  70% {
    opacity: 0;
  }
  100% {
    transform: scale(1.85);
    opacity: 0;
  }
}
@keyframes chan-packet-r {
  0% {
    left: 0;
    opacity: 0;
  }
  12% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    left: 100%;
    opacity: 0;
  }
}
@keyframes chan-packet-l {
  0% {
    right: 0;
    opacity: 0;
  }
  12% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    right: 100%;
    opacity: 0;
  }
}

/* ---------- 1280-1499px ----------
   Not enough margin outside the column for the centre-anchored
   layout, so pin to the viewport edge and move the lower pair down
   beside the lead paragraph, which is the narrowest block in the
   hero. Wires are shortened so they stop well short of the copy. */
@media (max-width: 1499px) {
  .chan--wa {
    --sz: 72px;
    --wire: 54px;
    top: 128px;
    right: auto;
    left: 16px;
  }
  .chan--tg {
    --sz: 84px;
    --wire: 60px;
    top: 596px;
    right: auto;
    left: 10px;
  }
  .chan--dc {
    --sz: 72px;
    --wire: 54px;
    top: 114px;
    left: auto;
    right: 16px;
  }
  .chan--sl {
    --sz: 84px;
    --wire: 60px;
    top: 578px;
    left: auto;
    right: 10px;
  }
  .chan-tile {
    box-shadow: 0 18px 48px -18px var(--glow), 0 0 24px -6px var(--glow),
      0 1px 0 rgba(255, 255, 255, 0.24) inset;
  }
  .chan-aura {
    inset: -45%;
  }
}

/* Below the column width there is no margin to sit in — the tiles
   would land on the headline, so the layer is dropped. */
@media (max-width: 1279px) {
  .chan-field {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .chan,
  .chan-aura,
  .chan-tile,
  .chan-tile::before,
  .chan-tile::after,
  .chan-wire::after {
    animation: none !important;
  }
  .chan {
    opacity: 1;
    transform: none;
  }
  .chan-tile::before,
  .chan-tile::after {
    opacity: 0;
  }
  .chan-wire::after {
    opacity: 1;
    left: 42%;
  }
  .chan--right .chan-wire::after {
    left: auto;
    right: 42%;
  }
}

@media print {
  .chan-field {
    display: none !important;
  }
}