/* ========== PRELOADER ========== */
#preloader {
  position: fixed; inset: 0; z-index: 99999;
  background: #1a3326;
  display: flex; align-items: center; justify-content: center;
  flex-direction: column;
  overflow: hidden;
  /* Exit: curtain slides up */
  transition: transform 0.95s cubic-bezier(0.76, 0, 0.24, 1), opacity 0.55s ease 0.38s;
}
#preloader::before {
  content: '';
  position: absolute; inset: 0; z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  pointer-events: none;
}
#preloader.hidden {
  transform: translateY(-105%);
  opacity: 0;
}

/* Inner wrapper */
.preloader-inner {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center;
}

/* Ring + logo area */
.preloader-logo-area {
  position: relative;
  width: 180px; height: 180px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.preloader-ring {
  position: absolute; inset: 0;
  width: 180px; height: 180px;
  transform: rotate(-90deg);
}
.ring-track {
  fill: none;
  stroke: rgba(245,240,220,0.08);
  stroke-width: 1;
}
.ring-fill {
  fill: none;
  stroke: rgba(245,240,220,0.82);
  stroke-width: 1;
  stroke-linecap: round;
  stroke-dasharray: 515.22; /* 2π × 82 */
  stroke-dashoffset: 515.22;
  animation: ringLoad 2.15s cubic-bezier(0.4, 0, 0.2, 1) forwards 0.12s;
}
@keyframes ringLoad {
  to { stroke-dashoffset: 0; }
}

/* Logo inside ring */
.preloader-logo-center {
  position: relative; z-index: 1;
  opacity: 0;
  transform: scale(0.8);
  animation: logoAppear 0.85s cubic-bezier(0.34, 1.4, 0.64, 1) forwards 0.6s;
}
@keyframes logoAppear {
  to { opacity: 1; transform: scale(1); }
}

/* Hotel name block */
.preloader-name-wrap {
  margin-top: 32px;
  display: flex; flex-direction: column; align-items: center;
}
.preloader-title {
  font-family: 'Playfair Display', serif;
  font-size: 52px; font-weight: 400;
  color: #f5f0dc;
  letter-spacing: 0.3em;
  line-height: 1;
  display: flex;
}
/* Letter-by-letter rise animation */
.preloader-title .char {
  display: inline-block;
  opacity: 0;
  transform: translateY(28px);
  animation: charRise 0.65s cubic-bezier(0.34, 1.4, 0.64, 1) forwards;
}
.preloader-title .char:nth-child(1) { animation-delay: 0.40s; }
.preloader-title .char:nth-child(2) { animation-delay: 0.52s; }
.preloader-title .char:nth-child(3) { animation-delay: 0.64s; }
.preloader-title .char:nth-child(4) { animation-delay: 0.76s; }
.preloader-title .char:nth-child(5) { animation-delay: 0.88s; }
@keyframes charRise {
  to { opacity: 1; transform: translateY(0); }
}

/* Growing horizontal rule */
.preloader-rule {
  width: 0; height: 1px;
  background: rgba(245,240,220,0.26);
  margin-top: 20px;
  animation: ruleExpand 0.7s ease forwards 1.1s;
}
@keyframes ruleExpand { to { width: 100px; } }

/* Subtitle fade-up */
.preloader-subtitle {
  margin-top: 14px;
  font-family: 'Jost', sans-serif;
  font-size: 9px;
  letter-spacing: 0.52em;
  color: rgba(245,240,220,0.38);
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(7px);
  animation: subtitleReveal 0.75s ease forwards 1.35s;
}
@keyframes subtitleReveal {
  to { opacity: 1; transform: translateY(0); }
}

/* Progress bar at bottom */
.preloader-bar-wrap {
  position: absolute;
  bottom: 50px; left: 50%;
  transform: translateX(-50%);
  width: 180px; height: 1px;
  background: rgba(245,240,220,0.1);
  overflow: hidden;
}
.preloader-bar-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg,
    rgba(245,240,220,0.35) 0%,
    rgba(245,240,220,0.78) 100%);
  animation: barFill 2.15s cubic-bezier(0.25, 0.1, 0.25, 1) forwards 0.12s;
}
@keyframes barFill { to { width: 100%; } }

/* Percentage counter */
.preloader-count {
  position: absolute;
  bottom: 38px; right: 52px;
  font-family: 'Jost', sans-serif;
  font-size: 10px; font-weight: 300;
  letter-spacing: 0.06em;
  color: rgba(245,240,220,0.28);
  min-width: 36px; text-align: right;
}



/* ========== NAV LOADER ========== */
#nav-loader {
  position: fixed; inset: 0; z-index: 8000;
  background: #22372B;
  display: flex; align-items: center; justify-content: center;
  transform: translateY(100%);
  pointer-events: none;
  transition: transform 0.62s cubic-bezier(0.76, 0, 0.24, 1);
  overflow: hidden;
}
#nav-loader.entering { transform: translateY(0); pointer-events: all; }
#nav-loader.leaving  { transform: translateY(-105%); }
#nav-loader.reset    { transition: none !important; }
#nav-loader.reset *  { transition: none !important; }

/* Ruido de fondo */
#nav-loader::before {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E");
}
/* Líneas horizontales sutiles */
#nav-loader::after {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(
    0deg, transparent, transparent 68px,
    rgba(142,154,135,0.05) 68px, rgba(142,154,135,0.05) 69px
  );
}

/* Esquinas decorativas */
.loader-corner {
  position: absolute;
  width: 140px; height: 140px;
  opacity: 0;
  transform: scale(0.82);
  transition: opacity 0.5s ease 0.28s, transform 0.6s ease 0.28s;
}
.loader-corner--tl { top: 44px; left: 44px;
  border-top: 1px solid rgba(255,255,227,0.14);
  border-left: 1px solid rgba(255,255,227,0.14); }
.loader-corner--br { bottom: 44px; right: 44px;
  border-bottom: 1px solid rgba(255,255,227,0.14);
  border-right: 1px solid rgba(255,255,227,0.14); }
#nav-loader.entering .loader-corner { opacity: 1; transform: scale(1); }

/* Línea horizontal animada (sweep) */
.loader-sweep {
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(142,154,135,0.35) 50%, transparent 100%);
  opacity: 0;
  transform: translateY(-120px);
  transition: opacity 0.01s;
}
#nav-loader.entering .loader-sweep {
  opacity: 1;
  animation: loaderSweep 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards 0.15s;
}
@keyframes loaderSweep {
  from { transform: translateY(-60px); }
  to   { transform: translateY(60px); opacity: 0; }
}

/* Contenido central */
.nav-loader-inner {
  display: flex; flex-direction: column; align-items: center;
  position: relative; z-index: 1;
}

/* Logo */
.loader-logo {
  opacity: 0; transform: scale(0.72) translateY(10px);
  transition: opacity 0.52s ease 0.18s,
              transform 0.68s cubic-bezier(0.34, 1.3, 0.64, 1) 0.18s;
  margin-bottom: 28px;
}
#nav-loader.entering .loader-logo { opacity: 1; transform: scale(1) translateY(0); }

/* Línea divisoria */
.loader-rule {
  width: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,227,0.3), transparent);
  transition: width 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.36s;
  margin-bottom: 22px;
}
#nav-loader.entering .loader-rule { width: 100px; }

/* Título KEMAY */
.loader-title {
  font-family: 'Playfair Display', serif;
  font-size: 46px; font-weight: 400;
  letter-spacing: 0.38em;
  color: #FFFFE3;
  opacity: 0; transform: translateY(20px);
  transition: opacity 0.52s ease 0.26s,
              transform 0.65s cubic-bezier(0.34, 1.2, 0.64, 1) 0.26s;
  line-height: 1; margin-bottom: 16px;
}
#nav-loader.entering .loader-title { opacity: 1; transform: translateY(0); }

/* Subtítulo */
.loader-subtitle {
  font-family: 'Jost', sans-serif;
  font-size: 9px; letter-spacing: 0.54em; text-transform: uppercase;
  color: rgba(255,255,227,0.38);
  opacity: 0;
  transition: opacity 0.5s ease 0.52s;
}
#nav-loader.entering .loader-subtitle { opacity: 1; }

/* Punto / dot decorativo */
.loader-dot {
  width: 4px; height: 4px; border-radius: 50%;
  background: #8E9A87;
  margin: 18px auto 0;
  opacity: 0; transform: scale(0);
  transition: opacity 0.4s ease 0.6s, transform 0.4s cubic-bezier(0.34, 1.5, 0.64, 1) 0.6s;
}
#nav-loader.entering .loader-dot { opacity: 1; transform: scale(1); }