/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

:root {
  --blue: #4287f5;
}

[data-theme="dark"] {
  --text-color: #dfdfdf;
  --background-color: #181818;
}

[data-theme="light"] {
  --text-color: #181818;
  --background-color: #dfdfdf;
}


body {
  margin: 0;
  padding: 0;

  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
  color: var(--text-color);

  background-color: var(--background-color);
  transition: background-color 0.4s ease, color 0.4s ease;
}

.sr-only {
  position:absolute;
  left:-10000px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}

.triangle {
  position: absolute;
  filter: drop-shadow(0 8px 16px rgba(66, 135, 245, 0.35));
  animation: floatingtriangle 4s ease-in-out 1s infinite;
}

@keyframes floatingtriangle {
  0% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(15px);
  }

  100% {
    transform: translateY(0px);
  }
}

@keyframes floatingtrianglemin {
  0% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-15px);
  }

  100% {
    transform: translateY(0px);
  }
}


.reveal {
  opacity: 0;
  transform: translateY(30px) scale(0.95);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal-slow.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition: opacity 1s ease, transform 1s ease;
}

.reveal-slower.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition: opacity 1.3s ease, transform 1.3s ease;
}