/* styles/intro.css -- the onboarding intro (Max's handoff of 15 Oct 2026,
   `docs design/onboarding-intro/`): what only screens/intro.js draws. Every
   class here is `ix-*`. Sizes, colours and the timeline are the handoff's
   references (`reference/Intro*.html`, 390 x 844); the colours with an owner
   are its tokens (`--ws-*`, `--accent-*`, `--ink`, `--line`), and the
   phases' are read in the script (`PROG_PHASE_COLOUR`).

   ⚠ A PART'S RESTING STYLE IS ITS END STATE. An animation only says where
   it comes from (its `from`, or a last frame equal to the rest), so with no
   animation -- reduced motion, or a page already played (`ix-done`) --
   every picture is finished. A page waiting to arrive holds every part at
   its start (`ix-wait`: paused, `both` fills the delay with the start). */

/* ---- the shell: the whole glass, nothing scrolls ---------------------- */
body.intromode { height: 100vh; height: 100dvh; padding: 0; overflow: hidden;
                 overscroll-behavior: none; }
body.intromode #app { height: 100%; }
.ix { position: relative; height: 100%; display: flex; flex-direction: column;
      overflow: hidden; touch-action: none; -webkit-user-select: none;
      user-select: none; }
.ix-port { position: relative; flex: 1 1 0; min-height: 0; overflow: hidden; }
.ix-track { display: flex; height: 100%; will-change: transform; }
.ix-page { position: relative; flex: 0 0 100%; min-width: 0; height: 100%;
           display: flex; flex-direction: column; overflow: hidden;
           padding-bottom: 14px; }
.ix-page > * { flex: none; }
.ix-top { position: relative; z-index: 2; display: flex; align-items: center;
          justify-content: space-between; min-height: 44px;
          padding: calc(14px + env(safe-area-inset-top)) 16px 0 26px; }
button.ix-skip { width: auto; min-height: 44px; margin: 0; padding: 0 8px; border: 0;
                 background: none; color: var(--dim); font-size: 15px;
                 font-weight: 600; }
.ix-vis { position: relative; z-index: 1; flex: 0 1 auto; min-height: 0;
          display: flex; justify-content: center; align-items: flex-start;
          box-sizing: border-box; }
.ix-art { position: relative; flex: none; transform-origin: 50% 0; }
.ix-art > svg { position: relative; z-index: 1; display: block; overflow: visible; }
.ix-text { position: relative; z-index: 1; display: flex;
           flex-direction: column; gap: 12px; padding: 0 24px; }
.ix-text > * { margin: 0; }
.ix-center { align-items: center; text-align: center; }
.ix-h1 { font-size: 36px; font-weight: 800; line-height: 1.08;
         letter-spacing: -.01em; }
.ix-h2 { font-size: 31px; font-weight: 800; line-height: 1.12;
         letter-spacing: -.01em; }
.ix-h2sm { font-size: 30px; }
.ix-p { color: var(--c-ink-2); font-size: 16.5px; line-height: 1.5; }
.ix-p b { color: var(--ink); }
.ix-psm { font-size: 15.5px; line-height: 1.45; }
.ix-p2 .ix-text { gap: 14px; }

/* ---- the foot: dots, THE button, page 1's link ------------------------ */
.ix-foot { flex: none; display: flex; flex-direction: column;
           align-items: center; gap: 14px;
           padding: 0 20px calc(26px + env(safe-area-inset-bottom)); }
.ix-dots { display: flex; gap: 6px; }
.ix-dot { width: 6px; height: 6px; border-radius: 3px; background: #2c3f57;
          transition: width .25s ease, background-color .25s ease; }
.ix-dot.on { width: 22px; background: var(--accent-bright); }
.ix-foot button.ix-go { min-height: 58px; border-radius: 18px;
                        box-shadow: 0 10px 24px rgba(20, 120, 204, .35); }
.ix-foot button.ix-go svg { width: 18px; height: 18px; fill: none;
                            stroke: currentColor; stroke-width: 2.4;
                            stroke-linecap: round; stroke-linejoin: round; }
.ix-foot button.ix-login { align-self: center; justify-content: center;
                           color: var(--accent-soft); font-size: 15px; }
.ix-foot button.ix-login.ix-off { visibility: hidden; }

/* ---- page 1: the vision (2026-11-06, the Vision handoff A1) ----------
   WAS the court, the logo, the welcome and the seven bars. Your photo fills
   the top and fades into the page (220 px to the page's black); the words
   sit at the bottom, left aligned, 24 px in (vision.css draws them). */
.ix-photo { position: absolute; z-index: 0; left: 0; right: 0; top: 0;
            bottom: 38%; display: flex; align-items: center;
            justify-content: center;
            background: repeating-linear-gradient(135deg, #10161f 0 14px,
                        #0c1118 14px 28px); }
.ix-photo::after { content: ""; position: absolute; left: 0; right: 0;
                   bottom: 0; height: 220px;
                   background: linear-gradient(to bottom, transparent,
                                               #050607); }
.ix-photo span { font-size: 11px; font-weight: 800; letter-spacing: .14em;
                 text-transform: uppercase; color: var(--quiet); }
.ix-p1 .ix-vis { flex: 1 1 0; }
.ix-spacer { width: 1px; height: 1px; }
.ix-vtext { gap: 14px; }
.ix-vwords { display: flex; flex-direction: column; gap: 10px; }

/* ---- page 2: the road ------------------------------------------------- */
.ix-p2::before { content: ""; position: absolute; inset: 0; z-index: 0;
                 pointer-events: none;
                 background: radial-gradient(70% 30% at 80% 12%,
                   rgba(240, 185, 90, .12), rgba(240, 185, 90, 0) 70%); }
.ix-road { width: 320px; height: 338px; }
.ix-way { fill: none; stroke: var(--line); stroke-width: 5;
          stroke-linecap: round; stroke-dasharray: 520; }
.ix-halo { fill: none; stroke: rgba(47, 138, 224, .35); stroke-width: 6; }
.ix-stop { fill: #0d1420; stroke-width: 3; }
.ix-stop.ix-rest { stroke: var(--ok); stroke-dasharray: 4 3; }
.ix-cup { fill: rgba(240, 185, 90, .18); stroke: var(--comp); stroke-width: 3; }
.ix-cupring { fill: none; stroke: rgba(240, 185, 90, .25); stroke-width: 6; }
.ix-cupico { fill: none; stroke: var(--comp); stroke-width: 2.2;
             stroke-linecap: round; stroke-linejoin: round; }
.ix-labels { font-size: 11px; font-weight: 800; letter-spacing: 1.5px; }

/* ---- page 3: the week and the lift ------------------------------------ */
.ix-wk { width: 350px; display: flex; flex-direction: column; gap: 14px; }
.ix-wkcard { display: flex; flex-direction: column; gap: 10px;
             padding: 14px 12px; border-radius: 22px;
             border: 1px solid var(--line); background: var(--card-fill);
             box-shadow: var(--card-lift); }
.ix-wkrow { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
            gap: 6px; }
.ix-wkdays { color: #848e9d; font-size: 12px; font-weight: 800;
             text-align: center; }
.ix-wktiles { height: 64px; }
.ix-tile { border-radius: 10px; }
.ix-free { border: 1.5px dashed #2c3f57; }
.ix-restday { display: flex; align-items: center; justify-content: center;
              border: 1.5px dashed color-mix(in srgb, var(--ws-mob) 50%,
                                             transparent);
              color: var(--ws-mob); font-size: 10px; font-weight: 800; }
.ix-wkbars > span { height: 5px; border-radius: 3px; }
.ix-wkbars > .ix-bar { background: var(--accent); }
.ix-key { display: flex; flex-wrap: wrap; gap: 6px 12px;
          color: var(--c-ink-2); font-size: 12px; font-weight: 700; }
.ix-key > span { display: flex; align-items: center; gap: 5px; }
.ix-key i { width: 8px; height: 8px; border-radius: 50%; }
.ix-key i.ix-keybar { width: 12px; height: 4px; border-radius: 2px;
                      background: var(--accent); }
.ix-lift { display: flex; align-items: center; gap: 14px;
           padding: 14px 16px; border-radius: 22px;
           border: 1px solid color-mix(in srgb, var(--ws-ex) 40%, transparent);
           background: radial-gradient(120% 90% at 100% 0%,
                         color-mix(in srgb, var(--ws-ex) 16%, transparent) 0%,
                         transparent 70%), var(--raised-fill); }
.ix-tick { width: 34px; height: 34px; flex: none; display: flex;
           align-items: center; justify-content: center; border-radius: 50%;
           background: var(--ok); color: #05140c; }
.ix-tick svg { width: 18px; height: 18px; fill: none; stroke: currentColor;
               stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.ix-liftw { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column;
            gap: 2px; }
.ix-liftw b { font-size: 15px; font-weight: 800; }
.ix-liftw span { color: var(--dim); font-size: 13px; }
.ix-next { display: flex; flex-direction: column; align-items: flex-end;
           gap: 2px; }
.ix-nextl { color: #848e9d; font-size: 11px; font-weight: 800;
            letter-spacing: .1em; }
.ix-kgs { position: relative; display: block; width: 82px; height: 30px; }
.ix-kg { position: absolute; right: 0; top: 0; font-size: 24px;
         font-weight: 800; line-height: 1.25; white-space: nowrap; }
.ix-kg small { font-size: 14px; }
/* 70 has gone and 72.5 stays: their end. */
.ix-was { color: var(--c-ink-2); opacity: 0; transform: translateY(-14px); }
.ix-now { color: #dce9a6; }

/* ---- page 4: the two lines and the plan ------------------------------- */
.ix-grow { width: 350px; height: 230px; }
.ix-feel { fill: none; stroke: #b9a6ff; stroke-width: 4;
           stroke-linecap: round; stroke-dasharray: 8 7; }
.ix-do { fill: none; stroke: var(--ws-ex); stroke-width: 4;
         stroke-linecap: round; stroke-dasharray: 420; }
/* The plan's glow: wide soft strokes under the line, not a filter (see
   `.ix-glow`). Rests at .6 of its flash. */
.ix-planglow { fill: none; stroke: var(--accent-bright); stroke-width: 16;
               stroke-linecap: round; stroke-opacity: .5; opacity: .6; }
.ix-plan { fill: none; stroke: var(--accent-soft); stroke-width: 6;
           stroke-linecap: round; stroke-dasharray: 420; }
.ix-meet { fill: var(--ink); }
.ix-lfeel { fill: #c4b5fd; }
.ix-ldo { fill: #dce9a6; }
.ix-lplan { fill: var(--accent-soft); }
.ix-grow .ix-labels { letter-spacing: 1.4px; }
.ix-eye { color: var(--accent-soft); font-size: 12px; font-weight: 800;
          letter-spacing: .16em; }
.ix-close { margin: auto 20px 0; padding: 16px 0 0;
            border-top: 1px solid rgba(140, 196, 245, .14);
            font-size: 20px; font-weight: 800; line-height: 1.25; }

/* ---- the timeline (§3 for page 1; the references for 2-4) ------------- */
@keyframes ix-rise { from { opacity: 0; transform: translateY(10px); } }
@keyframes ix-draw520 { from { stroke-dashoffset: 520; } }
@keyframes ix-draw420 { from { stroke-dashoffset: 420; } }
@keyframes ix-pop { from { opacity: 0; transform: scale(.3); } }
@keyframes ix-trophy { 0% { opacity: 0; transform: scale(.5); }
                       60% { opacity: 1; transform: scale(1.15); }
                       100% { opacity: 1; transform: scale(1); } }
@keyframes ix-snap { 0% { opacity: 0; transform: translateY(-26px) scale(.9); }
                     70% { opacity: 1; transform: translateY(3px) scale(1.02); }
                     100% { opacity: 1; transform: none; } }
@keyframes ix-out { from { opacity: 1; transform: none; } }
@keyframes ix-in { from { opacity: 0; transform: translateY(14px); } }
@keyframes ix-glowflash { 0% { opacity: 0; } 50% { opacity: 1; }
                          100% { opacity: .6; } }

.ix-a { animation-fill-mode: both; }
.ix-a.ix-t-rise { animation: ix-rise 500ms ease-out both; }
/* The words' delays: after the shorthand above, which resets them. */
.ix-a.ix-d0 { animation-delay: 200ms; }
.ix-a.ix-d1 { animation-delay: 300ms; }
.ix-a.ix-d2 { animation-delay: 450ms; }
.ix-a.ix-d3 { animation-delay: 550ms; }
.ix-a.ix-t-draw { animation: ix-draw520 900ms ease-out 100ms both; }
.ix-a.ix-t-today { animation: ix-pop 300ms ease-out 400ms both; }
.ix-a.ix-t-pop { animation: ix-pop 260ms ease-out both; }
.ix-a.ix-s1 { animation-delay: 500ms; }
.ix-a.ix-s2 { animation-delay: 580ms; }
.ix-a.ix-s3 { animation-delay: 660ms; }
.ix-a.ix-s4 { animation-delay: 740ms; }
.ix-a.ix-s5 { animation-delay: 820ms; }
.ix-a.ix-s6 { animation-delay: 900ms; }
.ix-a.ix-s7 { animation-delay: 980ms; }
.ix-a.ix-s8 { animation-delay: 1060ms; }
.ix-a.ix-s9 { animation-delay: 1140ms; }
.ix-a.ix-s10 { animation-delay: 1220ms; }
.ix-a.ix-t-trophy { animation: ix-trophy 600ms ease-out 1350ms both; }
.ix-a.ix-t-labels { animation: ix-rise 400ms ease-out 1500ms both; }
.ix-a.ix-t-snap { animation: ix-snap 420ms ease-out both; }
.ix-a.ix-n1 { animation-delay: 200ms; }
.ix-a.ix-n2 { animation-delay: 330ms; }
.ix-a.ix-n3 { animation-delay: 460ms; }
.ix-a.ix-n4 { animation-delay: 590ms; }
.ix-a.ix-n5 { animation-delay: 720ms; }
.ix-a.ix-t-key { animation: ix-rise 400ms ease-out 900ms both; }
.ix-a.ix-t-lift { animation: ix-rise 400ms ease-out 1100ms both; }
.ix-a.ix-t-out { animation: ix-out 300ms ease-in 1700ms both; }
.ix-a.ix-t-in { animation: ix-in 360ms ease-out 1900ms both; }
.ix-a.ix-t-march { animation: ix-draw420 1000ms ease-out 200ms both; }
.ix-a.ix-t-drawdo { animation: ix-draw420 1000ms ease-out 350ms both; }
.ix-a.ix-t-glow { animation: ix-glowflash 800ms ease-out 1300ms both; }
.ix-a.ix-t-drawplan { animation: ix-draw420 600ms ease-out 1300ms both; }
.ix-a.ix-t-meet { animation: ix-rise 300ms ease-out 1300ms both; }
.ix-a.ix-t-planlabel { animation: ix-rise 400ms ease-out 1600ms both; }
/* SVG parts scale and pop about their own centre. */
.ix-art svg .ix-a { transform-box: fill-box; transform-origin: center; }

/* Held at the start until the page arrives; at the end once played. */
.ix-wait .ix-a { animation-play-state: paused; }
.ix-done .ix-a { animation: none; }

/* ---- small phones (375 x 667): smaller words, the pictures shrink ------ */
@media (max-height: 700px) {
  .ix-top { padding-top: calc(6px + env(safe-area-inset-top)); }
  .ix-h1 { font-size: 30px; }
  .ix-h2 { font-size: 26px; }
  .ix-h2sm { font-size: 25px; }
  .ix-p { font-size: 15px; line-height: 1.42; }
  .ix-psm { font-size: 14px; line-height: 1.4; }
  .ix-text { gap: 9px; }
  .ix-page { padding-bottom: 10px; }
  .ix-close { padding-top: 12px; font-size: 18px; }
  .ix-foot { gap: 10px; padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
  .ix-foot button.ix-go { min-height: 52px; }
  .ix-foot button.ix-login { min-height: 40px; }
}

/* ---- reduced motion: every picture at its end, pages jump ------------- */
@media (prefers-reduced-motion: reduce) {
  .ix-a { animation: none !important; }
  .ix-track, .ix-dot { transition: none !important; }
}