/* Light follows the transparent chrome wordmark, not the black hero canvas. */
.landing-page .chrome-logo-fx {
  position: absolute;
  z-index: 2;
  top: 35%;
  left: 50%;
  width: min(92vw, 1500px);
  aspect-ratio: 3 / 1;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.landing-page .chrome-logo-sheen {
  display: none;
  position: absolute;
  inset: 0;
  background: linear-gradient(106deg,
    transparent 42%,
    rgba(214, 232, 246, .08) 46%,
    rgba(255, 255, 255, 1) 49%,
    rgba(181, 217, 244, .92) 50.5%,
    rgba(255, 255, 255, .15) 53%,
    transparent 58%);
  background-size: 300% 100%;
  background-position: 100% 0;
  mix-blend-mode: screen;
  filter: drop-shadow(0 0 10px rgba(220, 242, 255, .72));
  animation: chromeLogoSweep 7.2s ease-in-out infinite;
}

@supports ((mask-image: url('/assets/dripply-wordmark-2026.png')) or (-webkit-mask-image: url('/assets/dripply-wordmark-2026.png'))) {
  .landing-page .chrome-logo-sheen {
    display: block;
    -webkit-mask-image: url('/assets/dripply-wordmark-2026.png');
    mask-image: url('/assets/dripply-wordmark-2026.png');
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
  }
}

.landing-page .chrome-spark {
  position: absolute;
  z-index: 3;
  top: var(--y);
  left: var(--x);
  width: var(--size, 3px);
  height: var(--size, 3px);
  border-radius: 50%;
  background: #f9fdff;
  box-shadow: 0 0 6px 2px rgba(255, 255, 255, .84),
    0 0 18px 5px rgba(160, 213, 248, .38);
  opacity: 0;
  animation: chromeSpark 5.8s ease-in-out var(--delay) infinite;
}

.landing-page .chrome-spark--flare::before,
.landing-page .chrome-spark--flare::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #f8fdff, transparent);
  transform: translate(-50%, -50%);
}

.landing-page .chrome-spark--flare::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.landing-page .chrome-spark:nth-of-type(1) { --x: 11%; --y: 27%; --delay: -.4s; --size: 3px; }
.landing-page .chrome-spark:nth-of-type(2) { --x: 24%; --y: 83%; --delay: -2.1s; --size: 2px; }
.landing-page .chrome-spark:nth-of-type(3) { --x: 43%; --y: 9%; --delay: -4s; --size: 2px; }
.landing-page .chrome-spark:nth-of-type(4) { --x: 67%; --y: 76%; --delay: -1.35s; --size: 3px; }
.landing-page .chrome-spark:nth-of-type(5) { --x: 82%; --y: 19%; --delay: -3.15s; --size: 2px; }
.landing-page .chrome-spark:nth-of-type(6) { --x: 95%; --y: 59%; --delay: -4.9s; --size: 2px; }

@keyframes chromeLogoSweep {
  0%, 11% { background-position: 100% 0; opacity: 0; }
  20% { opacity: .78; }
  39% { background-position: 0 0; opacity: .98; }
  48%, 100% { background-position: 0 0; opacity: 0; }
}

@keyframes chromeSpark {
  0%, 36%, 72%, 100% { opacity: 0; transform: translate3d(0, 5px, 0) scale(.5); }
  49% { opacity: .9; transform: translate3d(0, 0, 0) scale(1); }
  59% { opacity: .28; transform: translate3d(0, -4px, 0) scale(.8); }
}

/* A transparent chrome light field follows the entire landing while scrolling. */
.landing-page .landing-chrome-field {
  position: fixed;
  inset: 0;
  z-index: 3;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  contain: strict;
}

.landing-page .hero-statement,
.landing-page .enter-archive {
  z-index: 4;
}

.landing-chrome-particle {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background: linear-gradient(135deg, #fff, #aec4d4 48%, #f9fdff 65%, #8999a8);
  box-shadow: 0 0 5px 1px rgba(240, 248, 255, .65),
    0 0 14px 3px rgba(175, 211, 236, .2);
  opacity: 0;
  animation: landingChromeFloat var(--duration) ease-in-out var(--delay) infinite;
}

.landing-chrome-particle--flare::before,
.landing-chrome-particle--flare::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #f8fdff, transparent);
  transform: translate(-50%, -50%);
}

.landing-chrome-particle--flare::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.landing-chrome-field.is-paused .landing-chrome-particle {
  animation-play-state: paused;
}

@keyframes landingChromeFloat {
  0%, 100% { opacity: 0; transform: translate3d(0, 20px, 0) scale(.5); }
  25% { opacity: .15; }
  43% { opacity: .72; transform: translate3d(calc(var(--drift) * .5), 0, 0) scale(1); }
  57% { opacity: .28; }
  78% { opacity: 0; transform: translate3d(var(--drift), -28px, 0) scale(.65); }
}

@media (max-width: 700px) {
  .landing-chrome-particle:nth-child(n + 19) { display: none; }
  .landing-chrome-particle--flare::before,
  .landing-chrome-particle--flare::after { width: 12px; }
}

@media (min-width: 701px) {
  .landing-page .chrome-logo-fx {
    top: 27%;
    width: min(76vw, 1120px);
  }
}

@media (max-width: 600px) {
  .landing-page .chrome-logo-fx {
    top: 31%;
    width: 104vw;
  }

  .landing-page .chrome-spark--flare::before,
  .landing-page .chrome-spark--flare::after {
    width: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .landing-page .landing-chrome-field { display: none; }
  .landing-page .chrome-logo-sheen,
  .landing-page .chrome-spark {
    animation: none;
    opacity: 0;
  }
}