/* ==========================================================
   TECNOTEXTIL — CENTRAL DE LINKS
   effects.css
   Efeitos visuais e microinterações
   ========================================================== */

:root {
  --clfx-blue: #0063a5;
  --clfx-blue-light: #68add8;
  --clfx-blue-dark: #08345c;
  --clfx-red: #c4161c;
  --clfx-ease: cubic-bezier(.22, 1, .36, 1);
  --clfx-shift-x: 0px;
  --clfx-shift-y: 0px;
}


#clfxBoot[hidden],
#clfxAmbient[hidden],
.clfx-ring[hidden] {
  display: none !important;
}


/* ==========================================================
   AMBIENTE
   ========================================================== */

#clfxAmbient {
  position: fixed;
  inset: 0;

  z-index: 0;

  overflow: hidden;

  pointer-events: none;

  opacity: .8;

  transition:
    opacity 650ms ease;

  contain:
    layout paint;
}


#clfxAmbient svg {
  position: absolute;

  inset: -7%;

  width: 114%;
  height: 114%;

  transform:
    translate3d(
      var(--clfx-shift-x),
      var(--clfx-shift-y),
      0
    );

  transition:
    transform 850ms ease-out;
}


#clfxAmbient .clfx-mesh {
  animation:
    clfxFloat
    28s
    ease-in-out
    infinite
    alternate;

  transform-origin:
    center;
}


#clfxAmbient .clfx-mesh-secondary {
  animation-duration:
    37s;

  animation-direction:
    alternate-reverse;
}


#clfxAmbient .clfx-glow {
  animation:
    clfxGlow
    16s
    ease-in-out
    infinite
    alternate;
}


@keyframes clfxFloat {
  from {
    transform:
      translate3d(
        -9px,
        7px,
        0
      );
  }

  to {
    transform:
      translate3d(
        14px,
        -13px,
        0
      );
  }
}


@keyframes clfxGlow {
  from {
    opacity: .38;

    transform:
      translateX(-15px);
  }

  to {
    opacity: .75;

    transform:
      translateX(15px);
  }
}


body.clfx-calm
#clfxAmbient {
  opacity: .3;
}


html[data-clfx-motion="dinamico"]
#clfxAmbient {
  opacity: 1;
}


html[data-clfx-motion="minimo"]
#clfxAmbient {
  opacity: .12;
}


html[data-clfx-motion="minimo"]
#clfxAmbient .clfx-mesh,

html[data-clfx-motion="minimo"]
#clfxAmbient .clfx-glow {
  animation: none;
}


/*
 * Mantém a interface acima do fundo ambiental.
 */

body > .institutional-line,
body > .site-header,
body > #loginScreen,
body > main,
body > #errorBox,
body > .site-footer {
  position: relative;

  z-index: 1;
}


/* ==========================================================
   ABERTURA
   ========================================================== */

#clfxBoot {
  position: fixed;

  inset: 0;

  z-index: 90000;

  display: grid;

  place-items: center;

  overflow: hidden;

  padding: 24px;

  background:
    radial-gradient(
      ellipse at 50% 42%,
      rgba(255,255,255,.98),
      rgba(235,245,252,.98) 65%,
      rgba(218,236,247,.99)
    );

  color:
    var(--clfx-blue-dark);

  font-family:
    Montserrat,
    Arial,
    sans-serif;

  isolation:
    isolate;
}


#clfxBoot::before {
  content: "";

  position: absolute;

  inset: -35%;

  z-index: -1;

  opacity: .36;

  pointer-events: none;

  background:
    repeating-linear-gradient(
      90deg,
      transparent 0 44px,
      rgba(0,99,165,.045) 44px 45px
    );

  transform:
    perspective(650px)
    rotateX(14deg);
}


.clfx-boot-center {
  position: relative;

  width:
    min(720px, 100%);

  text-align:
    center;
}


.clfx-boot-mark {
  display: grid;

  place-items: center;

  width:
    min(220px, 55vw);

  min-height:
    42px;

  margin:
    0 auto 26px;
}


.clfx-boot-mark svg {
  width: 100%;

  height: auto;

  display: block;
}


.clfx-boot-kicker {
  margin:
    0 0 10px;

  color:
    var(--clfx-blue);

  font-size:
    10px;

  font-weight:
    800;

  letter-spacing:
    .22em;
}


.clfx-boot-title {
  margin: 0;

  font-size:
    clamp(
      25px,
      5vw,
      49px
    );

  font-weight:
    850;

  line-height:
    1.15;

  letter-spacing:
    -.055em;
}


.clfx-boot-subtitle {
  margin:
    12px 0 0;

  min-height:
    20px;

  color:
    #66849b;

  font-size:
    11px;

  line-height:
    1.7;
}


.clfx-boot-track {
  position: relative;

  width:
    min(560px, 86%);

  height:
    5px;

  margin:
    38px auto 0;

  border-radius:
    8px;

  background:
    rgba(0,99,165,.09);
}


.clfx-fragment {
  position: absolute;

  top: 0;

  width:
    calc(12.5% - 3px);

  height:
    5px;

  border-radius:
    4px;

  background:
    linear-gradient(
      90deg,
      #0063a5,
      #65b9e8
    );

  transform-origin:
    center;

  animation:
    clfxSegments
    1.2s
    ease-in-out
    infinite
    alternate;
}


.clfx-fragment:nth-child(1) {
  left: 0%;
  animation-delay: 0ms;
}

.clfx-fragment:nth-child(2) {
  left: 12.5%;
  animation-delay: 75ms;
}

.clfx-fragment:nth-child(3) {
  left: 25%;
  animation-delay: 150ms;
}

.clfx-fragment:nth-child(4) {
  left: 37.5%;
  animation-delay: 225ms;
}

.clfx-fragment:nth-child(5) {
  left: 50%;
  animation-delay: 300ms;
}

.clfx-fragment:nth-child(6) {
  left: 62.5%;
  animation-delay: 375ms;
}

.clfx-fragment:nth-child(7) {
  left: 75%;
  animation-delay: 450ms;
}

.clfx-fragment:nth-child(8) {
  left: 87.5%;
  animation-delay: 525ms;
}


@keyframes clfxSegments {
  from {
    opacity: .3;

    filter:
      brightness(.85);
  }

  to {
    opacity: 1;

    filter:
      brightness(1.15);
  }
}


.clfx-boot-pulse {
  position: absolute;

  left: 0;
  top: -4px;

  width: 18%;
  height: 13px;

  border-radius:
    50%;

  background:
    rgba(0,99,165,.22);

  filter:
    blur(9px);

  animation:
    clfxSweep
    2s
    ease-in-out
    infinite
    alternate;

  pointer-events:
    none;
}


@keyframes clfxSweep {
  from {
    transform:
      translateX(0);
  }

  to {
    transform:
      translateX(455%);
  }
}


.clfx-boot-caption {
  margin-top:
    20px;

  color:
    #7b92a3;

  font:
    700
    10px
    Consolas,
    monospace;

  letter-spacing:
    .11em;
}


.clfx-boot-particles {
  position: absolute;

  inset: 0;

  pointer-events: none;
}


.clfx-boot-particle {
  position: absolute;

  width: 4px;
  height: 4px;

  border-radius:
    50%;

  background:
    var(--clfx-blue-light);

  opacity: .35;

  animation:
    clfxParticle
    3.5s
    ease-in-out
    infinite
    alternate;
}


.clfx-boot-particle:nth-child(1) {
  left: 12%;
  top: 19%;
}


.clfx-boot-particle:nth-child(2) {
  left: 81%;
  top: 28%;

  animation-delay:
    .6s;
}


.clfx-boot-particle:nth-child(3) {
  left: 22%;
  top: 81%;

  animation-delay:
    1.2s;
}


.clfx-boot-particle:nth-child(4) {
  left: 77%;
  top: 76%;

  animation-delay:
    1.8s;
}


@keyframes clfxParticle {
  from {
    opacity: .2;

    transform:
      translateY(0)
      scale(.7);
  }

  to {
    opacity: .75;

    transform:
      translateY(-20px)
      scale(1.2);
  }
}


#clfxBoot.clfx-completing
.clfx-fragment {
  animation: none;

  opacity: 1;
}


#clfxBoot.clfx-completing
.clfx-boot-pulse {
  opacity: 0;
}


#clfxBoot.clfx-revealing {
  opacity: 0;

  pointer-events: none;

  transition:
    opacity 390ms ease-out;
}


#clfxBoot.clfx-completing
.clfx-boot-title,

#clfxBoot.clfx-completing
.clfx-boot-mark,

#clfxBoot.clfx-completing
.clfx-boot-subtitle,

#clfxBoot.clfx-completing
.clfx-boot-kicker,

#clfxBoot.clfx-completing
.clfx-boot-caption {
  opacity: 0;

  transition:
    opacity 220ms ease;
}


/* ==========================================================
   CARDS E BOTÕES
   ========================================================== */

.resource-card {
  --clfx-card-x: 50%;
  --clfx-card-y: 50%;

  position: relative;

  isolation:
    isolate;

  transition:
    transform 300ms var(--clfx-ease),
    box-shadow 300ms ease,
    border-color 250ms ease;
}


.resource-card::before {
  content: "";

  position: absolute;

  inset: 0;

  z-index: -1;

  border-radius:
    inherit;

  pointer-events:
    none;

  background:
    radial-gradient(
      280px circle at
        var(--clfx-card-x)
        var(--clfx-card-y),
      rgba(0,99,165,.09),
      transparent 75%
    );

  opacity: 0;

  transition:
    opacity 350ms ease;
}


@media (hover: hover) and (pointer: fine) {

  html:not([data-clfx-motion="minimo"])
  .resource-card:hover {
    transform:
      translateY(-2px);

    box-shadow:
      0 15px 36px
      rgba(8,52,92,.11),
      0 0 0 1px
      rgba(0,99,165,.05);
  }


  .resource-card:hover::before {
    opacity: 1;
  }

}


.resource-card.clfx-context {
  box-shadow:
    0 0 0 2px
    rgba(0,99,165,.15);
}


.button,
.category-button,
.tab,
.record-option {
  position: relative;

  -webkit-tap-highlight-color:
    transparent;
}


.clfx-ripple {
  position: absolute;

  z-index: 4;

  width: 20px;
  height: 20px;

  border-radius:
    50%;

  background:
    currentColor;

  opacity:
    .14;

  transform:
    translate(-50%, -50%)
    scale(0);

  pointer-events:
    none;

  animation:
    clfxRipple
    430ms
    ease-out
    forwards;
}


@keyframes clfxRipple {
  to {
    opacity: 0;

    transform:
      translate(-50%, -50%)
      scale(12);
  }
}


.clfx-confirmed
.material-symbols-rounded {
  color:
    #157b58;

  animation:
    clfxCheck
    400ms
    var(--clfx-ease);
}


@keyframes clfxCheck {
  from {
    transform:
      scale(.65)
      rotate(-14deg);
  }

  to {
    transform:
      scale(1)
      rotate(0);
  }
}


.clfx-ring {
  position: absolute;

  z-index: 5;

  inset: -5px;

  border:
    2px solid
    #168e68;

  border-radius:
    inherit;

  pointer-events:
    none;

  animation:
    clfxRing
    520ms
    ease-out
    forwards;
}


@keyframes clfxRing {
  from {
    opacity: .65;

    transform:
      scale(.96);
  }

  to {
    opacity: 0;

    transform:
      scale(1.1);
  }
}


.overlay:not([hidden])
.modal {
  will-change:
    transform,
    opacity;
}


.qr-frame {
  position: relative;

  overflow: hidden;
}


.qr-frame.clfx-scanning::after {
  content: "";

  position: absolute;

  z-index: 2;

  left: 8%;
  right: 8%;
  top: 0;

  height: 2px;

  pointer-events: none;

  background:
    rgba(0,99,165,.7);

  box-shadow:
    0 0 12px 3px
    rgba(0,99,165,.13);

  animation:
    clfxScan
    1050ms
    ease-in-out
    1
    forwards;
}


@keyframes clfxScan {
  from {
    top: 7%;
    opacity: 0;
  }

  12% {
    opacity: .65;
  }

  85% {
    opacity: .65;
  }

  to {
    top: 93%;
    opacity: 0;
  }
}


body.clfx-refreshing
.site-header {
  box-shadow:
    inset 0 -2px 0
    rgba(0,99,165,.17);
}


/* ==========================================================
   CONTROLES DE PREFERÊNCIAS
   ========================================================== */

.clfx-preferences {
  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap: 8px;
}


.clfx-pref-button {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap: 6px;

  min-height:
    30px;

  padding:
    6px 9px;

  border:
    1px solid
    rgba(0,99,165,.17);

  border-radius:
    7px;

  background:
    rgba(255,255,255,.65);

  color:
    #50738e;

  font:
    700
    10px
    Montserrat,
    Arial,
    sans-serif;

  cursor:
    pointer;
}


.clfx-pref-button:hover {
  border-color:
    rgba(0,99,165,.5);

  color:
    #0063a5;
}


.clfx-pref-button:focus-visible {
  outline:
    2px solid #0063a5;

  outline-offset:
    2px;
}


/* ==========================================================
   ACESSIBILIDADE E ECONOMIA DE ENERGIA
   ========================================================== */

html[data-clfx-motion="minimo"]
.resource-card {
  transition-duration:
    100ms;
}


html[data-clfx-motion="minimo"]
.clfx-ripple,

html[data-clfx-motion="minimo"]
.clfx-ring,

html[data-clfx-motion="minimo"]
.qr-frame.clfx-scanning::after {
  animation:
    none !important;

  display:
    none !important;
}


body.clfx-page-hidden
#clfxAmbient .clfx-mesh,

body.clfx-page-hidden
#clfxAmbient .clfx-glow {
  animation-play-state:
    paused;
}


@media (prefers-reduced-motion: reduce) {

  #clfxAmbient,
  #clfxAmbient *,
  #clfxBoot *,
  .clfx-ripple,
  .clfx-ring,
  .qr-frame.clfx-scanning::after {
    animation:
      none !important;

    transition:
      none !important;
  }


  .resource-card:hover {
    transform:
      none !important;
  }

}


@media (max-width: 600px) {

  #clfxAmbient {
    opacity: .35;
  }


  .clfx-boot-track {
    width: 90%;

    margin-top:
      28px;
  }


  .clfx-boot-title {
    font-size:
      29px;
  }


  .clfx-preferences {
    width: 100%;

    justify-content:
      center;
  }

}


@media print {

  #clfxAmbient,
  #clfxBoot,
  .clfx-preferences {
    display:
      none !important;
  }

}