/* Every illustrated layer shares a 1672 × 941 artboard. Never size layers to the viewport separately. */
#faunaraTitle { background: #28d5ed; isolation: isolate; overflow: hidden; }
.faunara-title-art { position: absolute; inset: 0; overflow: hidden; pointer-events: none; background: linear-gradient(#19d6ef, #91e9ee); }
.faunara-title-art::before, .faunara-title-art::after { display: none; }
.title-plane { position: absolute; width: max(100vw, 177.6833vh); height: max(56.2799vw, 100vh); left: 50%; top: 50%; transform: translate(-50%, -50%); }
.title-poster, .title-layers, .title-layer, .title-leaves { position: absolute; inset: 0; width: 100%; height: 100%; }
.title-poster, .title-layer { display: block; object-fit: fill; }
.title-layers { visibility: hidden; background: linear-gradient(120deg, #16d7f0, #66e0f0); }
.is-ready .title-layers { visibility: visible; }
.is-ready .title-poster { visibility: hidden; }
.title-clouds { left: -3%; width: 106%; animation: faunara-cloud-drift 32s ease-in-out infinite alternate; }
.title-crew { position: absolute; left: 18%; top: 9%; width: 79%; height: 79%; transform-origin: 74% 89%; animation: faunara-title-breathe 5.5s ease-in-out infinite; }
.title-blink { clip-path: ellipse(2.6% 3.4% at 85.1% 76.3%); opacity: 0; animation: faunara-title-blink 7.3s step-end infinite; }
.title-canopy { transform-origin: 98% 3%; animation: faunara-canopy-sway 8s ease-in-out infinite alternate; }
.title-flowers { transform-origin: 88% 100%; animation: faunara-flower-sway 4.5s ease-in-out infinite alternate; }
.title-leaf { position: absolute; left: calc(56% + var(--leaf) * 9%); top: 10%; width: .75%; aspect-ratio: 1.8; border-radius: 0 85% 0 85%; background: #bad957; border: 1px solid #6e8b32; box-shadow: inset 0 -1px #dce779; opacity: 0; animation: faunara-leaf-fall 18s linear infinite; animation-delay: calc(var(--leaf) * -3.6s); }
.faunara-title-art:not(.is-running) *, .faunara-title-art:not(.is-running) *::before { animation-play-state: paused !important; }
.faunara-title-art.is-inactive * { animation: none !important; }
@keyframes faunara-cloud-drift { from { transform: translateX(-1.4%); } to { transform: translateX(1.4%); } }
@keyframes faunara-canopy-sway { from { transform: scale(1.025) rotate(-.5deg); } to { transform: scale(1.025) rotate(.6deg); } }
@keyframes faunara-flower-sway { from { transform: skewX(-1.1deg) rotate(-.2deg); } to { transform: skewX(1.2deg) rotate(.3deg); } }
@keyframes faunara-title-breathe { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(1.006); } }
@keyframes faunara-title-blink { 0%, 43%, 46%, 100% { opacity: 0; } 44% { opacity: 1; } }
@keyframes faunara-leaf-fall { 0% { opacity: 0; transform: translate(0,0) rotate(0); } 8% { opacity: .85; } 45% { transform: translate(-4vw,20vh) rotate(150deg); } 85% { opacity: .75; } 100% { opacity: 0; transform: translate(-10vw,55vh) rotate(350deg); } }
/* Preserve Faunara's original centered logo, framed buttons, and footer.
   Keep the requested single row even on narrow screens. */
#faunaraTitle .faunara-actions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#faunaraTitle .faunara-actions:has(#faunaraContinue.hidden) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-aspect-ratio: 1/1) {
  .title-plane { width: 103.0563svh; height: 58svh; top: auto; left: auto; right: -1.5vw; bottom: 0; transform: none; mask-image: linear-gradient(transparent, #000 12%); }
}
/* Portrait leaves more sky above the scene. Reuse the illustrated cloud layer
   there; also cover touch tablets in landscape without affecting 16:10 Deck. */
@media (max-aspect-ratio: 1/1), (pointer: coarse) and (min-height: 700px) and (max-aspect-ratio: 3/2) {
  .faunara-title-art::before, .faunara-title-art::after {
    content: ''; display: block; position: absolute; pointer-events: none;
    background: url('./assets/ui/faunara/title/clouds.webp') center / 100% 100% no-repeat;
    animation: faunara-upper-cloud-drift 36s ease-in-out infinite alternate;
  }
  .faunara-title-art::before { width: 150%; height: 60svh; left: -35%; top: -29svh; opacity: .94; }
  .faunara-title-art::after { width: 165%; height: 40svh; left: -12%; top: -5svh; opacity: .68; --cloud-direction: -1; animation-duration: 49s; mask-image: linear-gradient(#000 65%, transparent); }
}
@media (pointer: coarse) and (min-height: 700px) and (min-aspect-ratio: 1/1) and (max-aspect-ratio: 3/2) {
  /* Fade into the open sky before reaching the foreground tree. */
  .faunara-title-art::after { width: 130%; height: 60svh; top: -25svh; --cloud-direction: 1; mask-image: linear-gradient(to right, #000 25%, transparent 52%); }
}
@media (pointer: coarse) and (min-width: 600px) and (min-height: 700px) and (max-aspect-ratio: 3/2) {
  /* The extra sky clouds sit behind the complete scene, including its clouds. */
  .faunara-title-art { isolation: isolate; }
  .faunara-title-art::before, .faunara-title-art::after { z-index: 0; }
  .faunara-title-art .title-plane { z-index: 1; }
  .faunara-title-art .title-layers { background: transparent; }
}
@media (pointer: coarse) and (min-width: 600px) and (min-height: 700px) and (min-aspect-ratio: 1/1) and (max-aspect-ratio: 3/2) {
  .faunara-title-art { background: linear-gradient(120deg, #16d7f0, #66e0f0); }
}
@keyframes faunara-upper-cloud-drift {
  from { transform: translateX(-2%) scaleX(var(--cloud-direction, 1)); }
  to { transform: translateX(2%) scaleX(var(--cloud-direction, 1)); }
}
.faunara-title-art:not(.is-running)::before, .faunara-title-art:not(.is-running)::after { animation-play-state: paused; }
.faunara-title-art.is-inactive::before, .faunara-title-art.is-inactive::after { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .faunara-title-art *, .faunara-title-art::before, .faunara-title-art::after { animation: none !important; }
  .faunara-title-art .title-layers { visibility: hidden; }
  .faunara-title-art .title-poster { visibility: visible; }
}