/* endlessly — interactive artwork and decorative particles */

.paint-experience {
  position: absolute;
  inset: 0 0 0 auto;
  z-index: 2;
  width: min(63vw, 820px);
  height: 100%;
  overflow: hidden;
  background: var(--paper);
  touch-action: none;
  pointer-events: auto;
  user-select: none;
  -webkit-user-select: none;
}

.paint-experience::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background:
    linear-gradient(
      90deg,
      rgba(247, 242, 234, 1) 0%,
      rgba(247, 242, 234, .96) 7%,
      rgba(247, 242, 234, .72) 16%,
      rgba(247, 242, 234, .3) 27%,
      rgba(247, 242, 234, 0) 40%
    );
}

.paint-experience__base,
.paint-experience__canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.paint-experience__base {
  z-index: 0;
  pointer-events: none;
}

.paint-experience__canvas {
  z-index: 4;
  cursor: default;
  pointer-events: auto;
  touch-action: none;
  -webkit-touch-callout: none;
}

.paint-experience__dust {
  position: absolute;
  inset: 0;
  z-index: 6;
  overflow: hidden;
  pointer-events: none;
}

.paint-experience__dust span {
  position: absolute;
  width: .32rem;
  height: .32rem;
  border-radius: 50%;
  background: rgba(255, 248, 216, .86);
  box-shadow: 0 0 .9rem rgba(255, 246, 199, .72);
  opacity: 0;
  animation: dust-float 6.8s ease-in-out infinite;
}

.paint-experience__dust span:nth-child(1) {
  top: 76%;
  left: 72%;
}

.paint-experience__dust span:nth-child(2) {
  top: 62%;
  left: 83%;
  animation-delay: 1.1s;
}

.paint-experience__dust span:nth-child(3) {
  top: 48%;
  left: 66%;
  animation-delay: 2.2s;
}

.paint-experience__dust span:nth-child(4) {
  top: 35%;
  left: 78%;
  animation-delay: 3.1s;
}

.paint-experience__dust span:nth-child(5) {
  top: 25%;
  left: 58%;
  animation-delay: 4s;
}

.paint-experience__dust span:nth-child(6) {
  top: 56%;
  left: 54%;
  animation-delay: 4.8s;
}

.paint-experience__dust span:nth-child(7) {
  top: 18%;
  left: 88%;
  animation-delay: 5.5s;
}

@keyframes dust-float {
  0%,
  30%,
  100% {
    opacity: 0;
    transform: translateY(.5rem) scale(.65);
  }

  48% {
    opacity: .9;
  }

  72% {
    opacity: .12;
    transform: translateY(-.75rem) scale(1.12);
  }
}

@media (max-width: 900px) {
  .paint-experience {
    inset: 0;
    width: 100%;
    height: 100svh;
  }

  .paint-experience::before {
    background:
      linear-gradient(
        180deg,
        rgba(247, 242, 234, 1) 0%,
        rgba(247, 242, 234, .98) 18%,
        rgba(247, 242, 234, .82) 31%,
        rgba(247, 242, 234, .4) 44%,
        rgba(247, 242, 234, .06) 57%,
        rgba(247, 242, 234, 0) 68%
      );
  }

  .paint-experience__base,
  .paint-experience__canvas {
    object-position: 58% 56%;
  }

  .paint-experience__dust span:nth-child(n + 6) {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .paint-experience__dust span {
    animation: none;
    opacity: .2;
  }
}


/* Stronger responsive artwork fade and smoother visual blending */

@media (max-width: 900px) {
  .paint-experience::before {
    background:
      linear-gradient(
        180deg,
        rgba(247, 242, 234, 1) 0%,
        rgba(247, 242, 234, 1) 21%,
        rgba(247, 242, 234, .96) 33%,
        rgba(247, 242, 234, .78) 43%,
        rgba(247, 242, 234, .38) 53%,
        rgba(247, 242, 234, .07) 64%,
        rgba(247, 242, 234, 0) 74%
      );
  }

  .paint-experience__base,
  .paint-experience__canvas {
    object-position: 57% 61%;
  }
}
\n\n/* Exact layer alignment and stronger mobile fade */\n.paint-experience__base,.paint-experience__canvas{position:absolute;inset:0;width:100%;height:100%;display:block;}\n.paint-experience__base{object-fit:cover;object-position:50% 50%;}\n@media(max-width:900px){\n  .paint-experience::before{\n    background:linear-gradient(180deg,rgba(247,242,234,1) 0%,rgba(247,242,234,1) 25%,rgba(247,242,234,.99) 37%,rgba(247,242,234,.9) 47%,rgba(247,242,234,.56) 57%,rgba(247,242,234,.16) 68%,rgba(247,242,234,0) 78%);\n  }\n  .paint-experience__base,.paint-experience__canvas{object-position:50% 50%;}\n}\n