/* ══════════════════════════════════════════════════════
   BIOSPHERE HOTELS — BASE (Tailwind companion)
   Tokens, animations, reveal, and stateful components
══════════════════════════════════════════════════════ */

:root {
    --ocean-teal: #3A5D73;
    --ocean-teal-dark: #2D4A5E;
    --ocean-teal-light: #4E7A94;
    --ocean-teal-pale: #6B95AE;
    --coral: #F37662;
    --coral-dark: #E05A45;
    --coral-light: #F89485;
    --sand: #F7F3EE;
    --sand-dark: #EDE0D0;
    --kraft: #C49770;
    --cream: #FAFAF8;
    --dark: #1E2D36;
    --dark-medium: #2A3F4D;
}

/* Keyframes */
@keyframes fadeInUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } }
@keyframes heroZoom { from { transform: scale(1.05); } to { transform: scale(1.12); } }
@keyframes subtleBounce { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(8px); } }

.animate-fade-in-up { animation: fadeInUp 1s ease-out both; }
.animate-fade-in-up-d1 { animation: fadeInUp 1s ease-out 0.3s both; }
.animate-fade-in-up-d2 { animation: fadeInUp 1s ease-out 0.5s both; }
.animate-fade-in-up-d3 { animation: fadeInUp 1s ease-out 0.7s both; }
.animate-hero-zoom { animation: heroZoom 20s ease-in-out infinite alternate; }
.animate-subtle-bounce { animation: subtleBounce 2s ease-in-out infinite; }

/* Reveal system (JS-driven) */
.reveal { opacity: 0; transform: translateY(40px); transition: opacity 0.8s cubic-bezier(0.25,0.46,0.45,0.94), transform 0.8s cubic-bezier(0.25,0.46,0.45,0.94); }
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 0.15s; }
.reveal-delay-2 { transition-delay: 0.3s; }
.reveal-delay-3 { transition-delay: 0.45s; }
.reveal-delay-4 { transition-delay: 0.6s; }

/* Header scroll state (toggled by JS) */
.site-header { transition: background 0.4s, padding 0.4s, backdrop-filter 0.4s; background: linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.1) 60%, transparent 100%); }
.site-header.scrolled { background: rgba(255,255,255,0.97); backdrop-filter: blur(12px); padding-top: 1rem; padding-bottom: 1rem; box-shadow: 0 1px 20px rgba(0,0,0,0.06); }
.site-header.scrolled .nav-link { color: var(--ocean-teal); }
.site-header.scrolled .nav-link:hover { color: var(--coral); }
.site-header.scrolled .logo-text { color: var(--ocean-teal); }
.site-header.scrolled .logo-sub { color: var(--coral); }
.site-header.scrolled .book-btn { background: var(--ocean-teal); color: #fff; border-color: var(--ocean-teal); }
.site-header.scrolled .book-btn:hover { background: var(--ocean-teal-dark); border-color: var(--ocean-teal-dark); }
.site-header.scrolled .hamburger span { background: var(--ocean-teal); }

/* Mobile nav open state */
.nav-mobile-overlay { transition: opacity 0.4s ease, visibility 0.4s ease; }
.nav-mobile-overlay.open { opacity: 1 !important; visibility: visible !important; }
.nav-mobile-overlay .nav-mobile-link { opacity: 0; transform: translateY(20px); transition: opacity 0.4s ease, transform 0.4s ease, color 0.3s; }
.nav-mobile-overlay.open .nav-mobile-link { opacity: 1; transform: translateY(0); }
.nav-mobile-overlay.open .nav-mobile-link:nth-child(1) { transition-delay: 0.08s; }
.nav-mobile-overlay.open .nav-mobile-link:nth-child(2) { transition-delay: 0.14s; }
.nav-mobile-overlay.open .nav-mobile-link:nth-child(3) { transition-delay: 0.20s; }
.nav-mobile-overlay.open .nav-mobile-link:nth-child(4) { transition-delay: 0.26s; }
.nav-mobile-overlay.open .nav-mobile-link:nth-child(5) { transition-delay: 0.32s; }
.nav-mobile-overlay.open .nav-mobile-book { opacity: 1; transform: translateY(0); }

/* Hamburger → X */
.hamburger span { transition: transform 0.3s ease, opacity 0.3s ease, background 0.4s; }
.hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(4px, 4px); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(4px, -4px); }

/* Image hover zoom (group-hover) */
.img-zoom { transition: transform 0.7s cubic-bezier(0.25,0.46,0.45,0.94); }
.group:hover .img-zoom { transform: scale(1.04); }