/* Original motion artwork for the public TMZX Frotas pages. */
.landing {
  --future-ink: #060b19;
  --future-panel: #111a31;
  --future-line: #46567f;
  --future-pink: #ff3d9a;
  --future-blue: #66d9ff;
  background: var(--future-ink);
  color: #f6f7ff;
  overflow: hidden;
}

.landing-header {
  background: #07101ee8;
  border-bottom: 1px solid #ffffff21;
  backdrop-filter: blur(20px);
}
.landing-header .brand-mark,
.auth-art .brand-mark {
  background: linear-gradient(135deg, #ff4aa8, #b85cff);
  color: #fff;
  border-radius: 3px;
  box-shadow: 0 0 28px #ff3d9a66;
}
.landing-header nav a:hover,
.landing-login:hover { color: #ff8fc9; }
.landing-header .button-primary,
.landing-hero .button-primary,
.landing-final .button-primary {
  background: var(--future-pink);
  color: #fff;
  border-color: #ff84be;
  border-radius: 3px;
  box-shadow: 0 8px 30px #ff3d9a40;
}
.landing-header .button-primary:hover,
.landing-hero .button-primary:hover,
.landing-final .button-primary:hover {
  background: #ff65ae;
  box-shadow: 0 10px 42px #ff3d9a70;
}

.landing-hero {
  min-height: min(780px, 92vh);
  display: block;
  position: relative;
  isolation: isolate;
  text-align: left;
  padding: clamp(90px, 10vw, 150px) max(6vw, 28px) 155px;
  background: radial-gradient(circle at 73% 45%, #22204f 0, #101832 32%, #070d1b 72%);
}
.landing-hero::before,
.landing-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.landing-hero::before {
  z-index: 1;
  background: linear-gradient(90deg, #070c1b 0, #070c1bf2 30%, #070c1b70 62%, transparent 84%);
}
.landing-hero::after {
  z-index: 0;
  opacity: .42;
  background: repeating-linear-gradient(0deg, transparent 0 3px, #ffffff06 4px 5px);
  mix-blend-mode: screen;
}
.landing-hero-copy { position: relative; z-index: 3; width: min(810px, 72vw); }
.landing-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid #ff79bb65;
  background: #ff3d9a14;
  color: #ffd8ec;
  border-radius: 3px;
  padding: 10px 13px;
  font: 800 10px/1.2 Archivo, sans-serif;
  letter-spacing: .21em;
}
.landing-kicker i {
  display: block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ff3d9a;
  box-shadow: 0 0 0 4px #ff3d9a33, 0 0 14px #ff3d9a;
  animation: futurePulse 2.3s ease-in-out infinite;
}
.landing-hero h1 {
  max-width: none;
  margin: 30px 0 25px;
  font: 800 clamp(58px, 7.3vw, 118px)/.92 Archivo, sans-serif;
  letter-spacing: -.09em;
  text-transform: uppercase;
  text-wrap: balance;
}
.landing-hero h1 em {
  display: inline-block;
  margin-top: 9px;
  max-width: 900px;
  font-size: .62em;
  line-height: 1.05;
  letter-spacing: -.075em;
  color: #ff77bb;
  background: linear-gradient(100deg, #ff5eae 8%, #e396f6 55%, #83dfff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.landing-hero p {
  max-width: 570px;
  margin: 0;
  color: #c5d1e7;
  font-size: 15px;
  line-height: 1.8;
}
.landing-cta { justify-content: flex-start; margin-top: 30px; }
.landing-cta .button { border-radius: 3px; padding: 15px 23px; font-size: 12px; }
.landing-cta .button-primary span { transition: transform .25s ease; }
.landing-cta .button-primary:hover span { transform: translateX(5px); }
.landing-cta .button-secondary {
  background: #ffffff0b;
  border-color: #a8b9db70;
  color: #e2e9f9;
}
.landing-cta .button-secondary:hover { background: #ffffff18; }
.landing-trust { justify-content: flex-start; gap: 0; margin-top: 45px; color: #a7b9d5; }
.landing-trust span { padding: 0 19px; border-right: 1px solid #7385ac66; }
.landing-trust span:first-child { padding-left: 0; }
.landing-trust span:last-child { border-right: 0; }
.landing-trust span::first-letter { color: #ff6eaf; }
.future-edge-label {
  position: absolute;
  right: 26px;
  bottom: 80px;
  z-index: 2;
  color: #ffffff7d;
  writing-mode: vertical-rl;
  font: 800 9px Archivo, sans-serif;
  letter-spacing: .22em;
}

.future-art { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.future-art::before {
  content: "";
  position: absolute;
  width: 65vw;
  height: 65vw;
  max-width: 980px;
  max-height: 980px;
  right: -13vw;
  top: -15vw;
  border-radius: 50%;
  background: radial-gradient(circle, #ff3d9a35 0, #9b5dff25 35%, #3c7aff0b 60%, transparent 70%);
  filter: blur(20px);
  animation: futureBreathe 7s ease-in-out infinite alternate;
}
.future-grid {
  position: absolute;
  width: 72%;
  height: 90%;
  right: -10%;
  bottom: -35%;
  background-image: linear-gradient(#66d9ff31 1px, transparent 1px), linear-gradient(90deg, #66d9ff31 1px, transparent 1px);
  background-size: 60px 60px;
  transform: perspective(580px) rotateX(66deg) rotateZ(-17deg);
  transform-origin: center;
  opacity: .42;
  mask-image: linear-gradient(transparent 5%, #000 38%, transparent 95%);
  animation: futureGrid 12s linear infinite;
}
.future-routes { position: absolute; right: -5%; top: 0; width: 78%; height: 100%; overflow: visible; opacity: .75; }
.future-routes path {
  fill: none;
  stroke: #ff63ad;
  stroke-width: 2;
  stroke-dasharray: 5 17;
  filter: drop-shadow(0 0 8px #ff3d9a);
  animation: futureRoute 14s linear infinite;
}
.future-routes path:nth-child(2) { stroke: #75dbff; animation-duration: 19s; animation-direction: reverse; opacity: .75; }
.future-routes path:nth-child(3) { stroke: #b285ff; animation-duration: 24s; opacity: .55; }
.future-orbit {
  position: absolute;
  left: 76%;
  top: 44%;
  border: 1px solid #d97bff8c;
  border-radius: 50%;
  transform: translate(-50%, -50%) rotate(-19deg);
  box-shadow: inset 0 0 30px #db65ff13, 0 0 36px #db65ff10;
}
.future-orbit-one { width: min(43vw, 590px); height: min(43vw, 590px); border-style: dashed; animation: futureOrbit 28s linear infinite; }
.future-orbit-two { width: min(33vw, 455px); height: min(33vw, 455px); border-color: #70d9ff8c; transform: translate(-50%, -50%) rotate(29deg); animation: futureOrbitReverse 23s linear infinite; }
.future-orbit-three { width: min(23vw, 320px); height: min(23vw, 320px); border-color: #ff66ad99; box-shadow: 0 0 35px #ff3d9a2f, inset 0 0 40px #ff3d9a18; }
.future-core {
  position: absolute;
  left: 76%;
  top: 44%;
  width: 172px;
  height: 172px;
  border: 1px solid #ff87c0;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 50% 46%, #ff3d9a46, #17162b 64%, #080e20 100%);
  box-shadow: 0 0 0 13px #ff3d9a0d, 0 0 90px #ff3d9a54, inset 0 0 34px #ff3d9a36;
  animation: futureCore 5s ease-in-out infinite alternate;
}
.future-core::before,
.future-core::after { content: ""; position: absolute; width: 205px; height: 1px; background: #ff70b277; }
.future-core::after { transform: rotate(90deg); }
.future-core-mark { color: white; font: 800 90px/.9 Archivo, sans-serif; letter-spacing: -.1em; padding-right: 10px; text-shadow: 0 0 32px #ff3d9a; }
.future-core-label { position: absolute; bottom: 26px; color: #ffccdf; font: 700 7px Archivo, sans-serif; letter-spacing: .18em; }
.future-core-cross { position: absolute; inset: 18px; border: 1px dashed #ffffff44; border-radius: 50%; }
.future-ping { position: absolute; width: 9px; height: 9px; border: 2px solid #fff; border-radius: 50%; background: #ff3d9a; box-shadow: 0 0 0 6px #ff3d9a35, 0 0 22px #ff3d9a; animation: futurePing 3s ease-out infinite; }
.future-ping-one { left: 58%; top: 24%; }
.future-ping-two { left: 92%; top: 31%; animation-delay: 1s; background: #65dbff; box-shadow: 0 0 0 6px #65dbff35, 0 0 22px #65dbff; }
.future-ping-three { left: 86%; top: 71%; animation-delay: 2s; }
.future-data {
  position: absolute;
  z-index: 1;
  display: grid;
  gap: 5px;
  padding: 10px 14px;
  border: 1px solid #ffffff5e;
  border-left: 2px solid #ff63ad;
  background: #091329b8;
  backdrop-filter: blur(12px);
  box-shadow: 0 10px 38px #02081799;
  animation: futureFloat 5s ease-in-out infinite alternate;
}
.future-data small { color: #ff8fc6; font: 700 8px Archivo, sans-serif; letter-spacing: .18em; }
.future-data strong { color: #fff; font: 800 10px Archivo, sans-serif; letter-spacing: .08em; }
.future-data-one { top: 23%; right: 5%; }
.future-data-two { bottom: 19%; right: 25%; animation-delay: -2s; border-left-color: #75dbff; }
.future-data-two small { color: #88dfff; }

.landing-preview {
  z-index: 2;
  margin: -68px auto 95px;
  border: 1px solid #a375e485;
  background: #121a33;
  box-shadow: 0 42px 95px #0009, 0 0 55px #8c5bff27;
  animation: futureFloat 6s ease-in-out infinite alternate;
}
.landing-preview::after {
  content: "";
  position: absolute;
  inset: -50% auto -50% -45%;
  width: 34%;
  transform: rotate(20deg);
  background: linear-gradient(90deg, transparent, #ffffff0e, transparent);
  animation: futureSheen 8s ease-in-out infinite;
  pointer-events: none;
}
.landing-section-head .eyebrow,
.landing-flow .eyebrow,
.landing-final .eyebrow { color: #ff75b7; }
.landing-section-head h2,
.landing-final h2 { text-transform: uppercase; letter-spacing: -.075em; }
.landing-section-head h2::first-line { color: #fff; }
.landing-feature-grid article {
  position: relative;
  border-color: #6574a25c;
  border-radius: 5px;
  background: linear-gradient(145deg, #1a2440, #10192e 75%);
  transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.landing-feature-grid article::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, #ff3d9a, #75dfff); opacity: .75; }
.landing-feature-grid article:hover { transform: translateY(-9px); border-color: #f57bb9a8; box-shadow: 0 22px 55px #0007, 0 0 25px #ff3d9a1c; }
.landing-feature-grid .feature-icon { color: #ff80bb; }
.landing-flow { background: radial-gradient(circle at 80% 20%, #332453, transparent 45%), #0d162b; }
.flow-grid>div { border-top-color: #ff65aa; }
.landing-final {
  border-radius: 6px;
  border-color: #b46adbb3;
  background: radial-gradient(circle at 50% -30%, #9236848c, transparent 60%), linear-gradient(125deg, #1a1d40, #121a32);
  box-shadow: 0 25px 90px #0008, 0 0 70px #e441a122;
}
.landing-footer { background: #070c19; }

.auth-art {
  background: radial-gradient(circle at 75% 42%, #433066 0, #182040 34%, #080e20 78%);
}
.auth-art::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(#ffffff0a 1px, transparent 1px), linear-gradient(90deg, #ffffff0a 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: linear-gradient(90deg, transparent 15%, #000 100%);
}
.auth-art::after { border-color: #ff64a95e; box-shadow: 0 0 0 85px #ff4aa80e, 0 0 0 180px #b860ff0b; animation: futureBreathe 6s ease-in-out infinite alternate; }
.auth-copy h1 em { color: #ff83c0; }
.auth-copy p { color: #c3cbe3; }
.auth-art .eyebrow.light { color: #ff91c6; }
.auth-lines span { background: #ff56aa; }
.auth-lines span:nth-child(2),
.auth-lines span:nth-child(3) { background: #6d6caa; }

@keyframes futureRoute { to { stroke-dashoffset: -440; } }
@keyframes futureOrbit { to { transform: translate(-50%, -50%) rotate(341deg); } }
@keyframes futureOrbitReverse { to { transform: translate(-50%, -50%) rotate(-331deg); } }
@keyframes futureCore { to { box-shadow: 0 0 0 20px #ff3d9a05, 0 0 115px #ff3d9a72, inset 0 0 50px #ff3d9a4a; } }
@keyframes futureBreathe { to { transform: scale(1.13); opacity: .68; } }
@keyframes futureGrid { to { background-position: 0 120px, 120px 0; } }
@keyframes futurePing { 50% { transform: scale(1.45); opacity: .55; } 100% { transform: scale(1); opacity: 1; } }
@keyframes futurePulse { 50% { opacity: .5; box-shadow: 0 0 0 8px #ff3d9a15, 0 0 18px #ff3d9a; } }
@keyframes futureFloat { to { transform: translateY(-12px); } }
@keyframes futureSheen { 0%, 62% { left: -45%; } 100% { left: 145%; } }

@media (max-width: 1000px) {
  .landing-hero { min-height: 700px; padding-top: 110px; }
  .landing-hero-copy { width: min(760px, 88vw); }
  .future-art { opacity: .6; }
  .future-orbit, .future-core { left: 83%; }
  .future-data { display: none; }
}
@media (max-width: 700px) {
  .landing-hero { min-height: 620px; padding: 85px 25px 95px; }
  .landing-hero::before { background: linear-gradient(90deg, #070c1bf2, #070c1b9e); }
  .landing-hero-copy { width: 100%; }
  .landing-hero h1 { font-size: clamp(42px, 11vw, 74px); }
  .landing-hero h1 em { font-size: .66em; }
  .landing-hero p { font-size: 13px; max-width: 440px; }
  .future-core { left: 78%; top: 46%; width: 120px; height: 120px; opacity: .7; }
  .future-core-mark { font-size: 61px; }
  .future-core-label { display: none; }
  .future-orbit { left: 78%; top: 46%; }
  .future-orbit-one { width: 480px; height: 480px; }
  .future-orbit-two { width: 340px; height: 340px; }
  .future-orbit-three { width: 220px; height: 220px; }
  .future-edge-label { display: none; }
  .landing-preview { margin-top: -35px; }
}
@media (max-width: 490px) {
  .landing-header .auth-logo { font-size: 16px; }
  .landing-hero { min-height: 660px; padding: 82px 20px 65px; }
  .landing-kicker { font-size: 8px; letter-spacing: .13em; }
  .landing-hero h1 { margin-top: 30px; font-size: clamp(40px, 11.7vw, 58px); }
  .landing-hero p { font-size: 12px; }
  .landing-cta { width: min(290px, 100%); }
  .landing-trust { gap: 8px 12px; margin-top: 27px; font-size: 9px; }
  .landing-trust span { padding: 0; border: 0; }
  .future-art { opacity: .36; }
  .future-core, .future-orbit { left: 100%; top: 32%; }
  .future-grid { width: 120%; }
  .landing-preview { display: block; width: calc(100% - 32px); height: 185px; margin: -18px auto 55px; border-radius: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .landing *, .auth-art *, .landing-hero::before, .landing-hero::after, .auth-art::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}