/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Inter:wght@300;400;500;600&family=Kalam:wght@400;700&display=swap');

/* Tailwind is compiled separately to builds/tailwind.css */

/* CSS Variables for semantic colors */
:root {
  --color-midnight-navy: #1A1F36;
  --color-midnight-dark: #0E1525;
  --color-popcorn-butter: #FFD866;
  --color-popcorn-dark: #E6C050;
  --color-soft-coral: #FF7F6A;
  --color-warm-gray: #F4F4F2;
  --color-charcoal: #333333;
  --color-paper-white: #F4F4F2;
  --color-brick-red: #E4584D;
  --jar-glass: rgba(244, 244, 242, 0.08);
  --paper-shadow: rgba(26, 31, 54, 0.2);
}

/* Base styles */
body {
  font-family: 'Inter', sans-serif;
  background: linear-gradient(180deg, var(--midnight-navy) 0%, var(--midnight-dark) 100%);
  color: var(--warm-gray);
  min-height: 100vh;
}

h1, h2, h3, h4, h5, h6, .font-heading {
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
}

.font-handwritten {
  font-family: 'Kalam', cursive;
}

/* Mason Jar Styles */
.mason-jar {
  background: linear-gradient(
    135deg,
    var(--jar-glass) 0%,
    rgba(244, 244, 242, 0.02) 100%
  );
  border: 2px solid rgba(255, 216, 102, 0.2);
  border-radius: 0.5rem 0.5rem 35% 35% / 0.5rem 0.5rem 15% 15%;
  box-shadow: 
    inset 0 2px 20px rgba(255, 216, 102, 0.1),
    0 8px 32px rgba(14, 21, 37, 0.4);
  position: relative;
  overflow: visible;
}

.mason-jar-lid {
  background: linear-gradient(135deg, #4a5568 0%, #2d3748 100%);
  border: 2px solid rgba(255, 216, 102, 0.3);
  border-radius: 0.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Button Styles */
.btn-primary {
  background: linear-gradient(135deg, var(--popcorn-butter) 0%, #FFE29E 100%);
  color: var(--midnight-navy);
  font-weight: 600;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(255, 216, 102, 0.3);
}

/* Cinematic vignette effect */
.vignette::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 0%, rgba(14, 21, 37, 0.4) 100%);
  z-index: 1;
}

/* Grain effect for cinematic feel */
.grain::after {
  content: "";
  position: fixed;
  top: -100%;
  left: -100%;
  width: 300%;
  height: 300%;
  opacity: 0.04;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' /%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' /%3E%3C/svg%3E");
  animation: grain 8s steps(10) infinite;
  z-index: 1;
}

@keyframes grain {
  0%, 100% { transform: translate(0, 0) }
  10% { transform: translate(-5%, -10%) }
  20% { transform: translate(-15%, 5%) }
  30% { transform: translate(7%, -25%) }
  40% { transform: translate(-5%, 25%) }
  50% { transform: translate(-15%, 10%) }
  60% { transform: translate(15%, 0%) }
  70% { transform: translate(0%, 15%) }
  80% { transform: translate(3%, 35%) }
  90% { transform: translate(-10%, 10%) }
}

/* Glow pulse animation for buttons */
@keyframes glowPulse {
  0%, 100% {
    box-shadow: 0 0 5px rgba(255, 216, 102, 0.5),
                0 0 20px rgba(255, 216, 102, 0.3),
                0 0 30px rgba(255, 216, 102, 0.1);
  }
  50% {
    box-shadow: 0 0 10px rgba(255, 216, 102, 0.8),
                0 0 30px rgba(255, 216, 102, 0.5),
                0 0 40px rgba(255, 216, 102, 0.3);
  }
}

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

/* Shake animation for jar icons */
@keyframes shake {
  0%, 100% { transform: translateX(0) rotate(0deg); }
  10% { transform: translateX(-2px) rotate(-1deg); }
  20% { transform: translateX(2px) rotate(1deg); }
  30% { transform: translateX(-2px) rotate(-1deg); }
  40% { transform: translateX(2px) rotate(1deg); }
  50% { transform: translateX(-1px) rotate(0deg); }
}

.group:hover .group-hover\\:animate-shake {
  animation: shake 0.5s ease-in-out;
}