/* Compiled CSS (was SCSS) */
:root { --grey: #343434; --red: #F04F54; --green: #43CB9D; --p: 12px; }

*, *:before, *:after { box-sizing: border-box; }
* { -webkit-tap-highlight-color: rgba(0,0,0,0); transform-style: preserve-3d; }
*:focus { outline: none!important; }
body, html { height: 100%; }

body {
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;
  padding: var(--p);
  background: var(--grey);
  color: white;
  font-family: "Mona Sans", system-ui, sans-serif;
  font-feature-settings: "liga", "ss05" on, "ss07" on;
  font-size: 20px;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

::selection { background: none; }


a {
  display: block;
  cursor: pointer;
  font-weight: 500;
  color: #e45000; /* navy */
  text-decoration: none; /* remove default underline */
  border-bottom: 1px solid rgba(11,61,145,0.18); /* subtle navy underline */
  padding-bottom: 2px;
}

/* keep bold text inheriting the anchor color */
a b { color: inherit; }

a:visited { color: #df0000; }
a:hover, a:focus { color: #d23f00; border-bottom-color: rgba(8,48,107,0.22); }
a:active { color: #d01111; border-bottom-color: rgba(6,32,67,0.28); }

svg { width: 50px; height: auto; }

.crack { position: relative; z-index: 4; margin-left: -50px; }
.crack polyline {
  fill: none;
  stroke: var(--red);
  stroke-width: 10px;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1649.099;
  stroke-dashoffset: 1649.099;
  animation: drawStroke 1500ms ease-out 500ms forwards;
}

main { display: flex; align-items: center; align-content: center; justify-content: center; }
main > div { display: flex; align-items: center; align-content: center; position: relative; overflow: hidden; }
main > div svg { position: relative; z-index: 1; }
main > div svg polygon { fill: var(--grey); }
main > div span { display: block; position: relative; z-index: 0; padding: 0 var(--p); line-height: 1.4; }

main > div:first-child { text-align: right; z-index: 1; }
main > div:first-child span:first-child { opacity: 0; transform: translateX(100%); animation: translateLeft 1000ms linear 1250ms forwards; }
main > div:first-child span:last-child { opacity: 0; transform: translateX(100%); animation: translateLeft 1000ms linear 1450ms forwards; }
main > div:first-child svg polygon { animation: removeFill 10ms ease-out 1600ms forwards; }

main > div:last-child { z-index: 0; margin-left: -50px; }
main > div:last-child span:first-child { opacity: 0; transform: translateX(-100%); animation: translateRight 1000ms linear 1650ms forwards; }
main > div:last-child span:last-child { opacity: 0; transform: translateX(-100%); animation: translateRight 1000ms linear 1850ms forwards; }

@keyframes drawStroke { 0% { stroke-dashoffset: 1649.099; } 100% { stroke-dashoffset: 0; } }

@keyframes removeFill { 0% { fill: rgba(52,52,52,1); } 100% { fill: rgba(52,52,52,0); } }

/* pulseColor removed — links use fixed navy colors now */

/* https://goo.gl/v323yz */
@keyframes translateLeft {
  0% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 150, 0, 0, 1); opacity: 1; }
  7.61% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 69.561, 0, 0, 1); }
  11.41% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 39.355, 0, 0, 1); }
  15.12% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 17.801, 0, 0, 1); }
  18.92% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 3.02, 0, 0, 1); }
  22.72% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -5.661, 0, 0, 1); }
  30.23% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -10.852, 0, 0, 1); }
  50.25% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -2.282, 0, 0, 1); }
  70.27% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.519, 0, 0, 1); }
  100% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); opacity: 1; }
}

/* https://goo.gl/p1Hnde */
@keyframes translateRight {
  0% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -150, 0, 0, 1); opacity: 1; }
  7.61% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -69.561, 0, 0, 1); }
  11.41% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -39.355, 0, 0, 1); }
  15.12% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -17.801, 0, 0, 1); }
  18.92% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -3.02, 0, 0, 1); }
  22.72% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 5.661, 0, 0, 1); }
  30.23% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 10.852, 0, 0, 1); }
  50.25% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 2.282, 0, 0, 1); }
  70.27% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.519, 0, 0, 1); }
  100% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); opacity: 1; }
}