/* Fit the Kasbah — animated oasis scene (shared scene layer)
   Loaded by index.html, booking.html, payment.html, on top of styles.css.
   Holds only the scene: the full-bleed oasis backdrop (full scene on every
   screen, scaled up on phones), the three time-of-day skins (caravan /
   golden / dusk) and all the motion. The active theme is driven by
   data-theme on <html> (js/festive.js).
   Page layout and hero content live in each page's own inline <style>.
   Last edited: 06-06-2026

   CACHE-BUST: changed this file? Bump the ?v=N on the festive.css link on
   every page (index/booking/payment) and push. See the full note in
   styles.css. Currently at v=1. */

/* ===================================================================
   SCENE-ONLY TOKENS  (the brand + neutral + oasis tokens already live
   in styles.css; these are the extras the festive scene needs)
   =================================================================== */
:root{
  --c-leaf-bright:#37A968;
  --silhouette:#2A1A2E; --silhouette-back:#3E2940; --gate-glow:#F2A35C;
  --water-dusk:#22303F; --water-shine:#C98A4B;
}

/* ===================================================================
   FULL-BLEED BACKDROP
   The oasis SVG is anchored to the bottom of a fixed layer; the area
   above it is filled with the top-of-sky colour for the active theme so
   the illustration blends into a seamless sky on tall screens.
   =================================================================== */
.scene-bg{
  position:fixed; inset:0; z-index:-2; pointer-events:none; overflow:hidden;
  display:flex; flex-direction:column; justify-content:flex-end;
  transition:background .6s ease;
}
.scene-bg svg{width:100%; height:auto; display:block}

html[data-theme="caravan"] .scene-bg{background:#CDEBF0}
html[data-theme="golden"]  .scene-bg{background:#8B7CAA}
html[data-theme="dusk"]    .scene-bg{background:#241546}

/* ===================================================================
   PHONES
   The full scene runs on phones too (no stripped-down version). A wide
   3:1 illustration scaled to 100% width would shrink to a thin band at
   the bottom of a tall phone, so instead we size it by height and centre
   it; overflow:hidden on .scene-bg crops the sides, keeping the kasbah
   gate and central palm grove in frame. Heavier than a strip, on purpose.
   Height tuned down to 34vh so the scene zooms out: less side-crop, more
   of the illustration visible on a narrow screen.
   =================================================================== */
@media (max-width:759px){
  .scene-bg{align-items:center}
  .scene-bg svg{width:auto; height:34vh; max-width:none}
}

/* ===================================================================
   THEME-ONLY ELEMENTS
   Every scene-specific element lives in the DOM at once; only the
   matching theme's elements are displayed.
   =================================================================== */
.is-golden,.is-dusk,.is-caravan{display:none}
html[data-theme="golden"]  .is-golden{display:inline}
html[data-theme="dusk"]    .is-dusk{display:inline}
html[data-theme="caravan"] .is-caravan{display:inline}

/* ===================================================================
   PER-THEME COLOURS  (same geometry classes, re-skinned per theme)
   =================================================================== */
/* --- Golden Hour --- */
html[data-theme="golden"] .back{fill:var(--c-coral);opacity:.32}
html[data-theme="golden"] .front{fill:var(--c-orange)}
html[data-theme="golden"] .gate{fill:var(--c-sand-100)}
html[data-theme="golden"] .trunk{fill:var(--c-olive)}
html[data-theme="golden"] .frond{fill:var(--c-leaf)}
html[data-theme="golden"] .palm-back{opacity:.5}
html[data-theme="golden"] .palm-back .trunk{fill:var(--c-mocha)}
html[data-theme="golden"] .palm-back .frond{fill:var(--c-leaf-back)}
html[data-theme="golden"] .palm-front .frond{fill:var(--c-leaf-deep)}
html[data-theme="golden"] .water{fill:var(--c-water)}
html[data-theme="golden"] .ripple{fill:var(--c-water-hi)}

/* --- Starlit Dusk --- */
html[data-theme="dusk"] .back{fill:var(--silhouette-back)}
html[data-theme="dusk"] .front{fill:var(--silhouette)}
html[data-theme="dusk"] .gate{fill:var(--gate-glow)}
html[data-theme="dusk"] .trunk{fill:var(--silhouette)}
html[data-theme="dusk"] .frond{fill:var(--silhouette)}
html[data-theme="dusk"] .palm-back{opacity:.6}
html[data-theme="dusk"] .palm-back .trunk{fill:var(--silhouette-back)}
html[data-theme="dusk"] .palm-back .frond{fill:var(--silhouette-back)}
html[data-theme="dusk"] .water{fill:var(--water-dusk)}
html[data-theme="dusk"] .ripple{fill:var(--water-shine)}

/* --- Lush Caravan --- */
html[data-theme="caravan"] .back{fill:var(--c-coral);opacity:.32}
html[data-theme="caravan"] .front{fill:var(--c-orange)}
html[data-theme="caravan"] .gate{fill:var(--c-sand-100)}
html[data-theme="caravan"] .trunk{fill:var(--c-olive)}
html[data-theme="caravan"] .frond{fill:var(--c-leaf-bright)}
html[data-theme="caravan"] .palm-back{opacity:.5}
html[data-theme="caravan"] .palm-back .trunk{fill:var(--c-mocha)}
html[data-theme="caravan"] .palm-back .frond{fill:var(--c-leaf-back)}
html[data-theme="caravan"] .palm-front .frond{fill:var(--c-leaf-deep)}
html[data-theme="caravan"] .water{fill:var(--c-water)}
html[data-theme="caravan"] .ripple{fill:var(--c-water-hi)}
html[data-theme="caravan"] .camel{fill:#3A2718}

/* ===================================================================
   MOTION. KEY RULE: an element with a transform="" attribute is NEVER
   also given a CSS transform animation (CSS transform replaces the
   attribute). Positioning sits on an outer <g>; the animation runs on an
   inner element with no transform attr.
   =================================================================== */
.crown{transform-box:fill-box;transform-origin:center bottom}
.p1 .crown{animation:swayS 5.4s ease-in-out infinite alternate}
.p2 .crown{animation:swayS 6.7s ease-in-out infinite alternate;animation-delay:-1.1s}
.p3 .crown{animation:swayS 6.1s ease-in-out infinite alternate;animation-delay:-2.6s}
.p4 .crown{animation:swayS 7.0s ease-in-out infinite alternate;animation-delay:-0.7s}
.p5 .crown{animation:swayL 5.8s ease-in-out infinite alternate;animation-delay:-1.8s}
.p6 .crown{animation:swayL 6.4s ease-in-out infinite alternate;animation-delay:-3.0s}
.p7 .crown{animation:swayL 5.5s ease-in-out infinite alternate;animation-delay:-1.3s}
.p8 .crown{animation:swayL 6.9s ease-in-out infinite alternate;animation-delay:-2.2s}
@keyframes swayS{from{transform:rotate(-2.2deg)}to{transform:rotate(2.2deg)}}
@keyframes swayL{from{transform:rotate(-3.6deg)}to{transform:rotate(3.6deg)}}

/* Golden: pulsing sun + slow rays + gull flock */
.sun-core{transform-box:fill-box;transform-origin:center;animation:pulse 6s ease-in-out infinite alternate}
@keyframes pulse{from{transform:scale(.97);opacity:.85}to{transform:scale(1.05);opacity:1}}
.rays{transform-box:fill-box;transform-origin:center;animation:spin 120s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* Gulls (golden + caravan) */
.flock{animation:fly 26s linear infinite}
@keyframes fly{from{transform:translate(-160px,30px)}to{transform:translate(1320px,-40px)}}
.gull{transform-box:fill-box;transform-origin:center;animation:flap 1.1s ease-in-out infinite alternate}
.gd1{animation-delay:-.3s}.gd2{animation-delay:-.6s}.gd3{animation-delay:-.15s}
@keyframes flap{from{transform:scaleY(.6)}to{transform:scaleY(1.2)}}

/* Dusk: stars + moon glow + lit gate flicker + fireflies */
.star{transform-box:fill-box;transform-origin:center;animation:twinkle 3s ease-in-out infinite}
.star:nth-child(2n){animation-duration:4.2s;animation-delay:-1s}
.star:nth-child(3n){animation-duration:2.4s;animation-delay:-.6s}
.star:nth-child(5n){animation-duration:5s;animation-delay:-2s}
@keyframes twinkle{0%,100%{opacity:.25;transform:scale(.7)}50%{opacity:1;transform:scale(1.2)}}
.moonglow{transform-box:fill-box;transform-origin:center;animation:breathe 7s ease-in-out infinite alternate}
@keyframes breathe{from{opacity:.35;transform:scale(.96)}to{opacity:.6;transform:scale(1.06)}}
html[data-theme="dusk"] .gate{animation:flicker 4s ease-in-out infinite alternate}
@keyframes flicker{0%{opacity:.8}45%{opacity:1}55%{opacity:.92}100%{opacity:.85}}
.firefly{transform-box:fill-box;transform-origin:center;animation:float 9s ease-in-out infinite,glow 2.5s ease-in-out infinite}
.firefly:nth-child(2){animation-delay:-2s,-.5s}
.firefly:nth-child(3){animation-delay:-4s,-1.2s}
.firefly:nth-child(4){animation-delay:-6s,-1.8s}
@keyframes float{0%{transform:translate(0,0)}25%{transform:translate(14px,-12px)}50%{transform:translate(-8px,-20px)}75%{transform:translate(10px,-8px)}100%{transform:translate(0,0)}}
@keyframes glow{0%,100%{opacity:.2}50%{opacity:1}}

/* Caravan: drifting clouds + walking camels */
.cloud{animation:drift linear infinite}
.c1{animation-duration:48s}
.c2{animation-duration:66s;animation-delay:-20s}
.c3{animation-duration:56s;animation-delay:-38s}
@keyframes drift{from{transform:translateX(-340px)}to{transform:translateX(1340px)}}
.caravan-anim{animation:walk 34s linear infinite}
@keyframes walk{from{transform:translateX(-220px)}to{transform:translateX(1320px)}}
.camel-bob{transform-box:fill-box;transform-origin:center bottom;animation:bob 1.1s ease-in-out infinite alternate}
.cb1{animation-delay:-.4s}.cb2{animation-delay:-.8s}
@keyframes bob{from{transform:translateY(0)}to{transform:translateY(-3px)}}

/* Water shimmer. Per-theme animation set as LONGHAND (no delay) so the
   nth-of-type delay ladder below is never reset by the shorthand. */
html[data-theme="golden"]  .ripple{animation-name:shimmer;animation-duration:4s;animation-timing-function:ease-in-out;animation-iteration-count:infinite;animation-direction:alternate}
html[data-theme="caravan"] .ripple{animation-name:shimmer;animation-duration:3.4s;animation-timing-function:ease-in-out;animation-iteration-count:infinite;animation-direction:alternate}
html[data-theme="dusk"]    .ripple{animation-name:shine;animation-duration:5s;animation-timing-function:ease-in-out;animation-iteration-count:infinite;animation-direction:alternate}
.ripple:nth-of-type(2){animation-delay:-.6s}
.ripple:nth-of-type(3){animation-delay:-1.2s}
.ripple:nth-of-type(4){animation-delay:-1.8s}
.ripple:nth-of-type(5){animation-delay:-2.4s}
.ripple:nth-of-type(6){animation-delay:-2.9s}
@keyframes shimmer{from{opacity:.18;transform:translateX(-6px)}to{opacity:.55;transform:translateX(6px)}}
@keyframes shine{from{opacity:.2;transform:translateX(-5px)}to{opacity:.6;transform:translateX(5px)}}

/* ===================================================================
   ADDED LIFE: reflections, reeds, chimney smoke, shooting star, motes,
   slow gliding birds. All opacity/transform only (GPU-cheap).
   =================================================================== */
/* Water reflection of sun/moon (golden + dusk) */
.reflect{transform-box:fill-box;transform-origin:center;animation:reflectShimmer 4.5s ease-in-out infinite alternate}
.reflect:nth-of-type(2){animation-delay:-.7s}
.reflect:nth-of-type(3){animation-delay:-1.4s}
.reflect:nth-of-type(4){animation-delay:-2.1s}
.reflect:nth-of-type(5){animation-delay:-2.8s}
@keyframes reflectShimmer{from{opacity:.12;transform:translateX(-4px) scaleX(.9)}to{opacity:.42;transform:translateX(4px) scaleX(1.05)}}

/* Waterline reeds (all themes; colour per theme) */
html[data-theme="golden"]  .reed{fill:var(--c-leaf-deep)}
html[data-theme="caravan"] .reed{fill:var(--c-leaf-deep)}
html[data-theme="dusk"]    .reed{fill:var(--silhouette)}
.reed-blade{transform-box:fill-box;transform-origin:center bottom;animation:reedSway 3.8s ease-in-out infinite alternate}
.rb1{animation-delay:-.6s}
.rb2{animation-delay:-1.5s;animation-duration:4.6s}
.rb3{animation-delay:-2.4s;animation-duration:3.2s}
@keyframes reedSway{from{transform:rotate(-5deg)}to{transform:rotate(5deg)}}

/* Chimney smoke (all themes) */
.smoke{transform-box:fill-box;transform-origin:center bottom;animation:smokeRise 7.5s ease-in-out infinite}
.sm2{animation-delay:-2.5s}
.sm3{animation-delay:-5s}
@keyframes smokeRise{0%{opacity:0;transform:translateY(0) scale(.5)}18%{opacity:.45}100%{opacity:0;transform:translateY(-92px) scale(1.7)}}

/* Shooting star (dusk) */
.shoot{animation:shoot 11s linear infinite}
@keyframes shoot{0%,90%{opacity:0;transform:translate(0,0)}91%{opacity:0;transform:translate(0,0)}92.5%{opacity:1}99%{opacity:0;transform:translate(232px,80px)}100%{opacity:0;transform:translate(232px,80px)}}

/* Dust motes in the light (golden + caravan) */
.mote{transform-box:fill-box;transform-origin:center;animation:moteFloat 15s ease-in-out infinite,moteGlow 6s ease-in-out infinite}
.m1{animation-delay:0s,-1s}
.m2{animation-delay:-4s,-2.5s}
.m3{animation-delay:-8s,-3.5s}
.m4{animation-delay:-11s,-4.5s}
@keyframes moteFloat{0%{transform:translate(0,0)}50%{transform:translate(16px,-24px)}100%{transform:translate(-6px,-46px)}}
@keyframes moteGlow{0%,100%{opacity:.1}50%{opacity:.38}}

/* Slow gliding birds (dusk) */
.flock-slow{animation:flySlow 58s linear infinite}
@keyframes flySlow{from{transform:translate(1300px,30px)}to{transform:translate(-220px,70px)}}

/* ===================================================================
   TIER 1: Atlas Mountains · gate lanterns
   =================================================================== */
/* Atlas Mountains (static layer, re-skinned per theme) */
html[data-theme="caravan"] .mtn-far{fill:#C7B49C}
html[data-theme="caravan"] .mtn-near{fill:#A98B6E}
html[data-theme="golden"]  .mtn-far{fill:#CC988B}
html[data-theme="golden"]  .mtn-near{fill:#A96C63}
html[data-theme="dusk"]    .mtn-far{fill:#3E2940}
html[data-theme="dusk"]    .mtn-near{fill:#2A1A2E}
html[data-theme="dusk"]    .mtn-snow{fill:#C9B6D8;opacity:.8}
html:not([data-theme="dusk"]) .mtn-snow{fill:#F4EEE7;opacity:.92}

/* Gate lanterns */
.lantern-chain{stroke-linecap:round}
html[data-theme="dusk"] .lantern-frame,html[data-theme="dusk"] .lantern-cap,html[data-theme="dusk"] .lantern-finial{fill:#241327}
html[data-theme="dusk"] .lantern-chain{stroke:#241327}
html:not([data-theme="dusk"]) .lantern-frame,html:not([data-theme="dusk"]) .lantern-cap,html:not([data-theme="dusk"]) .lantern-finial{fill:#4A2F1A}
html:not([data-theme="dusk"]) .lantern-chain{stroke:#4A2F1A}
.lantern-core{fill:#FFD98A}
html[data-theme="caravan"] .lantern-glow{opacity:.16}
html[data-theme="golden"]  .lantern-glow{opacity:.42}
html[data-theme="dusk"]    .lantern-glow{opacity:.95}
html[data-theme="caravan"] .lantern-core{opacity:.5}
html[data-theme="golden"]  .lantern-core{opacity:.8}
html[data-theme="dusk"]    .lantern-core{opacity:1}
.lantern-swing{transform-box:fill-box;transform-origin:center top;animation:lanternSway 5s ease-in-out infinite alternate}
.lantern.l2 .lantern-swing{animation-duration:6.2s;animation-delay:-1.4s}
@keyframes lanternSway{from{transform:rotate(-3deg)}to{transform:rotate(3deg)}}
.lantern-glow{transform-box:fill-box;transform-origin:center}
html[data-theme="dusk"] .lantern-glow{animation:lanternFlicker 3.6s ease-in-out infinite}
html[data-theme="dusk"] .lantern.l2 .lantern-glow{animation-delay:-1.1s}
html[data-theme="dusk"] .lantern-core{animation:coreFlicker 3.6s ease-in-out infinite}
@keyframes lanternFlicker{0%,100%{opacity:.7}45%{opacity:1}62%{opacity:.86}}
@keyframes coreFlicker{0%,100%{opacity:.86}50%{opacity:1}}

/* ===================================================================
   TIER 2: bougainvillea + drifting petals
   =================================================================== */
/* Bougainvillea blooms + leaves + vine (re-skinned per theme) */
html[data-theme="caravan"] .bloom{fill:#C9356F}
html[data-theme="golden"]  .bloom{fill:#B82E63}
html[data-theme="dusk"]    .bloom{fill:#7E3A66}
html[data-theme="caravan"] .bloom-hi{fill:#E86BA0}
html[data-theme="golden"]  .bloom-hi{fill:#D6488A}
html[data-theme="dusk"]    .bloom-hi{fill:#A65A8C}
html[data-theme="caravan"] .bloom-leaf{fill:#2F8F5B}
html[data-theme="golden"]  .bloom-leaf{fill:#1F6E45}
html[data-theme="dusk"]    .bloom-leaf{fill:#2A1A2E}
html[data-theme="caravan"] .vine{stroke:#2F8F5B}
html[data-theme="golden"]  .vine{stroke:#1F6E45}
html[data-theme="dusk"]    .vine{stroke:#2A1A2E}
.vine{fill:none;stroke-width:1.6;stroke-linecap:round}

/* Drifting bougainvillea petals */
html[data-theme="caravan"] .petal{fill:#D6488A}
html[data-theme="golden"]  .petal{fill:#C9356F}
html[data-theme="dusk"]    .petal{fill:#8A4A6E}
.petal{transform-box:fill-box;transform-origin:center;animation:petalFall 10s linear infinite}
.pt1{animation-duration:9s;animation-delay:0s}
.pt2{animation-duration:11.5s;animation-delay:-3s}
.pt3{animation-duration:8.5s;animation-delay:-5.5s}
.pt4{animation-duration:12s;animation-delay:-7s}
.pt5{animation-duration:10.5s;animation-delay:-2s}
.pt6{animation-duration:9.5s;animation-delay:-6s}
.pt2,.pt4,.pt6{animation-name:petalFallL}
@keyframes petalFall{0%{opacity:0;transform:translate(0,0) rotate(0deg)}12%{opacity:.9}86%{opacity:.9}100%{opacity:0;transform:translate(36px,150px) rotate(240deg)}}
@keyframes petalFallL{0%{opacity:0;transform:translate(0,0) rotate(0deg)}12%{opacity:.9}86%{opacity:.9}100%{opacity:0;transform:translate(-32px,150px) rotate(-230deg)}}

/* ===================================================================
   REDUCED MOTION
   The whole scene's motion is wired to a single kill switch. (Page
   layout, hero content and the entrance animation live inline in each
   page's own <style>, not here.)
   =================================================================== */
@media (prefers-reduced-motion:reduce){
  .crown,.sun-core,.rays,.flock,.gull,.star,.moonglow,.gate,.firefly,
  .cloud,.caravan-anim,.camel-bob,.ripple,
  .reflect,.reed-blade,.smoke,.shoot,.mote,.flock-slow,
  .lantern-swing,.lantern-glow,.lantern-core,.petal{animation:none}
}
