/* Windfield star garden refinement: remove container seams and make motion legible. */

body[data-page="home"] {
  --garden-flow-cool: rgba(92, 122, 169, 0.31);
  --garden-flow-cool-soft: rgba(72, 103, 150, 0.17);
  --garden-flow-warm: rgba(185, 139, 72, 0.19);
  --garden-trace-cool: rgba(131, 157, 205, 0.33);
  --garden-trace-warm: rgba(206, 165, 101, 0.28);
}

html[data-theme="light"] body[data-page="home"] {
  --garden-flow-cool: rgba(103, 136, 174, 0.24);
  --garden-flow-cool-soft: rgba(124, 153, 185, 0.14);
  --garden-flow-warm: rgba(178, 135, 78, 0.15);
  --garden-trace-cool: rgba(83, 114, 158, 0.25);
  --garden-trace-warm: rgba(151, 112, 63, 0.22);
}

/*
 * The field lives inside a centered 1180px shell. The former wind layer used
 * that shell as its clipping box, producing a visible vertical cut. Center a
 * viewport-wide layer on the same axis instead, so clipping only happens at
 * the real viewport edge.
 */
.wind-streams {
  inset: auto;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 100vw;
  overflow: hidden;
  transform:
    translate3d(
      calc(-50% + var(--garden-shift-x) + var(--garden-shift-x) + var(--garden-shift-x)),
      calc(var(--garden-shift-y) + var(--garden-shift-y) + var(--garden-shift-y)),
      0
    );
  transform-origin: 50% 50%;
  transition: transform 620ms cubic-bezier(.22, 1, .36, 1);
}

.garden-current {
  left: -16%;
  width: 132%;
  min-width: 980px;
  height: clamp(138px, 19vw, 244px);
  opacity: 0.7;
  filter: blur(11px);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 9%, #000 91%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 9%, #000 91%, transparent 100%);
}

/* Two curved strands make the broad atmospheric band read as wind. */
.garden-current::before,
.garden-current::after {
  position: absolute;
  left: 4%;
  right: 4%;
  height: 42%;
  content: "";
  border-top: 1px solid color-mix(in srgb, var(--garden-trace-cool) 88%, transparent);
  border-radius: 50%;
  background: none;
  pointer-events: none;
}

.garden-current::before {
  top: 25%;
  opacity: 0.72;
  filter: drop-shadow(0 0 8px var(--garden-flow-cool));
}

.garden-current::after {
  top: 58%;
  height: 34%;
  border-top-color: color-mix(in srgb, var(--garden-trace-warm) 90%, transparent);
  opacity: 0.88;
  filter: drop-shadow(0 0 9px var(--garden-flow-warm));
  box-shadow: none;
}

.garden-current-a {
  top: 3%;
  animation-duration: 43s;
}

.garden-current-b {
  top: 38%;
  height: clamp(122px, 16vw, 208px);
  opacity: 0.58;
  animation-duration: 49s;
}

.garden-current-c {
  bottom: -1%;
  opacity: 0.64;
  animation-duration: 46s;
}

/* Grow the traces to viewport width too, and lift them one visual level. */
.garden-traces {
  inset: auto;
  left: 50%;
  top: -5%;
  width: 100vw;
  height: 110%;
  transform:
    translate3d(
      calc(-50% + var(--garden-trace-shift-x) + var(--garden-trace-shift-x) + var(--garden-trace-shift-x) + var(--garden-trace-shift-x)),
      calc(var(--garden-trace-shift-y) + var(--garden-trace-shift-y) + var(--garden-trace-shift-y) + var(--garden-trace-shift-y)),
      0
    );
  transition: transform 820ms cubic-bezier(.22, 1, .36, 1);
}

.garden-trace {
  stroke-width: 1.32;
  stroke-dasharray: 11 16 3 21;
  opacity: 0.82;
  filter: drop-shadow(0 0 7px color-mix(in srgb, var(--garden-trace-cool) 58%, transparent));
}

.garden-trace:nth-child(2n) {
  filter: drop-shadow(0 0 7px color-mix(in srgb, var(--garden-trace-warm) 56%, transparent));
}

.garden-trace:nth-child(2) { opacity: 0.7; }
.garden-trace:nth-child(3) { opacity: 0.76; }
.garden-trace:nth-child(4) { opacity: 0.62; }
.garden-trace:nth-child(5) { opacity: 0.68; }
.garden-trace:nth-child(6) { opacity: 0.56; }

/* Keep the age constellation intact: one ambient star for every year. */
.decorative-star:nth-child(n + 14) {
  display: block;
}

/* Every fifth year is a quiet milestone, not an extra particle. */
.decorative-star:nth-child(5n) {
  --star-opacity: 0.86 !important;
  filter: blur(0.08px) drop-shadow(0 0 5px color-mix(in srgb, var(--cosmos-dot) 42%, transparent));
}

/* Increase travel enough to be felt while preserving the slow pace. */
@keyframes garden-current-a {
  0% {
    opacity: 0.58;
    transform: translate3d(-9%, -3%, 0) rotate(var(--current-rotate)) scaleX(0.95);
  }
  48% {
    opacity: 0.82;
    transform: translate3d(4%, 5%, 0) rotate(calc(var(--current-rotate) + 1.6deg)) scaleX(1.05);
  }
  100% {
    opacity: 0.68;
    transform: translate3d(10%, -2%, 0) rotate(calc(var(--current-rotate) - 1.1deg)) scaleX(1.01);
  }
}

@keyframes garden-current-b {
  0% {
    opacity: 0.46;
    transform: translate3d(9%, 4%, 0) rotate(var(--current-rotate)) scaleX(1.04);
  }
  55% {
    opacity: 0.68;
    transform: translate3d(-4%, -5%, 0) rotate(calc(var(--current-rotate) - 1.4deg)) scaleX(0.94);
  }
  100% {
    opacity: 0.54;
    transform: translate3d(-10%, 3%, 0) rotate(calc(var(--current-rotate) + 1deg)) scaleX(1.02);
  }
}

@keyframes garden-current-c {
  0% {
    opacity: 0.5;
    transform: translate3d(-8%, 3%, 0) rotate(var(--current-rotate)) scaleX(0.97);
  }
  50% {
    opacity: 0.76;
    transform: translate3d(5%, -4%, 0) rotate(calc(var(--current-rotate) + 1.4deg)) scaleX(1.06);
  }
  100% {
    opacity: 0.6;
    transform: translate3d(10%, 2%, 0) rotate(calc(var(--current-rotate) - 0.9deg)) scaleX(1.01);
  }
}

@media (max-width: 780px) {
  .garden-current {
    left: -24%;
    width: 148%;
    min-width: 0;
    filter: blur(10px);
  }

  .garden-traces {
    width: 116vw;
  }
}

@media (max-width: 560px) {
  .garden-current {
    left: -30%;
    width: 160%;
    filter: blur(9px);
  }

  .garden-current::before { opacity: 0.62; }
  .garden-current::after { opacity: 0.72; }

  .garden-traces {
    left: 50%;
    top: -3%;
    width: 122vw;
    height: 106%;
  }

  .garden-trace {
    stroke-width: 1.05;
    opacity: 0.62;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wind-streams {
    transform: translate3d(-50%, 0, 0);
  }

  .garden-traces {
    transform: translate3d(-50%, 0, 0);
  }
}