/* Portal mark motion. Ported from the Figma "Motion" page (Converge, Open, Orbit);
   the spring curves are Figma's own, exported as CSS linear() easings.
   Distances are in mark units on the 120 grid (a quarter of the 800px Figma frames).

   The two shapes are white with mix-blend-mode: difference, so on any background the
   shapes read as ink and their overlap cuts back to the background: the XOR of the mark,
   live while the shapes move. Anything that isolates their stacking context needs a
   solid background of its own, or the overlap turns black. */

.pm-shape {
  fill: #fff;
  mix-blend-mode: difference;
  transform-box: fill-box;
  transform-origin: center;
}

/* Converge: the shapes arrive from opposite corners and lock together. */
@keyframes pm-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes pm-converge-sq { from { translate: -65px -65px; rotate: 30deg; } to { translate: 0 0; rotate: 0deg; } }
@keyframes pm-converge-ci { from { translate: 65px 65px; } to { translate: 0 0; } }
.pm.is-converge .pm-sq {
  animation: pm-fade-in 400ms ease-out 200ms both, pm-converge-sq 1100ms linear(0, 0.0188, 0.0679, 0.1374, 0.2195, 0.308, 0.3978, 0.4856, 0.5686, 0.6452, 0.7142, 0.7753, 0.8283, 0.8735, 0.9113, 0.9423, 0.9671, 0.9866, 1.0014, 1.0123, 1.0198, 1.0247, 1.0274, 1.0283, 1.0281, 1.0268, 1.025, 1.0227, 1.0202, 1.0177, 1.0152, 1.0128, 1.0106, 1.0085, 1.0068, 1.0052, 1.0039, 1.0028, 1.0018, 1.0011, 1.0005, 1, 0.9997, 0.9995, 0.9993, 0.9992, 0.9992, 0.9992, 0.9992, 0.9993, 0.9993) 200ms both;
}
.pm.is-converge .pm-ci {
  animation: pm-fade-in 400ms ease-out 200ms both, pm-converge-ci 1100ms linear(0, 0.0188, 0.0679, 0.1374, 0.2195, 0.308, 0.3978, 0.4856, 0.5686, 0.6452, 0.7142, 0.7753, 0.8283, 0.8735, 0.9113, 0.9423, 0.9671, 0.9866, 1.0014, 1.0123, 1.0198, 1.0247, 1.0274, 1.0283, 1.0281, 1.0268, 1.025, 1.0227, 1.0202, 1.0177, 1.0152, 1.0128, 1.0106, 1.0085, 1.0068, 1.0052, 1.0039, 1.0028, 1.0018, 1.0011, 1.0005, 1, 0.9997, 0.9995, 0.9993, 0.9992, 0.9992, 0.9992, 0.9992, 0.9993, 0.9993) 350ms both;
}

/* Open: both start small on one center, then spring apart into the mark. */
@keyframes pm-open-rot { from { rotate: -90deg; } to { rotate: 0deg; } }
@keyframes pm-open-scale { from { scale: 0.2; } to { scale: 1; } }
@keyframes pm-open-sq { from { translate: 13.5px 13.5px; } to { translate: 0 0; } }
@keyframes pm-open-ci { from { translate: -13.5px -13.5px; } to { translate: 0 0; } }
.pm.is-open .pm-sq {
  animation: pm-open-rot 600ms linear(0, 0.0169, 0.061, 0.1236, 0.1977, 0.2779, 0.36, 0.4408, 0.5181, 0.5903, 0.6564, 0.716, 0.7688, 0.815, 0.8548, 0.8887, 0.9171, 0.9407, 0.9598, 0.9752, 0.9872, 0.9965, 1.0034, 1.0083, 1.0117, 1.0138, 1.0148, 1.0152, 1.0149, 1.0142, 1.0133, 1.0122, 1.011, 1.0097, 1.0085, 1.0073, 1.0062, 1.0052, 1.0043, 1.0035, 1.0028, 1.0022, 1.0017, 1.0013, 1.0009, 1.0006, 1.0004, 1.0002, 1.0001, 0.9999, 0.9999) both, pm-open-scale 600ms linear(0, 0.0212, 0.0764, 0.1545, 0.2463, 0.3445, 0.4435, 0.5391, 0.6282, 0.7091, 0.7805, 0.8421, 0.8939, 0.9365, 0.9704, 0.9967, 1.0162, 1.03, 1.0389, 1.044, 1.0459, 1.0455, 1.0433, 1.04, 1.0359, 1.0314, 1.0269, 1.0224, 1.0182, 1.0144, 1.011, 1.008, 1.0055, 1.0034, 1.0018, 1.0005, 0.9995, 0.9988, 0.9983, 0.998, 0.9979, 0.9979, 0.998, 0.9981, 0.9983, 0.9985, 0.9987, 0.9989, 0.9991, 0.9993, 0.9995) both,
             pm-open-sq 1000ms linear(0, 0.0242, 0.0871, 0.1757, 0.2793, 0.3892, 0.4987, 0.6028, 0.6982, 0.7827, 0.8552, 0.9156, 0.9641, 1.0017, 1.0295, 1.0486, 1.0606, 1.0666, 1.068, 1.0659, 1.0613, 1.0551, 1.048, 1.0405, 1.0331, 1.026, 1.0197, 1.014, 1.0092, 1.0052, 1.002, 0.9996, 0.9978, 0.9965, 0.9958, 0.9954, 0.9954, 0.9955, 0.9959, 0.9963, 0.9968, 0.9973, 0.9978, 0.9983, 0.9987, 0.9991, 0.9994, 0.9997, 0.9999, 1.0001, 1.0002) 700ms both;
}
.pm.is-open .pm-ci {
  animation: pm-open-scale 600ms linear(0, 0.0212, 0.0764, 0.1545, 0.2463, 0.3445, 0.4435, 0.5391, 0.6282, 0.7091, 0.7805, 0.8421, 0.8939, 0.9365, 0.9704, 0.9967, 1.0162, 1.03, 1.0389, 1.044, 1.0459, 1.0455, 1.0433, 1.04, 1.0359, 1.0314, 1.0269, 1.0224, 1.0182, 1.0144, 1.011, 1.008, 1.0055, 1.0034, 1.0018, 1.0005, 0.9995, 0.9988, 0.9983, 0.998, 0.9979, 0.9979, 0.998, 0.9981, 0.9983, 0.9985, 0.9987, 0.9989, 0.9991, 0.9993, 0.9995) both, pm-open-ci 1000ms linear(0, 0.0242, 0.0871, 0.1757, 0.2793, 0.3892, 0.4987, 0.6028, 0.6982, 0.7827, 0.8552, 0.9156, 0.9641, 1.0017, 1.0295, 1.0486, 1.0606, 1.0666, 1.068, 1.0659, 1.0613, 1.0551, 1.048, 1.0405, 1.0331, 1.026, 1.0197, 1.014, 1.0092, 1.0052, 1.002, 0.9996, 0.9978, 0.9965, 0.9958, 0.9954, 0.9954, 0.9955, 0.9959, 0.9963, 0.9968, 0.9973, 0.9978, 0.9983, 0.9987, 0.9991, 0.9994, 0.9997, 0.9999, 1.0001, 1.0002) 700ms both;
}

/* Orbit: the server circle travels once around the device square and settles. */
@keyframes pm-orbit-ci {
  0.00% { translate: -0.00px 0.00px; }
  2.78% { translate: -0.01px 0.01px; }
  5.56% { translate: -0.12px 0.12px; }
  8.33% { translate: -0.40px 0.39px; }
  11.11% { translate: -0.95px 0.91px; }
  13.89% { translate: -1.88px 1.76px; }
  16.67% { translate: -3.32px 2.95px; }
  19.44% { translate: -5.42px 4.50px; }
  22.22% { translate: -8.37px 6.33px; }
  25.00% { translate: -12.39px 8.28px; }
  27.78% { translate: -17.67px 10.03px; }
  30.56% { translate: -24.39px 11.09px; }
  33.33% { translate: -32.53px 10.78px; }
  36.11% { translate: -41.80px 8.20px; }
  38.89% { translate: -51.39px 2.38px; }
  41.67% { translate: -59.79px -7.43px; }
  44.44% { translate: -64.76px -21.30px; }
  47.22% { translate: -63.59px -37.93px; }
  50.00% { translate: -54.00px -54.00px; }
  52.78% { translate: -37.93px -63.59px; }
  55.56% { translate: -21.30px -64.76px; }
  58.33% { translate: -7.43px -59.79px; }
  61.11% { translate: 2.38px -51.39px; }
  63.89% { translate: 8.20px -41.80px; }
  66.67% { translate: 10.78px -32.53px; }
  69.44% { translate: 11.09px -24.39px; }
  72.22% { translate: 10.03px -17.67px; }
  75.00% { translate: 8.28px -12.39px; }
  77.78% { translate: 6.33px -8.37px; }
  80.56% { translate: 4.50px -5.42px; }
  83.33% { translate: 2.95px -3.32px; }
  86.11% { translate: 1.76px -1.88px; }
  88.89% { translate: 0.91px -0.95px; }
  91.67% { translate: 0.39px -0.40px; }
  94.44% { translate: 0.12px -0.12px; }
  97.22% { translate: 0.01px -0.01px; }
  100.00% { translate: 0.00px 0.00px; }
}
@keyframes pm-orbit-sq { from { rotate: -90deg; } to { rotate: 0deg; } }
.pm.is-orbit .pm-ci { animation: pm-orbit-ci var(--pm-orbit, 2000ms) linear both; }
.pm.is-orbit .pm-sq { animation: pm-orbit-sq var(--pm-orbit, 2000ms) cubic-bezier(0.65, 0, 0.35, 1) both; }

@media (prefers-reduced-motion: reduce) {
  .pm .pm-shape { animation: none !important; }
}

/* The closing mark waits, hidden, until it scrolls into view and opens. */
@media (prefers-reduced-motion: no-preference) {
  .js #cta-mark:not(.is-open) .pm-shape { opacity: 0; }
}