/* [cc 08.10 final] Partea „tarzie” a CSS-ului paginii FINAL (blocurile inline de dupa comanda/vignete din hex-f1.html): fereastra programului, mutarea hexagonului in dreapta (hex-e). Dupa hexa-final.css. */

/* ===== #chenar-lumina ===== *//* [cc 07.10] David: partea de jos „make it back black” + „a fluorescent light running around the border … one of those subtle ones”.
   1) pe închis: fără luminarea spre fereastră (umbra, strălucirea și linia de sus din ../_drum sunt anulate doar aici);
   2) pe marginea ferestrei programului aleargă încet o lumină subțire (conic-gradient rotit prin @property, mascat la 1,5 px). */
:root:not([data-theme=light]){--drum-shade:transparent;--drum-bloom:transparent;--drum-rim:transparent}
@property --chenar{syntax:'<angle>';inherits:false;initial-value:0deg}
.peek{position:relative}
/* David: linia care alerga pe margine „you can barely see it … maybe another way of highlighting, something subtle” ->
   in loc de linie: o aură cyan (culoarea mărcii, #46B5E0) care respiră încet deasupra ferestrei + un contur cyan fin + o lumină pe marginea de sus.
   (box-shadow-ul din ../_drum are !important, deci animația merge printr-o variabilă @property; clip-path-ul de la _drum e scos aici ca aura să se vadă deasupra) */
/* [cc 08.10 rim] aura care respira (box-shadow @property) + firul ::after SCOASE: marginea ferestrei e acum lumina condusa de cursor (rim-final.js, canvas peste fereastra). clip-path-ul de la ../_drum ramane scos pe inchis ca inflorirea sa se vada deasupra. */
:root:not([data-theme=light]) .peek.drum-win{clip-path:none;box-shadow:none !important}
/* [cc 07.10] David: „put the demo on its white version, just a bit darker, so the contrast is not as big” -> pe tema închisă fereastra arată captura albă a programului, coborâtă la 78% luminozitate */
:root:not([data-theme=light]) .peek .pd{display:none}
:root:not([data-theme=light]) .peek .pl{display:block}   /* [cc 08.10 grade] filtrul = --dm-grade (final.css), acelasi pe poza si pe iframe: fara salt cand demo-ul inlocuieste poza */

/* ===== #mai-sus ===== *//* [cc 07.10] David (varianta neagră): „put the things in the middle a bit higher … better harmony”. Rândul din mijloc (titlu + butoane, hexagonul, cele 3 rânduri)
   urcă cu clamp(16px, 3.6vh, 40px): mutat cu top relativ (rândul grilei e dat de poză, deci padding-ul nu l-ar urca). Indicatoarele de pe drum nu se mișcă. */
@media (min-width:761px){:root{--sus:clamp(16px,3.6vh,40px)}#hero>.left,#hero>.stage,#hero>.rows,#hero>.cmd-msg{position:relative;top:calc(-1 * var(--sus))}}   /* top, nu translate: intrarea animă translate */

/* ===== #hex-e ===== *//* [cc 07.10 hex-e] David: „instead of the text on the right side being renewed with some extra text, move the logo from center to right … only text on the left and the logo on the right … the text on the left, put it a bit to the right side so it looks good in the end and there's not too much empty space in the center after the logo moves … make the move premium”.
   Începe ca hex-a-alb (3 coloane: text | hexagon | comanda lipită). Cele 3 rânduri nu mai există. După comandă, hexe.js pune clasa html.hexe-final = layout REAL cu 2 coloane (ca hex-d) și animă
   hexagonul + textul de la poziția veche (FLIP, transform pe compositor). Textul stă ceva mai spre dreapta decât în hex-d: marginea din stânga a coloanei e până la 21% din coloană (la 1672 px: spațiul din stânga textului ≈ spațiul dintre text și hexagon) (și niciodată cât să rupă rândul butoanelor). */
@media (min-width:901px){
  html.hexe-final .hero{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  html.hexe-final .hero>.left{grid-area:1/1;margin-left:clamp(0px,calc(100% - var(--e-min)),21%)}
  html.hexe-final .hero>.stage{grid-area:1/2;justify-self:center;margin-inline:0}
  html.hexe-final .hero>.cmd-msg{display:none}   /* mesajul a plecat; altfel ar mai tine o a treia coloană implicită */
}
:root{--e-min:max(508px,calc(clamp(34px,3.34vw,48px) * 11.25 + 34px))}   /* loc minim pentru textul din stânga (+ padding-ul din dreapta 32 px + 2): randul de butoane = 324 + 12 + 139 = 475 px, titlul = 11,25 em (cu font-size-ul lui h1: clamp(34px,3.34vw,48px)); cu mai putin loc textul nu se mai muta spre dreapta, ca nimic să nu treacă pe rând nou */
/* titlul rămâne pe 2 rânduri și în layoutul cu 3 coloane (în hex-a-alb la 1672 px se rupea în 3 rânduri): altfel, la mutare, s-ar re-împărți brusc în rânduri (un salt pe care FLIP nu-l poate acoperi) */
@media (min-width:1000px){.hero>.left h1{white-space:nowrap}}
/* telefon + tabletă (<= 900 px): coloană, starea finală (ca la hex-d) */
@media (max-width:900px){
  :root{--gut:16px;--peek:calc((100vw - 32px)*.0331 + 6px)}
  .hero{height:auto;min-height:calc(100svh - 64px - var(--peek));display:flex;flex-direction:column;align-items:stretch;padding-top:12px;padding-inline:0}
  .ann{position:static;transform:none;flex-wrap:wrap;justify-content:center;gap:4px 14px;font-size:13px;white-space:normal;padding:0 var(--gut)}
  .left{padding:36px var(--gut) 24px;margin:0;align-self:stretch}
  h1{max-width:none}
  .stage{width:min(65%,380px);height:auto;aspect-ratio:390/380;margin:auto}
  #hero>.left,#hero>.stage{top:0}
}
@media (min-width:761px) and (max-width:900px){h1{font-size:44px;line-height:50px}.cta{flex-direction:row}.cta .pill{width:auto}.hero{min-height:0}}

/* ===== [cc 08.10 final] camionul: acasa (unde se opreste dupa ce vine de la depozit) = SUB indicatorul Arad, ca in L7-2 ===== */
/* hex-d il oprea cu 20 px INAINTE de tabla (stalpii erau scurti, tabla la nivelul camionului); acum stalpii sunt inalti (comanda-final.css, --cpole), tabla e deasupra acoperisului,
   iar botul cabinei se opreste la --tgap (16 px) inaintea stalpului Arad (--x1), cu cabina sub tabla. 324/336 din latimea desenului = botul cabinei (camion-final.js: acelasi calcul). Doar >= 901 px:
   sub 901 px / reduced motion camionul ramane la depozit (regula din drum.css), nu exista decalaj de condus. camion-final.js il conduce de la depozit la acasa. */
@media (min-width:901px){.drum{--drum-x:calc(var(--x1) - 324px * var(--drum-t) - var(--tgap))}}
/* [cc 08.10] David: „take out «comandă de exemplu» words, and between the road and the demo add a little bit of space, ~4 mm”.
   Etichetele raman in DOM (scripturile isi iau pozitiile din ele), doar nevazute; fereastra coboara 16 px (~4 mm) sub drum. */
.cmd-cap,.cmd-ex{visibility:hidden!important}
@media (min-width:901px){.peek{margin-top:16px}}
/* pe deschis umbrirea ferestrei (box-shadow 100vmax din ../_drum) era taiata la -1 px deasupra ei -> spatiul nou de 16 px ramanea o fasie crem; acum umbrirea acopera si spatiul */
:root[data-theme=light] .peek.drum-win{clip-path:inset(-16px -100vmax -100vmax -100vmax)}   /* exact cat spatiul; -17 dubla umbra pe un rand (linie) */
/* [cc 09.10] David: „this should be higher a bit, and the middle text about the version to look more like a title”.
   Randul din mijloc (titlu + butoane, hexagonul, mesajul comenzii) urca mai mult; anuntul v34 devine titlu (22 px, 500), nu eticheta de 14 px. */
@media (min-width:761px){:root{--sus:clamp(28px,7vh,72px)}}
.ann .v34-l{font-size:22px;line-height:30px;font-weight:500;letter-spacing:-.015em;gap:10px}
.ann .v34-l svg{width:16px;height:16px}
/* [cc 20.10] David (punctul 8): linkul „Versiunea 34 e aici. Vezi ce s-a schimbat” e subliniat (1 px, la 3 px sub text), pe ambele teme; săgeata nu.
   La hover / focus linia trece din cerneala stinsă în cerneala plină și săgeata alunecă 2 px (ca la „Pachete de la”). */
.ann .v34-l{text-decoration-line:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:color-mix(in srgb,currentColor 55%,transparent);transition:text-decoration-color .2s ease}
.ann .v34-l svg{transition:transform .28s cubic-bezier(.2,.7,.2,1)}
.ann .v34-l:hover,.ann .v34-l:focus-visible{text-decoration-color:currentColor}
.ann .v34-l:hover svg,.ann .v34-l:focus-visible svg{transform:translateX(2px)}
@media (prefers-reduced-motion:reduce){.ann .v34-l,.ann .v34-l svg{transition:none}}
@media (min-width:761px){.ann{margin-top:10px}}
@media (max-width:760px){.ann .v34-l{font-size:17px;line-height:24px;gap:8px}.ann .v34-l svg{width:13px;height:13px}}
/* [cc 09.10] globul si tema stau acum la capatul din dreapta al antetului (dupa „Programează o demonstrație”): meniul limbii se deschide spre stanga, ca sa nu iasa din ecran */
.r .globe{margin-left:4px}
.r .globe ul{left:auto!important;right:0!important}
/* [cc 20.10c] David: „the 2 icons, feel like should be swapped, and 25% bigger” (și 13c: în STÂNGA lui „Contact”). Ordinea în final.html: tema, apoi globul.
   Iconițele 22,5 px (erau 18). Cutiile de 30 px (iconița + 3,75 px de aer): între cele două iconițe 14 px (era 12: 12 × 1,1, nu se lipesc când cresc),
   de la glob la textul „Contact”: 3,75 + 4,25 + 12 (gap) + 8 (padding) = 28, pasul dintre intrările meniului (ca înainte).
   Ținta de clic: un strat invizibil de 40 × 40 pe fiecare, unul lângă altul (granița la mijlocul dintre iconițe), fără să atingă „Despre noi” / „Contact”;
   pe ecranele tactile 44 × 44 (final.css #tinte-44-tableta). Înainte: final-hero.before-2010c.css (28 px, globul primul). */
.top .theme-btn svg,.top .globe>button svg{width:22.5px;height:22.5px}
.r .theme-btn--d{width:30px;height:30px;margin-left:-4px;margin-right:0;position:relative}
.r .globe{margin-left:-5.5px;margin-right:4.25px}
.r .globe>button{width:30px;height:30px;position:relative}
.r .theme-btn--d::after,.r .globe>button::after{content:"";position:absolute;top:-5px;width:40px;height:40px}
.r .theme-btn--d::after{left:-6.75px}
.r .globe>button::after{left:-3.25px}
/* [cc 09.10] David: „the text there should be up, and the v34 title should be «Ce este nou în versiunea 34?»” -> titlul urca 16 px (mai aproape de antet) */
@media (min-width:761px){.ann{margin-top:-6px}}
/* [cc 09.10] David: „this line … when I load the page, it doesn't load with the rest”. Pe tema deschisa, umbra din jurul ferestrei era box-shadow-ul de 100vmax de pe .peek:
   intra odata cu fereastra (opacitate + 18 px + blur, intarziere .24 s), in timp ce degradeul de deasupra (.drum-fade, pus de drum.js) era deja pe loc -> la imbinarea lor,
   16 px deasupra ferestrei, se vedea o linie dreapta pe toata latimea pana se aseza fereastra (cadre: 2 randuri de fundal gol la ~1,25 s).
   Acum umbra e UN singur strat static: degradeul se prelungeste in jos (plin de la marginea hero-ului) sub fereastra, iar fereastra (z-index 2) se picteaza peste el.
   Fereastra pastreaza doar firul de sus (--drum-rim); clip-path-ul de -16 px ramane pentru halo-ul luminii de margine (rim-final.js). */
:root[data-theme=light] .drum-fade{bottom:auto;top:calc(100% - var(--drum-fade));height:calc(var(--drum-fade) + 100vmax);background:linear-gradient(to bottom,transparent 0,color-mix(in srgb,var(--drum-shade) 25%,transparent) calc(var(--drum-fade) * .45),color-mix(in srgb,var(--drum-shade) 70%,transparent) calc(var(--drum-fade) * .82),var(--drum-shade) var(--drum-fade),var(--drum-shade) 100%)}
:root[data-theme=light] .peek.drum-win{z-index:2;box-shadow:0 -1px 0 0 var(--drum-rim)!important}
/* [cc 09.10] David: „did u use antialiasing for … the first screen? … it doesnt look too good”. Filtrul #cmd-graphite (zgomot fractal ca masca pe linii) facea liniile
   desenelor (indicatoarele, creionul de pe comanda, depozitul/avionul) punctate si „zimtate” la DPR 1. Fara el, liniile raman netede (antialias normal al SVG-ului). */
.cmd-sk,.cmd-mark,.v1-svg{filter:none!important}
/* [cc 09.10] David: „shouldnt the menu be 100 of my screen width? … good for all devices”: meniul pe toata latimea ecranului (cu margine laterala), nu in containerul de 1408 px */
.top{max-width:none!important;padding-inline:clamp(16px,2.4vw,40px)}
/* [cc 09.10] matricea de ecrane (_site/devices.js): pe telefoanele de 320 px (iPhone SE, Galaxy S9+) „Programează o demonstrație gratuită” iesea din buton (16 px, 1 rand). Sub 360 px: 15 px, padding mai mic, voie la 2 randuri. */
@media (max-width:360px){.cta .pill{font-size:15px;padding:0 10px;height:auto;min-height:48px;white-space:normal;text-align:center;line-height:20px}}