@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 240 10% 3.9%;

    --card: 0 0% 100%;
    --card-foreground: 240 10% 3.9%;

    --popover: 0 0% 100%;
    --popover-foreground: 240 10% 3.9%;

    --primary: 240 5.9% 10%;
    --primary-foreground: 0 0% 98%;

    --secondary: 240 4.8% 95.9%;
    --secondary-foreground: 240 5.9% 10%;

    --muted: 240 4.8% 95.9%;
    --muted-foreground: 240 3.8% 46.1%;

    --accent: 240 4.8% 95.9%;
    --accent-foreground: 240 5.9% 10%;

    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;

    --border: 240 5.9% 90%;
    --input: 240 5.9% 90%;
    --ring: 240 10% 3.9%;

    --radius: 0.5rem;
  }

  .dark {
    --background: 240 10% 3.9%;
    --foreground: 0 0% 98%;

    --card: 240 10% 3.9%;
    --card-foreground: 0 0% 98%;

    --popover: 240 10% 3.9%;
    --popover-foreground: 0 0% 98%;

    --primary: 0 0% 98%;
    --primary-foreground: 240 5.9% 10%;

    --secondary: 240 3.7% 15.9%;
    --secondary-foreground: 0 0% 98%;

    --muted: 240 3.7% 15.9%;
    --muted-foreground: 240 5% 64.9%;

    --accent: 240 3.7% 15.9%;
    --accent-foreground: 0 0% 98%;

    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;

    --border: 240 3.7% 15.9%;
    --input: 240 3.7% 15.9%;
    --ring: 240 4.9% 83.9%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply text-foreground;
  }
  .centered-block {
    --ideal-block-width: min(1200px, 85%);
    @apply mx-auto w-[--ideal-block-width];
  }
}

@layer utilities {
  .bottom-clipped {
    clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
  }
}

@keyframes globeBounce {
  0% {
    transform: translate(-50%, -40%);
  }
  50% {
    transform: translate(-50%, -60%);
  }
  100% {
    transform: translate(-50%, -40%);
  }
}

.globe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3em;
  height: 3em;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  overflow: hidden;
  will-change: transform;
}

@keyframes globe {
  0% {
    transform: translate(-50%, -50%) rotate(15deg);
  }
  50% {
    transform: translate(-50%, -50%) rotate(-15deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(15deg);
  }
}

.globe-wrap {
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  position: absolute;
  display: block;
  border-radius: 50%;
  transform: translate(-50%, -50%) rotate(30deg);
  animation: globe 5.4s cubic-bezier(0.35, 0, 0.65, 1) infinite;
  overflow: hidden;
  box-shadow: inset 0px 0px 0px 0.125em hsl(var(--foreground));
}

.globe .circle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  box-shadow: inset 0.1em 0px 0px 0.08em hsl(var(--foreground));
  animation: circle1 2.7s linear infinite;
  font-size: 0.75em;
}

@keyframes circle1 {
  0% {
    border-radius: 50%;
    box-shadow: inset 0.1em 0px 0px 0.08em hsl(var(--foreground));
    width: 100%;
  }
  49% {
    border-radius: 50%;
    box-shadow: inset 0.1em 0px 0px 0.08em hsl(var(--foreground));
    background: transparent;
  }
  50% {
    border-radius: 0%;
    width: 0.175em;
    background: hsl(var(--foreground));
  }
  51% {
    border-radius: 50%;
    box-shadow: inset -0.1em 0px 0px 0.08em hsl(var(--foreground));
    background: transparent;
  }
  100% {
    border-radius: 50%;
    box-shadow: inset -0.1em 0px 0px 0.08em hsl(var(--foreground));
    width: 100%;
  }
}

.globe :nth-child(1) {
  animation-delay: -1.8s;
}

.globe :nth-child(2) {
  animation-delay: -0.9s;
}

.globe .circle-hor {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 150%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  height: 55%;
  box-shadow: inset 0px 0px 0px 0.15em hsl(var(--foreground));
  font-size: 0.75em;
}

.globe .circle-hor-middle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 150%;
  transform: translate(-50%, -50%);
  border-radius: 0%;
  height: 0.15em;
  background: hsl(var(--foreground));
  font-size: 0.75em;
}

@media screen and (max-width: 1000px) {
  .digital-ball {
    @apply -translate-x-[-20%] -translate-y-2/4;
  }
}

.stroke {
  border: none;
  margin: 0 auto;
  height: min-content;
  @apply stroke-[#111111] dark:stroke-white;
}

.tiktok-embed {
  padding: 0 !important;
  margin: 0 !important;
  width: 400px !important;
  min-width: 250px !important;
  max-height: 100px !important;
}

@media screen and (max-width: 1000px) {
  .tiktok-embed {
    width: 400px !important;
    min-width: 250px !important;
    max-height: 100px !important;
  }
}

@media screen and (min-width: 768px) {
  .tiktok-embed {
    width: 400px !important;
    min-width: 250px !important;
    max-height: 100px !important;
  }
}