/* The animation a Step's setup screen plays (onboarding/_setup,
   onboarding/_animation, OnboardingAnimations): one idea in four scenes -- many generic options, and a
   sparkle keeping the few that fit. The website's checks narrowed from a
   spread of tiles; a separate route drawn to each inbox; a form filled in and
   sent while each kind of check it gets ticks off; a cloud of alerts thinned to
   the few that reach a phone.

   THE SAME FOR EVERY USER. Nothing in the drawing reads the Account, so the
   personal feel is carried by the motion alone. A version drawing each User's
   own website, addresses and Form names was built and rejected: it could only
   look as good as their data.

   Every scene settles inside the two seconds a setup screen holds (form.md B-29), the
   last tick landing at about 1.8s. Every animation fills `both` and ENDS on
   the settled picture, because application.css's reduced-motion rule cuts
   each one to zero length and leaves exactly that end on screen -- and
   `.still` below does the same for a screen showing the art while its
   Switches are disabled.

   Folded in from the onboarding-animations UI prototype (2026-10-16..18,
   .claude/skills/prototype/UI.md) -- won out over the node, wire and card the
   form's setup screen drew before (form.md B-29's first picture) and over the
   per-User `tailored` art; the full set stays on the throwaway branch
   prototype/onboarding-animations, and the reasoning is in
   .scratch/onboarding-animations/README.md. */
.onboarding {
  .setup {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    place-items: center;
    padding: 2.5rem 1rem;
  }

  .animation {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    max-width: 100%;

    .spark,
    .hub,
    .reader { color: var(--color-accent); line-height: 0; }

    /* Every scene's tick: a green dot that lands last. */
    .ok {
      display: grid;
      place-items: center;
      border-radius: 999px;
      background: var(--color-pass);
      color: var(--color-on-accent);
    }

    /* The settled picture with no motion: what reduced motion leaves on
       screen, for the form's setup screen while its Switches are disabled. */
    &.still,
    &.still * {
      animation-duration: 0s !important;
      animation-delay: 0s !important;
      animation-iteration-count: 1 !important;
    }

    /* ---- Website */
    .browser {
      width: 10rem;
      border: 1px solid var(--card-border);
      border-radius: 0.6rem;
      background: var(--card-surface);
      box-shadow: var(--color-warm-shadow);
      overflow: hidden;

      .bar {
        display: flex;
        align-items: center;
        gap: 0.2rem;
        padding: 0.4rem 0.6rem;
        border-bottom: 1px solid var(--card-border);

        .dot { width: 0.35rem; height: 0.35rem; border-radius: 999px; background: var(--color-border); }
        .address { flex: 1; height: 0.55rem; margin-left: 0.3rem; border-radius: 999px; background: var(--color-bg); }
      }

      .page {
        position: relative;
        display: grid;
        gap: 0.4rem;
        padding: 0.6rem;
      }

      .block {
        height: 0.45rem;
        border-radius: 0.2rem;
        background: var(--color-border);

        &.banner { height: 1.8rem; background: var(--color-warm-border); }
        &.short { width: 60%; }

        &.cols {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 0.4rem;
          height: 1.6rem;
          background: none;

          span { border-radius: 0.2rem; background: var(--color-border); }
        }
      }

      .sweep {
        position: absolute;
        inset: 0 0 auto;
        height: 1.4rem;
        background: linear-gradient(180deg, transparent, rgba(181, 101, 43, 0.2), transparent);
        animation: onboarding-animation-sweep 1s ease-in-out 0.11s both;

        .spark { position: absolute; right: 0.3rem; top: 0.25rem; }
      }
    }

    .tiles {
      display: grid;
      grid-template-columns: repeat(3, 2.4rem);
      gap: 0.5rem;
    }

    .tile {
      position: relative;
      display: grid;
      place-items: center;
      height: 2.4rem;
      border: 1px solid var(--card-border);
      border-radius: 0.55rem;
      background: var(--card-surface);
      color: var(--color-text-muted);

      /* The ones that do not suit fall back first, then the ones that do
         light up one after another, each taking its tick. */
      &.skip { animation: onboarding-animation-fade 0.22s ease-out calc(0.77s + var(--i) * 0.028s) both; }
      &.fit { animation: onboarding-animation-choose 0.193s ease-out calc(0.99s + var(--i) * 0.066s) both; }

      .ok {
        position: absolute;
        top: -0.35rem;
        right: -0.35rem;
        width: 0.95rem;
        height: 0.95rem;
        animation: onboarding-animation-pop 0.138s ease-out calc(1.1s + var(--i) * 0.066s) both;
      }
    }

    /* ---- Email */
    &.animation--email { flex-wrap: nowrap; gap: 0; }

    .hub {
      display: grid;
      place-items: center;
      width: 2.6rem;
      height: 2.6rem;
      border-radius: 999px;
      background: var(--color-accent-bg);
      animation: onboarding-animation-glow 2s ease-in-out 1 both;
    }

    .routes {
      width: 4.5rem;
      height: 9rem;
      overflow: visible;

      path {
        fill: none;
        stroke: var(--color-accent);
        stroke-width: 2;
        stroke-linecap: round;
        stroke-dasharray: 130;
        vector-effect: non-scaling-stroke;
        animation: onboarding-animation-draw 0.33s ease-in-out calc(0.165s + var(--i) * 0.385s) both;
      }
    }

    .inboxes {
      display: grid;
      gap: 0.6rem;
    }

    .inbox {
      position: relative;
      display: flex;
      align-items: center;
      gap: 0.5rem;
      width: 9rem;
      height: 2.6rem;
      padding: 0 0.6rem;
      border: 1px solid var(--card-border);
      border-radius: 0.6rem;
      background: var(--card-surface);
      box-shadow: var(--color-warm-shadow);
      animation: onboarding-animation-lift 0.193s ease-out calc(0.44s + var(--i) * 0.385s) both;

      .envelope { color: var(--color-accent); line-height: 0; }

      .lines {
        display: grid;
        flex: 1;
        gap: 0.3rem;

        span { height: 0.4rem; border-radius: 0.2rem; background: var(--color-border); }
        span + span { width: 60%; }
      }

      .ok { width: 1.05rem; height: 1.05rem; animation: onboarding-animation-pop 0.138s ease-out calc(0.522s + var(--i) * 0.385s) both; }

      /* Each inbox's lines differ, so no two read as the same one. */
      &:nth-child(2) .lines span + span { width: 40%; }
      &:nth-child(3) .lines span + span { width: 75%; }
    }

    /* ---- Form: labelled boxes typed into by the sparkle, a send that flies
       off, and one row per kind of check ticking as the form reaches it. */
    .paper {
      position: relative;
      display: grid;
      gap: 0.3rem;
      width: 11rem;
      padding: 0.9rem;
      border: 1px solid var(--card-border);
      border-radius: 0.6rem;
      background: var(--card-surface);
      box-shadow: var(--color-warm-shadow);

      .label {
        width: 35%;
        height: 0.35rem;
        margin-top: 0.3rem;
        border-radius: 0.2rem;
        background: var(--color-warm-border-strong);

        &:first-child { margin-top: 0; }
      }

      .input {
        --at: calc(0.1s + var(--i) * 0.333s);
        position: relative;
        display: flex;
        align-items: center;
        gap: 0.3rem;
        height: 1.35rem;
        padding: 0 0.4rem;
        border: 1px solid var(--color-warm-border-strong);
        border-radius: 0.3rem;
        background: var(--color-surface);
        color: var(--color-text-muted);
        animation: onboarding-animation-focus 0.333s ease-out var(--at) both;

        /* What gets typed: a bar that grows in steps, as letters would. */
        .typed {
          display: block;
          width: 55%;
          height: 0.35rem;
          border-radius: 0.2rem;
          background: var(--color-text-muted);
          transform-origin: left;
          animation: onboarding-animation-type 0.333s steps(6, end) var(--at) both;
        }

        .caret {
          width: 1px;
          height: 0.7rem;
          background: var(--color-accent);
          opacity: 0;
          animation: onboarding-animation-caret 0.333s step-end var(--at) both;
        }

        &:nth-of-type(4) .typed { width: 70%; }

        &.area {
          flex-wrap: wrap;
          align-content: flex-start;
          height: 2.4rem;
          padding-top: 0.4rem;

          /* Two lines share the message box's one slot. */
          .typed {
            width: 85%;
            animation-duration: 0.167s;

            &.second { width: 50%; animation-delay: calc(var(--at) + 0.167s); }
          }

          .caret { display: none; }
        }
      }

      .send {
        display: inline-flex;
        align-items: center;
        gap: 0.3rem;
        width: max-content;
        margin-top: 0.4rem;
        padding: 0.3rem 0.6rem;
        border-radius: 0.3rem;
        background: var(--color-accent);
        color: var(--color-on-accent);
        animation: onboarding-animation-press 0.193s ease-in-out 1.15s both;

        span { width: 1.6rem; height: 0.3rem; border-radius: 0.2rem; background: rgba(255, 255, 255, 0.7); }
      }

      .plane {
        position: absolute;
        left: 5.2rem;
        bottom: 0.9rem;
        color: var(--color-accent);
        opacity: 0;
        animation: onboarding-animation-fly 0.385s ease-in 1.25s both;
      }

      .reader {
        position: absolute;
        right: 0.45rem;
        top: 0.9rem;
        animation: onboarding-animation-read 1s ease-in-out 0.1s both;
      }
    }

    .checks {
      display: grid;
      gap: 0.5rem;
    }

    .check {
      position: relative;
      display: flex;
      align-items: center;
      gap: 0.5rem;
      width: 8.5rem;
      padding: 0.4rem 0.5rem;
      border: 1px solid var(--card-border);
      border-radius: 0.55rem;
      background: var(--card-surface);
      animation: onboarding-animation-lift 0.165s ease-out var(--done) both;

      /* When each kind ticks: the page as the form is reached, the fields
         once they are read, sending once it has flown, what sending does last. */
      &.check-0 { --done: 0.22s; }
      &.check-1 { --done: 1.1s; }
      &.check-2 { --done: 1.5s; }
      &.check-3 { --done: 1.7s; }

      .icon { color: var(--color-text-muted); line-height: 0; animation: onboarding-animation-tint 0.165s ease-out var(--done) both; }

      .lines {
        display: grid;
        flex: 1;
        gap: 0.2rem;

        span { height: 0.3rem; border-radius: 0.2rem; background: var(--color-border); }
        span + span { width: 55%; }
      }

      .ok { width: 1rem; height: 1rem; animation: onboarding-animation-pop 0.138s ease-out var(--done) both; }
    }

    /* ---- Notifications */
    .cloud {
      position: relative;
      width: 9rem;
      height: 9rem;

      .bubble {
        position: absolute;
        display: grid;
        place-items: center;
        width: 2rem;
        height: 2rem;
        border: 1px solid var(--card-border);
        border-radius: 999px;
        background: var(--card-surface);
        color: var(--color-text-muted);
        box-shadow: var(--color-warm-shadow);

        &.b0 { left: 0.2rem; top: 0.4rem; }
        &.b1 { left: 3.4rem; top: 0; }
        &.b2 { left: 6.6rem; top: 0.8rem; }
        &.b3 { left: 1.4rem; top: 3.4rem; }
        &.b4 { left: 4.8rem; top: 3.2rem; }
        &.b5 { left: 0; top: 6.6rem; }
        &.b6 { left: 3.4rem; top: 6.4rem; }
        &.b7 { left: 6.8rem; top: 6rem; }

        &.drop { animation: onboarding-animation-fade 0.22s ease-out calc(0.66s + var(--i) * 0.033s) both; }
        &.keep { animation: onboarding-animation-choose 0.193s ease-out calc(0.88s + var(--i) * 0.044s) both; }
      }

      .sweep {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        width: 1.4rem;
        background: linear-gradient(90deg, transparent, rgba(181, 101, 43, 0.2), transparent);
        animation: onboarding-animation-across 1s ease-in-out 0.055s both;

        .spark { position: absolute; top: 45%; left: 0.1rem; }
      }
    }

    .phone {
      display: grid;
      align-content: start;
      gap: 0.4rem;
      width: 7rem;
      height: 10.5rem;
      padding: 0.8rem 0.5rem;
      border: 1px solid var(--card-border);
      border-radius: 1.2rem;
      background: var(--card-surface);
      box-shadow: var(--color-warm-shadow);

      .notch { justify-self: center; width: 2rem; height: 0.3rem; margin-bottom: 0.2rem; border-radius: 999px; background: var(--color-border); }

      .notice {
        display: flex;
        align-items: center;
        gap: 0.4rem;
        padding: 0.4rem;
        border-radius: 0.5rem;
        background: var(--color-bg);
        animation: onboarding-animation-drop 0.22s ease-out calc(1.155s + var(--i) * 0.193s) both;

        .icon { color: var(--color-accent); line-height: 0; }

        .lines {
          display: grid;
          flex: 1;
          gap: 0.2rem;

          span { height: 0.3rem; border-radius: 0.2rem; background: var(--color-border); }
          span + span { width: 60%; }
        }
      }
    }
  }

  /* While the form's fresh look is on its way (onboarding/forms/setups), the
     sparkle keeps reading and nothing is sent or ticked past the fields.
     Taking `.waiting` away starts those held animations from their own
     delays, so the two seconds the screen holds after that still show them
     land. */
  .form-setup.waiting .animation {
    .reader { animation-iteration-count: infinite; }

    .send,
    .plane,
    .check-2,
    .check-3,
    .check-2 .icon,
    .check-3 .icon {
      animation: none;
    }

    .check-2 .ok,
    .check-3 .ok { animation: none; opacity: 0; }
  }
}

@keyframes onboarding-animation-sweep {
  0% { opacity: 0; transform: translateY(0); }
  10%, 85% { opacity: 1; }
  100% { opacity: 0; transform: translateY(6.5rem); }
}

@keyframes onboarding-animation-across {
  0% { opacity: 0; transform: translateX(0); }
  10%, 85% { opacity: 1; }
  100% { opacity: 0; transform: translateX(8rem); }
}

@keyframes onboarding-animation-fade {
  to { opacity: 0.25; transform: scale(0.85); }
}

@keyframes onboarding-animation-choose {
  0% { transform: scale(1); }
  50% { transform: scale(1.12); }
  100% {
    transform: scale(1);
    border-color: var(--color-accent);
    background: var(--color-accent-bg);
    color: var(--color-accent);
  }
}

@keyframes onboarding-animation-pop {
  from { opacity: 0; transform: scale(0); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes onboarding-animation-lift {
  from { border-color: var(--card-border); }
  to { border-color: var(--color-warm-border-strong); }
}

@keyframes onboarding-animation-draw {
  from { stroke-dashoffset: 130; }
  to { stroke-dashoffset: 0; }
}

@keyframes onboarding-animation-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(181, 101, 43, 0.35); }
  50% { box-shadow: 0 0 0 0.5rem rgba(181, 101, 43, 0); }
}

@keyframes onboarding-animation-read {
  0% { opacity: 0; transform: translateY(0); }
  10% { opacity: 1; }
  33% { transform: translateY(1.95rem); }
  66% { transform: translateY(3.9rem); }
  90% { opacity: 1; }
  100% { opacity: 0; transform: translateY(5.6rem); }
}

@keyframes onboarding-animation-focus {
  0% { box-shadow: 0 0 0 0 transparent; }
  30%, 80% { border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent-bg); }
  100% { border-color: var(--color-warm-border-strong); box-shadow: 0 0 0 0 transparent; }
}

@keyframes onboarding-animation-type {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@keyframes onboarding-animation-caret {
  0%, 50% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes onboarding-animation-fly {
  0% { opacity: 0; transform: translate(0, 0) rotate(0); }
  15% { opacity: 1; }
  100% { opacity: 0; transform: translate(9rem, -2.5rem) rotate(-15deg); }
}

@keyframes onboarding-animation-tint {
  to { color: var(--color-pass); }
}

@keyframes onboarding-animation-press {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(0.92); }
}

@keyframes onboarding-animation-drop {
  from { opacity: 0; transform: translateY(-0.6rem); }
  to { opacity: 1; transform: none; }
}