/* Reset și configurare de bază */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Paletă de culori - variabile CSS */
:root {
  /* Culori noi - albastru inchis cu accent roz vibrant */
  --bg-dark: #0F1B2E;
  --surface-dark: #1A2A3E;
  --surface-light: #233450;
  --text-light: #F0F4F8;
  --text-muted: #A8B8CC;
  --accent-gold: #FF6B9D;
  --accent-gold-hover: #FF85B3;
  --cream: #F0F4F8;
  --espresso: #1A2A3E;
  --border: #314158;

  /* Culori complementare */
  --sage-green: #6B7C6E;
  --sage-green-dark: #4A5A4D;
  --terracotta: #FF6B9D;
  --terracotta-light: #FF85B3;
  --ivory: #F0F4F8;
  --ivory-dark: #E8ECEF;
  --charcoal: #0F1B2E;
}

body {
  overflow-x: hidden;
}

/* Navigație */
.nav-link {
  position: relative;
  font-weight: 500;
  transition: all 0.3s ease;
  text-decoration: none;
  display: inline-block;
}

.nav-link:hover {
  color: var(--accent-gold) !important;
  transform: translateY(-2px);
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent-gold), var(--accent-gold-hover));
  transition: width 0.3s ease;
}

.nav-link:hover::after,
.nav-link.active::after {
  width: 100%;
}

.logo-hover {
  transition: all 0.3s ease;
  text-decoration: none;
}

.logo-hover:hover {
  transform: scale(1.05);
}

.cup-icon {
  display: inline-block;
  transition: transform 0.3s ease;
}

.logo-hover:hover .cup-icon {
  transform: rotate(5deg);
  animation: cupTilt 0.6s ease-in-out;
}

@keyframes cupTilt {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(5deg); }
  75% { transform: rotate(-5deg); }
}

/* Mobile menu */
.mobile-menu-toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  transition: transform 0.3s ease;
}

.mobile-menu-toggle:hover {
  transform: rotate(90deg);
}

.mobile-menu {
  transition: max-height 0.3s ease, opacity 0.3s ease;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
}

.mobile-menu.open {
  max-height: 400px;
  opacity: 1;
}

/* Animație abur (steam) */
.steam-svg {
  filter: blur(2px);
}

.steam-line {
  stroke-dasharray: 120;
  stroke-dashoffset: 120;
  animation: steamRise 4s ease-in-out infinite;
}

.steam-1 {
  animation-delay: 0s;
}

.steam-2 {
  animation-delay: 0.5s;
}

.steam-3 {
  animation-delay: 1s;
}

@keyframes steamRise {
  0% {
    stroke-dashoffset: 120;
    opacity: 0;
  }
  20% {
    opacity: 0.6;
  }
  80% {
    opacity: 0.7;
  }
  100% {
    stroke-dashoffset: 0;
    opacity: 0;
  }
}

/* Butoane */
.btn-primary {
  text-decoration: none;
  display: inline-block;
  box-shadow: 0 4px 15px rgba(201, 168, 108, 0.3);
}

.btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 25px rgba(201, 168, 108, 0.5);
}

.btn-secondary {
  text-decoration: none;
  display: inline-block;
  background: transparent;
}

.btn-secondary:hover {
  background-color: rgba(201, 168, 108, 0.1);
  transform: translateY(-3px);
}

.glow-button {
  animation: glowPulse 2s ease-in-out infinite;
}

@keyframes glowPulse {
  0%, 100% {
    box-shadow: 0 4px 15px rgba(201, 168, 108, 0.3);
  }
  50% {
    box-shadow: 0 4px 25px rgba(201, 168, 108, 0.6);
  }
}

/* Divider line */
.divider-line {
  height: 2px;
  width: 40%;
  background: linear-gradient(90deg, transparent, var(--accent-gold), transparent);
}

/* Reveal animation */
.reveal-element {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.reveal-element.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Feature cards */
.feature-card {
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.feature-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 8px 25px rgba(201, 168, 108, 0.3);
  border-color: var(--accent-gold) !important;
}

/* Floating beans */
.floating-beans-container {
  pointer-events: none;
}

.bean-float {
  animation: beanFloat 8s ease-in-out infinite;
}

.bean-1 {
  animation-delay: 0s;
  animation-duration: 8s;
}

.bean-2 {
  animation-delay: 2s;
  animation-duration: 10s;
}

.bean-3 {
  animation-delay: 4s;
  animation-duration: 12s;
}

@keyframes beanFloat {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  25% {
    transform: translateY(-20px) rotate(5deg);
  }
  50% {
    transform: translateY(-10px) rotate(-3deg);
  }
  75% {
    transform: translateY(-25px) rotate(7deg);
  }
}

.floating-beans-about svg {
  animation: floatSlow 6s ease-in-out infinite;
}

.floating-beans-about svg:nth-child(1) {
  animation-delay: 0s;
}

.floating-beans-about svg:nth-child(2) {
  animation-delay: 2s;
}

.floating-beans-about svg:nth-child(3) {
  animation-delay: 4s;
}

@keyframes floatSlow {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-15px) rotate(10deg);
  }
}

/* Specialty cards cu pour effect */
.specialty-card:hover .pour-overlay {
  opacity: 1 !important;
}

.specialty-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 30px rgba(201, 168, 108, 0.4);
}

/* Menu cards */
.menu-item-card {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.menu-item-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 20px rgba(201, 168, 108, 0.3);
  border-color: var(--accent-gold) !important;
}

.menu-price {
  white-space: nowrap;
}

/* Event cards */
.event-card {
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.event-card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 8px 25px rgba(201, 168, 108, 0.4);
  border-color: var(--accent-gold) !important;
}

.event-icon {
  animation: iconBounce 3s ease-in-out infinite;
}

@keyframes iconBounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

/* Contact form */
.contact-form input,
.contact-form textarea {
  outline: none;
}

.contact-form input:focus,
.contact-form textarea:focus {
  border-color: var(--terracotta) !important;
  box-shadow: 0 0 0 3px rgba(193, 120, 86, 0.2);
}

.contact-item {
  transition: all 0.3s ease;
}

.contact-item:hover {
  transform: translateX(8px);
  box-shadow: 0 4px 20px rgba(193, 120, 86, 0.3);
}

/* Form message */
#formMessage.success {
  background-color: rgba(34, 197, 94, 0.2);
  border: 2px solid #22c55e;
  color: #86efac;
}

#formMessage.error {
  background-color: rgba(239, 68, 68, 0.2);
  border: 2px solid #ef4444;
  color: #fca5a5;
}

/* Hero section */
.hero-section {
  position: relative;
}

.hero-overlay {
  backdrop-filter: blur(2px);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .steam-svg {
    width: 60px;
    height: 100px;
  }

  .feature-card,
  .menu-item-card,
  .event-card {
    transform: none !important;
  }

  .feature-card:hover,
  .menu-item-card:hover,
  .event-card:hover {
    transform: scale(1.02) !important;
  }

  .divider-line {
    width: 60%;
  }
}

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* Selection styling */
::selection {
  background-color: var(--terracotta);
  color: white;
}

/* Loading state pentru imagini */
img {
  transition: opacity 0.3s ease;
}

img[loading="lazy"] {
  opacity: 0;
}

img.loaded {
  opacity: 1;
}

/* Accessibility - focus states */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--accent-gold);
  outline-offset: 2px;
}

/* Secțiuni cu fundal deschis (light mode sections) */
.section-light {
  background-color: var(--ivory);
  color: var(--charcoal);
}

.section-light h1,
.section-light h2,
.section-light h3,
.section-light h4 {
  color: var(--espresso);
}

.section-light p,
.section-light .text-muted-light {
  color: var(--charcoal);
  opacity: 0.85;
}

.section-sage {
  background-color: var(--sage-green);
  color: var(--ivory);
}

.section-sage h2,
.section-sage h3 {
  color: var(--cream);
}

.card-light {
  background-color: white;
  border-color: var(--ivory-dark);
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08);
}

.card-light:hover {
  box-shadow: 0 6px 25px rgba(0, 0, 0, 0.12);
}

/* Hero Ken Burns zoom animation */
.hero-image-zoom {
  animation: kenBurnsZoom 20s ease-out infinite alternate;
}

@keyframes kenBurnsZoom {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.1);
  }
}

/* Image hover zoom effect */
.image-zoom-hover {
  overflow: hidden;
}

.image-zoom-hover img {
  transition: transform 0.6s ease;
}

.image-zoom-hover:hover img {
  transform: scale(1.08);
}

/* Staggered fade-in pentru menu cards */
.menu-item-card {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.menu-item-card.revealed {
  opacity: 1;
  transform: translateY(0);
}

.menu-item-card.revealed:nth-child(1) { transition-delay: 0s; }
.menu-item-card.revealed:nth-child(2) { transition-delay: 0.1s; }
.menu-item-card.revealed:nth-child(3) { transition-delay: 0.2s; }
.menu-item-card.revealed:nth-child(4) { transition-delay: 0.3s; }
.menu-item-card.revealed:nth-child(5) { transition-delay: 0.4s; }
.menu-item-card.revealed:nth-child(6) { transition-delay: 0.5s; }

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .hero-image-zoom,
  .steam-line,
  .bean-float,
  .glow-button,
  .event-icon {
    animation: none !important;
  }

  .image-zoom-hover:hover img {
    transform: none;
  }

  .reveal-element,
  .menu-item-card {
    transition: none !important;
  }
}