/* OSIRIS — hero 33 „Liquid Sculpture”, montat în prima pagină (pasul 2). Se încarcă DOAR pe index.html, după home.css.
   Aici e numai stratul sculpturii; textul, eticheta, paragraful și butoanele rămân ale fundației (home.css + .btn din osiris.css).
   Proba de sine stătătoare (referința): lab/hero33/. Montarea: lab/pas1/montare_hero.md. */

/* canvasul (îl creează hero.js în #heroStage): nu se selectează, lasă derularea verticală browserului */
#heroStage canvas{-webkit-user-select:none;user-select:none;touch-action:pan-y}

/* titlul și paragraful se pot selecta și copia (în probă: reparația 11); sculptura și fantoma nu */
.hero__copy{-webkit-user-select:text;user-select:text}

/* fantoma „OSIRIS”: MĂRIMEA E DOAR AICI (home.css are restul stilului: poziția, fontul, culoarea). Cuvântul ocupă ~94 % din lățime pe orice ecran,
   ca literele de la capete să se vadă prin nisipul care se risipește; hero.js îi pune centrul sub centrul sculpturii (--ghost-y pe .hero):
   pe calculator cu 0,43 din mărimea literei, pe telefon și tabletă în partea de jos a sculpturii, unde o traversează doar nisipul.
   Plafonul de 560 px (reparațiile 4; înainte 440): până la ~2600 px lățime cuvântul rămâne ~94 % din ecran, ca sculptura (la 2560 era 76 % și
   „O” / ultimul „S” stăteau sub partea deasă a penei). */
.hero__ghost{font-size:min(21.5vw,560px)}

/* indiciul de sub butoane: 11 px, ca eticheta (în probă: reparația 9) */
.hero__hint{font-size:.6875rem}
.hero[data-gl="off"] .hero__hint{display:none}

/* fără WebGL2 (data-gl="off", pus de hero.js; de probă: /?nogl=1): în loc de gol, poza statică a sculpturii NOASTRE, capturată din randarea ei
   la repaus (canvasul WebGL, nu o imagine generată), pusă pe negru; „screen” face negrul transparent, deci fantoma din spate rămâne vizibilă.
   sculptura.webp = calculator (1600×502, 96 KB), sculptura-m.webp = telefon/tabletă în portret (585×646, 26 KB); se descarcă doar aici.
   Mărimea e legată de înălțimea ecranului, ca poza să rămână deasupra etichetei și a textului. */
.hero[data-gl="off"]{--ghost-y:46%}
.hero[data-gl="off"] .hero__stage{background:url(/assets/img/hero/sculptura.webp) no-repeat center 30% / min(92%,1500px,calc((100vh - 22rem) * 3.19)) auto;mix-blend-mode:screen}
@media (max-height:500px) and (min-aspect-ratio:4/3){
  .hero[data-gl="off"]{--ghost-y:34%}
  .hero[data-gl="off"] .hero__stage{background-size:min(92%,calc((100vh - 16rem) * 3.19)) auto;background-position:center 27%}
}
@media (orientation:portrait){
  .hero[data-gl="off"]{--ghost-y:calc(4.25rem + (100% - 26rem) * .85)}
  .hero[data-gl="off"] .hero__stage{background-image:url(/assets/img/hero/sculptura-m.webp);background-position:center 4.25rem;background-size:auto max(8rem,calc(100% - 26rem))}
}

@media (max-width:768px){
  .hero__ghost{letter-spacing:-.02em}
}
/* ecran scund și lat (telefonul culcat): fantoma nu mai înaltă decât locul sculpturii */
@media (max-height:500px) and (min-aspect-ratio:4/3){
  .hero__ghost{font-size:min(21.5vw,30vh)}
}

/* ---------- FUNDALUL din spatele sculpturii (27 Oct; cercetarea: cercetare/sectiuni/hero_fundal/fisa.md; dovezile: lab/pas2/fundal/) ----------
   Trei straturi, toate SUB sculptură (z 0) și sub text, în paleta E, nimic care să concureze cu sculptura (ea rămâne vedeta):
   1. aurora: 3 pete mari de lumină albastră (radial-gradient = margini moi fără filter), animate DOAR pe transform (compozitor, ~0 CPU);
   2. praful din adâncime: hero-bg.js (canvas 2D, 240 de puncte stinse, parallax ușor la mouse) — doar pe calculator;
   3. lumina care trece prin „OSIRIS”: a doua copie a fantomei (aceleași reguli de poziție/mărime, are ambele clase), umplută cu o bandă de lumină
      care o traversează ~3 s la fiecare 16 s; restul timpului banda stă în afara literelor, deci elementul nu se redesenează.
   Jos, o stingere spre --bg ține banda textului pe fundalul curat (contrastul paragrafului ≥ 4,5:1). Pe telefon/tabletă: un singur strat (aurora, 2 pete).
   Nu depinde de prefers-reduced-motion (regula 6). Fără backdrop-filter, fără blur animat, fără WebGL. */
.hero__bg{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;contain:strict}
.hero__blob{position:absolute;left:var(--x);top:var(--y);width:var(--d);height:var(--d);margin:calc(var(--d) / -2) 0 0 calc(var(--d) / -2);border-radius:50%;
  background:radial-gradient(closest-side,rgba(var(--c),var(--o)),rgba(var(--c),calc(var(--o) * .55)) 30%,rgba(var(--c),calc(var(--o) * .18)) 58%,rgba(var(--c),0) 100%);
  will-change:transform;animation:heroBlob var(--dur) ease-in-out infinite alternate;animation-delay:var(--delay)}
.hero__blob--1{--x:50%;--y:40%;--d:min(80vw,1180px);--c:29,78,216;--o:.42;--dx:6vw;--dy:-4vh;--s:1.14;--dur:18s;--delay:-9s}
.hero__blob--2{--x:79%;--y:16%;--d:min(48vw,720px);--c:56,189,248;--o:.30;--dx:-8vw;--dy:5vh;--s:1.2;--dur:22s;--delay:-20s}
.hero__blob--3{--x:19%;--y:58%;--d:min(42vw,620px);--c:37,99,235;--o:.34;--dx:7vw;--dy:-5vh;--s:.86;--dur:20s;--delay:-4s}
@keyframes heroBlob{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(var(--dx),var(--dy),0) scale(var(--s))}}
.hero__bg::after{content:"";position:absolute;left:0;right:0;bottom:0;height:40%;background:linear-gradient(to bottom,rgba(6,8,15,0),rgba(6,8,15,.6) 50%,rgba(6,8,15,.92) 85%,var(--bg))}
.hero__dust{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero__ghost--sheen{opacity:1;color:transparent;-webkit-background-clip:text;background-clip:text;background-repeat:no-repeat;background-size:300% 100%;background-position:100% 0;
  background-image:linear-gradient(104deg,rgba(56,189,248,0) 40%,rgba(56,189,248,.22) 45%,rgba(200,235,255,.40) 50%,rgba(56,189,248,.22) 55%,rgba(56,189,248,0) 60%);
  animation:heroSheen 14s linear infinite;animation-delay:1.5s}
/* 27 Oct (r6): cât timp punctele scriu OSIRIS, fantoma și raza se sting (un singur cuvânt) */
.hero__ghost{transition:opacity .8s ease}
.hero.is-word .hero__ghost{opacity:0}
@keyframes heroSheen{0%{background-position:100% 0}22%{background-position:0% 0}100%{background-position:0% 0}}
@media (max-width:768px),(pointer:coarse){
  .hero__blob--1{--d:min(150vw,900px);--y:34%;--o:.36}
  .hero__blob--2{--d:min(90vw,560px);--x:84%;--y:14%}
  .hero__blob--3,.hero__ghost--sheen{display:none}
}