/* ════════════════════════════════════════════════════════════════════════════
   Yellow Lemons — Liquid Glass
   Shared by every page. liquid-glass.js tags the page's glass surfaces:
     .lg-nav    the top menu        → floating dark glass pill
     .lg-panel  cards, panels, forms → thick rounded glass
     .lg-pill   small chips/buttons  → glass rim + springy press
     .lg-red    primary buttons      → red glass pill
   Chromium browsers also get .lg-refract, which bends the backdrop through an
   SVG lens (#lg-lens); Safari/Firefox keep the frosted version.
   ════════════════════════════════════════════════════════════════════════════ */
:root{--lg-spring:cubic-bezier(.34,1.56,.64,1)}

/* ── shared glass material ── */
.lg-panel,.lg-nav{
  isolation:isolate;
  background:
    radial-gradient(240px 170px at var(--lx,30%) var(--ly,0%),rgba(255,255,255,.10),transparent 70%),
    linear-gradient(160deg,rgba(255,255,255,.10) 0%,rgba(255,255,255,.03) 42%,rgba(255,255,255,.06) 100%)!important;
  -webkit-backdrop-filter:blur(16px) saturate(1.9) brightness(1.08)!important;
          backdrop-filter:blur(16px) saturate(1.9) brightness(1.08)!important;
  border:1px solid rgba(255,255,255,.14)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.42),
    inset 0 -1px 0 rgba(255,255,255,.10),
    inset 1px 0 0 rgba(255,255,255,.12),inset -1px 0 0 rgba(255,255,255,.06),
    inset 0 0 22px rgba(255,255,255,.05),
    0 18px 50px rgba(0,0,0,.55),0 2px 6px rgba(0,0,0,.35)!important}
html.lg-lens .lg-refract{
  -webkit-backdrop-filter:blur(16px) saturate(1.9) brightness(1.08)!important;
          backdrop-filter:url(#lg-lens) blur(5px) saturate(1.9) brightness(1.08)!important}

/* specular layers injected by the script (real elements, so page pseudo-elements stay untouched) */
.lg-sheen,.lg-rim{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:5}
.lg-sheen{background:radial-gradient(180px 140px at var(--lx,30%) var(--ly,0%),rgba(255,255,255,.26),transparent 70%);
  mix-blend-mode:screen;opacity:.75}
.lg-rim{padding:1px;
  background:linear-gradient(135deg,rgba(255,255,255,.65),rgba(255,255,255,.08) 35%,rgba(255,255,255,0) 60%,rgba(255,255,255,.18) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}

/* ── floating menu pill ── */
.lg-nav{position:fixed!important;top:14px!important;left:24px!important;right:24px!important;width:auto!important;
  border-radius:999px!important;padding-left:26px!important;padding-right:10px!important;
  background:linear-gradient(160deg,rgba(30,30,36,.62),rgba(14,14,16,.50))!important}
.lg-nav a{transition:transform .45s var(--lg-spring),background .25s,border-color .25s,color .25s}
.lg-nav a:hover{transform:scale(1.06)}
.lg-nav a:active{transform:scale(.94)}

/* ── cards & panels ── */
.lg-panel{transition:transform .6s var(--lg-spring),box-shadow .4s!important}
.lg-panel.lg-press:hover{transform:translateY(-6px) scale(1.03)!important}
.lg-panel.lg-press:active{transform:translateY(-1px) scale(.97)!important}

/* ── small chips & secondary buttons ── */
.lg-pill{border-radius:999px!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -1px 0 rgba(255,255,255,.06),0 4px 14px rgba(0,0,0,.35)!important;
  transition:transform .45s var(--lg-spring),background .25s,border-color .25s,color .25s!important}
.lg-pill:hover{transform:scale(1.06)}
.lg-pill:active{transform:scale(.94)}

/* ── primary red glass buttons ── */
.lg-red{border-radius:999px!important;color:#fff!important;
  background:linear-gradient(160deg,rgba(231,76,60,.80),rgba(160,40,30,.60))!important;
  -webkit-backdrop-filter:blur(10px) saturate(1.6);backdrop-filter:blur(10px) saturate(1.6);
  border:1px solid rgba(255,160,150,.35)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -1px 0 rgba(0,0,0,.2),0 10px 30px rgba(192,57,43,.30),0 2px 6px rgba(0,0,0,.35)!important;
  transition:transform .5s var(--lg-spring),box-shadow .3s!important}
.lg-red:hover{transform:scale(1.06)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 0 40px rgba(231,76,60,.45),0 18px 50px rgba(0,0,0,.5)!important}
.lg-red:active{transform:scale(.95)!important}

/* ── drifting lights behind the glass so there is something to refract ── */
.lg-orbs{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.lg-orbs.lg-local{position:absolute}
.lg-orbs i{position:absolute;border-radius:50%;filter:blur(50px);will-change:transform}
.lg-orbs .o1{width:520px;height:520px;left:8%;top:18%;opacity:.45;background:radial-gradient(circle,#c0392b,transparent 65%);animation:lg-orb1 16s ease-in-out infinite alternate}
.lg-orbs .o2{width:460px;height:460px;right:6%;top:42%;opacity:.30;background:radial-gradient(circle,#8a8f9c,transparent 65%);animation:lg-orb2 19s ease-in-out infinite alternate}
.lg-orbs .o3{width:380px;height:380px;left:42%;top:64%;opacity:.30;background:radial-gradient(circle,#e74c3c,transparent 65%);animation:lg-orb3 13s ease-in-out infinite alternate}
@keyframes lg-orb1{to{transform:translate(38vw,10vh) scale(1.2)}}
@keyframes lg-orb2{to{transform:translate(-40vw,-8vh) scale(.85)}}
@keyframes lg-orb3{to{transform:translate(-20vw,-30vh) scale(1.3)}}

@media(max-width:768px){.lg-nav{left:10px!important;right:10px!important;top:10px!important}}
@media(prefers-reduced-motion:reduce){.lg-orbs i{animation:none}
  .lg-panel,.lg-pill,.lg-red,.lg-nav a{transition:none!important}}

/* ── Yellow Lemons logo as the mouse cursor, on every page and every element ──
   The original 32px logo, one file only (no hi-res swap), so the browser never has to fall
   back to the normal pointer while picking or loading an image. liquid-glass.js preloads it. */
html, html *, html *::before, html *::after{cursor:url(images/cursor-mark.png) 16 16, auto!important}

/* Logo drawn by liquid-glass.js: when it is active the system pointer is hidden everywhere */
html.yl-cursor, html.yl-cursor *, html.yl-cursor *::before, html.yl-cursor *::after{cursor:none!important}
#yl-cursor{position:fixed;left:0;top:0;width:32px;height:32px;pointer-events:none;z-index:2147483647;
  opacity:0;will-change:transform;user-select:none;-webkit-user-drag:none;transition:opacity .15s;
  transform-origin:16px 16px}

/* ── locked divisions in the top menu: blurred like their cards, so the name can't be read ── */
nav a[href^="coming-soon.html"], .yl-nav a[href^="coming-soon.html"]{
  color:transparent!important;
  text-shadow:0 0 5px rgba(240,238,230,.8), 0 0 9px rgba(192,57,43,.35)!important;
  user-select:none}
nav a[href^="coming-soon.html"]:hover, .yl-nav a[href^="coming-soon.html"]:hover{
  text-shadow:0 0 3.5px rgba(240,238,230,.9), 0 0 8px rgba(192,57,43,.45)!important}