/* Watercolor accents for the shared entrance gate. */

body.entry-watercolor-gate .entry-screen::after {
  background-image:
    url('/graphics/watercolor-grain.svg'),
    radial-gradient(circle, #fff 1px, transparent 1.5px),
    radial-gradient(circle, #cddcff .7px, transparent 1px);
  background-position: center, 15% 20%, 82% 32%;
  background-size: 340px 340px, 230px 190px, 310px 270px;
  opacity: .48;
}

body.entry-watercolor-gate .entry-door-landscape {
  opacity: .56;
}

html.entry-playing body.entry-watercolor-gate .entry-door-landscape {
  animation: hybrid-landscape-soak 1.28s .08s ease-out both;
}

body.entry-watercolor-gate .entry-door-wash {
  position: absolute;
  z-index: 0;
  inset: 0;
  background:
    url('/graphics/entry-pigment-wash.svg') center / cover no-repeat,
    radial-gradient(ellipse 38% 28% at 31% 25%, rgba(152, 193, 218, .3), transparent 83%),
    radial-gradient(ellipse 33% 23% at 76% 42%, rgba(83, 143, 192, .25), transparent 87%),
    radial-gradient(ellipse 43% 26% at 24% 77%, rgba(171, 202, 223, .2), transparent 85%);
  mix-blend-mode: screen;
  filter: blur(3px);
  opacity: .66;
  pointer-events: none;
}

body.entry-watercolor-gate .entry-door-right .entry-door-wash {
  background:
    url('/graphics/entry-pigment-wash.svg') center / cover no-repeat,
    radial-gradient(ellipse 41% 31% at 68% 19%, rgba(139, 186, 216, .27), transparent 84%),
    radial-gradient(ellipse 34% 23% at 28% 53%, rgba(92, 148, 194, .23), transparent 86%),
    radial-gradient(ellipse 43% 27% at 79% 78%, rgba(174, 204, 223, .22), transparent 86%);
}

html.entry-playing body.entry-watercolor-gate .entry-door-wash {
  animation: hybrid-door-wash 1.14s .12s ease-out both;
}

body.entry-watercolor-gate .entry-center::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: 9%;
  left: 50%;
  width: min(65vw, 590px);
  height: clamp(180px, 29vw, 300px);
  border-radius: 43% 57% 53% 47% / 49% 43% 57% 51%;
  background:
    radial-gradient(ellipse 46% 61% at 22% 52%, rgba(92, 151, 202, .34), transparent 75%),
    radial-gradient(ellipse 44% 64% at 77% 49%, rgba(103, 163, 209, .3), transparent 72%),
    radial-gradient(ellipse 31% 47% at 53% 75%, rgba(156, 193, 218, .22), transparent 75%);
  filter: blur(24px);
  opacity: 0;
  transform: translateX(-50%) scale(.72);
  pointer-events: none;
}

html.entry-playing body.entry-watercolor-gate .entry-center::before {
  animation: hybrid-pigment-bloom 1.04s .21s ease-out both;
}

body.entry-watercolor-gate .entry-rule {
  height: 3px;
  border-radius: 45% 55% 51% 49%;
  background: linear-gradient(90deg, transparent, rgba(156, 195, 220, .8) 14%, #e2edee 48%, rgba(162, 198, 216, .78) 84%, transparent);
}

body.entry-watercolor-gate .entry-preview-replay {
  position: fixed;
  z-index: 1000;
  right: 20px;
  bottom: calc(20px + env(safe-area-inset-bottom));
  min-height: 44px;
  padding: 10px 17px;
  border: 1px solid rgba(100, 144, 173, .5);
  border-radius: 2px 18px 2px 13px;
  background: #edf4f5 url('/graphics/watercolor-grain.svg') repeat;
  color: #173454;
  box-shadow: 0 6px 18px rgba(13, 41, 70, .12);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

body.entry-watercolor-gate .entry-preview-replay span { margin-left: 7px; }
html.entry-active body.entry-watercolor-gate .entry-preview-replay { visibility: hidden; pointer-events: none; }

@keyframes hybrid-landscape-soak {
  from { opacity: .21; filter: saturate(.68) blur(5px); }
  65% { opacity: .49; filter: saturate(.85) blur(1.3px); }
  to { opacity: .56; filter: none; }
}

@keyframes hybrid-door-wash {
  from { opacity: 0; filter: blur(13px); }
  65% { opacity: .72; filter: blur(4px); }
  to { opacity: .66; filter: blur(3px); }
}

@keyframes hybrid-pigment-bloom {
  from { opacity: 0; transform: translateX(-50%) scale(.72); }
  60% { opacity: .74; transform: translateX(-50%) scale(1.08); }
  to { opacity: .54; transform: translateX(-50%) scale(1); }
}

@media (max-width: 680px) {
  body.entry-watercolor-gate .entry-door-landscape { opacity: .46; }
  body.entry-watercolor-gate .entry-door-wash { opacity: .57; }
  body.entry-watercolor-gate .entry-center::before { top: 11%; width: 94vw; height: 210px; filter: blur(18px); }
  body.entry-watercolor-gate .entry-preview-replay { right: 13px; bottom: calc(15px + env(safe-area-inset-bottom)); }
  @keyframes hybrid-landscape-soak {
    from { opacity: .17; filter: saturate(.68) blur(5px); }
    65% { opacity: .4; filter: saturate(.85) blur(1.3px); }
    to { opacity: .46; filter: none; }
  }
}

@media (prefers-reduced-motion: reduce) {
  html.entry-playing body.entry-watercolor-gate .entry-door-landscape { animation: none; }
  html.entry-playing body.entry-watercolor-gate .entry-door-wash { animation: none; }
  html.entry-playing body.entry-watercolor-gate .entry-center::before { animation: none; }
}