/* ============================================================
   LUXLIQ — luxliq.css (v1, 2026-07-13)
   The shared fluid physics engine. Canonical spec:
   docs/brand/LUXLIQ_BRAND_SYSTEM.md (v0.2 — lava-lamp core).
   One physics, two climates:
     html[data-climate="juwel"]  — candy lava (default)
     html[data-climate="vext"]   — pastel water lamp
   Matter is liquid first. UI rises, pours, marbles, settles,
   and seals. Bounce is BANNED. Idle is alive (controlled).
   Load AFTER juwel-ds.css / vextlabs.css. Pair with
   luxliq-lamp.js for blobs, plumes, beads, and the heat model.
   ============================================================ */

:root{
  /* ── viscosity (JUWEL / candy-lava defaults) ── */
  --visc-pour:520ms;
  --visc-settle:680ms;
  --visc-bead:360ms;
  --visc-blob:6.5s;   /* owner 2026-07-13: the lamp runs livelier — was 9s */
  --visc-plume:8s;
  --visc-marble:700ms;
  --visc-seal:420ms;
  /* ── easings — luxury viscosity, zero overshoot ── */
  --ease-viscous:cubic-bezier(.22,1,.36,1);
  --ease-flow:cubic-bezier(.4,0,.15,1);
  --ease-buoyant:cubic-bezier(.37,0,.63,1);

  /* ── shared fluid colors (candy lava recipe) ── */
  --lx-nectar:#FF9A1A; --lx-nectar-2:#FFB43A;
  --lx-rose:#FF6B8A;
  --lx-mint:#3ECF8E;
  --lx-sky:#5BB7FF;
  --lx-berry:#C44B7A;
  --lx-foam:#FFF3E0;
  --lx-fluid-a:var(--lx-nectar);
  --lx-fluid-b:var(--lx-rose);
  --lx-fluid-c:var(--lx-sky);
  --lx-fluid-alpha:.22;          /* atmosphere blob opacity ceiling (owner: more life) */
  --lx-glow:rgba(255,154,26,.22);

  /* ── vessel light ── */
  --lx-edge:rgba(255,255,255,.65);
  --lx-inner-glow:inset 0 0 34px -18px var(--lx-glow);
  --lx-contact:0 20px 50px -20px rgba(20,14,8,.30);

  /* local heat (raised by pointer / her acting; read by materials) */
  --lx-heat:0;
}
html[data-theme="dark"]{
  --lx-edge:rgba(255,255,255,.06);
  --lx-glow:rgba(255,180,58,.10);
  --lx-contact:0 20px 50px -20px rgba(0,0,0,.55);
}

/* ── Vext climate: pastel water lamp — thinner, cooler, slower ── */
html[data-climate="vext"]{
  --visc-pour:640ms;
  --visc-settle:840ms;
  --visc-bead:440ms;
  --visc-blob:9.5s;
  --visc-plume:11s;
  --visc-marble:800ms;
  --visc-seal:480ms;
  --lx-fluid-a:#F2C9D0;          /* petal */
  --lx-fluid-b:#B9D5C4;          /* celadon */
  --lx-fluid-c:#F0E2B6;          /* butter mist */
  --lx-fluid-alpha:.36;
  --lx-glow:rgba(242,201,208,.30);
  --lx-nectar:#2A2622;           /* lab primary act = soft dark ink */
  --lx-nectar-2:#413C36;
}

/* ══════════════════════════════════════════════════════════
   MATERIALS — the glass is part of the brand
   ══════════════════════════════════════════════════════════ */

/* Glass vessel — a chamber you look into, not a paper card */
.lx-vessel{position:relative;
  background:var(--surface,#FFFCF8);
  border:1px solid var(--line,rgba(26,22,18,.10));
  border-radius:18px;
  box-shadow:inset 0 1px 0 var(--lx-edge),var(--lx-inner-glow),var(--lx-contact);
  transition:box-shadow var(--visc-settle) var(--ease-viscous);}
.lx-vessel:hover{--lx-heat:1;
  box-shadow:inset 0 1px 0 var(--lx-edge),
    inset 0 0 44px -16px var(--lx-glow),var(--lx-contact);}

/* Wet chrome glass — menubar / dock / palette only */
.lx-glass{background:color-mix(in srgb,var(--surface,#FFFCF8) 72%,transparent);
  backdrop-filter:blur(22px) saturate(1.4);
  -webkit-backdrop-filter:blur(22px) saturate(1.4);
  border:1px solid var(--line,rgba(26,22,18,.10));
  box-shadow:inset 0 1px 0 var(--lx-edge),0 12px 40px -20px rgba(20,14,8,.35);}

/* Hard candy gel — a set control that still looks glossy-wet */
.lx-gel{position:relative;overflow:hidden;
  border-radius:14px;
  box-shadow:inset 0 1px 0 var(--lx-edge),inset 0 -8px 14px -10px rgba(20,14,8,.18);
  transition:transform var(--visc-bead) var(--ease-viscous),
             box-shadow var(--visc-bead) var(--ease-viscous);}
.lx-gel:active{transform:scale(.975);}   /* gel compress, never bounce */

/* Molten wax — hot, lit from within (her act / primary commit) */
.lx-wax{position:relative;overflow:hidden;color:#201200;
  background:linear-gradient(160deg,var(--lx-nectar-2),var(--lx-nectar) 62%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),
    inset 0 0 26px -8px rgba(255,255,255,.35),
    0 10px 30px -14px var(--lx-glow);}
html[data-climate="vext"] .lx-wax{color:#F7F4F0;}

/* Vitrified seal — cooled fluid; the record exists */
.lx-seal{position:relative;
  background:var(--receipt-bg,#171310);color:var(--receipt-ink,#F7F1E8);
  border:1px solid rgba(255,255,255,.08);border-radius:18px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),var(--lx-contact);}
.lx-seal.is-valid{border-color:color-mix(in srgb,var(--lx-mint) 55%,transparent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 0 0 1px color-mix(in srgb,var(--lx-mint) 30%,transparent),
    var(--lx-contact);}
.lx-seal.is-invalid{border-color:color-mix(in srgb,var(--lx-berry) 55%,transparent);}

/* ══════════════════════════════════════════════════════════
   FLUID PRIMITIVES — blob · plume · bead · pool · meniscus ·
   marble · pour · seal  (name these; they are the brand)
   ══════════════════════════════════════════════════════════ */

/* Goo group — apply to a wrapper whose children are blobs.
   luxliq-lamp.js injects the #lx-goo SVG filter once per page. */
.lx-goo{filter:url(#lx-goo);}

/* Blob / wax body — buoyant metaball. Position with inline style;
   the engine varies --d (duration), --x (drift) per blob. */
.lx-blob{position:absolute;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 32% 28%,
    color-mix(in srgb,var(--lx-fluid-a) 92%,white),
    var(--lx-fluid-a) 58%,
    color-mix(in srgb,var(--lx-fluid-a) 78%,transparent));
  opacity:var(--lx-fluid-alpha);
  will-change:transform;}
.lx-blob.b2{background:radial-gradient(circle at 32% 28%,
  color-mix(in srgb,var(--lx-fluid-b) 92%,white),var(--lx-fluid-b) 58%,
  color-mix(in srgb,var(--lx-fluid-b) 78%,transparent));}
.lx-blob.b3{background:radial-gradient(circle at 32% 28%,
  color-mix(in srgb,var(--lx-fluid-c) 92%,white),var(--lx-fluid-c) 58%,
  color-mix(in srgb,var(--lx-fluid-c) 78%,transparent));}
@media (prefers-reduced-motion:no-preference){
  .lx-blob{animation:
    lx-buoy var(--d,var(--visc-blob)) var(--ease-buoyant) infinite alternate,
    lx-morph calc(var(--d,var(--visc-blob)) * 1.4) var(--ease-buoyant) infinite alternate;}
}
@keyframes lx-buoy{           /* heat rises, cool sinks — no bounce.
                                 owner 2026-07-13: full column travel */
  from{transform:translate3d(0,14%,0) scale(.94);}
  to  {transform:translate3d(var(--x,4%),-120%,0) scale(1.07);}
}
@keyframes lx-morph{
  0%  {border-radius:52% 48% 55% 45% / 48% 55% 45% 52%;}
  50% {border-radius:45% 55% 48% 52% / 55% 45% 52% 48%;}
  100%{border-radius:50% 50% 44% 56% / 46% 54% 50% 50%;}
}

/* Plume — rising column of thinner fluid (Vext atmosphere, page breath) */
.lx-plume{position:absolute;bottom:-12%;width:min(26vw,320px);height:70%;
  pointer-events:none;filter:blur(38px);
  background:linear-gradient(to top,
    color-mix(in srgb,var(--lx-fluid-a) 55%,transparent),
    color-mix(in srgb,var(--lx-fluid-b) 30%,transparent) 55%,
    transparent);
  opacity:calc(var(--lx-fluid-alpha) * .9);will-change:transform,opacity;}
@media (prefers-reduced-motion:no-preference){
  .lx-plume{animation:lx-plume-rise var(--d,var(--visc-plume)) var(--ease-buoyant) infinite alternate;}
}
@keyframes lx-plume-rise{
  from{transform:translate3d(0,8%,0) scaleY(.92);}
  to  {transform:translate3d(var(--x,3%),-10%,0) scaleY(1.06);}
}

/* Bead / droplet — discrete traveling sphere (send, notify).
   luxliq-lamp.js animates the arc; this is the body. */
.lx-bead{position:fixed;z-index:9999;width:14px;height:14px;border-radius:50%;
  pointer-events:none;
  background:radial-gradient(circle at 30% 26%,#fff8,var(--lx-nectar) 45%,var(--lx-nectar-2));
  box-shadow:0 2px 8px -2px var(--lx-glow);}

/* Pool — fluid collecting in a basin. Set --level (0–100%). */
.lx-pool{position:relative;overflow:hidden;background:var(--surface-2,#F0E8DF);
  border:1px solid var(--line,rgba(26,22,18,.10));border-radius:14px;}
.lx-pool-fluid{position:absolute;left:0;right:0;bottom:0;height:var(--level,0%);
  background:linear-gradient(to top,var(--lx-nectar),var(--lx-nectar-2));
  transition:height var(--visc-pour) var(--ease-flow);}
.lx-pool-fluid::before{content:"";position:absolute;top:-3px;left:0;right:0;height:6px;
  border-radius:50%;background:color-mix(in srgb,var(--lx-foam) 70%,var(--lx-nectar-2));
  opacity:.8;}                                   /* the meniscus */

/* Meniscus focus — wet surface tension instead of a dry ring */
.lx-meniscus{transition:box-shadow var(--visc-bead) var(--ease-viscous);}
.lx-meniscus:focus-within,.lx-meniscus:focus-visible{outline:none;
  box-shadow:inset 0 1px 0 var(--lx-edge),
    0 0 0 1.5px color-mix(in srgb,var(--lx-nectar) 70%,transparent),
    0 0 0 5px color-mix(in srgb,var(--lx-nectar) 14%,transparent),
    0 6px 18px -8px var(--lx-glow);}

/* Marble — two immiscible fluids partial-mix (specialist switch) */
.lx-marble{background:
  radial-gradient(60% 90% at 20% 30%,color-mix(in srgb,var(--lx-fluid-a) 40%,transparent),transparent 70%),
  radial-gradient(70% 80% at 80% 70%,color-mix(in srgb,var(--lx-fluid-b) 34%,transparent),transparent 70%),
  var(--surface,#FFFCF8);
  background-size:200% 200%,200% 200%,100% 100%;}
@media (prefers-reduced-motion:no-preference){
  .lx-marble.is-mixing{animation:lx-marble-veins var(--visc-marble) var(--ease-flow) both;}
}
@keyframes lx-marble-veins{
  from{background-position:0% 0%,100% 100%,0 0;}
  to  {background-position:60% 40%,30% 70%,0 0;}
}

/* Pour-in — content builds like wax filling a mold (bottom-up) */
@media (prefers-reduced-motion:no-preference){
  .lx-pour-in{animation:lx-pour var(--visc-pour) var(--ease-flow) both;}
  .lx-drain-out{animation:lx-drain var(--visc-pour) var(--ease-flow) both;}
}
@keyframes lx-pour{
  from{clip-path:inset(100% 0 0 0);opacity:.4;transform:translateY(6px);}
  60% {clip-path:inset(0 0 0 0);}
  to  {clip-path:inset(0 0 0 0);opacity:1;transform:none;}
}
@keyframes lx-drain{
  from{clip-path:inset(0 0 0 0);opacity:1;}
  to  {clip-path:inset(0 0 100% 0);opacity:0;transform:translateY(8px);}
}

/* Bloom — page/section entrance by diffusion (replaces dry .rise) */
@media (prefers-reduced-motion:no-preference){
  .lx-bloom{animation:lx-bloom var(--visc-settle) var(--ease-viscous) both;}
  .lx-bloom-2{animation:lx-bloom var(--visc-settle) var(--ease-viscous) .08s both;}
  .lx-bloom-3{animation:lx-bloom var(--visc-settle) var(--ease-viscous) .16s both;}
}
@keyframes lx-bloom{
  from{opacity:0;transform:translateY(14px) scale(.995);filter:blur(6px);}
  60% {filter:blur(0);}
  to  {opacity:1;transform:none;filter:none;}
}

/* Recoil — error: fluid contracts, berry tint, no explosion */
@media (prefers-reduced-motion:no-preference){
  .lx-recoil{animation:lx-recoil .38s var(--ease-viscous) both;}
}
@keyframes lx-recoil{
  0%{transform:scale(1);}
  35%{transform:scale(.965);box-shadow:0 0 0 3px color-mix(in srgb,var(--lx-berry) 30%,transparent);}
  100%{transform:scale(1);}
}

/* Seal ritual — cool the wax: tension tightens, edge sets, one glint */
@media (prefers-reduced-motion:no-preference){
  .lx-sealing{animation:lx-seal-set var(--visc-seal) var(--ease-viscous) both;}
}
@keyframes lx-seal-set{
  from{transform:scale(1.015);filter:saturate(1.25) brightness(1.06);}
  to  {transform:scale(1);filter:none;}
}
.lx-seal .lx-seal-edge{position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--lx-mint) 45%,transparent);
  opacity:0;transition:opacity var(--visc-seal) var(--ease-viscous);}
.lx-seal.is-valid .lx-seal-edge{opacity:1;}

/* ══════════════════════════════════════════════════════════
   COMPONENTS — liquid controls
   ══════════════════════════════════════════════════════════ */

/* Liquid toggle — molten color pours into an empty chamber */
.lx-toggle{--lv:0%;position:relative;width:52px;height:30px;flex:none;
  border-radius:999px;border:1px solid var(--line,rgba(26,22,18,.14));
  background:var(--surface-2,#F0E8DF);cursor:pointer;overflow:hidden;
  box-shadow:inset 0 2px 6px -2px rgba(20,14,8,.18);
  transition:border-color var(--visc-pour) var(--ease-flow);}
.lx-toggle::before{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,var(--lx-nectar),var(--lx-nectar-2));
  transform:translateY(calc(100% - var(--lv)));
  transition:transform var(--visc-pour) var(--ease-flow);}
.lx-toggle::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;
  border-radius:50%;background:#fff;
  box-shadow:0 1px 4px rgba(20,14,8,.28),inset 0 1px 0 #fff;
  transition:transform var(--visc-pour) var(--ease-viscous);}
.lx-toggle[aria-checked="true"],.lx-toggle.is-on{--lv:100%;
  border-color:color-mix(in srgb,var(--lx-nectar) 50%,transparent);}
.lx-toggle[aria-checked="true"]::after,.lx-toggle.is-on::after{transform:translateX(22px);}

/* Slider — fluid channel with traveling meniscus */
.lx-channel{-webkit-appearance:none;appearance:none;width:100%;height:8px;border-radius:999px;
  background:linear-gradient(to right,var(--lx-nectar) var(--lv,50%),var(--surface-2,#F0E8DF) var(--lv,50%));
  outline:none;cursor:pointer;}
.lx-channel::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;
  background:radial-gradient(circle at 32% 28%,#fff,var(--lx-foam) 60%,#EFE4D2);
  border:1px solid var(--line,rgba(26,22,18,.14));
  box-shadow:0 2px 6px rgba(20,14,8,.22);}

/* Checkbox as well-drop */
.lx-drop{appearance:none;-webkit-appearance:none;width:20px;height:20px;flex:none;
  border-radius:7px;border:1px solid var(--line,rgba(26,22,18,.2));
  background:var(--surface-2,#F0E8DF);cursor:pointer;position:relative;
  transition:background var(--visc-bead) var(--ease-viscous),border-color var(--visc-bead) var(--ease-viscous);}
.lx-drop:checked{background:var(--lx-mint);border-color:transparent;}
.lx-drop:checked::after{content:"";position:absolute;left:6px;top:2.5px;width:5px;height:10px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);}

/* Liquid tab — the ONE shared tab primitive. The active tab pours a
   nectar meniscus (fluid surface line) along its edge over the viscous
   ease; inactive tabs have none. Nectar here is the same wet-edge idiom
   as .lx-meniscus focus (a settled/selected surface tension), not a
   "JUWEL acts" fill, so the ink/nectar semantics stay intact. Pair with
   .lx-pour-in on the CREATE of a tab. Active is signalled by ANY of
   .is-active / .on / [aria-selected="true"] so every existing strip's
   own convention routes through it unchanged. Default meniscus rides the
   BOTTOM edge (horizontal strips); .lx-tab--side rides the leading edge
   (vertical navs). Bounce is impossible here — it is a scale, not a spring. */
.lx-tab{position:relative;}
.lx-tab::after{content:"";position:absolute;left:8px;right:8px;bottom:0;height:2px;
  border-radius:2px;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--lx-nectar),transparent);
  box-shadow:0 0 9px -1px var(--lx-glow);
  transform:scaleX(0);transform-origin:center;opacity:0;
  transition:transform var(--visc-pour) var(--ease-viscous),
             opacity var(--visc-pour) var(--ease-viscous);}
.lx-tab.is-active::after,.lx-tab.on::after,
.lx-tab[aria-selected="true"]::after{transform:scaleX(1);opacity:1;}
/* vertical strip: meniscus climbs the leading (inline-start) edge */
.lx-tab--side::after{left:0;right:auto;top:6px;bottom:6px;width:2px;height:auto;
  background:linear-gradient(180deg,transparent,var(--lx-nectar),transparent);
  transform:scaleY(0);}
.lx-tab--side.is-active::after,.lx-tab--side.on::after,
.lx-tab--side[aria-selected="true"]::after{transform:scaleY(1);}

/* ══════════════════════════════════════════════════════════
   ATMOSPHERE — CODE FREEZE: still OS (lava lamp BG removed)
   Ambient blobs/plumes stay OFF on the product OS surface.
   Event micro-interactions (bead/pour/seal) remain available.
   Never fights type: z-index below content, capped opacity.
   ══════════════════════════════════════════════════════════ */
.lx-lamp{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;}
.lx-lamp ~ *{position:relative;z-index:1;}
.lx-lamp--local{position:absolute;inset:auto;z-index:0;}
/* Still host + product OS: no ambient lava wallpaper */
.lx-lamp--still .lx-blob,
.lx-lamp--still .lx-plume,
html:not([data-bg="live"]) .lx-lamp:not([data-lx-lamp="live"]) .lx-blob,
html:not([data-bg="live"]) .lx-lamp:not([data-lx-lamp="live"]) .lx-plume,
html[data-bg="still"] .lx-blob,
html[data-bg="still"] .lx-plume,
html[data-surface="os"] .lx-blob,
html[data-surface="os"] .lx-plume{
  display:none !important; animation:none !important; opacity:0 !important;
}
html:not([data-bg="live"]) .lx-base-glow:not([data-lx-force]){opacity:.35;filter:blur(40px);}

/* Illuminated base — soft upward lamp light under entity / hero */
.lx-base-glow{position:absolute;left:50%;bottom:-6%;width:70%;height:38%;
  transform:translateX(-50%);pointer-events:none;filter:blur(50px);
  background:radial-gradient(50% 60% at 50% 100%,var(--lx-glow),transparent 75%);}

/* ══════════════════════════════════════════════════════════
   REDUCED MOTION — same meaning, no convection
   ══════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  .lx-blob,.lx-plume{animation:none !important;}
  .lx-pour-in,.lx-drain-out,.lx-bloom,.lx-bloom-2,.lx-bloom-3,
  .lx-sealing,.lx-recoil,.lx-marble.is-mixing{animation:none !important;opacity:1;
    clip-path:none;transform:none;filter:none;
    transition:opacity .2s ease;}
  .lx-toggle::before,.lx-toggle::after,.lx-pool-fluid{transition-duration:.15s;}
  /* liquid tab: crossfade the meniscus, no scale */
  .lx-tab::after{transform:none !important;transition:opacity .2s ease;}
  .lx-tab--side::after{transform:none !important;}
}