/* ============================================================
   Poinciana Villa Loader
   Tropical villa night scene — traces into existence
   ============================================================ */

/* Overlay base is in loaders.css — villa-specific overrides only */
@keyframes traceIn { to { stroke-dashoffset: 0; } }
@keyframes fadeIn { to { opacity: 1; } }

/* ===== TAGLINE ===== */
.villa-tagline {
  font-family: 'Cormorant Garamond', serif;
  font-size: 16px; font-weight: 300; font-style: italic;
  color: #b8a894; margin-top: 18px; text-align: center;
  opacity: 0; animation: fadeIn 0.8s ease 0.8s forwards;
}
.villa-dots { display: inline-flex; gap: 4px; margin-left: 4px; vertical-align: middle; }
.villa-dots span { width: 3px; height: 3px; border-radius: 50%; background: #c9a96e; opacity: 0; animation: dotPulse 1.4s ease-in-out infinite; }
.villa-dots span:nth-child(1) { animation-delay: 1.2s; }
.villa-dots span:nth-child(2) { animation-delay: 1.4s; }
.villa-dots span:nth-child(3) { animation-delay: 1.6s; }
@keyframes dotPulse { 0%, 80%, 100% { opacity: 0.15; transform: scale(0.8); } 40% { opacity: 0.8; transform: scale(1.2); } }


/* ============================================================
   TROPICAL VILLA — Island Vibes
   ============================================================ */
.villa-svg { width: 140px; height: 105px; }

/* Ocean / sky gradient glow */
.v-ocean-glow {
  opacity: 0;
  animation: fadeIn 1.5s ease 2.4s forwards;
}

/* Ground */
.v-ground { fill: none; stroke: #b8a894; stroke-width: 0.3; stroke-dasharray: 300; stroke-dashoffset: 300; opacity: 0.25; animation: traceIn 2s ease 0.3s forwards; }

/* Ocean waves in background */
.v-ocean { fill: none; stroke: #7580b0; stroke-width: 0.5; stroke-linecap: round; opacity: 0; }
.v-ocean:nth-of-type(2) { animation: fadeIn 1s ease 2.6s forwards, vWaveDrift 6s ease-in-out 2.6s infinite; }
.v-ocean:nth-of-type(3) { animation: fadeIn 1s ease 2.8s forwards, vWaveDrift 6s ease-in-out 3s infinite; }
@keyframes vWaveDrift { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(3px); } }

/* Roof — wide overhanging pitched roof with eaves */
.v-roof { fill: none; stroke: #c9a96e; stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 250; stroke-dashoffset: 250; animation: traceIn 1.8s cubic-bezier(0.4,0,0.2,1) 0s forwards; }
.v-roof-under { fill: none; stroke: #c9a96e; stroke-width: 0.3; stroke-linecap: round; opacity: 0.4; stroke-dasharray: 120; stroke-dashoffset: 120; animation: traceIn 1.2s ease 1s forwards; }

/* Veranda posts */
.v-post { fill: none; stroke: #b8a894; stroke-width: 0.6; stroke-linecap: round; stroke-dasharray: 40; stroke-dashoffset: 40; }
.v-post:nth-of-type(6) { animation: traceIn 0.6s ease 1.2s forwards; }
.v-post:nth-of-type(7) { animation: traceIn 0.6s ease 1.35s forwards; }
.v-post:nth-of-type(8) { animation: traceIn 0.6s ease 1.5s forwards; }

/* Veranda railing */
.v-railing { fill: none; stroke: #b8a894; stroke-width: 0.4; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; opacity: 0.5; animation: traceIn 1s ease 1.6s forwards; }

/* Walls */
.v-wall { fill: none; stroke: #b8a894; stroke-width: 0.7; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 200; stroke-dashoffset: 200; animation: traceIn 1.5s ease 0.5s forwards; }

/* Louver windows (horizontal slats) */
.v-louver { fill: none; stroke: #b8a894; stroke-width: 0.4; stroke-linecap: round; opacity: 0; }
.v-louver-group-l .v-louver:nth-child(1) { animation: fadeIn 0.3s ease 1.7s forwards; }
.v-louver-group-l .v-louver:nth-child(2) { animation: fadeIn 0.3s ease 1.8s forwards; }
.v-louver-group-l .v-louver:nth-child(3) { animation: fadeIn 0.3s ease 1.9s forwards; }
.v-louver-group-l .v-louver:nth-child(4) { animation: fadeIn 0.3s ease 2.0s forwards; }
.v-louver-group-r .v-louver:nth-child(1) { animation: fadeIn 0.3s ease 1.8s forwards; }
.v-louver-group-r .v-louver:nth-child(2) { animation: fadeIn 0.3s ease 1.9s forwards; }
.v-louver-group-r .v-louver:nth-child(3) { animation: fadeIn 0.3s ease 2.0s forwards; }
.v-louver-group-r .v-louver:nth-child(4) { animation: fadeIn 0.3s ease 2.1s forwards; }

/* Window glow */
.v-wglow { fill: rgba(201,169,110,0.1); opacity: 0; }
.v-wglow:nth-of-type(1) { animation: fadeIn 1.2s ease 2.2s forwards; }
.v-wglow:nth-of-type(2) { animation: fadeIn 1.2s ease 2.4s forwards; }

/* Door — open archway */
.v-door { fill: none; stroke: #c9a96e; stroke-width: 0.6; stroke-linejoin: round; stroke-dasharray: 80; stroke-dashoffset: 80; animation: traceIn 0.8s ease 1.5s forwards; }
.v-door-glow { fill: rgba(201,169,110,0.08); opacity: 0; animation: fadeIn 1s ease 2.6s forwards; }

/* Tropical plants — left side */
.v-plant { fill: none; stroke-linecap: round; stroke-dasharray: 50; stroke-dashoffset: 50; }
.v-plant-stem { stroke: #4a7a5a; stroke-width: 0.6; animation: traceIn 0.8s ease 1.4s forwards; }
.v-plant-leaf { stroke: #6b9e7a; stroke-width: 0.8; }
.v-plant-leaf:nth-of-type(1) { animation: traceIn 0.6s ease 1.8s forwards; }
.v-plant-leaf:nth-of-type(2) { animation: traceIn 0.6s ease 2.0s forwards; }
.v-plant-leaf:nth-of-type(3) { animation: traceIn 0.6s ease 1.9s forwards; }
.v-plant-leaf:nth-of-type(4) { animation: traceIn 0.6s ease 2.1s forwards; }

/* Right palm */
.v-palm-trunk { fill: none; stroke: #4a7a5a; stroke-width: 0.7; stroke-linecap: round; stroke-dasharray: 60; stroke-dashoffset: 60; animation: traceIn 1s ease 1.2s forwards; }
.v-palm-leaf { fill: none; stroke: #6b9e7a; stroke-width: 0.6; stroke-linecap: round; stroke-dasharray: 60; stroke-dashoffset: 60; }
.v-pl1 { animation: traceIn 0.8s ease 1.8s forwards; }
.v-pl2 { animation: traceIn 0.8s ease 2.0s forwards; }
.v-pl3 { animation: traceIn 0.8s ease 1.9s forwards; }
.v-pl4 { animation: traceIn 0.8s ease 2.1s forwards; }

/* Moon */
.v-moon { fill: none; stroke: #c9a96e; stroke-width: 0.5; stroke-dasharray: 30; stroke-dashoffset: 30; opacity: 0.6; animation: traceIn 0.8s ease 2.4s forwards; }
.v-moon-glow { fill: rgba(201,169,110,0.04); opacity: 0; animation: fadeIn 1.5s ease 2.8s forwards; }

/* Stars */
.v-star { fill: #c9a96e; opacity: 0; }
.v-s1 { animation: twinkle 3.5s ease 2.8s infinite; }
.v-s2 { animation: twinkle 3.5s ease 3.3s infinite; }
.v-s3 { animation: twinkle 3.5s ease 3.0s infinite; }
.v-s4 { animation: twinkle 3.5s ease 3.6s infinite; }
@keyframes twinkle { 0%, 100% { opacity: 0; } 50% { opacity: 0.7; } }