/* =============================================
   HÔTEL ZEPHYR — Luxury French Hotel
   Style: Light Editorial / Sable & Bleu Profond
   Fonts: Fraunces (display) + Tenor Sans (body) + DM Mono
   ============================================= */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,600;0,9..144,700;1,9..144,300;1,9..144,400;1,9..144,600&family=Tenor+Sans&family=DM+Mono:wght@400;500&display=swap');

:root {
  --bg:        #f5f1ea;
  --white:     #fdfaf5;
  --surface:   #eee9e0;
  --border:    #ddd7cc;
  --border2:   #c8c0b0;
  --text:      #1c1814;
  --muted:     #6a6055;
  --muted2:    #9a8f80;
  --navy:      #0e1f3d;
  --navy2:     #162d56;
  --gold:      #b8922a;
  --gold2:     #d4a940;
  --sand:      #c8b898;
  --cream:     #fdfaf5;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Tenor Sans', sans-serif;
  overflow-x: hidden;
}

/* ---- ANIMATIONS ---- */
@keyframes fadeUp   { from{opacity:0;transform:translateY(28px);} to{opacity:1;transform:none;} }
@keyframes fadeIn   { from{opacity:0;} to{opacity:1;} }
@keyframes marquee  { from{transform:translateX(0);} to{transform:translateX(-50%);} }
@keyframes shimmer  { 0%,100%{opacity:0.4;} 50%{opacity:1;} }
@keyframes panLeft  { from{transform:scale(1.06) translateX(10px);} to{transform:scale(1.06) translateX(-10px);} }

/* ---- REVEAL ---- */
.reveal { opacity:0; transform:translateY(22px); transition:opacity 0.85s cubic-bezier(.22,1,.36,1), transform 0.85s cubic-bezier(.22,1,.36,1); }
.revealed { opacity:1; transform:none; }
.reveal-delay-1 { transition-delay:0.12s; }
.reveal-delay-2 { transition-delay:0.24s; }
.reveal-delay-3 { transition-delay:0.36s; }
.reveal-delay-4 { transition-delay:0.48s; }

/* =============================================
   NAVIGATION
   ============================================= */
nav {
  position: fixed; top:0; left:0; right:0; z-index:200;
  padding: 1.5rem 3rem;
  display: flex; align-items:center; justify-content:space-between;
  transition: all 0.4s;
}
nav.scrolled {
  background: rgba(253,250,245,0.97);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  padding: 1rem 3rem;
  box-shadow: 0 2px 24px rgba(28,24,20,0.06);
}
.nav-logo {
  display: flex; flex-direction:column; text-decoration:none; gap:0.1rem;
}
.nav-logo-main {
  font-family:'Fraunces',serif; font-size:1.4rem; font-weight:300;
  font-style:italic; color:var(--white); letter-spacing:0.02em; line-height:1;
  transition: color 0.4s;
}
nav.scrolled .nav-logo-main { color:var(--navy); }
.nav-logo-sub {
  font-family:'DM Mono',monospace; font-size:0.55rem; color:rgba(255,255,255,0.5);
  letter-spacing:0.25em; text-transform:uppercase; transition:color 0.4s;
}
nav.scrolled .nav-logo-sub { color:var(--muted2); }

nav ul { display:flex; gap:2.2rem; list-style:none; align-items:center; }
nav ul a {
  color:rgba(255,255,255,0.75); text-decoration:none;
  font-size:0.72rem; letter-spacing:0.12em; text-transform:uppercase;
  transition: color 0.3s; position:relative;
}
nav.scrolled ul a { color:var(--muted); }
nav ul a::after {
  content:''; position:absolute; bottom:-3px; left:0; right:0;
  height:1px; background:var(--gold); transform:scaleX(0);
  transition:transform 0.25s; transform-origin:left;
}
nav ul a:hover::after, nav ul a.active::after { transform:scaleX(1); }
nav ul a:hover { color:white; }
nav.scrolled ul a:hover { color:var(--navy); }
nav ul a.active { color:white; }
nav.scrolled ul a.active { color:var(--navy); }

.nav-book {
  font-family:'DM Mono',monospace; font-size:0.65rem;
  letter-spacing:0.14em; text-transform:uppercase;
  border:1px solid rgba(255,255,255,0.4); color:white;
  padding:0.55rem 1.4rem; text-decoration:none;
  transition:all 0.3s;
}
nav.scrolled .nav-book { border-color:var(--navy); color:var(--navy); }
.nav-book:hover { background:var(--gold); border-color:var(--gold); color:white; }

/* =============================================
   PAGE HERO (inner pages)
   ============================================= */
.page-hero {
  height:50vh; min-height:360px; position:relative;
  display:flex; align-items:flex-end;
  overflow:hidden;
}
.page-hero-bg {
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  filter:brightness(0.35);
  animation:panLeft 18s ease-in-out infinite alternate;
}
.page-hero-content {
  position:relative; z-index:1;
  padding:3rem 3rem; max-width:1300px; width:100%; margin:0 auto;
}
.page-eyebrow {
  font-family:'DM Mono',monospace; font-size:0.6rem;
  color:var(--gold2); letter-spacing:0.25em; text-transform:uppercase;
  display:block; margin-bottom:0.7rem;
}
.page-hero h1 {
  font-family:'Fraunces',serif; font-size:clamp(2.5rem,6vw,5rem);
  font-weight:300; font-style:italic; color:var(--white); line-height:1;
}
.gold-rule { width:48px; height:1px; background:var(--gold); margin-top:1.2rem; }

/* =============================================
   TYPOGRAPHY HELPERS
   ============================================= */
.eyebrow {
  font-family:'DM Mono',monospace; font-size:0.6rem;
  color:var(--gold); letter-spacing:0.22em; text-transform:uppercase;
  display:flex; align-items:center; gap:0.8rem; margin-bottom:0.8rem;
}
.eyebrow::after { content:''; flex:1; max-width:40px; height:1px; background:var(--gold); }

.display-title {
  font-family:'Fraunces',serif;
  font-size:clamp(2rem,4.5vw,3.8rem);
  font-weight:300; font-style:italic;
  color:var(--navy); line-height:1.1; margin-bottom:1rem;
}
.body-text {
  font-size:0.88rem; color:var(--muted); line-height:2; max-width:520px;
}

/* =============================================
   BUTTONS
   ============================================= */
.btn-navy {
  display:inline-flex; align-items:center; gap:0.7rem;
  background:var(--navy); color:var(--cream);
  padding:0.9rem 2.2rem; font-family:'DM Mono',monospace;
  font-size:0.65rem; font-weight:400; letter-spacing:0.15em;
  text-transform:uppercase; text-decoration:none; cursor:pointer; border:none;
  transition:all 0.3s;
}
.btn-navy:hover { background:var(--navy2); transform:translateY(-2px); box-shadow:0 10px 28px rgba(14,31,61,0.2); }

.btn-outline-navy {
  display:inline-flex; align-items:center; gap:0.7rem;
  background:transparent; color:var(--navy);
  border:1px solid var(--navy);
  padding:0.9rem 2.2rem; font-family:'DM Mono',monospace;
  font-size:0.65rem; letter-spacing:0.15em; text-transform:uppercase;
  text-decoration:none; cursor:pointer;
  transition:all 0.3s;
}
.btn-outline-navy:hover { background:var(--navy); color:var(--cream); }

.btn-gold {
  display:inline-flex; align-items:center; gap:0.7rem;
  background:var(--gold); color:var(--cream);
  padding:0.9rem 2.2rem; font-family:'DM Mono',monospace;
  font-size:0.65rem; letter-spacing:0.15em; text-transform:uppercase;
  text-decoration:none; cursor:pointer; border:none;
  transition:all 0.3s;
}
.btn-gold:hover { background:var(--gold2); transform:translateY(-2px); }

.btn-outline-white {
  display:inline-flex; align-items:center; gap:0.7rem;
  background:transparent; color:white;
  border:1px solid rgba(255,255,255,0.5);
  padding:0.9rem 2.2rem; font-family:'DM Mono',monospace;
  font-size:0.65rem; letter-spacing:0.15em; text-transform:uppercase;
  text-decoration:none; cursor:pointer;
  transition:all 0.3s;
}
.btn-outline-white:hover { background:white; color:var(--navy); }

/* =============================================
   ROOM CARD
   ============================================= */
.room-card {
  background:var(--white); overflow:hidden;
  border:1px solid var(--border);
  transition:all 0.35s;
}
.room-card:hover { box-shadow:0 16px 48px rgba(28,24,20,0.1); transform:translateY(-4px); }
.room-img { height:260px; overflow:hidden; position:relative; }
.room-img img { width:100%; height:100%; object-fit:cover; transition:transform 0.7s; }
.room-card:hover .room-img img { transform:scale(1.06); }
.room-badge {
  position:absolute; top:1rem; left:1rem;
  background:var(--navy); color:var(--cream);
  font-family:'DM Mono',monospace; font-size:0.58rem;
  letter-spacing:0.15em; text-transform:uppercase; padding:0.25rem 0.7rem;
}
.room-info { padding:1.8rem; }
.room-type { font-family:'DM Mono',monospace; font-size:0.58rem; color:var(--gold); letter-spacing:0.2em; text-transform:uppercase; margin-bottom:0.4rem; }
.room-name { font-family:'Fraunces',serif; font-size:1.4rem; font-weight:300; font-style:italic; color:var(--navy); margin-bottom:0.8rem; line-height:1.1; }
.room-features { display:flex; gap:1.2rem; margin-bottom:1.2rem; flex-wrap:wrap; }
.room-feat { font-size:0.72rem; color:var(--muted2); display:flex; align-items:center; gap:0.3rem; }
.room-footer { display:flex; align-items:center; justify-content:space-between; padding-top:1.2rem; border-top:1px solid var(--border); }
.room-price-label { font-size:0.62rem; color:var(--muted2); letter-spacing:0.1em; text-transform:uppercase; }
.room-price { font-family:'Fraunces',serif; font-size:1.5rem; font-weight:300; color:var(--navy); }
.room-price span { font-size:0.72rem; color:var(--muted2); font-family:'DM Mono',monospace; }

/* =============================================
   AMENITY CARD
   ============================================= */
.amenity-card {
  padding:2.5rem 2rem; background:var(--white);
  border:1px solid var(--border); text-align:center;
  transition:all 0.3s;
}
.amenity-card:hover { border-color:var(--gold); background:var(--navy); }
.amenity-card:hover .amenity-icon,
.amenity-card:hover .amenity-name,
.amenity-card:hover .amenity-desc { color:white; }
.amenity-icon { font-size:2rem; display:block; margin-bottom:1rem; color:var(--gold); transition:color 0.3s; }
.amenity-name { font-family:'Fraunces',serif; font-size:1rem; font-weight:300; font-style:italic; color:var(--navy); margin-bottom:0.5rem; display:block; transition:color 0.3s; }
.amenity-desc { font-size:0.78rem; color:var(--muted); line-height:1.65; transition:color 0.3s; }

/* =============================================
   MARQUEE
   ============================================= */
.marquee-strip { background:var(--navy); padding:1rem 0; overflow:hidden; }
.marquee-track { display:flex; gap:3rem; animation:marquee 28s linear infinite; white-space:nowrap; }
.marquee-track span { font-family:'DM Mono',monospace; font-size:0.65rem; color:rgba(255,255,255,0.5); letter-spacing:0.15em; text-transform:uppercase; }
.marquee-track .m-dot { color:var(--gold); }

/* =============================================
   FORM STYLES
   ============================================= */
.form-group { display:flex; flex-direction:column; gap:0.4rem; }
.form-group label { font-family:'DM Mono',monospace; font-size:0.6rem; color:var(--muted2); letter-spacing:0.15em; text-transform:uppercase; }
.form-group input,
.form-group select,
.form-group textarea {
  background:var(--white); border:1px solid var(--border2);
  padding:0.85rem 1rem; color:var(--text);
  font-family:'Tenor Sans',sans-serif; font-size:0.88rem;
  outline:none; transition:border-color 0.2s; resize:none; width:100%;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus { border-color:var(--navy); }

/* =============================================
   FOOTER
   ============================================= */
footer {
  background:var(--navy); color:rgba(255,255,255,0.6);
  padding:5rem 3rem 2rem;
}
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:3rem; max-width:1300px; margin:0 auto 3rem; }
.footer-logo-text { font-family:'Fraunces',serif; font-size:1.6rem; font-weight:300; font-style:italic; color:white; display:block; margin-bottom:0.3rem; }
.footer-logo-sub { font-family:'DM Mono',monospace; font-size:0.55rem; color:var(--gold); letter-spacing:0.2em; text-transform:uppercase; display:block; margin-bottom:1rem; }
.footer-brand p { font-size:0.8rem; line-height:1.8; max-width:220px; }
.footer-col h4 { font-family:'DM Mono',monospace; font-size:0.62rem; font-weight:400; color:rgba(255,255,255,0.3); letter-spacing:0.2em; text-transform:uppercase; margin-bottom:1.5rem; }
.footer-col ul { list-style:none; display:flex; flex-direction:column; gap:0.6rem; }
.footer-col ul a { color:rgba(255,255,255,0.5); font-size:0.82rem; text-decoration:none; transition:color 0.2s; }
.footer-col ul a:hover { color:var(--gold2); }
.footer-col p { font-size:0.8rem; line-height:1.9; }
.footer-rule { border:none; border-top:1px solid rgba(255,255,255,0.08); max-width:1300px; margin:0 auto 1.5rem; }
.footer-bottom { max-width:1300px; margin:0 auto; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem; }
.footer-bottom p { font-size:0.7rem; color:rgba(255,255,255,0.3); }
.footer-bottom a { color:var(--gold2); text-decoration:none; }
.footer-stars { color:var(--gold); font-size:0.75rem; letter-spacing:2px; }

/* =============================================
   RESPONSIVE
   ============================================= */
@media(max-width:900px){
  nav { padding:1rem 1.5rem; }
  nav ul { display:none; }
  .nav-book { display:none; }
  .footer-grid { grid-template-columns:1fr 1fr; gap:2rem; }
  .page-hero-content { padding:2rem 1.5rem; }
}
@media(max-width:600px){
  .footer-grid { grid-template-columns:1fr; }
}