/* Section animate — data-animate="s:NNh:NNd:NN" DSL */

:root {
  --anim-frame-ms: 90ms;
  --anim-phase-count: 13;
  --anim-tree-fade-ms: 70ms;
  --anim-tree-start-opacity: 0.28;
  --anim-enter-ms: 260ms;
}

[data-animate*="d:00"] { --anim-delay: 0ms; }
[data-animate*="d:01"] { --anim-delay: 100ms; }
[data-animate*="d:02"] { --anim-delay: 200ms; }
[data-animate*="d:03"] { --anim-delay: 300ms; }
[data-animate*="d:04"] { --anim-delay: 400ms; }
[data-animate*="d:05"] { --anim-delay: 500ms; }
[data-animate*="d:06"] { --anim-delay: 600ms; }
[data-animate*="d:07"] { --anim-delay: 700ms; }
[data-animate*="d:08"] { --anim-delay: 800ms; }
[data-animate*="d:09"] { --anim-delay: 900ms; }
[data-animate*="d:10"] { --anim-delay: 1000ms; }
[data-animate*="d:11"] { --anim-delay: 1100ms; }
[data-animate*="d:12"] { --anim-delay: 1200ms; }
[data-animate*="d:13"] { --anim-delay: 1300ms; }
[data-animate*="d:14"] { --anim-delay: 1400ms; }
[data-animate*="d:15"] { --anim-delay: 1500ms; }
[data-animate*="d:16"] { --anim-delay: 1600ms; }
[data-animate*="d:17"] { --anim-delay: 1700ms; }
[data-animate*="d:18"] { --anim-delay: 1800ms; }
[data-animate*="d:19"] { --anim-delay: 1900ms; }
[data-animate*="d:20"] { --anim-delay: 2000ms; }
[data-animate*="d:21"] { --anim-delay: 2100ms; }
[data-animate*="d:22"] { --anim-delay: 2200ms; }
[data-animate*="d:23"] { --anim-delay: 2300ms; }
[data-animate*="d:24"] { --anim-delay: 2400ms; }
[data-animate*="d:25"] { --anim-delay: 2500ms; }
[data-animate*="d:26"] { --anim-delay: 2600ms; }
[data-animate*="d:27"] { --anim-delay: 2700ms; }
[data-animate*="d:28"] { --anim-delay: 2800ms; }
[data-animate*="d:29"] { --anim-delay: 2900ms; }
[data-animate*="d:30"] { --anim-delay: 3000ms; }
[data-animate*="d:31"] { --anim-delay: 3100ms; }
[data-animate*="d:32"] { --anim-delay: 3200ms; }
[data-animate*="d:33"] { --anim-delay: 3300ms; }
[data-animate*="d:34"] { --anim-delay: 3400ms; }
[data-animate*="d:35"] { --anim-delay: 3500ms; }
[data-animate*="d:36"] { --anim-delay: 3600ms; }
[data-animate*="d:37"] { --anim-delay: 3700ms; }
[data-animate*="d:38"] { --anim-delay: 3800ms; }
[data-animate*="d:39"] { --anim-delay: 3900ms; }
[data-animate*="d:40"] { --anim-delay: 4000ms; }
[data-animate*="d:41"] { --anim-delay: 4100ms; }
[data-animate*="d:42"] { --anim-delay: 4200ms; }
[data-animate*="d:43"] { --anim-delay: 4300ms; }
[data-animate*="d:44"] { --anim-delay: 4400ms; }
[data-animate*="d:45"] { --anim-delay: 4500ms; }
[data-animate*="d:46"] { --anim-delay: 4600ms; }
[data-animate*="d:47"] { --anim-delay: 4700ms; }
[data-animate*="d:48"] { --anim-delay: 4800ms; }
[data-animate*="d:49"] { --anim-delay: 4900ms; }
[data-animate*="d:50"] { --anim-delay: 5000ms; }
[data-animate*="d:51"] { --anim-delay: 5100ms; }
[data-animate*="d:52"] { --anim-delay: 5200ms; }
[data-animate*="d:53"] { --anim-delay: 5300ms; }
[data-animate*="d:54"] { --anim-delay: 5400ms; }
[data-animate*="d:55"] { --anim-delay: 5500ms; }
[data-animate*="d:56"] { --anim-delay: 5600ms; }
[data-animate*="d:57"] { --anim-delay: 5700ms; }
[data-animate*="d:58"] { --anim-delay: 5800ms; }
[data-animate*="d:59"] { --anim-delay: 5900ms; }
[data-animate*="d:60"] { --anim-delay: 6000ms; }
[data-animate*="d:61"] { --anim-delay: 6100ms; }
[data-animate*="d:62"] { --anim-delay: 6200ms; }
[data-animate*="d:63"] { --anim-delay: 6300ms; }
[data-animate*="d:64"] { --anim-delay: 6400ms; }
[data-animate*="d:65"] { --anim-delay: 6500ms; }
[data-animate*="d:66"] { --anim-delay: 6600ms; }
[data-animate*="d:67"] { --anim-delay: 6700ms; }
[data-animate*="d:68"] { --anim-delay: 6800ms; }
[data-animate*="d:69"] { --anim-delay: 6900ms; }
[data-animate*="d:70"] { --anim-delay: 7000ms; }
[data-animate*="d:71"] { --anim-delay: 7100ms; }
[data-animate*="d:72"] { --anim-delay: 7200ms; }
[data-animate*="d:73"] { --anim-delay: 7300ms; }
[data-animate*="d:74"] { --anim-delay: 7400ms; }
[data-animate*="d:75"] { --anim-delay: 7500ms; }
[data-animate*="d:76"] { --anim-delay: 7600ms; }
[data-animate*="d:77"] { --anim-delay: 7700ms; }
[data-animate*="d:78"] { --anim-delay: 7800ms; }
[data-animate*="d:79"] { --anim-delay: 7900ms; }
[data-animate*="d:80"] { --anim-delay: 8000ms; }
[data-animate*="d:81"] { --anim-delay: 8100ms; }
[data-animate*="d:82"] { --anim-delay: 8200ms; }
[data-animate*="d:83"] { --anim-delay: 8300ms; }
[data-animate*="d:84"] { --anim-delay: 8400ms; }
[data-animate*="d:85"] { --anim-delay: 8500ms; }
[data-animate*="d:86"] { --anim-delay: 8600ms; }
[data-animate*="d:87"] { --anim-delay: 8700ms; }
[data-animate*="d:88"] { --anim-delay: 8800ms; }
[data-animate*="d:89"] { --anim-delay: 8900ms; }
[data-animate*="d:90"] { --anim-delay: 9000ms; }
[data-animate*="d:91"] { --anim-delay: 9100ms; }
[data-animate*="d:92"] { --anim-delay: 9200ms; }
[data-animate*="d:93"] { --anim-delay: 9300ms; }
[data-animate*="d:94"] { --anim-delay: 9400ms; }
[data-animate*="d:95"] { --anim-delay: 9500ms; }
[data-animate*="d:96"] { --anim-delay: 9600ms; }
[data-animate*="d:97"] { --anim-delay: 9700ms; }
[data-animate*="d:98"] { --anim-delay: 9800ms; }
[data-animate*="d:99"] { --anim-delay: 9900ms; }

[data-animate*="s:01"] { --anim-show: 1; }
[data-animate*="s:02"] { --anim-show: 2; }
[data-animate*="s:03"] { --anim-show: 3; }
[data-animate*="s:04"] { --anim-show: 4; }
[data-animate*="s:05"] { --anim-show: 5; }
[data-animate*="s:06"] { --anim-show: 6; }
[data-animate*="s:07"] { --anim-show: 7; }
[data-animate*="s:08"] { --anim-show: 8; }
[data-animate*="s:09"] { --anim-show: 9; }
[data-animate*="s:10"] { --anim-show: 10; }
[data-animate*="s:11"] { --anim-show: 11; }
[data-animate*="s:12"] { --anim-show: 12; }
[data-animate*="s:13"] { --anim-show: 13; }

[data-animate*="h:01"] { --anim-hide: 1; }
[data-animate*="h:02"] { --anim-hide: 2; }
[data-animate*="h:03"] { --anim-hide: 3; }
[data-animate*="h:04"] { --anim-hide: 4; }
[data-animate*="h:05"] { --anim-hide: 5; }
[data-animate*="h:06"] { --anim-hide: 6; }
[data-animate*="h:07"] { --anim-hide: 7; }
[data-animate*="h:08"] { --anim-hide: 8; }
[data-animate*="h:09"] { --anim-hide: 9; }
[data-animate*="h:10"] { --anim-hide: 10; }
[data-animate*="h:11"] { --anim-hide: 11; }
[data-animate*="h:12"] { --anim-hide: 12; }
[data-animate*="h:13"] { --anim-hide: 13; }

/* Base: hidden until the section plays */
section:not([data-animate-play="1"]) [data-animate] {
  opacity: 0;
  transform: translate(var(--anim-ox, 0), var(--anim-oy, 0)) scale(0.86);
}

@keyframes anim-pop-in {
  from {
    opacity: 0;
    transform: translate(var(--anim-ox, 0), var(--anim-oy, 0)) scale(0.86);
  }
  to {
    opacity: var(--anim-end-opacity, 1);
    transform: translate(var(--anim-ox, 0), var(--anim-oy, 0)) scale(1);
  }
}

@keyframes anim-pop-out {
  from {
    opacity: var(--anim-end-opacity, 1);
    transform: translate(var(--anim-ox, 0), var(--anim-oy, 0)) scale(1);
  }
  to {
    opacity: 0;
    transform: translate(var(--anim-ox, 0), var(--anim-oy, 0)) scale(0.86);
  }
}

section[data-animate-play="1"] [data-animate]:not([data-animate*="h:"]) {
  opacity: 0;
  transform: translate(var(--anim-ox, 0), var(--anim-oy, 0)) scale(0.86);
  animation-name: anim-pop-in;
  animation-duration: var(--anim-enter-ms, 260ms);
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  animation-fill-mode: forwards;
  animation-delay: calc(
    (var(--anim-show, 1) - 1) * var(--anim-frame-ms) + var(--anim-delay, 0ms)
  );
}

section[data-animate-play="1"] [data-animate*="h:"] {
  opacity: 0;
  transform: translate(var(--anim-ox, 0), var(--anim-oy, 0)) scale(0.86);
  animation-name: anim-pop-in, anim-pop-out;
  animation-duration: var(--anim-enter-ms, 260ms), var(--anim-enter-ms, 260ms);
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1), ease-in;
  animation-fill-mode: forwards, forwards;
  animation-delay:
    calc((var(--anim-show, 1) - 1) * var(--anim-frame-ms) + var(--anim-delay, 0ms)),
    calc((var(--anim-hide, 13) - 1) * var(--anim-frame-ms) + var(--anim-delay, 0ms));
}

section[data-animate-static="1"] [data-animate],
html:not([data-mode="live"]) .page-shell [data-animate],
html[data-preview="1"] .page-shell [data-animate] {
  opacity: var(--anim-end-opacity, 1) !important;
  transform: translate(var(--anim-ox, 0), var(--anim-oy, 0)) !important;
  animation: none !important;
}

@keyframes tree-frame-in {
  from {
    opacity: var(--anim-tree-start-opacity, 0.28);
  }
  to {
    opacity: 1;
  }
}

section:not([data-animate-play="1"]) .flow-tree__frame {
  opacity: 0;
}

/*
 * Phases stacked. Next frame soft-in (opacity),
 * then holds (forwards). Last frame stays at the end.
 */
section[data-animate-play="1"] .flow-tree__frame {
  opacity: 0;
  animation-name: tree-frame-in;
  animation-duration: var(--anim-tree-fade-ms, 70ms);
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
}

section[data-animate-play="1"] .flow-tree__frame:nth-child(1) { animation-delay: calc(0 * var(--anim-frame-ms)); }
section[data-animate-play="1"] .flow-tree__frame:nth-child(2) { animation-delay: calc(1 * var(--anim-frame-ms)); }
section[data-animate-play="1"] .flow-tree__frame:nth-child(3) { animation-delay: calc(2 * var(--anim-frame-ms)); }
section[data-animate-play="1"] .flow-tree__frame:nth-child(4) { animation-delay: calc(3 * var(--anim-frame-ms)); }
section[data-animate-play="1"] .flow-tree__frame:nth-child(5) { animation-delay: calc(4 * var(--anim-frame-ms)); }
section[data-animate-play="1"] .flow-tree__frame:nth-child(6) { animation-delay: calc(5 * var(--anim-frame-ms)); }
section[data-animate-play="1"] .flow-tree__frame:nth-child(7) { animation-delay: calc(6 * var(--anim-frame-ms)); }
section[data-animate-play="1"] .flow-tree__frame:nth-child(8) { animation-delay: calc(7 * var(--anim-frame-ms)); }
section[data-animate-play="1"] .flow-tree__frame:nth-child(9) { animation-delay: calc(8 * var(--anim-frame-ms)); }
section[data-animate-play="1"] .flow-tree__frame:nth-child(10) { animation-delay: calc(9 * var(--anim-frame-ms)); }
section[data-animate-play="1"] .flow-tree__frame:nth-child(11) { animation-delay: calc(10 * var(--anim-frame-ms)); }
section[data-animate-play="1"] .flow-tree__frame:nth-child(12) { animation-delay: calc(11 * var(--anim-frame-ms)); }
section[data-animate-play="1"] .flow-tree__frame:nth-child(13) { animation-delay: calc(12 * var(--anim-frame-ms)); }

section[data-animate-static="1"] .flow-tree__frame,
html:not([data-mode="live"]) .page-shell .flow-tree__frame,
html[data-preview="1"] .page-shell .flow-tree__frame {
  opacity: 0;
  animation: none !important;
}

section[data-animate-static="1"] .flow-tree__frame:last-child,
html:not([data-mode="live"]) .page-shell .flow-tree__frame:last-child,
html[data-preview="1"] .page-shell .flow-tree__frame:last-child {
  opacity: 1;
}