:root { font-family: 'Avenir Next', Avenir, 'Segoe UI', sans-serif; color: #fff; background: #153537; font-synthesis: none; color-scheme: dark; }
* { box-sizing: border-box; letter-spacing: 0; }
body { margin: 0; }
.arrival { min-height: 560px; min-height: max(560px, 100svh); isolation: isolate; position: relative; overflow: hidden; display: grid; place-items: center; padding: 64px 24px; }
.landscape { position: absolute; inset: 0; z-index: -2; background: #153537; }
.landscape::after { content: ''; position: absolute; inset: 0; background: rgba(6, 22, 25, .49); }
.scene { position: absolute; inset: 0; opacity: 0; transition: opacity 2.4s ease-in-out; overflow: hidden; }
.scene.is-current { opacity: 1; }
.scene img { width: 100%; height: 100%; object-fit: cover; object-position: center 54%; transform: scale(1.035); }
.scene.is-current img { animation: drift 13s ease-out both; }
.scene:nth-child(2) img { object-position: center 62%; }
@keyframes drift { from { transform: scale(1.035); } to { transform: scale(1); } }
.announcement { text-align: center; max-width: 100%; text-shadow: 0 2px 24px #0004; animation: arrive 1.2s ease-out both; }
.logo { width: 330px; height: auto; max-width: 80%; display: block; margin: 0 auto 58px; }
h1 { font-size: 76px; font-weight: 500; line-height: 1.12; margin: 0; }
h1 span { display: block; font-size: 23px; font-weight: 400; margin-bottom: 18px; }
.announcement p { font-size: 23px; line-height: 1.5; margin: 28px 0 0; font-weight: 400; }
.store-badges { display: flex; justify-content: center; align-items: center; gap: 5px; margin-top: 26px; height: 70px; }
.app-store { display: block; width: 145px; height: 48px; object-fit: contain; }
.google-play { display: block; width: 180px; height: 70px; object-fit: contain; }
@keyframes arrive { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (max-width: 640px) {
  .arrival { min-height: max(520px, 100svh); padding: 54px 20px; }
  .logo { width: 250px; margin-bottom: 50px; }
  h1 { font-size: 43px; }
  h1 span { font-size: 20px; margin-bottom: 17px; }
  .announcement p { font-size: 19px; margin-top: 24px; }
  .store-badges { margin-top: 20px; gap: 0; }
  .app-store { width: 126px; height: 42px; }
  .google-play { width: 156px; height: 61px; }
  .scene img { object-position: 55% center; }
  .scene:nth-child(2) img { object-position: 54% center; }
}
@media (max-width: 360px) { h1 { font-size: 37px; } .logo { width: 224px; } }
@media (prefers-reduced-motion: reduce) { .scene { transition: none; } .scene.is-current img, .announcement { animation: none; transform: none; } }