/* ==========================================================================
   CIELO CAFE AND RESTRO - HEADER & NAVIGATION STYLES
   Villa Aurelia Minimalist Cinematic Style
   ========================================================================== */

.cielo-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  animation: headerGentlyDown 1000ms cubic-bezier(0.16, 1, 0.3, 1) both;
  transition: opacity 300ms ease, transform 300ms ease;
}

@keyframes headerGentlyDown {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cielo-header {
    animation: none !important;
    transform: none !important;
  }
}

/* Main Navigation Bar (Clean Transparent with Scrolled Blur) */
.cielo-navbar {
  transition: background-color 320ms cubic-bezier(0.16, 1, 0.3, 1),
              backdrop-filter 320ms ease,
              padding 300ms ease,
              border-color 320ms ease,
              box-shadow 320ms ease;
  padding: 1rem 0;
  background: transparent;
}

@media (min-width: 640px) {
  .cielo-navbar {
    padding: 1.25rem 0;
  }
}

@media (min-width: 1024px) {
  .cielo-navbar {
    padding: 1.5rem 0;
  }
}

.cielo-header.is-scrolled .cielo-navbar {
  padding: 0.75rem 0;
}

@media (min-width: 640px) {
  .cielo-header.is-scrolled .cielo-navbar {
    padding: 0.85rem 0;
  }
}

.navbar-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Brand Logo (Villa Aurelia Style: Fraunces Display Serif) */
.brand-logo {
  text-decoration: none;
  color: #FFFFFF;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.brand-title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 340;
  letter-spacing: -0.025em;
  color: #FFFFFF;
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.5);
  transition: opacity 250ms ease;
}

@media (min-width: 480px) {
  .brand-title {
    font-size: 1.75rem;
  }
}

@media (min-width: 768px) {
  .brand-title {
    font-size: 1.85rem;
  }
}

.brand-logo:hover .brand-title {
  opacity: 0.85;
}

/* Header Right Actions */
.navbar-actions {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

@media (min-width: 480px) {
  .navbar-actions {
    gap: 0.5rem;
  }
}

@media (min-width: 640px) {
  .navbar-actions {
    gap: 0.85rem;
  }
}

/* 1. Night / Day Theme Contrast Toggle */
.header-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 44px;
  min-width: 44px;
  height: 2.5rem;
  padding: 0 0.6rem;
  border-radius: var(--border-radius-full);
  background: transparent;
  border: none;
  color: #FFFFFF;
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 400;
  cursor: pointer;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
  transition: opacity 200ms ease;
}

@media (max-width: 400px) {
  .theme-text-label {
    display: none;
  }
  .header-theme-toggle {
    padding: 0 0.4rem;
  }
}

.header-theme-toggle:hover {
  opacity: 0.85;
}

.theme-circle-indicator {
  position: relative;
  display: block;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  border: 1px solid currentColor;
}

.theme-circle-inner {
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background-color: currentColor;
  transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* 2. Reserve a Table Pill Button */
.header-pill-btn {
  display: none;
  align-items: center;
  justify-content: center;
  height: 2.65rem;
  padding: 0 1.35rem;
  border-radius: var(--border-radius-full);
  border: 1px solid rgba(255, 255, 255, 0.8);
  background: transparent;
  color: #FFFFFF;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  cursor: pointer;
  text-shadow: none;
  transition: all 250ms ease;
  white-space: nowrap;
}

@media (min-width: 640px) {
  .header-pill-btn {
    display: inline-flex;
  }
}

.header-pill-btn:hover {
  background-color: #FFFFFF;
  color: #000000;
  border-color: #FFFFFF;
  transform: translateY(-1px);
}

/* 3. Minimalist Menu Button */
.header-menu-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  height: 2.5rem;
  padding: 0 0.75rem;
  border-radius: var(--border-radius-full);
  background: transparent;
  border: none;
  color: #FFFFFF;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 400;
  cursor: pointer;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
  transition: opacity 200ms ease;
}

.header-menu-btn:hover {
  opacity: 0.85;
}

.header-menu-text {
  letter-spacing: 0.02em;
}

.header-menu-icon {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 22px;
}

.menu-bar-top {
  display: block;
  width: 100%;
  height: 1px;
  background-color: currentColor;
}

.menu-bar-bot {
  display: block;
  width: 65%;
  align-self: flex-end;
  height: 1px;
  background-color: currentColor;
}

/* ==========================================================================
   DYNAMIC HEADER CONTRAST ADAPTATION (Light BG vs Dark BG)
   Smooth color inversion when crossing between dark/white backgrounds
   ========================================================================== */

/* 1. Header over Light / White Background */
.cielo-header.theme-light-bg .brand-title {
  color: var(--text-espresso, #000000);
  text-shadow: none;
}

.cielo-header.theme-light-bg .header-theme-toggle {
  color: var(--text-espresso, #000000);
  text-shadow: none;
}

.cielo-header.theme-light-bg .header-pill-btn {
  color: var(--text-espresso, #000000);
  border-color: rgba(0, 0, 0, 0.7);
  text-shadow: none;
}

.cielo-header.theme-light-bg .header-pill-btn:hover {
  background-color: var(--text-espresso, #000000);
  color: var(--bg-cream, #FFFFFF);
  border-color: var(--text-espresso, #000000);
}

.cielo-header.theme-light-bg .header-menu-btn {
  color: var(--text-espresso, #000000);
  text-shadow: none;
}

.cielo-header.theme-light-bg.is-scrolled .cielo-navbar {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

body.warm-contrast .cielo-header.theme-light-bg.is-scrolled .cielo-navbar {
  background: rgba(246, 239, 227, 0.94);
  border-bottom: 1px solid rgba(27, 21, 17, 0.1);
}

/* 2. Header over Dark Background (Default Hero & Dark Sections) */
.cielo-header.theme-dark-bg .brand-title,
.cielo-header:not(.theme-light-bg) .brand-title {
  color: #FFFFFF;
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.5);
}

.cielo-header.theme-dark-bg .header-theme-toggle,
.cielo-header:not(.theme-light-bg) .header-theme-toggle {
  color: #FFFFFF;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
}

.cielo-header.theme-dark-bg .header-pill-btn,
.cielo-header:not(.theme-light-bg) .header-pill-btn {
  color: #FFFFFF;
  border-color: rgba(255, 255, 255, 0.8);
  text-shadow: none;
}

.cielo-header.theme-dark-bg .header-pill-btn:hover,
.cielo-header:not(.theme-light-bg) .header-pill-btn:hover {
  background-color: #FFFFFF;
  color: #000000;
  border-color: #FFFFFF;
}

.cielo-header.theme-dark-bg .header-menu-btn,
.cielo-header:not(.theme-light-bg) .header-menu-btn {
  color: #FFFFFF;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
}

.cielo-header.theme-dark-bg.is-scrolled .cielo-navbar,
.cielo-header:not(.theme-light-bg).is-scrolled .cielo-navbar {
  background: rgba(12, 9, 7, 0.72);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}

/* Slide-In Navigation Drawer (Villa Aurelia Numbered Style) */
.mobile-drawer-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background-color: var(--text-espresso);
  color: var(--bg-cream);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1.5rem 1.25rem;
  padding-top: max(1.5rem, env(safe-area-inset-top, 0px));
  padding-bottom: max(1.5rem, env(safe-area-inset-bottom, 0px));
  padding-left: max(1.25rem, env(safe-area-inset-left, 0px));
  padding-right: max(1.25rem, env(safe-area-inset-right, 0px));
  opacity: 0;
  pointer-events: none;
  transform: translateY(100%);
  transition: transform 450ms cubic-bezier(0.16, 1, 0.3, 1), opacity 350ms ease;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

@media (min-width: 640px) {
  .mobile-drawer-overlay {
    padding: 2.5rem 2.5rem;
  }
}

@media (min-width: 768px) {
  .mobile-drawer-overlay {
    padding: 3rem 4rem;
  }
}

.mobile-drawer-overlay.is-active {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

@media (min-width: 640px) {
  .drawer-header {
    padding-bottom: 2rem;
  }
}

.drawer-close {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.7);
  padding: 0.5rem;
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  cursor: pointer;
  transition: color 200ms ease, background-color 200ms ease;
}

.drawer-close:hover {
  color: #FFFFFF;
  background-color: rgba(255, 255, 255, 0.1);
}

.drawer-nav {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

@media (min-width: 640px) {
  .drawer-nav {
    gap: 1.25rem;
    margin-top: 2.5rem;
    margin-bottom: 2.5rem;
  }
}

.drawer-nav-link {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  min-height: 44px;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.75);
  transition: color 250ms ease, transform 250ms ease;
}

@media (min-width: 640px) {
  .drawer-nav-link {
    gap: 1.25rem;
  }
}

.drawer-nav-link:hover {
  color: #FFFFFF;
  transform: translateX(8px);
}

.drawer-nav-num {
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  opacity: 0.5;
}

.drawer-nav-label {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 6vw, 3.5rem);
  font-weight: 340;
  line-height: 1.05;
}

.drawer-footer {
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

@media (min-width: 640px) {
  .drawer-footer {
    padding-top: 2rem;
    gap: 1rem;
  }
}

/* ==========================================================================
   CIELO CAFE AND RESTRO - FULL-WIDTH CINEMATIC LOADING TRANSITION SCREEN
   ========================================================================== */

.cielo-transition-screen {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  min-height: 100svh;
  z-index: 999999;
  background-color: #0C0907;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  transform: translate3d(0, 100%, 0);
  transition: none;
  will-change: transform, opacity;
}

/* 1. Enter: Sweeps smoothly upwards from bottom to cover full viewport */
.cielo-transition-screen.state-enter {
  visibility: visible;
  opacity: 1;
  pointer-events: all;
  transform: translate3d(0, 0%, 0);
  transition: transform 580ms cubic-bezier(0.22, 1, 0.36, 1), opacity 200ms ease;
}

/* 2. Hold: Resting centered while target content prepares */
.cielo-transition-screen.state-hold {
  visibility: visible;
  opacity: 1;
  pointer-events: all;
  transform: translate3d(0, 0%, 0);
  transition: none;
}

/* 3. Exit: Continues sweeping smoothly upwards out to the top with matching curve */
.cielo-transition-screen.state-exit {
  visibility: visible;
  opacity: 1;
  pointer-events: all;
  transform: translate3d(0, -100%, 0);
  transition: transform 580ms cubic-bezier(0.65, 0, 0.35, 1);
}

.transition-screen-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
  color: #FFFFFF;
}

.transition-brand-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition: transform 450ms cubic-bezier(0.22, 1, 0.36, 1) 100ms, opacity 350ms ease 100ms;
}

.cielo-transition-screen.state-enter .transition-brand-wrap,
.cielo-transition-screen.state-hold .transition-brand-wrap {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.cielo-transition-screen.state-exit .transition-brand-wrap {
  opacity: 0;
  transform: translate3d(0, -18px, 0);
  transition: transform 400ms cubic-bezier(0.65, 0, 0.35, 1), opacity 300ms ease;
}

.transition-brand-name {
  font-family: var(--font-display);
  font-size: clamp(3.2rem, 9vw, 5.8rem);
  font-weight: 340;
  letter-spacing: -0.035em;
  line-height: 1;
  color: #FFFFFF;
  text-shadow: 0 4px 25px rgba(0, 0, 0, 0.6);
}

.transition-brand-tagline {
  font-family: var(--font-sans);
  font-size: clamp(0.72rem, 1.3vw, 0.875rem);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}

.transition-progress-line {
  margin-top: 1.75rem;
  width: 130px;
  height: 2px;
  background-color: rgba(255, 255, 255, 0.15);
  border-radius: var(--border-radius-full);
  overflow: hidden;
  position: relative;
}

.transition-progress-bar {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 45%;
  background: linear-gradient(90deg, var(--accent-sky, #3F6E96), var(--accent-terracotta, #B5623B));
  border-radius: var(--border-radius-full);
  animation: transitionPulse 850ms infinite ease-in-out;
}

@keyframes transitionPulse {
  0% { left: -45%; width: 35%; }
  50% { width: 65%; }
  100% { left: 100%; width: 35%; }
}

@media (prefers-reduced-motion: reduce) {
  .cielo-transition-screen {
    transform: none !important;
  }
  .cielo-transition-screen.state-enter,
  .cielo-transition-screen.state-hold {
    opacity: 1 !important;
    transition: opacity 300ms ease !important;
  }
  .cielo-transition-screen.state-exit {
    opacity: 0 !important;
    transition: opacity 300ms ease !important;
  }
}