/* ==========================================================================
   motion.css . straturile vizuale ale sistemului de miscare
   ==========================================================================
   Se incarca DUPA site.css. Aici sta doar ce tine de miscare, ca sa se poata
   citi si scoate intr-o bucata. Perechea lui e motion.js.

   Trei reguli care tin totul in frau:
   1. Se anima doar transform, opacity si clip-path. Nimic care cere
      recalcularea layout-ului, deci nimic care sacadeaza.
   2. Distantele sunt mici. Un reveal de 40 px arata scump, unul de 120 px
      arata a template de portofoliu.
   3. La prefers-reduced-motion totul se aseaza instant, in pozitia finala.
   ========================================================================== */

/* Derularea o conduce motion.js. Daca lasam si scroll-behavior nativ, cele
   doua se bat pe aceeasi pagina si iese o smucitura la ancore. */
html { scroll-behavior: auto; }

/* ==========================================================================
   1. Titlul care se ridica linie cu linie
   ========================================================================== */

.m-linie {
  display: block;
  overflow: hidden;
  /* Coada literelor (g, j, p) nu are voie sa fie taiata de masca. */
  padding-bottom: 0.12em;
  margin-bottom: -0.12em;
}
.m-linie > span {
  display: block;
  transform: translateY(105%);
  transition: transform var(--dur-5) var(--ease-intrare);
  transition-delay: calc(var(--i) * 90ms);
}
[data-vazut] > .m-linie > span,
.m-linie[data-vazut] > span { transform: none; }

[data-fara-miscare] .m-linie > span { transform: none; transition: none; }

/* Cuvantul singur, pentru fraza din hero (ramas din v2, stilat in site.css) */
.m-cuv { display: inline-block; }

/* ==========================================================================
   2. Fotografia care se descopera dintr-o fanta
   ========================================================================== */

[data-clip] {
  clip-path: inset(0 0 100% 0);
  transition: clip-path var(--dur-5) var(--ease-intrare);
  will-change: clip-path;
}
[data-clip][data-vazut] { clip-path: inset(0 0 0 0); will-change: auto; }

/* Interiorul porneste putin marit si se aseaza, deci imaginea "respira"
   in loc sa apara pur si simplu. */
[data-clip] > img,
[data-clip] > picture > img {
  transform: scale(1.08);
  transition: transform 1200ms var(--ease-intrare);
}
[data-clip][data-vazut] > img,
[data-clip][data-vazut] > picture > img { transform: none; }

[data-fara-miscare] [data-clip] { clip-path: none; }
[data-fara-miscare] [data-clip] > img { transform: none; }

/* ==========================================================================
   3. Inclinarea la viteza de derulare
      Cateva zecimi de grad. Nu se vede constient, se simte ca greutate.
   ========================================================================== */

[data-inclina] {
  transform: skewY(var(--inclinare, 0deg)) scale(var(--intins, 1));
  transform-origin: center;
  will-change: transform;
}

/* ==========================================================================
   4. Cardul care se inclina dupa mouse
   ========================================================================== */

[data-tilt] {
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 420ms var(--ease-standard);
  transform-style: preserve-3d;
}
[data-tilt]:hover { transition-duration: 90ms; }

/* Lumina care urmareste cursorul peste card. Foarte slaba, altfel devine
   gadget si iese din registrul mat al materialului. */
[data-tilt]::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur-3) var(--ease-standard);
  background: radial-gradient(
    260px circle at var(--lx, 50%) var(--ly, 50%),
    rgba(255, 255, 255, 0.28), transparent 62%);
  border-radius: inherit;
}
[data-tilt]:hover::after { opacity: 1; }

/* ==========================================================================
   5. Sectiunea lipita. Aici se intampla "lock la scroll".
   ========================================================================== */

.pin { position: relative; }
.pin__lipit {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
  display: grid;
  align-content: center;
}

/* Cat tine scena pe ecran. O tura de scroll pe etapa, plus o jumatate ca
   sa se aseze ultimul pas inainte sa plece sectiunea. */
.pin--3 { height: 340vh; }
.pin--4 { height: 440vh; }

@media (max-width: 760px) {
  .pin--3 { height: 300vh; }
  .pin--4 { height: 380vh; }
}

/* Indicatorul de pasi din marginea scenei lipite */
.pin-pasi {
  display: grid;
  gap: var(--sp-3);
  list-style: none;
  margin: 0;
  padding: 0;
}
/* Pasul inactiv se stinge prin CULOARE, nu prin opacity. Opacity peste text
   mic scade contrastul sub pragul de accesibilitate si textul devine imposibil
   de citit pe ecranul unui om care nu are 20 de ani si un monitor bun. */
.pin-pasi li {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  font-size: var(--text-sm);
  color: var(--ink-3);
  transition: color var(--dur-3) var(--ease-standard);
}
.pin-pasi li[data-acum] { color: var(--ink); }

/* Semnul pasului curent: o liniuta care creste, nu inca o culoare. */
.pin-pasi li::before {
  content: '';
  flex: none;
  align-self: center;
  width: 0;
  height: 1.5px;
  background: var(--terra-400);
  transition: width var(--dur-3) var(--ease-intrare);
}
.pin-pasi li[data-acum]::before { width: 18px; }

.pin-pasi b {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  /* terra-300 pe fundalul de noapte: 8,1:1. terra-500 dadea doar 4,1. */
  color: var(--terra-300);
}

/* ==========================================================================
   6. Antetul care se ascunde la coborare si revine la urcare
   ========================================================================== */

.header {
  transition: transform var(--dur-3) var(--ease-standard),
              background-color var(--dur-3) var(--ease-standard),
              box-shadow var(--dur-3) var(--ease-standard);
}
.header[data-ascuns] { transform: translateY(-102%); }
[data-fara-miscare] .header[data-ascuns] { transform: none; }

/* ==========================================================================
   7. Cursorul casei
      Punctul merge exact pe deget, inelul ramane cu o fractiune in urma.
      Apare doar dupa prima miscare de mouse, deci nu tulbura pe nimeni care
      navigheaza de la tastatura.
   ========================================================================== */

.m-cursor-punct,
.m-cursor-inel {
  position: fixed;
  top: 0; left: 0;
  pointer-events: none;
  z-index: var(--z-toast);
  opacity: 0;
  transition: opacity var(--dur-2) linear;
}
/* Pana sa se activeze, cursorul nu exista deloc in pagina. Cu opacity 0 el
   ramanea in flux si, dupa ce mouse-ul iesise in dreapta pe un ecran lat,
   impingea documentul cu 25 px la redimensionare. Masurat pe 31 aug 2026. */
.m-cursor-punct,
.m-cursor-inel { display: none; }

[data-cursor-activ] .m-cursor-punct { display: block; opacity: 1; }
[data-cursor-activ] .m-cursor-inel { display: grid; opacity: 1; }

.m-cursor-punct {
  width: 6px; height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: var(--ink);
}

.m-cursor-inel {
  width: 34px; height: 34px;
  margin: -17px 0 0 -17px;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  display: grid;
  place-items: center;
  transition: opacity var(--dur-2) linear,
              width var(--dur-3) var(--ease-intrare),
              height var(--dur-3) var(--ease-intrare),
              margin var(--dur-3) var(--ease-intrare),
              background-color var(--dur-3) var(--ease-standard),
              border-color var(--dur-3) var(--ease-standard);
}
.m-cursor-inel[data-mare] {
  width: 52px; height: 52px;
  margin: -26px 0 0 -26px;
  border-color: var(--terra-500);
  background: rgba(217, 108, 66, 0.08);
}
.m-cursor-inel[data-apasat] { width: 26px; height: 26px; margin: -13px 0 0 -13px; }

.m-cursor-inel[data-cu-text] {
  width: 78px; height: 78px;
  margin: -39px 0 0 -39px;
  background: var(--ink);
  border-color: var(--ink);
}
.m-cursor-inel > span {
  font-size: 10px;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--kalk-50);
  opacity: 0;
  transition: opacity var(--dur-2) linear;
  white-space: nowrap;
}
.m-cursor-inel[data-cu-text] > span { opacity: 1; }

/* Cursorul de sistem ramane ascuns doar acolo unde al nostru il inlocuieste
   complet. Pe campuri de text si pe zonele de desen ramane cel nativ, ca
   omul sa vada unde scrie. */
@media (pointer: fine) {
  [data-cursor-activ] body { cursor: none; }
  [data-cursor-activ] input,
  [data-cursor-activ] textarea,
  [data-cursor-activ] select,
  [data-cursor-activ] canvas,
  [data-cursor-activ] [data-cursor-nativ] { cursor: auto; }
  [data-cursor-activ] input[type="range"] { cursor: grab; }
}
[data-fara-miscare] .m-cursor-punct,
[data-fara-miscare] .m-cursor-inel { display: none; }

/* ==========================================================================
   8. Cortina intre pagini
      O panza calda care coboara la plecare si urca la sosire. Fara alb
      care clipeste intre doua pagini inchise.
   ========================================================================== */

.m-cortina {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  background: var(--ink);
  pointer-events: none;
  transform: translateY(0);
  transition: transform 560ms var(--ease-intrare);
}
[data-intrat] .m-cortina { transform: translateY(-101%); }
[data-plecam] .m-cortina {
  transform: translateY(0);
  transition: transform 340ms var(--ease-iesire);
}
[data-fara-miscare] .m-cortina { display: none; }

/* Continutul intra cu o umbra de intarziere dupa cortina. */
[data-cu-miscare] body > main,
[data-cu-miscare] body > .hero { animation: m-sosire 640ms var(--ease-intrare) both; }
@keyframes m-sosire {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* ==========================================================================
   9. Banda care curge
   ========================================================================== */

[data-banda] {
  display: flex;
  gap: var(--sp-6);
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
[data-banda] > * {
  display: flex;
  gap: var(--sp-6);
  flex: none;
  animation: m-banda var(--banda-durata, 40s) linear infinite;
}
[data-banda]:hover > * { animation-play-state: paused; }
@keyframes m-banda {
  to { transform: translateX(calc(-100% - var(--sp-6))); }
}
[data-fara-miscare] [data-banda] > * { animation: none; }

/* ==========================================================================
   10. Linia care se traseaza, pentru cotele de pe desene
   ========================================================================== */

[data-traseaza] {
  stroke-dasharray: var(--lung, 400);
  stroke-dashoffset: var(--lung, 400);
  transition: stroke-dashoffset 1100ms var(--ease-intrare);
}
[data-vazut] [data-traseaza],
[data-traseaza][data-vazut] { stroke-dashoffset: 0; }

/* ==========================================================================
   11. Butonul: sageata care pleaca inainte ca degetul sa apese
   ========================================================================== */

.btn { transition: transform var(--dur-2) var(--ease-standard),
                   background-color var(--dur-2) var(--ease-standard),
                   border-color var(--dur-2) var(--ease-standard),
                   color var(--dur-2) var(--ease-standard); }
.btn .sg {
  display: inline-block;
  transition: transform var(--dur-3) var(--ease-intrare);
}
.btn:hover .sg { transform: translateX(4px); }
[data-fara-miscare] .btn:hover .sg { transform: none; }

/* ==========================================================================
   12. Cand omul cere liniste, totul e deja la locul lui
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .m-linie > span { transform: none !important; transition: none !important; }
  [data-clip] { clip-path: none !important; }
  [data-clip] > img { transform: none !important; }
  [data-inclina] { transform: none !important; }
  [data-tilt] { transform: none !important; }
  .m-cortina { display: none !important; }
  [data-banda] > * { animation: none !important; }
  [data-traseaza] { stroke-dashoffset: 0 !important; }
  body > main, body > .hero { animation: none !important; }
}

/* Cursorul personalizat nu are ce cauta pe ecran tactil, si mai ales nu are
   voie sa impinga pagina: masurat pe 31 august 2026, adauga 25 px de
   derulare orizontala pe telefon. Prins pe ecran real, nu in teorie. */
@media (hover: none), (pointer: coarse) {
  .m-cursor-inel,
  .m-cursor-punct { display: none !important; }
}
.m-cursor-inel,
.m-cursor-punct { will-change: transform; }