/* The app's start (/app): Winter Valley full screen, the lift ride over it while it loads, "Turn your phone" in portrait. */
@font-face { font-family: "Outfit"; src: url(/fonts/outfit.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }
[hidden] { display: none !important; }
:root { --night: #0b1636; --primary: #1f5cff; --primary-hover: #1a4fe0; --lamp: #ffd88a; --display: "Outfit", ui-rounded, system-ui, sans-serif;
  --top: env(titlebar-area-height, 0px); --spring: cubic-bezier(.3, 1.55, .5, 1); --ease: cubic-bezier(.2, .8, .2, 1); }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--night); color: #fff; font-family: var(--display); -webkit-tap-highlight-color: transparent; overscroll-behavior: none; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--lamp); outline-offset: 3px; }

/* the installed desktop app draws its own title bar (window-controls-overlay) */
.titlebar { display: none; }
@media (display-mode: window-controls-overlay) {
  .titlebar { position: fixed; left: env(titlebar-area-x, 0); top: 0; width: env(titlebar-area-width, 100%); height: var(--top); display: flex; align-items: center; padding: 0 12px;
    font: 700 13px/1 var(--display); color: rgba(255, 255, 255, .8); -webkit-app-region: drag; app-region: drag; }
}
.world { position: fixed; left: 0; right: 0; top: var(--top); bottom: 0; width: 100%; height: calc(100% - var(--top)); border: 0; display: block; background: var(--night); }

/* ---------------------------------------------------------------- the ride while it loads */
.load { position: fixed; inset: 0; z-index: 5; display: grid; place-content: center; justify-items: center; gap: 10px; background: #cfdcf3 url(/media/landing/ride-fly.webp) center / cover; transition: opacity .9s var(--ease), visibility 0s linear .9s; }
.load.gone { opacity: 0; visibility: hidden; }
.load-film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.load-shade { position: absolute; inset: 0; z-index: -1; background: radial-gradient(70% 60% at 50% 50%, rgba(7, 14, 42, .45), rgba(7, 14, 42, .1) 70%), linear-gradient(to top, rgba(7, 14, 42, .5), rgba(7, 14, 42, 0) 40%); }
.load-dial { width: clamp(150px, 22vmin, 230px); filter: drop-shadow(0 18px 26px rgba(5, 12, 36, .45)); }
.load-dial svg { width: 100%; height: auto; display: block; overflow: visible; }
.ticks line { stroke: #f2dca6; stroke-linecap: round; opacity: .6; }
.ticks text { font: 700 13px/1 var(--display); fill: #f2dca6; opacity: .5; text-anchor: middle; dominant-baseline: central; transition: opacity .4s, fill .4s; }
.ticks text.on { opacity: 1; fill: var(--lamp); filter: url(#lamp); }
.needle { transform-box: view-box; transform-origin: 130px 134px; transform: rotate(var(--a, -80deg)); transition: transform 1.4s var(--ease); }
.load.arrived .needle { transition: transform 1.1s var(--spring); }
.load-plate { display: flex; align-items: baseline; gap: 10px; padding: 9px 18px 10px; border-radius: 13px; background: linear-gradient(#13245c, #0b1636); box-shadow: inset 0 0 0 1.5px #c99a4a, inset 0 2px 0 rgba(255, 240, 200, .25), 0 14px 30px -12px rgba(5, 12, 36, .6); }
.load-plate b { font: 800 18px/1 var(--display); color: #f2dca6; }
.load-plate span { font: 700 18px/1 var(--display); color: var(--lamp); text-shadow: 0 0 10px rgba(255, 200, 110, .6); }
.load-status { margin: 4px 0 0; font: 600 15px/1.2 var(--display); color: rgba(255, 255, 255, .92); text-shadow: 0 1px 10px rgba(5, 12, 36, .6); min-height: 1.2em; }
.load.arrived .load-plate { animation: ding .7s var(--spring); }
@keyframes ding { 40% { transform: scale(1.06); box-shadow: inset 0 0 0 1.5px #ffd88a, 0 0 34px rgba(255, 200, 110, .8); } }

/* ---------------------------------------------------------------- turn your phone */
.turn, .fail { position: fixed; inset: 0; z-index: 8; display: grid; place-items: center; padding: 24px; background: rgba(7, 14, 42, .82); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.turn-card { display: grid; justify-items: center; gap: 14px; max-width: 340px; text-align: center; }
.turn-card h1 { margin: 0; font: 800 30px/1.05 var(--display); letter-spacing: -.02em; }
.turn-phone { width: 140px; height: 140px; }
.turn-arc { stroke: var(--lamp); opacity: .9; }
.turn-device { transform-box: view-box; transform-origin: 60px 62px; animation: turn 2.6s var(--ease) infinite; }
@keyframes turn { 0%, 18% { transform: rotate(0); } 50%, 78% { transform: rotate(-90deg); } 100% { transform: rotate(0); } }
/* like a real app, the logo turns upright once the phone lies down */
.turn-logo { transform-box: view-box; transform-origin: 60px 61.5px; animation: upright 2.6s var(--ease) infinite; }
@keyframes upright { 0%, 50% { transform: rotate(0); } 62%, 78% { transform: rotate(90deg); } 100% { transform: rotate(0); } }
.turn-hint { margin: 0; font: 600 16px/1.35 var(--display); color: rgba(255, 255, 255, .85); }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 0 24px; border: 0; border-radius: 16px; background: rgba(242, 246, 254, .14); color: #fff; font: 700 17px/1 var(--display); text-decoration: none; cursor: pointer; }
.btn.primary { background: var(--primary); box-shadow: 0 12px 26px -12px rgba(31, 92, 255, .9); }
.fail-btns { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }

/* ---------------------------------------------------------------- the Wondo button */
.w { position: fixed; z-index: 7; left: max(12px, env(safe-area-inset-left)); top: calc(var(--top) + max(12px, env(safe-area-inset-top))); }
.w-btn { width: 44px; height: 44px; border: 0; border-radius: 14px; display: grid; place-items: center; cursor: pointer; background: linear-gradient(150deg, #3d78ff, #1f5cff 55%, #1747d6);
  box-shadow: 0 8px 20px -8px rgba(31, 92, 255, .8), inset 0 1px 0 rgba(255, 255, 255, .35); opacity: .92; transition: opacity .2s, transform .15s; }
.w-btn:hover, .w-btn[aria-expanded="true"] { opacity: 1; }
.w-btn:active { transform: scale(.95); }
.w-btn svg { width: 30px; height: 30px; }
.w-menu { position: absolute; left: 0; top: 52px; min-width: 200px; display: grid; gap: 2px; padding: 6px; border-radius: 18px; background: rgba(242, 246, 254, .96); color: #0e1a3a;
  box-shadow: 0 24px 50px -20px rgba(5, 12, 36, .7); animation: pop .3s var(--spring); transform-origin: 0 0; }
.w-menu a, .w-menu button { display: flex; align-items: center; min-height: 46px; padding: 0 14px; border: 0; border-radius: 12px; background: none; color: inherit; font: 700 16px/1 var(--display); text-decoration: none; text-align: left; cursor: pointer; }
.w-menu a:hover, .w-menu button:hover { background: rgba(31, 92, 255, .1); }
@keyframes pop { from { opacity: 0; transform: scale(.92); } }

@media (prefers-reduced-motion: reduce) {
  .needle, .load { transition: none; }
  .turn-device, .turn-logo, .load.arrived .load-plate, .w-menu { animation: none; }
}