/* Twenty-one seconds: show your code; Sam scans it and fans out; Ana scans YOUR code and
   fans out; both enter their number; your same phone opens the group-text composer.
   All animated properties are transform or opacity. */
.group-hero { width: 100%; max-width: 400px; margin: 12px auto 20px; }
.group-hero-picture { display: block; width: 100%; height: auto; overflow: visible; }
.group-hero figcaption { color: var(--ink-2); font-size: 16px; line-height: 1.4; text-align: center; }
.group-hero-summary { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.group-hero-narration { display: grid; min-height: 2.8em; }
.group-hero-caption { grid-area: 1 / 1; opacity: 0; animation-duration: 21s; animation-timing-function: steps(1, end); animation-iteration-count: infinite; }
.group-hero-caption-code { animation-name: group-caption-code; }
.group-hero-caption-scan-sam { animation-name: group-caption-scan-sam; }
.group-hero-caption-scan-ana { animation-name: group-caption-scan-ana; }
.group-hero-caption-join-ana { animation-name: group-caption-join-ana; }
.group-hero-caption-start { animation-name: group-caption-start; }
.group-hero-caption-messages { animation-name: group-caption-messages; }
.group-hero-case { fill: var(--ground-1); stroke: var(--cream); stroke-width: 2.5; }
.group-hero-detail, .group-hero-photo, .group-hero-people, .group-hero-connection, .group-hero-brackets,
.group-hero-rule, .group-hero-draft-rule, .group-hero-send-ink { fill: none; stroke: var(--cream); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.group-hero-label { fill: var(--ink-2); font: italic 13px var(--font); }
.group-hero-small, .group-hero-contact-name { fill: var(--cream); font: 11px var(--font); }
.group-hero-hint { fill: var(--ink-2); font: 9px var(--font); }
.group-hero-photo { stroke-opacity: .65; stroke-width: 1.4; }
.group-hero-code-paper { fill: var(--cream); }
.group-hero-code-ink { fill: none; stroke: var(--ground-1); stroke-width: 2.4; stroke-linejoin: miter; }
.group-hero-code-dots { fill: none; stroke: var(--ground-1); stroke-width: 5; stroke-linecap: square; }
.group-hero-viewport { fill: var(--ground-0); stroke: var(--veil-3); stroke-width: 1; }
.group-hero-brackets { stroke: var(--accent); stroke-width: 2; }
.group-hero-scanline { fill: none; stroke: var(--accent); stroke-width: 2; opacity: 0; }
.group-hero-connection { stroke: var(--accent); stroke-dasharray: 1 5; }
.group-hero-field { fill: var(--veil-1); stroke: var(--veil-3); stroke-width: 1; }
.group-hero-name { fill: var(--accent); font: 12px var(--font); }
.group-hero-number { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; }
.group-hero-button { fill: var(--accent); }
.group-hero-button-text { fill: var(--ground-1); font: 10px var(--font); }
.group-hero-success, .group-hero-scan-ok circle { fill: var(--positive); }
.group-hero-check, .group-hero-scan-ok path { fill: none; stroke: var(--ground-1); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.group-hero-people { stroke: var(--accent); }
.group-hero-people circle { fill: var(--accent-soft); }
.group-hero-people path { stroke: var(--ink-2); }
.group-hero-recipient { fill: var(--accent-soft); }
.group-hero-recipient-text { fill: var(--accent); font: 10px var(--font); }
.group-hero-rule { stroke: var(--veil-3); stroke-width: 1; }
.group-hero-draft { fill: var(--veil-1); stroke: var(--veil-3); stroke-width: 1; }
.group-hero-draft-text { fill: var(--cream); font: 10px var(--font); }
.group-hero-draft-rule { stroke: var(--ink-2); stroke-width: 1.5; }
.group-hero-send { fill: var(--positive); }
.group-hero-send-ink { stroke: var(--ground-1); stroke-width: 1.5; }
.group-hero-tap { fill: none; stroke: var(--cream); stroke-width: 2; }
.group-hero-tap circle:last-child { fill: var(--cream); stroke: none; }
.group-hero-still { display: none; }
.group-hero-host, .group-hero-guest { transform-origin: 50px 166px; }
.group-hero-host { transform: translate(150px, 35px); }
.group-hero-guest, .group-hero-camera, .group-hero-screen, .group-hero-joined,
.group-hero-host-roster, .group-hero-messages, .group-hero-connection, .group-hero-scan-ok, .group-hero-tap { opacity: 0; }
.group-hero-live [class*="group-hero-"] { animation-duration: 21s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; }
.group-hero-host { animation-name: group-host; }
.group-hero-guest-a { animation-name: group-guest-a; }
.group-hero-guest-b { animation-name: group-guest-b; }
.group-hero-camera-a { animation-name: group-camera-a; }
.group-hero-camera-b { animation-name: group-camera-b; }
.group-hero-scanline-a { animation-name: group-scanline-a; }
.group-hero-scanline-b { animation-name: group-scanline-b; }
.group-hero-scan-ok-a { animation-name: group-scan-ok-a; }
.group-hero-scan-ok-b { animation-name: group-scan-ok-b; }
.group-hero-screen-a { animation-name: group-screen-a; }
.group-hero-screen-b { animation-name: group-screen-b; }
.group-hero-form-a { animation-name: group-form-a; }
.group-hero-form-b { animation-name: group-form-b; }
.group-hero-name-a { animation-name: group-name-a; }
.group-hero-name-b { animation-name: group-name-b; }
.group-hero-number-a { animation-name: group-number-a; }
.group-hero-number-b { animation-name: group-number-b; }
.group-hero-joined-a { animation-name: group-joined-a; }
.group-hero-joined-b { animation-name: group-joined-b; }
.group-hero-host-code { animation-name: group-host-code; }
.group-hero-host-roster { animation-name: group-host-roster; }
.group-hero-live .group-hero-messages { animation-name: group-messages; }
.group-hero-connection-a { animation-name: group-camera-a; }
.group-hero-connection-b { animation-name: group-camera-b; }
.group-hero-tap { transform-box: fill-box; transform-origin: center; animation-name: group-tap; }

@keyframes group-host {
  0%, 12% { transform: translate(150px, 35px) rotate(0); }
  19%, 98% { transform: translate(12px, 35px) rotate(-3deg); }
  100% { transform: translate(150px, 35px) rotate(0); }
}
@keyframes group-guest-a {
  0%, 18%, 100% { opacity: 0; transform: translate(187px, 57px) rotate(12deg) scale(.9); }
  23%, 34% { opacity: 1; transform: translate(128px, 40px) rotate(5deg) scale(1); }
  40%, 98% { opacity: 1; transform: translate(288px, 35px) rotate(3deg) scale(1); }
  99% { opacity: 0; transform: translate(288px, 35px) rotate(3deg) scale(1); }
}
@keyframes group-guest-b {
  0%, 38%, 100% { opacity: 0; transform: translate(177px, 65px) rotate(16deg) scale(.9); }
  43%, 53% { opacity: 1; transform: translate(119px, 50px) rotate(7deg) scale(1); }
  60%, 98% { opacity: 1; transform: translate(150px, 35px) rotate(0) scale(1); }
  99% { opacity: 0; transform: translate(150px, 35px) rotate(0) scale(1); }
}
@keyframes group-camera-a { 0%, 18%, 38%, 100% { opacity: 0; } 23%, 35% { opacity: 1; } }
@keyframes group-camera-b { 0%, 38%, 57%, 100% { opacity: 0; } 43%, 54% { opacity: 1; } }
@keyframes group-scanline-a { 0%, 24%, 34%, 100% { opacity: 0; transform: translateY(0); } 25% { opacity: 1; transform: translateY(0); } 31% { opacity: 1; transform: translateY(51px); } 32% { opacity: 0; transform: translateY(51px); } }
@keyframes group-scanline-b { 0%, 43%, 53%, 100% { opacity: 0; transform: translateY(0); } 44% { opacity: 1; transform: translateY(0); } 49% { opacity: 1; transform: translateY(51px); } 50% { opacity: 0; transform: translateY(51px); } }
@keyframes group-scan-ok-a { 0%, 31%, 100% { opacity: 0; } 33%, 38% { opacity: 1; } 39% { opacity: 0; } }
@keyframes group-scan-ok-b { 0%, 49%, 100% { opacity: 0; } 51%, 55% { opacity: 1; } 56% { opacity: 0; } }
@keyframes group-screen-a { 0%, 40%, 100% { opacity: 0; } 42%, 98% { opacity: 1; } }
@keyframes group-screen-b { 0%, 59%, 100% { opacity: 0; } 61%, 98% { opacity: 1; } }
@keyframes group-form-a { 0%, 51% { opacity: 1; } 54%, 100% { opacity: 0; } }
@keyframes group-form-b { 0%, 67% { opacity: 1; } 70%, 100% { opacity: 0; } }
@keyframes group-name-a { 0%, 43% { opacity: 0; } 46%, 100% { opacity: 1; } }
@keyframes group-name-b { 0%, 62% { opacity: 0; } 64%, 100% { opacity: 1; } }
@keyframes group-number-a { 0%, 46% { opacity: 0; } 50%, 100% { opacity: 1; } }
@keyframes group-number-b { 0%, 64% { opacity: 0; } 67%, 100% { opacity: 1; } }
@keyframes group-joined-a { 0%, 53%, 100% { opacity: 0; } 55%, 98% { opacity: 1; } }
@keyframes group-joined-b { 0%, 69%, 100% { opacity: 0; } 71%, 98% { opacity: 1; } }
@keyframes group-host-code { 0%, 70%, 100% { opacity: 1; } 72%, 98% { opacity: 0; } }
@keyframes group-host-roster { 0%, 72%, 82%, 100% { opacity: 0; } 74%, 80% { opacity: 1; } }
@keyframes group-tap { 0%, 76%, 82%, 100% { opacity: 0; transform: scale(1.3); } 77%, 80% { opacity: 1; transform: scale(.9); } }
@keyframes group-messages { 0%, 81%, 100% { opacity: 0; } 83%, 98% { opacity: 1; } }
/* One scene-wide instruction at a time; these never label the phones underneath. */
@keyframes group-caption-code { 0%, 17.99% { opacity: 1; } 18%, 100% { opacity: 0; } }
@keyframes group-caption-scan-sam { 0%, 17.99%, 38%, 100% { opacity: 0; } 18%, 37.99% { opacity: 1; } }
@keyframes group-caption-scan-ana { 0%, 37.99%, 59%, 100% { opacity: 0; } 38%, 58.99% { opacity: 1; } }
@keyframes group-caption-join-ana { 0%, 58.99%, 72%, 100% { opacity: 0; } 59%, 71.99% { opacity: 1; } }
@keyframes group-caption-start { 0%, 71.99%, 83%, 100% { opacity: 0; } 72%, 82.99% { opacity: 1; } }
@keyframes group-caption-messages { 0%, 82.99% { opacity: 0; } 83%, 100% { opacity: 1; } }

@media (max-width: 380px) {
  .group-hero figcaption { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .group-hero * { animation: none !important; }
  .group-hero-live { display: none; }
  .group-hero-still { display: block; }
  .group-hero-still .group-hero-connection, .group-hero-still .group-hero-messages { opacity: 1; }
  .group-hero-narration { display: none; }
  .group-hero-summary { position: static; display: block; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; white-space: normal; }
}