/* A SOLUÇÃO — notebook mockup, loop CSS 15s. Prefix .ehts-anim */

.ehts-anim {
  --ehts-dur: 15s;
  --ehts-accent: #6355C0;
  --screen-top: 6.89%;
  --screen-left: 17.58%;
  --screen-width: 61.72%;
  --screen-height: 58.36%;
  --ehts-ref: 480px;
  --ehts-ref-h: 302px;
  --ehts-logo-w: 240px;
  --ehts-logo-h: calc(var(--ehts-logo-w) * 1165 / 2791);
  --ehts-tree-w: calc(var(--ehts-logo-w) * 1088 / 2791);
  --ehts-tree-cx: calc(var(--ehts-logo-w) * 539 / 2791);
  --ehts-stage-w: 480px;
  --ehts-stage-h: 302px;
  --ehts-card-w: 280px;
  --ehts-logo-scale: 0.46;
  --ehts-logo-x1: calc(var(--ehts-stage-w) / 2 - var(--ehts-tree-cx));
  --ehts-logo-y1: calc(var(--ehts-stage-h) / 2 - var(--ehts-logo-h) / 2);
  --ehts-logo-x-mid: calc(var(--ehts-stage-w) / 2 - var(--ehts-logo-w) / 2);
  --ehts-logo-x2: calc(var(--ehts-stage-w) / 2 - var(--ehts-logo-w) * var(--ehts-logo-scale) / 2);
  --ehts-logo-y2: 20px;
  position: relative;
  width: 88%;
  max-width: 100%;
  min-width: 0;
  margin-inline: auto;
  pointer-events: none;
  user-select: none;
}

.ehts-anim__device {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  filter:
    drop-shadow(0 16px 28px rgba(98, 84, 191, .28))
    drop-shadow(0 6px 14px rgba(98, 84, 191, .16));
}

.ehts-anim__screen {
  position: absolute;
  top: var(--screen-top);
  left: var(--screen-left);
  width: var(--screen-width);
  height: var(--screen-height);
  overflow: hidden;
  border-radius: 1.2%;
  background: #FBFAFF;
  container-type: size;
  container-name: ehts-screen;
}

.ehts-anim__stage {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--ehts-stage-w);
  height: var(--ehts-stage-h);
  transform: scale(min(100cqw / var(--ehts-ref), 100cqh / var(--ehts-ref-h)));
  transform-origin: top left;
  font-family: var(--body);
  color: #2A2740;
}

.ehts-anim__logo-move {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--ehts-logo-w);
  transform-origin: top left;
  z-index: 2;
  animation: ehts-anim-logo-move var(--ehts-dur) infinite both;
}

.ehts-anim__logo-clip {
  overflow: hidden;
  width: var(--ehts-tree-w);
  height: auto;
  animation: ehts-anim-clip var(--ehts-dur) infinite both;
}

.ehts-anim__logo {
  display: block;
  width: var(--ehts-logo-w);
  height: auto;
  max-width: none;
  image-rendering: auto;
}

.ehts-anim__card {
  position: absolute;
  left: 50%;
  top: 8px;
  width: var(--ehts-card-w);
  margin-left: calc(var(--ehts-card-w) / -2);
  box-sizing: border-box;
  padding: 80px 22px 18px;
  background: #fff;
  border: 1px solid #ECE9F8;
  border-radius: 16px;
  box-shadow: 0 18px 44px -24px rgba(45, 35, 100, .28);
  z-index: 1;
  animation: ehts-anim-card var(--ehts-dur) infinite both;
}

.ehts-anim__sub {
  margin: 0 0 10px;
  text-align: center;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.35;
  color: #6E6B83;
}

.ehts-anim__field-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ehts-anim__field-group + .ehts-anim__field-group {
  margin-top: 8px;
}

.ehts-anim__label {
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.2;
  color: #2A2740;
}

.ehts-anim__input {
  box-sizing: border-box;
  height: 38px;
  padding: 0 12px;
  border: 1px solid #E4E0F4;
  border-radius: 9px;
  display: flex;
  align-items: center;
  background: #fff;
  font-size: 13px;
  color: #4A4763;
  letter-spacing: 0;
}

.ehts-anim__typed {
  opacity: 0;
}

.ehts-anim__typed--email {
  animation: ehts-anim-typed-email var(--ehts-dur) infinite both;
  animation-timing-function: steps(1, end);
}

.ehts-anim__typed--pass {
  letter-spacing: 0.12em;
  animation: ehts-anim-typed-pass var(--ehts-dur) infinite both;
  animation-timing-function: steps(1, end);
}

.ehts-anim__btn {
  margin-top: 12px;
  box-sizing: border-box;
  width: 100%;
  height: 42px;
  border-radius: 9px;
  background: var(--ehts-accent);
  color: #fff;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-origin: center center;
  animation: ehts-anim-btn var(--ehts-dur) infinite both;
}

.ehts-anim__dash {
  position: absolute;
  inset: 0;
  z-index: 3;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  background: #F7F6FC;
  opacity: 0;
  animation: ehts-anim-dash var(--ehts-dur) infinite both;
}

.ehts-anim__dash-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 11px;
  background: #fff;
  border-bottom: 1px solid #ECE9F8;
  flex-shrink: 0;
}

.ehts-anim__dash-brand {
  height: 20px;
  width: auto;
  max-width: 100px;
  object-fit: contain;
  object-position: left center;
  flex-shrink: 0;
}

.ehts-anim__dash-pill {
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  color: var(--ehts-accent);
  background: #EFEAFB;
  border-radius: 999px;
  padding: 6px 10px;
  white-space: nowrap;
}

.ehts-anim__dash-link {
  font-size: 10px;
  font-weight: 500;
  color: #6E6B83;
  white-space: nowrap;
}

.ehts-anim__dash-chip {
  margin-left: auto;
  font-size: 9px;
  font-weight: 600;
  line-height: 1;
  color: #6E6B83;
  border: 1px solid #E4E0F4;
  border-radius: 999px;
  padding: 5px 9px;
  white-space: nowrap;
}

.ehts-anim__dash-chip--on {
  margin-left: auto;
  color: #fff;
  background: var(--ehts-accent);
  border-color: var(--ehts-accent);
}

.ehts-anim__dash-chip--on + .ehts-anim__dash-chip {
  margin-left: 0;
}

.ehts-anim__dash-body {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 10px 12px 12px;
}

.ehts-anim__dash-card {
  min-width: 0;
  background: #fff;
  border: 1px solid #ECE9F8;
  border-radius: 10px;
  padding: 8px 8px 7px;
  display: flex;
  flex-direction: column;
}

.ehts-anim__dash-title {
  margin: 0;
  font-size: 8px;
  font-weight: 600;
  color: #2A2740;
  letter-spacing: -0.01em;
}

.ehts-anim__dash-meta {
  margin: 2px 0 6px;
  font-size: 6.5px;
  font-weight: 400;
  color: #6E6B83;
}

.ehts-anim__tree {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  border-radius: 4px;
}

.ehts-anim__tree--fase {
  display: grid;
  grid-template-columns: 1fr 18%;
  grid-template-rows: 1.12fr 1fr;
  grid-template-areas:
    "exec know"
    "rec know";
  gap: 2px;
}

.ehts-anim__tree--trt {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  grid-template-rows: 1fr 28%;
  grid-template-areas:
    "trt03 trt09"
    "trt03 mosaic";
  gap: 2px;
}

.ehts-anim__cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-align: center;
  padding: 4px 3px;
}

.ehts-anim__cell span {
  font-size: 7px;
  font-weight: 600;
  line-height: 1.15;
}

.ehts-anim__cell strong {
  font-size: 6.5px;
  font-weight: 600;
  margin-top: 2px;
}

.ehts-anim__cell--exec { grid-area: exec; background: #1E4B9A; }
.ehts-anim__cell--rec { grid-area: rec; background: #2A8A9A; }
.ehts-anim__cell--know { grid-area: know; background: #1F8A5B; }
.ehts-anim__cell--trt03 { grid-area: trt03; background: #1E4B9A; }
.ehts-anim__cell--trt09 { grid-area: trt09; background: #2A8A9A; }

.ehts-anim__mosaic {
  grid-area: mosaic;
  display: grid;
  grid-template-columns: 1.4fr 1fr 0.7fr 0.55fr;
  grid-template-rows: 1fr 0.7fr;
  gap: 2px;
}

.ehts-anim__tile { display: block; }
.ehts-anim__tile--a { grid-column: 1; grid-row: 1 / 3; background: #1F8A5B; }
.ehts-anim__tile--b { grid-column: 2; grid-row: 1 / 3; background: #A45A1A; }
.ehts-anim__tile--c { grid-column: 3; grid-row: 1; background: #C43B4A; }
.ehts-anim__tile--d { grid-column: 4; grid-row: 1; background: #C45A9A; }
.ehts-anim__tile--e { grid-column: 3; grid-row: 2; background: #6B3FA0; }
.ehts-anim__tile--f { grid-column: 4; grid-row: 2; background: #2E7D4F; }


@keyframes ehts-anim-clip {
  0%, 13.333% {
    width: var(--ehts-tree-w);
    animation-timing-function: cubic-bezier(.5, 0, .2, 1);
  }
  26.667%, 99.5% {
    width: var(--ehts-logo-w);
  }
  100% {
    width: var(--ehts-tree-w);
  }
}

@keyframes ehts-anim-logo-move {
  0% {
    opacity: 0;
    transform: translate(var(--ehts-logo-x1), var(--ehts-logo-y1)) scale(1);
  }
  13.333% {
    opacity: 1;
    transform: translate(var(--ehts-logo-x1), var(--ehts-logo-y1)) scale(1);
    animation-timing-function: cubic-bezier(.5, 0, .2, 1);
  }
  26.667%, 32% {
    opacity: 1;
    transform: translate(var(--ehts-logo-x-mid), var(--ehts-logo-y1)) scale(1);
  }
  42%, 72.667% {
    opacity: 1;
    transform: translate(var(--ehts-logo-x2), var(--ehts-logo-y2)) scale(var(--ehts-logo-scale));
  }
  76%, 99.5% {
    opacity: 0;
    transform: translate(var(--ehts-logo-x2), var(--ehts-logo-y2)) scale(var(--ehts-logo-scale));
  }
  100% {
    opacity: 0;
    transform: translate(var(--ehts-logo-x1), var(--ehts-logo-y1)) scale(1);
  }
}

@keyframes ehts-anim-card {
  0%, 32% {
    opacity: 0;
    transform: translateY(14px);
  }
  50%, 72.667% {
    opacity: 1;
    transform: translateY(0);
  }
  76%, 99.5% {
    opacity: 0;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(14px);
  }
}

@keyframes ehts-anim-dash {
  0%, 74% {
    opacity: 0;
    transform: translateY(10px);
  }
  80%, 96% {
    opacity: 1;
    transform: translateY(0);
  }
  99.5% {
    opacity: 0;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(10px);
  }
}

@keyframes ehts-anim-typed-email {
  0%, 53.333% { opacity: 0; }
  53.334%, 100% { opacity: 1; }
}

@keyframes ehts-anim-typed-pass {
  0%, 60% { opacity: 0; }
  60.001%, 100% { opacity: 1; }
}

@keyframes ehts-anim-btn {
  0%, 70% {
    transform: scale(1);
    filter: brightness(1);
  }
  71.333% {
    transform: scale(0.97);
    filter: brightness(0.9);
  }
  72.667%, 100% {
    transform: scale(1);
    filter: brightness(1);
  }
}

@media (max-width: 767px) {
  .ehts-anim {
    max-width: min(100%, 28rem);
    margin-inline: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ehts-anim__logo-move,
  .ehts-anim__logo-clip,
  .ehts-anim__card,
  .ehts-anim__typed--email,
  .ehts-anim__typed--pass,
  .ehts-anim__btn,
  .ehts-anim__dash {
    animation: none;
  }

  .ehts-anim__logo-move,
  .ehts-anim__card {
    opacity: 0;
  }

  .ehts-anim__dash {
    opacity: 1;
    transform: none;
  }
}