/* Theme Colors */
:root {
  --theme-bg: #FEFCF9;
  --theme-bg-light: #F5EEE0;
  --theme-text: #5D524B;
  --theme-text-dark: #3E3632;
  --theme-accent: #A67C52;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background-color: var(--theme-bg);
  color: var(--theme-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  font-weight: 400;
}

/* Typography */
h1, h2, h3, h4, h5, h6 { 
  font-family: 'Playfair Display', serif; 
  letter-spacing: -0.02em;
  font-weight: 400;
}

.font-serif { font-family: 'Playfair Display', serif; }

/* Story Paragraph Scroll Animation */
.story-paragraph {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
              transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Only apply hidden state when JS is ready */
.js-ready .story-paragraph {
  opacity: 0;
  transform: translateY(40px);
}

.js-ready .story-paragraph.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Hero Animation */
.reveal-hero {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.js-ready .reveal-hero {
  opacity: 0;
  transform: translateY(20px);
}

.js-ready .reveal-hero.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Waitlist Animation */
.reveal-waitlist {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 1s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
              transform 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.js-ready .reveal-waitlist {
  opacity: 0;
  transform: translateY(30px);
}

.js-ready .reveal-waitlist.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Selection */
::selection {
  background-color: var(--theme-accent);
  color: white;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--theme-accent);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--theme-text-dark);
}

/* Smooth Focus */
input:focus, button:focus, a:focus {
  outline: none;
}

input:focus-visible, button:focus-visible, a:focus-visible {
  outline: 2px solid var(--theme-accent);
  outline-offset: 2px;
}

/* Button & Link Transitions */
button, a {
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Line Through */
.line-through {
  text-decoration: line-through;
  text-decoration-color: var(--theme-text);
  text-decoration-thickness: 2px;
}

/* Italic Emphasis */
i {
  font-style: italic;
}

/* Pulse Animation */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

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

/* Scroll Mouse Animation */
@keyframes scroll-mouse {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  50% {
    opacity: 0.5;
    transform: translateY(8px);
  }
  100% {
    opacity: 0;
    transform: translateY(16px);
  }
}

.animate-scroll-mouse {
  animation: scroll-mouse 1.5s ease-in-out infinite;
}

/* Scroll Indicator Fade In */
.scroll-indicator {
  opacity: 0;
  animation: fade-in 1s ease forwards;
  animation-delay: 1.5s;
}

@keyframes fade-in {
  to { opacity: 1; }
}

/* Radial Gradient Background */
.bg-gradient-radial {
  background: radial-gradient(circle, var(--tw-gradient-from) 0%, var(--tw-gradient-to) 70%);
}

/* Hide Scrollbar */
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

/* Phone Carousel - Touch Scroll */
.phone-carousel {
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  cursor: grab;
  user-select: none;
}

.phone-carousel:active {
  cursor: grabbing;
}

.phone-carousel > * {
  scroll-snap-align: center;
}

.phone-carousel video {
  pointer-events: none;
}

/* Hero Section Animations */
@keyframes hero-float-1 {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-20px) rotate(5deg); }
}

@keyframes hero-float-2 {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-15px) rotate(-3deg); }
}

@keyframes hero-float-3 {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-10px) scale(1.05); }
}

@keyframes hero-glow {
  0%, 100% { opacity: 0.8; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.1); }
}

@keyframes hero-pulse {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.3); }
}

.hero-float-1 {
  animation: hero-float-1 8s ease-in-out infinite;
}

.hero-float-2 {
  animation: hero-float-2 10s ease-in-out infinite;
  animation-delay: 1s;
}

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

.hero-glow-1 {
  animation: hero-glow 12s ease-in-out infinite;
}

.hero-glow-2 {
  animation: hero-glow 15s ease-in-out infinite;
  animation-delay: 3s;
}

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

/* Hero Staggered Animation */
.js-ready .hero-stagger-1,
.js-ready .hero-stagger-2,
.js-ready .hero-stagger-3,
.js-ready .hero-stagger-4,
.js-ready .hero-stagger-5,
.js-ready .hero-stagger-6 {
  opacity: 0;
  transform: translateY(30px);
}

.js-ready .reveal-hero.visible .hero-stagger-1 {
  animation: stagger-in 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  animation-delay: 0.1s;
}

.js-ready .reveal-hero.visible .hero-stagger-2 {
  animation: stagger-in 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  animation-delay: 0.2s;
}

.js-ready .reveal-hero.visible .hero-stagger-3 {
  animation: stagger-in 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  animation-delay: 0.35s;
}

.js-ready .reveal-hero.visible .hero-stagger-4 {
  animation: stagger-in 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  animation-delay: 0.5s;
}

.js-ready .reveal-hero.visible .hero-stagger-5 {
  animation: stagger-in 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  animation-delay: 0.65s;
}

.js-ready .reveal-hero.visible .hero-stagger-6 {
  animation: stagger-in 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  animation-delay: 0.8s;
}

@keyframes stagger-in {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}