:root {
  color-scheme: light;
  background: #F7F7F9;
  color: #18191C;
  font-family: Arial, sans-serif;
  /* Amostras de E(u) = 6u^5 - 15u^4 + 10u^3 do storyboard. */
  --motion-ease: linear(0, .00856 10%, .05792 20%, .16308 30%, .31744 40%, .5 50%, .68256 60%, .83692 70%, .94208 80%, .99144 90%, 1);
}

* { box-sizing: border-box; }
body { margin: 0; }
.landing-redirecting body { visibility: hidden; }

.landing {
  min-height: 100svh;
  display: grid;
  grid-template-rows: 1fr auto 1fr;
  padding: 32px;
  overflow: clip;
}

.marca {
  grid-row: 2;
  display: grid;
  place-items: center;
  height: 200px;
}

.logo {
  grid-area: 1 / 1;
  width: 480px;
  max-width: 100%;
  height: auto;
}

#landing-motion { display: none; fill: #18191C; overflow: visible; }

.acao {
  grid-row: 3;
  align-self: start;
  justify-self: center;
  margin-top: 32px;
}

.acao a {
  display: inline-flex;
  width: 128px;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  padding: 12px 28px;
  border: 1px solid #18191C;
  border-radius: 999px;
  color: #F7F7F9;
  background: #18191C;
  text-decoration: none;
  font-size: 15px;
  line-height: 22px;
}

.acao a:hover { background: #34353A; }
.acao a:focus-visible { outline: 2px solid #18191C; outline-offset: 5px; }

.landing-animated #landing-motion { display: block; animation-name: motion-end; animation-timing-function: steps(1, end); }
.landing-animated #landing-signature { animation-name: signature-in; animation-timing-function: steps(1, end); }
.landing-animated #motion-net { animation-name: net; }
.landing-animated #motion-se { animation-name: se; }
.landing-animated #motion-duplicate { animation-name: duplicate; }
.landing-animated #motion-parens { animation-name: parens; }
.landing-animated #motion-left-paren { animation-name: left-paren; }
.landing-animated #motion-right-paren { animation-name: right-paren; }
.landing-animated #motion-exponent { animation-name: exponent; }
.landing-animated #motion-suffix { animation-name: suffix; }

.landing-animated .logo,
.landing-animated #landing-motion g {
  animation-duration: 9s;
  animation-iteration-count: 1;
  animation-fill-mode: both;
}

.landing-animated #landing-motion g { animation-timing-function: var(--motion-ease); }

/* 0–.60 entrada; .60–1.55 pausa; 1.55–2.25 convergência; 2.25–3.60 expressão. */
@keyframes net {
  0% { transform: translate(59.664063px, 0); opacity: 0; }
  6.666667%, 17.222222% { transform: translate(59.664063px, 0); opacity: 1; }
  22.222222% { transform: translate(71.664063px, 0); opacity: 1; }
  23.333333% { transform: translate(84px, 0); opacity: 1; }
  25%, 40% { transform: translate(100.671875px, 0); opacity: 1; }
  47.222222%, 66.666667% { transform: translate(136.992188px, 0); opacity: 1; }
  76.666667%, 100% { transform: translate(56.072188px, 0); opacity: 1; }
}

@keyframes se {
  0% { transform: translate(214.320313px, 0); opacity: 0; }
  6.666667%, 17.222222% { transform: translate(214.320313px, 0); opacity: 1; }
  22.222222% { transform: translate(254.320313px, 0); opacity: 1; }
  23.333333% { transform: translate(300px, 0); opacity: 1; }
  25%, 40% { transform: translate(341.671875px, 0); opacity: 1; }
  47.222222%, 66.666667% { transform: translate(291.648438px, 0); opacity: 1; }
  76.666667%, 100% { transform: translate(210.728438px, 0); opacity: 1; }
}

@keyframes duplicate {
  0% { transform: translate(332.585938px, 0); opacity: 0; }
  6.666667%, 17.222222% { transform: translate(332.585938px, 0); opacity: 1; }
  22.222222% { transform: translate(252px, 28px); opacity: 1; }
  23.333333% { transform: translate(168px, 28px); opacity: .95; }
  25%, 100% { transform: translate(100.671875px, 0); opacity: 0; }
}

/* Os parênteses são glifos que entram sobrepostos, nunca morph dos t. */
@keyframes parens {
  0%, 22.222222% { opacity: 0; }
  25%, 40% { opacity: 1; }
  47.222222%, 100% { opacity: 0; }
}

@keyframes left-paren {
  0%, 22.222222% { transform: translate(83.375875px, 0); }
  25%, 40% { transform: translate(63.375875px, 0); }
  47.222222%, 100% { transform: translate(103.375875px, 0); }
}

@keyframes right-paren {
  0%, 22.222222% { transform: translate(235.328125px, 0); }
  25%, 40% { transform: translate(255.328125px, 0); }
  47.222222%, 100% { transform: translate(235.328125px, 0); }
}

@keyframes exponent {
  0%, 22.222222% { transform: translate(272.624125px, 12px); }
  25%, 40% { transform: translate(292.624125px, 0); }
  47.222222%, 100% { transform: translate(272.624125px, 32px); }
}

/* 3.60–4.25 redução; 4.25–6 pausa; 6–6.90 OS com uma luz; 6.90–9 assinatura. */
@keyframes suffix {
  0%, 66.666667% { transform: translate(458.058438px, 12px); opacity: 0; filter: brightness(1); }
  70.555556% { opacity: .85; filter: brightness(1.45); }
  76.666667%, 100% { transform: translate(328.994063px, 0); opacity: 1; filter: brightness(1); }
}

@keyframes motion-end {
  0% { opacity: 1; }
  76.666667%, 100% { opacity: 0; }
}

@keyframes signature-in {
  0% { opacity: 0; }
  76.666667%, 100% { opacity: 1; }
}

.landing-reduced #landing-motion { display: none; }
.landing-reduced #landing-signature { opacity: 1; }
.landing-reduced #landing-motion,
.landing-reduced #landing-signature,
.landing-reduced #landing-motion g { animation: none; }

@media (max-width: 600px) {
  .landing { padding: 24px; }
  .marca { height: 160px; }
  .logo { width: 300px; }
  .acao { margin-top: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .landing-animated #landing-motion { display: none; }
  .landing-animated #landing-signature { opacity: 1; }
  .landing-animated #landing-motion,
  .landing-animated #landing-signature,
  .landing-animated #landing-motion g { animation: none; }
}