/* GENERAT de scripts/intrare-strat-css.mjs din intrare-01-intrare.css — nu edita aici */
:root{--negru:#000; --alb:#e9e4da; --verde:#6cff0b;
        --mono:'JetBrains Mono','SF Mono',ui-monospace,Menlo,Consolas,monospace;
        --sans:'Space Grotesk','Space Grotesk Fallback',Arial,system-ui,sans-serif}
  *{box-sizing:border-box}
  html.intrare,html.intrare body{height:100%}
  html.intrare body{overflow:hidden}
  .scena{background:var(--negru); color:var(--alb); font-family:var(--sans);
         -webkit-font-smoothing:antialiased; margin:0}
  .scena{position:fixed; inset:0; z-index:2000; height:100svh; width:100%; display:grid;
         grid-template-rows:1fr; isolation:isolate}
  .scena canvas{position:absolute; inset:0; width:100%; height:100%; display:block; z-index:1;
                pointer-events:none}
  /* flex, nu grid: cu `place-items:center` si doi copii, grila facea doua randuri si le
     departa — de aici golul dintre cuvant si buton. Asa stau lipite, ca un grup. */
  .mijloc{position:relative; z-index:2; display:flex; flex-direction:column;
          align-items:center; justify-content:center; padding:0;
          transform:translateY(4vh)}   /* grupul, putin sub mijlocul optic */
  /* Cuvantul ramane text adevarat in pagina, pentru Google si cititoarele de ecran. Punctele il
     deseneaza deasupra; culoarea i-o scoate scriptul DUPA ce panza chiar a desenat, ca sa nu
     ramana pagina goala daca ceva pica. */
  .scena h1{margin:0; font-weight:700; letter-spacing:-.03em; line-height:.92; text-align:center;
     font-size:18vw; white-space:nowrap; text-transform:uppercase}
  /* marimea reala o pune scriptul, masurand latimea cuvantului; `18vw` e doar ceva
     rezonabil pentru cazul in care scriptul nu apuca sa ruleze */
  /* Porneste transparent: altfel se vede o clipa ca text normal, la marimea din CSS, inainte
     ca scriptul sa-l masoare si sa-l preia punctele. Daca scriptul nu porneste deloc,
     tot el ii da culoarea inapoi — vezi `h.style.color` mai jos. */
  .scena h1{color:transparent}
  .scena h1.puncte{color:transparent}
  /* Cele doua randuri de sus. Pozitionate absolut, ca sa nu intre in grila care tine
     cuvantul centrat optic: altfel ar fi impins ALKEME in jos. Tipografia e aceeasi cu a
     butonului (mono, spatiat, mic), ca sa nu apara un al treilea stil pe o pagina cu doua
     elemente. Fraza ramane in sans si la marime de text, nu de eticheta, fiindca e o
     propozitie care trebuie sa poata fi citita si ridicata intreaga, nu un ornament. */
  .spune{position:absolute; z-index:2; top:clamp(22px,4.2vh,52px); left:50%;
         transform:translateX(-50%); margin:0; width:min(640px,calc(100% - 2.5rem));
         display:flex; flex-direction:column; align-items:center; gap:.55rem;
         text-align:center; pointer-events:none}
  .spune-eticheta{font-family:var(--mono); font-size:10px; letter-spacing:.22em;
                  text-transform:uppercase; color:rgba(233,228,218,.55)}
  .spune-fraza{font-size:clamp(12px,.95vw,14px); line-height:1.6; color:rgba(233,228,218,.82);
               letter-spacing:.07em; text-wrap:balance}
  @media (max-width:520px){ .spune{gap:.45rem} .spune-fraza{font-size:11px; line-height:1.55; letter-spacing:.05em} }

  .intra{position:relative; z-index:2; justify-self:center; margin-top:clamp(28px,4vh,56px);
         display:inline-flex; align-items:center; gap:.7rem; color:inherit; text-decoration:none;
         font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase;
         padding:.85rem 1.6rem; border:1px solid rgba(233,228,218,.3); border-radius:999px;
         transition:border-color .25s ease, color .25s ease, background .25s ease}
  button.intra{background:none; font-family:var(--mono); cursor:pointer; -webkit-appearance:none; appearance:none}
  .intra:hover,.intra:focus-visible{border-color:var(--verde); color:var(--verde);
         background:rgba(108,255,11,.06); outline:none}
  .intra .sg{transition:transform .3s cubic-bezier(.2,.7,.1,1)}
  .intra:hover .sg{transform:translateY(3px)}
  @media (max-width:720px){ h1{white-space:normal} }
  /* Trecerea e un singur gest taiat in doua, fiindca sunt doua documente: aici ecranul URCA si
     iese, iar pagina de studio intra de jos in sus din aceeasi pozitie in care l-a lasat asta.
     Navigarea se face cand ecranul e deja afara, deci cadrul de schimb e negru pe negru. */
  .scena{transition:transform .29s cubic-bezier(.65,0,.35,1)}
  body.pleaca .scena{transform:translateY(-100%)}
  .voal{position:fixed; inset:0; z-index:2001; background:var(--negru); opacity:0;
        pointer-events:none; transition:opacity .15s linear .14s}
  body.pleaca .voal{opacity:1}
  @media (prefers-reduced-motion:reduce){
    .intra,.intra .sg,.voal,.scena{transition:none}
    body.pleaca .scena{transform:none}
  }

/* dupa intrare */
html:not(.intrare) .scena, html:not(.intrare) .voal{display:none}