fuckingtech/main.css

@import url("/assets/fonts/Signifier-1.004/stylesheet.css");
@import url("/assets/fonts/Right_Serif_Mono/stylesheet.css");
@import url("/assets/fonts/Ortica/stylesheet.css");
@import url("/assets/fonts/Items/stylesheet.css");
@import url("/assets/fonts/GTZirkon/stylesheet.css");
@import "tailwindcss";

@plugin "@tailwindcss/typography";

@variant dark (&:where(.dark, .dark *));
@variant storytellurx (&:where(.storytellurx, .storytellurx *));

@theme {
  --color-primary: hsl(65.65deg 100% 50%);
  --color-secondary: hsl(65.65deg, 50%, 10%);
  --color-tertiary: hsl(70.65deg, 80%, 20%);
  --color-accent: hsl(184, 80%, 20%);

  --color-background: hsl(259.52deg 92.65% 26.67%);
  --color-foreground: hsl(65.65deg 100% 50%);
  --color-card: hsl(67.05deg 100% 50.39%);
  --color-card-foreground: hsl(77.15deg 83.09% 11.61%);
  --color-popover: var(--color-neutral-200);
  --color-popover-foreground: var(--color-cyan-500);
  --color-primary-foreground: hsl(77.15deg 83.09% 11.61%);
  --color-secondary: hsl(65.65deg, 50%, 10%);
  --color-secondary-foreground: var(--color-white);
  --color-muted: hsl(58.65deg 100% 17.45%);
  --color-muted-foreground: var(--color-white);
  --color-accent: hsl(184, 80%, 20%);
  --color-accent-foreground: var(--color-neutral-900);
  --color-destructive: var(--color-rose-400);
  --color-destructive-foreground: var(--color-neutral-900);
  --color-border: var(--color-primary);
  --color-input: var(--color-primary);
  --color-ring: var(--color-fuchsia-400);

  --radius: 0.125rem;
  --radius-lg: 0.5rem;
  --radius-md: 0.375rem;
  --radius-sm: 0.25rem;

  --color-gate: #750902;
  --color-bubble: #ff00e3;

  --font-megazoid: "Megazoid";
  --font-primary: "Megazoid";
  --font-secondary: "Pictoporn";
  --animate-stepped-opacity: stepped-opacity 2.2s linear 1;

  @keyframes stepped-opacity {
    0% {
      opacity: 0;
    }

    /* Start at opacity 0 */

    9.9999% {
      opacity: 0;
    }

    /* Hold 0 until just before 10%, then jump to 0.1 */
    10% {
      opacity: 0.1;
    }

    /* Ensure opacity is 0.1 at 10% */

    19.9999% {
      opacity: 0.1;
    }

    /* Hold 0.1 until just before 20%, then jump to 0.2 */
    20% {
      opacity: 0.2;
    }

    /* Ensure opacity is 0.2 at 20% */

    29.9999% {
      opacity: 0.2;
    }

    /* Hold 0.2 until just before 30%, then jump to 0.3 */
    30% {
      opacity: 0.3;
    }

    /* Ensure opacity is 0.3 at 30% */

    39.9999% {
      opacity: 0.3;
    }

    /* Hold 0.3 until just before 40%, then jump to 0.4 */
    40% {
      opacity: 0.4;
    }

    /* Ensure opacity is 0.4 at 40% */

    49.9999% {
      opacity: 0.4;
    }

    /* Hold 0.4 until just before 50%, then jump to 0.5 */
    50% {
      opacity: 0.5;
    }

    /* Ensure opacity is 0.5 at 50% */

    59.9999% {
      opacity: 0.5;
    }

    /* Hold 0.5 until just before 60%, then jump to 0.6 */
    60% {
      opacity: 0.6;
    }

    /* Ensure opacity is 0.6 at 60% */

    69.9999% {
      opacity: 0.6;
    }

    /* Hold 0.6 until just before 70%, then jump to 0.7 */
    70% {
      opacity: 0.7;
    }

    /* Ensure opacity is 0.7 at 70% */

    79.9999% {
      opacity: 0.7;
    }

    /* Hold 0.7 until just before 80%, then jump to 0.8 */
    80% {
      opacity: 0.8;
    }

    /* Ensure opacity is 0.8 at 80% */

    89.9999% {
      opacity: 0.8;
    }

    /* Hold 0.8 until just before 90%, then jump to 0.9 */
    90% {
      opacity: 0.9;
    }

    /* Ensure opacity is 0.9 at 90% */

    99.9999% {
      opacity: 0.9;
    }

    /* Hold 0.9 until just before 100%, then jump to 1.0 */
    100% {
      opacity: 1;
    }

    /* Ensure opacity is 1.0 at 100% and hold */
  }
}

@layer theme {
  :root {
    --font-serif: "GT Zirkon";
    --font-sans: "GT Zirkon";
  }

  .dark,
  .storytellurx {
    --color-primary: hsl(39deg 62% 89%);
    --color-secondary: hsl(244, 50%, 90%);
    --color-tertiary: hsl(244, 50%, 10%);
    --color-accent: hsl(184, 80%, 80%);

    --color-background: var(--color-black);
    --color-foreground: var(--color-white);
    --color-card: var(--color-neutral-800);
    --color-card-foreground: var(--color-cyan-300);
    --color-popover: var(--color-neutral-800);
    --color-popover-foreground: var(--color-cyan-300);
    --color-primary: var(--color-fuchsia-500);
    --color-primary-foreground: var(--color-neutral-50);
    --color-secondary: var(--color-cyan-400);
    --color-secondary-foreground: var(--color-neutral-900);
    --color-muted: var(--color-neutral-700);
    --color-muted-foreground: var(--color-cyan-200);
    --color-accent: var(--color-fuchsia-600);
    --color-accent-foreground: var(--color-neutral-50);
    --color-destructive: var(--color-rose-500);
    --color-destructive-foreground: var(--color-neutral-50);
    --color-border: var(--color-neutral-700);
    --color-input: var(--color-neutral-700);
    --color-ring: var(--color-fuchsia-400);

    --font-serif: "Comic Neue";
    --font-sans-serif: "Comic Neue";
  }
}

@utility scrollbar-hidden {
  -ms-overflow-style: none;
  scrollbar-width: none;

  &::-webkit-scrollbar {
    display: none;
  }
}

@layer base {
  body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    @apply text-primary font-sans;
  }

  *,
  ::before,
  ::after {
    border-color: var(--color-border);
  }
}

@font-face {
  font-family: "Pictoporn";
  src: url("/assets/fonts/Pictoporn/Pictoporn.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}

@utility border-block {
  & {
    border-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAqCAYAAADFw8lbAAAAAXNSR0IArs4c6QAAAK1JREFUWEftmOEKgCAQg/X9H7ooCiIybzcwpM+/3eHabc6qpZSlTLDqH4BuL5lZqQk6jAL0aUww+iJeNNoiBzNhJvHUH24mEZ9X7pyj3s5i9xVo1MXn6KL1d0hq/14P0EAyRScCoz2boFHXtW4/GkWjKRceYdFj7+l5aj+SiWTKiG1kz5T3UZWg6O2nlUzSfg6jAOVzWRJb8g83Gg0kkzQIGIVRSTAfFDsaHQp3BbkKaAHhJPIMAAAAAElFTkSuQmCC")
      14 / 14px / 0 round;
    border-width: 14px;
    border-style: solid;
  }
}

.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;

  &::-webkit-scrollbar {
    display: none;
  }
}

:root {
  overscroll-behavior: none;
}

@property --border-angle {
  syntax: "<angle>";
  /* Define the type as an angle */
  inherits: false;
  /* Usually false for performance/isolation */
  initial-value: 0deg;
  /* Set the starting value */
}

@keyframes border {
  to {
    --border-angle: 360deg;
    /* Animate the custom property to 360 degrees */
  }
}

.animate-border {
  /* Apply the animation using the defined keyframes */
  animation: border 4s linear infinite;
  animation-delay: var(--delay);

  /* Example usage: Apply a conic gradient background that uses the angle */
  /* Adjust this background based on your actual visual requirements */
  --border-size: 3px;
  background-image:
    conic-gradient(
      from var(--border-angle),
      transparent 25%,
      purple,
      /* Example color */ var(--color-primary),
      /* Example color */ transparent 75%
    ),
    conic-gradient(
      from var(--border-angle),
      transparent 25%,
      rgb(250, 25, 250),
      /* Example color */ rgb(255, 94, 199),
      /* Example color */ transparent 75%
    );
  background-size:
    calc(100% - (var(--border-size) * 2)) calc(100% - (var(--border-size) * 2)),
    cover;
  background-position: center center;
  background-repeat: no-repeat;

  /* Ensure the element has some dimensions */
  /* width: 200px; */
  /* height: 100px; */
}

@font-face {
  font-family: "Megazoid";
  src: url("/assets/fonts/Megazoid/Megazoid-Regular.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

.animated-title-container {
  /* Base styles for the container */
  font-family: var(--font-primary);
  display: inline-block;
  text-decoration: none;
  color: var(--color-primary-text, inherit);
  /* Use a variable for primary text color */

  /* --- Customizable Animation Parameters --- */
  /* Overall speed: higher value = slower animation cycle for each letter */
  --animation-cycle-duration: 5.5s;

  /* Vertical offset for the letter when secondary font is active */
  --letter-glitch-y: -3px;
  /* Slightly increased for visibility */
  --secondary-font-color: var(--color-secondary-text-glitch, red);
  /* Color for the overlay font */
}

.animated-title-container .letter {
  display: inline-block;
  position: relative;
  /* Crucial for ::after positioning */
  font-family: var(--font-primary);
  /* Always use primary font */
  /* The main letter itself no longer animates its font */
}

.animated-title-container .letter::after {
  content: attr(data-letter);
  /* Display the letter from the data attribute */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  font-family: var(--font-secondary);
  /* The overlay uses the secondary font */
  color: #8b00ff;
  /* Distinct color for the overlay */
  opacity: 0;
  /* Start hidden */
  pointer-events: none;
  /* So it doesn't interfere with text selection on the base */

  /* Animation properties will be applied here */
  animation-name: showGlitchOverlay;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  mix-blend-mode: difference;
  /* animation-duration and animation-delay will be set per letter's ::after */
}

/*
  Keyframes Logic for the ::after pseudo-element:
  - The ::after element (with secondary font) will become visible and glitch.
  - Example: Secondary font active from 47% to 53% (6% of the cycle).
*/
@keyframes showGlitchOverlay {
  0% {
    opacity: 0;
    transform: translateY(0);
  }

  /* Primary font leading up to the switch (::after is hidden) */
  46.9% {
    opacity: 0;
    transform: translateY(0);
  }

  /* Switch to secondary font (::after becomes visible) and apply glitch */
  47% {
    opacity: 1;
    transform: translateY(var(--letter-glitch-y));
  }

  /* Hold secondary font and glitch */
  53% {
    opacity: 1;
    transform: translateY(var(--letter-glitch-y));
  }

  /* Switch back to primary font (::after hides) */
  53.1% {
    opacity: 0;
    transform: translateY(0);
  }

  /* Primary font for the rest of the cycle (::after is hidden) */
  100% {
    opacity: 0;
    transform: translateY(0);
  }
}

/* --- Staggering for "FUCKING TECH!" --- */
/* Apply animation duration and delay to the ::after pseudo-element */
/* F U C K I N G   T E C H ! */
/* 1 2 3 4 5 6 7 8 9 0 1 2 3 */

.animated-title-container .letter:nth-child(1)::after {
  animation-duration: calc(var(--animation-cycle-duration) * 1);
  animation-delay: calc(var(--animation-cycle-duration) * -0.05);
}

.animated-title-container .letter:nth-child(2)::after {
  animation-duration: calc(var(--animation-cycle-duration) * 0.92);
  animation-delay: calc(var(--animation-cycle-duration) * -0.22);
}

.animated-title-container .letter:nth-child(3)::after {
  animation-duration: calc(var(--animation-cycle-duration) * 1.08);
  animation-delay: calc(var(--animation-cycle-duration) * -0.1);
}

.animated-title-container .letter:nth-child(4)::after {
  animation-duration: calc(var(--animation-cycle-duration) * 0.87);
  animation-delay: calc(var(--animation-cycle-duration) * -0.33);
}

.animated-title-container .letter:nth-child(5)::after {
  animation-duration: calc(var(--animation-cycle-duration) * 1.03);
  animation-delay: calc(var(--animation-cycle-duration) * -0.02);
}

.animated-title-container .letter:nth-child(6)::after {
  animation-duration: calc(var(--animation-cycle-duration) * 0.95);
  animation-delay: calc(var(--animation-cycle-duration) * -0.28);
}

.animated-title-container .letter:nth-child(7)::after {
  animation-duration: calc(var(--animation-cycle-duration) * 1.12);
  animation-delay: calc(var(--animation-cycle-duration) * -0.16);
}

/* Space: Child 8 */
.animated-title-container .letter.space::after {
  /* animation: none !important; /* Option 1: No animation */
  content: "";
  /* Option 2: Ensure no character is displayed even if data-letter is space */
  opacity: 0 !important;
  /* Ensure it's always hidden */
}

/* Assuming the space is the 8th child */
.animated-title-container .letter:nth-child(9)::after {
  animation-duration: calc(var(--animation-cycle-duration) * 0.9);
  animation-delay: calc(var(--animation-cycle-duration) * -0.09);
}

.animated-title-container .letter:nth-child(10)::after {
  animation-duration: calc(var(--animation-cycle-duration) * 1.06);
  animation-delay: calc(var(--animation-cycle-duration) * -0.19);
}

.animated-title-container .letter:nth-child(11)::after {
  animation-duration: calc(var(--animation-cycle-duration) * 0.84);
  animation-delay: calc(var(--animation-cycle-duration) * -0.35);
}

.animated-title-container .letter:nth-child(12)::after {
  animation-duration: calc(var(--animation-cycle-duration) * 1.1);
  animation-delay: calc(var(--animation-cycle-duration) * -0.04);
}

.animated-title-container .letter:nth-child(13)::after {
  animation-duration: calc(var(--animation-cycle-duration) * 0.8);
  animation-delay: calc(var(--animation-cycle-duration) * -0.38);
}
/* The age gate is the same cached page for every visitor: the head script marks the document of a
   visitor who already answered (the `age_legal` cookie) before the first paint. */
html:not([data-age-legal]) body {
  overflow: hidden;
}

html[data-age-legal] [data-age-gate] {
  display: none;
}