/* ── Custom styles for Solid Magic Apart-Hotel PHP site ── */

:root {
  --accent: #3376ad;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  -webkit-font-smoothing: antialiased;
  font-family: "DM Sans", system-ui, sans-serif;
  background-color: #FDFCFA;
  color: #000;
}

.font-serif { font-family: "Cormorant Garamond", Georgia, serif; }

/* ── Scroll progress ── */
#scroll-bar { transition: width 120ms linear; }

/* ── Header transparent ── */
header.transparent .nav-link { color: #fff !important; }
header.transparent #header-logo { filter: brightness(0) invert(1); }
/* topbar visible at top, hidden when scrolled solid */
header.solid #header-topbar { max-height: 0 !important; opacity: 0 !important; overflow: hidden; }

#header-nav.solid-bg {
  background-color: rgba(253,252,250,0.95);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

/* ── Animations ── */
@keyframes ken-burns {
  0%   { transform: scale(1.15) translate(0,0); }
  100% { transform: scale(1.02) translate(-1%,-1.5%); }
}
@keyframes fade-up {
  0%   { opacity:0; transform:translateY(40px); filter:blur(8px); }
  100% { opacity:1; transform:translateY(0);    filter:blur(0); }
}
@keyframes fade-in  { 0%{opacity:0} 100%{opacity:1} }
@keyframes scroll-bounce {
  0%,100% { transform:translateY(0);  opacity:.6; }
  50%      { transform:translateY(8px); opacity:1; }
}
@keyframes marquee {
  0%   { transform:translateX(0); }
  100% { transform:translateX(-50%); }
}
@keyframes float-slow {
  0%,100% { transform:translateY(0) rotate(0deg); }
  50%     { transform:translateY(-20px) rotate(2deg); }
}
@keyframes word-rise {
  0%   { opacity:0; transform:translateY(110%); }
  100% { opacity:1; transform:translateY(0); }
}

.animate-ken-burns    { animation: ken-burns 24s ease-out forwards; }
.animate-fade-up      { animation: fade-up 1.1s var(--ease-out-expo) both; }
.animate-fade-in      { animation: fade-in 1.4s ease-out both; }
.animate-scroll-bounce{ animation: scroll-bounce 2.2s ease-in-out infinite; }
.animate-marquee      { animation: marquee 38s linear infinite; }
.animate-float-slow   { animation: float-slow 9s ease-in-out infinite; }
.animate-word-rise    { display:inline-block; animation: word-rise 1.1s var(--ease-out-expo) both; }
.word-rise-1 { animation-delay: 120ms; }
.word-rise-2 { animation-delay: 380ms; }

/* ── Reveal on scroll ── */
.reveal {
  opacity: 0;
  transform: translateY(50px);
  filter: blur(10px);
  transition: opacity 1.1s var(--ease-out-expo), transform 1.1s var(--ease-out-expo), filter 1.1s var(--ease-out-expo);
}
.reveal.in { opacity:1; transform:translateY(0); filter:blur(0); }


/* ── Scrollbar hide ── */
.no-scrollbar::-webkit-scrollbar { display:none; }
.no-scrollbar { -ms-overflow-style:none; scrollbar-width:none; }

/* ── Mobile menu ── */
#mobile-menu { display:none; }
#mobile-menu.open { display:flex; }

/* ── Lightbox ── */
#lightbox { display:none; }
#lightbox.open { display:flex; }

/* ── Gradient utilities ── */
.bg-gradient-sunset { background: linear-gradient(135deg,#3376ad 0%,#3376ad 100%); }
.bg-gradient-ocean  { background: linear-gradient(135deg,#3376ad 0%,#2a5f8a 60%,#1f4a6e 100%); }
.shadow-coral       { box-shadow: 0 25px 60px -25px rgba(51,118,173,.5); }
.shadow-ocean       { box-shadow: 0 25px 60px -20px rgba(15,31,53,.55); }

/* ── Booking widget date input ── */
input[type="date"]::-webkit-calendar-picker-indicator { opacity:0.6; cursor:pointer; }

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

/* ── Gold divider ── */
.gold-divider { display:flex; align-items:center; justify-content:center; gap:.75rem; margin:.75rem 0; }
.gold-divider .line { height:1px; width:4rem; }
.gold-divider .diamond { width:.5rem; height:.5rem; transform:rotate(45deg); border:1px solid var(--accent); }
.gold-divider .diamond.filled { background:var(--accent); border-color:var(--accent); }
.gold-divider .short { height:1px; width:.75rem; background:var(--accent); }

/* Pill/badge for mobile sub-menu toggle arrow rotation */
.sub-open svg { transform: rotate(180deg); color: var(--accent); }