html {
    scroll-behavior: smooth;
}

.future {
    font-family: "DM Serif Display", serif;
    font-weight: 800;
    font-style: normal;
}

.future-italic {
    font-family: "DM Serif Display", serif;
    font-weight: 400;
    font-style: italic;
}

:root {
    --color-info: oklch(70% 0.2 220);
    --color-info-content: oklch(98% 0.01 220);
    
    --color-success: oklch(65% 0.25 140);
    --color-success-content: oklch(98% 0.01 140);
    
    --color-warning: oklch(80% 0.25 80);
    --color-warning-content: oklch(20% 0.05 80);
    
    --color-error: oklch(65% 0.3 30);
    --color-error-content: oklch(98% 0.01 30);
}


.AnimacaoPulsar {
animation: pulsar 3.5s infinite ease-in-out;
}

@keyframes pulsar {
0% {
    transform: scale(1);
}
50% {
    transform: scale(1.05);
}
100% {
    transform: scale(1);
}
}

@keyframes slideIn {
0% {
    transform: translateX(-100%);
}
100% {
    transform: translateX(0);
}
}

@keyframes aparecer {
0% {
    opacity: 0;
}
100% {
    opacity: 1;
    }
}

.scroll-indicator {
z-index: 999999;
animation: scroll 1ms ease-in-out;
animation-timeline: scroll();
transform-origin: left;
height: 5px;
inset: 0;
position: fixed;
}

.animacaoAparecer{
opacity: 0;
transition: all 1s;
}

.animacaoEsquerda{
opacity: 0;
transform: translateX(-100%);
filter: blur(10px);
transition: all 1s;
}

.animacaoDireita{
opacity: 0;
transform: translateX(100%);
filter: blur(2px);
transition: all 2s;
}

.animacaoSubida{
opacity: 0;
transform: translateY(-50%);
filter: blur(5px);
transition: all 1s;
}

.animacaoDescida{
opacity: 0;
transform: translateY(50%);
filter: blur(5px);
transition: all 1s;
}

.mostrarEsquerda{
opacity: 1;
transform: translateX(0);
filter: blur(0);
transition: all 1s;
}

.mostrarDireita{
opacity: 1;
transform: translateX(0);
filter: blur(0);
transition: all 1s;
}

.mostrarSubida{
opacity: 1;
transform: translateY(0);
filter: blur(0);
transition: all 1s;
}

.mostrarDescida{
opacity: 1;
transform: translateY(0);
filter: blur(0);
transition: all 2s;
}

.mostrarAparecer{
opacity: 1;
transition: all 1s;
}

.Tecnologias :nth-child(2) {
transition-delay: 500ms;
}

.Tecnologias :nth-child(3) {
transition-delay: 700ms;
}

.Tecnologias :nth-child(4) {
transition-delay: 900ms;
}

.Flutuando {
    animation: flutuar 3s ease-in-out infinite;
}

@keyframes flutuar {
    0% { transform: translateY(0); }
    50% { transform: translateY(-15px); }
    100% { transform: translateY(0); }
}

.digitando::after {
    content: '|';
    animation: blink 0.4s step-end infinite;
    margin-left: 4px;
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

.digitando.parar-piscar::after {
  animation: none; 
  opacity: 0;    
}


.toast {
    position: fixed;
    inset-inline-start: auto;
    inset-inline-end: calc(0.25rem * 0);
    top: auto;
    bottom: calc(0.25rem * 0);
    margin: calc(0.25rem * 4);
    display: flex;
    min-width: fit-content;
    flex-direction: column;
    gap: calc(0.25rem * 2);
    background-color: transparent;
    white-space: nowrap;
    translate: var(--toast-x, 0) var(--toast-y, 0);
    & > * {
      animation: toast 0.25s ease-out;
    }
    &:where(.toast-start) {
      inset-inline-start: calc(0.25rem * 0);
      inset-inline-end: auto;
      --toast-x: 0;
    }
    &:where(.toast-center) {
      inset-inline-start: calc(1/2 * 100%);
      inset-inline-end: calc(1/2 * 100%);
      --toast-x: -50%;
    }
    &:where(.toast-end) {
      inset-inline-start: auto;
      inset-inline-end: calc(0.25rem * 0);
      --toast-x: 0;
    }
    &:where(.toast-bottom) {
      top: auto;
      bottom: calc(0.25rem * 0);
      --toast-y: 0;
    }
    &:where(.toast-middle) {
      top: calc(1/2 * 100%);
      bottom: auto;
      --toast-y: -50%;
    }
    &:where(.toast-top) {
      top: calc(0.25rem * 0);
      bottom: auto;
      --toast-y: 0;
    }
  }

.alert {
    display: grid;
    align-items: center;
    gap: calc(0.25rem * 4);
    border-radius: var(--radius-box);
    padding-inline: calc(0.25rem * 4);
    padding-block: calc(0.25rem * 3);
    color: var(--color-base-content);
    background-color: var(--alert-color, var(--color-base-200));
    justify-content: start;
    justify-items: start;
    grid-auto-flow: column;
    grid-template-columns: auto minmax(auto, 1fr);
    text-align: start;
    border: var(--border) solid var(--color-base-200);
    font-size: 0.875rem;
    line-height: 1.25rem;
    background-size: auto, calc(var(--noise) * 100%);
    background-image: none, var(--fx-noise);
    box-shadow: 0 3px 0 -2px oklch(100% 0 0 / calc(var(--depth) * 0.08)) inset, 0 1px color-mix( in oklab, color-mix(in oklab, #000 20%, var(--alert-color, var(--color-base-200))) calc(var(--depth) * 20%), #0000 ), 0 4px 3px -2px oklch(0% 0 0 / calc(var(--depth) * 0.08));
    &.alert-outline {
      background-color: transparent;
      color: var(--alert-color);
      box-shadow: none;
      background-image: none;
    }
    &.alert-dash {
      background-color: transparent;
      color: var(--alert-color);
      border-style: dashed;
      box-shadow: none;
      background-image: none;
    }
    &.alert-soft {
      color: var(--alert-color, var(--color-base-content));
      background: color-mix( in oklab, var(--alert-color, var(--color-base-content)) 8%, var(--color-base-100) );
      border-color: color-mix( in oklab, var(--alert-color, var(--color-base-content)) 10%, var(--color-base-100) );
      box-shadow: none;
      background-image: none;
    }
  }


.alert-error {
    border-color: var(--color-error);
    background-color: var(--color-error);
    color: var(--color-error-content);
}

.alert-info {
    border-color: var(--color-info);
    background-color: var(--color-info);
    color: var(--color-info-content);
}

.alert-success {
    border-color: var(--color-success);
    background-color: var(--color-success);
    color: var(--color-success-content);
}

.alert-warning {
    border-color: var(--color-warning);
    background-color: var(--color-warning);
    color: var(--color-warning-content);
}

.bg-success {
    background-color: var(--color-success);
}

.bg-warning {
    background-color: var(--color-warning);
}

.bg-error {
    background-color: var(--color-error);
}

.bg-info {
    background-color: var(--color-info);
}