/* falcon.com home page: the work-flow and memory diagrams (graphics C and D). Same rules as
   graphics.css: classes only, the base style is the final frame, motion only when allowed. */

/* Graphics C and D: shared labels and flow pieces */
.graphic .g-stage {
  fill: var(--warm-600);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.graphic .g-cap {
  fill: var(--warm-600);
  font-size: 10px;
}
.graphic .g-main {
  font-size: 11.5px;
  font-weight: 600;
}
.graphic .g-11 {
  font-size: 11px;
}
.graphic .g-on-fill {
  fill: var(--on-primary);
  font-weight: 600;
}
.g-frame {
  fill: var(--red-50);
  stroke: var(--red-200);
}
.g-arrow {
  fill: none;
  stroke: var(--warm-600);
  stroke-width: 1.5;
}
.g-step-agent,
.g-bubble-agent {
  fill: var(--fill);
}
.g-agent-glow {
  fill: none;
  stroke: var(--accent-line);
  stroke-width: 2;
}
.g-branch {
  fill: var(--surface);
  stroke: var(--accent-line);
  stroke-dasharray: 4 3;
}
.graphic .g-branch-t {
  fill: var(--red-900);
  font-size: 11px;
  font-weight: 600;
}
.g-flash {
  fill: none;
  stroke: var(--red-600);
  stroke-width: 2;
  opacity: 0;
}
.g-dot {
  fill: var(--accent-line);
  opacity: 0;
}
.g-dot.g-out,
.g-dot.g-back {
  fill: var(--red-700);
}
.g-wait rect {
  fill: var(--red-100);
  stroke: var(--red-200);
}
.graphic .g-wait text {
  fill: var(--red-900);
  font-size: 11px;
  font-weight: 600;
}
.g-wait-icon,
.g-wait-hand {
  fill: none;
  stroke: var(--red-900);
  stroke-width: 1.3;
}

/* Graphic D */
.g-bubble {
  fill: var(--surface-high);
  stroke: var(--line);
}
.graphic .hl {
  fill: var(--red-600);
  font-weight: 600;
}
.g-pill {
  fill: var(--red-50);
  stroke: var(--red-200);
}
.graphic .g-pill-t {
  fill: var(--red-900);
  font-size: 10.5px;
  font-weight: 600;
}
.g-check {
  fill: var(--fill);
}
.g-check-mark {
  fill: none;
  stroke: #ffffff;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.graphic .g-value {
  fill: var(--red-900);
  font-weight: 600;
}
.g-no {
  fill: none;
  stroke: var(--warm-600);
  stroke-width: 1.4;
}
.graphic .g-struck {
  fill: var(--warm-600);
  font-size: 12.5px;
}
.g-strike {
  stroke: var(--warm-600);
  stroke-width: 1.2;
}
.g-fly {
  opacity: 0;
}
.g-fly rect {
  fill: var(--red-100);
  stroke: var(--red-400);
}
.graphic .g-fly text {
  fill: var(--red-900);
  font-size: 11px;
  font-weight: 600;
}
.g-fly.f1 {
  --fx: -140px;
  --fy: -178px;
}
.g-fly.f2 {
  --fx: -40px;
  --fy: -176px;
}
.g-fly.f3 {
  --fx: -140px;
  --fy: -208px;
}
.g-saved-ring {
  fill: none;
  stroke: var(--accent-line);
  stroke-width: 1.5;
  opacity: 0;
}
.graphic .g-just {
  fill: var(--red-600);
  font-size: 11px;
  font-weight: 600;
}

@media (prefers-reduced-motion: no-preference) {
  /* C: two sources take turns over a 16s loop, 8s apart. */
  .graphic-flow .g-flash,
  .graphic-flow .g-dot,
  .g-wait {
    animation: 16s ease-in-out infinite both;
  }
  .g-in {
    --ox: 125px;
    animation-name: dot-in;
  }
  .g-in.db {
    --ox: -1px;
  }
  .g-out {
    --tx: -285px;
    animation-name: dot-out;
  }
  .g-out.db {
    --tx: -33px;
  }
  .g-back {
    animation-name: dot-back;
  }
  .s1 .g-flash {
    animation-name: flash-source;
  }
  .s2 .g-flash {
    animation-name: flash-start;
  }
  .o1 .g-flash,
  .o4 .g-flash {
    animation-name: flash-fire;
  }
  .o4 .g-flash {
    animation-delay: 0.8s;
  }
  .o3 .g-flash {
    animation-name: flash-send;
  }
  .g-wait {
    animation-name: wait;
  }
  .graphic-flow .db,
  .s2 .g-flash,
  .o3 .g-flash,
  .g-wait {
    animation-delay: 8s;
  }
  .graphic-flow .o2 .g-flash,
  .graphic-flow .s3 .g-flash,
  .graphic-flow .s4 .g-flash,
  .graphic-flow .s5 .g-flash {
    animation: none;
  }
  .g-agent-glow {
    animation: agent-glow 8s ease-in-out infinite;
  }

  /* D: noticed, kept, saved, sent. 16s loop. */
  .graphic .hl,
  .g-fly,
  .g-value,
  .g-saved,
  .g-saved-ring,
  .g-just,
  .graphic-memory .g-flash,
  .g-hook {
    animation: 16s ease-in-out infinite both;
  }
  .graphic .hl {
    animation-name: hl-on;
  }
  .hl.h2 {
    animation-delay: 0.3s;
  }
  .hl.h3 {
    animation-delay: 0.6s;
  }
  .hl.h4 {
    animation-delay: 0.9s;
  }
  .g-fly {
    animation-name: fly;
  }
  .g-value {
    animation-name: value-on;
  }
  .f2,
  .v2 {
    animation-delay: 0.4s;
  }
  .f3,
  .v3 {
    animation-delay: 0.8s;
  }
  .g-saved,
  .g-just {
    animation-name: saved-on;
  }
  .g-saved-ring {
    animation-name: saved-ring;
  }
  .m2,
  .m2 .g-saved-ring {
    animation-delay: 0.4s;
  }
  .m3,
  .m3 .g-saved-ring {
    animation-delay: 0.8s;
  }
  .m4,
  .m4 .g-saved-ring {
    animation-delay: 1.2s;
  }
  .graphic-memory .ev {
    animation-name: event-flash;
  }
  .g-hook {
    --hx: 28px;
    --hy: -26px;
    animation-name: hook-out;
  }
  .g-hook.k2 {
    --hy: 24px;
  }
  .graphic-memory .d1 .g-flash,
  .graphic-memory .d2 .g-flash {
    animation-name: hook-land;
  }
}

@keyframes dot-in {
  0% {
    opacity: 0;
    transform: translate(0, 0);
  }
  1% {
    opacity: 1;
  }
  6% {
    transform: translate(var(--ox), 0);
  }
  9%,
  12% {
    transform: translate(var(--ox), 44px);
  }
  14% {
    transform: translate(var(--ox), 106px);
  }
  16% {
    opacity: 1;
    transform: translate(calc(var(--ox) - 92px), 106px);
  }
  18%,
  100% {
    opacity: 0;
    transform: translate(calc(var(--ox) - 92px), 126px);
  }
}
@keyframes dot-out {
  0%,
  26% {
    opacity: 0;
    transform: translate(0, 0);
  }
  27% {
    opacity: 1;
    transform: translate(0, 0);
  }
  29% {
    transform: translate(32px, 0);
  }
  31% {
    transform: translate(32px, 128px);
  }
  33% {
    opacity: 1;
    transform: translate(var(--tx), 128px);
  }
  35%,
  100% {
    opacity: 0;
    transform: translate(var(--tx), 140px);
  }
}
@keyframes dot-back {
  0%,
  40% {
    opacity: 0;
    transform: translate(0, 0);
  }
  41% {
    opacity: 1;
  }
  47% {
    opacity: 1;
    transform: translate(0, -430px);
  }
  48%,
  100% {
    opacity: 0;
    transform: translate(0, -430px);
  }
}
@keyframes flash-start {
  0%,
  6% {
    opacity: 1;
  }
  9%,
  100% {
    opacity: 0;
  }
}
@keyframes flash-source {
  0%,
  6% {
    opacity: 1;
  }
  9%,
  46% {
    opacity: 0;
  }
  48%,
  52% {
    opacity: 1;
  }
  55%,
  100% {
    opacity: 0;
  }
}
@keyframes flash-fire {
  0%,
  34% {
    opacity: 0;
  }
  36%,
  40% {
    opacity: 1;
  }
  43%,
  100% {
    opacity: 0;
  }
}
@keyframes flash-send {
  0%,
  44% {
    opacity: 0;
  }
  46%,
  50% {
    opacity: 1;
  }
  53%,
  100% {
    opacity: 0;
  }
}
@keyframes wait {
  0%,
  33% {
    opacity: 0;
  }
  35%,
  44% {
    opacity: 1;
  }
  46%,
  100% {
    opacity: 0;
  }
}
@keyframes agent-glow {
  0%,
  36% {
    opacity: 0;
  }
  40%,
  50% {
    opacity: 1;
  }
  56%,
  100% {
    opacity: 0;
  }
}
@keyframes hl-on {
  0% {
    fill: var(--text);
  }
  4%,
  94% {
    fill: var(--red-600);
  }
  98%,
  100% {
    fill: var(--text);
  }
}
@keyframes fly {
  0%,
  10% {
    opacity: 0;
    transform: translate(var(--fx), var(--fy));
  }
  12% {
    opacity: 1;
  }
  19% {
    opacity: 1;
    transform: translate(0, 0);
  }
  21%,
  100% {
    opacity: 0;
    transform: translate(0, 0);
  }
}
@keyframes value-on {
  0%,
  19% {
    opacity: 0;
  }
  21%,
  94% {
    opacity: 1;
  }
  98%,
  100% {
    opacity: 0;
  }
}
@keyframes saved-on {
  0%,
  29% {
    opacity: 0;
  }
  32%,
  94% {
    opacity: 1;
  }
  98%,
  100% {
    opacity: 0;
  }
}
@keyframes saved-ring {
  0%,
  31% {
    opacity: 0;
  }
  34% {
    opacity: 1;
  }
  42%,
  100% {
    opacity: 0;
  }
}
@keyframes event-flash {
  0%,
  46% {
    opacity: 0;
  }
  48%,
  52% {
    opacity: 1;
  }
  55%,
  100% {
    opacity: 0;
  }
}
@keyframes hook-out {
  0%,
  52% {
    opacity: 0;
    transform: translate(0, 0);
  }
  53% {
    opacity: 1;
  }
  55% {
    transform: translate(14px, 0);
  }
  58% {
    opacity: 1;
    transform: translate(14px, var(--hy));
  }
  60%,
  100% {
    opacity: 0;
    transform: translate(var(--hx), var(--hy));
  }
}
@keyframes hook-land {
  0%,
  59% {
    opacity: 0;
  }
  61%,
  66% {
    opacity: 1;
  }
  69%,
  100% {
    opacity: 0;
  }
}