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

@layer base {
  :root {
    --background: 0 0% 5%;
    --foreground: 0 0% 100%;

    --card: 0 0% 5%;
    --card-foreground: 0 0% 100%;

    --popover: 0 0% 5%;
    --popover-foreground: 0 0% 100%;

    --primary: 0 0% 100%;
    --primary-foreground: 0 0% 5%;

    --secondary: 187 51% 56%;
    --secondary-foreground: 0 0% 100%;

    --muted: 187 51% 56%;
    --muted-foreground: 0 0% 100%;

    --accent: 196 32% 77%;
    --accent-foreground: 0 0% 5%;

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

    --border: 187 51% 56%;
    --input: 187 51% 56%;
    --ring: 0 0% 100%;

    --radius: 0.75rem;

    --sidebar-background: 0 0% 100%;
    --sidebar-foreground: 0 0% 5%;
    --sidebar-primary: 0 0% 5%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 187 51% 56%;
    --sidebar-accent-foreground: 0 0% 5%;
    --sidebar-border: 187 51% 56%;
    --sidebar-ring: 187 51% 56%;
  }

  * {
    @apply border-border;
  }

  body {
    @apply bg-background text-foreground;
    font-family: 'Futura PT', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-feature-settings: "rlig" 1, "calt" 1;
    overflow-x: hidden;
    background: radial-gradient(ellipse at bottom, #0c0c0c, #0c0c0c);
  }
  
  html {
    scroll-behavior: smooth;
  }

  /* Font Loading */
  @font-face {
    font-family: 'Futura PT';
    src: url('/fonts/FuturaPT-Book.woff2') format('woff2'),
         url('/fonts/FuturaPT-Book.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }

  /* Apply Futura PT globally */
  * {
    font-family: 'Futura PT', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  }
}

@layer components {
  .text-gradient {
    @apply text-white;
  }
  
  .hero-bg {
    background: #0c0c0c url('https://images.unsplash.com/photo-1517245386807-bb43f82c33c4?fit=crop&w=1920&h=1080') no-repeat center/cover;
    min-height: 100vh;
    position: relative;
  }
  
  .hero-heading {
    @apply text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-bold tracking-tighter;
  }
  
  .section-heading {
    @apply text-2xl sm:text-3xl md:text-4xl font-bold mb-8 relative;
  }
  
  .section-heading::after {
    content: "";
    @apply block absolute left-0 bottom-0 w-16 h-1 bg-[#5db2c2] mt-2;
  }
  
  .section-container {
    @apply container mx-auto px-4 sm:px-6 py-12 sm:py-16 md:py-24;
  }
  
  .reveal-container {
    @apply overflow-hidden;
  }
  
  .reveal-text {
    @apply opacity-0 translate-y-8;
  }
  
  .link-hover-effect {
    @apply relative inline-block after:absolute after:w-full after:scale-x-0 after:h-0.5 after:left-0 after:bottom-0 
      after:bg-[#5db2c2] after:origin-bottom-right after:transition-transform after:duration-300 
      hover:after:scale-x-100 hover:after:origin-bottom-left;
  }

  .glow-effect {
    @apply relative;
  }

  .glow-effect::before {
    content: "";
    @apply absolute inset-0 bg-gradient-to-r from-[#b3d7e7]/10 to-[#5db2c2]/20 opacity-0 rounded-lg blur-xl transition-opacity duration-500 -z-10;
  }

  .glow-effect:hover::before {
    @apply opacity-40;
  }

  .card-3d {
    @apply transition-all duration-300 perspective-1000 transform-style-3d;
  }

  .card-3d:hover {
    @apply transform-translate-z-16;
  }

  .perspective-1000 {
    perspective: 1000px;
  }

  .transform-style-3d {
    transform-style: preserve-3d;
  }

  .transform-translate-z-16 {
    transform: translateZ(16px);
  }
  
  /* Responsive text adjustments */
  .responsive-text-sm {
    @apply text-sm sm:text-base;
  }
  
  .responsive-text-base {
    @apply text-base sm:text-lg;
  }
  
  .responsive-text-lg {
    @apply text-lg sm:text-xl md:text-2xl;
  }
  
  .responsive-text-xl {
    @apply text-xl sm:text-2xl md:text-3xl;
  }
  
  .responsive-text-2xl {
    @apply text-2xl sm:text-3xl md:text-4xl;
  }
}

/* Mobile responsiveness improvements */
@media (max-width: 640px) {
  .section-container {
    @apply py-8 px-4;
  }
  
  .hero-heading {
    @apply text-3xl;
  }
  
  .section-heading {
    @apply text-xl;
  }
  
  .hero-bg {
    background-position: 70% center;
  }
}

@media (max-width: 480px) {
  .section-container {
    @apply py-6 px-3;
  }
  
  .hero-heading {
    @apply text-2xl;
  }
  
  .section-heading {
    @apply text-lg;
  }
}

/* Animation keyframes */
@keyframes float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-20px);
  }
}

@keyframes pulse-glow {
  0%, 100% {
    opacity: 0.7;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
}

@keyframes orbit {
  0% {
    transform: rotate(0deg) translateX(150px) rotate(0deg);
  }
  100% {
    transform: rotate(360deg) translateX(150px) rotate(-360deg);
  }
}

/* Add these custom animations to the existing ones in the theme */
@layer utilities {
  .no-scrollbar::-webkit-scrollbar {
    display: none;
  }
  
  .no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  
  .animation-delay-500 {
    animation-delay: 500ms;
  }
  
  .animation-delay-1000 {
    animation-delay: 1000ms;
  }
  
  .animation-delay-1500 {
    animation-delay: 1500ms;
  }
}

/* Custom scrollbar */
::-webkit-scrollbar {
  @apply w-2;
}

::-webkit-scrollbar-track {
  @apply bg-background;
}

::-webkit-scrollbar-thumb {
  @apply bg-muted rounded-full;
}

::-webkit-scrollbar-thumb:hover {
  @apply bg-[#5db2c2]/50;
}

@keyframes pulse {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}

.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Loading animation styles for testimonials */
.testimonial-skeleton {
  @apply bg-[#0c0c0c] rounded-lg border border-[#5db2c2]/20 overflow-hidden;
  position: relative;
}

.testimonial-skeleton::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transform: translateX(-100%);
  background-image: linear-gradient(
    90deg,
    rgba(93, 178, 194, 0) 0,
    rgba(93, 178, 194, 0.1) 20%,
    rgba(93, 178, 194, 0.2) 60%,
    rgba(93, 178, 194, 0)
  );
  animation: shimmer 2s infinite;
}

@keyframes shimmer {
  100% {
    transform: translateX(100%);
  }
}

.testimonial-loading-spinner {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 4px solid rgba(179, 215, 231, 0.1);
  border-top-color: #5db2c2;
  animation: spinner 1s linear infinite;
}

@keyframes spinner {
  to {
    transform: rotate(360deg);
  }
}

.loading-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #5db2c2;
  display: inline-block;
  margin: 0 3px;
  animation: dot-pulse 1.5s infinite ease-in-out;
}

.loading-dot:nth-child(2) {
  animation-delay: 0.2s;
}

.loading-dot:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes dot-pulse {
  0%, 100% {
    transform: scale(0.8);
    opacity: 0.6;
  }
  50% {
    transform: scale(1.2);
    opacity: 1;
  }
}

/* Enhanced mobile responsiveness for membership cards */
@media (max-width: 768px) {
  .membership-tile {
    width: 100% !important;
    max-width: 400px;
    margin: 0 auto;
  }
  
  .tiles-container {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
    padding: 0 1rem !important;
  }
}

@media (max-width: 480px) {
  .membership-tile {
    max-width: 100%;
  }
  
  .tiles-container {
    gap: 1rem !important;
    padding: 0 0.5rem !important;
  }
}

/* iPhone specific optimizations */
@media (max-width: 414px) {
  .hero-heading {
    @apply text-2xl leading-tight;
  }
  
  .section-heading {
    @apply text-lg leading-tight;
  }
  
  .responsive-text-2xl {
    @apply text-xl;
  }
  
  .responsive-text-xl {
    @apply text-lg;
  }
  
  .responsive-text-lg {
    @apply text-base;
  }
}

/* iPhone SE and smaller devices */
@media (max-width: 375px) {
  .container {
    @apply px-3;
  }
  
  .tiles-container {
    padding: 0 0.25rem !important;
  }
  
  .membership-tile {
    max-width: calc(100vw - 1rem);
  }
}