/* The portrait stays still. Only the feathered forest copy, fog, and leaves move. */
.hero { overflow: visible; z-index: 2; }
.hero-scene { position: absolute; inset: 0; overflow: hidden; z-index: -3; }
.hero-scene .hero-image { z-index: auto; }
.hero-content, .hero-footer { z-index: 3; }
.hero-content { position: relative; }
.forest-breath {
  mask-image: linear-gradient(90deg, #000 0%, #000 23%, transparent 45%), linear-gradient(0deg, #000 10%, #000 67%, transparent 92%);
  mask-composite: intersect;
  transform-origin: 15% 95%;
  animation: forest-sway 10s ease-in-out infinite alternate;
  animation-play-state: paused;
}
@keyframes forest-sway {
  0% { transform: scale(1.014) rotate(-.22deg) translate3d(-2px, 0, 0); }
  100% { transform: scale(1.02) rotate(.26deg) translate3d(3px, -2px, 0); }
}
.hero-mist {
  position: absolute; top: 35%; bottom: -250px; left: 0; right: 0;
  z-index: 1; pointer-events: none; overflow: clip;
  mask-image: linear-gradient(transparent, #000 20%, #000 77%, transparent);
}
.mist-flow {
  display: block; position: absolute; width: 150%; height: 75%; left: -25%; top: 9%;
  background: url('img/mist.svg?v=2') center / 100% 100% no-repeat;
  opacity: .76; transform-origin: center;
  animation: mist-drift 34s ease-in-out infinite alternate;
  animation-play-state: paused; pointer-events: none;
}
.hero-mist .mist-flow:nth-child(2) {
  top: 27%; left: -14%; width: 145%; opacity: .68;
  animation-name: mist-return; animation-duration: 43s; animation-delay: -19s;
}
.hero-mist .mist-flow:nth-child(3) {
  top: 51%; left: -32%; height: 64%; width: 160%; opacity: .9;
  animation-duration: 29s; animation-delay: -11s;
}
@keyframes mist-drift {
  0% { transform: translate3d(-8%, 5%, 0) scale(1.02, 1); }
  50% { transform: translate3d(2%, -5%, 0) scale(1.08, 1.12); }
  100% { transform: translate3d(10%, 1%, 0) scale(1.02, 1.02); }
}
@keyframes mist-return {
  0% { transform: translate3d(9%, -4%, 0) scale(1.1, 1); }
  100% { transform: translate3d(-10%, 6%, 0) scale(1, 1.14); }
}
/* A low veil stays at the edge of the viewport as the visitor moves through the page. */
.ambient-mist {
  position: fixed; left: 0; right: 0; bottom: -105px; height: 340px;
  z-index: 8; pointer-events: none; overflow: clip; opacity: .43;
  mask-image: linear-gradient(transparent, #000 45%, #000);
}
.ambient-mist .mist-flow { opacity: .65; height: 105%; top: 0; animation-duration: 41s; animation-delay: -14s; }
.ambient-mist .mist-flow:nth-child(2) { left: -10%; top: 14%; opacity: .45; animation-name: mist-return; animation-duration: 53s; animation-delay: -31s; }
/* These wisps sit above each section's background, below its content. */
.games-section, .court-section, .voice-section, .digital-section { position: relative; isolation: isolate; }
.voice-section::before {
  content: ''; position: absolute; inset: -1px 0 auto; height: 110px; z-index: -1;
  pointer-events: none;
  background: linear-gradient(#14221c 0%, #14221cae 12%, #14221c2e 45%, #14221c00 100%);
}
.section-mist {
  position: absolute; inset: -120px 0 auto; height: 310px; z-index: -1;
  pointer-events: none; overflow: clip; opacity: .7;
}
.paper .section-mist { opacity: .48; }
.section-mist .mist-flow { height: 100%; top: 0; animation-duration: 49s; animation-delay: -24s; }
.court-section .section-mist { height: 430px; opacity: .9; }
.wind-leaves { position: fixed; inset: 0; z-index: 7; pointer-events: none; overflow: clip; }
.wind-leaf {
  position: absolute; top: var(--leaf-y); left: -7%; width: var(--leaf-size); height: var(--leaf-size);
  opacity: 0; animation: leaf-flight var(--leaf-time) linear var(--leaf-delay) infinite;
  animation-play-state: paused;
}
.wind-leaf i {
  display: block; width: 100%; height: 48%; border-radius: 2% 90% 2% 90%;
  background: linear-gradient(155deg, #a9ad7c 0%, #73835f 44%, #c7bb85 49%, #647652 55%, #41533d 100%);
  filter: blur(var(--leaf-blur)); box-shadow: 0 1px 2px #0002;
  animation: leaf-tumble var(--leaf-spin) ease-in-out var(--leaf-delay) infinite alternate;
  animation-play-state: paused;
}
@keyframes leaf-flight {
  0% { transform: translate3d(-4vw, -22px, 0); opacity: 0; }
  9% { opacity: var(--leaf-opacity); }
  42% { transform: translate3d(43vw, 65px, 0); }
  70% { transform: translate3d(77vw, 17px, 0); opacity: var(--leaf-opacity); }
  100% { transform: translate3d(116vw, 150px, 0); opacity: 0; }
}
@keyframes leaf-tumble {
  0% { transform: perspective(120px) rotateZ(-35deg) rotateY(0deg) rotateX(30deg); }
  50% { transform: perspective(120px) rotateZ(75deg) rotateY(150deg) rotateX(-20deg); }
  100% { transform: perspective(120px) rotateZ(190deg) rotateY(280deg) rotateX(35deg); }
}
html[data-atmosphere="on"] .wind-active .mist-flow,
html[data-atmosphere="on"] .wind-active .forest-breath,
html[data-atmosphere="on"] .ambient-mist .mist-flow,
html[data-atmosphere="on"] .wind-leaf,
html[data-atmosphere="on"] .wind-leaf i { animation-play-state: running; }
.atmosphere-toggle {
  position: fixed; right: 20px; bottom: max(18px, env(safe-area-inset-bottom)); z-index: 29;
  display: flex; align-items: center; gap: 8px; padding: 10px 13px; min-height: 44px;
  border: 1px solid #79876c; background: #14221ced; color: #e4e8d4;
  border-radius: 2px; font: 10px/1.4 var(--sans); cursor: pointer;
  box-shadow: 0 3px 18px #0002;
}
.atmosphere-toggle .icon { width: 18px; height: 18px; }
.atmosphere-toggle:hover { background: #2a3d30; }
.atmosphere-toggle[hidden] { display: none; }
.site-footer { padding-bottom: 75px; }
@media (max-width: 720px) {
  .forest-breath { mask-image: linear-gradient(90deg, #000, #000 15%, transparent 35%); }
  .hero-mist { top: 24%; bottom: -320px; }
  .hero-mist .mist-flow { top: 4%; height: 54%; opacity: .66; width: 210%; left: -55%; }
  .hero-mist .mist-flow:nth-child(2) { top: 34%; width: 210%; left: -44%; }
  .hero-mist .mist-flow:nth-child(3) { top: 59%; width: 210%; left: -50%; }
  .ambient-mist { height: 250px; bottom: -75px; opacity: .3; }
  .ambient-mist .mist-flow { width: 200%; left: -50%; }
  .wind-leaf:nth-child(n+7) { display: none; }
  .atmosphere-toggle { right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); padding-inline: 10px; font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .forest-breath, .mist-flow, .wind-leaf, .wind-leaf i { animation: none !important; }
  .forest-breath, .wind-leaves, .atmosphere-toggle { display: none; }
  .hero-mist { opacity: .65; }
  .ambient-mist { opacity: .2; }
}