/* ghalixy.com's own pieces, on top of theme.css (the shared design system, the same file as ghalixy.app's).
   The idea: Ghalixy is the galaxy, and Ghalixy AI is its moon (brand/README.md: "the moon is the assistant"); on the
   product's pages the assistant is the orb, so here the moon that leads to ghalixy.app is drawn as the orb too.
   Same rules: tokens only, only transform and opacity animate, nothing moves with reduced motion. */

/* ---------- the hero's orbits: the mark at the centre, the services as chips, the moon a link to the app ---------- */
.orbits{position:relative;width:min(520px,100%);aspect-ratio:1;margin-inline:auto}
.orbits__ring{position:absolute;inset:var(--in);border-radius:50%;border:1px solid var(--line)}
.orbits__ring--1{--in:26%;border-color:var(--line-2)}
.orbits__ring--2{--in:12%;border-style:dashed;border-color:var(--line-2)}
.orbits__ring--3{--in:0%;opacity:.7}
.orbits__ring i{position:absolute;inset:0;border-radius:50%}
.orbits__ring i::before{content:'';position:absolute;inset-block-start:-4px;inset-inline-start:50%;width:8px;height:8px;margin-inline-start:-4px;border-radius:50%;
  background:var(--c,#fff);box-shadow:0 0 12px 2px var(--c,#fff)}
.orbits__ring--1 i{--c:var(--ion)}
.orbits__ring--2 i{--c:var(--violet);rotate:140deg}
.orbits__ring--3 i{--c:var(--mint);rotate:250deg}
.orbits__core{position:absolute;inset:34%;display:grid;place-items:center;border-radius:50%;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--violet) 22%,transparent),transparent)}
.orbits__core img{width:100%;height:auto}
/* the mark animates itself (SMIL) many times a second: on a layer of its own, only its box repaints */
.orbits__core,.portal__mark{contain:layout paint;will-change:transform}
.orbits__chip{position:absolute;padding:6px 12px;border-radius:var(--r-pill);border:1px solid var(--line-2);
  background:color-mix(in srgb,var(--deep) 85%,transparent);font-family:var(--font-mono);font-size:.7rem;letter-spacing:.04em;color:var(--text-2);white-space:nowrap}
.orbits__chip--1{inset-block-start:13%;inset-inline-start:6%}
.orbits__chip--2{inset-block-start:30%;inset-inline-end:-2%}
.orbits__chip--3{inset-block-end:24%;inset-inline-start:-3%}
.orbits__chip--4{inset-block-end:9%;inset-inline-end:8%}
.orbits__chip--5{inset-block-start:49%;inset-inline-start:-6%}
.orbits__moon{position:absolute;inset-block-start:2%;inset-inline-end:10%;display:inline-flex;align-items:center;gap:10px;padding:6px 14px 6px 6px;
  border-radius:var(--r-pill);border:1px solid color-mix(in srgb,var(--violet) 50%,var(--line-2));background:color-mix(in srgb,var(--deep) 85%,transparent);
  font-size:var(--step--1);font-weight:600;color:var(--text);box-shadow:0 0 30px -10px rgba(163,149,255,.4);transition:transform var(--t-fast) var(--ease)}
.orbits__moon:hover{transform:translateY(-2px)}
.orb--moon{--size:26px}
.orb--moon::before{inset:-5px}
.orb--moon::after{inset:-12px}
@media (max-width:960px){ .orbits{width:min(440px,92%)} }
@media (max-width:520px){ .orbits__chip{font-size:.62rem;padding:5px 9px} .orbits__chip--5{display:none} }
@media (prefers-reduced-motion:no-preference){
  .orbits__ring--1 i{animation:spin 26s linear infinite}
  .orbits__ring--2 i{animation:spin 44s linear infinite reverse}
  .orbits__ring--3 i{animation:spin 70s linear infinite}
  .orbits__moon{animation:float 8s ease-in-out infinite}
}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

.chips--center{justify-content:center}

/* ---------- the portal to ghalixy.app: the mark inside rings, the orb beside it ---------- */
.portal{position:relative;display:grid;place-items:center;width:min(440px,100%);aspect-ratio:1;margin-inline:auto;border-radius:50%}
.portal__rings{position:absolute;inset:0;display:grid;place-items:center}
.portal__rings i{grid-area:1/1;border-radius:50%;border:1px solid var(--line)}
.portal__rings i:nth-child(1){width:70%;height:70%;border-color:color-mix(in srgb,var(--violet) 45%,transparent);
  background:radial-gradient(closest-side,color-mix(in srgb,var(--violet) 18%,transparent),transparent);box-shadow:0 0 80px -20px rgba(163,149,255,.4)}
.portal__rings i:nth-child(2){width:98%;height:98%;border-style:dashed}
.portal__mark{position:relative;width:42%}
.portal__mark img{width:100%;height:auto}
.portal__orb{position:absolute;inset:0}
.portal__orb .orb{--size:30px;position:absolute;inset-block-start:calc(1% - 15px);inset-inline-start:calc(50% - 15px)}
.portal__label{position:absolute;inset-block-end:6%;padding:6px 14px;border-radius:var(--r-pill);border:1px solid var(--line-2);
  background:color-mix(in srgb,var(--deep) 85%,transparent);font-family:var(--font-mono);font-size:.74rem;color:var(--text-2);transition:color var(--t-fast)}
.portal:hover .portal__label{color:var(--text)}
.portal:focus-visible{outline-offset:-6px;border-radius:50%}
@media (prefers-reduced-motion:no-preference){ .portal__orb{animation:spin 40s linear infinite} }

/* ---------- the Ghalixy AI page opens with the same section as the home page's, as its hero ---------- */
.hero--ai{padding-block-end:clamp(64px,8vw,110px)}
.hero--ai .section__head{margin-block-end:var(--s-6)}
.hero--ai .features{margin-block-end:var(--s-6)}

/* ---------- the Arabic page ---------- */
.ar-card{display:grid;gap:var(--s-5);padding:clamp(22px,3vw,34px)}
.ar-card .card__list{font-size:var(--step-1)}