/* V16 sanctuary awakening: light, camera depth and a foreground composed around
 * the original Logan. All decorative layers are inert; controls stay immediate. */
#game-viewport[data-title-cinematic-v16] #start-screen { isolation:isolate; }
#game-viewport[data-title-cinematic-v16] #start-screen .start-backdrop::before {
  inset:-28px; transform-origin:50% 57%;
  background-image:linear-gradient(0deg,rgba(4,9,16,.96),rgba(9,17,26,.16) 47%,rgba(15,24,33,.17)),var(--oa-title-background);
  transform:scale(1.04) translate3d(0,0,0);
}
#game-viewport[data-title-cinematic-v16] #start-screen .start-backdrop::after {
  background:radial-gradient(ellipse at 52% 46%,transparent 20%,rgba(12,22,32,.12) 51%,rgba(3,8,14,.69) 100%),linear-gradient(90deg,rgba(9,18,28,.22),transparent 36% 63%,rgba(9,18,28,.25));
}
#game-viewport[data-title-cinematic-v16] #start-screen .start-brand {
  text-shadow:0 2px 0 #483320,0 6px 15px rgba(0,0,0,.88);
}
#game-viewport[data-title-cinematic-v16] #start-screen .start-brand h1 {
  color:#fff1d2; text-shadow:0 1px 0 #b48e59,0 3px 0 #6e492c,0 5px 0 #35261c,0 7px 16px rgba(0,0,0,.9);
  letter-spacing:-.025em;
}
#game-viewport[data-title-cinematic-v16] #start-screen .brand-crest {
  filter:drop-shadow(0 2px 0 rgba(39,26,15,.8)) drop-shadow(0 0 16px rgba(255,220,133,.42));
}
#game-viewport[data-title-cinematic-v16] #start-screen .start-brand p {
  color:#f6d39c; letter-spacing:.1em; text-shadow:0 2px 5px #16120e;
}
#game-viewport[data-title-cinematic-v16] #start-screen .start-brand::after {
  height:12px; margin-top:8px; background:none; box-shadow:none;
}
#game-viewport[data-title-cinematic-v16] #start-screen .title-brand-ornament-v16 {
  position:absolute; bottom:0; left:50%; transform:translateX(-50%);
  width:min(256px,72%); height:12px; color:#edc784; pointer-events:none!important;
  filter:drop-shadow(0 1px 2px #151a20); opacity:.9;
}
.title-brand-ornament-v16 svg { width:100%; height:100%; display:block; }
#game-viewport[data-title-cinematic-v16] #start-screen :is(.start-actions,.start-header,.start-footer) { z-index:4; }
#game-viewport[data-title-cinematic-v16] #start-screen .start-actions { opacity:1; animation:none!important; transform:none!important; }
#game-viewport[data-title-cinematic-v16] #start-screen .title-cast { z-index:2; }
#game-viewport[data-title-cinematic-v16] #start-screen .title-cast>picture { transform-origin:50% 100%; }
#game-viewport[data-title-cinematic-v16] #start-screen .title-cast>picture>img {
  padding:9px 6px 0; transform-origin:50% 100%;
  filter:drop-shadow(0 7px 7px rgba(2,8,14,.83)) drop-shadow(0 0 3px rgba(255,225,163,.17));
}
#game-viewport[data-title-cinematic-v16] #start-screen :is(.title-cinema-world-v16,.title-cinema-foreground-v16) {
  position:absolute; inset:0; overflow:hidden; contain:layout paint;
  pointer-events:none!important; user-select:none;
}
#game-viewport[data-title-cinematic-v16] #start-screen .title-cinema-world-v16 { z-index:0; }
#game-viewport[data-title-cinematic-v16] #start-screen .title-cinema-foreground-v16 { z-index:3; }
.title-cinema-world-v16 *,.title-cinema-foreground-v16 *,.title-hero-light-v16 * { pointer-events:none!important; }
.title-sunbreak-v16 {
  position:absolute; width:75%; height:50%; left:6%; top:9%;
  background:radial-gradient(ellipse at 48% 32%,rgba(255,242,197,.38),rgba(255,214,134,.18) 23%,rgba(240,168,75,.045) 48%,transparent 69%);
  opacity:.82; transform-origin:50% 35%;
}
.title-rays-v16 {
  position:absolute; width:107%; height:106%; left:-8%; top:-13%;
  background:url('/resource/ui/title-lobby-v16/runtime/sanctuary-rays-v16.webp') no-repeat center/100% 100%;
  transform-origin:100% 0; opacity:.38;
}
.title-rays-v16.title-rays-far-v16 { left:14%; top:-9%; width:85%; background-image:url('/resource/ui/title-lobby-v16/title/sanctuary-rays-v16.svg'); transform:scaleX(-1) rotate(-10deg); opacity:.15; }
.title-sanctuary-glow-v16 {
  position:absolute; width:90%; height:54%; left:5%; top:30%;
  background:radial-gradient(ellipse at 50% 70%,rgba(255,206,112,.19),rgba(192,171,122,.055) 43%,transparent 69%);
  opacity:.85;
}
.title-mist-far-v16 {
  position:absolute; left:-25%; bottom:14%; width:150%; height:30%;
  background:radial-gradient(ellipse at 25% 65%,rgba(173,196,214,.16),transparent 36%),radial-gradient(ellipse at 72% 59%,rgba(205,186,152,.17),transparent 37%);
  opacity:.85;
}
.title-mist-near-v16 {
  position:absolute; left:-32%; bottom:9%; width:165%; height:23%;
  background:radial-gradient(ellipse at 18% 58%,rgba(155,183,207,.19),transparent 32%),radial-gradient(ellipse at 81% 62%,rgba(238,207,162,.19),transparent 31%);
  opacity:.72;
}
.title-edge-v16 {
  position:absolute; inset:0;
  background:linear-gradient(0deg,rgba(3,9,17,.38),transparent 22% 74%,rgba(9,16,24,.18)),linear-gradient(90deg,rgba(5,13,23,.18),transparent 13% 87%,rgba(5,13,23,.2));
}
.title-awakening-v16 {
  position:absolute; width:145%; height:120%; left:-25%; top:-15%;
  background:linear-gradient(118deg,transparent 25%,rgba(255,228,163,.06) 34%,rgba(255,235,177,.23) 40%,rgba(255,230,158,.13) 43%,transparent 52%);
  opacity:0; transform:translateX(-18%);
}
#game-viewport[data-title-cinematic-v16] #start-screen .title-hero-light-v16 { position:absolute; inset:0; z-index:0; pointer-events:none; }
.title-hero-backlight-v16 {
  position:absolute; left:6%; top:0; width:88%; height:98%;
  background:radial-gradient(ellipse at 51% 40%,rgba(255,235,180,.3),rgba(246,193,107,.1) 41%,transparent 68%);
}
.title-hero-ground-v16 {
  position:absolute; left:10%; width:80%; bottom:-2px; height:17%;
  background:radial-gradient(ellipse at 50% 76%,rgba(1,5,9,.75) 7%,rgba(4,9,14,.66) 26%,rgba(244,201,107,.17) 46%,transparent 70%);
}
.title-hero-floor-v16 {
  position:absolute; left:17%; width:66%; bottom:-2px; height:12%;
  background:url('/resource/ui/title-lobby-v16/title/sanctuary-floor-v16.svg') no-repeat center/100% 100%;
  opacity:.75;
}
.title-hero-arrival-v16 {
  position:absolute; left:2%; width:96%; top:-5%; height:110%;
  background:radial-gradient(ellipse at 50% 71%,rgba(255,229,152,.24),transparent 66%);
  opacity:0;
}
.title-mote-v16 {
  position:absolute; left:var(--x); top:var(--y); width:var(--size); height:var(--size);
  border-radius:50%; background:#ffe7b5; box-shadow:0 0 6px rgba(255,214,131,.74);
  opacity:0; transform:translate3d(0,0,0);
}
.title-mote-v16:nth-child(3n) { background:#dceaf5; box-shadow:0 0 5px rgba(177,216,242,.56); }
.title-mote-v16:nth-child(7n) { border-radius:1px; background:#f4c977; }
@media (prefers-reduced-motion:no-preference) {
  #game-viewport[data-title-cinematic-v16] #start-screen .start-backdrop::before { animation:ui16-world-depth 24s ease-in-out infinite alternate; }
  #game-viewport[data-title-cinematic-v16] #start-screen .title-cast>picture>img { animation:ui16-hero-idle 5.4s ease-in-out infinite; }
  [data-title-cinematic-v16] .title-sunbreak-v16 { animation:ui16-sunbreak 9s ease-in-out infinite alternate; }
  [data-title-cinematic-v16] .title-rays-v16 { animation:ui16-rays 16s ease-in-out infinite alternate; }
  [data-title-cinematic-v16] .title-rays-far-v16 { animation:ui16-rays-far 21s ease-in-out infinite alternate; }
  [data-title-cinematic-v16] .title-sanctuary-glow-v16 { animation:ui16-sanctuary-breath 8s ease-in-out infinite alternate; }
  [data-title-cinematic-v16] .title-mist-far-v16 { animation:ui16-mist-far 20s ease-in-out infinite alternate; }
  [data-title-cinematic-v16] .title-mist-near-v16 { animation:ui16-mist-near 15s ease-in-out infinite alternate; }
  [data-title-cinematic-v16] .title-hero-floor-v16 { animation:ui16-floor-light 7s ease-in-out infinite alternate; }
  [data-title-cinematic-v16] .title-mote-v16 { animation:ui16-dust var(--duration) var(--delay) linear infinite; }
  #game-viewport[data-title-cinematic-v16] #start-screen[data-title-cinematic="awakening"] .start-backdrop::before { animation:ui16-camera-arrival 2500ms cubic-bezier(.16,.66,.22,1) both; }
  #game-viewport[data-title-cinematic-v16] #start-screen[data-title-cinematic="awakening"] .title-cast>picture { animation:ui16-hero-arrival 2000ms cubic-bezier(.2,.65,.24,1) both!important; }
  #game-viewport[data-title-cinematic-v16] #start-screen[data-title-cinematic="awakening"] .start-brand h1 { animation:ui16-title-arrival 1500ms ease-out both; }
  [data-title-cinematic-v16] #start-screen[data-title-cinematic="awakening"] .title-awakening-v16 { animation:ui16-awakening 2500ms ease-out both; }
  [data-title-cinematic-v16] #start-screen[data-title-cinematic="awakening"] .title-hero-arrival-v16 { animation:ui16-hero-light-arrival 2400ms ease-out both; }
}
#game-viewport[data-title-cinematic-v16] #start-screen[data-title-effects="paused"] :is(.title-cinema-world-v16 *,.title-cinema-foreground-v16 *,.title-hero-light-v16 *,.title-cast>picture,.title-cast>picture>img,.start-brand h1),
#game-viewport[data-title-cinematic-v16] #start-screen[data-title-effects="paused"] .start-backdrop::before { animation-play-state:paused!important; }
#game-viewport[data-title-cinematic-v16] #start-screen[data-title-motion="off"] :is(.title-cinema-world-v16 *,.title-cinema-foreground-v16 *,.title-hero-light-v16 *,.title-cast>picture,.title-cast>picture>img,.start-brand h1),
#game-viewport[data-title-cinematic-v16] #start-screen[data-title-motion="off"] .start-backdrop::before { animation:none!important; }
#game-viewport[data-title-cinematic-v16] #start-screen[data-title-motion="off"] .title-mote-v16 { display:none; }
#game-viewport[data-title-cinematic-v16] #start-screen[data-title-cinematic="settled"] .title-cast>picture { opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce) {
  #game-viewport[data-title-cinematic-v16] #start-screen :is(.title-cinema-world-v16 *,.title-cinema-foreground-v16 *,.title-hero-light-v16 *,.title-cast>picture,.title-cast>picture>img,.start-brand h1),
  #game-viewport[data-title-cinematic-v16] #start-screen .start-backdrop::before { animation:none!important; }
  .title-mote-v16 { display:none; }
}
@media (orientation:landscape) {
  #game-viewport[data-title-cinematic-v16] #start-screen .title-brand-ornament-v16 { left:0; transform:none; width:88%; }
  .title-sunbreak-v16 { left:23%; width:59%; top:0; height:82%; }
  .title-rays-v16 { left:17%; width:61%; top:-16%; height:136%; }
  .title-rays-v16.title-rays-far-v16 { left:35%; top:-17%; width:47%; }
  .title-sanctuary-glow-v16 { left:28%; width:45%; top:5%; height:83%; }
  .title-mist-far-v16 { bottom:8%; height:40%; }
  .title-mist-near-v16 { bottom:0; height:29%; }
}
@media (orientation:landscape) and (max-height:429px) {
  #game-viewport[data-title-cinematic-v16] #start-screen .title-brand-ornament-v16 { height:8px; }
  #game-viewport[data-title-cinematic-v16] #start-screen .start-brand::after { height:8px; margin-top:4px; }
  #game-viewport[data-title-cinematic-v16] #start-screen .title-cast>picture>img { padding-top:7px; }
  .title-mote-v16:nth-child(n+19) { display:none; }
}
@keyframes ui16-world-depth { from { transform:scale(1.04) translate3d(-8px,3px,0); } to { transform:scale(1.065) translate3d(9px,-5px,0); } }
/* Uniform, foot-anchored breath: no separate body-part warping. */
@keyframes ui16-hero-idle { 0%,100% { transform:scale(.987) rotate(-.15deg); } 50% { transform:scale(.995) rotate(.15deg); } }
@keyframes ui16-sunbreak { from { opacity:.58; transform:scale(.97); } to { opacity:1; transform:scale(1.04); } }
@keyframes ui16-rays { from { opacity:.28; transform:rotate(-3deg) translate3d(-2%,0,0); } to { opacity:.44; transform:rotate(3deg) translate3d(2%,0,0); } }
@keyframes ui16-rays-far { from { opacity:.12; transform:scaleX(-1) rotate(-12deg); } to { opacity:.22; transform:scaleX(-1) rotate(-5deg); } }
@keyframes ui16-sanctuary-breath { from { opacity:.65; transform:scale(.97); } to { opacity:1; transform:scale(1.03); } }
@keyframes ui16-mist-far { from { transform:translate3d(-4%,0,0); } to { transform:translate3d(5%,-2%,0); } }
@keyframes ui16-mist-near { from { transform:translate3d(4%,0,0); opacity:.58; } to { transform:translate3d(-5%,1%,0); opacity:.85; } }
@keyframes ui16-floor-light { from { opacity:.5; } to { opacity:.85; } }
@keyframes ui16-dust { 0% { opacity:0; transform:translate3d(0,32px,0) scale(.7); } 13% { opacity:.75; } 65% { opacity:.5; } 100% { opacity:0; transform:translate3d(var(--drift),-160px,0) scale(1); } }
@keyframes ui16-camera-arrival { from { transform:scale(1.115) translate3d(0,6px,0); } to { transform:scale(1.04) translate3d(-8px,3px,0); } }
@keyframes ui16-hero-arrival { from { opacity:.94; transform:scale(.967); } to { opacity:1; transform:none; } }
@keyframes ui16-title-arrival { from { opacity:.93; transform:translate3d(0,4px,0); } to { opacity:1; transform:none; } }
@keyframes ui16-awakening { 0% { opacity:0; transform:translateX(-18%); } 25% { opacity:.84; } 75% { opacity:.45; } 100% { opacity:0; transform:translateX(16%); } }
@keyframes ui16-hero-light-arrival { 0% { opacity:0; transform:scale(.85); } 35% { opacity:1; } 100% { opacity:0; transform:scale(1.1); } }

.title-mote-v16-1 { --x:77%; --y:55%; --size:1.4px; --duration:9s; --delay:-1.71s; --drift:35px; }
.title-mote-v16-2 { --x:60%; --y:72%; --size:1.4px; --duration:10s; --delay:-3.42s; --drift:-25px; }
.title-mote-v16-3 { --x:43%; --y:43%; --size:2px; --duration:11s; --delay:-5.13s; --drift:35px; }
.title-mote-v16-4 { --x:26%; --y:60%; --size:1.4px; --duration:12s; --delay:-6.84s; --drift:-25px; }
.title-mote-v16-5 { --x:9%; --y:77%; --size:1.4px; --duration:13s; --delay:-8.55s; --drift:35px; }
.title-mote-v16-6 { --x:80%; --y:48%; --size:2px; --duration:14s; --delay:-10.26s; --drift:-25px; }
.title-mote-v16-7 { --x:63%; --y:65%; --size:3px; --duration:8s; --delay:-11.97s; --drift:35px; }
.title-mote-v16-8 { --x:46%; --y:82%; --size:1.4px; --duration:9s; --delay:-0.68s; --drift:-25px; }
.title-mote-v16-9 { --x:29%; --y:53%; --size:2px; --duration:10s; --delay:-2.39s; --drift:35px; }
.title-mote-v16-10 { --x:12%; --y:70%; --size:1.4px; --duration:11s; --delay:-4.1s; --drift:-25px; }
.title-mote-v16-11 { --x:83%; --y:41%; --size:1.4px; --duration:12s; --delay:-5.81s; --drift:35px; }
.title-mote-v16-12 { --x:66%; --y:58%; --size:2px; --duration:13s; --delay:-7.52s; --drift:-25px; }
.title-mote-v16-13 { --x:49%; --y:75%; --size:1.4px; --duration:14s; --delay:-9.23s; --drift:35px; }
.title-mote-v16-14 { --x:32%; --y:46%; --size:3px; --duration:8s; --delay:-10.94s; --drift:-25px; }
.title-mote-v16-15 { --x:15%; --y:63%; --size:2px; --duration:9s; --delay:-12.65s; --drift:35px; }
.title-mote-v16-16 { --x:86%; --y:80%; --size:1.4px; --duration:10s; --delay:-1.36s; --drift:-25px; }
.title-mote-v16-17 { --x:69%; --y:51%; --size:1.4px; --duration:11s; --delay:-3.07s; --drift:35px; }
.title-mote-v16-18 { --x:52%; --y:68%; --size:2px; --duration:12s; --delay:-4.78s; --drift:-25px; }
.title-mote-v16-19 { --x:35%; --y:39%; --size:1.4px; --duration:13s; --delay:-6.49s; --drift:35px; }
.title-mote-v16-20 { --x:18%; --y:56%; --size:1.4px; --duration:14s; --delay:-8.2s; --drift:-25px; }
.title-mote-v16-21 { --x:89%; --y:73%; --size:3px; --duration:8s; --delay:-9.91s; --drift:35px; }
.title-mote-v16-22 { --x:72%; --y:44%; --size:1.4px; --duration:9s; --delay:-11.62s; --drift:-25px; }
.title-mote-v16-23 { --x:55%; --y:61%; --size:1.4px; --duration:10s; --delay:-0.33s; --drift:35px; }
.title-mote-v16-24 { --x:38%; --y:78%; --size:2px; --duration:11s; --delay:-2.04s; --drift:-25px; }
