/* ================================
   Common Styles - Fortune Omikuji
   ================================ */

/* CSS Variables */
:root {
  --gold: #C9A227;
  --gold-light: #E8D48A;
  --gold-dark: #8B6914;
  --cream: #FDF8F0;
  --warm-white: #FFFEF9;
  --charcoal: #2C2C2C;
  --vermillion: #D14836;
  --sage: #7A8B6E;
}

/* Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Base */
body {
  font-family: 'Cormorant Garamond', serif;
  background: var(--cream);
  color: var(--charcoal);
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* Background gradient */
.background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background: 
    radial-gradient(ellipse at 30% 20%, rgba(255, 220, 150, 0.3) 0%, transparent 50%),
    linear-gradient(180deg, #FFF9E8 0%, #FDF8F0 50%, #F5EDE0 100%);
}

/* Sakura particles */
.particles {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

.petal {
  position: absolute;
  background: linear-gradient(135deg, #FFB7C5 0%, #FFC9D4 100%);
  border-radius: 50% 0 50% 50%;
  opacity: 0.6;
  animation: fall linear infinite;
}

.petal.small { width: 8px; height: 8px; }
.petal.medium { width: 12px; height: 12px; }
.petal.large { width: 16px; height: 16px; }
.petal.xlarge { width: 20px; height: 20px; }

@keyframes fall {
  0% { transform: translateY(-10vh) rotate(0deg) translateX(0); opacity: 0; }
  10% { opacity: 0.6; }
  90% { opacity: 0.6; }
  100% { transform: translateY(110vh) rotate(720deg) translateX(50px); opacity: 0; }
}

/* Common animations */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes popIn {
  0% { transform: scale(0.8); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}