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

@layer base {
  body {
    background-color: #060606;
    color: #ffffff;
     /* Custom Scrollbar */
    &::-webkit-scrollbar {
      width: 8px;
    }
    &::-webkit-scrollbar-track {
      background: #060606;
    }
    &::-webkit-scrollbar-thumb {
      background: #262626;
      border-radius: 4px;
    }
    &::-webkit-scrollbar-thumb:hover {
      background: #402D10;
    }
  }
}

@layer components {
  /* Phone Mockup Frame - Notchless iPad/Phone style */
  .mockup-frame {
    @apply relative mx-auto bg-dark-900 overflow-hidden;
    border-radius: 2.2rem;
    padding: 0.4rem;
    box-shadow: 
      0 0 0 1px rgba(255, 255, 255, 0.05),
      inset 0 0 0 1px rgba(255, 255, 255, 0.1),
      inset 0 0 20px rgba(0,0,0,1),
      0 30px 60px -10px rgba(0, 0, 0, 0.8),
      0 20px 40px -10px rgba(199, 154, 65, 0.05); /* very subtle gold shadow */
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.6s ease;
  }

  .mockup-frame::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 2px;
    background: linear-gradient(135deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0.05) 50%, rgba(199,154,65,0.3) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 20;
  }

  /* Glass Panel */
  .glass-panel {
    background: linear-gradient(145deg, rgba(26,26,26,0.5) 0%, rgba(17,17,17,0.8) 100%);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.05);
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  }

  /* Text Glow */
  .title-glow {
    text-shadow: 0 0 40px rgba(255,255,255,0.1), 0 0 80px rgba(199,154,65,0.1);
  }
}

/* 3D Perspective Utilities */
.perspective-element {
  perspective: 1200px;
}

/* Base states for GSAP */
.hero-text-reveal { opacity: 0; transform: translateY(30px); }
.hero-mockup-reveal { opacity: 0; transform: translateY(60px) rotateX(10deg); }
.section-text { opacity: 0; transform: translateY(40px); }
.section-media { opacity: 0; transform: translateY(50px) scale(0.95); }

/* Hover effects */
@media (hover: hover) {
  .hover-tilt:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 
      0 0 0 1px rgba(255, 255, 255, 0.05),
      inset 0 0 0 1px rgba(255, 255, 255, 0.15),
      0 40px 80px -20px rgba(0, 0, 0, 1),
      0 30px 60px -20px rgba(199, 154, 65, 0.15); /* glowing effect */
  }
}