/* OSIRIS — prima pagină, secțiunea 10 „Start” (#start, pasul 5b): ORIZONTUL LUMINOS, după exemplul 34 „Glow Horizon” (21st.dev), în paleta E.
   Măsurat pe demo.mp4 (cercetare/sectiuni/orizont/fisa.md): muchia e un CERC cu raza 1,06 × lățimea ecranului, cu fundul la ~69 % din înălțime
   (marginile cu 12,5 % din lățime mai sus); lumina e ÎN disc (deasupra muchiei): miez de ~2 % din lățime (30 px la 1512), aură care se stinge în
   negru la ~150–200 px; sub muchie un halou întunecat de ~30 px; granulație statică (abatere 3,3 / 255); fără respirație măsurabilă în demo;
   la (re)încărcare se APRINDE în ~1,3 s: pată gri lată și moale → muchie albă subțire → se colorează. Textul (o linie albă + una colorată) stă
   la 110–150 px deasupra muchiei.
   Aici muchia e ANCORATĂ la golul dintre titlu și butoane (.st-horizon): discul stă în gol, cu muchia la 2,75 rem deasupra butoanelor, deci
   titlul rămâne mereu pe partea întunecată a aurei și butoanele pe negru, la orice mărime de ecran. Fundalul paginii (fasciculele) se vede prin
   partea goală a secțiunii. Culorile doar din paleta E (--accent, --accent-deep, --bg, --text, --muted; capătul aurei = --bg amestecat cu
   --accent-deep); fonturile doar prin tokeni și clasele fundației (.h2, .btn). Animate DOAR opacity + transform (compozitor); oprite în afara
   ecranului prin .is-on (start-home.js). Fără prefers-reduced-motion (regula 6). Fără JS: discul stă aprins (static). Prefix st-. */

.section.start{--st-d:212vw;            /* diametrul discului: raza 1,06 × lățimea ecranului, ca în 34 */
  --st-core:28px;--st-aura:150px;        /* miezul luminos și aura, în px (34: 30 / 128–200 la 1512) */
  --st-ink:#071434;--st-deep:#10307f;    /* capetele aurei: --bg→--accent-deep (amestecuri, nu accente noi) */
  --st-gap:clamp(6.5rem,18vh,10rem);     /* golul dintre titlu și butoane = locul muchiei */
  --st-below:2.75rem;                    /* muchia stă atât deasupra butoanelor */
  position:relative;min-height:clamp(30rem,74vh,46rem);padding:0;display:grid;place-items:center;text-align:center;overflow:hidden;isolation:isolate}
.st-copy{position:relative;z-index:1;isolation:isolate;padding:clamp(4rem,8vh,5.5rem) 0 clamp(3rem,6vh,4rem)}
.start .st-title{max-width:none;margin:0 auto;font-size:clamp(2.75rem,6.2vw,5.5rem);line-height:.95;letter-spacing:-.012em;text-wrap:balance}
.start .st-title>span,.start .st-title>em{display:block}
.start .st-title>em{margin-top:.1em;font-size:.56em;line-height:1.1;letter-spacing:0;color:var(--muted)}
/* golul care ține discul: muchia (fundul discului) la --st-below deasupra butoanelor */
.st-horizon{position:relative;height:var(--st-gap);z-index:-1;pointer-events:none}
.st-disc,.st-hot{position:absolute;left:50%;bottom:var(--st-below);width:var(--st-d);aspect-ratio:1;border-radius:50%;transform:translateX(-50%);will-change:opacity}
/* discul: transparent în mijloc, apoi aura (--st-ink → --st-deep → --accent-deep → --accent) și miezul aproape alb chiar pe muchie; sub muchie un halou scurt */
.st-disc{background:radial-gradient(closest-side,
    rgba(7,20,52,0) 0,rgba(7,20,52,0) calc(100% - var(--st-aura) - 30px),
    var(--st-ink) calc(100% - var(--st-aura)),
    var(--st-deep) calc(100% - var(--st-core) * 3),
    var(--accent-deep) calc(100% - var(--st-core) * 1.6),
    var(--accent) calc(100% - var(--st-core) * .55),
    #dff4ff calc(100% - 2px),#f4fcff 100%);
  box-shadow:0 0 30px 5px rgba(29,78,216,.22),0 0 2px 1px rgba(56,189,248,.4)}
/* aprinderea (34, 4,2–5,5 s): o pată LATĂ, albă-gri, moale, care se strânge pe muchie și se stinge în timp ce discul colorat apare */
.st-hot{background:radial-gradient(closest-side,
    rgba(223,244,255,0) 0,rgba(223,244,255,0) calc(100% - var(--st-aura) * 2),
    rgba(223,244,255,.2) calc(100% - var(--st-aura)),
    rgba(240,250,255,.6) calc(100% - var(--st-core) * 2),
    #ffffff 100%);
  box-shadow:0 0 110px 26px rgba(190,230,255,.28);opacity:0}
.st-grain{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.05;mix-blend-mode:soft-light;-webkit-mask-image:linear-gradient(transparent,#000 15%,#000 85%,transparent);mask-image:linear-gradient(transparent,#000 15%,#000 85%,transparent);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:160px 160px}

.st-row{display:flex;justify-content:center;gap:.75rem;flex-wrap:wrap}
.st-alt{margin-top:1.1rem;font-size:var(--t-small);color:var(--muted)}
/* butonul plin peste negru: umbra lui albastră din fundație, mai scurtă aici ca să nu se bată cu muchia de deasupra */
.start .btn--solid:hover{box-shadow:0 6px 18px -10px rgba(56,189,248,.6)}

/* ---- mișcarea (doar cu JS; .is-lit o dată, la intrare; .is-on cât e pe ecran) ---- */
.js .start .st-disc{opacity:0}
.js .start.is-lit .st-disc{animation:stLit 1.1s var(--ease) .32s both}
.js .start.is-lit .st-hot{animation:stHot 1.35s var(--ease-std) both}
.js .start:not(.is-on) .st-disc,.js .start:not(.is-on) .st-hot{animation-play-state:paused}
@keyframes stLit{from{opacity:0}to{opacity:1}}
@keyframes stHot{0%{opacity:0;transform:translateX(-50%) scale(1.012)}28%{opacity:1}100%{opacity:0;transform:translateX(-50%) scale(1)}}

@media (max-width:760px){
  .section.start{--st-d:150vw;--st-core:18px;--st-aura:100px;--st-gap:clamp(5.5rem,15vh,8rem);--st-below:2.25rem;min-height:clamp(28rem,74vh,42rem)}
  .start .st-title{font-size:clamp(2.6rem,12.5vw,3.5rem)}
  .start .st-title>em{font-size:.5em;line-height:1.2}
  .st-row .btn{min-width:8.75rem}
  .st-disc{box-shadow:0 0 22px 4px rgba(29,78,216,.2),0 0 2px 1px rgba(56,189,248,.4)}
  .st-hot{box-shadow:0 0 70px 16px rgba(190,230,255,.26)}
}
@media (max-width:380px){.st-row{flex-direction:column;align-items:stretch;margin-inline:auto;max-width:17rem}.st-row .btn{width:100%}}