/**
 * Millet Maharaja — Custom Effects, 3D Transforms, Responsive & Animation Styles
 */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;0,700;1,500&family=Poppins:wght@400;500;600;700;800;900&display=swap');

:root {
  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-sans: "Poppins", system-ui, -apple-system, sans-serif;
  --color-forest: #1f3d2b;
  --color-forest-deep: #12241a;
  --color-forest-soft: #2d5540;
  --color-gold: #d9a441;
  --color-gold-soft: #e8c97a;
  --color-gold-deep: #b4842a;
  --color-cream: #f6f0e3;
  --color-cream-dark: #e8dcc4;
  --color-ink: #121814;
}

html {
  scroll-behavior: smooth;
  -webkit-tap-highlight-color: transparent;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--color-cream);
  color: var(--color-ink);
  overflow-x: hidden;
}

::selection {
  background: #d9a441;
  color: #12241a;
}

.snap-page {
  scroll-snap-type: y proximity;
}

.snap-section {
  scroll-snap-align: start;
}

.temple-border {
  background-image: repeating-linear-gradient(
      90deg,
      #d9a441 0 10px,
      transparent 10px 18px
    ),
    repeating-linear-gradient(90deg, #1f3d2b 0 4px, transparent 4px 18px);
  background-size: 100% 6px, 100% 3px;
  background-position: top, 0 8px;
  background-repeat: repeat-x;
}

.grain-overlay {
  background-image: radial-gradient(circle at 20% 20%, rgba(217, 164, 65, 0.08), transparent 40%),
    radial-gradient(circle at 80% 0%, rgba(31, 61, 43, 0.08), transparent 35%);
}

.gold-glow {
  box-shadow: 0 0 0 1px rgba(217, 164, 65, 0.45), 0 18px 40px rgba(31, 61, 43, 0.18);
}

.hide-scroll {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.hide-scroll::-webkit-scrollbar {
  display: none;
}

/* 3D Card Flip Transforms */
.preserve-3d {
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
}

.backface-hidden {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.rotate-y-180 {
  transform: rotateY(180deg);
}

/* Modal Animations */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes modalPop {
  0% { opacity: 0; transform: scale(0.92) translateY(16px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes drawerSlideIn {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

@keyframes crownPulse {
  0%, 100% { transform: scale(1) rotate(0deg); }
  25% { transform: scale(1.05) rotate(5deg); }
  75% { transform: scale(1.05) rotate(-5deg); }
}

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

.animate-fade-in {
  animation: fadeIn 0.3s ease-out forwards;
}

.animate-modal-pop {
  animation: modalPop 0.35s cubic-bezier(0.2, 0.9, 0.3, 1) forwards;
}

.animate-drawer-slide {
  animation: drawerSlideIn 0.35s cubic-bezier(0.2, 0.9, 0.3, 1) forwards;
}

.animate-crown {
  animation: crownPulse 3s infinite ease-in-out;
}

.animate-shimmer {
  animation: shimmerProgress 1.4s infinite ease-in-out;
}

/* Mobile Optimizations */
@media (max-width: 640px) {
  .snap-section {
    scroll-snap-align: none;
  }
}