/* Culltron ambient-glow layer. Needs tokens/ambient.css. CSS only, no libraries.
   Logical properties throughout so it is RTL-safe. */
html{background:var(--void,#04060c)}
body{position:relative}
/* the cabin: two fixed light pools + a floor wash, composited once (no repaint on scroll) */
body::before{content:"";position:fixed;inset:0;z-index:9;pointer-events:none;mix-blend-mode:screen;
  background:
   radial-gradient(60vw 40vh at 85% -5%,var(--amb-a16),transparent 70%),
   radial-gradient(50vw 50vh at -10% 40%,oklch(.72 .16 calc(var(--amb-h) + 70) / .09),transparent 70%),
   radial-gradient(80vw 30vh at 50% 110%,var(--amb-a08),transparent 70%);
  transition:background 1.2s var(--ease-out,ease)}
/* edge-lit header: a lit strip under the glass bar */
.cx-header{backdrop-filter:var(--amb-glass-blur);-webkit-backdrop-filter:var(--amb-glass-blur)}
.cx-header::after{content:"";position:absolute;inset-inline:0;inset-block-end:-1px;height:1px;background:var(--amb-edge);opacity:.9;pointer-events:none}
.cx-header::before{content:"";position:absolute;inset-inline:15%;inset-block-end:-14px;height:14px;background:radial-gradient(50% 100% at 50% 0,var(--amb-a28),transparent);pointer-events:none;filter:blur(4px)}
/* buttons: lit fill + bloom */
.cx-cta,.btn.primary,.amb-btn{background:linear-gradient(135deg,var(--amb-bright),var(--amb) 45%,var(--amb-deep));color:var(--amb-ink);box-shadow:var(--amb-bloom-sm);transition:box-shadow .3s var(--ease-out,ease),transform .3s var(--ease-out,ease)}
.cx-cta:hover,.btn.primary:hover,.amb-btn:hover{box-shadow:var(--amb-bloom);transform:translateY(-1px)}
/* cards: glass + gradient edge ring that lights on hover */
.card,.amb-card{position:relative;background:var(--amb-glass),var(--surface-card-bottom,#0a101e);border:1px solid var(--line-neutral,rgba(255,255,255,.07));border-radius:18px;box-shadow:0 1px 0 rgba(255,255,255,.05) inset,0 24px 60px -34px #000;transition:box-shadow .4s var(--ease-out,ease),transform .4s var(--ease-out,ease),border-color .4s}
.card::before,.amb-card::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(140deg,var(--amb-a45),transparent 35%,transparent 65%,oklch(.72 .16 calc(var(--amb-h) + 70) / .35));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.45;transition:opacity .4s}
.card:hover,.amb-card:hover{box-shadow:var(--amb-bloom);transform:translateY(-3px)}
.card:hover::before,.amb-card:hover::before{opacity:1}
/* light trail: a thin beam running along a lit strip (transform-only animation) */
.amb-trail{position:relative;height:1px;overflow:hidden;background:var(--amb-a16)}
.amb-trail::after{content:"";position:absolute;inset-block:0;inset-inline-start:0;width:30%;background:linear-gradient(90deg,transparent,var(--amb-bright),transparent);animation:amb-trail var(--amb-dur-trail) linear infinite}
[dir="rtl"] .amb-trail::after{animation-direction:reverse}
@keyframes amb-trail{from{transform:translateX(-100%)}to{transform:translateX(430%)}}
.cx-footer{position:relative}
.cx-footer::before{content:"";position:absolute;inset-inline:0;inset-block-start:0;height:1px;background:var(--amb-edge)}
/* ambient picker */
.amb-picker{position:relative;display:inline-flex;align-items:center;gap:6px;margin-inline-start:10px}
.amb-btn-swatch{inline-size:34px;block-size:34px;border-radius:50%;border:1px solid var(--amb-a45);background:radial-gradient(circle at 35% 30%,var(--amb-bright),var(--amb) 45%,var(--amb-deep));box-shadow:var(--amb-bloom-sm);cursor:pointer}
.amb-pop{position:absolute;inset-inline-end:0;inset-block-start:calc(100% + 12px);z-index:60;inline-size:min(320px,90vw);padding:16px;border-radius:18px;background:rgba(8,13,24,.94);backdrop-filter:var(--amb-glass-blur);border:1px solid var(--amb-a28);box-shadow:var(--amb-bloom);color:var(--ink,#e8f4ff)}
.amb-pop[hidden]{display:none}
.amb-pop h2{font-size:.95rem;margin:0 0 4px}.amb-pop p{font-size:.8rem;color:var(--ink-dim,#8fa7bf);margin:0 0 12px}
.amb-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:6px}
.amb-grid button{aspect-ratio:1;border-radius:50%;border:0;cursor:pointer;background:oklch(.82 .15 var(--h));box-shadow:0 0 10px -2px oklch(.82 .15 var(--h) / .7)}
.amb-grid button[aria-pressed="true"]{outline:2px solid #fff;outline-offset:2px}
.amb-presets{display:flex;flex-wrap:wrap;gap:6px;margin-block-start:12px}
.amb-presets button{font:inherit;font-size:.75rem;padding:5px 10px;border-radius:999px;border:1px solid var(--amb-a28);background:transparent;color:inherit;cursor:pointer}
.amb-sel{display:flex;gap:8px;margin-block-start:12px}
.amb-sel label{flex:1;font-size:.72rem;color:var(--ink-dim,#8fa7bf)}
.amb-sel select{display:block;inline-size:100%;margin-block-start:4px;padding:6px;border-radius:10px;background:#0b1220;color:#e8f4ff;border:1px solid var(--amb-a28)}
@media (max-width:900px){.amb-picker{margin-inline-start:auto}}
@media (prefers-reduced-motion:reduce){.amb-trail::after{animation:none;opacity:0}.card,.amb-card,.cx-cta,.amb-btn,body::before{transition:none}.card:hover,.amb-card:hover{transform:none}}
@media (prefers-contrast:more){.card::before,.amb-card::before{opacity:1}body::before{display:none}}
/* raster emblem follows the ambient hue (art is drawn at hue 195) */
img[src*="culltron-emblem-glow"]{filter:hue-rotate(calc((var(--amb-h) - 195) * 1deg)) drop-shadow(0 0 26px rgb(var(--amb-rgb,0 212 255) / .55))!important}
/* picker: round focus ring that matches the swatch */
.amb-btn-swatch:focus{outline:none}
.cx-header .amb-btn-swatch:focus-visible,.amb-btn-swatch:focus-visible{outline:2px solid var(--amb-bright);outline-offset:3px;border-radius:50%;box-shadow:var(--amb-bloom)}
.cx-header .amb-grid button:focus-visible,.cx-header .amb-presets button:focus-visible,.amb-grid button:focus-visible,.amb-presets button:focus-visible{outline:2px solid #fff;outline-offset:2px}