/* Core layout */
.container{
  width:min(var(--max), calc(100% - (var(--pad) * 2)));
  margin:0 auto;
}

.body{
  position:relative;
  z-index:1;
  padding:64px var(--pad) 84px;
  content-visibility:auto;
  contain-intrinsic-size: 900px;
  contain: layout style;
}

.kicker{
  font-size:12px;
  letter-spacing:.9px;
  text-transform:uppercase;
  color:rgba(245,245,247,.54);
  margin:0 0 14px 0;
}

.statement{
  margin:0 0 22px 0;
  font-size:clamp(22px,3.2vw,42px);
  letter-spacing:-0.4px;
  line-height:1.06;
  font-weight:860;
  max-width:40ch;
  text-wrap:balance;
}

.grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:14px;
  margin-top:18px;
}

.card{
  border-radius: calc(var(--radius) + 10px);
  border:1px solid rgba(245,245,247,.10);
  background: rgba(0,0,0,.34);
  padding:18px;
}

@supports (backdrop-filter: blur(1px)){
  @media (min-width: 860px){
    .card{
      background: rgba(0,0,0,.22);
      backdrop-filter: blur(10px);
    }
  }
}

.card h2{
  margin:0 0 8px 0;
  font-size:16px;
  font-weight:820;
  letter-spacing:.1px;
}

.card p{
  margin:0;
  color:rgba(245,245,247,.78);
  line-height:1.55;
  font-size:14px;
  max-width:70ch;
}

footer{
  margin-top:26px;
  color:rgba(245,245,247,.46);
  font-size:12px;
  display:flex;
  flex-wrap:wrap;
  gap:10px 16px;
  align-items:center;
  justify-content:space-between;
  border-top:1px solid rgba(245,245,247,.08);
  padding-top:18px;
}

/* Background layers */
.wash{
  position:absolute;
  inset:-15%;
  opacity:.98;
  filter:saturate(1.85) contrast(1.08) brightness(1.08);
}

.bokeh, .bokeh-distant{
  position:absolute;
  inset:-10%;
  opacity:1;
}

.wash .blob, .bokeh .blob, .bokeh-distant .blob{
  position:absolute;
  left: var(--x, 50vw);
  top: var(--y, 35vh);
  border-radius:999px;
  transform: translate3d(-50%, -50%, 0) scale(var(--kScale, 1));
  opacity: var(--o, 0);
  will-change: transform, opacity, filter;
  transition:
    left var(--t, 30s) cubic-bezier(.2,.8,.2,1),
    top var(--t, 30s) cubic-bezier(.2,.8,.2,1),
    transform var(--t, 30s) cubic-bezier(.2,.8,.2,1),
    opacity var(--fade, 6s) ease,
    filter 4s ease;
}

/* Wash blobs */
.wash .blob{
  width: var(--s, 1100px);
  height: var(--s, 1100px);
  filter: blur(var(--b, 80px)) saturate(2.00);
  mix-blend-mode: normal;
}

.wash .blob::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:999px;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.10), rgba(255,255,255,0) 58%),
    radial-gradient(circle at 56% 56%, var(--col, rgba(255,42,161,.70)), rgba(0,0,0,0) 72%);
}

/* Bokeh blobs */
.bokeh .blob{
  width: var(--s, 260px);
  height: var(--s, 260px);
  filter: blur(var(--b, 26px)) saturate(2.20);
  mix-blend-mode: screen;
}

.bokeh .blob::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:999px;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.24), rgba(255,255,255,0) 52%),
    radial-gradient(circle at 56% 56%, var(--col, rgba(255,42,161,.86)), rgba(0,0,0,0) 72%);
}

/* Distant dots */
.bokeh-distant .blob{
  width: var(--s, 62px);
  height: var(--s, 62px);
  filter: blur(var(--b, 12px)) saturate(1.95);
  mix-blend-mode: screen;
}

.bokeh-distant .blob::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:999px;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.16), rgba(255,255,255,0) 60%),
    radial-gradient(circle at 56% 56%, var(--col, rgba(255,255,255,.22)), rgba(0,0,0,0) 78%);
}

/* Fade into black */
.fade{
  position:absolute;
  inset:0;
  background:
    radial-gradient(1200px 760px at 50% 14%, rgba(255,255,255,.10), rgba(255,255,255,0) 64%),
    linear-gradient(180deg,
      rgba(0,0,0,.02) 0%,
      rgba(0,0,0,.16) 30%,
      rgba(0,0,0,.46) 56%,
      rgba(0,0,0,.88) 100%);
  opacity:.96;
}

/* Real noise ... avoids moiré lines */
.noise{
  position:absolute;
  inset:0;
  opacity:.10;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  background-size:220px 220px;
}

@media (prefers-reduced-motion: reduce){
  .wash .blob, .bokeh .blob, .bokeh-distant .blob{
    transition:none;
  }
}

@media (max-width: 860px){
  .grid{ grid-template-columns: 1fr; }
}

@media (max-width: 600px){
  .wash{
    filter: saturate(1.65) contrast(1.04) brightness(.92);
    opacity:.92;
  }
}