/* The stained-glass window you step through into the garden.
 *
 * Hidden by default. The tiny script in <head> adds .has-window before the
 * first paint, so: no JavaScript → no window, just the page. The window stays
 * part of the page: scrolling down takes you through it, scrolling back up
 * brings it back.
 */

.garden-loader {
  display: none;
}

.has-window .garden-loader {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  width: 100%;
  height: 100vh;
  height: 100lvh; /* the large viewport, so a phone's toolbar can't resize the window */
  overflow: hidden;
  background: #efe6d2; /* cream paper: matches PAPER in glass/shaders.js, so nothing flashes */
  color: #2c1a1d;
}

html.scroll-locked,
html.scroll-locked body {
  overflow: hidden;
}

/* Part-way through: the garden shows through, and the page can be used. */
.garden-loader.is-revealing {
  background: transparent;
  pointer-events: none;
}

/* All the way through: nothing left to draw. */
.garden-loader.is-through {
  visibility: hidden;
}

/* Without WebGL: a soft painted-look gradient instead of the glass. */
.garden-loader[data-mode='fallback'] {
  background:
    radial-gradient(60% 40% at 20% 78%, rgba(214, 52, 31, 0.35), transparent 70%),
    radial-gradient(50% 35% at 82% 85%, rgba(214, 52, 31, 0.3), transparent 70%),
    linear-gradient(#7aa1cc 0%, #b4cadc 32%, #eedcc2 56%, #a9b37a 58%, #6c8c45 80%, #4e6f37 100%);
}

.garden-loader__canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  transform-origin: 50% 42%;
}

.garden-loader__skip {
  position: absolute;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  padding: 0.6em 1.15em;
  border: 1px solid rgba(44, 26, 29, 0.18);
  border-radius: 999px;
  background: rgba(250, 244, 233, 0.62);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #3b2a26;
  font: 600 0.72rem/1 system-ui, -apple-system, 'Segoe UI', sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  opacity: 0;
  animation: garden-loader-appear 0.6s ease 1.2s forwards;
  transition: background-color 0.2s ease;
}

.garden-loader__skip:hover {
  background: rgba(250, 244, 233, 0.92);
}

.garden-loader__skip:focus-visible {
  outline: 2px solid #2c1a1d;
  outline-offset: 3px;
}

/* Once the window is finished there's nothing to skip. */
.is-settled .garden-loader__skip,
.is-revealing .garden-loader__skip {
  display: none;
}

@keyframes garden-loader-appear {
  to {
    opacity: 1;
  }
}

/* A wordless hint to scroll: a mouse with its wheel turning (a chevron on touch screens). */
.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: max(30px, calc(env(safe-area-inset-bottom) + 18px));
  width: 26px;
  height: 42px;
  margin-left: -13px;
  border: 2px solid rgba(255, 255, 255, 0.92);
  border-radius: 14px;
  box-shadow: 0 2px 14px rgba(20, 24, 10, 0.35);
  opacity: 0;
  transition: opacity 0.8s ease;
  pointer-events: none;
}

.scroll-cue span {
  position: absolute;
  left: 50%;
  top: 7px;
  width: 4px;
  height: 8px;
  margin-left: -2px;
  border-radius: 2px;
  background: #fff;
  animation: scroll-cue 1.7s ease-in-out infinite;
}

html.tour-ready:not(.has-scrolled) .scroll-cue {
  opacity: 1;
}

@keyframes scroll-cue {
  0% {
    transform: translateY(0);
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  75% {
    transform: translateY(13px);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@media (pointer: coarse) {
  .scroll-cue {
    width: 30px;
    height: 30px;
    margin-left: -15px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    filter: drop-shadow(0 2px 6px rgba(20, 24, 10, 0.45));
  }

  .scroll-cue span {
    top: 4px;
    width: 18px;
    height: 18px;
    margin-left: -9px;
    border-radius: 0;
    background: none;
    border-right: 3px solid #fff;
    border-bottom: 3px solid #fff;
    transform: rotate(45deg);
    animation: scroll-cue-touch 1.7s ease-in-out infinite;
  }

  @keyframes scroll-cue-touch {
    0%,
    100% {
      transform: translateY(0) rotate(45deg);
      opacity: 0.4;
    }
    50% {
      transform: translateY(8px) rotate(45deg);
      opacity: 1;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  /* A shortened animation would still wait out its delay, so drop it entirely. */
  .garden-loader__skip {
    animation: none;
    opacity: 1;
  }

  .scroll-cue span {
    animation: none;
    opacity: 1;
  }
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}