/* RIPA brand: the launch splash and the sign-in screen use the start scene's own night picture (Bjorn 2026-11-09:
   the old green slope with the ptarmigan was an older picture). assets/ripa-signin-bg.webp is the phone scene and
   assets/ripa-signin-bg-wide.webp the desktop one, both rendered from src/start-scene.js without logo and buttons,
   so sign-in, intro and the iPhone launch screen are one world. White logo on the dark sky. */
:root { --ripa-sky-top:#212e5c; --ripa-sky-mid:#6b80b8; --ripa-sky-bottom:#ccd1eb; --ripa-ink:var(--g-ink); --ripa-ink-soft:var(--g-muted); }

html body .app-splash,
html body .auth-gate,
html body.vertex-v3 .auth-gate {
  background:
    url('/assets/ripa-signin-bg.webp') center bottom / cover no-repeat,
    linear-gradient(180deg, var(--ripa-sky-top) 0%, var(--ripa-sky-mid) 42.9%, var(--ripa-sky-bottom) 78%) !important;
  color:var(--ripa-ink);
}
@media (min-aspect-ratio:1/1) {
  html body .app-splash,
  html body .auth-gate,
  html body.vertex-v3 .auth-gate {
    background:
      url('/assets/ripa-signin-bg-wide.webp') center bottom / cover no-repeat,
      linear-gradient(180deg, #46578a 0%, var(--ripa-sky-mid) 26.7%, var(--ripa-sky-bottom) 71.8%) !important;
  }
}
html body .app-splash { place-items:start center; padding-top:max(22dvh, env(safe-area-inset-top)); }
html body .app-splash img,
html body .app-splash-brand img { width:min(52vw, 210px); filter:none; }
html body .app-splash-slogan { margin-top:14px; padding-top:0; color:var(--ripa-ink-soft); opacity:1; text-shadow:none;
  font:600 17px/1.3 var(--font-sans); letter-spacing:.01em; text-transform:none; }
html body .app-splash-slogan::before { display:none; }

/* Sign-in: the white wordmark sits in the night sky above the card. */
html body .auth-gate { place-items:start center; }
html body .auth-gate-shell { margin:max(8dvh, 12px) auto auto; }
html body .auth-gate-brand,
html body.vertex-v3 .auth-gate-brand { filter:none; }
html body .auth-gate-brand img,
html body.vertex-v3 .auth-gate-brand img { width:min(44vw, 170px) !important; }
html body .auth-gate-brand p { margin-top:4px; color:rgba(255,255,255,.86); font:600 15px/1.3 system-ui, -apple-system, "Segoe UI", sans-serif;
  letter-spacing:.01em; text-transform:none; }

/* Start page and desktop menu marks. */
.landing-logo img { display:block; height:26px; width:auto; }
@media (min-width:900px) {
  html body.vertex-v3 #app#app#app#app#app#app#app#app#app#app .desk-brand { width:40px; height:40px; border-radius:10px;
    background:url('/vertex-icon.svg') center / cover no-repeat; }
}

/* The app opens straight on the sign-in screen (Bjorn 2026-11-04: no start screen before it). While the account
   check runs the splash is only the sign-in picture: on phones it is see-through over the sign-in screen, whose card
   waits; on desktop (where the start page may come instead) it shows the picture itself, with no logo. */
html body .app-splash.ripa-start .app-splash-brand,
html body .app-splash.ripa-start .ripa-start-land { display:none!important; }
@media (max-width:899px) {
  html body .app-splash.ripa-start { background:transparent!important; }
  html body:not(.auth-synced) .auth-gate .auth-gate-card { visibility:hidden; }
}

/* Activity choice (Bjorn 2026-10-28), right after sign-in in the sign-in card. Ski is open; Bike and Hike are shown
   as coming. While it shows, the card holds nothing else. */
html body .auth-gate.choosing .auth-gate-card>:not(#activityChoice) { display:none!important; }
html body .auth-gate .ripa-start-choice { display:grid; gap:12px; min-width:0; }
html body .auth-gate .ripa-start-choice[hidden] { display:none!important; }
html body .auth-gate .ripa-start-choice .sign-in-sub { margin:0; }
html body .auth-gate .ripa-start-acts { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; width:100%; }
html body .auth-gate .ripa-start-acts button { display:grid; justify-items:center; align-content:center; gap:4px; min-height:88px; padding:10px 4px; border:1px solid var(--g-line); border-radius:14px;
  background:var(--g-surface); color:var(--g-ink); font-family:var(--font-sans); cursor:pointer; box-shadow:0 1px 2px #1b2a400d; -webkit-tap-highlight-color:transparent; transition:transform .12s ease, background .12s ease; }
html body .auth-gate .ripa-start-acts button:active:not(:disabled) { transform:scale(.97); background:var(--g-pressed); }
html body .auth-gate .ripa-start-acts button:focus-visible { outline:2px solid var(--g-accent); outline-offset:2px; }
html body .auth-gate .ripa-start-acts svg { width:38px; height:38px; fill:none; stroke:currentColor; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }
html body .auth-gate .ripa-start-acts b { font-size:16px; line-height:1.15; font-weight:600; }
html body .auth-gate .ripa-start-acts button:disabled { cursor:default; color:rgba(var(--g-ink-rgb),.5); background:var(--g-base); box-shadow:none; }
html body .auth-gate .ripa-start-acts small { font-size:11px; line-height:1.2; font-weight:500; color:var(--g-muted); }
/* Desktop: a wider card with bigger tiles that answer the mouse. */
@media (min-width:900px) {
  html body .auth-gate.choosing .auth-gate-card { width:min(560px, calc(100vw - 48px))!important; max-width:none!important; padding:24px!important; }
  html body .auth-gate.choosing .auth-gate-shell { width:auto!important; max-width:none!important; }
  html body .auth-gate .ripa-start-choice { gap:16px; }
  html body .auth-gate .ripa-start-acts { gap:14px; }
  html body .auth-gate .ripa-start-acts button { min-height:150px; gap:8px; }
  html body .auth-gate .ripa-start-acts svg { width:56px; height:56px; }
  html body .auth-gate .ripa-start-acts b { font-size:18px; }
  html body .auth-gate .ripa-start-acts small { font-size:12px; }
  html body .auth-gate .ripa-start-acts button:hover:not(:disabled) { border-color:var(--g-accent); box-shadow:0 6px 18px rgba(var(--g-shadow-rgb),.14); }
}

/* Opening the map after sign-in / Choose your activity: the picture stays as a cover (card gone) until
   the map is built and the opening flight starts, then fades out over the moving map (no hard cut). */
html body .auth-gate.gate-holding { pointer-events:none; }
html body .auth-gate.gate-holding .auth-gate-card { visibility:hidden; }
html body .auth-gate.gate-leaving { opacity:0; transition:opacity .5s cubic-bezier(.4,0,.2,1); }
@media (prefers-reduced-motion:reduce) { html body .auth-gate.gate-leaving { transition:none; } }

/* Activity choice on phones (Bjorn 2026-11-04): logo and card sit in the middle of the sky between the top of the
   screen and the ptarmigan. The picture is cover-scaled from the bottom, so the bird's head sits
   max(61vw, 27.7dvh) above the bottom edge; the padding keeps the card 14px clear of it. On short phones the top
   padding wins and the card stays where it was. */
@media (max-width:899px) {
  html body .auth-gate.choosing { display:flex!important; flex-direction:column; align-items:center;
    padding-top:max(env(safe-area-inset-top), 10dvh)!important;
    padding-bottom:calc(max(61vw, 27.7dvh) + 14px)!important; }
  html body .auth-gate.choosing .auth-gate-shell { margin:auto!important; }
}

/* Animated start screen on phones (src/start-scene.js): fills the gate, the card stays hidden behind it. */
html body .auth-gate .ripa-start-scene { position:fixed; inset:0; width:100%; height:100%; border:0; z-index:5; background:url(/assets/start/ski_first.webp) 50% 100%/100% auto no-repeat,linear-gradient(#212e5c 0%,#6b80b8 42.9%,#ccd1eb 78%,#ccd1eb 100%); display:block; }
html body .auth-gate.scene-on .auth-gate-card,
html body .auth-gate.scene-on .auth-gate-brand,
html body .auth-gate.scene-on .auth-gate-back { visibility:hidden; }
/* Signed in last time (inline script in index.html): splash and gate wait as the animation's first frame. */
html body.scene-start .app-splash,
html body.scene-start .auth-gate,
html body.scene-start .auth-gate .ripa-start-scene { background:url(/assets/start/ski_first.webp) 50% 100%/100% auto no-repeat,linear-gradient(#212e5c 0%,#6b80b8 42.9%,#ccd1eb 78%,#ccd1eb 100%)!important; }
@media (min-aspect-ratio:1/1){
  html body .auth-gate .ripa-start-scene,
  html body.scene-start .app-splash,
  html body.scene-start .auth-gate,
  html body.scene-start .auth-gate .ripa-start-scene { background:linear-gradient(#46578a 0%,#6b80b8 26.7%,#ccd1eb 71.8%,#ccd1eb 100%)!important; }
}
body:not(.scene-start) #ripaWaitWord { display:none; }   /* the name over the waiting sky (index.html), only while the start scene is coming */
html body.scene-start .auth-gate .auth-gate-brand,
html body.scene-start .auth-gate .auth-gate-card,
html body.scene-start .auth-gate .auth-gate-back { visibility:hidden; }