/* The mobile title sits over the real front-yard panorama. No second scene load. */
#cinematic.mobile-intro-title { background: transparent; }
#cinematic.mobile-intro-title #introVideo {
 opacity: 0;
 transition: opacity 1.1s ease;
 pointer-events: none;
}
#mobileIntroTitle {
 position: absolute;
 inset: 0;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: flex-end;
 padding: 24px 20px max(100px, 17dvh);
 text-align: center;
 color: #eadfc9;
 background: linear-gradient(transparent 25%, #080b1233 48%, #05070ba3 85%, #05070bc2);
 text-shadow: 0 2px 12px #000, 0 0 28px #000;
 animation: mobile-intro-title-in 1.2s ease both;
 pointer-events: none;
}
#mobileIntroTitle h2 {
 margin: 10px 0 20px;
 font: normal clamp(27px, 8.4vw, 66px)/1.18 Georgia, serif;
 letter-spacing: .07em;
 text-transform: uppercase;
}
#mobileIntroTitle h2 span { display: block; }
#mobileIntroTitle h2 span + span { color: #cbb68c; letter-spacing: .2em; margin-top: 5px; }
#mobileIntroTitle p { margin: 0; }
#mobileIntroTitle .intro-title-author { font: 14px/1.5 Georgia, serif; letter-spacing: .1em; }
#mobileIntroTitle .intro-title-chapter { margin-top: 23px; font: 10px/1.8 Georgia, serif; letter-spacing: .16em; text-transform: uppercase; color: #c3b7a6; }
#cinematic #skipIntro { right: max(18px, env(safe-area-inset-right)); bottom: max(22px, env(safe-area-inset-bottom)); min-height: 44px; }
@keyframes mobile-intro-title-in { from { opacity: 0; } to { opacity: 1; } }
@media (orientation: landscape) {
 #mobileIntroTitle { padding-bottom: max(65px, 10dvh); }
 #mobileIntroTitle h2 { font-size: min(8vh, 50px); margin-bottom: 10px; }
 #mobileIntroTitle .intro-title-chapter { margin-top: 10px; }
}
@media (prefers-reduced-motion: reduce) {
 #mobileIntroTitle { animation: none; }
 #cinematic.mobile-intro-title #introVideo { transition: none; }
}