/* ========================================
   YUMMY DELIGHTS - Main Styles
   ======================================== */

:root {
  --pink-tile: #B8847A;
  --pink-light: #D4B0A6;
  --pink-deep: #9E6B61;
  --pink-dark: #6B4842;
  --cream: #FFF6F2;
  --cream-warm: #FFEDE6;
  --white: #FFFFFF;
  --frost-bg: rgba(184, 132, 122, 0.15);
  --text-primary: #6B4842;
  --text-secondary: rgba(107, 72, 66, 0.6);
  --font-display: "Didot", "Bodoni MT", "Noto Serif Display", "GFS Didot", Georgia, serif;
  --font-body: "Gill Sans", "Optima", "Avenir", "Segoe UI", sans-serif;
  --blur-amount: 40px;
  --transition-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --transition-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  height: 100%;
}

body {
  width: 100%;
  height: 100vh;
  height: 100dvh;
  min-height: -webkit-fill-available;
  overflow: hidden;
  /* No padding on body — backgrounds bleed edge to edge */
  margin: 0;
  padding: 0;
  font-family: var(--font-body);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---- Layer 1: Pink Tile Background ---- */
#tile-bg {
  position: fixed;
  inset: -60px 0;
  z-index: 0;
  background-color: var(--pink-tile);
  background-image:
    /* Grout lines - horizontal */
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,0.35) 0px,
      rgba(255,255,255,0.35) 2px,
      transparent 2px,
      transparent 72px
    ),
    /* Grout lines - vertical */
    repeating-linear-gradient(
      to right,
      rgba(255,255,255,0.35) 0px,
      rgba(255,255,255,0.35) 2px,
      transparent 2px,
      transparent 72px
    ),
    /* Tile gloss highlight */
    repeating-linear-gradient(
      135deg,
      rgba(255,255,255,0.06) 0%,
      rgba(255,255,255,0.06) 35px,
      transparent 35px,
      transparent 72px
    );
  background-size: 72px 72px;
}

/* Tile shimmer removed — was causing distracting sweep line */

/* ---- Layer 2: WebGL Drops Canvas ---- */
#drops-canvas {
  position: fixed;
  inset: -60px 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  filter: blur(var(--blur-amount));
  opacity: 0.85;
}

/* ---- Layer 3: Frost Overlay ---- */
#frost-overlay {
  position: fixed;
  inset: -60px 0;
  z-index: 2;
  background: var(--frost-bg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* ---- Layer 4: Grain Texture ---- */
#grain-overlay {
  position: fixed;
  inset: -60px 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");
  background-size: 128px 128px;
}

/* ---- Layer 5: App Container ---- */
#app {
  position: fixed;
  inset: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---- Typography ---- */
.main-title {
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 10vw, 7rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  text-align: center;
  margin-bottom: 1rem;
}

.main-title .title-word {
  display: block;
  opacity: 0;
  transform: translateY(40px) scale(0.95);
  animation: titleReveal 1s var(--transition-smooth) forwards;
  animation-delay: calc(0.3s + var(--i) * 0.2s);
}

@keyframes titleReveal {
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.pre-title {
  font-family: var(--font-body);
  font-size: 0.75rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--text-secondary);
  text-align: center;
  margin-bottom: 1.5rem;
  opacity: 0;
  animation: fadeInUp 0.8s var(--transition-smooth) 0.1s forwards;
}

.tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1rem, 2.5vw, 1.35rem);
  color: var(--text-secondary);
  text-align: center;
  margin-bottom: 2.5rem;
  opacity: 0;
  animation: fadeInUp 0.8s var(--transition-smooth) 0.7s forwards;
}

.hint-text {
  font-size: 0.7rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--text-secondary);
  text-align: center;
  margin-top: 1.5rem;
  opacity: 0;
  animation: fadeInUp 0.8s var(--transition-smooth) 1.1s forwards;
}

.step-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 6vw, 3.5rem);
  font-weight: 400;
  line-height: 1.15;
  color: var(--text-primary);
  text-align: center;
  margin-bottom: 2rem;
}

.step-title em {
  font-style: italic;
  color: var(--pink-deep);
}

.step-subtitle {
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-secondary);
  text-align: center;
  margin-bottom: 2rem;
}

.fine-print {
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  color: var(--text-secondary);
  text-align: center;
  margin-top: 1.5rem;
  font-style: italic;
}

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

@keyframes fadeOutUp {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-30px);
  }
}

@keyframes fadeInFromBelow {
  from {
    opacity: 0;
    transform: translateY(40px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes pulseGlow {
  0%, 100% {
    box-shadow:
      0 0 20px rgba(196, 86, 122, 0.15),
      0 0 60px rgba(196, 86, 122, 0.05);
  }
  50% {
    box-shadow:
      0 0 30px rgba(196, 86, 122, 0.3),
      0 0 80px rgba(196, 86, 122, 0.1);
  }
}

@keyframes breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.02); }
}

@keyframes dripFall {
  0% {
    opacity: 0.8;
    transform: translateY(0) scale(1);
  }
  70% {
    opacity: 0.6;
    transform: translateY(30px) scale(0.7);
  }
  100% {
    opacity: 0;
    transform: translateY(50px) scale(0.3);
  }
}

/* Selection styling */
::selection {
  background: var(--pink-light);
  color: var(--pink-dark);
}

/* Scrollbar hidden */
::-webkit-scrollbar { display: none; }