/* Web Summit 2026 band (temporary, until 12 November 2026).
   The band sits between the site header and <main> on index.html only. It is
   always a dark surface, so it re-declares the dark palette locally and stays
   readable when the visitor picks the light theme. Its only motion is the
   wordmark's (the per-letter glow, one letter per beat, or in the moon variant
   a slow light bar once per musical bar) and the calm language rotation under
   the title; web-summit-band.js drives them, and the pause control and
   prefers-reduced-motion stop them. */

.ws-band {
  --text: #f3f5fb;
  --text-soft: #d8ddec;
  --muted: #9da6c0;
  --muted-strong: #b8c0d5;
  --line: rgba(171, 184, 219, 0.16);
  --line-strong: rgba(171, 184, 219, 0.28);
  --violet-light: #c2c9ff;
  --teal: #7fe0cb;
  --teal-light: #b9f4e7;
  --lime: #d8f795;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: calc(5rem + clamp(1.1rem, 2.4vw, 2rem)) 0 clamp(1.4rem, 2.6vw, 2.2rem);
  background:
    radial-gradient(55% 140% at 6% 118%, rgba(127, 224, 203, 0.13), transparent 62%),
    radial-gradient(48% 140% at 98% -30%, rgba(147, 161, 255, 0.18), transparent 60%),
    #05070e;
  color: var(--text);
  color-scheme: dark;
}

.ws-band[hidden] {
  display: none !important;
}

/* Ruled lines behind the copy: the band reads as a page of a lesson. */
.ws-band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: repeating-linear-gradient(180deg, rgba(194, 201, 255, 0.045) 0 1px, transparent 1px 30px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent);
}

.ws-band::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, #c2c9ff 18%, #b9f4e7 42%, #d8f795 62%, #c2c9ff 82%, transparent);
  opacity: 0.6;
}

/* The band takes over the clearance under the fixed header, so the hero
   below it no longer needs its own and keeps the hero badges in view. */
.ws-band:not([hidden]) + main > .hero:first-child {
  min-height: auto;
  padding-top: clamp(1.6rem, 3vw, 2.4rem);
}

.ws-shell {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(20rem, 1fr);
  align-items: center;
  gap: clamp(1.25rem, 3.4vw, 3.5rem);
}

.ws-kicker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.2rem 0.6rem;
  margin: 0;
  color: var(--muted-strong);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.ws-kicker-mark {
  width: 0.5rem;
  height: 0.5rem;
  background: var(--teal);
  box-shadow: 0 0 10px rgba(127, 224, 203, 0.8);
  transform: rotate(45deg);
}

.ws-sep {
  color: rgba(184, 192, 213, 0.45);
}

.ws-title {
  max-width: 19ch;
  margin: 0.7rem 0 0;
  color: #ffffff;
  font-size: clamp(1.7rem, 3.7vw, 3.15rem);
  font-weight: 800;
  line-height: 1.03;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  text-wrap: balance;
}

/* The title again, in one other site language at a time (decorative). */
.ws-layer {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  margin: 0.75rem 0 0;
  transition: opacity 220ms ease;
}

.ws-layer.is-swapping {
  opacity: 0;
}

.ws-layer-code {
  flex: 0 0 auto;
  min-width: 2.1rem;
  margin-top: 0.12em;
  padding: 0.24rem 0.42rem;
  border-radius: 0.4rem;
  background: rgba(127, 224, 203, 0.14);
  color: var(--teal);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-align: center;
}

.ws-layer-line {
  color: var(--teal);
  font-size: clamp(0.95rem, 1.45vw, 1.2rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.ws-tagline {
  max-width: 46ch;
  margin: 1rem 0 0;
  color: var(--text-soft);
  font-size: clamp(0.98rem, 1.3vw, 1.14rem);
  line-height: 1.45;
}

.ws-tagline em {
  color: var(--teal);
  font-style: normal;
  font-weight: 700;
}

.ws-tagline strong {
  color: #ffffff;
  font-weight: 700;
}

.ws-spoiler {
  max-width: 52ch;
  margin: 0.55rem 0 0;
  color: var(--muted-strong);
  font-size: clamp(0.92rem, 1.15vw, 1.04rem);
  line-height: 1.45;
}

.ws-spoiler strong {
  color: var(--lime);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* A plain link to the announcement post; it never embeds the post. */
.ws-announcement {
  color: var(--teal);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  white-space: nowrap;
}

.ws-announcement:hover {
  color: var(--teal-light);
}

.ws-announcement:focus-visible {
  border-radius: 4px;
  outline: 2px solid var(--teal);
  outline-offset: 3px;
}

.ws-side {
  display: grid;
  justify-items: stretch;
  gap: 0.95rem;
}

/* The wordmark is the site's own .brand-name scaled as a whole (Inter 800,
   -0.03em, the header gradient and its two-layer halo, here in em so the halo
   scales with the mark). The glow layer above it lights one letter per beat,
   as in the owner's party reel: the lit letter brightens towards white and
   blooms in its own gradient colour (--c), then decays until the next beat
   hands the light to the next letter. */
.ws-mark {
  position: relative;
  justify-self: center;
  font-size: clamp(3.1rem, 6.1vw, 5.4rem);
  line-height: 1.1;
  white-space: nowrap;
}

@supports (background-clip: text) or (-webkit-background-clip: text) {
  .ws-band .ws-mark .brand-name {
    background: linear-gradient(100deg, #c2c9ff, #b9f4e7 38%, #d8f795 62%, #c2c9ff 100%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    filter:
      drop-shadow(0 0 0.353em rgba(185, 244, 231, 0.45))
      drop-shadow(0 0 0.907em rgba(194, 201, 255, 0.35));
  }
}

.ws-band .ws-mark .brand-name {
  display: block;
  font-size: 1em;
}

[data-inline-wordmark] .brand-name {
  position: relative;
  display: inline-block;
}

.ws-mark-glow {
  position: absolute;
  inset: 0;
  color: transparent;
  font-weight: 800;
  letter-spacing: -0.03em;
  pointer-events: none;
  mix-blend-mode: screen;
}

.ws-mark-glow > span {
  opacity: 0;
  color: rgba(255, 255, 255, 0.62);
  text-shadow: 0 0 0.12em var(--c), 0 0 0.42em var(--c), 0 0 0.9em var(--c);
}

.ws-mark-glow > span.is-lit {
  animation: ws-flare 500ms cubic-bezier(0.12, 0.7, 0.2, 1) forwards;
}

@keyframes ws-flare {
  from { opacity: 1; }
  to { opacity: 0.17; }
}

/* The moon wordmark (owner decision, 2026-10-18), chosen by web-summit-band.js
   for about half of the page loads: the same .brand-name with the moon of the
   "Księżycowa prośba" campaign laid over its hidden "o". Its only motion is one
   slow light bar across the word per musical bar (4 beats at 92 BPM, 2.6 s),
   drawn in the glow layer's own letters, and the moon brightening a little as
   the bar passes; it stops with the beat clock (data-ws-still), under reduced
   motion and in forced colours. */
.ws-mark[data-ws-variant="moon"] .brand-name > span:nth-child(5),
.ws-mark[data-ws-variant="moon"] .ws-mark-glow > span:nth-child(5) {
  visibility: hidden;
}

.ws-moon {
  position: absolute;
  left: var(--ws-moon-x, 50%);
  top: var(--ws-moon-y, 55%);
  width: var(--ws-moon-d, 0.6em);
  height: var(--ws-moon-d, 0.6em);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: center / cover no-repeat;
  box-shadow:
    0 0 0.16em 0.04em rgba(84, 96, 220, 0.38),
    0 0 0.55em 0.1em rgba(84, 96, 220, 0.16);
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.8s ease;
}

.ws-moon.is-in {
  opacity: 1;
  animation: ws-moon-lit 2609ms linear infinite;
}

.ws-mark[data-ws-variant="moon"] .ws-mark-glow {
  background: linear-gradient(100deg, transparent 42%, rgba(255, 255, 255, 0.85) 50%, transparent 58%) no-repeat;
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 0 0.12em rgba(255, 255, 255, 0.45));
  animation: ws-sweep 2609ms linear infinite;
}

.ws-mark[data-ws-variant="moon"] .ws-mark-glow > span {
  opacity: 1;
  color: transparent;
  text-shadow: none;
  animation: none;
}

.ws-band[data-ws-still] .ws-mark[data-ws-variant="moon"] .ws-mark-glow {
  animation: none;
  background: none;
  filter: none;
}

.ws-band[data-ws-still] .ws-moon {
  animation: none;
}

/* background-size 300%: at 100% the bar sits left of the word, at 0% right of
   it; the last tenth of each bar is dark, so every sweep starts afresh. */
@keyframes ws-sweep {
  from { background-position: 100% 0; }
  90%, to { background-position: 0% 0; }
}

@keyframes ws-moon-lit {
  from, 30% { filter: brightness(1); }
  43% { filter: brightness(1.6); }
  56%, to { filter: brightness(1); }
}

.ws-live {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  margin: 0;
  padding: 0.85rem 1rem;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: rgba(17, 23, 38, 0.85);
  color: #ffffff;
  font-size: 0.86rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.ws-live::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  background: var(--teal);
  box-shadow: 0 0 10px rgba(127, 224, 203, 0.8);
  transform: rotate(45deg);
}

.ws-live[hidden] {
  display: none;
}

.ws-countdown {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem;
}

.ws-countdown[hidden] {
  display: none;
}

/* With scripts on, keep the countdown's and the pause button's space from the
   first paint, so revealing them after init shifts nothing. */
.js .ws-band:not([data-ws-ready]) .ws-countdown[hidden] {
  display: grid;
  visibility: hidden;
}

.js .ws-band:not([data-ws-ready]) .ws-pause[hidden] {
  display: grid;
  visibility: hidden;
}

.ws-tile {
  display: grid;
  justify-items: center;
  gap: 0.2rem;
  padding: 0.6rem 0.3rem 0.5rem;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(26, 34, 53, 0.92), rgba(13, 18, 32, 0.92));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.ws-num {
  color: #ffffff;
  font-size: clamp(1.35rem, 2.2vw, 1.9rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.ws-unit {
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.ws-actions {
  display: flex;
  gap: 0.6rem;
  align-items: stretch;
}

.ws-band .ws-cta,
.ws-band .ws-cta:hover {
  flex: 1 1 auto;
  background: #7fe0cb;
  color: #071511;
}

.ws-band .ws-cta:hover {
  background: #96ead8;
}

.ws-pause {
  display: grid;
  flex: 0 0 3.25rem;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: rgba(17, 23, 38, 0.8);
  color: var(--muted-strong);
  cursor: pointer;
}

.ws-pause[hidden] {
  display: none;
}

.ws-pause svg {
  width: 0.9rem;
  height: 0.9rem;
  fill: currentColor;
}

.ws-pause .ws-icon-play,
.ws-pause[aria-pressed="true"] .ws-icon-pause {
  display: none;
}

.ws-pause[aria-pressed="true"] .ws-icon-play {
  display: block;
}

.ws-pause:hover {
  border-color: var(--teal);
  color: var(--text);
}

.ws-pause:focus-visible,
.ws-band .ws-cta:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
}

@media (max-width: 900px) {
  .ws-shell {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .ws-band {
    padding-top: calc(4.5rem + 0.9rem);
    padding-bottom: 1.1rem;
  }

  .ws-mark {
    justify-self: start;
  }
}

/* Phones: the band must leave the hero's badges inside the first
   viewport (CONTENT_CONTRACT.md, "Web Summit 2026 band"), so it drops the
   decorative language line, tightens the type and floats the pause button. */
@media (max-width: 560px) {
  .ws-band {
    padding-top: calc(4.5rem + 0.5rem);
    padding-bottom: 0.85rem;
  }

  .ws-shell {
    gap: 0.45rem;
  }

  .ws-kicker {
    gap: 0.1rem 0.4rem;
    padding-right: 2.6rem;
    font-size: 0.6rem;
    letter-spacing: 0.12em;
  }

  .ws-title {
    margin-top: 0.3rem;
    font-size: 1.32rem;
  }

  .ws-layer {
    display: none;
  }

  .ws-tagline {
    margin-top: 0.35rem;
    font-size: 0.84rem;
    line-height: 1.34;
  }

  .ws-spoiler {
    margin-top: 0.3rem;
    font-size: 0.8rem;
    line-height: 1.34;
  }

  .ws-side {
    gap: 0.4rem;
  }

  .ws-mark {
    margin-top: 0.1rem;
    font-size: 2.35rem;
  }

  .ws-countdown {
    gap: 0.3rem;
  }

  .ws-tile {
    grid-auto-flow: column;
    align-items: baseline;
    justify-content: center;
    gap: 0.25rem;
    padding: 0.28rem 0.2rem;
    border-radius: 9px;
  }

  .ws-num {
    font-size: 0.98rem;
  }

  .ws-unit {
    font-size: 0.5rem;
    letter-spacing: 0.1em;
  }

  .ws-live {
    padding: 0.45rem 0.8rem;
    font-size: 0.72rem;
  }

  .ws-band .ws-cta {
    min-height: 2.5rem;
    padding: 0.4rem 0.9rem;
    font-size: 0.84rem;
  }

  .ws-pause {
    position: absolute;
    top: -0.3rem;
    right: var(--page-pad);
    width: 2.1rem;
    height: 2.1rem;
  }
}

/* Short phone screens: the longest translations (RU, UK, PL) still have to
   leave the hero badges in view at 360x640, so the countdown gives up its
   row, the type tightens and the wordmark shares one row with the CTA. */
@media (max-width: 560px) and (max-height: 760px) {
  .ws-band {
    padding-top: calc(4.5rem + 0.35rem);
    padding-bottom: 0.55rem;
  }

  .ws-shell {
    gap: 0.4rem;
  }

  .ws-kicker {
    gap: 0.1rem 0.25rem;
    padding-right: 2.3rem;
    font-size: 0.58rem;
    letter-spacing: 0.06em;
  }

  .ws-kicker-mark {
    display: none;
  }

  .ws-pause {
    width: 2rem;
    height: 2rem;
  }

  .ws-title {
    font-size: 1.12rem;
  }

  .ws-tagline,
  .ws-spoiler {
    margin-top: 0.22rem;
    font-size: 0.76rem;
    line-height: 1.27;
  }

  .ws-side {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem 0.75rem;
  }

  .ws-mark {
    margin: 0;
    font-size: 1.85rem;
  }

  .ws-live {
    flex: 1 1 100%;
  }

  .ws-actions {
    flex: 1 1 9rem;
  }

  .ws-band .ws-cta {
    min-height: 2.4rem;
    padding: 0.35rem 0.75rem;
    font-size: 0.78rem;
    line-height: 1.15;
    text-align: center;
    white-space: normal;
  }

  .ws-band .ws-countdown,
  .js .ws-band:not([data-ws-ready]) .ws-countdown[hidden] {
    display: none;
  }

  .ws-band:not([hidden]) + main > .hero:first-child {
    padding-top: 0.5rem;
  }
}

/* The shortest phones (360x640, 375x667) with the longest translations
   (RU, UK, PL) need a little more room above the hero badges. */
@media (max-width: 560px) and (max-height: 680px) {
  .ws-band {
    padding-top: calc(4.5rem + 0.15rem);
  }

  .ws-shell {
    gap: 0.3rem;
  }

  .ws-title {
    font-size: 1.06rem;
  }

  .ws-tagline,
  .ws-spoiler {
    font-size: 0.73rem;
    line-height: 1.24;
  }

  .ws-band:not([hidden]) + main > .hero:first-child {
    padding-top: 0.25rem;
  }
}

/* Landscape phones (about 390 px tall): only the kicker, the headline, the
   wordmark and the call to action fit above the hero badges, so the band
   becomes one row and its secondary lines step aside. */
@media (min-width: 561px) and (max-height: 560px) {
  .ws-band {
    padding-top: calc(4.5rem + 0.4rem);
    padding-bottom: 0.6rem;
  }

  .ws-shell {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.4rem 1.25rem;
  }

  .ws-kicker {
    font-size: 0.6rem;
    letter-spacing: 0.1em;
  }

  .ws-title {
    max-width: none;
    margin-top: 0.25rem;
    font-size: 1.15rem;
  }

  .ws-layer,
  .ws-tagline,
  .ws-spoiler,
  .ws-band .ws-countdown,
  .js .ws-band:not([data-ws-ready]) .ws-countdown[hidden] {
    display: none;
  }

  .ws-side {
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }

  .ws-mark {
    font-size: 1.9rem;
  }

  .ws-band .ws-cta {
    min-height: 2.4rem;
    padding: 0.35rem 0.9rem;
    font-size: 0.8rem;
  }

  .ws-pause {
    flex-basis: 2.4rem;
  }

  .ws-band:not([hidden]) + main > .hero:first-child {
    padding-top: 0.75rem;
  }
}

/* Narrow landscape (small phones turned sideways): the headline gets the full
   width and the wordmark row moves under it. */
@media (min-width: 561px) and (max-width: 760px) and (max-height: 560px) {
  .ws-shell {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ws-mark-glow {
    display: none;
  }

  .ws-moon,
  .ws-moon.is-in {
    animation: none;
    transition: none;
  }

  .ws-layer {
    transition: none;
  }
}

@media (forced-colors: active) {
  .ws-mark-glow,
  .ws-moon {
    display: none;
  }

  .ws-mark[data-ws-variant="moon"] .brand-name > span:nth-child(5) {
    visibility: visible;
  }
}

@media print {
  .ws-band {
    display: none !important;
  }
}

/* Keep the two invitation links aligned with the paragraph at every width. */
.ws-spoiler .ws-announcement { display: block; width: fit-content; margin: .15em 0 0; }