/* =====================================================================
   v11 — menu buttons: glass slabs + liquid-glass pill
   Built on two open-source components from the Uiverse.io library (MIT License, github.com/uiverse-io/galaxy):
     • "Read More" glass button by VashonG (hot-baboon-9): neon light bars that open up behind frosted glass,
       and the diagonal light sweep — used for the two big menu slabs.
     • "Join Now" glass button by Dashrath-Sharma (thin-mole-87): two nested glass layers — used for "البداية".
   Re-coloured to the palette #03195b · #0b2cb1 · #1951fc · #3781fc · #cbe9fd, laid out as tilted,
   stacked glass panels (the look of the reference images), and made to light up on touch (.lit), not only hover.
   ===================================================================== */

:root {
  --g1: #03195b; --g2: #0b2cb1; --g3: #1951fc; --g4: #3781fc; --g5: #cbe9fd;
  --bar: #2bd2ff;                                   /* the neon light bars */
}

/* ---------- layout: two glass slabs, stacked and gently staggered ---------- */
.orbs.slabs {
  display: flex; flex-direction: column; align-items: center; gap: calc(var(--u)*5);
  margin-top: calc(var(--u)*11); perspective: calc(var(--u)*220);
}
.orb-btn.slab {
  position: relative; width: calc(var(--u)*76); padding: 0; gap: 0;
  -webkit-tap-highlight-color: transparent; outline: none;
}
.orb-btn.slab:nth-child(1) .tl-face { translate: calc(var(--u)*4) 0; rotate: y -9deg; }
.orb-btn.slab:nth-child(2) .tl-face { translate: calc(var(--u)*-4) 0; rotate: y -9deg; }

/* ---------- neon light bars (Uiverse / VashonG): two small glowing pills at the top and bottom edge ---------- */
.orb-btn.slab::before, .orb-btn.slab::after {
  content: ""; position: absolute; left: 50%; z-index: 0; pointer-events: none;
  width: calc(var(--u)*9); height: calc(var(--u)*1.6); border-radius: 99px;
  background: var(--bar);
  box-shadow: 0 0 5px var(--bar), 0 0 15px var(--bar), 0 0 30px var(--bar), 0 0 60px var(--bar);
  transform: translateX(-50%);
  transition: all .5s cubic-bezier(.2,.8,.2,1);
  animation: barBreath 3.6s ease-in-out infinite;
}
.orb-btn.slab::before { bottom: calc(var(--u)*-.8); }
.orb-btn.slab::after  { top: calc(var(--u)*-.8); }
.orb-btn.slab:nth-child(1)::before, .orb-btn.slab:nth-child(1)::after { margin-left: calc(var(--u)*4); }
.orb-btn.slab:nth-child(2)::before, .orb-btn.slab:nth-child(2)::after { margin-left: calc(var(--u)*-4); animation-delay: -1.8s; }
@keyframes barBreath { 0%,100% { opacity: 1; } 50% { opacity: .55; } }
/* touch / hover: the bars open up behind the glass and light it from inside */
.orb-btn.slab:hover::before, .orb-btn.slab.lit::before { bottom: 0; height: 50%; width: 80%; border-radius: calc(var(--u)*6); opacity: .9; }
.orb-btn.slab:hover::after,  .orb-btn.slab.lit::after  { top: 0;    height: 50%; width: 80%; border-radius: calc(var(--u)*6); opacity: .9; }

/* ---------- the glass face ---------- */
.orb-btn.slab .tl-face {
  position: relative; z-index: 1; display: flex; flex-direction: row; align-items: center; justify-content: flex-start;
  gap: calc(var(--u)*4); width: 100%; height: calc(var(--u)*22); padding: 0 calc(var(--u)*5);
  border-radius: calc(var(--u)*6); overflow: hidden; color: #fff;
  background: linear-gradient(135deg, rgba(55,129,252,.24) 0%, rgba(11,44,177,.16) 48%, rgba(3,25,91,.42) 100%);
  border-top: 1px solid rgba(203,233,253,.42); border-bottom: 1px solid rgba(203,233,253,.12);
  -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    inset 0 0 0 1px rgba(203,233,253,.10),
    0 calc(var(--u)*3) calc(var(--u)*9) rgba(0,8,32,.55),
    0 0 calc(var(--u)*7) rgba(25,81,252,.30);
  transition: background .4s, box-shadow .4s, border-color .4s;
}
/* glowing top edge, like light catching the rim of a glass panel */
.orb-btn.slab .tl-face::before {
  content: ""; position: absolute; inset: 0 12% auto 12%; height: 1px; padding: 0; border-radius: 0;
  -webkit-mask: none; mask: none; animation: none;
  background: linear-gradient(90deg, transparent, var(--g5), transparent);
  box-shadow: 0 0 10px 1px rgba(55,129,252,.9);
}
/* diagonal light sweep (Uiverse / VashonG) */
.orb-btn.slab .tl-face::after {
  content: ""; position: absolute; top: 0; left: 0; width: 50%; height: 100%; pointer-events: none;
  background: linear-gradient(to left, rgba(255,255,255,.10), transparent);
  transform: skewX(45deg) translateX(-30%);
  transition: transform .7s ease;
}
.orb-btn.slab:hover .tl-face::after, .orb-btn.slab.lit .tl-face::after { transform: skewX(45deg) translateX(260%); }
.orb-btn.slab:hover .tl-face, .orb-btn.slab.lit .tl-face {
  border-top-color: rgba(203,233,253,.75);
  background: linear-gradient(135deg, rgba(55,129,252,.20) 0%, rgba(11,44,177,.10) 48%, rgba(3,25,91,.30) 100%);
}

/* icon in a small glass lens */
.sl-ico {
  flex: none; display: grid; place-items: center; width: calc(var(--u)*13); height: calc(var(--u)*13); border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, rgba(203,233,253,.42), rgba(25,81,252,.26) 58%, rgba(3,25,91,.35));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 0 0 0 1px rgba(203,233,253,.30), 0 0 calc(var(--u)*4) rgba(55,129,252,.55);
}
.sl-ico svg { width: 60%; height: 60%; overflow: visible; }
.sl-ico .ln { fill: none; stroke: #eef8ff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sl-ico .dim { stroke: rgba(203,233,253,.55); }
.sl-ico .acc { stroke: #5fd3f5; }

.sl-txt { display: flex; flex-direction: column; align-items: flex-start; gap: calc(var(--u)*1.2); text-align: start; }
.orb-btn.slab b { margin: 0; font-size: calc(var(--u)*5.6); font-weight: 700; color: #fff; text-shadow: 0 0 calc(var(--u)*3) rgba(55,129,252,.55); }
.orb-btn.slab small { margin: 0; font-size: calc(var(--u)*2.8); font-weight: 400; color: rgba(203,233,253,.82); opacity: 1; }

.orb-btn.slab .tl-go {
  margin: 0; margin-inline-start: auto; flex: none;
  width: calc(var(--u)*8.5); height: calc(var(--u)*8.5); border-radius: 50%; color: var(--g5);
  background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(203,233,253,.35);
  transition: background .35s, color .35s, box-shadow .35s;
}
.orb-btn.slab:hover .tl-go, .orb-btn.slab.lit .tl-go, .orb-btn.slab:active .tl-go {
  background: var(--g5); color: var(--g2); box-shadow: 0 0 calc(var(--u)*4) rgba(203,233,253,.8);
}

/* ---------- "البداية": liquid-glass pill (Uiverse / Dashrath-Sharma: two nested glass layers) ---------- */
.back-home.glass-pill {
  position: relative; z-index: 0; isolation: isolate;
  display: inline-flex; align-items: center; gap: calc(var(--u)*1.8);
  margin-top: calc(var(--u)*10); padding: calc(var(--u)*2.6) calc(var(--u)*7.5);
  font-size: calc(var(--u)*3); font-weight: 700; color: #fff; border: 0; border-radius: 99px; cursor: pointer;
  background: linear-gradient(180deg, var(--g4) 0%, var(--g3) 52%, var(--g2) 100%);
  box-shadow:
    inset 0 2px 1px rgba(255,255,255,.55),
    inset 0 -6px 12px rgba(3,25,91,.55),
    0 calc(var(--u)*2) calc(var(--u)*6) rgba(25,81,252,.65),
    0 0 0 calc(var(--u)*1.2) rgba(55,129,252,.10);
  transition: transform .25s ease, box-shadow .35s ease;
}
.back-home.glass-pill::before, .back-home.glass-pill::after {
  content: ""; position: absolute; left: 50%; top: 50%; z-index: -1; border-radius: 99px; pointer-events: none;
  translate: -50% -50%;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.55);
  transition: translate .2s;
}
.back-home.glass-pill::before { width: 97%; height: 84%; }
.back-home.glass-pill::after  { width: 88%; height: 58%; background: linear-gradient(180deg, rgba(255,255,255,.32), rgba(255,255,255,.04)); border-color: rgba(255,255,255,.35); }
.back-home.glass-pill:active { transform: scale(.92); }
.back-home.glass-pill:active::before { translate: -50% -62%; }
.back-home.glass-pill svg, .back-home.glass-pill span { position: relative; }

/* ---------- theme toggle: same glass ---------- */
.theme-btn {
  background: linear-gradient(160deg, rgba(55,129,252,.28), rgba(3,25,91,.45));
  border: 1px solid rgba(203,233,253,.32);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 0 calc(var(--u)*4) rgba(25,81,252,.45);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}

/* ---------- light (day) theme ---------- */
body.light { --bar: #3781fc; }
body.light .orb-btn.slab .tl-face {
  color: #0b2a55;
  background: linear-gradient(135deg, rgba(255,255,255,.78) 0%, rgba(203,233,253,.55) 55%, rgba(170,205,250,.45) 100%);
  border-top-color: rgba(255,255,255,.95); border-bottom-color: rgba(11,44,177,.12);
  box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(25,81,252,.14), 0 calc(var(--u)*3) calc(var(--u)*9) rgba(11,44,120,.22), 0 0 calc(var(--u)*6) rgba(55,129,252,.25);
}
body.light .orb-btn.slab .tl-face::before { background: linear-gradient(90deg, transparent, #fff, transparent); box-shadow: 0 0 10px 1px rgba(55,129,252,.6); }
body.light .orb-btn.slab b { color: #0b2a55; text-shadow: none; }
body.light .orb-btn.slab small { color: #2b5585; text-shadow: none; }
body.light .sl-ico { background: radial-gradient(circle at 35% 28%, #fff, rgba(203,233,253,.9) 60%, rgba(55,129,252,.35)); box-shadow: inset 0 0 0 1px rgba(25,81,252,.25), 0 0 calc(var(--u)*3) rgba(55,129,252,.35); }
body.light .sl-ico .ln { stroke: #0b2cb1; } body.light .sl-ico .dim { stroke: rgba(11,44,177,.45); } body.light .sl-ico .acc { stroke: #1951fc; }
body.light .orb-btn.slab .tl-go { color: #1951fc; background: rgba(255,255,255,.6); box-shadow: inset 0 0 0 1px rgba(25,81,252,.3); }
body.light .orb-btn.slab:hover .tl-go, body.light .orb-btn.slab.lit .tl-go { background: #1951fc; color: #fff; }
body.light .back-home.glass-pill {
  color: #fff; border: 0;
  background: linear-gradient(180deg, var(--g4) 0%, var(--g3) 52%, var(--g2) 100%);
  box-shadow: inset 0 2px 1px rgba(255,255,255,.55), inset 0 -6px 12px rgba(3,25,91,.45), 0 calc(var(--u)*2) calc(var(--u)*6) rgba(25,81,252,.45);
}
body.light .theme-btn { background: rgba(255,255,255,.6); }

/* ---------- lighter devices: no live blur ---------- */
body.lowfx .orb-btn.slab .tl-face, body.lowfx .theme-btn { -webkit-backdrop-filter: none; backdrop-filter: none; }
body.lowfx .orb-btn.slab .tl-face { background: linear-gradient(135deg, rgba(40,90,200,.55), rgba(8,30,110,.55) 50%, rgba(3,20,70,.7)); }
body.light.lowfx .orb-btn.slab .tl-face { background: linear-gradient(135deg, rgba(255,255,255,.92), rgba(220,238,255,.88)); }

@media (prefers-reduced-motion: reduce) {
  .orb-btn.slab::before, .orb-btn.slab::after { animation: none; }
}