/* ==========================================================================
   welcome.css — the opening screen, for everyone not signed in.

   No new tokens. The ground is the app's backdrop, the mark is the score
   ring's gradient round the assistant's glass orb, and the two buttons are
   cut from the same pane as the tab bar and sit exactly where it will be once
   you are in: the same width, the same height, the same distance from the
   bottom edge.
   ========================================================================== */

.welcome {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* A short landscape phone scrolls rather than clipping the buttons. */
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-top: var(--safe-top);
}

/* --------------------------------------------------------------------------
   The stage — mark, name, one line. Centred in the space above the buttons,
   a little high, where the eye lands first.
   -------------------------------------------------------------------------- */
.welcome__stage {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: var(--shell-w);
    /* More room under the block than over it lifts it to about 40% of the
       screen height on every phone. */
    padding-block: var(--space-6) clamp(var(--space-6), 16vh, 136px);
    text-align: center;
}

.welcome__mark {
    position: relative;
    display: grid;
    place-items: center;
    width: clamp(132px, 40vw, 168px);
    aspect-ratio: 1;
    margin-bottom: var(--space-6);
}

.welcome__ring {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    transform: rotate(-90deg);
    animation: welcome-turn 90s linear 1.6s infinite;
}

.welcome__track {
    fill: none;
    stroke: rgba(255, 255, 255, 0.07);
    stroke-width: 7;
}

/* Drawn in once, three quarters round — the score ring's gesture, without
   a score. 2 * PI * r (r = 68) = 427.26. */
.welcome__arc {
    fill: none;
    stroke: url(#welcomeGradient);
    stroke-width: 7;
    stroke-linecap: round;
    stroke-dasharray: 427.26;
    stroke-dashoffset: 106.8;
    animation: welcome-draw 1400ms var(--ease-out) 200ms both;
}

/* A light behind the glass, as on the assistant's orb. */
.welcome__glow {
    position: absolute;
    inset: -30%;
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(60, 158, 114, 0.18) 0%,
        rgba(60, 158, 114, 0.08) 28%,
        rgba(60, 158, 114, 0.02) 50%,
        transparent 72%);
}

.welcome__orb {
    position: absolute;
    inset: 21%;
    border-radius: 50%;
    background: radial-gradient(120% 120% at 30% 22%,
        rgba(255, 255, 255, 0.24) 0%,
        rgba(255, 255, 255, 0.09) 34%,
        rgba(255, 255, 255, 0.02) 62%,
        rgba(255, 255, 255, 0.06) 100%);
    border: 1px solid rgba(255, 255, 255, 0.16);
    -webkit-backdrop-filter: blur(14px) saturate(125%);
    backdrop-filter: blur(14px) saturate(125%);
    box-shadow:
        inset 0 2px 1px rgba(255, 255, 255, 0.24),
        inset 0 -20px 30px rgba(0, 0, 0, 0.20),
        0 20px 42px rgba(0, 0, 0, 0.28);
    animation: welcome-breathe 7s ease-in-out 1.6s infinite;
}

/* Specular sheen. */
.welcome__orb::after {
    content: "";
    position: absolute;
    inset: 9% 20% 54% 17%;
    border-radius: 50%;
    background: radial-gradient(ellipse at 42% 24%, rgba(255, 255, 255, 0.30), transparent 72%);
    filter: blur(3px);
}

.welcome__title {
    max-width: 100%;
    font-size: clamp(2.25rem, 10.5vw, 3rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.04em;
    overflow-wrap: anywhere;
}

.welcome__subtitle {
    max-width: 26ch;
    margin-top: var(--space-3);
    font-size: var(--fs-body);
    line-height: 1.45;
    color: var(--text-secondary);
}

/* --------------------------------------------------------------------------
   The two ways on — the tab bar's footprint, split in two.
   -------------------------------------------------------------------------- */
.welcome__actions {
    flex: none;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
    width: min(94vw, 27.5rem);
    margin-bottom: calc(var(--safe-bottom) + var(--dock-gap));
}

/* One pane of glass per button: the header buttons' recipe, at the tab
   bar's height. */
.welcome__button {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--tabbar-height);
    padding-inline: var(--space-4);
    border-radius: var(--radius-pill);
    background:
        linear-gradient(177deg,
            rgba(255, 255, 255, 0.115) 0%,
            rgba(255, 255, 255, 0.042) 46%,
            rgba(255, 255, 255, 0.06) 100%),
        rgba(30, 28, 29, 0.46);
    -webkit-backdrop-filter: blur(var(--pane-blur)) saturate(var(--pane-saturate)) brightness(var(--pane-brightness));
    backdrop-filter: blur(var(--pane-blur)) saturate(var(--pane-saturate)) brightness(var(--pane-brightness));
    box-shadow:
        0 12px 28px rgba(0, 0, 0, 0.34),
        inset 0 1px 0 rgba(255, 255, 255, 0.13);
    color: var(--text-primary);
    font-size: var(--fs-body);
    font-weight: 600;
    letter-spacing: -0.01em;
    white-space: nowrap;
}

/* The primary way on for somebody new takes the app's own green — the same
   tint as the goal wizard's next step. */
.welcome__button--primary {
    background:
        linear-gradient(177deg,
            rgba(255, 255, 255, 0.13) 0%,
            rgba(255, 255, 255, 0.045) 46%,
            rgba(255, 255, 255, 0.06) 100%),
        linear-gradient(180deg,
            rgba(60, 158, 114, 0.30) 0%,
            rgba(60, 158, 114, 0.18) 100%),
        rgba(30, 28, 29, 0.46);
}

/* The rim: a hairline that catches the light, as on the tab bar. */
.welcome__button::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    padding: 1px;
    background: var(--pane-rim);
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    mask-composite: exclude;
    pointer-events: none;
}

.welcome__button:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.55);
    outline-offset: 3px;
    border-radius: var(--radius-pill);
}

/* --------------------------------------------------------------------------
   Arrival — the name and the buttons settle in once, the ring draws itself.
   The theme's reduced-motion rule turns all of it off.
   -------------------------------------------------------------------------- */
.welcome__mark,
.welcome__title,
.welcome__subtitle,
.welcome__actions {
    animation: welcome-rise 700ms var(--ease-out) both;
}

.welcome__title { animation-delay: 90ms; }
.welcome__subtitle { animation-delay: 160ms; }
.welcome__actions { animation-delay: 260ms; }

@keyframes welcome-rise {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: none; }
}

@keyframes welcome-draw {
    from { stroke-dashoffset: 427.26; }
    to { stroke-dashoffset: 106.8; }
}

@keyframes welcome-turn {
    from { transform: rotate(-90deg); }
    to { transform: rotate(270deg); }
}

@keyframes welcome-breathe {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.035); }
}

/* --------------------------------------------------------------------------
   Short screens — a phone on its side keeps everything, a little tighter.
   -------------------------------------------------------------------------- */
@media (max-height: 560px) {
    .welcome__stage { padding-block: var(--space-5); }
    .welcome__mark { width: 104px; margin-bottom: var(--space-4); }
}