/* Waitlist page (owner, 2026-10-16; redesigned the same day: email only).
   Dark only, few words, ONE action: an email pill like the hero sections on
   supahero.io, in a glass card (glass.samasante.com) over a still planet
   horizon. Mouse motion = public/js/vala-waitlist.js.
   Colours = شكل ڤالا: black, Vala blue #0040ac → indigo #4f46e5 → violet #7c3aed. */
:root {
  --wl-bg: #050508;
  --wl-text: #f4f4fb;
  --wl-muted: rgba(244, 244, 251, .64);
  --wl-faint: rgba(244, 244, 251, .3);
  --wl-glass: rgba(255, 255, 255, .055);
  --wl-glass-2: rgba(255, 255, 255, .09);
  --wl-blue: #0040ac;
  --wl-indigo: #4f46e5;
  --wl-violet: #7c3aed;
  --wl-violet-2: #a78bfa;
  --wl-ease: cubic-bezier(.22, 1, .36, 1);
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body.wl {
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column;
  background: var(--wl-bg); color: var(--wl-text);
  font-family: 'Readex Pro', 'Cairo', system-ui, sans-serif;
  overflow-x: hidden; overflow-x: clip;
  position: relative;
}

/* ── Still background: stars + the planet's lit edge (owner: «رجع الخلفية
      القديمة» — the Higgsfield video is gone) + the light that follows the mouse ── */
.wl-sky {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  background:
    radial-gradient(1px 1px at 12% 18%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(1px 1px at 28% 62%, rgba(255,255,255,.35), transparent 60%),
    radial-gradient(1.5px 1.5px at 44% 12%, rgba(255,255,255,.5), transparent 60%),
    radial-gradient(1px 1px at 63% 34%, rgba(255,255,255,.4), transparent 60%),
    radial-gradient(1px 1px at 78% 14%, rgba(255,255,255,.45), transparent 60%),
    radial-gradient(1.5px 1.5px at 88% 48%, rgba(255,255,255,.35), transparent 60%),
    radial-gradient(1px 1px at 6% 44%, rgba(255,255,255,.3), transparent 60%),
    radial-gradient(1px 1px at 54% 52%, rgba(255,255,255,.25), transparent 60%),
    radial-gradient(1px 1px at 93% 26%, rgba(255,255,255,.3), transparent 60%),
    radial-gradient(1px 1px at 35% 30%, rgba(255,255,255,.3), transparent 60%),
    radial-gradient(70% 50% at 50% 0%, rgba(79, 70, 229, .12), transparent 70%),
    #050508;
}
.wl-media { position: absolute; inset: 0; will-change: transform; }
/* The live stars (vala-waitlist.js) replace the CSS ones. */
.wl-stars { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.wl-live .wl-sky { background: radial-gradient(70% 50% at 50% 0%, rgba(79, 70, 229, .12), transparent 70%), #050508; }
/* The light that runs along the planet's edge under the mouse. */
.wl-rim {
  position: absolute; left: 0; top: 0; width: 560px; height: 190px;
  background: radial-gradient(closest-side, rgba(221, 214, 254, .85), rgba(167, 139, 250, .45) 35%, rgba(124, 58, 237, .18) 60%, transparent 80%);
  mix-blend-mode: screen; opacity: 0; transition: opacity .7s ease; will-change: transform;
}
.wl-mouse .wl-rim { opacity: 1; }
.wl-planet {
  position: absolute; left: 50%; top: calc(100% - 26vh);
  width: max(1500px, 170vw); aspect-ratio: 1; translate: -50% 0;
  border-radius: 50%;
  background: radial-gradient(closest-side, #07060f 96%, rgba(124, 58, 237, .5) 99.4%, rgba(167, 139, 250, .9) 100%);
  box-shadow:
    0 0 60px 6px rgba(124, 58, 237, .45),
    0 0 180px 40px rgba(79, 70, 229, .28),
    0 -40px 260px 60px rgba(0, 64, 172, .22);
}
.wl-spot {
  position: absolute; left: 0; top: 0; width: 720px; height: 720px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(124, 58, 237, .26), rgba(79, 70, 229, .1) 45%, transparent 72%);
  opacity: 0; transition: opacity .6s ease; will-change: transform;
}
.wl-mouse .wl-spot { opacity: 1; }

.wl-top, .wl-main, .wl-foot { position: relative; z-index: 1; }

.wl-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px clamp(16px, 4vw, 48px);
}
.wl-logo img { display: block; height: 28px; width: auto; }
.wl-link {
  color: var(--wl-muted); text-decoration: none; font-weight: 400; font-size: .9rem;
  padding: 8px 16px; border-radius: 999px; background: var(--wl-glass);
  transition: color .2s ease, background .2s ease;
}
.wl-link:hover { color: var(--wl-text); background: var(--wl-glass-2); }

/* ── Hero ── */
.wl-main {
  flex: 1; width: 100%; max-width: 860px; margin: 0 auto;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 20px 16px 14vh;
}

/* ── The glass card (owner: «Glassy أكثر»; ref glass.samasante.com) ──
   Frost + a faint tint, a thin light rim (brighter at the top and where the
   mouse is: --gx / --gy from vala-waitlist.js), and an inner sheen. */
.wl-card {
  position: relative; isolation: isolate;
  display: flex; flex-direction: column; align-items: center;
  padding: clamp(30px, 5vw, 44px) clamp(22px, 5vw, 48px) clamp(28px, 4.5vw, 38px);
  border-radius: 28px;
  background: linear-gradient(160deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .025) 55%, rgba(124, 58, 237, .06));
  -webkit-backdrop-filter: blur(22px) saturate(150%); backdrop-filter: blur(22px) saturate(150%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .22),
    inset 0 -1px 0 rgba(255, 255, 255, .04),
    0 30px 80px -40px rgba(0, 0, 0, .9),
    0 0 60px -20px rgba(124, 58, 237, .35);
  transform-style: preserve-3d; will-change: transform;
}
/* the rim: a 1px gradient ring */
.wl-card::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; z-index: -1;
  background:
    radial-gradient(260px circle at var(--gx, 50%) var(--gy, 0%), rgba(255, 255, 255, .55), transparent 60%),
    linear-gradient(160deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, .04) 40%, rgba(167, 139, 250, .22));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}
/* the sheen inside, also following the mouse */
.wl-card::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: -1; pointer-events: none;
  background: radial-gradient(420px circle at var(--gx, 50%) var(--gy, -20%), rgba(255, 255, 255, .08), transparent 60%);
}
.wl-kicker {
  margin-top: 24px;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .8rem; font-weight: 400; color: var(--wl-violet-2);
  padding: 5px 14px; border-radius: 999px; background: rgba(124, 58, 237, .14);
}
.wl-kicker::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--wl-violet-2); box-shadow: 0 0 10px var(--wl-violet-2);
}
.wl-main h1 {
  margin: 0 0 26px; font-weight: 400; line-height: 1.35;
  font-size: clamp(1.8rem, 1.1rem + 2.6vw, 2.8rem);
}

/* ── The sentence on top: the lines take turns (vala-waitlist.js) ── */
/* The owner's sentences are long (up to 15 words). Owner: «صغر النص وعرضه
   اكثر عشان مايكون سطرين» → on a tablet / computer every sentence is ONE
   line (smaller, as wide as the page); on a phone it wraps. min-height = the
   tallest one (vala-waitlist.js) so the box under it never jumps. */
.wl-main .wl-rot {
  position: relative; width: 100%; min-height: 2.7em; display: flex; align-items: center; justify-content: center;
  max-width: 760px; font-size: clamp(1.3rem, .95rem + 1.25vw, 1.95rem); line-height: 1.6;
}
.wl-rot-line { display: inline-block; transition: opacity .5s ease, translate .5s var(--wl-ease), filter .5s ease; }
.wl-rot-line.is-out { opacity: 0; translate: 0 -10px; filter: blur(6px); }
.wl-rot-line.is-in { opacity: 0; translate: 0 10px; filter: blur(6px); transition: none; }
@media (min-width: 768px) {
  .wl-main { max-width: none; }
  .wl-main .wl-rot { max-width: none; min-height: 1.6em; white-space: nowrap; font-size: clamp(1rem, calc((100vw - 64px) / 46), 2rem); }   /* the longest sentence ≈ 41 em wide → still one line */
}
@media (max-width: 480px) { .wl-main .wl-rot { min-height: 4.8em; } }

/* ── The email pill ── */
/* The glass box holds the email + «سجّلني» only (owner, 2026-10-16). */
.wl-form { width: 380px; max-width: 100%; }
.wl-form.wl-card { display: block; padding: 6px; border-radius: 999px; }
.wl-form .wl-pill { background: none; box-shadow: none; padding: 0; }
.wl-form.wl-card:focus-within { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 0 0 2px rgba(124, 58, 237, .7), 0 30px 80px -40px rgba(0, 0, 0, .9); }
.wl-pill {
  display: flex; align-items: center; gap: 4px;
  padding: 4px; border-radius: 999px;
  background: rgba(5, 5, 12, .35);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .4), inset 0 0 0 1px rgba(255, 255, 255, .08);
  transition: box-shadow .2s ease;
}
.wl-pill:focus-within { box-shadow: inset 0 1px 2px rgba(0, 0, 0, .4), 0 0 0 2px rgba(124, 58, 237, .75); }
.wl-pill input {
  flex: 1; min-width: 0; font: inherit; font-size: .88rem; color: var(--wl-text);
  padding: 8px 14px; border: 0; background: none; outline: none;
  direction: ltr; text-align: left;
}
.wl-pill input::placeholder { color: var(--wl-faint); }
.wl-err { margin: 10px 0 0; color: #fca5a5; font-size: .85rem; }
.wl-hp { position: absolute !important; width: 1px; height: 1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); opacity: 0; pointer-events: none; }

.wl-btn {
  flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 8px 18px; border: 0; border-radius: 999px;
  font: inherit; font-weight: 500; font-size: .86rem; color: #fff; text-decoration: none; cursor: pointer;
  background: linear-gradient(90deg, var(--wl-blue), var(--wl-indigo), var(--wl-violet));
  transition: transform .15s ease, filter .15s ease;
}
.wl-btn { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 6px 20px -8px rgba(124, 58, 237, .8); }
.wl-btn:hover { filter: brightness(1.12); }
.wl-btn:active { transform: scale(.98); }



/* ── Done ── */
.wl-check {
  width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
  color: #fff; font-size: 1.5rem; font-weight: 500;
  background: linear-gradient(135deg, var(--wl-indigo), var(--wl-violet));
  box-shadow: 0 0 40px rgba(124, 58, 237, .55);
}
.wl-done { display: flex; flex-direction: column; align-items: center; }
.wl-done h1 { margin: 18px 0 0; }

/* ── Entrance: once, transform + opacity only ── */
.wl-in { animation: wlIn .8s var(--wl-ease) both; }
.wl-in.d1 { animation-delay: .08s; }
.wl-in.d2 { animation-delay: .16s; }
.wl-in.d3 { animation-delay: .24s; }
.wl-in.d4 { animation-delay: .32s; }
@keyframes wlIn { from { opacity: 0; translate: 0 14px; } }

/* ── Footer + the team's hidden door ── */
.wl-foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px;
  padding: 18px 16px 26px; color: var(--wl-faint); font-size: .82rem;
}
/* Looks like plain text: the hidden door for the team. */
.wl-door { all: unset; cursor: default; padding: 0 2px; }
.wl-mail { color: inherit; text-decoration: none; }
.wl-mail:hover { color: var(--wl-text); }
.wl-code { flex-basis: 100%; display: flex; justify-content: center; align-items: center; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.wl-code[hidden] { display: none; }
.wl-code input {
  width: 110px; font: inherit; text-align: center; letter-spacing: .3em;
  color: var(--wl-text); background: var(--wl-glass-2); border: 0; border-radius: 10px; padding: 8px; outline: none;
}
.wl-code button { all: unset; cursor: pointer; padding: 6px 10px; border-radius: 10px; background: var(--wl-glass-2); color: var(--wl-text); }
.wl-code small { flex-basis: 100%; text-align: center; color: #fca5a5; }

/* Phone: the button under the field, both full width. */
@media (max-width: 480px) {
  .wl-form { width: 320px; }
  .wl-form.wl-card { border-radius: 22px; }
  .wl-pill { flex-direction: column; align-items: stretch; border-radius: 18px; padding: 6px; }
  .wl-pill input { text-align: center; padding: 10px 12px; }
  .wl-btn { padding: 10px 18px; border-radius: 13px; }
  .wl-card { border-radius: 24px; }
  .wl-planet { top: calc(100% - 18vh); }
}
@media (prefers-reduced-motion: reduce) {
  .wl-in { animation: none; }
  .wl-btn, .wl-pill, .wl-link { transition: none; }
}