/* The connector's pages (connect.css) in motion, in ice. On the first page the cube and the tile
 * come in and the bridge freezes out from the cube; on each next step it freezes on from where
 * the last one left it (the page says which: data-grow, and the ice already there is drawn so),
 * a glint riding its front. A known app's frost melts the first time it shows. Allow closes the
 * bridge with a pulse of light before the form goes (connect.js, under 400 ms). Every piece plays
 * once and parks; nothing moves while nothing happens. With reduced motion none of it plays: the
 * final picture shows. The curve is spring-tokens.css's --ease-spring. */
:root {
  --cn-ease-spring: linear(
    0,
    0.0152,
    0.0551,
    0.1121,
    0.18,
    0.2541,
    0.3305,
    0.4065,
    0.48,
    0.5495,
    0.614,
    0.6729,
    0.726,
    0.7733,
    0.8148,
    0.8509,
    0.882,
    0.9084,
    0.9306,
    0.949,
    0.9642,
    0.9764,
    0.9861,
    0.9937,
    0.9995,
    1.0039,
    1.0069,
    1.009,
    1.0103,
    1.0109,
    1.0111,
    1.0109,
    1.0104,
    1.0098,
    1.009,
    1.0082,
    1.0073,
    1.0065,
    1.0057,
    1.0049,
    1.0042,
    1.0036,
    1.003,
    1.0025,
    1.002,
    1.0016,
    1.0013,
    1.001
  );

  --cn-grow: 1150ms;
  --cn-grow-delay: 80ms;
  --cn-rise-delay: 60ms;
}
[data-enter='first'] {
  --cn-grow: 1300ms;
  --cn-grow-delay: 420ms;
  --cn-rise-delay: 260ms;
}

@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }
  .cc-connect-scene {
    view-transition-name: cc-scene;
  }

  .cc-connect-eye {
    transition: translate 320ms var(--cn-ease-spring);
  }
  /* The first page: the cube and the tile come in from either side. */
  [data-enter='first'] .cc-connect-cube {
    --cn-in-x: -28px;
    animation: cn-in 820ms var(--cn-ease-spring) both;
  }
  [data-enter='first'] .cc-connect-tile {
    --cn-in-x: 28px;
    animation: cn-in 820ms var(--cn-ease-spring) 90ms both;
  }
  [data-enter='first'] :is(.cc-connect-tag, .cc-connect-ground, .cc-connect-lane) {
    animation: cn-fade-in 700ms ease-out 200ms both;
  }

  /* The ice freezes on; its glint rides the front, then settles on it as a star. On the landing
   * page the three bridges freeze one after another (--cn-stagger, connect-sizes.css). */
  .cc-connect-span {
    --cn-at: calc(var(--cn-grow-delay) + var(--cn-stagger, 0ms));
  }
  [data-grow] .cc-connect-reveal:not(.cc-connect-reveal--close) {
    animation: cn-freeze var(--cn-grow) var(--cn-ease-spring) var(--cn-at) both;
  }
  [data-grow] .cc-connect-reveal-end {
    animation: cn-hold 1ms calc(var(--cn-at) + var(--cn-grow)) backwards;
  }
  [data-grow] .cc-connect-spark {
    animation:
      cn-ride var(--cn-grow) var(--cn-ease-spring) var(--cn-at) both,
      cn-flash var(--cn-grow) linear var(--cn-at) both;
  }
  [data-grow] .cc-connect-tip-star {
    transform-box: fill-box;
    transform-origin: center;
    animation: cn-star 620ms var(--cn-ease-spring) calc(var(--cn-at) + var(--cn-grow) - 220ms) both;
  }

  /* A known app's frost melts away to its logo; the tile gives a little shake. */
  .cc-connect-tile[data-melt] {
    --cn-melt-delay: 560ms;
  }
  [data-step='ask'][data-grow] .cc-connect-tile[data-melt] {
    --cn-melt-delay: calc(var(--cn-grow-delay) + var(--cn-grow) * 0.7);
  }
  .cc-connect-tile[data-melt] .cc-connect-frost {
    animation: cn-melt 900ms var(--cn-ease-spring) var(--cn-melt-delay) both;
  }
  .cc-connect-tile[data-melt] :is(.cc-connect-logo, .cc-connect-initial) {
    animation: cn-clear 700ms var(--cn-ease-spring) var(--cn-melt-delay) both;
  }
  .cc-connect-scene:not([data-step='email']) .cc-connect-tile[data-melt] {
    animation: cn-wiggle 700ms ease-out calc(var(--cn-melt-delay) + 200ms) both;
  }
  [data-enter='first'] .cc-connect-scene:not([data-step='email']) .cc-connect-tile[data-melt] {
    animation:
      cn-in 820ms var(--cn-ease-spring) 90ms both,
      cn-wiggle 700ms ease-out calc(var(--cn-melt-delay) + 200ms) both;
  }

  /* What is under the picture rises in, a line at a time. */
  .cc-connect-panel > * {
    animation: cn-rise 620ms var(--cn-ease-spring) var(--cn-rise-delay) both;
  }
  .cc-connect-panel > :nth-child(2) {
    animation-delay: calc(var(--cn-rise-delay) + 60ms);
  }
  .cc-connect-panel > :nth-child(3) {
    animation-delay: calc(var(--cn-rise-delay) + 120ms);
  }
  .cc-connect-panel > :nth-child(n + 4) {
    animation-delay: calc(var(--cn-rise-delay) + 180ms);
  }
  [data-wrong] :is(.cc-connect-field, .cc-connect-code) {
    animation: cn-shake 480ms ease-out 160ms both;
  }

  /* Allow: the rest of the ice at once, a pulse of light across it, the tile answers. */
  [data-closing] .cc-connect-reveal--close {
    animation: cn-freeze 200ms ease-out both;
  }
  [data-closing] .cc-connect-pulse {
    animation: cn-pulse 330ms cubic-bezier(0.45, 0, 0.2, 1) 30ms both;
  }
  [data-closing] .cc-connect-ring {
    animation: cn-ring 260ms ease-out 140ms both;
  }
  [data-closing] .cc-connect-tile {
    animation: cn-bump 300ms var(--cn-ease-spring) 100ms both;
  }
}

/* Allow's end state, with or without the motion. */
[data-closing] .cc-connect-ice--closed {
  visibility: visible;
}
[data-closing] .cc-connect-reveal--close {
  stroke-dasharray: 1 2;
}
[data-closing]
  :is(.cc-connect-ice:not(.cc-connect-ice--closed), .cc-connect-tip, .cc-connect-lane) {
  visibility: hidden;
}

@keyframes cn-in {
  from {
    opacity: 0;
    translate: var(--cn-in-x) 0;
    scale: 0.9;
  }
}
@keyframes cn-fade-in {
  from {
    opacity: 0;
  }
}
@keyframes cn-freeze {
  from {
    stroke-dasharray: 0 2;
  }
}
@keyframes cn-hold {
  from {
    visibility: hidden;
  }
}
@keyframes cn-ride {
  from {
    stroke-dashoffset: 0;
  }
  to {
    stroke-dashoffset: -1;
  }
}
@keyframes cn-flash {
  0%,
  100% {
    opacity: 0;
  }
  6%,
  82% {
    opacity: 1;
  }
}
@keyframes cn-star {
  from {
    opacity: 0;
    scale: 0.2;
    rotate: -60deg;
  }
}
@keyframes cn-melt {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    scale: 1.06;
    filter: blur(3px);
  }
}
@keyframes cn-clear {
  from {
    opacity: 0.35;
    scale: 1.08;
    filter: blur(6px);
  }
}
@keyframes cn-wiggle {
  33% {
    rotate: -4deg;
  }
  66% {
    rotate: 2deg;
  }
}
@keyframes cn-rise {
  from {
    opacity: 0;
    translate: 0 14px;
    filter: blur(4px);
  }
}
@keyframes cn-shake {
  20%,
  60% {
    translate: -8px 0;
  }
  40%,
  80% {
    translate: 8px 0;
  }
}
@keyframes cn-pulse {
  0% {
    stroke-dashoffset: 0.16;
    opacity: 0;
  }
  12%,
  82% {
    opacity: 1;
  }
  100% {
    stroke-dashoffset: -1;
    opacity: 0;
  }
}
@keyframes cn-ring {
  from {
    opacity: 1;
    box-shadow: 0 0 0 0 rgb(63 123 255 / 0.55);
  }
  to {
    opacity: 0;
    box-shadow: 0 0 0 28px rgb(63 123 255 / 0);
  }
}
@keyframes cn-bump {
  50% {
    scale: 1.06;
  }
}