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

:root {
  --primary: #000000;
  --accent: #49111C;
  --neutral: #ffffff;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
  height: 100%;
  overflow-x: hidden;
}

body {
  font-family: 'Inter', sans-serif;
  background-color: var(--primary);
  color: var(--neutral);
  min-height: 100vh;
  /* mobile viewport bug fix */
  min-height: -webkit-fill-available;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

#root {
  min-height: 100vh;
  /* mobile viewport bug fix */
  min-height: -webkit-fill-available;
  display: flex;
  flex-direction: column;
}

.logo-font {
  font-family: 'Bodoni Moda', serif;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.section-padding {
  @apply py-20 md:py-24;
}

.gradient-bg {
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.95) 0%, rgba(20, 20, 20, 0.8) 100%);
}

.btn-primary {
  @apply bg-accent hover:bg-accent/90 text-neutral font-medium py-3 px-6 rounded-md transition-all duration-300 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-accent focus:ring-opacity-50;
}

.btn-secondary {
  @apply border-2 border-accent text-neutral hover:bg-accent hover:text-neutral font-medium py-3 px-6 rounded-md transition-all duration-300 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-accent focus:ring-opacity-50;
}

.card {
  @apply bg-white/5 backdrop-blur-sm rounded-xl p-6 transition-all duration-300 hover:bg-white/10 border border-white/10;
}

.section-title {
  @apply text-4xl md:text-5xl font-bold mb-12 relative inline-block text-neutral;
}

.section-title::after {
  content: '';
  @apply absolute -bottom-4 left-0 w-full h-1 bg-accent rounded-full;
}

.grid-pattern {
  background-image: 
    linear-gradient(rgba(73, 17, 28, 0.8) 1px, transparent 1px),
    linear-gradient(90deg, rgba(73, 17, 28, 0.8) 1px, transparent 1px);
  background-size: 40px 40px;
  opacity: 0.3;
}

/* Galaxy background effects */
@keyframes twinkle {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.8; }
}

.star-cluster {
  animation: twinkle 3s ease-in-out infinite;
}

.quantum-sphere {
  @apply fixed rounded-full opacity-20;
  background: radial-gradient(circle, rgba(73, 17, 28, 0.4) 0%, rgba(73, 17, 28, 0) 70%);
  transform-style: preserve-3d;
  transition: transform 0.2s ease-out, left 0.5s ease-out, top 0.5s ease-out;
}

/* 3D sphere effects */
.sphere-3d {
  background: radial-gradient(circle at 30% 30%, rgba(242, 244, 243, 0.4) 0%, rgba(73, 17, 28, 0.2) 60%, rgba(0, 0, 0, 0.1) 100%);
  box-shadow: inset -5px -5px 10px rgba(0, 0, 0, 0.3), 0 0 20px rgba(73, 17, 28, 0.3);
  transform-style: preserve-3d;
}

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

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

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

.animate-orbit {
  animation: orbit 15s linear infinite;
}

/* Galaxy animation */
@keyframes pulse-glow {
  0% { opacity: 0.4; box-shadow: 0 0 15px rgba(73, 17, 28, 0.2); }
  50% { opacity: 0.8; box-shadow: 0 0 30px rgba(73, 17, 28, 0.5); }
  100% { opacity: 0.4; box-shadow: 0 0 15px rgba(73, 17, 28, 0.2); }
}

.animate-pulse-glow {
  animation: pulse-glow 3s ease-in-out infinite;
}

/* Form styling */
.form-input {
  @apply w-full bg-white/5 border border-white/10 rounded-md py-3 px-4 text-neutral placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent transition duration-300;
}

/* Image fade effect */
.image-fade-left {
  mask-image: linear-gradient(to right, transparent 0%, black 30%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 30%);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .section-padding {
    @apply py-16;
  }
  
  .section-title {
    @apply text-3xl mb-8;
  }
}

/* Fix for mobile browser chrome hiding */
@supports (-webkit-touch-callout: none) {
  .min-h-screen {
    min-height: -webkit-fill-available;
  }
}