/*
 * The home screen's picture (client/hero.js): a file lifts off a phone, arcs over to a laptop and
 * lands with a check. Keyframes only move transform and opacity. One loop is 3.6 s:
 *   0–10%  the file appears on the phone
 *  14–56%  it flies along the dotted arc
 *  56–63%  the laptop's screen glows and a check pops up
 *  88–96%  everything fades, then a short rest
 * With reduced motion it's one still frame: the file on the laptop, checked.
 */

.hero { display: block; width: 100%; max-width: 340px; height: auto; aspect-ratio: 352 / 160; margin: 4px auto 10px; }

.hero-line { stroke: var(--cream); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.hero-trail { fill: none; stroke: var(--veil-4); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 0 7.5; opacity: .5; }
.hero-glow { fill: var(--accent); opacity: 0; }
/* A ring the colour of the page under the file, so it passes cleanly over the outlines. */
.hero-sheet { fill: var(--accent); stroke: var(--ground-2); stroke-width: 6; stroke-linejoin: round; paint-order: stroke; }
.hero-ink { fill: none; stroke: var(--ground-1); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.hero-badge circle { fill: var(--positive); stroke: var(--ground-1); stroke-width: 2.5; }
.hero-badge { opacity: 0; }

/* The arm pivots on the arc's centre; the card and the badge scale about their own middles. */
.hero-arm { transform-box: view-box; transform-origin: 156px 152.33px; }
.hero-card, .hero-badge { transform-box: fill-box; transform-origin: center; }

.hero-arm, .hero-card, .hero-badge, .hero-glow, .hero-trail { animation-duration: 3.6s; animation-iteration-count: infinite; }
.hero-arm { animation-name: hero-arm; }
.hero-card { animation-name: hero-card; }
.hero-badge { animation-name: hero-badge; }
.hero-glow { animation-name: hero-glow; }
.hero-trail { animation-name: hero-trail; }

/* hero-arm and hero-card share the 14–56% curve, so the turns cancel and the file stays upright. */
@keyframes hero-arm {
  0%, 14% { transform: rotate(-58.7deg); animation-timing-function: cubic-bezier(.45, 0, .3, 1); }
  56%, 100% { transform: rotate(58.7deg); }
}
@keyframes hero-card {
  0% { transform: rotate(58.7deg) scale(.6); opacity: 0; animation-timing-function: ease-out; }
  10% { transform: rotate(58.7deg) scale(1); opacity: 1; }
  14% { transform: rotate(58.7deg) scale(1); animation-timing-function: cubic-bezier(.45, 0, .3, 1); }
  56%, 88% { transform: rotate(-58.7deg) scale(1); opacity: 1; animation-timing-function: ease-in; }
  96%, 100% { transform: rotate(-58.7deg) scale(.9); opacity: 0; }
}
@keyframes hero-badge {
  0%, 56% { transform: scale(.4); opacity: 0; animation-timing-function: cubic-bezier(.3, .7, .4, 1); }
  63%, 88% { transform: scale(1); opacity: 1; }
  96%, 100% { transform: scale(1); opacity: 0; }
}
@keyframes hero-glow {
  0%, 55% { opacity: 0; }
  61% { opacity: .2; animation-timing-function: ease-out; }
  94%, 100% { opacity: 0; }
}
@keyframes hero-trail {
  0%, 12% { opacity: .5; }
  30%, 46% { opacity: 1; }
  62%, 100% { opacity: .5; }
}

/* Waiting to connect: just the two devices, with the path between them breathing. Can't connect:
   the devices faded and the path still. */
.hero.waiting .hero-arm, .hero.waiting .hero-badge, .hero.waiting .hero-glow,
.hero.off .hero-arm, .hero.off .hero-badge, .hero.off .hero-glow { display: none; }
.hero.waiting .hero-trail { animation: hero-wait 1.4s ease-in-out infinite alternate; }
.hero.off .hero-trail { animation: none; opacity: .2; }
.hero.off .hero-line { opacity: .5; }
@keyframes hero-wait {
  from { opacity: .2; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .hero.waiting .hero-trail { animation: none; opacity: .6; }
  .hero-arm, .hero-card, .hero-badge, .hero-glow, .hero-trail { animation: none; }
  .hero-arm { transform: rotate(58.7deg); }
  .hero-card { transform: rotate(-58.7deg); }
  .hero-badge { opacity: 1; }
  .hero-glow { opacity: .12; }
}