/* =========================================================
   Anomaly9 visual theme system
   Dark is the default identity. "Desert daylight" is a
   deliberate alternate world: blue sky, sand / mountain
   surfaces and living green accents.
   ========================================================= */

html{
  color-scheme:dark;
}

html[data-visual-theme="desert"]{
  color-scheme:light;
  --bg:#EDC26E;
  --bg-2:#F6D788;
  --surface:rgba(255,237,176,.80);
  --surface-2:rgba(240,198,99,.88);
  --line:rgba(69,76,49,.24);
  --text:#202920;
  --text-muted:#4E5A4D;
  --text-dim:#68705A;
  --accent:#D63E67;
  --accent-dim:rgba(173,55,78,.14);
  --gold:#9D6715;
  --cursor-green:#1B9B58;
  --desert-continuation:#EFC978;
  --desert-continuation-soft:#F4D68D;
}

/* ---------- compact light switch beside the wordmark ---------- */
.brand-lockup{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:max-content;
}

.theme-toggle{
  position:relative;
  width:36px;
  height:36px;
  flex:0 0 36px;
  display:grid;
  place-items:center;
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(13,23,18,.54);
  color:var(--text-muted);
  cursor:pointer;
  overflow:visible;
  transition:
    color .25s ease,
    background .25s ease,
    border-color .25s ease,
    box-shadow .3s ease,
    transform .18s ease;
}
.theme-toggle:hover{
  color:var(--text);
  border-color:var(--text-muted);
  transform:translateY(-1px);
}
.theme-toggle:active{ transform:translateY(0) scale(.96); }
.theme-toggle:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

.theme-toggle svg{
  width:19px;
  height:19px;
  overflow:visible;
}
.theme-toggle .bulb-shell,
.theme-toggle .bulb-base,
.theme-toggle .bulb-rays{
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
  transform-origin:12px 12px;
}
.theme-toggle .bulb-rays{
  opacity:.24;
  transform:scale(.82);
  transition:opacity .3s ease, transform .38s cubic-bezier(.2,.8,.2,1);
}
.theme-toggle .bulb-glow{
  fill:currentColor;
  opacity:0;
  transform-origin:12px 10px;
  transform:scale(.55);
  transition:opacity .28s ease, transform .4s cubic-bezier(.2,.9,.2,1);
}

html[data-visual-theme="desert"] .theme-toggle{
  color:#9D6715;
  background:rgba(255,235,151,.78);
  border-color:rgba(116,83,24,.28);
  box-shadow:0 0 0 5px rgba(255,222,105,.11), 0 0 22px rgba(255,210,58,.24);
}
html[data-visual-theme="desert"] .theme-toggle .bulb-rays{
  opacity:1;
  transform:scale(1);
}
html[data-visual-theme="desert"] .theme-toggle .bulb-glow{
  opacity:.18;
  transform:scale(1);
}

/* ---------- daylight world ---------- */
html[data-visual-theme="desert"] body{
  background:
    linear-gradient(
      180deg,
      #69BDEA 0,
      #9ED7F0 310px,
      #DCEFF5 520px,
      #F6E0A2 710px,
      #EFCA77 930px,
      #EDC26E 100%
    );
  color:var(--text);
}

html[data-visual-theme="desert"] body::before{
  background-image:
    radial-gradient(circle at 16px 14px, rgba(76,91,58,.14) 0 1px, transparent 1.4px),
    radial-gradient(circle at 48px 40px, rgba(255,255,255,.28) 0 1px, transparent 1.5px);
  background-size:64px 64px;
  opacity:.20;
}

html[data-visual-theme="desert"] header.scrolled{
  background:rgba(245,214,136,.82);
  border-bottom-color:rgba(67,76,51,.22);
  box-shadow:0 10px 36px rgba(86,69,29,.08);
}

html[data-visual-theme="desert"] .logo .logo-nine{
  color:#C23A5E;
}

html[data-visual-theme="desert"] .service-card,
html[data-visual-theme="desert"] .prax9-card,
html[data-visual-theme="desert"] .principle{
  box-shadow:0 18px 42px rgba(95,72,27,.07);
}

html[data-visual-theme="desert"] .contact-form{
  background:linear-gradient(180deg, rgba(255,238,183,.84), rgba(225,177,83,.80));
  box-shadow:0 24px 70px rgba(87,63,23,.10);
}
html[data-visual-theme="desert"] .contact-field input,
html[data-visual-theme="desert"] .contact-field textarea{
  background:rgba(255,248,220,.64);
}
html[data-visual-theme="desert"] .contact-field input:hover,
html[data-visual-theme="desert"] .contact-field textarea:hover,
html[data-visual-theme="desert"] .contact-field input:focus,
html[data-visual-theme="desert"] .contact-field textarea:focus{
  background:rgba(255,251,232,.86);
}
html[data-visual-theme="desert"] .contact-status{
  background:rgba(255,246,212,.63);
}
html[data-visual-theme="desert"] .contact-status[data-state="success"]{
  background:rgba(54,143,83,.13);
}
html[data-visual-theme="desert"] .contact-status[data-state="error"]{
  background:rgba(166,56,83,.10);
}
html[data-visual-theme="desert"] .contact-field-error{ color:#9F294C !important; }
html[data-visual-theme="desert"] .contact-field input[aria-invalid="true"],
html[data-visual-theme="desert"] .contact-field textarea[aria-invalid="true"]{
  border-color:#C62F5B;
  box-shadow:0 0 0 3px rgba(198,47,91,.10);
}

html[data-visual-theme="desert"] #tv-snow{
  opacity:.035;
  mix-blend-mode:multiply;
  filter:contrast(1.08) brightness(.95);
}
html[data-visual-theme="desert"] #glitch-overlay{
  opacity:.022;
  mix-blend-mode:multiply;
  background:repeating-linear-gradient(
    0deg,
    rgba(21,105,142,.08) 0,
    rgba(21,105,142,.08) 1px,
    transparent 1px,
    transparent 4px
  );
}
html[data-visual-theme="desert"] #cursor-trail{ mix-blend-mode:multiply; }

/* ---------- CSS-only landscape behind the first viewport ---------- */
#theme-landscape{
  position:absolute;
  inset:0 0 auto 0;
  height:920px;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
  opacity:0;
  visibility:hidden;
  transition:opacity .45s ease, visibility 0s linear .45s;
}
html[data-visual-theme="desert"] #theme-landscape{
  opacity:1;
  visibility:visible;
  transition:opacity .55s ease, visibility 0s;
}

.theme-sun{
  position:absolute;
  top:118px;
  inset-inline-start:8%;
  width:88px;
  aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(circle at 40% 38%, #FFF7CA 0 12%, #FFE47F 46%, #F4BC35 100%);
  box-shadow:0 0 0 18px rgba(255,224,115,.10), 0 0 80px rgba(255,217,80,.26);
}
.theme-cloud{
  position:absolute;
  height:18px;
  border-radius:999px;
  background:rgba(255,255,255,.30);
  filter:blur(.2px);
}
.theme-cloud::before,
.theme-cloud::after{
  content:"";
  position:absolute;
  bottom:0;
  border-radius:50%;
  background:inherit;
}
.theme-cloud::before{ width:35px; height:35px; left:18px; }
.theme-cloud::after{ width:28px; height:28px; right:20px; }
.theme-cloud-a{ top:210px; inset-inline-end:14%; width:110px; opacity:.72; }
.theme-cloud-b{ top:290px; inset-inline-start:28%; width:78px; opacity:.48; transform:scale(.78); }

/* Extra daytime cloud field. Hidden on mobile so the compact composition stays
   unchanged; desktop gets several soft, differently-sized clouds across the
   previously empty sky. Logical inline positions mirror with RTL/LTR. */
.theme-cloud-c,
.theme-cloud-d,
.theme-cloud-e,
.theme-cloud-f{ display:none; }

@media (min-width:861px){
  .theme-cloud-c{
    display:block;
    top:188px;
    inset-inline-start:7%;
    width:128px;
    --day-cloud-opacity:.56;
    transform:scale(.92);
  }
  .theme-cloud-d{
    display:block;
    top:325px;
    inset-inline-start:4.5%;
    width:88px;
    --day-cloud-opacity:.38;
    transform:scale(.72);
  }
  .theme-cloud-e{
    display:block;
    top:150px;
    inset-inline-start:44%;
    width:72px;
    --day-cloud-opacity:.30;
    transform:scale(.64);
  }
  .theme-cloud-f{
    display:block;
    top:370px;
    inset-inline-end:34%;
    width:96px;
    --day-cloud-opacity:.34;
    transform:scale(.76);
  }
}

.theme-mountain{
  position:absolute;
  left:-7vw;
  right:-7vw;
  transform-origin:50% 100%;
  filter:drop-shadow(0 -10px 24px rgba(103,75,26,.05));
}
.theme-mountain-back{
  height:360px;
  bottom:165px;
  background:linear-gradient(180deg, #C38F3E 0%, #B2722B 56%, var(--desert-continuation) 100%);
  clip-path:polygon(0 80%, 8% 62%, 18% 72%, 29% 42%, 38% 58%, 49% 30%, 61% 54%, 71% 38%, 82% 66%, 91% 49%, 100% 70%, 100% 100%, 0 100%);
  opacity:.60;
}
.theme-mountain-mid{
  height:330px;
  bottom:72px;
  background:linear-gradient(180deg, #CF9843 0%, #BB6F26 54%, var(--desert-continuation) 100%);
  clip-path:polygon(0 74%, 10% 58%, 17% 65%, 28% 28%, 38% 58%, 47% 45%, 57% 69%, 68% 32%, 79% 56%, 90% 38%, 100% 65%, 100% 100%, 0 100%);
  opacity:.78;
}
.theme-mountain-front{
  height:270px;
  bottom:-22px;
  background:linear-gradient(180deg, #DAA84D 0%, #C98331 60%, var(--desert-continuation-soft) 100%);
  clip-path:polygon(0 64%, 11% 42%, 22% 58%, 32% 32%, 43% 56%, 53% 39%, 66% 64%, 77% 36%, 89% 56%, 100% 44%, 100% 100%, 0 100%);
  opacity:.92;
}
.theme-mountain-front::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(122deg, transparent 0 42%, rgba(255,239,184,.24) 43% 49%, transparent 50%),
    linear-gradient(242deg, transparent 0 54%, rgba(111,69,24,.10) 55% 61%, transparent 62%);
  mix-blend-mode:soft-light;
}

/* ---------- grass: grows only in daylight ---------- */
.grass-tuft{
  --grass-x:50%;
  position:absolute;
  left:var(--grass-x);
  bottom:-2px;
  width:34px;
  height:28px;
  z-index:4;
  opacity:0;
  transform:translateX(-50%) scaleY(.05);
  transform-origin:50% 100%;
  pointer-events:none;
  transition:opacity .26s ease, transform .52s cubic-bezier(.2,.85,.22,1);
  transition-delay:var(--grass-delay, 0ms);
}
.grass-tuft::before,
.grass-tuft::after,
.grass-tuft span{
  content:"";
  position:absolute;
  left:50%;
  bottom:0;
  width:3px;
  height:24px;
  border-radius:100% 100% 25% 25%;
  background:linear-gradient(180deg, #53B75D, #247A42);
  transform-origin:50% 100%;
  box-shadow:0 7px 8px rgba(33,98,52,.12);
}
.grass-tuft span{ transform:translateX(-50%) rotate(-3deg); height:27px; }
.grass-tuft::before{ transform:translateX(-8px) rotate(-28deg); height:22px; }
.grass-tuft::after{ transform:translateX(6px) rotate(28deg); height:20px; }
html[data-visual-theme="desert"] .grass-tuft{
  opacity:.82;
  transform:translateX(-50%) scaleY(1);
}

/* ---------- View Transition: actual theme paint ---------- */
::view-transition-group(root){ animation:none !important; }
::view-transition-image-pair(root){ isolation:isolate; }
::view-transition-old(root),
::view-transition-new(root){
  animation:none !important;
  mix-blend-mode:normal;
}
::view-transition-old(root){ z-index:1; }
::view-transition-new(root){ z-index:2; }

#theme-paint-front{
  position:fixed;
  inset:0;
  width:100vw;
  height:100vh;
  z-index:10050;
  pointer-events:none;
  /* The ring can become several thousand pixels wide. Clipping its offscreen
     blur to the viewport prevents a huge unnecessary raster surface. */
  overflow:hidden;
  opacity:0;
  will-change:opacity;
}
#theme-paint-front circle{
  fill:none;
  vector-effect:non-scaling-stroke;
  transform-box:fill-box;
  transform-origin:center;
  will-change:transform;
}
#theme-front-blur{
  stroke:var(--theme-front-glow, #FFE991);
  stroke-width:46;
  opacity:.30;
  filter:blur(18px);
}
#theme-front-glow{
  stroke:var(--theme-front-glow, #FFE991);
  stroke-width:16;
  opacity:.76;
  filter:blur(5px);
}
#theme-front-core{
  stroke:var(--theme-front-core, #FFF7CD);
  stroke-width:3.2;
  opacity:1;
}

#theme-rear-flare{
  position:fixed;
  z-index:10045;
  width:min(54vmax, 760px);
  height:122px;
  pointer-events:none;
  opacity:0;
  transform-origin:50% 50%;
  will-change:transform, opacity;
}
#theme-rear-flare .flare-haze,
#theme-rear-flare .flare-glow,
#theme-rear-flare .flare-core{
  position:absolute;
  left:0;
  right:0;
  top:50%;
  transform:translateY(-50%);
  border-radius:999px;
}
#theme-rear-flare .flare-haze{
  height:90px;
  filter:blur(26px);
  background:linear-gradient(90deg, transparent, var(--theme-flare-soft, rgba(255,224,110,.25)) 34%, var(--theme-flare-soft, rgba(255,224,110,.25)) 66%, transparent);
}
#theme-rear-flare .flare-glow{
  height:23px;
  filter:blur(7px);
  background:linear-gradient(90deg, transparent 0%, var(--theme-flare-mid, rgba(255,231,142,.16)) 18%, var(--theme-front-glow, #FFE991) 48%, var(--theme-front-glow, #FFE991) 52%, var(--theme-flare-mid, rgba(255,231,142,.16)) 82%, transparent 100%);
}
#theme-rear-flare .flare-core{
  height:3px;
  background:linear-gradient(90deg, transparent, var(--theme-front-core, #FFF7CD) 28% 72%, transparent);
  box-shadow:0 0 12px var(--theme-front-glow, #FFE991), 0 0 30px var(--theme-flare-soft, rgba(255,224,110,.25));
}

html.theme-transitioning,
html.theme-transitioning body{ overflow-x:hidden; }

@media (max-width:720px){
  .brand-lockup{ gap:7px; }
  .theme-toggle{ width:32px; height:32px; flex-basis:32px; }
  .theme-toggle svg{ width:17px; height:17px; }
  .theme-sun{ width:64px; top:102px; inset-inline-start:7%; }
  #theme-landscape{ height:760px; }
  .theme-mountain-back{ bottom:130px; }
  .theme-mountain-mid{ bottom:52px; }
}

@media (prefers-reduced-motion:reduce){
  #theme-paint-front,
  #theme-rear-flare{ display:none; }
  .grass-tuft{ transition:none; }
  #theme-landscape{ transition:none; }
}


/* =========================================================
   v9 — irresistible light switch
   Stronger click affordance without turning the header into
   a permanent CTA. The prompt appears only on hover/focus.
   ========================================================= */
.theme-toggle{
  width:44px;
  height:44px;
  flex-basis:44px;
  color:#FFE071;
  border-color:rgba(255,224,113,.48);
  background:
    radial-gradient(circle at 36% 30%, rgba(255,239,170,.16), transparent 34%),
    linear-gradient(145deg, rgba(31,43,35,.96), rgba(8,16,12,.96));
  box-shadow:
    0 0 0 1px rgba(255,226,121,.05) inset,
    0 0 0 4px rgba(255,220,86,.035),
    0 5px 18px rgba(0,0,0,.26),
    0 0 22px rgba(255,204,55,.13);
  isolation:isolate;
}

.theme-toggle::before{
  content:"";
  position:absolute;
  inset:-6px;
  z-index:-1;
  border:1px solid rgba(255,218,82,.46);
  border-radius:inherit;
  opacity:.18;
  transform:scale(.86);
  pointer-events:none;
  animation:theme-toggle-breathe 2.9s cubic-bezier(.4,0,.2,1) infinite;
}

.theme-tooltip{
  position:absolute;
  top:calc(100% + 12px);
  left:50%;
  z-index:120;
  display:flex;
  align-items:center;
  gap:10px;
  min-width:max-content;
  max-width:260px;
  padding:8px 12px;
  border:1px solid rgba(255,222,106,.22);
  border-radius:14px;
  background:
    linear-gradient(180deg, rgba(22,31,25,.985), rgba(8,14,10,.97));
  color:#F6F2E7;
  box-shadow:0 12px 32px rgba(0,0,0,.34), 0 0 18px rgba(255,210,65,.08);
  font-family:'Assistant',sans-serif;
  font-size:12px;
  font-weight:600;
  line-height:1.2;
  letter-spacing:0;
  white-space:nowrap;
  opacity:0;
  visibility:hidden;
  transform:translate(-50%,-5px) scale(.96);
  transform-origin:50% 0;
  pointer-events:none;
  transition:opacity .18s ease, transform .2s ease, visibility .18s ease;
}
.theme-tooltip::before{
  content:"";
  position:absolute;
  top:-6px;
  left:50%;
  width:12px;
  height:12px;
  background:inherit;
  border-left:1px solid rgba(255,222,106,.22);
  border-top:1px solid rgba(255,222,106,.22);
  transform:translateX(-50%) rotate(45deg);
  border-top-left-radius:3px;
}
.theme-tooltip-art{
  position:relative;
  width:34px;
  height:34px;
  flex:0 0 34px;
  border-radius:12px;
  overflow:hidden;
  background:linear-gradient(180deg, #F1D88A 0%, #D4A95D 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.14),
    0 3px 10px rgba(0,0,0,.22);
}
.theme-tooltip-haze{
  position:absolute;
  inset:auto -4px -7px -4px;
  height:14px;
  border-radius:999px 999px 0 0;
  background:linear-gradient(180deg, rgba(255,245,202,.0), rgba(255,231,146,.85));
  opacity:.7;
}
.theme-tooltip-orb{
  position:absolute;
  top:7px;
  right:7px;
  width:12px;
  height:12px;
  border-radius:50%;
  background:radial-gradient(circle at 35% 35%, #FFF6B6 0%, #FFD963 48%, #F3A72A 100%);
  box-shadow:0 0 12px rgba(255,211,87,.7);
}
.theme-tooltip-star{
  position:absolute;
  width:3px;
  height:3px;
  border-radius:50%;
  background:#FFF3C8;
  box-shadow:0 0 6px rgba(255,244,194,.75);
  opacity:0;
}
.theme-tooltip-star-a{ top:9px; left:9px; }
.theme-tooltip-star-b{ top:14px; left:15px; }
.theme-tooltip-copy{
  display:flex;
  flex-direction:column;
  gap:2px;
  unicode-bidi:plaintext;
}
.theme-tooltip-label{
  color:#fff7dd;
}
.theme-tooltip-meta{
  color:rgba(255,237,188,.68);
  font-size:10px;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
}
html[dir="rtl"] .theme-tooltip{ direction:rtl; }
html[dir="ltr"] .theme-tooltip{ direction:ltr; }

.theme-toggle:hover,
.theme-toggle:focus-visible{
  color:#FFF0A6;
  border-color:rgba(255,232,143,.78);
  transform:translateY(-2px) scale(1.055);
  box-shadow:
    0 0 0 1px rgba(255,240,170,.10) inset,
    0 0 0 5px rgba(255,218,74,.075),
    0 8px 24px rgba(0,0,0,.30),
    0 0 34px rgba(255,205,49,.29);
}

.theme-toggle:hover .theme-tooltip,
.theme-toggle:focus-visible .theme-tooltip{
  opacity:1;
  visibility:visible;
  transform:translate(-50%,0) scale(1);
}

.theme-toggle:hover::before,
.theme-toggle:focus-visible::before{
  opacity:.68;
  transform:scale(1.08);
  animation-play-state:paused;
}

.theme-toggle svg{
  width:22px;
  height:22px;
  filter:drop-shadow(0 0 5px rgba(255,218,82,.18));
  transition:filter .25s ease, transform .25s cubic-bezier(.2,.85,.2,1);
}

.theme-toggle:hover svg,
.theme-toggle:focus-visible svg{
  transform:scale(1.08) rotate(-3deg);
  filter:drop-shadow(0 0 8px rgba(255,226,115,.48));
}

/* Tooltip art previews the TARGET theme, not the current one. */
.theme-toggle:not(.is-lit) .theme-tooltip-art{
  background:linear-gradient(180deg, #D5EFFA 0%, #A9DCF6 54%, #86C46A 100%);
}
.theme-toggle:not(.is-lit) .theme-tooltip-orb{
  top:6px;
  right:7px;
  width:13px;
  height:13px;
  background:radial-gradient(circle at 35% 35%, #FFF6B6 0%, #FFD963 48%, #F3A72A 100%);
  box-shadow:0 0 12px rgba(255,211,87,.7);
}
.theme-toggle:not(.is-lit) .theme-tooltip-star{ opacity:0; }
.theme-toggle:not(.is-lit) .theme-tooltip-haze{
  background:linear-gradient(180deg, rgba(255,245,202,.0), rgba(244,205,115,.95));
  opacity:.72;
}

.theme-toggle.is-lit .theme-tooltip-art{
  background:linear-gradient(180deg, #1F3129 0%, #101B16 56%, #080F0B 100%);
}
.theme-toggle.is-lit .theme-tooltip-orb{
  top:7px;
  right:8px;
  width:12px;
  height:12px;
  background:#FFF1B9;
  box-shadow:none;
}
.theme-toggle.is-lit .theme-tooltip-orb::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  background:#1A271F;
  transform:translate(4px,-1px) scale(.95);
}
.theme-toggle.is-lit .theme-tooltip-star{ opacity:1; }
.theme-toggle.is-lit .theme-tooltip-haze{
  background:linear-gradient(180deg, rgba(12,18,14,0), rgba(18,28,21,.96));
  opacity:.95;
}

html[data-visual-theme="desert"] .theme-tooltip{
  background:rgba(30,43,34,.97);
  border-color:rgba(255,229,139,.20);
}
html[data-visual-theme="desert"] .theme-tooltip::before{
  border-left-color:rgba(255,229,139,.20);
  border-top-color:rgba(255,229,139,.20);
}

@media (max-width:720px){
  .brand-lockup{ gap:8px; }
  .theme-toggle{ width:39px; height:39px; flex-basis:39px; }
  .theme-toggle svg{ width:20px; height:20px; }
  .theme-tooltip{
    max-width:210px;
    white-space:normal;
    text-align:start;
  }
}
@media (prefers-reduced-motion:reduce){
  .theme-toggle::before,
  .theme-toggle .bulb-rays,
  .theme-toggle .bulb-glow{ animation:none !important; }
}

/* =========================================================
   v11 — slower, taller edge-grown vegetation
   The plant container now only settles into place. Individual
   blades / stems grow upward on their own staggered timelines.
   Several clusters live at the extreme viewport edges.
   ========================================================= */
.desert-plant{
  --plant-x:50%;
  --plant-ground-bottom:-4px;
  --plant-scale:1;
  --plant-mobile-scale:.84;
  --plant-delay:0ms;
  --plant-grow:1.8s;
  --plant-stem-grow:1.48s;
  --plant-leaf-start:6.5s;
  --plant-flower-start:11s;
  --plant-shadow-start:.7s;
  --plant-wind-start:3s;
  --plant-sway:5s;
  position:absolute;
  left:var(--plant-x);
  bottom:-4px;
  z-index:5;
  width:76px;
  height:90px;
  pointer-events:none;
  opacity:0;
  transform:translateX(-50%) translateY(15px) scale(var(--plant-scale));
  transform-origin:50% 100%;
  filter:saturate(.90);
  transition:
    opacity 1.8s ease var(--plant-delay),
    transform 2.6s cubic-bezier(.18,.72,.16,1) var(--plant-delay),
    filter 1.8s ease var(--plant-delay);
  will-change:transform, opacity;
}

/* v35 — opening-screen plants follow the actual dune contour instead of the
   hero section's flat DOM boundary. */
.desert-plant.plant-terrain-rooted{
  bottom:var(--plant-ground-bottom);
}

/* v13 — three deliberate vegetation scales. The classes live in CSS so
   size remains a visual concern while JS only decides which class is used. */
.desert-plant.plant-size-small{
  --plant-scale:.68;
  --plant-mobile-scale:.58;
  z-index:4;
}
.desert-plant.plant-size-medium{
  --plant-scale:1;
  --plant-mobile-scale:.84;
  z-index:5;
}
.desert-plant.plant-size-large{
  --plant-scale:1.34;
  --plant-mobile-scale:1.12;
  z-index:6;
}

html[data-visual-theme="desert"].plants-awake .desert-plant.plant-visible{
  opacity:.97;
  transform:translateX(-50%) translateY(0) scale(var(--plant-scale));
  filter:saturate(1.08);
}

/* Plants at the page edges lean subtly inward, as if the landscape
   continues beyond the viewport rather than ending at the content grid. */
.desert-plant.plant-edge-left{ transform-origin:0 100%; }
.desert-plant.plant-edge-right{ transform-origin:100% 100%; }
html[data-visual-theme="desert"].plants-awake .plant-edge-left.plant-visible{
  transform:translateX(-38%) translateY(0) scale(var(--plant-scale)) rotate(1.4deg);
}
html[data-visual-theme="desert"].plants-awake .plant-edge-right.plant-visible{
  transform:translateX(-62%) translateY(0) scale(var(--plant-scale)) rotate(-1.4deg);
}

/* taller wild grass */
.desert-plant-grass{
  width:66px;
  height:82px;
}
.desert-plant-grass .blade{
  position:absolute;
  left:50%;
  bottom:0;
  width:3px;
  border-radius:95% 95% 18% 18%;
  background:linear-gradient(180deg,#83D66A 0%,#49A957 46%,#23723F 100%);
  box-shadow:0 9px 12px rgba(44,108,55,.12);
  transform-origin:50% 100%;
  scale:1 0;
  opacity:.18;
  transition:
    scale var(--plant-grow) cubic-bezier(.16,.74,.16,1),
    opacity .55s ease;
  will-change:scale;
}
.desert-plant-grass .b1{ height:48px; transform:translateX(-25px) rotate(-34deg); transition-delay:calc(var(--plant-delay) + 0ms); }
.desert-plant-grass .b2{ height:64px; transform:translateX(-18px) rotate(-23deg); transition-delay:calc(var(--plant-delay) + 120ms); }
.desert-plant-grass .b3{ height:72px; transform:translateX(-10px) rotate(-11deg); transition-delay:calc(var(--plant-delay) + 240ms); }
.desert-plant-grass .b4{ height:80px; transform:translateX(-1px) rotate(1deg); transition-delay:calc(var(--plant-delay) + 360ms); }
.desert-plant-grass .b5{ height:69px; transform:translateX(9px) rotate(14deg); transition-delay:calc(var(--plant-delay) + 470ms); }
.desert-plant-grass .b6{ height:58px; transform:translateX(18px) rotate(27deg); transition-delay:calc(var(--plant-delay) + 580ms); }
.desert-plant-grass .b7{ height:45px; transform:translateX(25px) rotate(38deg); transition-delay:calc(var(--plant-delay) + 690ms); }
html[data-visual-theme="desert"].plants-awake .desert-plant-grass.plant-visible .blade{
  scale:1 1;
  opacity:1;
}

/* taller shrubs: stems emerge first, leaves unfold afterwards */
.desert-plant-shrub,
.desert-plant-flower{
  width:78px;
  height:84px;
}
.shrub-stem{
  position:absolute;
  left:50%;
  bottom:2px;
  width:3px;
  border-radius:999px;
  background:linear-gradient(180deg,#57984C,#37763B 58%,#8B6B38 100%);
  transform-origin:50% 100%;
  scale:1 0;
  opacity:.3;
  transition:
    scale var(--plant-stem-grow) cubic-bezier(.17,.73,.18,1),
    opacity .45s ease;
}
.stem-a{ transform:translateX(-1px) rotate(-2deg); height:70px; transition-delay:calc(var(--plant-delay) + 80ms); }
.stem-b{ transform:translateX(-10px) rotate(-22deg); height:57px; transition-delay:calc(var(--plant-delay) + 210ms); }
.stem-c{ transform:translateX(9px) rotate(24deg); height:60px; transition-delay:calc(var(--plant-delay) + 330ms); }
html[data-visual-theme="desert"].plants-awake .desert-plant.plant-visible .shrub-stem{
  scale:1 1;
  opacity:1;
}

.shrub-leaf{
  position:absolute;
  width:21px;
  height:11px;
  border-radius:100% 12% 100% 12%;
  background:linear-gradient(135deg,#7ACB64,#2E8B4C);
  box-shadow:0 4px 8px rgba(37,108,57,.12);
  transform-origin:20% 80%;
  scale:.08;
  opacity:0;
  transition:
    scale 2.35s cubic-bezier(.15,.82,.18,1.08),
    opacity 1.35s ease;
}
.l1{ left:10px; top:36px; transform:rotate(-30deg); transition-delay:calc(var(--plant-delay) + 720ms); }
.l2{ left:18px; top:18px; transform:rotate(-10deg) scale(.9); transition-delay:calc(var(--plant-delay) + 860ms); }
.l3{ left:31px; top:4px; transform:rotate(24deg) scale(.82); transition-delay:calc(var(--plant-delay) + 1010ms); }
.l4{ right:16px; top:27px; transform:rotate(34deg); transition-delay:calc(var(--plant-delay) + 930ms); }
.l5{ right:6px; top:44px; transform:rotate(49deg) scale(.88); transition-delay:calc(var(--plant-delay) + 1080ms); }
.l6{ left:31px; top:46px; transform:rotate(12deg) scale(.78); transition-delay:calc(var(--plant-delay) + 1180ms); }
html[data-visual-theme="desert"].plants-awake .desert-plant.plant-visible .shrub-leaf{
  scale:1;
  opacity:1;
}

/* restrained desert blooms open after the shrub has fully risen */
.wildflower{
  position:absolute;
  width:7px;
  height:7px;
  border-radius:50%;
  background:#FFF6D1;
  box-shadow:
    0 -4px 0 -1px #F7D96E,
    4px 0 0 -1px #F7D96E,
    0 4px 0 -1px #F7D96E,
    -4px 0 0 -1px #F7D96E,
    0 0 10px rgba(255,229,124,.20);
  scale:.12;
  opacity:0;
  transition:opacity 1.25s ease, scale 2.1s cubic-bezier(.2,.82,.25,1.12);
}
.f1{ left:16px; top:27px; }
.f2{ left:38px; top:5px; background:#FFE5EC; box-shadow:0 -4px 0 -1px #EFA2B5,4px 0 0 -1px #EFA2B5,0 4px 0 -1px #EFA2B5,-4px 0 0 -1px #EFA2B5,0 0 10px rgba(224,104,139,.16); }
.f3{ right:8px; top:39px; }
html[data-visual-theme="desert"].plants-awake .desert-plant-flower.plant-visible .wildflower{
  opacity:1;
  scale:1;
  transition-delay:calc(var(--plant-delay) + 1.55s);
}

/* Wind only begins after the slow growth sequence is finished. */
html[data-visual-theme="desert"].plants-awake .desert-plant.plant-visible > *{
  animation:desert-plant-wind var(--plant-sway) ease-in-out calc(var(--plant-delay) + 2.65s) infinite alternate;
}
html[data-visual-theme="desert"].plants-awake .desert-plant.plant-visible .b2,
html[data-visual-theme="desert"].plants-awake .desert-plant.plant-visible .b5,
html[data-visual-theme="desert"].plants-awake .desert-plant.plant-visible .l2,
html[data-visual-theme="desert"].plants-awake .desert-plant.plant-visible .l5{
  animation-direction:alternate-reverse;
}
@keyframes desert-plant-wind{
  from{ translate:-1px 0; rotate:-1.0deg; }
  to{ translate:1px 0; rotate:1.35deg; }
}

html[data-visual-theme="desert"] .grass-tuft{ opacity:0; }

@media (max-width:720px){
  .desert-plant{
    height:76px;
    transform:translateX(-50%) translateY(12px) scale(var(--plant-mobile-scale));
  }
  html[data-visual-theme="desert"].plants-awake .desert-plant.plant-visible{
    transform:translateX(-50%) translateY(0) scale(var(--plant-mobile-scale));
  }
  html[data-visual-theme="desert"].plants-awake .plant-edge-left.plant-visible{
    transform:translateX(-32%) translateY(0) scale(var(--plant-mobile-scale)) rotate(1.4deg);
  }
  html[data-visual-theme="desert"].plants-awake .plant-edge-right.plant-visible{
    transform:translateX(-68%) translateY(0) scale(var(--plant-mobile-scale)) rotate(-1.4deg);
  }
  .desert-plant-grass{ width:58px; height:72px; }
  .desert-plant-shrub,
  .desert-plant-flower{ width:68px; height:76px; }
}

@media (prefers-reduced-motion:reduce){
  .desert-plant,
  .desert-plant > *,
  .wildflower{
    transition:none !important;
    animation:none !important;
  }
  html[data-visual-theme="desert"].plants-awake .desert-plant.plant-visible .blade,
  html[data-visual-theme="desert"].plants-awake .desert-plant.plant-visible .shrub-stem,
  html[data-visual-theme="desert"].plants-awake .desert-plant.plant-visible .shrub-leaf,
  html[data-visual-theme="desert"].plants-awake .desert-plant-flower.plant-visible .wildflower{
    opacity:1;
    scale:1;
  }
}

/* =========================================================
   v12 — taller, thicker, fuller living desert vegetation
   ========================================================= */
.desert-plant{
  width:104px;
  height:138px;
}

/* Dense grass clumps: more blades, stronger silhouettes, taller center. */
.desert-plant-grass{
  width:96px;
  height:132px;
}
.desert-plant-grass .blade{
  width:5px;
  border-radius:100% 100% 24% 24%;
  background:linear-gradient(180deg,#91DE70 0%,#56B75B 42%,#257744 100%);
  box-shadow:
    0 8px 14px rgba(39,103,53,.16),
    inset 1px 0 0 rgba(255,255,255,.15);
}
.desert-plant-grass .b1{ height:76px;  transform:translateX(-42px) rotate(-38deg); transition-delay:calc(var(--plant-delay) + 0ms); }
.desert-plant-grass .b2{ height:94px;  transform:translateX(-34px) rotate(-30deg); transition-delay:calc(var(--plant-delay) + 100ms); }
.desert-plant-grass .b3{ height:110px; transform:translateX(-25px) rotate(-21deg); transition-delay:calc(var(--plant-delay) + 200ms); }
.desert-plant-grass .b4{ height:122px; transform:translateX(-15px) rotate(-12deg); transition-delay:calc(var(--plant-delay) + 300ms); }
.desert-plant-grass .b5{ height:130px; transform:translateX(-6px) rotate(-5deg);  transition-delay:calc(var(--plant-delay) + 400ms); }
.desert-plant-grass .b6{ height:136px; transform:translateX(1px) rotate(2deg);    transition-delay:calc(var(--plant-delay) + 500ms); width:6px; }
.desert-plant-grass .b7{ height:128px; transform:translateX(10px) rotate(9deg);   transition-delay:calc(var(--plant-delay) + 600ms); }
.desert-plant-grass .b8{ height:116px; transform:translateX(19px) rotate(18deg);  transition-delay:calc(var(--plant-delay) + 700ms); }
.desert-plant-grass .b9{ height:102px; transform:translateX(28px) rotate(27deg);  transition-delay:calc(var(--plant-delay) + 800ms); }
.desert-plant-grass .b10{height:88px;  transform:translateX(36px) rotate(35deg);  transition-delay:calc(var(--plant-delay) + 900ms); }
.desert-plant-grass .b11{height:68px;  transform:translateX(42px) rotate(43deg);  transition-delay:calc(var(--plant-delay) + 1000ms); }

/* Fuller shrubs: thicker woody base, five stems and a broader crown. */
.desert-plant-shrub,
.desert-plant-flower{
  width:112px;
  height:128px;
}
.shrub-stem{
  width:5px;
  background:linear-gradient(180deg,#67A858,#3D7C40 58%,#8A6537 100%);
  box-shadow:1px 0 0 rgba(255,255,255,.10);
}
.stem-a{ transform:translateX(-2px) rotate(-2deg);  height:112px; transition-delay:calc(var(--plant-delay) + 80ms); }
.stem-b{ transform:translateX(-18px) rotate(-20deg); height:94px; transition-delay:calc(var(--plant-delay) + 190ms); }
.stem-c{ transform:translateX(15px) rotate(22deg);   height:98px; transition-delay:calc(var(--plant-delay) + 300ms); }
.stem-d{ transform:translateX(-30px) rotate(-34deg); height:78px; transition-delay:calc(var(--plant-delay) + 410ms); }
.stem-e{ transform:translateX(28px) rotate(35deg);   height:82px; transition-delay:calc(var(--plant-delay) + 520ms); }

.shrub-leaf{
  width:30px;
  height:16px;
  border-radius:100% 14% 100% 14%;
  background:linear-gradient(135deg,#8AD66E 0%,#46A956 52%,#267B46 100%);
  box-shadow:0 5px 10px rgba(34,101,53,.16);
}
.l1{ left:5px;  top:66px; transform:rotate(-34deg); transition-delay:calc(var(--plant-delay) + var(--plant-leaf-start) + 0ms); }
.l2{ left:19px; top:42px; transform:rotate(-18deg) scale(.96); transition-delay:calc(var(--plant-delay) + var(--plant-leaf-start) + 420ms); }
.l3{ left:39px; top:13px; transform:rotate(18deg) scale(.92); transition-delay:calc(var(--plant-delay) + var(--plant-leaf-start) + 900ms); }
.l4{ right:20px; top:39px; transform:rotate(31deg); transition-delay:calc(var(--plant-delay) + var(--plant-leaf-start) + 620ms); }
.l5{ right:2px; top:67px; transform:rotate(47deg) scale(.95); transition-delay:calc(var(--plant-delay) + var(--plant-leaf-start) + 1180ms); }
.l6{ left:43px; top:72px; transform:rotate(9deg) scale(.92); transition-delay:calc(var(--plant-delay) + var(--plant-leaf-start) + 1480ms); }
.l7{ left:1px;  top:83px; transform:rotate(-48deg) scale(.88); transition-delay:calc(var(--plant-delay) + var(--plant-leaf-start) + 1760ms); }
.l8{ left:27px; top:91px; transform:rotate(-8deg) scale(.92); transition-delay:calc(var(--plant-delay) + var(--plant-leaf-start) + 2040ms); }
.l9{ right:25px; top:83px; transform:rotate(22deg) scale(.90); transition-delay:calc(var(--plant-delay) + var(--plant-leaf-start) + 2320ms); }
.l10{right:0; top:91px; transform:rotate(52deg) scale(.84); transition-delay:calc(var(--plant-delay) + var(--plant-leaf-start) + 2600ms); }

.wildflower{
  width:9px;
  height:9px;
  box-shadow:
    0 -5px 0 -1px #F7D96E,
    5px 0 0 -1px #F7D96E,
    0 5px 0 -1px #F7D96E,
    -5px 0 0 -1px #F7D96E,
    0 0 12px rgba(255,229,124,.22);
}
.f1{ left:17px; top:56px; }
.f2{ left:48px; top:14px; }
.f3{ right:13px; top:61px; }
.f4{ left:35px; top:86px; background:#FFF5E8; }
.f5{ right:34px; top:39px; background:#FFE5EC; }
html[data-visual-theme="desert"].plants-awake .desert-plant-flower.plant-visible .wildflower{
  transition-delay:calc(var(--plant-delay) + var(--plant-flower-start));
}

/* Let the larger mass finish growing before wind begins. */
html[data-visual-theme="desert"].plants-awake .desert-plant.plant-visible > *{
  animation-delay:calc(var(--plant-delay) + var(--plant-wind-start));
}

@media (max-width:720px){
  .desert-plant{ height:112px; }
  .desert-plant-grass{ width:82px; height:112px; }
  .desert-plant-shrub,
  .desert-plant-flower{ width:94px; height:112px; }
  .desert-plant-grass .blade{ width:4px; }
  .shrub-stem{ width:4px; }
  .shrub-leaf{ width:25px; height:14px; }
}

/* =========================================================
   v16 — first-screen-only giant vegetation
   The giant stems root at the bottom of the OPENING viewport, not the
   live viewport. The layer is absolute and only one screen tall, so it
   stays at the top of the document and naturally scrolls away instead
   of following the visitor through the site.
   ========================================================= */
#theme-vine-layer{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100vh;
  height:100svh;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
  opacity:0;
  visibility:hidden;
  transition:opacity .45s ease, visibility 0s linear .45s;
}
html[data-visual-theme="desert"] #theme-vine-layer{
  opacity:1;
  visibility:visible;
  transition:opacity .55s ease, visibility 0s;
}

/* =========================================================
   v16 — first-screen climbing plants
   Inspired by a real tall stem: a basal rosette, one long climbing stem,
   alternating branches/leaves, then blooms. Their root is isolated from
   ordinary vegetation and anchored to the bottom of the opening screen.
   ========================================================= */
.desert-plant-vine{
  --plant-scale:1;
  --plant-mobile-scale:1;
  --vine-grow:22.4s;
  position:absolute;
  width:clamp(164px, 13vw, 235px);
  height:max(106vh, 820px);
  bottom:-4px;
  z-index:0;
  opacity:0;
  transform:translateX(-50%) translateY(22px) scale(1);
  transform-origin:50% 100%;
  filter:saturate(.96) drop-shadow(0 12px 16px rgba(45,105,56,.08));
}
html[data-visual-theme="desert"].plants-awake .desert-plant-vine.plant-visible{
  opacity:.93;
  transform:translateX(-50%) translateY(0) scale(1);
  filter:saturate(1.08) drop-shadow(0 12px 18px rgba(45,105,56,.12));
}
html[data-visual-theme="desert"].plants-awake .desert-plant-vine.plant-edge-left.plant-visible{
  transform:translateX(-34%) translateY(0) scale(1) rotate(.45deg);
}
html[data-visual-theme="desert"].plants-awake .desert-plant-vine.plant-edge-right.plant-visible{
  transform:translateX(-66%) translateY(0) scale(1) rotate(-.45deg);
}

.vine-observer-anchor{
  position:absolute;
  left:50%;
  bottom:10px;
  width:6px;
  height:6px;
  pointer-events:none;
  opacity:0;
}
.vine-svg{
  display:block;
  width:100%;
  height:100%;
  overflow:visible;
  transform-origin:50% 100%;
}
.vine-svg-b{ transform:scaleX(-1) rotate(-.55deg); }
.vine-svg-c{ transform:scaleX(.94) rotate(.75deg); }

.vine-stem,
.vine-branch{
  fill:none;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-dasharray:1;
  stroke-dashoffset:1;
  vector-effect:non-scaling-stroke;
}
.vine-main{
  stroke:#23834A;
  stroke-width:5.2;
  transition:stroke-dashoffset var(--vine-grow) cubic-bezier(.18,.68,.17,1) var(--plant-delay);
  filter:drop-shadow(0 2px 1px rgba(42,105,57,.10));
}
.vine-branch{
  stroke:#2B9551;
  stroke-width:4.1;
  transition:stroke-dashoffset 5.4s cubic-bezier(.16,.76,.18,1);
}
.vb1{ transition-delay:calc(var(--plant-delay) + 3.80s); }
.vb2{ transition-delay:calc(var(--plant-delay) + 5.80s); }
.vb3{ transition-delay:calc(var(--plant-delay) + 7.80s); }
.vb4{ transition-delay:calc(var(--plant-delay) + 10.00s); }
.vb5{ transition-delay:calc(var(--plant-delay) + 12.20s); }
.vb6{ transition-delay:calc(var(--plant-delay) + 14.48s); }
.vb7{ transition-delay:calc(var(--plant-delay) + 16.72s); }
.vb8{ transition-delay:calc(var(--plant-delay) + 18.80s); }
html[data-visual-theme="desert"].plants-awake .desert-plant-vine.plant-visible .vine-stem,
html[data-visual-theme="desert"].plants-awake .desert-plant-vine.plant-visible .vine-branch{
  stroke-dashoffset:0;
}

.vine-leaf,
.vine-rosette,
.vine-bloom{
  opacity:0;
  scale:.04;
  transform-box:fill-box;
  transform-origin:center;
  transition:
    opacity .52s ease,
    scale .82s cubic-bezier(.16,.88,.18,1.24);
}
.vine-leaf path{
  fill:#39A85B;
  stroke:#217944;
  stroke-width:2.2;
  vector-effect:non-scaling-stroke;
}
.vine-stem-leaf path{ fill:#49B963; }
.vine-rosette path{
  fill:#43AD59;
  stroke:#237D43;
  stroke-width:2.5;
  vector-effect:non-scaling-stroke;
}

/* Leaves open bottom-to-top after their corresponding branches arrive. */
.vl1{ transition-delay:calc(var(--plant-delay) + 6.88s); }
.vl2{ transition-delay:calc(var(--plant-delay) + 8.80s); }
.vl3{ transition-delay:calc(var(--plant-delay) + 10.80s); }
.vl4{ transition-delay:calc(var(--plant-delay) + 13.04s); }
.vl5{ transition-delay:calc(var(--plant-delay) + 15.20s); }
.vl6{ transition-delay:calc(var(--plant-delay) + 17.52s); }
.vl7{ transition-delay:calc(var(--plant-delay) + 19.68s); }
.vl8{ transition-delay:calc(var(--plant-delay) + 21.68s); }
.vsl1{ transition-delay:calc(var(--plant-delay) + 8.08s); }
.vsl2{ transition-delay:calc(var(--plant-delay) + 11.60s); }
.vsl3{ transition-delay:calc(var(--plant-delay) + 14.08s); }
.vsl4{ transition-delay:calc(var(--plant-delay) + 16.48s); }
.vsl5{ transition-delay:calc(var(--plant-delay) + 18.80s); }
.vsl6{ transition-delay:calc(var(--plant-delay) + 20.88s); }
.vr1{ transition-delay:calc(var(--plant-delay) + 1.68s); }
.vr2{ transition-delay:calc(var(--plant-delay) + 2.20s); }
.vr3{ transition-delay:calc(var(--plant-delay) + 2.88s); }
.vr4{ transition-delay:calc(var(--plant-delay) + 3.44s); }

html[data-visual-theme="desert"].plants-awake .desert-plant-vine.plant-visible .vine-leaf,
html[data-visual-theme="desert"].plants-awake .desert-plant-vine.plant-visible .vine-rosette,
html[data-visual-theme="desert"].plants-awake .desert-plant-vine.plant-visible .vine-bloom{
  opacity:1;
  scale:1;
}

.vine-bloom{
  transition-delay:calc(var(--plant-delay) + 23.00s);
}
.vine-bloom > circle:first-child{ fill:#E2A83D; }
.vine-bloom .petal{ fill:#FFF0AF; }
.vf2{ transition-delay:calc(var(--plant-delay) + 21.36s); }
.vine-variant-b .vine-bloom .petal{ fill:#FFD9E5; }
.vine-variant-b .vine-bloom > circle:first-child{ fill:#D85E83; }
.vine-variant-c .vine-bloom .petal{ fill:#F7F1E0; }
.vine-variant-c .vine-leaf path{ fill:#2F9E57; }

/* Only the crown/leaves move after growth; the long trunk remains grounded. */
html[data-visual-theme="desert"].plants-awake .desert-plant-vine.plant-visible .vine-leaf,
html[data-visual-theme="desert"].plants-awake .desert-plant-vine.plant-visible .vine-bloom{
  animation:vine-leaf-breeze var(--plant-sway) ease-in-out calc(var(--plant-delay) + 24.80s) infinite alternate;
}
.vine-leaf:nth-of-type(even){ animation-direction:alternate-reverse; }
@keyframes vine-leaf-breeze{
  from{ rotate:-.65deg; }
  to{ rotate:1.15deg; }
}

@media (max-width:720px){
  .desert-plant-vine{
    width:clamp(128px, 35vw, 176px);
    height:max(104svh, 700px);
    opacity:0;
  }
  html[data-visual-theme="desert"].plants-awake .desert-plant-vine.plant-visible{
    opacity:.82;
  }
  .vine-main{ stroke-width:4.4; }
  .vine-branch{ stroke-width:3.4; }
}

@media (prefers-reduced-motion:reduce){
  html[data-visual-theme="desert"].plants-awake .desert-plant-vine.plant-visible .vine-stem,
  html[data-visual-theme="desert"].plants-awake .desert-plant-vine.plant-visible .vine-branch{
    stroke-dashoffset:0;
  }
  html[data-visual-theme="desert"].plants-awake .desert-plant-vine.plant-visible .vine-leaf,
  html[data-visual-theme="desert"].plants-awake .desert-plant-vine.plant-visible .vine-rosette,
  html[data-visual-theme="desert"].plants-awake .desert-plant-vine.plant-visible .vine-bloom{
    opacity:1;
    scale:1;
  }
}


/* =========================================================
   v17 — celestial theme toggle
   Dark mode shows a moon; daylight shows a sun. Both are the
   same theme trigger, so the icon itself explains the state.
   ========================================================= */
.theme-toggle .theme-orb-icon{
  width:24px;
  height:24px;
  overflow:visible;
}
.theme-toggle .theme-icon{
  transform-box:fill-box;
  transform-origin:center;
  transition:
    opacity .28s ease,
    transform .42s cubic-bezier(.2,.85,.2,1),
    filter .28s ease;
}
.theme-toggle .theme-icon-moon{
  opacity:1;
  transform:scale(1) rotate(0deg);
  filter:drop-shadow(0 0 5px rgba(191,218,255,.24));
}
.theme-toggle .theme-icon-sun{
  opacity:0;
  transform:scale(.48) rotate(-28deg);
  filter:drop-shadow(0 0 7px rgba(255,211,65,.08));
}
.theme-toggle .moon-crescent{
  fill:#DDEBFF;
  stroke:#F7FBFF;
  stroke-width:.45;
  stroke-linejoin:round;
}
.theme-toggle .moon-star{
  fill:#F4F9FF;
  transform-origin:center;
  animation:theme-moon-twinkle 2.8s ease-in-out infinite;
}
.theme-toggle .moon-star-b{ animation-delay:.8s; }
.theme-toggle .sun-core{
  fill:#FFD85C;
  stroke:#FFF1A8;
  stroke-width:.65;
}
.theme-toggle .sun-rays{
  fill:none;
  stroke:#FFE276;
  stroke-width:1.7;
  stroke-linecap:round;
  transform-origin:12px 12px;
}

/* Dark mode: cool lunar jewel. */
html:not([data-visual-theme="desert"]) .theme-toggle{
  color:#E4EFFF;
  border-color:rgba(190,216,255,.48);
  background:
    radial-gradient(circle at 35% 28%, rgba(207,226,255,.17), transparent 34%),
    linear-gradient(145deg,rgba(24,35,48,.98),rgba(7,13,21,.98));
  box-shadow:
    0 0 0 1px rgba(225,237,255,.06) inset,
    0 0 0 4px rgba(142,184,255,.035),
    0 5px 18px rgba(0,0,0,.28),
    0 0 24px rgba(126,177,255,.16);
}
html:not([data-visual-theme="desert"]) .theme-toggle::before{
  border-color:rgba(165,201,255,.48);
  box-shadow:0 0 20px rgba(112,171,255,.10);
}
html:not([data-visual-theme="desert"]) .theme-toggle:hover,
html:not([data-visual-theme="desert"]) .theme-toggle:focus-visible{
  border-color:rgba(218,235,255,.82);
  box-shadow:
    0 0 0 1px rgba(225,240,255,.10) inset,
    0 0 0 6px rgba(135,190,255,.075),
    0 8px 24px rgba(0,0,0,.31),
    0 0 36px rgba(125,185,255,.32);
}
html:not([data-visual-theme="desert"]) .theme-toggle:hover .theme-icon-moon,
html:not([data-visual-theme="desert"]) .theme-toggle:focus-visible .theme-icon-moon{
  transform:scale(1.12) rotate(-8deg);
  filter:drop-shadow(0 0 9px rgba(204,229,255,.58));
}

/* Daylight: the moon yields to a warm sun. */
html[data-visual-theme="desert"] .theme-toggle .theme-icon-moon{
  opacity:0;
  transform:scale(.48) rotate(22deg);
}
html[data-visual-theme="desert"] .theme-toggle .theme-icon-sun{
  opacity:1;
  transform:scale(1) rotate(0deg);
  filter:drop-shadow(0 0 7px rgba(255,203,35,.32));
}
html[data-visual-theme="desert"] .theme-toggle:hover .theme-icon-sun,
html[data-visual-theme="desert"] .theme-toggle:focus-visible .theme-icon-sun{
  transform:scale(1.12) rotate(12deg);
  filter:drop-shadow(0 0 11px rgba(255,191,20,.55));
}

@keyframes theme-moon-twinkle{
  0%,100%{ opacity:.45; transform:scale(.78); }
  48%{ opacity:1; transform:scale(1.12); }
  66%{ opacity:.68; transform:scale(.94); }
}

@media (prefers-reduced-motion:reduce){
  .theme-toggle .moon-star{ animation:none !important; }
  .theme-toggle .theme-icon{ transition:none !important; }
}

/* =========================================================
   v18 — sky-sized moon / sunrise
   The celestial body inside the first-screen landscape is now the
   primary visual theme trigger. Dark has a cool moon; daylight has a
   warm sun that actually rises after the paint wipe completes.
   ========================================================= */

/* Keep the celestial layer present in both themes. Day-only scenery
   below it still fades independently. */
#theme-landscape{
  opacity:1;
  visibility:visible;
  transition:none;
}
html[data-visual-theme="desert"] #theme-landscape{
  opacity:1;
  visibility:visible;
  transition:none;
}

.theme-celestial{
  position:absolute;
  top:118px;
  inset-inline-start:8%;
  width:112px;
  height:112px;
  z-index:8;
  padding:0;
  border:0;
  border-radius:50%;
  background:transparent;
  cursor:pointer;
  pointer-events:auto;
  isolation:isolate;
  -webkit-tap-highlight-color:transparent;
  transition:transform .28s cubic-bezier(.2,.85,.2,1), filter .28s ease;
}
.theme-celestial:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:8px;
}
.theme-celestial:hover{
  transform:scale(1.055);
}
.theme-celestial:active{
  transform:scale(.985);
}

.sky-orb{
  position:absolute;
  inset:6px;
  display:block;
  border-radius:50%;
  transform-origin:50% 50%;
  will-change:transform, opacity, filter;
}

/* Night moon — deliberately full and cratered so it reads as the moon,
   not as a recoloured sun. */
.sky-moon{
  opacity:1;
  transform:translateY(0) scale(1);
  background:
    radial-gradient(circle at 34% 28%, rgba(255,255,255,.98) 0 6%, transparent 7%),
    radial-gradient(circle at 43% 39%, #F5F8FC 0 18%, #DFE7F0 48%, #B9C8D8 76%, #91A5BA 100%);
  box-shadow:
    0 0 0 18px rgba(185,213,244,.055),
    0 0 46px rgba(184,216,255,.24),
    0 0 105px rgba(122,178,236,.16);
  transition:opacity .45s ease, transform .55s cubic-bezier(.2,.8,.2,1), filter .45s ease;
}
.moon-crater{
  position:absolute;
  display:block;
  border-radius:50%;
  background:rgba(119,139,160,.20);
  box-shadow:inset 2px 2px 4px rgba(89,107,126,.12), 1px 1px 2px rgba(255,255,255,.18);
}
.moon-crater-a{ width:18%; height:18%; left:21%; top:48%; }
.moon-crater-b{ width:11%; height:11%; right:23%; top:25%; }
.moon-crater-c{ width:8%; height:8%; right:31%; bottom:19%; opacity:.72; }

/* Day sun — hidden below the horizon in night mode. */
.sky-sun{
  opacity:0;
  transform:translateY(590px) scale(.72);
  background:radial-gradient(circle at 38% 34%, #FFFBE3 0 10%, #FFEF9A 36%, #FFD861 63%, #F2B62F 100%);
  box-shadow:
    0 0 0 34px rgba(255,228,120,.13),
    0 0 110px rgba(255,217,80,.42),
    0 0 230px rgba(255,202,48,.24),
    0 0 390px rgba(255,196,46,.11);
  transition:opacity .35s ease, transform .55s cubic-bezier(.2,.8,.2,1);
}

.sky-star{
  position:absolute;
  width:4px;
  height:4px;
  border-radius:50%;
  background:#EAF5FF;
  box-shadow:0 0 9px rgba(217,238,255,.78);
  opacity:.72;
  animation:sky-star-twinkle 3.4s ease-in-out infinite;
}
.sky-star-a{ left:-17px; top:19px; animation-delay:.2s; }
.sky-star-b{ right:-11px; top:5px; width:3px; height:3px; animation-delay:1.1s; }
.sky-star-c{ right:-25px; bottom:22px; width:2px; height:2px; animation-delay:1.9s; }

/* Clouds and desert mountains belong only to daylight. */
.theme-cloud,
.theme-mountain{
  opacity:0;
  transition:opacity .7s ease;
}
html[data-visual-theme="desert"] .theme-cloud{ opacity:var(--day-cloud-opacity, .7); }
html[data-visual-theme="desert"] .theme-cloud-a{ --day-cloud-opacity:.72; }
html[data-visual-theme="desert"] .theme-cloud-b{ --day-cloud-opacity:.48; }
html[data-visual-theme="desert"] .theme-cloud-c{ --day-cloud-opacity:.56; }
html[data-visual-theme="desert"] .theme-cloud-d{ --day-cloud-opacity:.38; }
html[data-visual-theme="desert"] .theme-cloud-e{ --day-cloud-opacity:.30; }
html[data-visual-theme="desert"] .theme-cloud-f{ --day-cloud-opacity:.34; }
html[data-visual-theme="desert"] .theme-mountain-back{ opacity:.60; }
html[data-visual-theme="desert"] .theme-mountain-mid{ opacity:.78; }
html[data-visual-theme="desert"] .theme-mountain-front{ opacity:.92; }

html[data-visual-theme="desert"] .sky-moon{
  opacity:0;
  transform:translateY(-150px) scale(.76);
  filter:blur(2px);
}
html[data-visual-theme="desert"] .sky-star{
  opacity:0;
  animation:none;
}
html[data-visual-theme="desert"] .sky-sun{
  opacity:1;
  transform:translateY(0) scale(1);
}

/* During the circular page wipe, keep the incoming celestial body out of
   the new snapshot. It enters afterwards, so the sunrise/moonrise is
   readable as a separate event instead of being hidden by the wipe. */
html.theme-transitioning[data-visual-theme="desert"] .sky-sun,
html.theme-transitioning:not([data-visual-theme="desert"]) .sky-moon{
  opacity:0 !important;
}

/* Deterministic celestial handoff.
   During the paint wipe the INCOMING live DOM must not show either body at
   all; only the old snapshot should carry the outgoing one. This prevents the
   rare case where the browser paints a sun/moon for one late frame and it
   seems to disappear only after the wipe finishes. */
html.theme-celestial-hidden .sky-sun,
html.theme-celestial-hidden .sky-moon{
  opacity:0 !important;
  visibility:hidden !important;
  transition:none !important;
  animation:none !important;
}

html.celestial-sunrise .sky-sun{
  animation:sky-sun-rise 3.45s cubic-bezier(.12,.72,.16,1) both;
}
html.celestial-moonrise .sky-moon{
  animation:sky-moon-rise 2.85s cubic-bezier(.16,.72,.2,1) both;
}

@keyframes sky-sun-rise{
  0%{
    opacity:0;
    transform:translateY(590px) scale(.72);
    filter:brightness(.82) saturate(.82);
    box-shadow:0 0 0 6px rgba(255,224,115,.025), 0 0 20px rgba(255,198,40,.08);
  }
  13%{ opacity:.22; }
  34%{
    opacity:.78;
    transform:translateY(385px) scale(.82);
    filter:brightness(.94) saturate(.92);
  }
  68%{
    opacity:1;
    transform:translateY(126px) scale(.94);
    filter:brightness(1.02) saturate(1);
  }
  86%{
    transform:translateY(-9px) scale(1.018);
    filter:brightness(1.08) saturate(1.05);
  }
  100%{
    opacity:1;
    transform:translateY(0) scale(1);
    filter:none;
  }
}

@keyframes sky-moon-rise{
  0%{
    opacity:0;
    transform:translateY(-430px) scale(.76);
    filter:blur(1.4px) brightness(.74);
  }
  28%{ opacity:.62; }
  72%{
    opacity:1;
    transform:translateY(-54px) scale(.96);
    filter:blur(0) brightness(.98);
  }
  88%{ transform:translateY(7px) scale(1.012); }
  100%{
    opacity:1;
    transform:translateY(0) scale(1);
    filter:none;
  }
}

@keyframes sky-star-twinkle{
  0%,100%{ opacity:.32; transform:scale(.72); }
  45%{ opacity:.92; transform:scale(1.15); }
  68%{ opacity:.58; transform:scale(.92); }
}

/* Remove the old static decorative sun. v18's .sky-sun is the only
   full-size sun and is also clickable. */
.theme-sun{ display:none !important; }

@media (max-width:700px){
  .theme-celestial{
    width:82px;
    height:82px;
    top:98px;
    inset-inline-start:7%;
  }
  .sky-orb{ inset:5px; }
  .sky-sun{ transform:translateY(510px) scale(.70); }
  @keyframes sky-sun-rise{
    0%{ opacity:0; transform:translateY(510px) scale(.70); filter:brightness(.82); }
    34%{ opacity:.76; transform:translateY(330px) scale(.82); }
    70%{ opacity:1; transform:translateY(92px) scale(.95); }
    88%{ transform:translateY(-6px) scale(1.015); }
    100%{ opacity:1; transform:translateY(0) scale(1); filter:none; }
  }
}

@media (prefers-reduced-motion:reduce){
  .sky-star{ animation:none !important; }
  html.celestial-sunrise .sky-sun,
  html.celestial-moonrise .sky-moon{ animation:none !important; }
}


/* =========================================================
   v19 — smooth celestial timeline + clickable sky controls
   ========================================================= */

/* The sky control is moved outside #theme-landscape by theme.js so it can
   sit above the hero content stacking context and receive real pointer input.
   It remains absolute/document-anchored, therefore it scrolls away naturally. */
.theme-celestial{
  z-index:12;
  pointer-events:auto;
  touch-action:manipulation;
}
.theme-celestial[aria-busy="true"]{
  cursor:progress;
}
.theme-celestial .sky-orb{
  pointer-events:none;
}

/* WAAPI controls the rise.  Remove competing transform/opacity transitions
   from v18, which were responsible for the occasional stutter at handoff. */
.sky-sun,
.sky-moon{
  transition:none !important;
  backface-visibility:hidden;
  transform-style:preserve-3d;
}

/* Daylight refresh: preload keeps the sun under the horizon until theme.js
   has installed the WAAPI sunrise.  The !important values only exist during
   that very short boot hold. */
html.theme-initial-day-pending[data-visual-theme="desert"] .sky-sun{
  opacity:0 !important;
  transform:translate3d(0, min(84vh, 860px), 0) scale(.70) !important;
  filter:brightness(.76) saturate(.78) !important;
}

/* v19 no longer relies on the v18 CSS animation classes; keeping them inert
   prevents an old cached class from competing with the WAAPI timeline. */
html.celestial-sunrise .sky-sun,
html.celestial-moonrise .sky-moon{
  animation:none !important;
}

/* Make the large body obviously interactive without turning it into a
   conventional button. */
.theme-celestial::after{
  content:"";
  position:absolute;
  inset:-12px;
  border-radius:50%;
  border:1px solid transparent;
  opacity:0;
  transform:scale(.92);
  transition:opacity .25s ease, transform .3s cubic-bezier(.2,.85,.2,1), border-color .25s ease;
  pointer-events:none;
}
.theme-celestial:hover::after,
.theme-celestial:focus-visible::after{
  opacity:1;
  transform:scale(1);
  border-color:rgba(255,255,255,.22);
}
html[data-visual-theme="desert"] .theme-celestial:hover::after,
html[data-visual-theme="desert"] .theme-celestial:focus-visible::after{
  border-color:rgba(144,96,17,.28);
}


/* =========================================================
   FIRST-VISIT MOON HINT
   Appears 10s after the first dark-mode visit and stays until the user
   actually interacts with the theme switch. Desktop highlights the large
   moon; mobile highlights the header control.
   ========================================================= */
@keyframes first-visit-green-halo{
  0%,100%{
    opacity:.34;
    transform:scale(.88);
    border-color:rgba(57,255,122,.48);
    box-shadow:0 0 0 0 rgba(57,255,122,.18), 0 0 16px rgba(57,255,122,.18);
  }
  48%{
    opacity:1;
    transform:scale(1.16);
    border-color:rgba(89,255,145,.96);
    box-shadow:0 0 0 8px rgba(57,255,122,.08), 0 0 34px rgba(57,255,122,.52);
  }
}

@media (min-width:861px){
  html:not([data-visual-theme="desert"]) .theme-celestial.first-visit-theme-hint::after{
    opacity:1;
    inset:-17px;
    border:2px solid rgba(57,255,122,.82);
    box-shadow:0 0 26px rgba(57,255,122,.38);
    animation:first-visit-green-halo 1.55s cubic-bezier(.4,0,.2,1) infinite;
  }
  /* Keep the compact header switch quiet on desktop: the large moon itself
     is the thing we want the visitor to discover. */
  .theme-toggle.first-visit-theme-hint::before{
    animation:none !important;
  }
}

@media (max-width:860px){
  html:not([data-visual-theme="desert"]) .theme-toggle.first-visit-theme-hint::before{
    opacity:1;
    inset:-9px;
    border:2px solid rgba(57,255,122,.82);
    box-shadow:0 0 28px rgba(57,255,122,.42);
    animation:first-visit-green-halo 1.55s cubic-bezier(.4,0,.2,1) infinite;
  }
}

@media (prefers-reduced-motion:reduce){
  html:not([data-visual-theme="desert"]) .theme-celestial.first-visit-theme-hint::after,
  html:not([data-visual-theme="desert"]) .theme-toggle.first-visit-theme-hint::before{
    animation:none !important;
    opacity:1;
    border-color:rgba(57,255,122,.88);
    box-shadow:0 0 24px rgba(57,255,122,.36);
  }
}

@media (prefers-reduced-motion:reduce){
  html.theme-initial-day-pending[data-visual-theme="desert"] .sky-sun{
    opacity:1 !important;
    transform:none !important;
    filter:none !important;
  }
}

/* =========================================================
   v21 — transition pre-roll, refresh moon descent, richer stars
   ========================================================= */

/* Hold the incoming View Transition snapshot at zero radius until theme.js
   has given Chromium two paint frames to rasterize/upload the target theme.
   The WAAPI wipe then takes ownership of clip-path. */
::view-transition-new(root){
  clip-path:circle(0px at var(--theme-origin-x, 50vw) var(--theme-origin-y, 0px));
  will-change:clip-path;
  backface-visibility:hidden;
}
::view-transition-old(root){
  backface-visibility:hidden;
}

/* Night-wipe vegetation handoff.
   The old View Transition snapshot still contains the fully-grown daylight
   landscape. The incoming snapshot must contain no vegetation at all, so the
   same circular reveal that brings in the night also removes every plant at
   the moving wipe edge. `visibility:hidden` makes the new snapshot deterministic
   even though normal plant growth uses long delayed CSS transitions. */
html.theme-transitioning-to-dark .desert-plant,
html.theme-transitioning-to-dark #theme-vine-layer,
html.theme-transitioning-to-dark .grass-tuft{
  opacity:0 !important;
  visibility:hidden !important;
  transition:none !important;
  animation:none !important;
}

/* Full opening-sky star field. It lives behind page content and fades away
   in daylight; individual stars twinkle at different rates. */
.theme-night-stars{
  position:absolute;
  inset:0;
  height:min(920px, 100vh);
  z-index:1;
  pointer-events:none;
  overflow:hidden;
  opacity:1;
  transition:opacity .55s ease;
}
.theme-night-star{
  position:absolute;
  left:var(--star-x);
  top:var(--star-y);
  width:var(--star-size);
  height:var(--star-size);
  border-radius:50%;
  background:rgba(235,247,255,var(--star-alpha));
  box-shadow:
    0 0 5px rgba(210,235,255,.44),
    0 0 12px rgba(164,209,255,.16);
  transform:translateZ(0);
  animation:theme-night-twinkle var(--star-duration) ease-in-out var(--star-delay) infinite;
}
.theme-night-star:nth-child(5n){
  background:rgba(255,241,194,var(--star-alpha));
  box-shadow:0 0 6px rgba(255,231,158,.35);
}
.theme-night-star:nth-child(7n){
  border-radius:1px;
  transform:rotate(45deg) scale(.82);
}
html[data-visual-theme="desert"] .theme-night-stars{
  opacity:0;
}
html.theme-transitioning .theme-night-star{
  animation-play-state:paused;
}
@keyframes theme-night-twinkle{
  0%,100%{ opacity:.28; filter:brightness(.82); }
  38%{ opacity:1; filter:brightness(1.24); }
  64%{ opacity:.56; filter:brightness(.96); }
}

/* Dark refresh mirrors the daylight refresh hold: the moon starts above the
   viewport so it can visibly descend after theme.js is ready. */
html.theme-initial-night-pending:not([data-visual-theme="desert"]) .sky-moon{
  opacity:0 !important;
  transform:translate3d(0,-70vh,0) scale(.75) !important;
  filter:blur(1.3px) brightness(.72) !important;
}

/* Performance budget for the theme wipe. Freeze every independent CSS
   animation at its current frame before snapshot capture and keep it frozen
   until the wipe is complete. This does not change the visible composition;
   it only stops unrelated work from stealing frames from the transition. */
html.theme-transition-budget *,
html.theme-transition-budget *::before,
html.theme-transition-budget *::after{
  animation-play-state:paused !important;
}

/* Avoid expensive decorative compositing while the root snapshot is being
   revealed. The canvases are also paused in main.js during this class. */
html.theme-transitioning #glitch-overlay{
  animation-play-state:paused !important;
}
html.theme-transitioning .theme-cloud,
html.theme-transitioning .theme-mountain{
  transition:none !important;
}

@media (prefers-reduced-motion:reduce){
  .theme-night-star{ animation:none !important; }
  html.theme-initial-night-pending:not([data-visual-theme="desert"]) .sky-moon{
    opacity:1 !important;
    transform:none !important;
    filter:none !important;
  }
}

/* =========================================================
   v22 — random slow-growth vegetation + restored long stems
   ========================================================= */

/* Ordinary plants now unfold on a roughly 10x slower timeline. The overall
   growth duration comes from JS; these staggered details are scaled too so
   leaves cannot pop open before the stem beneath them has actually grown. */
.desert-plant-grass .blade{
  transition:
    scale var(--plant-grow) cubic-bezier(.16,.74,.16,1),
    opacity 5.5s ease;
}
.desert-plant-grass .b1{ transition-delay:calc(var(--plant-delay) + 0s); }
.desert-plant-grass .b2{ transition-delay:calc(var(--plant-delay) + 1s); }
.desert-plant-grass .b3{ transition-delay:calc(var(--plant-delay) + 2s); }
.desert-plant-grass .b4{ transition-delay:calc(var(--plant-delay) + 3s); }
.desert-plant-grass .b5{ transition-delay:calc(var(--plant-delay) + 4s); }
.desert-plant-grass .b6{ transition-delay:calc(var(--plant-delay) + 5s); }
.desert-plant-grass .b7{ transition-delay:calc(var(--plant-delay) + 6s); }
.desert-plant-grass .b8{ transition-delay:calc(var(--plant-delay) + 7s); }
.desert-plant-grass .b9{ transition-delay:calc(var(--plant-delay) + 8s); }
.desert-plant-grass .b10{ transition-delay:calc(var(--plant-delay) + 9s); }
.desert-plant-grass .b11{ transition-delay:calc(var(--plant-delay) + 10s); }

.shrub-stem{
  transition:
    scale var(--plant-stem-grow) cubic-bezier(.17,.73,.18,1),
    opacity 4.5s ease;
}
.stem-a{ transition-delay:calc(var(--plant-delay) + .8s); }
.stem-b{ transition-delay:calc(var(--plant-delay) + 1.9s); }
.stem-c{ transition-delay:calc(var(--plant-delay) + 3s); }
.stem-d{ transition-delay:calc(var(--plant-delay) + 4.1s); }
.stem-e{ transition-delay:calc(var(--plant-delay) + 5.2s); }

.shrub-leaf{
  transition:
    scale 7.2s cubic-bezier(.15,.9,.18,1.28),
    opacity 4.5s ease;
}
.l1{ transition-delay:calc(var(--plant-delay) + 7.6s); }
.l2{ transition-delay:calc(var(--plant-delay) + 8.6s); }
.l3{ transition-delay:calc(var(--plant-delay) + 9.8s); }
.l4{ transition-delay:calc(var(--plant-delay) + 9s); }
.l5{ transition-delay:calc(var(--plant-delay) + 10.2s); }
.l6{ transition-delay:calc(var(--plant-delay) + 11.2s); }
.l7{ transition-delay:calc(var(--plant-delay) + 11.8s); }
.l8{ transition-delay:calc(var(--plant-delay) + 12.4s); }
.l9{ transition-delay:calc(var(--plant-delay) + 13s); }
.l10{ transition-delay:calc(var(--plant-delay) + 13.6s); }

.wildflower{
  transition:
    opacity 4.5s ease,
    scale 7.2s cubic-bezier(.2,.9,.25,1.4);
}
html[data-visual-theme="desert"].plants-awake .desert-plant-flower.plant-visible .wildflower{
  transition-delay:calc(var(--plant-delay) + 18s);
}

/* Tall stems stay visually slim and leafy. v23 places them back in the
   dedicated opening-screen layer, rooted only at the bottom edge. */
.desert-plant-vine{
  width:var(--vine-width, 165px);
  height:max(var(--vine-height, 88vh), 620px);
  bottom:-4px;
  z-index:2;
  opacity:0;
  filter:saturate(.94) drop-shadow(0 10px 13px rgba(45,105,56,.06));
}
html[data-visual-theme="desert"].plants-awake .desert-plant-vine.plant-visible{
  opacity:.9;
  filter:saturate(1.04) drop-shadow(0 10px 15px rgba(45,105,56,.09));
}
.desert-plant-vine > .vine-svg,
.desert-plant-vine > .vine-observer-anchor{
  animation:none !important;
}
.vine-main{ stroke-width:3.25; }
.vine-branch{
  stroke-width:2.45;
  transition:stroke-dashoffset 13.5s cubic-bezier(.16,.76,.18,1);
}
.vb1{ transition-delay:calc(var(--plant-delay) + 9.5s); }
.vb2{ transition-delay:calc(var(--plant-delay) + 14.5s); }
.vb3{ transition-delay:calc(var(--plant-delay) + 19.5s); }
.vb4{ transition-delay:calc(var(--plant-delay) + 25s); }
.vb5{ transition-delay:calc(var(--plant-delay) + 30.5s); }
.vb6{ transition-delay:calc(var(--plant-delay) + 36.2s); }
.vb7{ transition-delay:calc(var(--plant-delay) + 41.8s); }
.vb8{ transition-delay:calc(var(--plant-delay) + 47s); }

.vine-leaf,
.vine-rosette,
.vine-bloom{
  transition:
    opacity 3.8s ease,
    scale 6.2s cubic-bezier(.16,.88,.18,1.24);
}
.vl1{ transition-delay:calc(var(--plant-delay) + 17.2s); }
.vl2{ transition-delay:calc(var(--plant-delay) + 22s); }
.vl3{ transition-delay:calc(var(--plant-delay) + 27s); }
.vl4{ transition-delay:calc(var(--plant-delay) + 32.6s); }
.vl5{ transition-delay:calc(var(--plant-delay) + 38s); }
.vl6{ transition-delay:calc(var(--plant-delay) + 43.8s); }
.vl7{ transition-delay:calc(var(--plant-delay) + 49.2s); }
.vl8{ transition-delay:calc(var(--plant-delay) + 54.2s); }
.vsl1{ transition-delay:calc(var(--plant-delay) + 20.2s); }
.vsl2{ transition-delay:calc(var(--plant-delay) + 29s); }
.vsl3{ transition-delay:calc(var(--plant-delay) + 35.2s); }
.vsl4{ transition-delay:calc(var(--plant-delay) + 41.2s); }
.vsl5{ transition-delay:calc(var(--plant-delay) + 47s); }
.vsl6{ transition-delay:calc(var(--plant-delay) + 52.2s); }
.vr1{ transition-delay:calc(var(--plant-delay) + 4.2s); }
.vr2{ transition-delay:calc(var(--plant-delay) + 5.5s); }
.vr3{ transition-delay:calc(var(--plant-delay) + 7.2s); }
.vr4{ transition-delay:calc(var(--plant-delay) + 8.6s); }

html[data-visual-theme="desert"].plants-awake .desert-plant-vine.plant-visible .vine-leaf{
  scale:.72;
}
html[data-visual-theme="desert"].plants-awake .desert-plant-vine.plant-visible .vine-rosette{
  scale:.82;
}
html[data-visual-theme="desert"].plants-awake .desert-plant-vine.plant-visible .vine-bloom{
  scale:.78;
}
.vine-bloom{ transition-delay:calc(var(--plant-delay) + 57.5s); }
.vf2{ transition-delay:calc(var(--plant-delay) + 53.4s); }
html[data-visual-theme="desert"].plants-awake .desert-plant-vine.plant-visible .vine-leaf,
html[data-visual-theme="desert"].plants-awake .desert-plant-vine.plant-visible .vine-bloom{
  animation-delay:calc(var(--plant-delay) + 63s);
}

@media (max-width:720px){
  .desert-plant-vine{
    width:min(var(--vine-width, 148px), 38vw);
    height:max(var(--vine-height, 78svh), 540px);
  }
  .vine-main{ stroke-width:3; }
  .vine-branch{ stroke-width:2.2; }
}

@media (prefers-reduced-motion:reduce){
  .desert-plant,
  .desert-plant > *,
  .wildflower,
  .vine-stem,
  .vine-branch,
  .vine-leaf,
  .vine-rosette,
  .vine-bloom{
    transition:none !important;
    animation:none !important;
  }
}


/* =========================================================
   Long-stem root alignment
   The visible roots stay flush with the bottom edge of their host layer.
   In v25 that host layer is anchored to the document footer.
   ========================================================= */
#theme-vine-layer .desert-plant-vine{
  bottom:-4px;
}


/* =========================================================
   v25 — long stems live only at the bottom of the ENTIRE PAGE
   The footer is the final physical edge of the document.  The vine layer is
   anchored there and extends upward one viewport, so the tall stems cannot
   appear at the top/hero anymore.  The footer content stays above the plants.
   ========================================================= */
#theme-vine-layer{
  top:auto;
  bottom:0;
  height:100vh;
  height:100svh;
}
footer > #theme-vine-layer{
  z-index:0;
}
footer > .wrap{
  position:relative;
  z-index:1;
}
#theme-vine-layer .vine-observer-anchor{
  bottom:clamp(56px, 8svh, 96px);
}


/* =========================================================
   v27 — guaranteed visible long stems at the REAL page bottom
   ========================================================= */
footer{
  overflow:visible;
}
footer > #theme-vine-layer{
  position:absolute;
  top:auto;
  left:0;
  right:0;
  bottom:0;
  width:100%;
  height:100vh;
  height:100svh;
  z-index:2;
  overflow:hidden;
  pointer-events:none;
}
footer > .wrap{
  position:relative;
  z-index:3;
}
#theme-vine-layer .desert-plant-vine{
  bottom:-2px;
  z-index:2;
}
html[data-visual-theme="desert"] #theme-vine-layer .desert-plant-vine.plant-visible{
  opacity:.94;
}

/* =========================================================
   v32 — coherent single long stem
   Leaves are rooted at branch endpoints; stacked base rosette and floating
   stem leaves are removed from the SVG markup entirely.
   ========================================================= */
.desert-plant-vine .vine-main{
  stroke-width:3.05;
}
.desert-plant-vine .vine-branch{
  stroke-width:1.95;
  opacity:.94;
}

/* Keep the attachment point fixed while each leaf unfolds.  The old center
   scaling made leaves pull away from their branches and appear to float. */
.desert-plant-vine .vine-leaf{
  transform-box:fill-box;
  transform-origin:0% 50%;
}
html[data-visual-theme="desert"].plants-awake .desert-plant-vine.plant-visible .vine-leaf{
  scale:.82;
}

.desert-plant-vine .vine-leaf .vine-leaf-shape{
  fill:#3AA75A;
  stroke:#217A44;
  stroke-width:1.85;
  stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
}
.desert-plant-vine .vine-leaf .vine-leaf-vein{
  fill:none !important;
  stroke:#247D46;
  stroke-width:1.05;
  stroke-linecap:round;
  opacity:.56;
  vector-effect:non-scaling-stroke;
}
.vine-variant-b .vine-leaf .vine-leaf-shape{ fill:#43AD5F; }
.vine-variant-c .vine-leaf .vine-leaf-shape{ fill:#319D54; }

/* v32 has no rosette, direct stem-leaf cluster or flowers on the tall stem. */
.desert-plant-vine .vine-rosette,
.desert-plant-vine .vine-stem-leaf,
.desert-plant-vine .vine-bloom{
  display:none !important;
}

@media (max-width:720px){
  .desert-plant-vine .vine-main{ stroke-width:2.8; }
  .desert-plant-vine .vine-branch{ stroke-width:1.8; }
}

/* =========================================================
   v33 — organic, attached long-stem foliage
   Branches are timed to the main stem's real progress. Leaves never appear
   before their own branch reaches them, so no foliage can float in space.
   ========================================================= */
.desert-plant-vine .vine-node-branch{
  transition-property:stroke-dashoffset;
  transition-duration:var(--branch-grow, 3s);
  transition-timing-function:cubic-bezier(.16,.76,.18,1);
  transition-delay:calc(var(--plant-delay) + var(--branch-delay, 0s));
}

/* Do not scale SVG leaf groups around their bounding box: that was capable of
   visually pulling the leaf away from its attachment point while unfolding.
   A soft fade is cleaner and keeps the branch endpoint locked to the leaf. */
.desert-plant-vine .vine-node-leaf{
  opacity:0;
  scale:1 !important;
  transform-origin:0 0;
  transition:opacity .78s cubic-bezier(.2,.7,.2,1);
  transition-delay:calc(var(--plant-delay) + var(--leaf-delay, 0s));
}
html[data-visual-theme="desert"].plants-awake .desert-plant-vine.plant-visible .vine-node-leaf{
  opacity:1;
  scale:1 !important;
}

.desert-plant-vine .vine-leaf-petiole{
  fill:none !important;
  stroke:#2B9551;
  stroke-width:1.65;
  stroke-linecap:round;
  vector-effect:non-scaling-stroke;
}

/* v33 node leaves already use an organic randomized transform in SVG. Keep
   the old post-growth breeze very subtle so it cannot break the connection. */
html[data-visual-theme="desert"].plants-awake .desert-plant-vine.plant-visible .vine-node-leaf{
  animation:none !important;
}

/* =========================================================
   v34 — mobile root wandering + richer branch variety
   Root X is randomized in JS with a previous-position exclusion zone.
   Side stems and SVG leaf scales are also randomized there.
   ========================================================= */
.desert-plant-vine .vine-node-branch{
  stroke-linecap:round;
  stroke-linejoin:round;
}
.desert-plant-vine .vine-node-leaf{
  transform-box:view-box;
  transform-origin:0 0;
}

/* =========================================================
   v36 — richer botanical colour / stronger plant separation
   Keep the existing geometry, rooting and growth timing intact; only improve
   botanical visibility against the sand with natural saturation, contrast and
   restrained depth.  The target is vivid living foliage, not neon green.
   ========================================================= */

/* Ordinary vegetation: restore colour energy lost by the earlier soft filter. */
html[data-visual-theme="desert"].plants-awake .desert-plant:not(.desert-plant-vine).plant-visible{
  opacity:1;
  filter:
    saturate(1.28)
    contrast(1.07)
    brightness(1.025)
    drop-shadow(0 5px 7px rgba(24,86,43,.10));
}

/* Grass gets a brighter sun-facing tip and a deeper base, improving shape
   recognition without changing blade dimensions. */
.desert-plant-grass .blade{
  background:linear-gradient(180deg,
    #A4E77D 0%,
    #70C965 32%,
    #43A957 62%,
    #1F6F3D 100%);
  box-shadow:
    0 8px 14px rgba(31,104,50,.18),
    inset 1px 0 0 rgba(255,255,255,.21);
}

/* Shrub structure: clearer stems and leaves, with enough dark green at the
   base to keep the foliage grounded in the desert palette. */
.shrub-stem{
  background:linear-gradient(180deg,
    #68AF55 0%,
    #3D8644 58%,
    #765D32 100%);
  box-shadow:0 4px 7px rgba(38,92,43,.10);
}
.shrub-leaf{
  background:linear-gradient(135deg,
    #92DD70 0%,
    #55B85E 48%,
    #27864A 100%);
  box-shadow:
    0 4px 9px rgba(31,103,50,.17),
    inset 1px 1px 0 rgba(255,255,255,.17);
}

/* Flowers remain small accents, but no longer disappear beside the stronger
   foliage. */
.wildflower{
  background:#FFF8D7;
  box-shadow:
    0 -5px 0 -1px #F4D05A,
    5px 0 0 -1px #F4D05A,
    0 5px 0 -1px #F4D05A,
    -5px 0 0 -1px #F4D05A,
    0 0 13px rgba(255,218,91,.28);
}
.f2{
  background:#FFE6EF;
  box-shadow:
    0 -5px 0 -1px #E895AE,
    5px 0 0 -1px #E895AE,
    0 5px 0 -1px #E895AE,
    -5px 0 0 -1px #E895AE,
    0 0 12px rgba(218,83,125,.22);
}

/* Single long stem at the page bottom: stronger greens and a little more
   separation from the background.  Geometry/timing stay exactly as v35. */
html[data-visual-theme="desert"].plants-awake .desert-plant-vine.plant-visible{
  opacity:.98;
  filter:
    saturate(1.22)
    contrast(1.06)
    brightness(1.02)
    drop-shadow(0 10px 15px rgba(25,89,45,.12));
}
.desert-plant-vine .vine-main{
  stroke:#178D48;
}
.desert-plant-vine .vine-branch,
.desert-plant-vine .vine-node-branch{
  stroke:#249B51;
}
.desert-plant-vine .vine-leaf-petiole{
  stroke:#289B52;
}
.desert-plant-vine .vine-leaf .vine-leaf-shape{
  fill:#43B660;
  stroke:#176F3B;
}
.desert-plant-vine .vine-leaf .vine-leaf-vein{
  stroke:#176F3D;
  opacity:.66;
}
.vine-variant-b .vine-leaf .vine-leaf-shape{ fill:#50BD67; }
.vine-variant-c .vine-leaf .vine-leaf-shape{ fill:#35AA59; }

@media (max-width:720px){
  /* Mobile screens benefit from slightly stronger separation because the
     foliage is physically smaller. */
  html[data-visual-theme="desert"].plants-awake .desert-plant:not(.desert-plant-vine).plant-visible{
    filter:
      saturate(1.31)
      contrast(1.08)
      brightness(1.03)
      drop-shadow(0 4px 6px rgba(24,86,43,.11));
  }
  html[data-visual-theme="desert"].plants-awake .desert-plant-vine.plant-visible{
    opacity:.96;
    filter:
      saturate(1.25)
      contrast(1.07)
      brightness(1.025)
      drop-shadow(0 8px 12px rgba(25,89,45,.12));
  }
}

/* =========================================================
   v37 — botanical depth / sunlit foliage
   Builds on v36 without changing plant placement, dimensions or growth.
   Adds tonal variety, subtle leaf structure and grounding so the vegetation
   reads as living forms instead of flat green silhouettes.
   ========================================================= */

/* A soft contact shadow visually plants each ordinary cluster in the dune. */
.desert-plant:not(.desert-plant-vine)::before{
  content:"";
  position:absolute;
  left:50%;
  bottom:-4px;
  width:72%;
  height:13px;
  transform:translateX(-50%) scaleX(.92);
  border-radius:50%;
  background:radial-gradient(ellipse at center,
    rgba(58,73,37,.23) 0%,
    rgba(82,76,42,.12) 46%,
    rgba(82,76,42,0) 76%);
  filter:blur(1.8px);
  opacity:0;
  transition:opacity 2.2s ease calc(var(--plant-delay) + var(--plant-shadow-start));
  pointer-events:none;
}
html[data-visual-theme="desert"].plants-awake .desert-plant:not(.desert-plant-vine).plant-visible::before{
  opacity:.72;
}

/* Individual grass blades no longer share exactly the same tone. The small
   shifts mimic sun angle and age while staying inside the same palette. */
.desert-plant-grass .blade{
  background:
    linear-gradient(90deg,
      rgba(255,255,255,.16) 0%,
      rgba(255,255,255,.035) 34%,
      rgba(18,82,43,.12) 100%),
    linear-gradient(180deg,
      #ACEB83 0%,
      #73CD67 31%,
      #43A957 62%,
      #1E6D3C 100%);
  box-shadow:
    0 8px 14px rgba(28,91,46,.19),
    inset 1px 0 0 rgba(255,255,255,.25),
    inset -1px 0 0 rgba(17,86,43,.10);
}
.desert-plant-grass .b1,
.desert-plant-grass .b5,
.desert-plant-grass .b9{
  filter:hue-rotate(-4deg) brightness(.97) saturate(1.03);
}
.desert-plant-grass .b2,
.desert-plant-grass .b6,
.desert-plant-grass .b10{
  filter:hue-rotate(3deg) brightness(1.045) saturate(1.04);
}
.desert-plant-grass .b3,
.desert-plant-grass .b7,
.desert-plant-grass .b11{
  filter:hue-rotate(-1deg) brightness(1.015);
}

/* Cylindrical stem shading makes the woody structure visible between leaves. */
.shrub-stem{
  background:
    linear-gradient(90deg,
      rgba(255,244,187,.20) 0%,
      rgba(255,255,255,.03) 31%,
      rgba(55,69,29,.16) 100%),
    linear-gradient(180deg,
      #70B95B 0%,
      #408A47 55%,
      #765C31 100%);
  box-shadow:
    0 4px 7px rgba(35,83,40,.12),
    1px 0 0 rgba(255,255,255,.08);
}

/* Leaves gain a soft sun patch and a tiny central vein. Both are intentionally
   restrained so the plant still matches the clean graphic language. */
.shrub-leaf{
  overflow:hidden;
  background:
    radial-gradient(ellipse at 27% 24%,
      rgba(237,255,190,.34) 0%,
      rgba(237,255,190,.09) 28%,
      rgba(237,255,190,0) 49%),
    linear-gradient(135deg,
      #9AE276 0%,
      #58BB60 46%,
      #27864A 100%);
  box-shadow:
    0 5px 10px rgba(27,91,45,.19),
    inset 1px 1px 0 rgba(255,255,255,.20),
    inset -1px -1px 0 rgba(25,104,52,.08);
}
.shrub-leaf::after{
  content:"";
  position:absolute;
  left:15%;
  top:53%;
  width:68%;
  height:1px;
  transform:rotate(-8deg);
  transform-origin:left center;
  border-radius:999px;
  background:linear-gradient(90deg,
    rgba(33,112,59,.62),
    rgba(33,112,59,.20) 72%,
    transparent);
  opacity:.62;
  pointer-events:none;
}
.shrub-leaf::before{
  content:"";
  position:absolute;
  left:24%;
  top:18%;
  width:27%;
  height:19%;
  border-radius:50%;
  background:rgba(248,255,215,.18);
  filter:blur(.8px);
  pointer-events:none;
}
.shrub-leaf.l2,
.shrub-leaf.l5,
.shrub-leaf.l8{
  filter:hue-rotate(4deg) brightness(.985) saturate(1.03);
}
.shrub-leaf.l3,
.shrub-leaf.l6,
.shrub-leaf.l9{
  filter:hue-rotate(-4deg) brightness(1.045) saturate(1.025);
}
.shrub-leaf.l1,
.shrub-leaf.l7,
.shrub-leaf.l10{
  filter:hue-rotate(-1deg) brightness(.965) saturate(1.05);
}

/* Keep the flower accents crisp against the fuller leaves and introduce a
   little natural variation among the secondary blooms. */
.f4{
  background:#FFF3DD;
  box-shadow:
    0 -5px 0 -1px #EDB65B,
    5px 0 0 -1px #EDB65B,
    0 5px 0 -1px #EDB65B,
    -5px 0 0 -1px #EDB65B,
    0 0 12px rgba(229,164,65,.23);
}
.f5{
  background:#F7E6FF;
  box-shadow:
    0 -5px 0 -1px #C99BD8,
    5px 0 0 -1px #C99BD8,
    0 5px 0 -1px #C99BD8,
    -5px 0 0 -1px #C99BD8,
    0 0 12px rgba(163,105,184,.20);
}

/* Long-stem foliage gets the same richer depth through tonal alternation and
   a barely visible leaf shadow. Attachment/timing remain untouched. */
.desert-plant-vine .vine-node-leaf{
  filter:drop-shadow(0 2px 1.6px rgba(18,81,40,.14));
}
.desert-plant-vine .vine-node-leaf:nth-of-type(3n + 1) .vine-leaf-shape{
  fill:#4BC368;
}
.desert-plant-vine .vine-node-leaf:nth-of-type(3n + 2) .vine-leaf-shape{
  fill:#3DB35D;
}
.desert-plant-vine .vine-node-leaf:nth-of-type(3n) .vine-leaf-shape{
  fill:#55C66D;
}
.desert-plant-vine .vine-leaf .vine-leaf-shape{
  stroke:#146D39;
  stroke-width:1.95;
}
.desert-plant-vine .vine-leaf .vine-leaf-vein{
  stroke:#176F3C;
  opacity:.72;
}
.desert-plant-vine .vine-main{
  filter:drop-shadow(0 2px 1px rgba(22,79,39,.15));
}
.desert-plant-vine .vine-node-branch{
  filter:drop-shadow(0 1.5px 1px rgba(24,83,41,.10));
}

@media (max-width:720px){
  .desert-plant:not(.desert-plant-vine)::before{
    width:76%;
    height:11px;
    opacity:.76;
  }
  .shrub-leaf::after{ opacity:.68; }
  .desert-plant-vine .vine-node-leaf{
    filter:drop-shadow(0 1.5px 1.2px rgba(18,81,40,.14));
  }
}

@media (prefers-reduced-motion:reduce){
  /* v37 adds no new motion; keep the visual depth in reduced-motion mode. */
  .desert-plant:not(.desert-plant-vine)::before{ filter:blur(1.8px); }
}

/* =========================================================
   v38 — sun-driven daylight
   The visible sun is no longer decorative only. theme.js publishes its
   live position/elevation as CSS variables while it rises, and the same
   light source now drives atmosphere, terrain, vegetation and surface depth.
   ========================================================= */

:root{
  --sun-x:13%;
  --sun-y:174px;
  --sun-light-strength:0;
  --sun-shadow-x:10px;
  --sun-shadow-y:6px;
  --sun-plant-shadow-shift:4px;
  --sun-light-angle:74deg;
  --sun-highlight:rgba(255,244,194,0);
  --sun-shadow-color:rgba(88,58,24,0);
  --sun-contact-color:rgba(68,63,35,0);
  --sun-sky-glow-alpha:0;
  --sun-haze-top-alpha:0;
  --sun-haze-ground-alpha:0;
  --sun-cloud-shadow-alpha:0;
  --sun-mountain-back-light-alpha:0;
  --sun-mountain-back-shade-alpha:0;
  --sun-mountain-mid-light-alpha:0;
  --sun-mountain-mid-shade-alpha:0;
  --sun-mountain-front-light-alpha:0;
  --sun-mountain-front-shade-alpha:0;
  --sun-terrain-flash-alpha:0;
  --sun-contact-soft-alpha:0;
  --sun-grass-light-alpha:.06;
  --sun-grass-dark-alpha:.08;
  --sun-grass-shadow-alpha:.07;
  --sun-grass-inset-alpha:.13;
  --sun-stem-light-alpha:.07;
  --sun-stem-dark-alpha:.09;
  --sun-leaf-patch-alpha:.12;
  --sun-leaf-patch-soft-alpha:.035;
  --sun-leaf-light-alpha:0;
  --sun-leaf-dark-alpha:0;
  --sun-leaf-shadow-alpha:.06;
  --sun-leaf-inset-alpha:.12;
  --sun-vine-leaf-shadow-alpha:.06;
  --sun-vine-branch-shadow-alpha:.05;
  --sun-card-shadow-alpha:.025;
  --sun-card-inset-alpha:0;
  --sun-contact-form-shadow-alpha:.035;
  --sun-contact-form-inset-alpha:0;
  --sun-header-shadow-alpha:.02;
  --sun-mobile-glow-alpha:0;
  --sun-dim-alpha:.075;
  --sun-vine-shadow-y:2.3px;
  --sun-branch-shadow-y:1.7px;
  --sun-cloud-brightness:1;
  --sun-cloud-saturation:1;
  --sun-mountain-brightness:1;
  --sun-mountain-saturation:1;
  --sun-mountain-contrast:1;
  --sun-plant-brightness:1;
  --sun-plant-saturation:1;
  --sun-ui-brightness:1;
  --sun-ui-saturation:1;
  --sun-surface-sheen-alpha:0;
}

/* A very light atmospheric dimmer makes sunrise affect the blue/sand world
   itself: low sun is softer, high sun restores the full daylight palette. */
html[data-visual-theme="desert"] body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:rgba(92,81,50,calc(var(--sun-dim-alpha) * .82));
  mix-blend-mode:multiply;
}

/* Warm aerial illumination radiates from the actual sun position. It remains
   behind all content and intensifies naturally during the sunrise timeline. */
html[data-visual-theme="desert"] #theme-landscape::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle 820px at var(--sun-x) var(--sun-y),
      rgba(255,246,204,var(--sun-sky-glow-alpha)) 0%,
      rgba(255,235,158,var(--sun-sky-glow-alpha)) 24%,
      rgba(255,228,132,var(--sun-sky-glow-alpha)) 46%,
      rgba(255,231,143,0) 78%),
    radial-gradient(circle 430px at var(--sun-x) var(--sun-y),
      var(--sun-highlight) 0%,
      rgba(255,241,183,var(--sun-sky-glow-alpha)) 26%,
      rgba(255,231,143,0) 72%);
  mix-blend-mode:screen;
  opacity:.98;
  transition:opacity .25s ease;
}
html[data-visual-theme="desert"] #theme-landscape::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(180deg,
      rgba(255,249,220,var(--sun-haze-top-alpha)) 0%,
      transparent 46%,
      rgba(176,105,32,var(--sun-haze-ground-alpha)) 100%),
    linear-gradient(180deg,
      rgba(239,203,114,0) 0%,
      rgba(239,203,114,0) 62%,
      rgba(239,203,114,.20) 82%,
      rgba(239,201,120,.46) 100%);
  mix-blend-mode:soft-light,normal;
}

/* Clouds gain a tiny cast shadow away from the sun instead of floating as
   flat white shapes. */
html[data-visual-theme="desert"] .theme-cloud{
  filter:brightness(var(--sun-cloud-brightness)) saturate(var(--sun-cloud-saturation));
  box-shadow:
    var(--sun-shadow-x) var(--sun-shadow-y) 22px
    rgba(98,79,48,var(--sun-cloud-shadow-alpha));
}

/* Terrain uses one shared directional light. The highlight starts on the
   sun-facing side and the cast shadow moves in the opposite direction. */
html[data-visual-theme="desert"] .theme-mountain{
  filter:
    brightness(var(--sun-mountain-brightness))
    saturate(var(--sun-mountain-saturation))
    contrast(var(--sun-mountain-contrast))
    drop-shadow(var(--sun-shadow-x) var(--sun-shadow-y) 18px var(--sun-shadow-color));
}
html[data-visual-theme="desert"] .theme-mountain-back{
  background:
    linear-gradient(var(--sun-light-angle),
      rgba(255,239,182,var(--sun-mountain-back-light-alpha)) 0%,
      rgba(255,239,182,0) 42%,
      rgba(107,65,24,var(--sun-mountain-back-shade-alpha)) 100%),
    linear-gradient(180deg, #C38F3E 0%, #B2722B 56%, var(--desert-continuation) 100%);
}
html[data-visual-theme="desert"] .theme-mountain-mid{
  background:
    linear-gradient(var(--sun-light-angle),
      rgba(255,240,180,var(--sun-mountain-mid-light-alpha)) 0%,
      rgba(255,240,180,0) 41%,
      rgba(111,63,20,var(--sun-mountain-mid-shade-alpha)) 100%),
    linear-gradient(180deg, #CF9843 0%, #BB6F26 54%, var(--desert-continuation) 100%);
}
html[data-visual-theme="desert"] .theme-mountain-front{
  background:
    linear-gradient(var(--sun-light-angle),
      rgba(255,244,191,var(--sun-mountain-front-light-alpha)) 0%,
      rgba(255,244,191,0) 39%,
      rgba(105,58,18,var(--sun-mountain-front-shade-alpha)) 100%),
    linear-gradient(180deg, #DAA84D 0%, #C98331 60%, var(--desert-continuation-soft) 100%);
}
html[data-visual-theme="desert"] .theme-mountain-front::after{
  background:
    radial-gradient(circle 460px at var(--sun-x) 8%,
      rgba(255,250,216,var(--sun-terrain-flash-alpha)),
      transparent 64%),
    linear-gradient(122deg, transparent 0 42%, rgba(255,239,184,.24) 43% 49%, transparent 50%),
    linear-gradient(242deg, transparent 0 54%, rgba(111,69,24,.10) 55% 61%, transparent 62%);
}

/* Existing botanical detail now follows the same source rather than assuming
   a permanently fixed highlight on the left. */
html[data-visual-theme="desert"] .desert-plant{
  filter:brightness(var(--sun-plant-brightness)) saturate(var(--sun-plant-saturation));
}
html[data-visual-theme="desert"] .desert-plant:not(.desert-plant-vine)::before{
  transform:translateX(calc(-50% + var(--sun-plant-shadow-shift))) scaleX(.92);
  background:radial-gradient(ellipse at center,
    var(--sun-contact-color) 0%,
    rgba(82,76,42,var(--sun-contact-soft-alpha)) 46%,
    rgba(82,76,42,0) 76%);
}
html[data-visual-theme="desert"] .desert-plant-grass .blade{
  background:
    linear-gradient(var(--sun-light-angle),
      rgba(255,255,224,var(--sun-grass-light-alpha)) 0%,
      rgba(255,255,255,.025) 35%,
      rgba(18,82,43,var(--sun-grass-dark-alpha)) 100%),
    linear-gradient(180deg,
      #ACEB83 0%,
      #73CD67 31%,
      #43A957 62%,
      #1E6D3C 100%);
  box-shadow:
    var(--sun-shadow-x) var(--sun-shadow-y) 14px rgba(28,91,46,var(--sun-grass-shadow-alpha)),
    inset 1px 0 0 rgba(255,255,255,var(--sun-grass-inset-alpha)),
    inset -1px 0 0 rgba(17,86,43,.10);
}
html[data-visual-theme="desert"] .shrub-stem{
  background:
    linear-gradient(var(--sun-light-angle),
      rgba(255,244,187,var(--sun-stem-light-alpha)) 0%,
      rgba(255,255,255,.025) 31%,
      rgba(55,69,29,var(--sun-stem-dark-alpha)) 100%),
    linear-gradient(180deg,#70B95B 0%,#408A47 55%,#765C31 100%);
}
html[data-visual-theme="desert"] .shrub-leaf{
  background:
    radial-gradient(ellipse at 27% 24%,
      rgba(245,255,202,var(--sun-leaf-patch-alpha)) 0%,
      rgba(237,255,190,var(--sun-leaf-patch-soft-alpha)) 28%,
      rgba(237,255,190,0) 49%),
    linear-gradient(var(--sun-light-angle),
      rgba(255,255,221,var(--sun-leaf-light-alpha)) 0%,
      rgba(255,255,255,0) 38%,
      rgba(20,83,43,var(--sun-leaf-dark-alpha)) 100%),
    linear-gradient(135deg,#9AE276 0%,#58BB60 46%,#27864A 100%);
  box-shadow:
    var(--sun-shadow-x) var(--sun-shadow-y) 12px rgba(27,91,45,var(--sun-leaf-shadow-alpha)),
    inset 1px 1px 0 rgba(255,255,255,var(--sun-leaf-inset-alpha)),
    inset -1px -1px 0 rgba(25,104,52,.08);
}
html[data-visual-theme="desert"] .desert-plant-vine .vine-node-leaf{
  filter:drop-shadow(var(--sun-plant-shadow-shift) var(--sun-vine-shadow-y) 2px rgba(18,81,40,var(--sun-vine-leaf-shadow-alpha)));
}
html[data-visual-theme="desert"] .desert-plant-vine .vine-main,
html[data-visual-theme="desert"] .desert-plant-vine .vine-node-branch{
  filter:drop-shadow(var(--sun-plant-shadow-shift) var(--sun-branch-shadow-y) 1.4px rgba(22,79,39,var(--sun-vine-branch-shadow-alpha)));
}

/* The same solar direction reaches the interface, but very gently. This is
   intentionally subtler than the scenery so readability and the clean layout
   stay unchanged. */
html[data-visual-theme="desert"] .service-card,
html[data-visual-theme="desert"] .prax9-card,
html[data-visual-theme="desert"] .principle{
  filter:brightness(var(--sun-ui-brightness)) saturate(var(--sun-ui-saturation));
  box-shadow:
    var(--sun-shadow-x) var(--sun-shadow-y) 34px rgba(95,72,27,var(--sun-card-shadow-alpha)),
    inset 0 1px 0 rgba(255,250,224,var(--sun-card-inset-alpha));
  background-image:linear-gradient(var(--sun-light-angle),
    rgba(255,248,216,var(--sun-surface-sheen-alpha)) 0%,
    rgba(255,248,216,0) 44%,
    rgba(108,78,28,0) 100%);
  background-blend-mode:screen;
}
html[data-visual-theme="desert"] .contact-form{
  filter:brightness(var(--sun-ui-brightness)) saturate(var(--sun-ui-saturation));
  box-shadow:
    var(--sun-shadow-x) var(--sun-shadow-y) 48px rgba(87,63,23,var(--sun-contact-form-shadow-alpha)),
    inset 0 1px 0 rgba(255,251,226,var(--sun-contact-form-inset-alpha));
  background-image:linear-gradient(var(--sun-light-angle),
    rgba(255,248,216,var(--sun-surface-sheen-alpha)) 0%,
    rgba(255,248,216,0) 42%,
    rgba(108,78,28,0) 100%);
  background-blend-mode:screen;
}
html[data-visual-theme="desert"] header.scrolled{
  box-shadow:var(--sun-shadow-x) var(--sun-shadow-y) 30px rgba(86,69,29,var(--sun-header-shadow-alpha));
}

@media (max-width:720px){
  html[data-visual-theme="desert"] #theme-landscape::before{
    background:
      radial-gradient(circle 520px at var(--sun-x) var(--sun-y),
        rgba(255,246,204,var(--sun-mobile-glow-alpha)) 0%,
        rgba(255,235,158,var(--sun-mobile-glow-alpha)) 28%,
        rgba(255,231,143,0) 80%),
      radial-gradient(circle 280px at var(--sun-x) var(--sun-y),
        var(--sun-highlight) 0%,
        rgba(255,235,158,var(--sun-mobile-glow-alpha)) 34%,
        rgba(255,231,143,0) 72%);
  }
}

@media (prefers-reduced-motion:reduce){
  /* Motion is removed, but the final static sun still owns the lighting. */
  html[data-visual-theme="desert"] #theme-landscape::before{ transition:none; }
}


/* =========================================================
   v44 — realism pass
   Keep the stylized identity, but make the living landscape feel less synthetic:
   gentler color variance, per-plant posture differences and more organic breeze.
   ========================================================= */
.desert-plant,
.desert-plant-vine{
  --plant-tilt:0deg;
  --plant-tone-shift:0deg;
  --plant-visible-saturation:1.18;
  --plant-visible-contrast:1.05;
  --plant-visible-brightness:1.02;
  --plant-shadow-opacity:.70;
  --plant-shadow-blur:1.8px;
  --plant-breeze-x:.9px;
  --plant-breeze-x-neg:-.65px;
  --plant-breeze-y:.14px;
  --plant-breeze-y-neg:-.14px;
  --plant-breeze-rotate:1deg;
  --plant-breeze-rotate-neg:-.62deg;
  --vine-tone-shift:0deg;
  --vine-visible-saturation:1.18;
  --vine-visible-brightness:1.02;
  --vine-visible-contrast:1.05;
  --vine-breeze-x:.62px;
  --vine-breeze-x-neg:-.44px;
  --vine-breeze-rotate:.8deg;
  --vine-breeze-rotate-neg:-.48deg;
}

.desert-plant{
  transform:translateX(-50%) translateY(15px) scale(var(--plant-scale)) rotate(var(--plant-tilt));
}
html[data-visual-theme="desert"].plants-awake .desert-plant.plant-visible{
  transform:translateX(-50%) translateY(0) scale(var(--plant-scale)) rotate(var(--plant-tilt));
}
html[data-visual-theme="desert"].plants-awake .plant-edge-left.plant-visible{
  transform:translateX(-38%) translateY(0) scale(var(--plant-scale)) rotate(calc(var(--plant-tilt) + 1.4deg));
}
html[data-visual-theme="desert"].plants-awake .plant-edge-right.plant-visible{
  transform:translateX(-62%) translateY(0) scale(var(--plant-scale)) rotate(calc(var(--plant-tilt) - 1.4deg));
}
@media (max-width:720px){
  .desert-plant{
    transform:translateX(-50%) translateY(12px) scale(var(--plant-mobile-scale)) rotate(var(--plant-tilt));
  }
  html[data-visual-theme="desert"].plants-awake .desert-plant.plant-visible{
    transform:translateX(-50%) translateY(0) scale(var(--plant-mobile-scale)) rotate(var(--plant-tilt));
  }
  html[data-visual-theme="desert"].plants-awake .plant-edge-left.plant-visible{
    transform:translateX(-32%) translateY(0) scale(var(--plant-mobile-scale)) rotate(calc(var(--plant-tilt) + 1.4deg));
  }
  html[data-visual-theme="desert"].plants-awake .plant-edge-right.plant-visible{
    transform:translateX(-68%) translateY(0) scale(var(--plant-mobile-scale)) rotate(calc(var(--plant-tilt) - 1.4deg));
  }
}

html[data-visual-theme="desert"].plants-awake .desert-plant:not(.desert-plant-vine).plant-visible{
  opacity:1;
  filter:
    hue-rotate(var(--plant-tone-shift))
    saturate(var(--plant-visible-saturation))
    contrast(var(--plant-visible-contrast))
    brightness(var(--plant-visible-brightness))
    drop-shadow(0 5px 7px rgba(24,86,43,.10));
}
@media (max-width:720px){
  html[data-visual-theme="desert"].plants-awake .desert-plant:not(.desert-plant-vine).plant-visible{
    filter:
      hue-rotate(var(--plant-tone-shift))
      saturate(var(--plant-visible-saturation))
      contrast(var(--plant-visible-contrast))
      brightness(var(--plant-visible-brightness))
      drop-shadow(0 4px 6px rgba(24,86,43,.11));
  }
}

.desert-plant:not(.desert-plant-vine)::before{
  filter:blur(var(--plant-shadow-blur));
}
html[data-visual-theme="desert"].plants-awake .desert-plant:not(.desert-plant-vine).plant-visible::before{
  opacity:var(--plant-shadow-opacity);
}

/* More organic motion: each cluster already receives randomized amplitudes
   from JS, so the breeze no longer looks synchronized or mechanical. */
html[data-visual-theme="desert"].plants-awake .desert-plant.plant-visible > *{
  animation:desert-plant-wind var(--plant-sway) cubic-bezier(.42,0,.28,1) calc(var(--plant-delay) + var(--plant-wind-start)) infinite alternate;
}
@keyframes desert-plant-wind{
  from{ translate:var(--plant-breeze-x-neg) 0; rotate:var(--plant-breeze-rotate-neg); }
  to{ translate:var(--plant-breeze-x) var(--plant-breeze-y-neg); rotate:var(--plant-breeze-rotate); }
}

/* Slight species-level variation helps the mass read as grown, not cloned. */
.desert-plant-grass .blade:nth-child(odd){ filter:brightness(.985) saturate(1.02); }
.desert-plant-grass .blade:nth-child(4n){ filter:brightness(1.035) saturate(1.04); }
.desert-plant-grass .blade:nth-child(3n){ width:4.6px; }
.shrub-leaf:nth-of-type(4n + 1){ border-radius:100% 16% 96% 14%; }
.shrub-leaf:nth-of-type(4n + 2){ border-radius:92% 18% 100% 10%; }
.shrub-leaf:nth-of-type(4n){ transform-origin:24% 78%; }

/* Vines keep the same geometry, but get slight per-stem tonal and breeze
   variance so the long foliage feels less vector-flat. */
html[data-visual-theme="desert"].plants-awake .desert-plant-vine.plant-visible{
  opacity:.98;
  filter:
    hue-rotate(var(--vine-tone-shift))
    saturate(var(--vine-visible-saturation))
    contrast(var(--vine-visible-contrast))
    brightness(var(--vine-visible-brightness))
    drop-shadow(0 10px 15px rgba(25,89,45,.12));
}
@media (max-width:720px){
  html[data-visual-theme="desert"].plants-awake .desert-plant-vine.plant-visible{
    opacity:.96;
    filter:
      hue-rotate(var(--vine-tone-shift))
      saturate(var(--vine-visible-saturation))
      contrast(var(--vine-visible-contrast))
      brightness(var(--vine-visible-brightness))
      drop-shadow(0 8px 12px rgba(25,89,45,.12));
  }
}

html[data-visual-theme="desert"].plants-awake .desert-plant-vine.plant-visible .vine-leaf,
html[data-visual-theme="desert"].plants-awake .desert-plant-vine.plant-visible .vine-bloom{
  animation:vine-leaf-breeze var(--plant-sway) cubic-bezier(.42,0,.28,1) calc(var(--plant-delay) + 24.80s) infinite alternate;
}
@keyframes vine-leaf-breeze{
  from{ translate:var(--vine-breeze-x-neg) 0; rotate:var(--vine-breeze-rotate-neg); }
  to{ translate:var(--vine-breeze-x) -.06px; rotate:var(--vine-breeze-rotate); }
}

/* A little warm atmospheric continuation under the hero makes the whole top
   scene feel less cut out and more like one lit environment. */
html[data-visual-theme="desert"] #theme-landscape{
  background:linear-gradient(180deg,
    rgba(255,255,255,0) 0%,
    rgba(255,240,193,.03) 36%,
    rgba(239,201,120,.07) 74%,
    rgba(239,201,120,.12) 100%);
}

@media (prefers-reduced-motion:reduce){
  html[data-visual-theme="desert"].plants-awake .desert-plant.plant-visible > *,
  html[data-visual-theme="desert"].plants-awake .desert-plant-vine.plant-visible .vine-leaf,
  html[data-visual-theme="desert"].plants-awake .desert-plant-vine.plant-visible .vine-bloom{
    animation:none !important;
  }
}


/* =========================================================
   v45 — natural botanical palette
   Less neon, more olive/sage/dusty greens with woody bases. Sunlight still
   adds a warm facing highlight, but the plant itself now has believable color.
   ========================================================= */
.desert-plant{
  --grass-tip:#A9B879;
  --grass-mid:#7E9A5C;
  --grass-deep:#587444;
  --grass-base:#6E5A38;
  --leaf-light:#A7B77A;
  --leaf-mid:#718B5B;
  --leaf-dark:#476C49;
  --stem-light:#768452;
  --stem-mid:#5B6C43;
  --stem-base:#72563A;
}

/* Grass: dusty sunlit tips, greener middle, dry/woody base. */
html[data-visual-theme="desert"] .desert-plant-grass .blade{
  background:
    linear-gradient(var(--sun-light-angle),
      rgba(255,246,201,var(--sun-grass-light-alpha)) 0%,
      rgba(255,255,255,.018) 34%,
      rgba(47,72,42,var(--sun-grass-dark-alpha)) 100%),
    linear-gradient(180deg,
      var(--grass-tip) 0%,
      var(--grass-mid) 34%,
      var(--grass-deep) 72%,
      var(--grass-base) 100%);
  box-shadow:
    var(--sun-shadow-x) var(--sun-shadow-y) 12px rgba(45,66,39,var(--sun-grass-shadow-alpha)),
    inset 1px 0 0 rgba(255,255,232,.13),
    inset -1px 0 0 rgba(40,61,38,.12);
}
.desert-plant-grass .blade:nth-child(5n + 1){ opacity:.94; }
.desert-plant-grass .blade:nth-child(5n + 2){ filter:brightness(.94) saturate(.92); }
.desert-plant-grass .blade:nth-child(5n + 3){ filter:brightness(1.03) saturate(.88); }
.desert-plant-grass .blade:nth-child(5n + 4){ filter:hue-rotate(-3deg) brightness(.98); }

/* Shrubs: sage/olive instead of bright emerald, with woody stems. */
html[data-visual-theme="desert"] .shrub-stem{
  background:
    linear-gradient(var(--sun-light-angle),
      rgba(255,240,189,var(--sun-stem-light-alpha)) 0%,
      rgba(255,255,255,.015) 31%,
      rgba(76,65,41,var(--sun-stem-dark-alpha)) 100%),
    linear-gradient(180deg,
      var(--stem-light) 0%,
      var(--stem-mid) 57%,
      var(--stem-base) 100%);
  box-shadow:0 3px 6px rgba(55,64,37,.10);
}
html[data-visual-theme="desert"] .shrub-leaf{
  background:
    radial-gradient(ellipse at 27% 24%,
      rgba(243,238,191,var(--sun-leaf-patch-alpha)) 0%,
      rgba(231,228,181,var(--sun-leaf-patch-soft-alpha)) 28%,
      rgba(231,228,181,0) 50%),
    linear-gradient(var(--sun-light-angle),
      rgba(255,248,213,var(--sun-leaf-light-alpha)) 0%,
      rgba(255,255,255,0) 38%,
      rgba(42,67,43,var(--sun-leaf-dark-alpha)) 100%),
    linear-gradient(135deg,
      var(--leaf-light) 0%,
      var(--leaf-mid) 49%,
      var(--leaf-dark) 100%);
  box-shadow:
    var(--sun-shadow-x) var(--sun-shadow-y) 10px rgba(45,65,40,var(--sun-leaf-shadow-alpha)),
    inset 1px 1px 0 rgba(255,255,230,.12),
    inset -1px -1px 0 rgba(45,68,42,.11);
}
.shrub-leaf::after{
  background:linear-gradient(90deg,
    rgba(54,78,49,.54),
    rgba(54,78,49,.18) 72%,
    transparent);
}
.shrub-leaf::before{
  background:rgba(244,238,192,.10);
}

/* Mature leaves are not all equally healthy: tiny dusty/dry variation. */
.shrub-leaf.l2,
.shrub-leaf.l8{ filter:hue-rotate(-4deg) brightness(.96) saturate(.89); }
.shrub-leaf.l4,
.shrub-leaf.l9{ filter:hue-rotate(3deg) brightness(1.02) saturate(.91); }
.shrub-leaf.l6{ filter:hue-rotate(-7deg) brightness(.93) saturate(.84); }

/* Vines use a deeper, quieter natural green. */
.desert-plant-vine{
  --vine-leaf-light:#557E4D;
  --vine-leaf-mid:#3F6D45;
  --vine-leaf-dark:#315B3B;
  --vine-stem-natural:#6F7B4B;
}
.desert-plant-vine .vine-main{
  stroke:var(--vine-stem-natural);
}
.desert-plant-vine .vine-branch,
.desert-plant-vine .vine-node-branch,
.desert-plant-vine .vine-leaf-petiole{
  stroke:var(--vine-leaf-mid);
}
.desert-plant-vine .vine-leaf .vine-leaf-shape,
.vine-variant-b .vine-leaf .vine-leaf-shape,
.vine-variant-c .vine-leaf .vine-leaf-shape,
.desert-plant-vine .vine-node-leaf:nth-of-type(3n + 1) .vine-leaf-shape,
.desert-plant-vine .vine-node-leaf:nth-of-type(3n + 2) .vine-leaf-shape,
.desert-plant-vine .vine-node-leaf:nth-of-type(3n) .vine-leaf-shape{
  fill:var(--vine-leaf-mid);
  stroke:var(--vine-leaf-dark);
}
.desert-plant-vine .vine-node-leaf:nth-of-type(3n + 1) .vine-leaf-shape{
  fill:var(--vine-leaf-light);
}
.desert-plant-vine .vine-node-leaf:nth-of-type(3n) .vine-leaf-shape{
  fill:var(--vine-leaf-dark);
}
.desert-plant-vine .vine-leaf .vine-leaf-vein{
  stroke:var(--vine-leaf-dark);
  opacity:.58;
}

/* Flowers are kept restrained, closer to dry-land wild flowers. */
.wildflower{
  background:#F3E8C8;
  box-shadow:
    0 -5px 0 -1px #CDAF62,
    5px 0 0 -1px #CDAF62,
    0 5px 0 -1px #CDAF62,
    -5px 0 0 -1px #CDAF62,
    0 0 9px rgba(203,171,91,.16);
}
.f2{
  background:#E8D3D4;
  box-shadow:
    0 -5px 0 -1px #B98288,
    5px 0 0 -1px #B98288,
    0 5px 0 -1px #B98288,
    -5px 0 0 -1px #B98288,
    0 0 9px rgba(169,105,114,.14);
}
.f4{
  background:#EEE0C8;
  box-shadow:
    0 -5px 0 -1px #C69D58,
    5px 0 0 -1px #C69D58,
    0 5px 0 -1px #C69D58,
    -5px 0 0 -1px #C69D58,
    0 0 9px rgba(190,142,70,.14);
}
.f5{
  background:#E5D7E4;
  box-shadow:
    0 -5px 0 -1px #A889A5,
    5px 0 0 -1px #A889A5,
    0 5px 0 -1px #A889A5,
    -5px 0 0 -1px #A889A5,
    0 0 8px rgba(139,104,137,.12);
}


/* =========================================================
   v46 — pause growth when page is unfocused + mixed palettes
   ========================================================= */
html.plants-paused[data-visual-theme="desert"] .desert-plant.plant-visible > *,
html.plants-paused[data-visual-theme="desert"] .desert-plant-vine.plant-visible .vine-leaf,
html.plants-paused[data-visual-theme="desert"] .desert-plant-vine.plant-visible .vine-bloom{
  animation-play-state:paused !important;
}

/* Most plants now use the more realistic muted palette, but a smaller share
   deliberately keep the previous brighter greens for natural-looking variety. */
html[data-visual-theme="desert"] .desert-plant.plant-palette-natural .blade{
  background:
    linear-gradient(90deg,
      rgba(255,255,255,.14) 0%,
      rgba(255,255,255,.03) 33%,
      rgba(53,66,33,.12) 100%),
    linear-gradient(180deg,
      #90BC6D 0%,
      #6C9F57 32%,
      #4F8147 63%,
      #53613A 100%);
  box-shadow:
    0 8px 14px rgba(54,83,43,.18),
    inset 1px 0 0 rgba(255,255,255,.16),
    inset -1px 0 0 rgba(57,81,46,.08);
}
html[data-visual-theme="desert"] .desert-plant.plant-palette-natural .shrub-stem{
  background:
    linear-gradient(90deg,
      rgba(240,233,186,.18) 0%,
      rgba(255,255,255,.03) 31%,
      rgba(81,72,45,.16) 100%),
    linear-gradient(180deg,
      #7CA061 0%,
      #587D49 54%,
      #775F36 100%);
  box-shadow:
    0 4px 7px rgba(54,76,40,.12),
    1px 0 0 rgba(255,255,255,.07);
}
html[data-visual-theme="desert"] .desert-plant.plant-palette-natural .shrub-leaf{
  background:
    radial-gradient(ellipse at 27% 24%,
      rgba(231,241,192,.26) 0%,
      rgba(231,241,192,.08) 28%,
      rgba(231,241,192,0) 49%),
    linear-gradient(135deg,
      #8EBC74 0%,
      #668F58 44%,
      #4E7447 100%);
  box-shadow:
    0 5px 10px rgba(47,79,43,.16),
    inset 1px 1px 0 rgba(255,255,255,.16),
    inset -1px -1px 0 rgba(56,88,49,.08);
}
html[data-visual-theme="desert"] .desert-plant.plant-palette-natural .shrub-leaf::after{
  background:linear-gradient(90deg,
    rgba(59,93,55,.56),
    rgba(59,93,55,.18) 72%,
    transparent);
}
html[data-visual-theme="desert"] .desert-plant.plant-palette-natural .wildflower{
  background:#F4ECD5;
  box-shadow:
    0 -5px 0 -1px #D9BD69,
    5px 0 0 -1px #D9BD69,
    0 5px 0 -1px #D9BD69,
    -5px 0 0 -1px #D9BD69,
    0 0 10px rgba(200,165,80,.17);
}
html[data-visual-theme="desert"] .desert-plant.plant-palette-natural .f2,
html[data-visual-theme="desert"] .desert-plant.plant-palette-natural .f5{
  background:#F2E1E7;
  box-shadow:
    0 -5px 0 -1px #C48EA1,
    5px 0 0 -1px #C48EA1,
    0 5px 0 -1px #C48EA1,
    -5px 0 0 -1px #C48EA1,
    0 0 10px rgba(168,111,132,.15);
}

html[data-visual-theme="desert"] .desert-plant-vine.plant-palette-natural .vine-main{ stroke:#2E7F4A; }
html[data-visual-theme="desert"] .desert-plant-vine.plant-palette-natural .vine-branch,
html[data-visual-theme="desert"] .desert-plant-vine.plant-palette-natural .vine-node-branch{ stroke:#427F4D; }
html[data-visual-theme="desert"] .desert-plant-vine.plant-palette-natural .vine-leaf-petiole{ stroke:#4D8756; }
html[data-visual-theme="desert"] .desert-plant-vine.plant-palette-natural .vine-leaf .vine-leaf-shape{ fill:#6A9E5E; stroke:#4B7446; }
html[data-visual-theme="desert"] .desert-plant-vine.plant-palette-natural .vine-leaf .vine-leaf-vein{ stroke:#4E7848; opacity:.66; }
html[data-visual-theme="desert"] .desert-plant-vine.plant-palette-natural .vine-bloom .petal{ fill:#F0E8D1; }
html[data-visual-theme="desert"] .desert-plant-vine.plant-palette-natural .vine-bloom > circle:first-child{ fill:#C79F55; }

/* Keep some clusters in the previous brighter palette. */
html[data-visual-theme="desert"] .desert-plant.plant-palette-classic .blade{
  background:
    linear-gradient(90deg,
      rgba(255,255,255,.16) 0%,
      rgba(255,255,255,.035) 34%,
      rgba(18,82,43,.12) 100%),
    linear-gradient(180deg,
      #ACEB83 0%,
      #73CD67 31%,
      #43A957 62%,
      #1E6D3C 100%);
}
html[data-visual-theme="desert"] .desert-plant.plant-palette-classic .shrub-stem{
  background:
    linear-gradient(90deg,
      rgba(255,244,187,.20) 0%,
      rgba(255,255,255,.03) 31%,
      rgba(55,69,29,.16) 100%),
    linear-gradient(180deg,
      #70B95B 0%,
      #408A47 55%,
      #765C31 100%);
}
html[data-visual-theme="desert"] .desert-plant.plant-palette-classic .shrub-leaf{
  background:
    radial-gradient(ellipse at 27% 24%,
      rgba(237,255,190,.34) 0%,
      rgba(237,255,190,.09) 28%,
      rgba(237,255,190,0) 49%),
    linear-gradient(135deg,
      #9AE276 0%,
      #58BB60 46%,
      #27864A 100%);
}
html[data-visual-theme="desert"] .desert-plant-vine.plant-palette-classic .vine-main{ stroke:#178D48; }
html[data-visual-theme="desert"] .desert-plant-vine.plant-palette-classic .vine-branch,
html[data-visual-theme="desert"] .desert-plant-vine.plant-palette-classic .vine-node-branch{ stroke:#249B51; }
html[data-visual-theme="desert"] .desert-plant-vine.plant-palette-classic .vine-leaf-petiole{ stroke:#289B52; }
html[data-visual-theme="desert"] .desert-plant-vine.plant-palette-classic .vine-leaf .vine-leaf-shape{ fill:#43B660; stroke:#176F3B; }
html[data-visual-theme="desert"] .desert-plant-vine.plant-palette-classic .vine-leaf .vine-leaf-vein{ stroke:#176F3D; opacity:.66; }

/* =========================================================
   v48 — stronger daylight typography contrast
   Bright sky needs firmer text, not heavier UI chrome.
   ========================================================= */
html[data-visual-theme="desert"] header nav a{
  color:#355049;
  font-size:1rem;
  letter-spacing:.01em;
  text-shadow:
    0 1px 0 rgba(255,255,255,.30),
    0 2px 12px rgba(42,65,57,.08);
}
html[data-visual-theme="desert"] header nav a:hover,
html[data-visual-theme="desert"] header nav a:focus-visible{
  color:#1E312B;
}

html[data-visual-theme="desert"] .nav-cta{
  color:#263830;
  border-color:rgba(51,76,65,.34);
  background:rgba(255,255,255,.055);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16);
  text-shadow:0 1px 0 rgba(255,255,255,.22);
}
html[data-visual-theme="desert"] .nav-cta:hover,
html[data-visual-theme="desert"] .nav-cta:focus-visible{
  border-color:rgba(36,61,51,.55);
  background:rgba(255,255,255,.10);
}

html[data-visual-theme="desert"] .hero .kicker{
  color:#C02E5B;
  text-shadow:
    0 1px 0 rgba(255,255,255,.34),
    0 2px 12px rgba(119,43,67,.10);
}

html[data-visual-theme="desert"] .logo{
  text-shadow:0 1px 0 rgba(255,255,255,.20);
}

/* =========================================================
   MOBILE SAFE PASS — theme containment only.
   No desktop rules and no desktop landscape geometry are changed.
   ========================================================= */
@media (max-width:860px){
  #theme-landscape{
    width:100%;
    max-width:100%;
    left:0;
    right:0;
  }

  /* Decorative fixed layers may be wider internally, but they must never
     create a horizontal scroll range on phones. */
  #theme-rear-flare{
    display:none !important;
  }
  #tv-snow,
  #cursor-trail,
  #glitch-overlay,
  #theme-paint-front{
    left:0 !important;
    right:0 !important;
    max-width:none !important;
  }

  /* Physical page-jolt effects look like horizontal layout drift on mobile. */
  .page-glitch-jolt,
  .page-glitch-chroma{
    animation:none !important;
    transform:none !important;
    filter:none !important;
  }
  .page-glitch-slice,
  .page-glitch-line,
  .page-glitch-band{
    display:none !important;
  }
}


/* =========================================================
   MOBILE VISUAL FIDELITY FIX — mobile-only cleanup.
   Preserve desktop as-is.
   - hide the large hero sun/moon on phones
   - remove hover/focus tooltip prompts on touch screens
   - flatten blend-heavy daylight layers so real mobile browsers
     render colors close to desktop instead of over-darkening them
   ========================================================= */
@media (max-width:860px){
  /* Remove the large decorative/clickable celestial body from the hero.
     The functional header toggle remains available. */
  .theme-celestial{
    display:none !important;
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
  }

  /* Touch devices should not show desktop hover tooltips. */
  .theme-tooltip,
  .theme-celestial::after{
    content:none !important;
    display:none !important;
  }

  /* Reduce blend / overlay effects that render much darker on some real
     mobile browsers than they do in desktop emulation. */
  html[data-visual-theme="desert"]{
    color-scheme:light !important;
  }
  html[data-visual-theme="desert"],
  html[data-visual-theme="desert"] body,
  html[data-visual-theme="desert"] main,
  html[data-visual-theme="desert"] section{
    forced-color-adjust:none;
    -webkit-tap-highlight-color:transparent;
  }
  html[data-visual-theme="desert"] body{
    background-color:#EDC26E !important;
    background-image:linear-gradient(
      180deg,
      #70C2ED 0,
      #9FD8F1 300px,
      #DDEFF5 520px,
      #F6E0A3 710px,
      #EFCA77 920px,
      #EDC26E 100%
    ) !important;
  }
  html[data-visual-theme="desert"] body::before{
    opacity:.12 !important;
  }
  html[data-visual-theme="desert"] #tv-snow,
  html[data-visual-theme="desert"] #glitch-overlay,
  html[data-visual-theme="desert"] #cursor-trail,
  html[data-visual-theme="desert"] #theme-paint-front,
  html[data-visual-theme="desert"] #theme-rear-flare{
    display:none !important;
    opacity:0 !important;
  }

  /* Keep the mobile daytime scenery visually close to the desktop look. */
  html[data-visual-theme="desert"] .theme-cloud{
    filter:none !important;
    opacity:.62 !important;
  }
  html[data-visual-theme="desert"] .theme-cloud-a{ opacity:.70 !important; }
  html[data-visual-theme="desert"] .theme-cloud-b{ opacity:.46 !important; }
  html[data-visual-theme="desert"] .theme-mountain{
    filter:none !important;
  }
  html[data-visual-theme="desert"] .theme-mountain-back{
    background:linear-gradient(180deg,#C28F43 0%,#B3722B 56%,var(--desert-continuation) 100%) !important;
    opacity:.56 !important;
  }
  html[data-visual-theme="desert"] .theme-mountain-mid{
    opacity:.76 !important;
  }
  html[data-visual-theme="desert"] .theme-mountain-front{
    opacity:.90 !important;
  }

  /* Explicit mobile text colors in daylight mode so Samsung/Android
     rendering stays aligned with the desktop composition. */
  html[data-visual-theme="desert"] header nav a,
  html[data-visual-theme="desert"] .logo,
  html[data-visual-theme="desert"] .hero h1,
  html[data-visual-theme="desert"] .hero p.lede,
  html[data-visual-theme="desert"] .hero .kicker,
  html[data-visual-theme="desert"] .prax9-hero h1,
  html[data-visual-theme="desert"] .prax9-hero p.lede,
  html[data-visual-theme="desert"] .prax9-hero .kicker,
  html[data-visual-theme="desert"] .prax9-note,
  html[data-visual-theme="desert"] .section-head h2,
  html[data-visual-theme="desert"] .section-head .eyebrow{
    color:inherit;
  }
  html[data-visual-theme="desert"] .hero h1,
  html[data-visual-theme="desert"] .prax9-hero h1,
  html[data-visual-theme="desert"] .section-head h2{
    color:#1F2822 !important;
    text-shadow:0 1px 0 rgba(255,255,255,.18) !important;
  }
  html[data-visual-theme="desert"] .hero p.lede,
  html[data-visual-theme="desert"] .prax9-hero p.lede,
  html[data-visual-theme="desert"] .prax9-note{
    color:#455245 !important;
  }
  html[data-visual-theme="desert"] .hero .kicker,
  html[data-visual-theme="desert"] .prax9-hero .kicker,
  html[data-visual-theme="desert"] .section-head .eyebrow{
    color:#C02E5B !important;
  }
}



/* =========================================================
   MOBILE DAY SCENERY TUNE
   - fewer / slightly smaller plants via JS + lighter mobile scale here
   - simpler mountain silhouette with fewer peaks
   Desktop stays untouched.
   ========================================================= */
@media (max-width:860px){
  .desert-plant{
    --plant-mobile-scale:.76;
  }
  /* Show a controlled little plant band in the top of the services section,
     so mobile still gets desert life there without returning plants to the sky. */
  .services .desert-plant.plant-mobile-band-1{
    top:clamp(78px, 19vw, 118px);
    bottom:auto;
    z-index:0;
    --plant-mobile-scale:.68;
  }
  .services .desert-plant.plant-mobile-band-1.plant-size-small{ --plant-mobile-scale:.48; }
  .services .desert-plant.plant-mobile-band-1.plant-size-medium{ --plant-mobile-scale:.68; }
  .services .desert-plant.plant-mobile-band-1.plant-size-large{ --plant-mobile-scale:.86; }

  .process .desert-plant.plant-mobile-band-2{
    top:clamp(-34px, -5vw, -12px);
    bottom:auto;
    z-index:0;
    --plant-mobile-scale:.62;
  }
  .process .desert-plant.plant-mobile-band-2.plant-size-small{ --plant-mobile-scale:.44; }
  .process .desert-plant.plant-mobile-band-2.plant-size-medium{ --plant-mobile-scale:.62; }
  .process .desert-plant.plant-mobile-band-2.plant-size-large{ --plant-mobile-scale:.78; }
  .desert-plant.plant-size-small{ --plant-mobile-scale:.52; }
  .desert-plant.plant-size-medium{ --plant-mobile-scale:.76; }
  .desert-plant.plant-size-large{ --plant-mobile-scale:.96; }

  html[data-visual-theme="desert"] .theme-mountain-back{
    display:none !important;
  }
  html[data-visual-theme="desert"] .theme-mountain-mid,
  html[data-visual-theme="desert"] .theme-mountain-front{
    left:-4vw;
    right:-4vw;
    filter:none;
  }
  html[data-visual-theme="desert"] .theme-mountain-mid{
    height:250px;
    bottom:86px;
    clip-path:polygon(0 78%, 15% 54%, 33% 74%, 49% 30%, 66% 68%, 82% 42%, 100% 72%, 100% 100%, 0 100%);
    opacity:.72;
  }
  html[data-visual-theme="desert"] .theme-mountain-front{
    height:208px;
    bottom:-10px;
    clip-path:polygon(0 70%, 13% 44%, 27% 64%, 42% 28%, 58% 62%, 73% 36%, 88% 58%, 100% 40%, 100% 100%, 0 100%);
    opacity:.90;
  }
  html[data-visual-theme="desert"] .theme-mountain-front::after{
    opacity:.45;
  }
}

@media (max-width:720px){
  .desert-plant{ height:102px; }
  .desert-plant-grass{ width:72px; height:102px; }
  .desert-plant-shrub,
  .desert-plant-flower{ width:84px; height:102px; }
  .desert-plant-grass .blade,
  .shrub-stem{ width:3px; }
  .shrub-leaf{ width:22px; height:12px; }
}

/* =========================================================
   DESKTOP CELESTIAL POSITION — mirror with the site language.
   Hebrew (RTL): physical left. English (LTR): physical right.
   Mobile remains unchanged/hidden.
   ========================================================= */
@media (min-width:861px){
  html[dir="rtl"] .theme-celestial{
    inset-inline-start:auto !important;
    inset-inline-end:auto !important;
    left:8% !important;
    right:auto !important;
  }
  html[dir="ltr"] .theme-celestial{
    inset-inline-start:auto !important;
    inset-inline-end:auto !important;
    left:auto !important;
    right:8% !important;
  }
}