@import "tailwindcss";
@import "tw-animate-css";

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

@theme {
 --animate-pulse: pulse 1.2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }

  body {
    @apply bg-background text-foreground;
  }

  .section {
    @apply max-w-[100rem] mx-auto px-4 lg:px-6 py-4;
  }

  .card-border{
    @apply dark:shadow-[0_-1px_rgba(255,255,255,0.1),0_4px_8px_rgba(0,0,0,0.05),0_0_0_1px_rgba(255,255,255,0.1),0_1px_6px_-4px_#000]! shadow-[0_1px_rgba(0,0,0,0.1),0_4px_8px_rgba(0,0,0,0.05),0_0_0_1px_rgba(0,0,0,0.08),0_1px_6px_-4px_rgba(0,0,0,0.2)]!
  }

  .btn-primary{
    @apply  bg-gradient-to-l bg-indigo-500 from-indigo-600 via-purple-500/60 to-blue-600 from-20% to-80% text-white font-medium px-4 py-2 rounded-md shadow-md transition-all not-disabled:active:scale-95 ;
  }

  .gradient1{
    @apply from-blue-500 via-indigo-600 to-purple-500 bg-gradient-to-br
  }
}
    .deformacion {
      animation: deformar 20s infinite ease-in-out;
      transform-origin: center;
    }

@keyframes deformar {
  0% {
    transform: scale(1) skew(0deg, 0deg) rotate(0deg);
    background-size: 100% 100%;
  }

  20% {
    transform: scale(1.2, 1.1) skew(5deg, -5deg) rotate(2deg);
  }

  40% {
    transform: scale(1.1, 1.166) skew(-3deg, 3deg) rotate(-2deg);
    background-size: 90% 90%;
  }

  60% {
    transform: scale(1.07, 1.2) skew(4deg, -4deg) rotate(1deg);
  }

  80% {
    transform: scale(1.15, 1.05) skew(-2deg, 2deg) rotate(-1deg);
  }

  100% {
    transform: scale(1) skew(0deg, 0deg) rotate(0deg);
        background-size: 100% 100%;
  }
}

/* select second div child of clerk-footer */
.clerk-footer > div:nth-child(2) {
  padding-block: 7px;
}

/* .cl-userProfile-root{
  width: auto;
  height: calc(100svh - var(--header-height));
}
.cl-cardBox{
  width: auto;
  height: 100%;
} */

.heightScreen{
  height: calc(100svh - var(--header-height));
}
.minHeightScreen{
  min-height: calc(100svh - var(--header-height));
}
.hidde-close .ring-offset-background{
  display: none;
}
.bg-grid{
  --lines-color: #0000000e;
  background-image: linear-gradient(var(--lines-color) 1px, transparent 1px), linear-gradient(to right, var(--lines-color) 1px, transparent 1px);
  background-size: 20px 20px;
}

.dark .bg-grid{
  --lines-color: #ffffff05;
}

.animate-blob{
  animation: blob-animation 20s linear infinite alternate;
}
.animate-blob:nth-child(2){
  animation: blob-animation2 20s linear infinite alternate;
}

@keyframes blob-animation {
  0% {
    translate: 40px 70px;
    opacity: 0.3.5;
    scale: 1.1;
  }
  50% {
    translate: -40px -10px;
    opacity: 0.4;
    scale: 1.2;
  }

  100% {
    translate: -60px -80px;
    opacity: 0.3;
    scale: 0.9;
  }
}
@keyframes blob-animation2 {
  0% {
    translate: -20px -50px;
    opacity: 0.4;
    scale: 1.1;
  }
  50% {
    translate: 30px 15px;
    opacity: 0.28;
    scale: 1.2;
  }

  100% {
    translate: -40px 20px;
    opacity: 0.32;
    scale: 0.9;
  }
}

/* Buttons ============ */

.shining {
  position: relative;
  overflow: hidden;
}

.shining::before {
  content: '';
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(120deg,
      rgba(255, 255, 255, 0.1) 0%,
      rgba(255, 255, 255, 0.6) 50%,
      rgba(255, 255, 255, 0.1) 100%);
  transform: skewX(-20deg);
}

.shining:hover::before {
  animation: shine .7s forwards;
}

@keyframes shine {
  0% {
    left: -75%;
  }

  100% {
    left: 125%;
  }
}

@theme inline {
  --color-zinc-950: oklch(17% 0.005 285.823);
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-sans: var(--font-monserrat);
  /* --font-sans: var(--font-geist-sans); */
  /* --font-mono: var(--font-geist-mono); */
  --font-mono: var(--font-monserrat);
  --color-sidebar-ring: var(--sidebar-ring);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar: var(--sidebar);
  --color-chart-5: var(--chart-5);
  --color-chart-4: var(--chart-4);
  --color-chart-3: var(--chart-3);
  --color-chart-2: var(--chart-2);
  --color-chart-1: var(--chart-1);
  --color-ring: var(--ring);
  --color-input: var(--input);
  --color-border: var(--border);
  --color-destructive: var(--destructive);
  --color-accent-foreground: var(--accent-foreground);
  --color-accent: var(--accent);
  --color-muted-foreground: var(--muted-foreground);
  --color-muted: var(--muted);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-secondary: var(--secondary);
  --color-primary-foreground: var(--primary-foreground);
  --color-primary: var(--primary);
  --color-popover-foreground: var(--popover-foreground);
  --color-popover: var(--popover);
  --color-card-foreground: var(--card-foreground);
  --color-card: var(--card);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
}

:root {
  --main-color: #525fff;
  --root-pr: 0px;
  --header-height: 64px;
  --radius: 0.625rem;
  --background: oklch(1 0 0);
  --foreground: oklch(0.141 0.005 285.823);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.141 0.005 285.823);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.141 0.005 285.823);
  --primary: oklch(0.21 0.006 285.885);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.967 0.001 286.375);
  --secondary-foreground: oklch(0.21 0.006 285.885);
  --muted: oklch(0.967 0.001 286.375);
  --muted-foreground: oklch(0.552 0.016 285.938);
  --accent: oklch(0.967 0.001 286.375);
  --accent-foreground: oklch(0.21 0.006 285.885);
  --destructive: oklch(0.577 0.245 27.325);
  --border: oklch(0.92 0.004 286.32);
  --input: oklch(0.92 0.004 286.32);
  --ring: oklch(0.705 0.015 286.067);
  --chart-1: oklch(0.646 0.222 41.116);
  --chart-2: oklch(0.6 0.118 184.704);
  --chart-3: oklch(0.398 0.07 227.392);
  --chart-4: oklch(0.828 0.189 84.429);
  --chart-5: oklch(0.769 0.188 70.08);
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.141 0.005 285.823);
  --sidebar-primary: oklch(0.21 0.006 285.885);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.967 0.001 286.375);
  --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
  --sidebar-border: oklch(0.92 0.004 286.32);
  --sidebar-ring: oklch(0.705 0.015 286.067);
}

.dark {
  --background: oklch(0.141 0.005 285.823);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.21 0.006 285.885);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.21 0.006 285.885);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.92 0.004 286.32);
  --primary-foreground: oklch(0.21 0.006 285.885);
  --secondary: oklch(0.274 0.006 286.033);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.274 0.006 286.033);
  --muted-foreground: oklch(0.705 0.015 286.067);
  --accent: oklch(0.274 0.006 286.033);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.704 0.191 22.216);
  --border: oklch(1 0 0 / 10%);
  --input: oklch(1 0 0 / 15%);
  --ring: oklch(0.552 0.016 285.938);
  --chart-1: oklch(0.488 0.243 264.376);
  --chart-2: oklch(0.696 0.17 162.48);
  --chart-3: oklch(0.769 0.188 70.08);
  --chart-4: oklch(0.627 0.265 303.9);
  --chart-5: oklch(0.645 0.246 16.439);
  --sidebar: oklch(0.21 0.006 285.885);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-primary: oklch(0.488 0.243 264.376);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.274 0.006 286.033);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(1 0 0 / 10%);
  --sidebar-ring: oklch(0.552 0.016 285.938);
}


@keyframes jumbo {
  from {
    background-position: 50% 50%, 50% 50%;
  }

  to {
    background-position: 350% 50%, 350% 50%;
  }
}

.jumbo {
  --stripes: repeating-linear-gradient(100deg,
      #fff 0%,
      #fff 7%,
      transparent 10%,
      transparent 12%,
      #fff 16%);
  --stripesDark: repeating-linear-gradient(100deg,
      #000 0%,
      transparent 5%,
      #000 8%,
      transparent 10%,
      #000 14%,
      transparent 15%,
      #000 16%
      );
  --rainbow: repeating-linear-gradient(100deg,
      #60a5fa 10%,
      #e879f9 15%,
      #60a5fa 20%,
      #5eead4 25%,
      #60a5fa 30%);
  --rainbowDark: repeating-linear-gradient(100deg,#6f6f81);
  background-image: var(--stripes), var(--rainbow);
  background-position: 50% 50%, 50% 50%;
  background-size: 300%, 200%;
  filter: invert(100%);
  mask-image: radial-gradient(ellipse at 100% 0%, black 40%, transparent 60%);
  pointer-events: none;
}

.jumbo::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--stripes), var(--rainbow);
  background-size: 200%, 100%;
  animation: jumbo 70s linear infinite;
  mix-blend-mode: difference;
  background-attachment: fixed;
}

.dark .jumbo {
  background-image: var(--stripesDark), var(--rainbowDark);
  filter: blur(10px) opacity(50%) saturate(200%);
}

.dark .jumbo::after {
  background-image: var(--stripesDark), var(--rainbowDark);
  animation: jumbo 130s linear infinite;
}