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

:root {
  --yu-yellow: #FFCF06;
  --yu-black: #111111;
  --yu-white: #FFFFFF;
  --yu-magenta: #E91E63;
  --yu-green: #2E7D32;
}

/* Custom Typography */
.font-heading {
  font-family: 'Nunito', system-ui, -apple-system, sans-serif;
  letter-spacing: -0.02em;
}

.font-body {
  font-family: 'Work Sans', system-ui, -apple-system, sans-serif;
}

.font-script {
  font-family: 'Caveat', cursive;
}

/* Minimal Elegant Preloader Styles */
#preloader {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #111111;
  color: #FFCF06;
  overflow: hidden;
  user-select: none;
}

/* Grain textures */
.bg-grain-yellow {
  background-color: #FFCF06;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.035'/%3E%3C/svg%3E");
}

.bg-grain-light {
  background-color: #FFFFFF;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.02'/%3E%3C/svg%3E");
}

/* Playful Refined Sticker Badge Styles */
.sticker-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.45rem 1.1rem;
  border-radius: 9999px;
  border: 2px solid #111111;
  box-shadow: 3px 3px 0px #111111;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  user-select: none;
  font-size: 0.75rem;
}

.sticker-badge:hover {
  transform: scale(1.05) rotate(-2deg);
  box-shadow: 5px 5px 0px #111111;
}

.sticker-yellow {
  background-color: #FFCF06;
  color: #111111;
}

.sticker-white {
  background-color: #FFFFFF;
  color: #111111;
}

.sticker-black {
  background-color: #111111;
  color: #FFFFFF;
}

.sticker-pink {
  background-color: #FF4081;
  color: #FFFFFF;
}

.sticker-green {
  background-color: #00E676;
  color: #111111;
}

.sticker-red {
  background-color: #D32F2F;
  color: #FFFFFF;
}

/* Gallery Column & Soft Rounded Tile Styles for Option C */
.gallery-column-wrapper {
  mask-image: linear-gradient(to bottom, transparent 0%, black 6%, black 94%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 6%, black 94%, transparent 100%);
}

.editorial-card-soft {
  border-radius: 1.25rem;
  padding: 0.85rem;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.07);
  transition: transform 0.3s cubic-bezier(0.2, 0, 0, 1), box-shadow 0.3s ease;
}

.editorial-card-soft:hover {
  transform: translateY(-4px) scale(1.03);
  box-shadow: 0 20px 35px rgba(0, 0, 0, 0.12);
}

/* MasterChow 4-Step Process Cards */
.process-step-card {
  border-radius: 1.5rem;
  border: 2px solid #111111;
  background-color: #FFFFFF;
  box-shadow: 4px 4px 0px #111111;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.process-step-card:hover {
  transform: translateY(-6px) rotate(-1deg);
  box-shadow: 8px 8px 0px #111111;
}

/* Moi Soi Category Craving Tiles */
.craving-tile {
  border-radius: 1.75rem;
  border: 2px solid #111111;
  box-shadow: 5px 5px 0px #111111;
  transition: transform 0.3s cubic-bezier(0.2, 0, 0, 1), box-shadow 0.3s ease;
}

.craving-tile:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 9px 9px 0px #111111;
}

/* Continuous Marquee Ticker */
@keyframes marquee {
  0% { transform: translateX(0%); }
  100% { transform: translateX(-50%); }
}

.animate-marquee {
  display: flex;
  width: max-content;
  animation: marquee 22s linear infinite;
}

.animate-marquee:hover {
  animation-play-state: paused;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #111111;
}
::-webkit-scrollbar-thumb {
  background: #FFCF06;
  border-radius: 4px;
}