/* ============================================================
   Poinciana Loader System
   3 branded loaders: Welcome, Compass, Confirm
   ============================================================ */

/* ===== SHARED OVERLAY BASE ===== */
.loader-overlay {
  position: fixed;
  inset: 0;
  background: #0f0d0a;
  display: none;
  z-index: 99999;
  opacity: 1;
  transition: opacity 0.7s ease;
}
.loader-overlay.active { display: flex; flex-direction: column; align-items: center; justify-content: center; padding-bottom: 20vh; }
#welcomeLoader.active { display: block; }
.loader-overlay.fade-out { opacity: 0; pointer-events: none; }

/* ===== SHARED KEYFRAMES ===== */
@keyframes ambientPulse { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }
@keyframes fadeUp { 0% { opacity: 0; transform: translateY(8px); } 100% { opacity: 1; transform: translateY(0); } }

/* Dot animation for taglines */
.tag-dots {
  display: inline-flex; gap: 4px;
  margin-left: 4px; vertical-align: middle;
}
.tag-dots span {
  width: 3px; height: 3px; border-radius: 50%;
  background: #c9a96e; opacity: 0;
  animation: dotPulse 1.4s ease-in-out infinite;
}
.tag-dots span:nth-child(1) { animation-delay: 2.0s; }
.tag-dots span:nth-child(2) { animation-delay: 2.2s; }
.tag-dots span:nth-child(3) { animation-delay: 2.4s; }

@keyframes dotPulse {
  0%, 80%, 100% { opacity: 0.15; transform: scale(0.8); }
  40% { opacity: 0.8; transform: scale(1.2); }
}


/* ============================================================
   LOADER 00: WELCOME — Looping Poinciana Flower
   ============================================================ */

.welcome-logo {
  width: 220px; height: 240px;
  position: absolute;
  top: calc(50% - 10vh - 56px);
  left: 50%;
  transform: translate(-50%, -50%);
}
.welcome-logo svg { width: 100%; height: 100%; overflow: visible; }

.welcome-glow {
  position: absolute;
  width: 320px; height: 320px; border-radius: 50%;
  background: radial-gradient(circle, rgba(168,68,58,0.12) 0%, transparent 65%);
  pointer-events: none;
  top: 50%; left: 50%;
  transform: translate(-50%, -55%);
  opacity: 0;
  animation: ambientPulse 4s ease-in-out 2.5s infinite;
}

/* Petal fills */
.w-petal-glow { stroke: none; opacity: 0; }
.w-pfl  { fill: #7a2822; animation: wGlowLoop 6s ease-in-out 1.4s infinite; }
.w-pfr  { fill: #8b2e28; animation: wGlowLoop 6s ease-in-out 1.55s infinite; }
.w-pil  { fill: #a8443a; animation: wGlowLoop 6s ease-in-out 1.7s infinite; }
.w-pir  { fill: #c04a3e; animation: wGlowLoop 6s ease-in-out 1.85s infinite; }
.w-pc   { fill: #c85044; animation: wGlowLoop 6s ease-in-out 2.0s infinite; }

/* Petal outlines */
.w-petal-trace {
  fill: none; stroke-width: 1.2;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 600; stroke-dashoffset: 600;
}
.w-tfl { stroke: #7a2822; animation: wTraceLoop 6s cubic-bezier(0.4,0,0.2,1) 0s infinite; }
.w-tfr { stroke: #8b2e28; animation: wTraceLoop 6s cubic-bezier(0.4,0,0.2,1) 0.15s infinite; }
.w-til { stroke: #a8443a; animation: wTraceLoop 6s cubic-bezier(0.4,0,0.2,1) 0.3s infinite; }
.w-tir { stroke: #c04a3e; animation: wTraceLoop 6s cubic-bezier(0.4,0,0.2,1) 0.45s infinite; }
.w-tc  { stroke: #c85044; animation: wTraceLoop 6s cubic-bezier(0.4,0,0.2,1) 0.6s infinite; }

.w-palm { fill: #0f0d0a; opacity: 0; animation: wTreeLoop 6s ease 0s infinite; }

.w-wave {
  fill: none; stroke: #7b8db8;
  stroke-width: 1.1; stroke-linecap: round;
  stroke-dasharray: 400; stroke-dashoffset: 400; opacity: 0.45;
}
.w-w1 { animation: wWaveLoop 6s ease 0s infinite; }
.w-w2 { animation: wWaveLoop 6s ease 0.2s infinite; }

.welcome-text { position: absolute; top: calc(50% - 10vh + 70px); left: 0; right: 0; text-align: center; opacity: 0; animation: fadeUp 1s ease 2.4s forwards; }
.welcome-tagline {
  font-family: 'Cormorant Garamond', serif;
  font-size: 32px; font-weight: 300; font-style: italic;
  color: #b8a894; letter-spacing: 1px; margin-bottom: 10px;
}
.welcome-name {
  font-family: 'Playfair Display', serif;
  font-size: 48px; font-weight: 400; color: #f0e6d6; letter-spacing: 5px;
}
.welcome-sub {
  font-family: 'Jost', sans-serif;
  font-size: 14px; font-weight: 300; letter-spacing: 6px;
  text-transform: uppercase; color: #8a7e70;
  text-align: center; margin-top: 14px;
  opacity: 0; animation: fadeUp 0.8s ease 3.0s forwards;
}

/* Welcome slow fade for seamless handoff to hero */
.loader-overlay.fade-slow { transition: opacity 3s ease; }

/* Welcome keyframes — 6s loop */
@keyframes wTraceLoop {
  0%    { stroke-dashoffset: 600; stroke-opacity: 1; }
  33%   { stroke-dashoffset: 0;   stroke-opacity: 1; }
  60%   { stroke-dashoffset: 0;   stroke-opacity: 1; }
  80%   { stroke-dashoffset: 0;   stroke-opacity: 0; }
  80.1% { stroke-dashoffset: 600; stroke-opacity: 0; }
  100%  { stroke-dashoffset: 600; stroke-opacity: 0; }
}
@keyframes wGlowLoop {
  0% { opacity: 0; } 25% { opacity: 0; } 40% { opacity: 0.13; }
  60% { opacity: 0.13; } 78% { opacity: 0; } 100% { opacity: 0; }
}
@keyframes wTreeLoop {
  0% { opacity: 0; } 33% { opacity: 0; } 45% { opacity: 0.85; }
  60% { opacity: 0.85; } 78% { opacity: 0; } 100% { opacity: 0; }
}
@keyframes wWaveLoop {
  0%    { stroke-dashoffset: 400; opacity: 0.45; }
  30%   { stroke-dashoffset: 400; opacity: 0.45; }
  55%   { stroke-dashoffset: 0;   opacity: 0.45; }
  60%   { stroke-dashoffset: 0;   opacity: 0.45; }
  78%   { stroke-dashoffset: 0;   opacity: 0; }
  78.1% { stroke-dashoffset: 400; opacity: 0; }
  100%  { stroke-dashoffset: 400; opacity: 0; }
}


/* ============================================================
   LOADER 01: COMPASS — Booking Navigation
   ============================================================ */

.nav-compass { width: 100px; height: 100px; margin-bottom: 30px; position: relative; }
.nav-compass svg { width: 100%; height: 100%; overflow: visible; }

.nav-glow {
  position: absolute; width: 180px; height: 180px; border-radius: 50%;
  background: radial-gradient(circle, rgba(201,169,110,0.05) 0%, transparent 65%);
  pointer-events: none; top: 50%; left: 50%; transform: translate(-50%, -50%);
  opacity: 0; animation: ambientPulse 3s ease-in-out 2s infinite;
}

.c-ring { fill: none; stroke: #c9a96e; stroke-width: 0.7; stroke-dasharray: 320; stroke-dashoffset: 320; animation: cTrace 1.8s cubic-bezier(0.4,0,0.2,1) 0s forwards; }
.c-ring-inner { fill: none; stroke: #c9a96e; stroke-width: 0.3; stroke-dasharray: 220; stroke-dashoffset: 220; opacity: 0.4; animation: cTrace 1.5s ease 0.3s forwards; }
.c-ticks { stroke: #c9a96e; stroke-width: 0.5; stroke-linecap: round; opacity: 0; animation: cFadeIn 0.6s ease 1.2s forwards; }
.c-ticks-minor { stroke: #c9a96e; stroke-width: 0.3; stroke-linecap: round; opacity: 0; animation: cFadeIn 0.6s ease 1.5s forwards; }
.c-label { font-family: 'Playfair Display', serif; font-size: 6px; fill: #c9a96e; text-anchor: middle; dominant-baseline: central; opacity: 0; animation: cFadeIn 0.5s ease 1.6s forwards; }
.c-label-n { font-size: 7px; fill: #d4b87a; animation: cFadeIn 0.5s ease 1.4s forwards; }

.c-needle-group { transform-origin: 50px 50px; animation: needleSearch 3s ease-in-out 1.8s infinite; }
.c-needle-n { fill: #a8443a; opacity: 0; animation: cFadeIn 0.8s ease 1.4s forwards; }
.c-needle-s { fill: #c9a96e; opacity: 0; animation: cFadeIn 0.8s ease 1.4s forwards; }
.c-needle-stroke { fill: none; stroke: #f0e6d6; stroke-width: 0.4; stroke-dasharray: 100; stroke-dashoffset: 100; animation: cTrace 1s ease 1.2s forwards; }
.c-pivot { fill: none; stroke: #c9a96e; stroke-width: 0.6; opacity: 0; animation: cFadeIn 0.4s ease 1.6s forwards; }
.c-pivot-dot { fill: #c9a96e; opacity: 0; animation: cFadeIn 0.4s ease 1.6s forwards; }

@keyframes cTrace { to { stroke-dashoffset: 0; } }
@keyframes cFadeIn { to { opacity: 1; } }
@keyframes needleSearch {
  0%, 100% { transform: rotate(0deg); }
  15% { transform: rotate(18deg); }
  35% { transform: rotate(-12deg); }
  55% { transform: rotate(8deg); }
  75% { transform: rotate(-4deg); }
  90% { transform: rotate(2deg); }
}

.nav-tagline {
  font-family: 'Cormorant Garamond', serif;
  font-size: 14px; font-weight: 300; font-style: italic;
  color: #b8a894; letter-spacing: 0.5px;
  opacity: 0; animation: fadeUp 0.8s ease 1.8s forwards; text-align: center;
}


/* ============================================================
   LOADER 04: CONFIRM — Payment -> Checkmark
   ============================================================ */

.confirm-icon { width: 100px; height: 100px; margin-bottom: 30px; position: relative; }
.confirm-icon svg { width: 100%; height: 100%; overflow: visible; }

.cf-ring {
  fill: none; stroke: #c9a96e; stroke-width: 1.2; stroke-linecap: round;
  stroke-dasharray: 270; stroke-dashoffset: 270; transform-origin: 50px 50px;
  animation: cfTrace 1.5s cubic-bezier(0.4,0,0.2,1) 0s forwards, cfSpin 2s linear 0.5s 2, cfFadeGold 0.4s ease var(--confirm-time, 3.5s) forwards;
}
.cf-ring-inner { fill: none; stroke: #c9a96e; stroke-width: 0.4; stroke-dasharray: 200; stroke-dashoffset: 200; opacity: 0.3; animation: cfTrace 1.2s ease 0.3s forwards; }

.cf-spinner { transform-origin: 50px 50px; animation: cfSpinDots 1.2s linear 0.2s infinite, cfHide 0.3s ease var(--confirm-time, 3.5s) forwards; }
.cf-spinner-dot { fill: #c9a96e; r: 1.5; }
.cf-spinner-dot:nth-child(1) { opacity: 1.0; }
.cf-spinner-dot:nth-child(2) { opacity: 0.6; }
.cf-spinner-dot:nth-child(3) { opacity: 0.3; }

.cf-glow { fill: rgba(107,158,122,0.08); opacity: 0; animation: cfGlowIn 0.5s ease var(--confirm-time, 3.5s) forwards, cfGlowPulse 3s ease-in-out calc(var(--confirm-time, 3.5s) + 0.5s) infinite; }
.cf-ring-confirm { fill: none; stroke: #6b9e7a; stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 270; stroke-dashoffset: 270; opacity: 0; animation: cfConfirmRing 0.8s ease var(--confirm-time, 3.5s) forwards; }
.cf-check { fill: none; stroke: #6b9e7a; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 50; stroke-dashoffset: 50; opacity: 0; animation: cfCheckDraw 0.5s ease calc(var(--confirm-time, 3.5s) + 0.4s) forwards; }

@keyframes cfTrace { to { stroke-dashoffset: 0; } }
@keyframes cfSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes cfSpinDots { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes cfConfirmRing { 0% { opacity: 0; stroke-dashoffset: 270; } 100% { opacity: 1; stroke-dashoffset: 0; } }
@keyframes cfCheckDraw { 0% { opacity: 0; stroke-dashoffset: 50; } 100% { opacity: 1; stroke-dashoffset: 0; } }
@keyframes cfGlowIn { 0% { opacity: 0; transform: scale(0.7); } 100% { opacity: 1; transform: scale(1); } }
@keyframes cfGlowPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
@keyframes cfHide { to { opacity: 0; } }
@keyframes cfFadeGold { to { opacity: 0; } }

.confirm-tagline {
  font-family: 'Cormorant Garamond', serif;
  font-size: 14px; font-weight: 300; font-style: italic;
  color: #b8a894; letter-spacing: 0.5px;
  opacity: 0; animation: fadeUp 0.8s ease 1.5s forwards;
  text-align: center; transition: color 0.4s ease;
}
.confirm-tagline.confirmed { color: #6b9e7a; }

/* Mobile — match hero-flower mobile position */
@media(max-width:600px){
  .welcome-logo{width:210px;height:230px;top:calc(50% - 10vh - 40px)}
  .welcome-text{top:calc(50% - 10vh + 70px)}
}