/* css/demo.css — central DEMO toggle + bands + animations */
html[data-demo="0"] .demo-watermark { display: none !important; }
html[data-demo="1"] .demo-watermark { display: block !important; }

:root{
  --demo-y: #ffeb00;      /* base yellow */
  --demo-r: #d40000;      /* base red outline */
  --demo-y-boost: #fff200;/* brighter yellow for blink */
  --demo-r-boost: #ff1a1a;/* brighter red for blink */
}

.demo-watermark{
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  pointer-events: none;
}

.demo-band{
  position: absolute;
  left: -25vw;
  width: 150vw;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: rotate(-28deg);
  opacity: .30;
}
.demo-band:nth-child(1){ top: 22%; }
.demo-band:nth-child(2){ top: 50%; }
.demo-band:nth-child(3){ top: 78%; }

.demo-band span{
  font-family: Poppins, Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: clamp(28px, 8vw, 84px);
  line-height: 1;
  color: var(--demo-y);                  /* yellow */
  -webkit-text-stroke: 4px var(--demo-r); /* red outline */
  text-shadow:
    1px 1px 0 var(--demo-r),
    -1px -1px 0 var(--demo-r),
    -1px 1px 0 var(--demo-r),
    1px -1px 0 var(--demo-r),
    0 0 22px rgba(0,0,0,.28);
  white-space: nowrap;
  mix-blend-mode: normal;
  display:inline-block;
  will-change: transform, color, text-shadow, opacity, filter;
  animation-timing-function: linear, ease-in-out;
  animation-iteration-count: infinite, infinite;
  animation-fill-mode: forwards, forwards;
  animation-name: band-move-left, band-pulse;
  animation-duration: 60s, 10s;
}

/* Plan/specifika hastigheter/riktning */
.demo-band:nth-child(1) span{ animation-name: band-move-left, band-pulse;  animation-duration: 60s, 10s; }
.demo-band:nth-child(2) span{ animation-name: band-move-right, band-pulse; animation-duration: 65s, 10s; }
.demo-band:nth-child(3) span{ animation-name: band-move-left, band-pulse;  animation-duration: 45s, 10s; }

@keyframes band-move-left{ 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
@keyframes band-move-right{ 0%{transform:translateX(0)} 100%{transform:translateX(50%)} }

/* Blink varje 10s (starkare färger i början av cykeln) */
@keyframes band-pulse{
  0%, 5% {
    color: var(--demo-y-boost);
    -webkit-text-stroke-color: var(--demo-r-boost);
    text-shadow:
      1px 1px 0 var(--demo-r-boost),
      -1px -1px 0 var(--demo-r-boost),
      -1px 1px 0 var(--demo-r-boost),
      1px -1px 0 var(--demo-r-boost),
      0 0 28px rgba(0,0,0,.35);
    opacity: .38;
    filter: saturate(1.15) brightness(1.05);
  }
  6%, 100% {
    color: var(--demo-y);
    -webkit-text-stroke-color: var(--demo-r);
    text-shadow:
      1px 1px 0 var(--demo-r),
      -1px -1px 0 var(--demo-r),
      -1px 1px 0 var(--demo-r),
      1px -1px 0 var(--demo-r),
      0 0 22px rgba(0,0,0,.28);
    opacity: .30;
    filter: none;
  }
}