/* The Overview moves like what it shows: figures land, the chart and the ring draw in, and records travel.
   Short on purpose, because this page opens on every sign in; base.css stops all of it under reduced motion. */

@keyframes ov-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes ov-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ov-pop { from { opacity: 0; transform: scale(.86); } to { opacity: 1; transform: none; } }
@keyframes ov-reveal { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes ov-ring { from { stroke-dasharray: 0 100; } }
@keyframes ov-fill { from { transform: scaleX(0); } to { transform: none; } }
@keyframes ov-sheen { from { background-position: 160% 0; } to { background-position: -60% 0; } }
@keyframes ov-led { from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--led) 60%, transparent); } to { box-shadow: 0 0 0 7px transparent; } }

/* ---------- The page comes in from the top, one block after the other ---------- */
.deck-overview > * { animation: ov-rise .55s var(--ease) both; }
.deck-overview > :nth-child(2) { animation-delay: .06s; }
.deck-overview > :nth-child(3) { animation-delay: .12s; }
.deck-overview > :nth-child(4) { animation-delay: .17s; }
.deck-overview > :nth-child(5) { animation-delay: .22s; }
.deck-overview > :nth-child(6) { animation-delay: .27s; }
.deck-overview > :nth-child(n+7) { animation-delay: .32s; }
.deck-overview > .tile, .deck-overview > .card { transition: border-color .2s ease, box-shadow .2s ease; }
@media (hover: hover) and (pointer: fine) {
  .deck-overview > .tile:hover, .deck-overview > .card:hover { border-color: var(--brand-line); box-shadow: var(--sh-hover); }
}

/* ---------- The figures and what draws them ---------- */
.deck-overview .deck-area { animation: ov-reveal 1.2s var(--ease) .15s both; }
.deck-overview .deck-ring circle.on { animation: ov-ring 1.1s var(--ease) .2s both; }
.deck-overview .tile-segments i { transform-origin: left; animation: ov-fill .6s var(--ease) .35s both; }
.deck-overview .tile-logos .brandmark { animation: ov-pop .4s var(--ease) both; animation-delay: .3s; }
.deck-overview .tile-logos .brandmark:nth-child(2) { animation-delay: .34s; }
.deck-overview .tile-logos .brandmark:nth-child(3) { animation-delay: .38s; }
.deck-overview .tile-logos .brandmark:nth-child(4) { animation-delay: .42s; }
.deck-overview .tile-logos .brandmark:nth-child(5) { animation-delay: .46s; }
.deck-overview .tile-logos .brandmark:nth-child(n+6) { animation-delay: .5s; }
.deck-overview table.data tbody tr { animation: ov-fade .45s ease .45s both; }

/* ---------- Needs you: list rows inside a tile ---------- */
.needs .nrow { padding: 12px 0; animation: ov-rise .45s var(--ease) .3s both; }
.needs .nrow:first-child { padding-top: 0; }
.needs .nrow:last-child { padding-bottom: 0; }
.needs .nrow:hover { background: none; }
.needs .nrow:nth-child(2) { animation-delay: .36s; }
.needs .nrow:nth-child(3) { animation-delay: .42s; }
.needs .nrow:nth-child(4) { animation-delay: .48s; }
.needs + .tile-sub { margin-top: 10px; }

/* ---------- What says it is alive ---------- */
.deck-overview .deck-status.ok i { --led: var(--stage-ok); animation: ov-led 2.2s ease-out infinite; }
.deck-overview .deck-status.warn i { --led: var(--warn); animation: ov-led 2.2s ease-out infinite; }
.deck-overview .tile-segments i.ok {
  background-image: linear-gradient(90deg, transparent 30%, rgb(255 255 255 / .6) 50%, transparent 70%); background-repeat: no-repeat; background-size: 220% 100%;
  animation: ov-fill .6s var(--ease) .35s both, ov-sheen 2.8s linear 1.2s infinite;
}

/* One record travelling along the volume line (overview.js moves it). */
.deck-hero .deck-runner {
  position: absolute; top: 0; left: 0; z-index: 0; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; opacity: 0; pointer-events: none;
  background: var(--stage-ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--stage-flow) 40%, transparent), 0 0 16px 4px var(--stage-flow);
}

@media (max-width: 700px) {
  .needs .nrow > .btn { grid-column: 2; justify-self: start; }
}