@import "tailwindcss";
@plugin "daisyui";

:root {
  --background: #ffffff;
  --foreground: #171717;
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-gBlack: #111112;
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
  --color-hackrpi-clouds-green: #00ff7f;
  --color-hackrpi-clouds-blue: #87CEEB;
  --color-hackrpi-clouds-dark-blue: #00152b;
  --breakpoint-desktop: 860px;
  --breakpoint-xs: 475px;
  --breakpoint-2xs: 375px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #0a0a0a;
    --foreground: #ededed;
  }
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: Arial, Helvetica, sans-serif;
}


/* 
To make the text animation, ease in width from 0 -> 100%, then ease tranform (1, 1) -> (0, 1) 
Also for the text, it is needed to have its opacity 0 then put to 1 once the width is 100%
*/
.text-animation-layer {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 0%;
  height: 100%;
  background-color: #1d1b20;
  transform-origin: right center 0px;
  z-index: 10;
  translate: none;
  rotate: none;
  scale: none;
  transform: scale(1, 1);
}

#links-animate {
  --norris-primary: #bfdbfe;
  --norris-secondary: #fff;
  --norris-size: 2.75rem;
  --norris-time: 25ms;
}

#links-animate .norris-line {
  cursor: pointer;
  overflow: hidden;
  line-height: var(--norris-size);
}

#links-animate .norris-char {
  position: relative;
  display: inline-block;
  color: transparent;
  white-space: pre;
}

#links-animate .norris-char::before,
#links-animate .norris-char::after {
  position: absolute;
  left: 0;
  content: attr(data-char);
  color: var(--norris-primary);
  white-space: pre;
  transition: transform ease-in-out calc(var(--norris-time) * 10), color ease-in-out calc(var(--norris-time) * 10), opacity ease-in-out calc(var(--norris-time) * 10);
  transition-delay: calc(var(--index) * var(--norris-time));
}

#links-animate .norris-char::before {
  transform: translateY(0);
  opacity: 1;
}

#links-animate .norris-char::after {
  transform: translateY(var(--norris-size));
  opacity: 0;
}

#links-animate .norris-line:hover .norris-char::before {
  transform: translateY(calc(-1 * var(--norris-size)));
  color: var(--norris-secondary);
  opacity: 0;
}

#links-animate .norris-line:hover .norris-char::after {
  transform: translateY(0);
  color: var(--norris-secondary);
  opacity: 1;
}