/* 🪐 «البوابة» — the first screen. Hidden unless the head script set html.gate-on,
   so without JavaScript (and for crawlers) the home page is simply the home page. */
.gate { display: none; }
html.gate-on { overflow: hidden; }
html.gate-on body { overflow: hidden; }
html.gate-on .gate { display: block; }
html.gate-on .nav { visibility: hidden; }

.gate {
  --g-bg: #05060d; --g-ink: #eef1ff; --g-dim: rgb(238 241 255 / .66); --g-line: rgb(255 255 255 / .1); --g-card: rgb(255 255 255 / .05);
  position: fixed; inset: 0; z-index: 200; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
  background: var(--g-bg); color: var(--g-ink); isolation: isolate;
  transition: background .6s, color .6s, opacity .7s var(--ease, cubic-bezier(.2,.8,.2,1)), transform .9s var(--ease, cubic-bezier(.2,.8,.2,1)), filter .7s;
}
html[data-theme="light"] .gate[data-step="go"] { --g-bg: #f6f7fb; --g-ink: #0b1020; --g-dim: rgb(11 16 32 / .62); --g-line: rgb(11 16 32 / .09); --g-card: rgb(255 255 255 / .75); }
.gate.is-leaving { opacity: 0; transform: scale(1.08); filter: blur(6px); pointer-events: none; }
.gate.is-gone { display: none !important; }

/* sky: slow aurora blobs + canvas stars */
.gate-sky { position: absolute; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; }
.gate-sky i { position: absolute; width: 60vmax; height: 60vmax; border-radius: 50%; filter: blur(80px); opacity: .45; animation: gateDrift 22s ease-in-out infinite alternate; }
.gate-sky i:nth-child(1) { background: #7c3aed; top: -25vmax; inset-inline-start: -15vmax; }
.gate-sky i:nth-child(2) { background: #0891b2; bottom: -30vmax; inset-inline-end: -20vmax; animation-delay: -8s; }
.gate-sky i:nth-child(3) { background: #db2777; top: 30%; inset-inline-start: 40%; width: 34vmax; height: 34vmax; opacity: .22; animation-delay: -14s; }
html[data-theme="light"] .gate[data-step="go"] .gate-sky i { opacity: .2; }
.gate-stars { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; transition: opacity .6s; }
html[data-theme="light"] .gate[data-step="go"] .gate-stars { opacity: 0; }
@keyframes gateDrift { to { transform: translate(6vmax, 4vmax) scale(1.12); } }

/* eclipse: the chosen world floods the screen from the click point */
.gate-eclipse { position: fixed; z-index: 5; left: var(--ex, 50%); top: var(--ey, 50%); width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; pointer-events: none; transform: scale(0); background: var(--ec, #f6f7fb); }
.gate.is-eclipsing .gate-eclipse { animation: gateFlood .85s cubic-bezier(.7,0,.2,1) forwards; }
@keyframes gateFlood { 0% { transform: scale(0); opacity: 1; } 70% { transform: scale(var(--es, 400)); opacity: 1; } 100% { transform: scale(var(--es, 400)); opacity: 0; } }

/* top bar */
.gate-top { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: clamp(14px, 3vw, 24px) clamp(16px, 4vw, 40px); }
.gate-brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: .86rem; letter-spacing: .01em; }
.gate-logo { display: inline-grid; width: 30px; height: 30px; }
.gate-logo svg { width: 100%; height: 100%; }
.gate-top-actions { display: inline-flex; gap: 8px; }
.gate-chip { appearance: none; border: 1px solid var(--g-line); background: var(--g-card); color: inherit; font: inherit; font-size: .8rem; font-weight: 800; padding: 7px 14px; border-radius: 999px; cursor: pointer; text-decoration: none; backdrop-filter: blur(10px); transition: background .25s, transform .25s; }
.gate-chip:hover { transform: translateY(-1px); background: rgb(124 58 237 / .18); }

.gate-h { font-size: clamp(2rem, 6vw, 4rem); font-weight: 900; line-height: 1.08; letter-spacing: -.02em; }
.gate-h em { font-style: normal; background: linear-gradient(120deg, #a78bfa, #22d3ee 55%, #f472b6); -webkit-background-clip: text; background-clip: text; color: transparent; }
.gate-p { max-width: 560px; margin-inline: auto; color: var(--g-dim); font-size: clamp(.95rem, 1.6vw, 1.1rem); line-height: 1.8; }

/* ① pick — two worlds */
.gate-pick { min-height: calc(100dvh - 90px); display: grid; align-content: center; gap: clamp(22px, 4vw, 40px); padding: 0 clamp(16px, 4vw, 40px) 40px; text-align: center; }
.gate-pick-head { display: grid; gap: 14px; animation: gateRise .9s .1s both var(--ease, cubic-bezier(.2,.8,.2,1)); }
.gate-worlds { display: flex; gap: clamp(12px, 2vw, 22px); width: min(1040px, 100%); margin-inline: auto; height: clamp(300px, 52vh, 460px); }
.gate-world { position: relative; flex: 1; min-width: 0; border: 0; padding: 0; cursor: pointer; border-radius: 34px; overflow: hidden; font: inherit; color: inherit; text-align: start; transition: flex .7s cubic-bezier(.2,.8,.2,1), transform .5s, box-shadow .5s; animation: gateRise .9s both var(--ease, cubic-bezier(.2,.8,.2,1)); }
.gate-world.is-day { animation-delay: .25s; background: linear-gradient(170deg, #bfe3ff 0%, #e9f3ff 55%, #fff7e6 100%); color: #0b1020; box-shadow: 0 30px 80px -40px rgb(59 130 246 / .7); }
.gate-world.is-night { animation-delay: .38s; background: linear-gradient(170deg, #050816 0%, #1b1446 60%, #2a1250 100%); color: #eef1ff; box-shadow: 0 30px 80px -40px rgb(124 58 237 / .8), inset 0 0 0 1px rgb(255 255 255 / .08); }
@media (hover: hover) and (min-width: 760px) {
  .gate-worlds:hover .gate-world { flex: .75; }
  .gate-worlds .gate-world:hover { flex: 1.45; }
}
.gate-world:focus-visible { outline: 3px solid #a78bfa; outline-offset: 4px; }
.gate-world:active { transform: scale(.985); }
.gw-scene { position: absolute; inset: 0; }
.gw-sun { position: absolute; top: 18%; inset-inline-end: 18%; width: 92px; height: 92px; border-radius: 50%; background: radial-gradient(circle at 40% 40%, #fff7c2, #fbbf24 55%, #f59e0b); box-shadow: 0 0 0 18px rgb(251 191 36 / .18), 0 0 0 40px rgb(251 191 36 / .08), 0 0 90px #fbbf24; animation: gateSun 6s ease-in-out infinite; }
.gw-cloud { position: absolute; height: 26px; border-radius: 99px; background: #fff; opacity: .9; box-shadow: 18px -10px 0 4px #fff, 40px 0 0 0 #fff; animation: gateCloud 16s linear infinite; }
.gw-cloud.c1 { top: 30%; width: 60px; inset-inline-start: -20%; }
.gw-cloud.c2 { top: 48%; width: 46px; inset-inline-start: -40%; animation-duration: 22s; animation-delay: -9s; opacity: .7; }
.gw-moon { position: absolute; top: 16%; inset-inline-end: 20%; width: 86px; height: 86px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff, #c7d2fe 60%, #818cf8); box-shadow: 0 0 60px rgb(167 139 250 / .7); }
.gw-moon::after { content: ""; position: absolute; inset: -4px -14px -4px 14px; border-radius: 50%; background: #120e33; }
[dir="rtl"] .gw-moon::after { inset: -4px 14px -4px -14px; }
.gw-star { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #fff; box-shadow: 0 0 10px #fff; animation: gateTwinkle 2.6s ease-in-out infinite; }
.gw-star.s1 { top: 20%; inset-inline-start: 22%; } .gw-star.s2 { top: 42%; inset-inline-start: 46%; animation-delay: -.9s; } .gw-star.s3 { top: 12%; inset-inline-start: 58%; animation-delay: -1.7s; }
.gw-hill { position: absolute; inset-inline: -10%; bottom: -38%; height: 70%; border-radius: 50% 50% 0 0; }
.is-day .gw-hill { background: linear-gradient(#ffffff, #dbeafe); box-shadow: 0 -2px 0 rgb(255 255 255 / .8); }
.is-night .gw-hill { background: linear-gradient(#2b1d6b, #0b0a24); box-shadow: 0 -1px 0 rgb(167 139 250 / .4); }
.gw-label { position: absolute; inset-inline-start: clamp(20px, 3vw, 34px); bottom: clamp(20px, 3vw, 32px); display: grid; gap: 4px; }
.gw-label b { font-size: clamp(2rem, 5vw, 3.4rem); font-weight: 900; line-height: 1; letter-spacing: -.02em; }
.gw-label small { font-size: .9rem; font-weight: 700; opacity: .7; }
@keyframes gateSun { 50% { transform: scale(1.06); } }
@keyframes gateCloud { to { transform: translateX(260%); } }
[dir="rtl"] .gw-cloud { animation-name: gateCloudRtl; }
@keyframes gateCloudRtl { to { transform: translateX(-260%); } }
@keyframes gateTwinkle { 50% { opacity: .2; transform: scale(.6); } }
@keyframes gateRise { from { opacity: 0; transform: translateY(26px); } }

/* ② go — the path */
.gate-go { display: none; min-height: calc(100dvh - 90px); align-content: center; justify-items: center; gap: 16px; padding: 0 clamp(16px, 4vw, 40px) 48px; text-align: center; }
.gate[data-step="go"] .gate-pick { display: none; }
.gate[data-step="go"] .gate-go { display: grid; }
.gate[data-step="go"] .gate-go > * { animation: gateRise .8s both var(--ease, cubic-bezier(.2,.8,.2,1)); }
.gate-go > :nth-child(2) { animation-delay: .08s !important; } .gate-go > :nth-child(3) { animation-delay: .16s !important; }
.gate-go > :nth-child(4) { animation-delay: .24s !important; } .gate-go > :nth-child(5) { animation-delay: .32s !important; }

.gate-planet { position: relative; width: 130px; height: 130px; margin-bottom: 4px; }
.gp-core { position: absolute; inset: 38px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff 0, #c4b5fd 14%, #7c3aed 45%, #1e1b4b 88%); box-shadow: 0 0 60px rgb(124 58 237 / .7); animation: gateSun 3s ease-in-out infinite; }
.gp-ring { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgb(124 58 237 / .35); animation: gateSpin 7s linear infinite; }
.gp-ring.r2 { inset: 18px; border-color: rgb(6 182 212 / .45); animation-duration: 4.6s; animation-direction: reverse; }
.gp-ring.r3 { inset: -18px; border-color: rgb(236 72 153 / .25); animation-duration: 11s; }
.gp-ring i { position: absolute; top: -4px; left: 50%; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: #22d3ee; box-shadow: 0 0 14px #22d3ee; }
.gp-ring.r2 i { background: #a78bfa; box-shadow: 0 0 14px #a78bfa; } .gp-ring.r3 i { background: #f472b6; box-shadow: 0 0 14px #f472b6; }
@keyframes gateSpin { to { transform: rotate(360deg); } }

.gate-pulse { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 8px; max-width: 760px; padding: 9px 16px; border-radius: 999px; border: 1px solid var(--g-line); background: var(--g-card); color: inherit; text-decoration: none; font-size: .84rem; backdrop-filter: blur(10px); transition: border-color .3s; }
.gate-pulse:hover { border-color: rgb(34 197 94 / .55); }
.gp-dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 0 rgb(34 197 94 / .6); animation: gatePing 1.8s infinite; }
.gate-pulse b { color: #22c55e; font-weight: 900; }
.gp-sep, .gp-lbl { color: var(--g-dim); }
.gp-title { font-weight: 800; }
.gate-pulse em { font-style: normal; font-weight: 900; font-size: .74rem; padding: 2px 9px; border-radius: 99px; color: #fff; background: linear-gradient(135deg, #7c3aed, #2563eb); }
@keyframes gatePing { 70% { box-shadow: 0 0 0 9px rgb(34 197 94 / 0); } 100% { box-shadow: 0 0 0 0 rgb(34 197 94 / 0); } }

.gate-paths { display: grid; gap: 12px; width: min(880px, 100%); margin-top: 10px; text-align: start; }
@media (min-width: 860px) { .gate-paths { grid-template-columns: 1.65fr 1fr; } }
.gate-path { position: relative; display: grid; gap: 14px; padding: 18px; border-radius: 28px; border: 1px solid var(--g-line); background: var(--g-card); backdrop-filter: blur(14px); color: inherit; font: inherit; text-align: start; overflow: hidden; }
.gate-path.is-try { background: linear-gradient(135deg, rgb(124 58 237 / .22), rgb(8 145 178 / .14)); border-color: rgb(124 58 237 / .35); }
.gate-path.is-try::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: conic-gradient(from var(--gang, 0deg), transparent 0 70%, #a78bfa 80%, #22d3ee 88%, transparent 96%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: gateBorder 5s linear infinite; pointer-events: none; }
@property --gang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes gateBorder { to { --gang: 360deg; } }
.gpath-head { display: flex; align-items: center; gap: 12px; }
.gpath-head b, .gate-path.is-explore b { display: block; font-size: 1.15rem; font-weight: 900; }
.gpath-head small, .gate-path.is-explore small { display: block; color: var(--g-dim); font-size: .84rem; margin-top: 2px; }
.gpath-ic { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; color: #fff; background: linear-gradient(135deg, #7c3aed, #2563eb); box-shadow: 0 12px 26px -12px #7c3aed; }
.gpath-ic .ic { width: 22px; height: 22px; }
.is-explore .gpath-ic { background: linear-gradient(135deg, #0891b2, #22c55e); box-shadow: 0 12px 26px -12px #0891b2; }

.gate-roles { display: grid; gap: 8px; }
@media (min-width: 560px) { .gate-roles { grid-template-columns: repeat(3, 1fr); } }
.gate-role { position: relative; display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 18px; text-decoration: none; color: inherit; background: rgb(255 255 255 / .06); border: 1px solid var(--g-line); transition: transform .35s, background .3s, border-color .3s, box-shadow .35s; }
html[data-theme="light"] .gate[data-step="go"] .gate-role { background: #fff; }
@media (min-width: 560px) { .gate-role { flex-direction: column; align-items: flex-start; padding: 14px; } }
.gate-role:hover, .gate-role:focus-visible { transform: translateY(-4px); border-color: rgb(124 58 237 / .6); box-shadow: 0 22px 40px -24px rgb(124 58 237 / .9); outline: none; }
.gr-ic { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: rgb(124 58 237 / .16); color: #a78bfa; }
html[data-theme="light"] .gate[data-step="go"] .gr-ic { color: #6d28d9; }
.gr-ic .ic { width: 20px; height: 20px; }
.gr-t { display: grid; gap: 1px; min-width: 0; }
.gr-t small { font-size: .7rem; color: var(--g-dim); font-weight: 700; }
.gr-t b { font-size: 1.05rem; font-weight: 900; }
.gr-t em { font-style: normal; font-size: .76rem; color: var(--g-dim); }
.gr-arrow { margin-inline-start: auto; font-weight: 900; opacity: .5; transition: transform .3s, opacity .3s; }
[dir="ltr"] .gr-arrow { transform: scaleX(-1); }
@media (min-width: 560px) { .gate-role .gr-arrow { position: absolute; top: 14px; inset-inline-end: 14px; } }
.gate-role:hover .gr-arrow { opacity: 1; transform: translateX(-4px); }
[dir="ltr"] .gate-role:hover .gr-arrow { transform: scaleX(-1) translateX(-4px); }
.gr-closed { display: none; font-size: .68rem; font-weight: 900; padding: 2px 8px; border-radius: 99px; background: rgb(148 163 184 / .2); color: var(--g-dim); }
.gate-role.is-closed { opacity: .5; pointer-events: none; }
.gate-role.is-closed .gr-closed { display: inline-block; }
.gate-role.is-closed .gr-arrow { display: none; }

.gate-path.is-explore { display: flex; align-items: center; gap: 12px; cursor: pointer; transition: transform .35s, border-color .3s; }
.gate-path.is-explore:hover, .gate-path.is-explore:focus-visible { transform: translateY(-3px); border-color: rgb(8 145 178 / .55); outline: none; }

.gate-back { appearance: none; margin-top: 10px; border: 0; background: none; color: var(--g-dim); font: inherit; font-size: .84rem; font-weight: 800; cursor: pointer; padding: 6px 10px; border-radius: 99px; }
.gate-back:hover { color: inherit; background: var(--g-card); }

/* leaving through a role: the planet swallows the screen */
.gate.is-launching .gate-go > *:not(.gate-planet) { opacity: 0; transform: translateY(-10px); transition: opacity .35s, transform .35s; }
.gate.is-launching .gate-planet { animation: gateLaunch 1s cubic-bezier(.7,0,.2,1) forwards; }
@keyframes gateLaunch { to { transform: scale(18); opacity: 0; } }

@media (max-width: 559px) {
  .gate-worlds { flex-direction: column; height: auto; }
  .gate-world { min-height: 180px; }
  .gw-sun, .gw-moon { width: 64px; height: 64px; top: 14%; }
  .gate-brand { font-size: 0; gap: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .gate *, .gate { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}