/* ============================================================
   Multilingual output band — sits directly above "Meet the Claw
   Agents". A dark section between the white memory section and
   the pale persona section, so the page gets a beat of contrast
   and the flag colours have something to sit against.

   Self-contained: it does not rely on section.dark or on any
   existing rule beyond .container / .section-head / .text-grad,
   and it overrides nothing outside .lang-band.
   ============================================================ */

/* The markup carries an inline display:none so the section degrades to nothing
   if this stylesheet fails to load, instead of dumping 52 unstyled flag chips
   into the page. !important is what beats that inline rule. */
.lang-band {
  display: block !important;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 88px 0 76px;
  background: radial-gradient(120% 90% at 50% 0%, #1a1f36 0%, #0d1020 55%, #08080f 100%);
  color: #fff;
}

/* Warm bloom behind the headline, tying the band to the hero's gold. */
.lang-aurora {
  position: absolute;
  top: -220px;
  left: 50%;
  width: 900px;
  height: 620px;
  transform: translateX(-50%);
  background: radial-gradient(circle at 50% 50%, rgba(240, 163, 44, 0.22), transparent 62%);
  filter: blur(40px);
  pointer-events: none;
  z-index: -1;
}

.lang-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* ---------- Head ---------- */
.lang-band .section-head {
  max-width: 820px;
}
.lang-band .eyebrow {
  color: #ffde4a;
  border-color: rgba(255, 222, 74, 0.55);
}
.lang-band .eyebrow::before,
.lang-band .eyebrow::after {
  border-color: rgba(255, 222, 74, 0.55);
  background: #12162a;
}
.lang-band h2 {
  color: #fff;
}
.lang-band .lead {
  color: rgba(255, 255, 255, 0.72);
}

/* ---------- One brief → many languages ---------- */
.lang-demo {
  max-width: 720px;
  margin: 0 auto;
  border-radius: 20px;
  overflow: hidden;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.03));
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.9),
    0 0 0 1px rgba(255, 255, 255, 0.04) inset;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.lang-demo-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  background: rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.lang-dots {
  display: inline-flex;
  gap: 6px;
}
.lang-dots i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
}
.lang-dots i:first-child {
  background: #ff5f57;
}
.lang-dots i:nth-child(2) {
  background: #febc2e;
}
.lang-dots i:nth-child(3) {
  background: #28c840;
}
.lang-demo-title {
  font-size: 13px;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.66);
}
.lang-demo-live {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6ee7a8;
}
.lang-demo-live::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #34d399;
  box-shadow: 0 0 10px 2px rgba(52, 211, 153, 0.7);
  animation: lang-blink 2.4s ease-in-out infinite;
}

.lang-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.42);
  margin-bottom: 10px;
}

.lang-brief {
  padding: 20px 22px 18px;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.14);
}
.lang-brief p {
  margin: 0;
  font-size: 18px;
  line-height: 1.45;
  color: #fff;
}

.lang-out {
  padding: 18px 22px 22px;
}

/* Every translation occupies the same grid cell, so the card is as tall as the
   tallest line and never jumps between them. */
.lang-stack {
  display: grid;
}
.lang-out-item {
  grid-area: 1/1;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  opacity: 0;
  animation: lang-cycle 19.2s ease-in-out infinite backwards;
  animation-delay: calc(var(--i) * 3.2s);
}
.lang-out-body {
  min-width: 0;
}
.lang-out-lang {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #ffc861;
  margin-bottom: 4px;
}
.lang-out-item p {
  margin: 0;
  font-size: 17px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.92);
}
.lang-out-item p[dir="rtl"] {
  text-align: right;
}

/* ---------- Flags ---------- */
.flagx {
  height: 24px;
  width: auto;
  display: block;
  flex: none;
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18), 0 3px 8px rgba(0, 0, 0, 0.45);
}
.flagx--lg {
  height: 34px;
  border-radius: 4px;
  margin-top: 2px;
}

/* ---------- Full-bleed language rails ---------- */
.lang-rails {
  position: relative;
  padding: 22px 0;
  margin: 46px 0 30px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 55%, rgba(255, 255, 255, 0.02));
  display: grid;
  gap: 16px;
  /* Edge-to-edge: the rails ignore .container and run the full viewport. */
  width: 100%;
  /* Soft ends so chips arrive and leave instead of being chopped. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.lang-rail {
  overflow: hidden;
}
.lang-track {
  display: flex;
  align-items: center;
  white-space: nowrap;
  /* Without max-content the flex box is capped at the rail width, so -50% is
     not one full set and the loop jumps at the seam. */
  width: max-content;
  will-change: transform;
  /* The track holds the chip set twice; -50% lands exactly on the seam. */
  animation: lang-scroll 68s linear infinite;
}
.lang-rail--rev .lang-track {
  animation-duration: 84s;
  animation-direction: reverse;
}

.lang-chip {
  display: inline-flex;
  flex: none;
  margin-right: 14px;
  align-items: center;
  gap: 10px;
  padding: 9px 16px 9px 11px;
  border-radius: 999px;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.035));
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 10px 26px -14px rgba(0, 0, 0, 0.9);
}
.lang-chip-name {
  white-space: nowrap;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.9);
}

.lang-note {
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
  font-size: 13px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.42);
}

@keyframes lang-scroll {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-50%, 0, 0);
  }
}
@keyframes lang-cycle {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  2.5%,
  16% {
    opacity: 1;
    transform: none;
  }
  19%,
  100% {
    opacity: 0;
    transform: translateY(-10px);
  }
}
@keyframes lang-blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.35;
  }
}

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .lang-band {
    padding: 64px 0 56px;
  }
  .lang-rails {
    margin: 42px 0 28px;
  }
}
@media (max-width: 620px) {
  .lang-band {
    padding: 52px 0 46px;
  }
  .lang-brief p {
    font-size: 16px;
  }
  .lang-out-item p {
    font-size: 15.5px;
  }
  .lang-demo-title {
    font-size: 12px;
  }
  .flagx {
    height: 20px;
  }
  .flagx--lg {
    height: 28px;
  }
  .lang-chip {
    margin-right: 10px;
    padding: 7px 13px 7px 9px;
    gap: 8px;
  }
  .lang-chip-name {
    font-size: 13.5px;
  }
  .lang-track {
    animation-duration: 46s;
  }
  .lang-rail--rev .lang-track {
    animation-duration: 58s;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lang-track,
  .lang-demo-live::before {
    animation: none !important;
  }
  /* Freeze the cycle on the first translation rather than flashing through. */
  .lang-out-item {
    animation: none !important;
    opacity: 0;
  }
  .lang-out-item[style*="--i:0"] {
    opacity: 1;
  }
}