/* Painted title forest: one optimized painting with transform/opacity atmosphere. */
#title-bg.mana.forest {
  --tf-x: 0px; --tf-y: 0px;
  background: radial-gradient(ellipse at 45% 38%, #d7d4a3, #375b40 58%, #173729);
}
.tf-scene { position: absolute; inset: -28px; transform: translate3d(var(--tf-x), var(--tf-y), 0); transition: transform 1.4s ease-out; }
.tf-picture { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 56%; opacity: 0; transition: opacity 1.2s ease; animation: tf-canopy 38s ease-in-out infinite alternate; }
.forest-loaded .tf-picture { opacity: 1; }
.tf-animated { animation-play-state: paused; }
#title-bg.forest.on:not(.forest-paused) .tf-animated { animation-play-state: running; }
#title-bg.forest.forest-paused .tf-animated { animation-play-state: paused; }
.tf-light { position: absolute; inset: 0; opacity: .12; background: radial-gradient(ellipse 65% 65% at 38% 28%, rgba(255, 237, 171, .56), transparent 74%); mix-blend-mode: screen; animation: tf-light 14s ease-in-out infinite alternate; }
.tf-mist { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.tf-mist-band { position: absolute; left: -16%; width: 132%; top: 48%; height: 30%; opacity: .16; background: radial-gradient(ellipse 60% 29% at 28% 54%, rgba(224, 238, 214, .6), transparent 80%), radial-gradient(ellipse 58% 30% at 76% 45%, rgba(239, 239, 206, .48), transparent 76%); animation: tf-mist 42s ease-in-out infinite alternate; }
.tf-mist-band.mist-1 { top: 65%; height: 24%; opacity: .13; animation-duration: 57s; animation-direction: alternate-reverse; }
.tf-fireflies, .tf-leaves { position: absolute; inset: 0; pointer-events: none; }
.tf-firefly { position: absolute; left: var(--x); top: var(--y); width: var(--size); height: var(--size); border-radius: 50%; background: #fff0ac; box-shadow: 0 0 5px 2px rgba(245, 217, 107, .45), 0 0 17px 5px rgba(255, 226, 129, .13); opacity: .2; animation: tf-firefly var(--duration) ease-in-out var(--delay) infinite; }
.tf-leaf { position: absolute; left: var(--x); top: -7vh; width: calc(13px * var(--size)); height: calc(7px * var(--size)); border-radius: 90% 5% 90% 5%; background: linear-gradient(145deg, #bdc17c, #6c833e 58%, #3e6034); box-shadow: inset 0 -1px 1px rgba(24, 54, 20, .26); opacity: 0; animation: tf-leaf var(--duration) linear var(--delay) infinite; }
.tf-leaf.leaf-1 { background: linear-gradient(145deg, #d9b475, #9b8d48); animation-name: tf-leaf-alt; }
.tf-leaf.leaf-2 { filter: blur(.6px); }
.tf-vignette { position: absolute; inset: 0; background: radial-gradient(ellipse 85% 90% at 50% 42%, transparent 45%, rgba(10, 24, 15, .15) 100%), linear-gradient(180deg, rgba(23, 44, 25, .04), transparent 35%, rgba(20, 37, 23, .13)); }

#title-bg.forest ~ #ui .title, #title-bg.forest ~ #ui .title.st-gate {
  background: radial-gradient(ellipse 46% 54% at 50% 38%, rgba(255, 250, 225, .23), transparent 74%);
}
#title-bg.forest ~ #ui .title.st-chars { background: linear-gradient(180deg, rgba(21, 38, 26, .23), rgba(21, 38, 26, .15)); }
#title-bg.forest ~ #ui .t-gate .som-logo img, #title-bg.forest ~ #loading .som-logo img {
  filter: drop-shadow(0 3px 4px rgba(27, 33, 17, .55)) drop-shadow(0 0 14px rgba(255, 238, 198, .45));
}

@keyframes tf-canopy { from { transform: scale(1.012); } to { transform: scale(1.04); } }
@keyframes tf-light { from { opacity: .07; } to { opacity: .20; } }
@keyframes tf-mist { from { transform: translate3d(-2.5%, 1%, 0); } to { transform: translate3d(2.5%, -2%, 0); } }
@keyframes tf-firefly { 0%, 100% { opacity: .08; transform: translate3d(0, 7px, 0); } 32% { opacity: .7; transform: translate3d(12px, -10px, 0); } 62% { opacity: .22; transform: translate3d(-6px, -20px, 0); } 82% { opacity: .55; transform: translate3d(-12px, -4px, 0); } }
@keyframes tf-leaf { 0% { opacity: 0; transform: translate3d(0, -5vh, 0) rotate(-25deg); } 10% { opacity: .55; } 40% { transform: translate3d(4vw, 43vh, 0) rotate(80deg); } 70% { opacity: .55; transform: translate3d(1vw, 80vh, 0) rotate(170deg); } 100% { opacity: 0; transform: translate3d(6vw, 115vh, 0) rotate(270deg); } }
@keyframes tf-leaf-alt { 0% { opacity: 0; transform: translate3d(0, -5vh, 0) rotate(25deg); } 10% { opacity: .45; } 40% { transform: translate3d(-3vw, 43vh, 0) rotate(-95deg); } 70% { opacity: .45; transform: translate3d(-1vw, 80vh, 0) rotate(-180deg); } 100% { opacity: 0; transform: translate3d(-5vw, 115vh, 0) rotate(-290deg); } }

@media (max-width: 760px) {
  .tf-picture { object-position: 50% 54%; }
  .tf-firefly:nth-child(n + 17), .tf-leaf:nth-child(n + 9) { display: none; }
  .tf-mist-band.mist-1 { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  #title-bg.forest .tf-animated { animation: none !important; }
  .tf-scene, .tf-picture { transition: none; }
  .tf-fireflies, .tf-leaves, .tf-mist { display: none; }
  .tf-light { opacity: .12; }
}