@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Syne:wght@600;700;800&display=swap');

:root {
  --kiosk-navy-dark: #152530;
  --kiosk-navy: #1F3645;
  --kiosk-navy-light: #2D4C5E;
  --cinnamon-amber: #D97706;
  --cinnamon-dark: #A15502;
  --glaze-gold: #F59E0B;
  --dough-cream: #FAF7F2;
  --flour-sand: #F3ECE1;
  --coffee-espresso: #241611;
  --sage-accent: #2E6F54;
  --sage-light: #E7F1EB;
}

body {
  font-family: 'Plus Jakarta Sans', sans-serif;
  background-color: var(--dough-cream);
  color: #2D3748;
  overflow-x: hidden;
}

.font-serif-display {
  font-family: 'DM Serif Display', Georgia, serif;
}

.font-syne {
  font-family: 'Syne', sans-serif;
}

/* Fairy light string animation */
@keyframes fairyPulse {
  0%, 100% {
    opacity: 0.85;
    filter: drop-shadow(0 0 6px rgba(251, 191, 36, 0.7));
  }
  50% {
    opacity: 1;
    filter: drop-shadow(0 0 14px rgba(245, 158, 11, 0.95));
  }
}

.fairy-light {
  animation: fairyPulse 2.8s ease-in-out infinite;
}

.fairy-light:nth-child(2n) {
  animation-delay: 0.7s;
}
.fairy-light:nth-child(3n) {
  animation-delay: 1.4s;
}

/* Subtle float */
@keyframes softFloat {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-8px) rotate(1deg);
  }
}

.animate-soft-float {
  animation: softFloat 5s ease-in-out infinite;
}

/* Subtle aroma steam */
@keyframes steamWave {
  0% {
    opacity: 0;
    transform: translateY(0) scaleX(1);
  }
  40% {
    opacity: 0.6;
  }
  100% {
    opacity: 0;
    transform: translateY(-24px) scaleX(1.3);
  }
}

.aroma-steam {
  animation: steamWave 3.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

/* Infinite marquee ticker */
@keyframes ticker {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-50%);
  }
}

.ticker-track {
  display: flex;
  width: max-content;
  animation: ticker 28s linear infinite;
}

.ticker-track:hover {
  animation-play-state: paused;
}

/* Glassmorphism */
.glass-panel {
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.6);
}

.glass-panel-dark {
  background: rgba(21, 37, 48, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #F3ECE1;
}
::-webkit-scrollbar-thumb {
  background: #D97706;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #A15502;
}

/* Card hover glow */
.kiosk-card-hover {
  transition: all 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.kiosk-card-hover:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 35px -10px rgba(31, 54, 69, 0.15), 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* Button micro-interactions */
.btn-kiosk {
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}
.btn-kiosk::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.5s ease, height 0.5s ease;
}
.btn-kiosk:hover::after {
  width: 250%;
  height: 250%;
}

/* Dusk / Daylight Kiosk Mood Transition */
.kiosk-preview-wrapper {
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Badge pulse */
@keyframes liveDot {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.4);
    opacity: 0.6;
  }
}
.live-pulse {
  animation: liveDot 1.8s ease-in-out infinite;
}