/* ==============================================================================
   LOCAL FONTS (GDPR COMPLIANT - NO GOOGLE SERVER CALLS)
   ============================================================================== */

/* playfair-display-regular - latin */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/playfair-display/playfair-display-v40-latin-regular.woff2') format('woff2');
}

/* playfair-display-600 - latin */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/playfair-display/playfair-display-v40-latin-600.woff2') format('woff2');
}

/* playfair-display-700 - latin */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/playfair-display/playfair-display-v40-latin-700.woff2') format('woff2');
}

/* playfair-display-italic - latin */
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/playfair-display/playfair-display-v40-latin-italic.woff2') format('woff2');
}

/* outfit-300 - latin */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/outfit/outfit-v15-latin-300.woff2') format('woff2');
}

/* outfit-regular - latin */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/outfit/outfit-v15-latin-regular.woff2') format('woff2');
}

/* outfit-500 - latin */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/outfit/outfit-v15-latin-500.woff2') format('woff2');
}

/* outfit-600 - latin */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/outfit/outfit-v15-latin-600.woff2') format('woff2');
}

/* outfit-700 - latin */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/outfit/outfit-v15-latin-700.woff2') format('woff2');
}

/* dm-serif-display-regular - latin (Akzentschrift) */
@font-face {
  font-family: 'DM Serif Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/dm-serif-display/dm-serif-display-v17-latin-regular.woff2') format('woff2');
}

/* ==============================================================================
   BASE STYLES & LAYOUT
   ============================================================================== */
html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Outfit', sans-serif;
  background-color: #fdfbf7; /* Cream background */
  color: #1c1917; /* Charcoal text */
}

.font-serif, h1, h2, h3, h4, h5, h6 {
  font-family: 'Playfair Display', serif;
}

/* Accessibility Focus States */
:root {
  --color-focus: #b45309;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 4px;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #fdfbf7;
}

::-webkit-scrollbar-thumb {
  background: #eed6a9; /* bakery-200 */
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #e1b777; /* bakery-300 */
}

/* Modal Animations */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

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

.animate-fade-in {
  animation: fadeIn 0.3s ease-out forwards;
}

.animate-slide-up {
  animation: slideUp 0.3s ease-out forwards;
}

/* Pulse animation for opening status */
@keyframes pulseLight {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.75; }
}

.animate-pulse-light {
  animation: pulseLight 2s ease-in-out infinite;
}

/* Respect user motion preferences */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==============================================================================
   HERO ANIMATIONS (one-time entrance on page load)
   ============================================================================== */
@keyframes heroFadeUp {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-animate {
  opacity: 0;
  animation: heroFadeUp 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: var(--delay, 0s);
}

/* ==============================================================================
   SCROLL REVEAL (IntersectionObserver)
   ============================================================================== */
@keyframes revealUp {
  from {
    opacity: 0;
    transform: translateY(32px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--delay, 0s);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ==============================================================================
   3D CARD HOVER EFFECT
   ============================================================================== */
.card-3d {
  transform-style: preserve-3d;
  perspective: 1000px;
  will-change: transform;
}

.card-3d:hover {
  transform: translateY(-6px) rotateX(2deg);
  box-shadow: 0 20px 40px -10px rgba(69, 26, 3, 0.25);
}

/* ==============================================================================
   SLOW BOUNCE (Scroll-Indikator Hero)
   ============================================================================== */
@keyframes bounceSlow {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

.animate-bounce-slow {
  animation: bounceSlow 2.4s ease-in-out infinite;
}