/* Hero-only overrides: keep the meadow scene, drop the rest of the page.
   Scroll length = 100vh stage + 160vh zoom (scene config span = 1.6). */

header.v5-nav,
.v5-menu-overlay,
footer,
main > section:not(.v5-hero),
.v5-hero__front,
.v5-hero__principle {
  display: none !important;
}

.v5-hero,
.v5-hero--meadow {
  height: 260vh !important;
}

html, body {
  overscroll-behavior-y: none;
}

/* The cursor pill is the full site's way in to the ambience; hero-only uses a
   corner toggle instead (hero.js). */
.v5-cursor {
  display: none !important;
}

.hero-sound {
  position: fixed;
  top: 28px;
  right: 32px;
  z-index: 2100;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #ffffff1f;
  backdrop-filter: blur(6px);
  color: #fff;
  cursor: pointer;
  opacity: 0;
  transition: opacity .6s cubic-bezier(.22,.61,.36,1), background .25s ease;
}

.hero-sound[data-ready="true"] { opacity: 1; }
.hero-sound:hover { background: #ffffff33; }

.hero-sound svg {
  display: block;
  width: 18px;
  height: 18px;
  opacity: .75;
  filter: drop-shadow(0 1px 6px #141e0a66);
}

.hero-home {
  position: fixed;
  top: 28px;
  left: 32px;
  z-index: 2100;
  color: #fff;
  font-size: 12px;
  letter-spacing: .01em;
  text-decoration: none;
  text-shadow: 0 1px 14px #141e0a66;
  opacity: 0;
  transition: opacity .6s cubic-bezier(.22,.61,.36,1);
}

.hero-home[data-ready="true"] { opacity: .85; }
.hero-home:hover { opacity: 1; text-decoration: underline; }

/* The loader and the page-transition both spin a mark; it is the logo now, and
   it holds still. GSAP writes the spin as an inline transform, so the rule has
   to outrank it. */
.v5-transition__mark {
  animation: none !important;
  transform: none !important;
  font-size: 0 !important;
  width: 92px;
  height: 92px;
  background: var(--accent);
  -webkit-mask: url(/touch-grass/icon.svg) center / contain no-repeat;
  mask: url(/touch-grass/icon.svg) center / contain no-repeat;
}