/* ==========================================================================
   Hotel Bangalaxmi, Puri — Premium Stylesheet
   Signature motif: the "gold horizon" — a thin line that echoes the line
   where the Bay of Bengal meets the sky outside every sea-facing room.
   ========================================================================== */

:root{
  --navy:#0A2F6E;
  --navy-deep:#061B40;
  --gold:#C6A15B;
  --gold-light:#E8D6A8;
  --white:#FFFFFF;
  --bg:#F8F9FB;
  --sand:#F3ECDC;
  --dark:#1D1D1D;
}

/* Respect reduced motion always */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important;}
}

html{scroll-behavior:smooth;}

body{
  font-family:'Poppins', sans-serif;
  color:var(--dark);
  background:var(--bg);
  overflow-x:hidden;
}

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

.font-btn{
  font-family:'Montserrat', sans-serif;
  letter-spacing:.04em;
}

/* ---------- Focus visibility ---------- */
a:focus-visible, button:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
  border-radius:4px;
}

/* ---------- Gold horizon divider (signature element) ---------- */
.horizon{
  position:relative;
  height:40px;
  width:100%;
  overflow:hidden;
}
.horizon svg{width:100%;height:100%;display:block;}
.horizon-line{
  stroke:var(--gold);
  stroke-width:1;
  opacity:.55;
}
.horizon-sun{
  fill:var(--gold);
  opacity:.9;
}

/* ---------- Header ---------- */
#site-header{
  transition:background-color .5s ease, box-shadow .5s ease, padding .4s ease, backdrop-filter .4s ease;
  background:transparent;
}
#site-header.scrolled{
  background:rgba(255,255,255,0.85);
  backdrop-filter:blur(14px) saturate(150%);
  -webkit-backdrop-filter:blur(14px) saturate(150%);
  box-shadow:0 4px 30px rgba(11,61,145,0.08);
}
#site-header .nav-link{
  position:relative;
}
#site-header .nav-link::after{
  content:'';
  position:absolute;
  left:0; bottom:-4px;
  width:0%; height:1.5px;
  background:var(--gold);
  transition:width .35s ease;
}
#site-header .nav-link:hover::after{width:100%;}

/* ---------- Glass card ---------- */
.glass{
  background:rgba(255,255,255,0.65);
  backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  border:1px solid rgba(255,255,255,0.5);
}
.glass-dark{
  background:rgba(11,61,145,0.35);
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  border:1px solid rgba(255,255,255,0.18);
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.55rem;
  padding:.95rem 2.1rem;
  border-radius:.85rem;
  font-weight:700;
  font-size:.82rem;
  text-transform:uppercase;
  border:1.5px solid transparent;
  cursor:pointer;
  transition:transform .3s cubic-bezier(.2,.9,.3,1.2), box-shadow .3s ease, background-color .3s ease, color .3s ease, border-color .3s ease;
  white-space:nowrap;
}
.btn:active{
  transform:translateY(0) scale(.97);
}
.btn-primary{
  background:var(--navy);
  border-color:var(--navy);
  color:var(--white);
  box-shadow:0 10px 24px -4px rgba(10,47,110,.45);
}
.btn-primary:hover{
  background:var(--gold);
  border-color:var(--gold);
  color:var(--navy-deep);
  transform:translateY(-3px);
  box-shadow:0 16px 32px -6px rgba(198,161,91,.5);
}
.btn-gold{
  background:var(--gold);
  border-color:var(--gold);
  color:var(--navy-deep);
  box-shadow:0 10px 24px -4px rgba(198,161,91,.45);
}
.btn-gold:hover{
  background:var(--navy);
  border-color:var(--navy);
  color:var(--white);
  transform:translateY(-3px);
  box-shadow:0 16px 32px -6px rgba(10,47,110,.5);
}
.btn-outline{
  border:1.5px solid rgba(255,255,255,.85);
  color:var(--white);
  background:rgba(255,255,255,.06);
  box-shadow:0 6px 18px -6px rgba(0,0,0,.35);
}
.btn-outline:hover{
  background:var(--white);
  color:var(--navy);
  border-color:var(--white);
  transform:translateY(-3px);
}
.btn-outline-navy{
  border:1.5px solid var(--navy);
  color:var(--navy);
  background:rgba(10,47,110,.04);
  box-shadow:0 6px 18px -8px rgba(10,47,110,.25);
}
.btn-outline-navy:hover{
  background:var(--navy);
  color:var(--white);
  transform:translateY(-3px);
  box-shadow:0 14px 28px -6px rgba(10,47,110,.4);
}


/* ---------- Reveal on scroll ---------- */
.reveal{
  opacity:0;
  transform:translateY(36px);
  transition:opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1);
}
.reveal.in-view{
  opacity:1;
  transform:translateY(0);
}
.reveal-delay-1{transition-delay:.1s;}
.reveal-delay-2{transition-delay:.22s;}
.reveal-delay-3{transition-delay:.34s;}
.reveal-delay-4{transition-delay:.46s;}

/* ---------- Image zoom on hover ---------- */
.zoom-wrap{overflow:hidden;}
.zoom-img{
  transition:transform 1.1s cubic-bezier(.2,.7,.2,1), filter .6s ease;
  transform:scale(1.001);
}
.zoom-wrap:hover .zoom-img{
  transform:scale(1.09);
}

/* ---------- Room / feature cards ---------- */
.card-premium{
  transition:transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s ease;
}
.card-premium:hover{
  transform:translateY(-10px);
  box-shadow:0 30px 60px -20px rgba(11,61,145,.25);
}

/* ---------- Gold underline accent for headings ---------- */
.eyebrow{
  letter-spacing:.25em;
  font-family:'Montserrat',sans-serif;
  font-weight:600;
  font-size:.72rem;
  color:var(--gold);
}
.eyebrow::before{
  content:'';
  display:inline-block;
  width:28px;
  height:1px;
  background:var(--gold);
  margin-right:.6rem;
  vertical-align:middle;
}

/* ---------- Gallery ---------- */
.masonry{
  column-count:1;
  column-gap:1rem;
}
@media(min-width:640px){ .masonry{column-count:2;} }
@media(min-width:1024px){ .masonry{column-count:3;} }
.masonry-item{
  break-inside:avoid;
  margin-bottom:1rem;
  border-radius:1rem;
  overflow:hidden;
  position:relative;
  cursor:pointer;
}
.masonry-item::after{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(11,61,145,.55), transparent 45%);
  opacity:0;
  transition:opacity .4s ease;
}
.masonry-item:hover::after{opacity:1;}
.masonry-item .gallery-label{
  position:absolute; left:1rem; bottom:1rem;
  color:#fff;
  font-family:'Montserrat',sans-serif;
  font-size:.78rem;
  letter-spacing:.08em;
  opacity:0;
  transform:translateY(8px);
  transition:all .4s ease;
}
.masonry-item:hover .gallery-label{opacity:1; transform:translateY(0);}

/* ---------- Lightbox ---------- */
#lightbox{
  transition:opacity .35s ease;
}
#lightbox img{
  transition:transform .4s ease;
}

/* ---------- FAQ accordion ---------- */
.faq-item .faq-answer{
  max-height:0;
  overflow:hidden;
  transition:max-height .5s cubic-bezier(.2,.8,.2,1), padding .4s ease;
}
.faq-item.open .faq-answer{
  max-height:400px;
}
.faq-item .faq-icon{
  transition:transform .4s ease;
}
.faq-item.open .faq-icon{
  transform:rotate(45deg);
}

/* ---------- Counter ---------- */
.counter{font-variant-numeric:tabular-nums;}

/* ---------- Sticky mobile CTA ---------- */
#mobile-cta{
  box-shadow:0 -8px 30px rgba(0,0,0,.12);
}

/* ---------- Testimonial cards ---------- */
.quote-mark{
  font-family:'Playfair Display',serif;
  line-height:0;
  color:var(--gold);
  opacity:.5;
}

/* ---------- Marquee (attractions strip / trust strip) ---------- */
.marquee-track{
  display:flex;
  width:max-content;
  animation:marquee 34s linear infinite;
}
@keyframes marquee{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}
@media (prefers-reduced-motion: reduce){
  .marquee-track{animation:none;}
}

/* ---------- Parallax hero ---------- */
.parallax-bg{
  will-change:transform;
}

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar{width:10px;}
::-webkit-scrollbar-track{background:var(--bg);}
::-webkit-scrollbar-thumb{background:var(--gold); border-radius:10px;}

/* ---------- Utility: text balance ---------- */
.balance{text-wrap:balance;}

/* ---------- Nav mobile drawer ---------- */
#mobile-nav{
  transition:transform .5s cubic-bezier(.2,.8,.2,1), opacity .4s ease;
}

/* ---------- Section number tag (used sparingly, only where sequence is real) ---------- */
.tag-num{
  font-family:'Playfair Display',serif;
  font-style:italic;
  color:rgba(11,61,145,.15);
}