/* =====================================================================
   Fit the Kasbah - oasis scene (shared background layer)
   Last edited: 25-06-2026

   THE BACKGROUND IS OASIS V3. This file is a wholesale transplant of the
   scene CSS from claude's-outputs/oasis-scenes/oasis-v3.html. Do not
   "improve" it piecemeal - if the scene changes, re-port from v3.

   Only two deltas from raw v3, both to fit the live site:
     1. v3's demo .scene box -> the live full-bleed .scene-bg wrapper.
     2. v3's :root palette is scoped to .scene-bg so the rest of the
        site keeps its own styles.css tokens.

   CACHE-BUST: bump ?v= on the oasis.css <link> in index/booking/payment
   whenever this file changes. Currently at v=3.
   ===================================================================== */

/* ---- full-bleed wrapper (live-site fix, replaces v3's demo .scene box) ---- */
.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:oklch(91.99% 0.0322 208.75)}
html[data-theme="golden"]  .scene-bg{background:oklch(61.69% 0.0703 299.29)}
html[data-theme="dusk"]    .scene-bg{background:oklch(24.74% 0.0875 293.00)}

@media (max-width:759px){
  .scene-bg{align-items:center}
  .scene-bg svg{width:auto; height:34vh; max-width:none}
}

/* ---- v3 scene palette, scoped to the scene so the rest of the site keeps styles.css ---- */
.scene-bg{
  /* full palette (union of all three scenes) */
  --c-orange:oklch(60.59% 0.1768 40.17); --c-orange-deep:oklch(53.06% 0.1612 40.17); --c-coral:oklch(67.97% 0.1445 40.17); --c-ink:oklch(18.38% 0.0052 67.50);
  --c-sand-100:oklch(95.19% 0.0114 71.42); --c-sand-300:oklch(75.38% 0.0636 71.42); --c-mocha:oklch(56.80% 0.0418 41.09); --c-olive:oklch(42.25% 0.0522 71.42); --c-line:oklch(89.28% 0.0168 71.42);
  --c-leaf:oklch(58.05% 0.1201 155.64); --c-leaf-deep:oklch(47.98% 0.1008 155.64); --c-leaf-back:oklch(69.55% 0.0881 155.64); --c-leaf-bright:oklch(65.47% 0.1408 155.64);
  --c-water:oklch(55.20% 0.0905 222.00); --c-water-hi:oklch(76.00% 0.0760 215.00);
  --silhouette:oklch(24.76% 0.0432 319.44); --silhouette-back:oklch(31.58% 0.0490 319.44); --gate-glow:oklch(77.94% 0.1280 61.07);
  --water-dusk:oklch(30.35% 0.0332 250.67); --water-shine:oklch(68.41% 0.1107 64.06);
  --font:'Poppins',system-ui,sans-serif;
}

/* ---- v3 scene rules, verbatim ---- */
/* =====================================================================
   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:oklch(29.16% 0.0381 58.83)}

/* =====================================================================
   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:rise 7.5s ease-in-out infinite}
.sm2{animation-delay:-2.5s}
.sm3{animation-delay:-5s}
@keyframes rise{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:oklch(77.97% 0.0396 65.67)}
html[data-theme="caravan"] .mtn-near{fill:oklch(65.71% 0.0548 65.67)}
html[data-theme="golden"]  .mtn-far{fill:oklch(72.56% 0.0657 28.82)}
html[data-theme="golden"]  .mtn-near{fill:oklch(59.42% 0.0799 28.82)}
html[data-theme="dusk"]    .mtn-far{fill:oklch(31.58% 0.0490 319.44)}
html[data-theme="dusk"]    .mtn-near{fill:oklch(24.76% 0.0432 319.44)}
html[data-theme="dusk"]    .mtn-snow{fill:oklch(80.30% 0.0515 310.21);opacity:.8}
html:not([data-theme="dusk"]) .mtn-snow{fill:oklch(95.19% 0.0114 71.42);opacity:.92}
.mountains{filter:url(#recede)}

/* 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:oklch(21.98% 0.0449 321.42)}
html[data-theme="dusk"] .lantern-chain{stroke:oklch(21.98% 0.0449 321.42)}
html:not([data-theme="dusk"]) .lantern-frame,html:not([data-theme="dusk"]) .lantern-cap,html:not([data-theme="dusk"]) .lantern-finial{fill:oklch(33.27% 0.0516 57.65)}
html:not([data-theme="dusk"]) .lantern-chain{stroke:oklch(33.27% 0.0516 57.65)}
.lantern-core{fill:oklch(90.06% 0.1064 84.68)}
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:oklch(56.88% 0.1887 1.67)}
html[data-theme="golden"]  .bloom{fill:oklch(53.04% 0.1778 2.43)}
html[data-theme="dusk"]    .bloom{fill:oklch(45.26% 0.1095 342.83)}
html[data-theme="caravan"] .bloom-hi{fill:oklch(69.24% 0.1641 355.63)}
html[data-theme="golden"]  .bloom-hi{fill:oklch(61.68% 0.1873 355.40)}
html[data-theme="dusk"]    .bloom-hi{fill:oklch(57.25% 0.1176 341.54)}
html[data-theme="caravan"] .bloom-leaf{fill:oklch(58.05% 0.1201 155.64)}
html[data-theme="golden"]  .bloom-leaf{fill:oklch(47.98% 0.1008 155.64)}
html[data-theme="dusk"]    .bloom-leaf{fill:oklch(24.76% 0.0432 319.44)}
html[data-theme="caravan"] .vine{stroke:oklch(58.05% 0.1201 155.64)}
html[data-theme="golden"]  .vine{stroke:oklch(47.98% 0.1008 155.64)}
html[data-theme="dusk"]    .vine{stroke:oklch(24.76% 0.0432 319.44)}
.vine{fill:none;stroke-width:1.6;stroke-linecap:round}

/* Drifting bougainvillea petals */
html[data-theme="caravan"] .petal{fill:oklch(61.68% 0.1873 355.40)}
html[data-theme="golden"]  .petal{fill:oklch(56.88% 0.1887 1.67)}
html[data-theme="dusk"]    .petal{fill:oklch(49.80% 0.0980 346.40)}
.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)}}

@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}
}