/* ═══════════════════════════════════════════════════════════
   LUCKY INTERNATIONAL — PAGE LOADERS
   Each page has a completely unique loader aesthetic.
   Usage: add data-loader="[page-name]" to #page-loader div.
═══════════════════════════════════════════════════════════ */


/* ──────────────────────────────────────────────
   LOADER 1: HOMEPAGE
   Concept: Elegant horizontal line sweep
   that reveals the hotel name letter by letter
   against a premium off-white canvas.
────────────────────────────────────────────── */
#page-loader[data-loader="homepage"] {
  background: var(--bg);
  flex-direction: column;
  gap: 32px;
}
#page-loader[data-loader="homepage"] .loader-logo-img {
  width: clamp(120px, 20vw, 220px);
  height: auto;
  animation: logo-flash 2s ease-in-out forwards;
}
@keyframes logo-flash {
  0%   { opacity: 0; transform: scale(0.94); }
  25%  { opacity: 1; transform: scale(1); }
  60%  { opacity: 1; transform: scale(1); }
  72%  { opacity: 0; transform: scale(1.03); }
  84%  { opacity: 1; transform: scale(1); }
  100% { opacity: 1; transform: scale(1); }
}
#page-loader[data-loader="homepage"] .loader-line {
  width: 0;
  height: 1px;
  background: var(--gold);
  animation: line-expand 0.6s ease 0.5s forwards;
}
@keyframes line-expand {
  to { width: 200px; }
}
@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ──────────────────────────────────────────────
   LOADER 2: ROOMS PAGE
   Concept: Five gold vertical bars rise in
   sequence — one per room tier.
────────────────────────────────────────────── */
#page-loader[data-loader="rooms"] {
  background: var(--fg);
  flex-direction: column;
  gap: 40px;
}
#page-loader[data-loader="rooms"] .loader-bars {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  height: 80px;
}
#page-loader[data-loader="rooms"] .loader-bar {
  width: 12px;
  background: var(--gold);
  animation: bar-rise 0.5s ease forwards;
  transform-origin: bottom;
  transform: scaleY(0);
}
#page-loader[data-loader="rooms"] .loader-bar:nth-child(1) { height: 32px; animation-delay: 0.1s; }
#page-loader[data-loader="rooms"] .loader-bar:nth-child(2) { height: 48px; animation-delay: 0.2s; }
#page-loader[data-loader="rooms"] .loader-bar:nth-child(3) { height: 60px; animation-delay: 0.3s; }
#page-loader[data-loader="rooms"] .loader-bar:nth-child(4) { height: 72px; animation-delay: 0.4s; }
#page-loader[data-loader="rooms"] .loader-bar:nth-child(5) { height: 80px; animation-delay: 0.5s; }
@keyframes bar-rise {
  to { transform: scaleY(1); }
}
#page-loader[data-loader="rooms"] .loader-text {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  opacity: 0;
  animation: fade-in-up 0.5s ease 0.8s forwards;
}


/* ──────────────────────────────────────────────
   LOADER 3: ABOUT & SERVICES PAGE
   Concept: A thin gold circle draws itself
   with a rotating stroke, revealing the
   hotel initial in Playfair Display.
────────────────────────────────────────────── */
#page-loader[data-loader="about"] {
  background: var(--bg);
  flex-direction: column;
  gap: 24px;
}
#page-loader[data-loader="about"] .loader-ring-wrap {
  position: relative;
  width: 100px;
  height: 100px;
}
#page-loader[data-loader="about"] .loader-ring {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 1px solid var(--divider);
  position: absolute;
}
#page-loader[data-loader="about"] .loader-ring-svg {
  position: absolute;
  inset: 0;
  animation: rotate-ring 1.4s linear infinite;
}
@keyframes rotate-ring {
  to { transform: rotate(360deg); }
}
#page-loader[data-loader="about"] .loader-initial {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
#page-loader[data-loader="about"] .loader-initial img {
  width: 52px;
  height: 52px;
  object-fit: contain;
  opacity: 0.85;
}
#page-loader[data-loader="about"] .loader-label {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--fg-30);
}


/* ──────────────────────────────────────────────
   LOADER 4: DINING PAGE
   Concept: A fork and knife silhouette
   drawn from SVG stroke-dashoffset,
   on a deep charcoal background.
────────────────────────────────────────────── */
#page-loader[data-loader="dining"] {
  background: #111;
  flex-direction: column;
  gap: 32px;
}
#page-loader[data-loader="dining"] .loader-cutlery {
  display: flex;
  gap: 20px;
  align-items: center;
}
#page-loader[data-loader="dining"] .loader-cutlery svg {
  stroke: var(--gold);
  fill: none;
  stroke-width: 1.5;
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  animation: draw-stroke 1.2s ease forwards;
}
#page-loader[data-loader="dining"] .loader-cutlery svg:nth-child(2) {
  animation-delay: 0.3s;
}
@keyframes draw-stroke {
  to { stroke-dashoffset: 0; }
}
#page-loader[data-loader="dining"] .loader-dining-text {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 18px;
  color: rgba(255,255,255,0.5);
  letter-spacing: 2px;
  opacity: 0;
  animation: fade-in-up 0.6s ease 1s forwards;
}


/* ──────────────────────────────────────────────
   LOADER 5: BANQUETS PAGE
   Concept: Expanding concentric squares —
   architectural, geometric, sharp.
────────────────────────────────────────────── */
#page-loader[data-loader="banquets"] {
  background: var(--fg);
  flex-direction: column;
  gap: 48px;
}
#page-loader[data-loader="banquets"] .loader-squares {
  position: relative;
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}
#page-loader[data-loader="banquets"] .loader-sq {
  position: absolute;
  border: 1px solid var(--gold);
  opacity: 0;
  animation: sq-expand 0.5s ease forwards;
}
#page-loader[data-loader="banquets"] .loader-sq:nth-child(1) { width: 20px; height: 20px; animation-delay: 0.1s; }
#page-loader[data-loader="banquets"] .loader-sq:nth-child(2) { width: 40px; height: 40px; animation-delay: 0.25s; }
#page-loader[data-loader="banquets"] .loader-sq:nth-child(3) { width: 60px; height: 60px; animation-delay: 0.4s; }
#page-loader[data-loader="banquets"] .loader-sq:nth-child(4) { width: 80px; height: 80px; animation-delay: 0.55s; opacity: 0; border-color: rgba(212,175,55,0.3); animation: sq-expand 0.5s ease 0.55s forwards; }
@keyframes sq-expand {
  from { opacity: 0; transform: scale(0.4); }
  to   { opacity: 1; transform: scale(1); }
}
#page-loader[data-loader="banquets"] .loader-banquet-text {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.3);
  opacity: 0;
  animation: fade-in-up 0.6s ease 0.9s forwards;
}


/* ──────────────────────────────────────────────
   LOADER 6: BAR PAGE — HANGOVER
   Concept: Dark, moody. A glowing orb
   pulses like neon against near-black,
   with the bar name appearing slowly.
────────────────────────────────────────────── */
#page-loader[data-loader="bar"] {
  background: #080808;
  flex-direction: column;
  gap: 32px;
}
#page-loader[data-loader="bar"] .loader-orb {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212,175,55,0.9) 0%, rgba(212,175,55,0.2) 50%, transparent 70%);
  animation: orb-pulse 1.2s ease-in-out infinite;
  box-shadow: 0 0 40px rgba(212,175,55,0.4), 0 0 80px rgba(212,175,55,0.15);
}
@keyframes orb-pulse {
  0%, 100% { transform: scale(1);    opacity: 0.8; }
  50%       { transform: scale(1.15); opacity: 1; }
}
#page-loader[data-loader="bar"] .loader-bar-name {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 4px;
  color: var(--white);
  opacity: 0;
  animation: fade-in-up 0.8s ease 0.5s forwards;
}
#page-loader[data-loader="bar"] .loader-bar-sub {
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: rgba(212,175,55,0.5);
  opacity: 0;
  animation: fade-in-up 0.8s ease 0.9s forwards;
}


/* ──────────────────────────────────────────────
   LOADER 7: CONTACT PAGE
   Concept: A clean progress line draws
   across the screen — minimal, direct.
────────────────────────────────────────────── */
#page-loader[data-loader="contact"] {
  background: var(--bg);
  flex-direction: column;
  gap: 24px;
}
#page-loader[data-loader="contact"] .loader-progress-track {
  width: 240px;
  height: 1px;
  background: var(--divider);
  position: relative;
  overflow: hidden;
}
#page-loader[data-loader="contact"] .loader-progress-fill {
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  background: var(--gold);
  width: 0;
  animation: progress-fill 1.4s ease forwards;
}
@keyframes progress-fill {
  to { width: 100%; }
}
#page-loader[data-loader="contact"] .loader-contact-text {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--fg-30);
  opacity: 0;
  animation: fade-in-up 0.5s ease 0.4s forwards;
}


/* ──────────────────────────────────────────────
   LOADER 8: DHABA — HOME
   Concept: Earthy flame flicker — warm
   organic color pulses suggesting an
   open-fire clay oven.
────────────────────────────────────────────── */
#page-loader[data-loader="dhaba-home"] {
  background: #1A1208;
  flex-direction: column;
  gap: 28px;
}
#page-loader[data-loader="dhaba-home"] .loader-flame {
  font-size: 64px;
  animation: flame-flicker 0.8s ease-in-out infinite alternate;
  filter: drop-shadow(0 0 20px rgba(220,100,20,0.8));
}
@keyframes flame-flicker {
  0%   { transform: scaleY(1)    scaleX(1)    rotate(-1deg); }
  100% { transform: scaleY(1.08) scaleX(0.96) rotate(1deg); }
}
#page-loader[data-loader="dhaba-home"] .loader-dhaba-name {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: var(--white);
  opacity: 0;
  animation: fade-in-up 0.7s ease 0.4s forwards;
}
#page-loader[data-loader="dhaba-home"] .loader-dhaba-tag {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: rgba(255,150,50,0.6);
  opacity: 0;
  animation: fade-in-up 0.7s ease 0.8s forwards;
}


/* ──────────────────────────────────────────────
   LOADER 9: DHABA — SPECIALITIES
   Concept: Spice rating dots fill in
   one by one, left to right — red hot.
────────────────────────────────────────────── */
#page-loader[data-loader="dhaba-specialities"] {
  background: var(--dcanvas);
  flex-direction: column;
  gap: 32px;
}
#page-loader[data-loader="dhaba-specialities"] .loader-spice-dots {
  display: flex;
  gap: 12px;
}
#page-loader[data-loader="dhaba-specialities"] .spice-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--dred);
  opacity: 0;
  transform: scale(0);
  animation: dot-pop 0.3s ease forwards;
}
#page-loader[data-loader="dhaba-specialities"] .spice-dot:nth-child(1) { animation-delay: 0.1s; }
#page-loader[data-loader="dhaba-specialities"] .spice-dot:nth-child(2) { animation-delay: 0.2s; }
#page-loader[data-loader="dhaba-specialities"] .spice-dot:nth-child(3) { animation-delay: 0.3s; }
#page-loader[data-loader="dhaba-specialities"] .spice-dot:nth-child(4) { animation-delay: 0.4s; }
#page-loader[data-loader="dhaba-specialities"] .spice-dot:nth-child(5) { animation-delay: 0.5s; }
@keyframes dot-pop {
  to { opacity: 1; transform: scale(1); }
}
#page-loader[data-loader="dhaba-specialities"] .loader-spec-text {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--dred);
  letter-spacing: -0.3px;
  opacity: 0;
  animation: fade-in-up 0.6s ease 0.8s forwards;
}


/* ──────────────────────────────────────────────
   LOADER 10: DHABA — ABOUT
   Concept: A leaf SVG strokes itself in
   Dhaba Green — organic, slow, earthy.
────────────────────────────────────────────── */
#page-loader[data-loader="dhaba-about"] {
  background: var(--dgreen);
  flex-direction: column;
  gap: 28px;
}
#page-loader[data-loader="dhaba-about"] .loader-leaf svg {
  width: 80px;
  height: 80px;
  stroke: rgba(255,255,255,0.9);
  fill: none;
  stroke-width: 1.5;
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
  animation: draw-stroke 1.5s ease forwards;
}
#page-loader[data-loader="dhaba-about"] .loader-about-text {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: rgba(255,255,255,0.8);
  letter-spacing: 2px;
  opacity: 0;
  animation: fade-in-up 0.6s ease 1.2s forwards;
}


/* ──────────────────────────────────────────────
   LOADER 11: DHABA — CONTACT
   Concept: A location pin drops and
   bounces on the Dhaba Red canvas,
   hinting at NH-18 location.
────────────────────────────────────────────── */
#page-loader[data-loader="dhaba-contact"] {
  background: var(--dred);
  flex-direction: column;
  gap: 24px;
}
#page-loader[data-loader="dhaba-contact"] .loader-pin {
  font-size: 56px;
  animation: pin-drop 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  opacity: 0;
  transform: translateY(-60px);
}
@keyframes pin-drop {
  to { opacity: 1; transform: translateY(0); }
}
#page-loader[data-loader="dhaba-contact"] .loader-pin-text {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  opacity: 0;
  animation: fade-in-up 0.6s ease 0.8s forwards;
}