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

@layer utilities {
  .tracking-tighter {
    letter-spacing: -0.05em;
  }
  
  .aspect-square {
    aspect-ratio: 1 / 1;
  }
}

@layer components {
  /* Brutalist Border */
  .brutalist-border {
    @apply border-2 border-black;
  }

  .animate-draw {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
  }

  .hieroglyph-symbol {
    @apply relative w-full aspect-square;
    &::before {
      content: '';
      @apply absolute inset-0 border border-white/20;
    }
  }

  .modern-symbol {
    @apply w-12 h-12 border-2 border-white transform transition-transform duration-500;
    &:hover {
      @apply rotate-90 scale-110;
    }
  }

  .modern-symbol-circle {
    @apply w-12 h-12 rounded-full border-2 border-white transform transition-transform duration-500;
    &:hover {
      @apply scale-110;
    }
  }

  .symbol-container {
    @apply relative p-2 animate-pulse;
  }

  .symbol-stripe {
    @apply w-full h-full;
    background-image: repeating-linear-gradient(
      90deg,
      white 0px,
      white 2px,
      transparent 2px,
      transparent 10px
    );
  }

  .symbol-dots {
    @apply w-full h-full;
    background-image: radial-gradient(
      circle,
      white 1px,
      transparent 1px
    );
    background-size: 8px 8px;
  }

  .symbol-checker {
    @apply w-full h-full;
    background-image: 
      linear-gradient(45deg, white 25%, transparent 25%),
      linear-gradient(-45deg, white 25%, transparent 25%);
    background-size: 8px 8px;
  }

  .symbol-arrow {
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    @apply w-full h-full bg-white/20;
  }

  .symbol-cloud {
    clip-path: path('M10,30 A20,20,0,0,1,50,30 A20,20,0,0,1,90,30 Q90,60,50,90 Q10,60,10,30');
    @apply w-full h-full bg-white/20;
  }

  .symbol-octagon {
    clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
    @apply w-full h-full bg-white/20;
  }

  .glyph-symbol {
    @apply relative w-full aspect-square opacity-0;
    animation: appear 0.5s ease forwards;
    &::before {
      content: '';
      @apply absolute inset-0 border border-white/10;
    }
  }

  .technical-symbol {
    @apply w-16 h-16 relative;
    &::before, &::after {
      content: '';
      @apply absolute inset-0 border-2 border-white/60 transition-transform duration-700;
    }
    &:hover::before {
      @apply rotate-45 scale-110;
    }
    &:hover::after {
      @apply -rotate-45 scale-90;
    }
  }

  .technical-symbol-circle {
    @apply w-16 h-16 relative;
    &::before {
      content: '';
      @apply absolute inset-0 border-2 border-white/60 rounded-full transition-transform duration-700;
    }
    &::after {
      content: '';
      @apply absolute inset-4 border border-white/30 transition-transform duration-700;
    }
    &:hover::before {
      @apply scale-110;
    }
    &:hover::after {
      @apply scale-75;
    }
  }

  .symbol-container {
    @apply relative;
    animation: float 6s ease-in-out infinite;
  }

  /* Navbar Styles */
  .nav-link {
    @apply relative text-gray-400 hover:text-white transition-colors duration-300;
    &::after {
      content: '';
      @apply absolute left-0 bottom-[-4px] w-0 h-px bg-white transition-all duration-300;
    }
    &:hover::after {
      @apply w-full;
    }
  }

  .technical-symbol-small {
    @apply w-8 h-8 relative;
    &::before {
      content: '';
      @apply absolute inset-0 border border-white/60 rotate-45;
    }
  }

  /* Background Patterns */
  .bg-grid-pattern {
    background-image: linear-gradient(to right, rgba(255,255,255,0.1) 1px, transparent 1px),
                      linear-gradient(to bottom, rgba(255,255,255,0.1) 1px, transparent 1px);
    background-size: 40px 40px;
  }

  /* Pricing Cards */
  .pricing-card {
    @apply relative bg-black/50 backdrop-blur-md transition-transform duration-500;
    &:hover {
      transform: translateY(-8px);
    }
  }

  /* Particles */
  .particle-container {
    @apply absolute inset-0 overflow-hidden;
  }

  .particle {
    @apply absolute w-1 h-1 bg-white/30 rounded-full;
    animation: float-random 20s linear infinite;
    
    @for $i from 1 through 20 {
      &:nth-child(#{$i}) {
        left: random(100) * 1%;
        top: random(100) * 1%;
        animation-delay: random(5000) * -1ms;
        animation-duration: (random(20) + 10) * 1s;
      }
    }
  }

  /* Geometric Icons */
  .icon-ai {
    position: relative;
    width: 2rem;
    height: 2rem;
    background-color: black;
    -webkit-clip-path: path('M0 0 H32 V32 H0 V0 M8 0 V32');
    clip-path: path('M0 0 H32 V32 H0 V0 M8 0 V32');
  }

  .icon-image {
    position: relative;
    width: 2rem;
    height: 2rem;
    background-color: black;
    -webkit-clip-path: polygon(0 0, 33% 0, 33% 33%, 66% 33%, 66% 0, 100% 0, 100% 100%, 66% 100%, 66% 66%, 33% 66%, 33% 100%, 0 100%);
    clip-path: polygon(0 0, 33% 0, 33% 33%, 66% 33%, 66% 0, 100% 0, 100% 100%, 66% 100%, 66% 66%, 33% 66%, 33% 100%, 0 100%);
  }

  .icon-analytics {
    position: relative;
    width: 2rem;
    height: 2rem;
    background-color: black;
    -webkit-clip-path: path('M0 0h5v32h-5zM14 0h5v32h-5zM28 0h5v32h-5z');
    clip-path: path('M0 0h5v32h-5zM14 0h5v32h-5zM28 0h5v32h-5z');
  }

  .icon-growth {
    position: relative;
    width: 2rem;
    height: 2rem;
    background-color: black;
    -webkit-clip-path: path('M16 0 L32 32 L0 32 Z');
    clip-path: path('M16 0 L32 32 L0 32 Z');
  }

  /* Small Icons */
  .icon-ai-small {
    position: relative;
    width: 1rem;
    height: 1rem;
    background-color: black;
    -webkit-clip-path: path('M0 0 H16 V16 H0 V0 M4 0 V16');
    clip-path: path('M0 0 H16 V16 H0 V0 M4 0 V16');
  }

  .icon-image-small {
    position: relative;
    width: 1rem;
    height: 1rem;
    background-color: black;
    -webkit-clip-path: polygon(0 0, 33% 0, 33% 33%, 66% 33%, 66% 0, 100% 0, 100% 100%, 66% 100%, 66% 66%, 33% 66%, 33% 100%, 0 100%);
    clip-path: polygon(0 0, 33% 0, 33% 33%, 66% 33%, 66% 0, 100% 0, 100% 100%, 66% 100%, 66% 66%, 33% 66%, 33% 100%, 0 100%);
  }

  .icon-analytics-small {
    position: relative;
    width: 1rem;
    height: 1rem;
    background-color: black;
    -webkit-clip-path: path('M0 0h3v16h-3zM7 0h3v16h-3zM14 0h3v16h-3z');
    clip-path: path('M0 0h3v16h-3zM7 0h3v16h-3zM14 0h3v16h-3z');
  }

  .icon-growth-small {
    position: relative;
    width: 1rem;
    height: 1rem;
    background-color: black;
    -webkit-clip-path: path('M8 0 L16 16 L0 16 Z');
    clip-path: path('M8 0 L16 16 L0 16 Z');
  }

  /* Card Styles */
  .brutalist-card {
    position: relative;
    padding: 1.5rem;
    border: 2px solid black;
    transition: background-color 0.3s;
  }

  .brutalist-card:hover {
    background-color: rgba(0, 0, 0, 0.05);
  }

  /* Hover Line Effect */
  .hover-line {
    height: 3px;
    width: 0;
    background-color: black;
    transition: width 0.3s;
  }

  .brutalist-card:hover .hover-line {
    width: 100%;
  }

  /* Pattern backgrounds for hover states */
  .pattern-ai {
    @apply absolute inset-0 opacity-0 transition-opacity;
    background-image: linear-gradient(45deg, black 25%, transparent 25%),
                      linear-gradient(-45deg, black 25%, transparent 25%);
    background-size: 8px 8px;
  }

  .pattern-image {
    @apply absolute inset-0 opacity-0 transition-opacity;
    background-image: radial-gradient(circle, black 1px, transparent 1px);
    background-size: 8px 8px;
  }

  .pattern-analytics {
    @apply absolute inset-0 opacity-0 transition-opacity;
    background-image: repeating-linear-gradient(
      90deg,
      black 0px,
      black 2px,
      transparent 2px,
      transparent 8px
    );
  }

  .pattern-growth {
    @apply absolute inset-0 opacity-0 transition-opacity;
    background-image: linear-gradient(0deg, black 50%, transparent 50%);
    background-size: 8px 8px;
  }

  /* Remove all title decoration styles */
  .title-ai, .title-image, .title-analytics, .title-growth {
    @apply relative inline-block;
  }

  @keyframes appear {
    0% {
      opacity: 0;
      transform: scale(0.8);
    }
    100% {
      opacity: 1;
      transform: scale(1);
    }
  }

  /* Dropdown Menu */
  .brutalist-dropdown {
    position: absolute;
    background-color: white;
    border: 2px solid black;
    min-width: 240px;
    box-shadow: 4px 4px 0 black;
    transform-origin: top center;
    animation: dropdownAppear 0.2s ease-out;
    margin-top: 0.5rem;
  }

  .brutalist-dropdown::before,
  .brutalist-dropdown::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }

  .brutalist-dropdown::before {
    top: -10px;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid black;
  }

  .brutalist-dropdown::after {
    top: -7px;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid white;
  }

  @keyframes dropdownAppear {
    from {
      opacity: 0;
      transform: translateY(-5px) translateX(-50%);
    }
    to {
      opacity: 1;
      transform: translateY(0) translateX(-50%);
    }
  }

  /* Update brutalist button styles */
  .brutalist-button {
    position: relative;
    padding: 0.75rem 1.5rem;
    background: white;
    border: 2px solid black;
    font-weight: 700;
    text-transform: uppercase;
    transition: transform 0.2s, box-shadow 0.2s;
  }

  .brutalist-button:hover {
    transform: translate(-2px, -2px);
    box-shadow: 4px 4px 0 black;
  }

  .brutalist-button:active {
    transform: translate(0, 0);
    box-shadow: none;
  }

  /* Technical Overlays */
  .technical-grid {
    background-image: 
      linear-gradient(to right, rgba(0, 0, 0, 0.1) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 1px, transparent 1px);
    background-size: 24px 24px;
  }

  .diagonal-lines {
    background-image: repeating-linear-gradient(
      45deg,
      rgba(0, 0, 0, 0.1) 0px,
      rgba(0, 0, 0, 0.1) 1px,
      transparent 1px,
      transparent 8px
    );
  }

  .crosshatch {
    background-image: 
      repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.1) 0px, rgba(0, 0, 0, 0.1) 1px, transparent 1px, transparent 8px),
      repeating-linear-gradient(-45deg, rgba(0, 0, 0, 0.1) 0px, rgba(0, 0, 0, 0.1) 1px, transparent 1px, transparent 8px);
  }

  .technical-diagram {
    @apply relative aspect-square brutalist-border bg-white;
  }

  .technical-diagram::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: 
      linear-gradient(0deg, transparent 24%, rgba(0, 0, 0, .05) 25%, rgba(0, 0, 0, .05) 26%, transparent 27%, transparent 74%, rgba(0, 0, 0, .05) 75%, rgba(0, 0, 0, .05) 76%, transparent 77%, transparent),
      linear-gradient(90deg, transparent 24%, rgba(0, 0, 0, .05) 25%, rgba(0, 0, 0, .05) 26%, transparent 27%, transparent 74%, rgba(0, 0, 0, .05) 75%, rgba(0, 0, 0, .05) 76%, transparent 77%, transparent);
    background-size: 50px 50px;
  }

  /* Section Dividers */
  .section-divider {
    @apply w-full h-px bg-black my-8;
  }

  /* Typography Enhancements */
  .brutalist-heading {
    @apply text-4xl md:text-5xl font-black uppercase tracking-tighter leading-none;
  }

  .brutalist-subheading {
    @apply text-2xl font-black uppercase tracking-tight;
  }

  /* Geometric Patterns */
  .geometric-pattern {
    @apply opacity-20;
  }

  .pattern-dots {
    background-image: radial-gradient(black 1px, transparent 1px);
    background-size: 10px 10px;
  }

  .pattern-diagonal {
    background-image: repeating-linear-gradient(
        45deg,
        black 0,
        black 1px,
        transparent 0,
        transparent 50%
    );
    background-size: 10px 10px;
  }

  .pattern-grid {
    background-image: 
        linear-gradient(to right, black 1px, transparent 1px),
        linear-gradient(to bottom, black 1px, transparent 1px);
    background-size: 10px 10px;
  }

  /* Video Overlays */
  .video-container {
    position: relative;
  }

  .video-overlay {
    @apply absolute inset-0 bg-black opacity-20;
  }

  .video-overlay::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: 
      linear-gradient(45deg, transparent 45%, black 45%, black 55%, transparent 55%),
      linear-gradient(-45deg, transparent 45%, black 45%, black 55%, transparent 55%);
    background-size: 8px 8px;
    opacity: 0.1;
  }
}

@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

.animate-scroll {
  animation: scroll 20s linear infinite;
}

@keyframes float-random {
  0% {
    transform: translate(0, 0);
  }
  33% {
    transform: translate(100px, 100px);
  }
  66% {
    transform: translate(-50px, 200px);
  }
  100% {
    transform: translate(0, 0);
  }
}

.animate-float-delayed {
  animation: float 6s ease-in-out infinite;
  animation-delay: -3s;
}

/* Grid layout */
.grid-layout {
    @apply grid grid-cols-12 gap-8;
}

/* Brutalist card */
/* .brutalist-card {
    @apply p-6 bg-white brutalist-border;
} */

/* Brutalist button */
.brutalist-button {
    @apply px-6 py-3 bg-black text-white font-bold uppercase tracking-wider hover:translate-x-1 transition-transform;
}

/* Monospace text */
.monospace {
    @apply font-mono;
} 