/* The splash and its family. Split from app.css at the size tripwire. */
.tapintro{position:absolute;inset:0;z-index:6;display:grid;place-items:center;
    background:var(--night);animation:introgo .75s ease 2.25s forwards}
/* a returning phone gets the stamp alone, briefly, over Discover itself */
  .tapintro.brief{animation:introgo .5s ease 1.1s forwards}
.tapintro .bandshot{width:76%;margin:0 auto;transform:translateY(var(--drop,0px)) rotate(-10deg)}
.tapintro .bandshot.intro-mark{transform:translateY(var(--drop,0px));text-align:center}
@keyframes introgo{to{opacity:0;visibility:hidden}}
.markwrap{position:relative;display:block;width:27%;max-width:104px;margin:0 auto}
.markhero{display:block;width:100%;height:auto;color:var(--white);
    filter:drop-shadow(0 10px 20px rgba(0,0,0,.4))}
.bandshot.intro-mark .pulse{display:none}
.bandshot.intro-mark .beadglow{display:none}
.herobrand{display:block;margin-top:18px;font-size:22px}
.introjp{display:block;margin-top:10px;font-family:var(--jp);font-weight:700;font-size:14px;
    color:rgba(255,255,255,.85);letter-spacing:.02em}
/* the home-screen ask: the app's own icon up front, so the sheet reads
   as an invitation from AroundMe, not a browser warning */
.a2hs{text-align:center}
.a2hs .appic{display:block;width:64px;height:64px;border-radius:14.5px;margin:2px auto 12px;
    border:1px solid var(--line);box-shadow:var(--card)}
.a2hs .steps{margin:14px auto 0;max-width:270px;text-align:left}
.a2hs .steps .prow{display:flex;align-items:center;gap:10px;padding:9px 0}
.a2hs .stepno{flex:0 0 auto;width:22px;height:22px;border-radius:50%;background:var(--bg-2);
    color:var(--accent);font-size:12.5px;font-weight:700;display:grid;place-items:center}
/* the welcome's street-at-night layer: two slow noun streams and a warm
   glow low in the frame. The pitch and the red Let's go stay put. */
.warmglow{position:absolute;left:-20%;right:-20%;bottom:-8%;height:55%;z-index:1;pointer-events:none;
    background:radial-gradient(ellipse at 50% 100%,rgba(255,146,62,.30),transparent 68%);
    animation:warmbreathe 7s ease-in-out infinite alternate}
@keyframes warmbreathe{from{opacity:.45}to{opacity:1}}
.ticker{flex:0 0 auto;margin:16px -24px 2px;overflow:hidden}
.tline{display:flex;white-space:nowrap;font-family:var(--disp);font-weight:800}
.tline span{flex:0 0 auto;animation:tickslide 30s linear infinite}
.t1{font-size:19px;color:var(--white);text-shadow:0 0 16px rgba(255,205,140,.35)}
.t2{font-size:14px;color:#e35258;text-shadow:0 0 14px rgba(195,33,38,.65);margin-top:6px}
.t2 span{animation-direction:reverse;animation-duration:38s}
@keyframes tickslide{to{transform:translateX(-100%)}}
@media (prefers-reduced-motion:reduce){.tline span,.warmglow{animation:none}}