/* ===========================================================================
   contact.css — TOT CSS-ul paginii contact.html. Nu se încarcă pe index.html.
   Nu e nevoie de style.css pentru pagina asta: antetul, meniul lateral și
   subsolul vin neschimbate de acolo; .btn și .reveal sunt reluate aici.

   Ordinea de încărcare: normalize → tokens → base → style → contact, deci
   regulile de aici bat style.css la specificitate egală.

   Cuprins
     1. Pagină fără hero
     2. Cadrul paginii, fundalul, marginea de ieșire
     3. Reach — titlu, datele de contact, fotografia
     4. Meet — formularul și harta
     5. Câmpuri și buton
     6. Harta și traseul
     7. Desenele de fundal și drumul
     8. Sosirea la derulare
     9. Lățimi — 80em, atingere, 85em
   =========================================================================== */


/* ---------------------------------------------------------------------------
   1. PAGINĂ FĂRĂ HERO
   --------------------------------------------------------------------------- */

/* main.js publică --p (0..1, umplerea barei) numai când găsește un .hero.
   Aici nu există, deci fixăm la 1: bara e verde plină din primul cadru. */
.page-inner {
    --p: 1;

    /* Sigla rotundă (3rem, .brand__mark în style.css) plus paddingul barei. */
    --header-h: calc(3rem + var(--space-xs) * 2);

    background-color: var(--paper);
}


/* ---------------------------------------------------------------------------
   2. CADRUL PAGINII
   --------------------------------------------------------------------------- */

/* Antetul e fixed, nu ocupă loc în flux: fără paddingul ăsta prima secțiune
   intră sub bară.
   isolation + fundal propriu: altfel desenele multiply n-ar avea în ce să se
   amestece și ar rămâne albe, iar z-index: -1 al lor ar cădea sub pagină.
   overflow: clip — fotografia și desenele ies dinadins în afara coloanei. */
.contact {
    position: relative;
    isolation: isolate;
    overflow: clip;
    background: var(--paper);
    padding-block-start: calc(var(--header-h) + var(--space-2xl));
    padding-block-end: var(--space-section);

    /* Hârtia liberă de la coloană până la geam; fotografia iese exact atât.
       100vw include bara de derulare, dar overflow: clip taie acolo oricum. */
    --bleed: calc(max(0px, (100vw - var(--gutter) * 2 - var(--container)) / 2) + var(--gutter));

    /* Banda pe care se citește drumul. Linia, frunzele și punctul portocaliu
       se scriu toate din perechea asta — nicio poziție separată. Secțiunea 9
       o mută în culoarul din marginea stângă. */
    --road-left: var(--bleed);
    --road-span: calc(100% - var(--bleed) * 2);

    /* Aceeași poveste pe verticală. Implicit e toată pagina; secțiunea 9
       întinde cutia în sus ca linia să pornească din capul paginii. */
    --road-y0: 0%;
    --road-yh: 100%;

    /* Ținute aici, nu în base.css, ca să nu schimbe index.html. */
    caret-color: var(--action);
}

.contact ::selection {
    background: var(--leaf-bright);
    color: var(--bark-deep);
}

/* Paddingul pe elementul de afară, lățimea maximă pe cel dinăuntru — content-box
   pe tot site-ul, deci amândouă pe același element i-ar umfla lățimea. */
.reach,
.meet {
    padding-inline: var(--gutter);
}

.reach__inner,
.meet__inner {
    max-width: var(--container);
    margin-inline: auto;
}


/* ---------------------------------------------------------------------------
   3. REACH — titlul, datele de contact, fotografia
   --------------------------------------------------------------------------- */

/* flex-basis: 0 pe amândouă: raportul vine din flex-grow, nu din text. */
.reach__inner {
    display: flex;
    align-items: center;
    gap: clamp(var(--space-l), 4vw, var(--space-2xl));
}

.reach__tell {
    flex: 1 1 0;
}

.reach__eyebrow {
    margin: 0 0 var(--space-s);
    font-size: var(--step--1);
    font-weight: var(--weight-mid);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    /* Brun, nu verde: verdele are contrast 3.8, prea slab pentru text mic. */
    color: var(--ink-soft);
}

.reach__title {
    margin: 0;
    font-family: var(--font-display);
    font-weight: var(--weight-normal);
    font-variation-settings: var(--axes-display);
    font-size: var(--step-4);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--forest);
}

/* 42ch, mai scurt decât --measure: lat cât toată coloana ar rupe în trei
   rânduri scurte și dezechilibrate; așa ține la două rânduri pline. */
.reach__lead {
    max-width: 42ch;
    margin-block-start: var(--space-m);
    font-size: var(--step-0);
    line-height: var(--leading-body);
    color: var(--ink-soft);
}

.reach__lines {
    display: grid;
    gap: var(--space-m);
    margin-block-start: var(--space-l);
}

.line {
    display: flex;
    align-items: center;
    gap: var(--space-s);
    padding-block: var(--space-2xs);
}

/* flex: none — altfel cercul se turtește când textul de lângă e lung. */
.line__mark {
    flex: none;
    display: grid;
    place-items: center;
    width: 2.9rem;
    height: 2.9rem;
    border: var(--hairline) solid var(--earth);
    border-radius: var(--radius-pill);
    color: var(--ink-soft);
}

.line__mark svg {
    width: 1.25rem;
    height: 1.25rem;
}

.line__body {
    display: grid;
    gap: 0.15rem;
}

.line__label {
    font-size: var(--step-0);
    font-weight: var(--weight-mid);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--forest);
}

/* Scris ca link chiar dacă acum e <span>: când vin numărul și adresa reale se
   învelesc în <a href="tel:..."> / <a href="mailto:..."> și nu mai e nimic de
   stilizat. */
.line__value,
a.line__value {
    color: var(--ink);
    font-size: var(--step-1);
    line-height: var(--leading-snug);
    text-decoration: none;
    transition: color var(--duration) var(--ease);
}

a.line__value {
    text-decoration: underline;
    text-decoration-color: transparent;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.25em;
    transition: color var(--duration) var(--ease),
        text-decoration-color var(--duration) var(--ease);
}

a.line__value:hover {
    color: var(--action-ink);
    text-decoration-color: currentColor;
}

/* Marginea negativă duce fotografia fix până în geam. blob-f1 e conturul
   stropit, rețeta blob-e: alfa tăiat la prag, alb-negru fără degradeu.
   E 8:5 (960x600), exact raportul lui .reach__photo — vechiul blob-b1 era 4:3
   întins peste o cutie 8:5, ceea ce lățea granulația în dungi, și avea ~12%
   pixeli semitransparenți, adică o bandă moale de fotografie neterminată.
   SCHIMBI RAPORTUL FOTOGRAFIEI, REGENEREZI MASCA (rețeta e în DESIGN.md).
   -webkit-mask-* pentru Safari. Fără radial-gradient: ar da un oval curat. */
.reach__frame {
    flex: 1.6 1 0;
    margin: 0;
    /* PLAFON PE IEȘIRE, nu --bleed curat: --bleed crește nelimitat cu
       monitorul și fotografia s-ar mări singură lângă un formular fix.
       7rem: sub ~1470px --bleed e mai mic, deci fotografia atinge geamul ca
       în machetă; peste, se oprește la 7rem de coloană. */
    margin-inline-end: calc(min(var(--bleed), 7rem) * -1);
    translate: 0 var(--space-s);
    /* Mărim cadrul întreg, nu imaginea: masca rămâne neschimbată și marginile
       pictate ies vizibil mai mult în afară. */
    transform: scale(1.12);

    -webkit-mask-image: url("../img/blob-f1.webp");
    mask-image: url("../img/blob-f1.webp");
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

/* aspect-ratio pe imagine, nu pe ramă: pe ramă e ignorat cât timp imaginea o
   împinge la înălțimea ei naturală. Niciodată height lângă el.
   8/5, nu raportul sursei: dacă rama s-ar lăți, culoarul drumului s-ar muta
   sub fotografie și drumul ar dispărea în spatele ei (.road are z-index: -1).
   Sursa e 960x540 (16:9), deci object-fit taie ~10% stânga-dreapta; nu se
   mărește nimic. Se schimbă raportul cutiei, se regenerează blob-f1. */
.reach__photo {
    width: 100%;
    height: auto;
    aspect-ratio: 8 / 5;
    object-fit: cover;
}

/* Fotografia nu este interactivă. Regula explicită împiedică orice zoom sau
   filtru moștenit să creeze o muchie dreptunghiulară în interiorul măștii. */
.reach__frame:hover .reach__photo {
    transform: none;
    filter: none;
}


/* ---------------------------------------------------------------------------
   4. MEET — formularul și harta
   --------------------------------------------------------------------------- */

.meet {
    padding-block-start: var(--space-section);
}

/* Cele două coloane se pun singure una sub alta când nu mai încap. */
.meet__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: clamp(var(--space-l), 4vw, var(--space-2xl));
}

.write {
    flex: 1.15 1 20rem;
}

.place {
    flex: 1 1 18rem;
}

/* O treaptă mai jos decât h2 implicit (--step-4 ar fi cât titlul paginii). */
.write__title,
.place__title {
    font-size: var(--step-2);
    font-weight: var(--weight-mid);
    font-variation-settings: var(--axes-display);
    color: var(--forest);
}

.write__lead {
    max-width: 34rem;
    margin-block-start: var(--space-2xs);
    font-size: var(--step--1);
    line-height: var(--leading-body);
    color: var(--ink-soft);
}


/* ---------------------------------------------------------------------------
   5. CÂMPURI ȘI BUTON
   --------------------------------------------------------------------------- */

/* Formular mai îngust decât coloana lui: între el și hartă trebuie să rămână
   un culoar liber prin care coboară drumul desenat (z-index: -1) — fără
   plafon, linia s-ar rupe sub câmpuri. Muți drumul, muți și plafonul. */
.form {
    max-width: 30rem;
    margin-block-start: var(--space-m);
}

/* 12rem: sub atât „Telefon sau e-mail" nu mai încape pe un rând în etichetă. */
.form__pair {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-s);
}

.form__pair .field {
    flex: 1 1 12rem;
    margin-block-start: 0;
}

.form > .field {
    margin-block-start: var(--space-s);
}

.field__label {
    display: block;
    margin-block-end: var(--space-3xs);
    font-size: var(--step--1);
    font-weight: var(--weight-mid);
    color: var(--ink);
}

/* Singurul loc din proiect cu border-box: cu content-box, width: 100% plus
   padding plus chenar ar depăși coloana. */
.field__input {
    box-sizing: border-box;
    display: block;
    width: 100%;
    padding: var(--space-2xs) var(--space-xs);
    border: var(--hairline) solid var(--earth);
    border-radius: var(--radius-s);
    background: var(--paper-lift);
    color: var(--ink);
    font-family: var(--font-text);
    font-size: var(--step-0);
    line-height: var(--leading-body);
    transition: border-color var(--duration) var(--ease),
        background-color var(--duration) var(--ease);
}

.field__input::placeholder {
    color: var(--ink-soft);
    opacity: 1;
}

.field__input:hover {
    border-color: var(--bark-soft);
}

/* Conturul de focalizare vine din base.css (:focus-visible); aici doar
   chenarul se închide, ca să rămână vizibil și după ce conturul dispare la clic. */
.field__input:focus {
    border-color: var(--forest);
    background: var(--paper-lift);
    outline-offset: 1px;
}

/* :user-invalid, nu :invalid — :invalid e adevărat din primul cadru pe un câmp
   gol și obligatoriu, deci ar înroși formularul înainte să scrie omul ceva. */
.field__input:user-invalid {
    border-color: var(--action-deep);
}

/* Se trage numai pe verticală: pe orizontală ar ieși din coloană. */
.field__input--area {
    min-height: 9rem;
    resize: vertical;
}

.form__consent {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2xs);
    margin-block-start: var(--space-s);
}

.form__consent-check {
    flex: none;
    width: 1.125rem;
    height: 1.125rem;
    margin: 0.3em 0 0;
    accent-color: var(--action-deep);
}

.form__consent-label {
    max-width: 42ch;
    color: var(--ink-soft);
    font-size: var(--step--1);
    line-height: var(--leading-body);
}

.form__consent-label a {
    color: var(--action-ink);
    font-weight: var(--weight-mid);
    text-decoration-thickness: var(--hairline);
    text-underline-offset: 0.2em;
}

.form__consent-label a:hover,
.form__consent-label a:focus-visible {
    color: var(--action-deep);
    text-decoration-thickness: var(--rule);
}

/* .btn + .btn--ink din style.css; aici rămâne numai distanța față de ultimul câmp. */
.form .btn {
    margin-block-start: var(--space-m);
}

/* Starea comună dezactivată este făcută pentru film. Pe hârtie folosim
   nisip și brun, păstrând forma comună fără mătura de hover. */
.form .btn:disabled,
.form .btn[aria-disabled="true"] {
    border-color: var(--sand);
    background: transparent;
    color: var(--ink-soft);
}

.form .btn:disabled:hover,
.form .btn[aria-disabled="true"]:hover {
    border-color: var(--sand);
    color: var(--ink-soft);
}

.form .btn:disabled:hover::before,
.form .btn[aria-disabled="true"]:hover::before {
    transform: scaleX(0);
}

/* Capcana pentru roboți. Nu display: none și nici hidden: unele programe sar
   peste ce nu se vede, iar un input hidden nici nu poate fi bifat. Rămâne în
   pagină, bifabilă, dar scoasă din flux și din calea tastaturii. */
.form__trap {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

/* Răspunsul de după trimitere. Gol nu ocupă nimic (:empty), deci butonul nu
   sare când apare textul; marginea vine odată cu el. Roșul e --action-deep
   (5.1:1 pe hârtie), singurul roșu-portocaliu al temei. */
.form__status {
    margin-block-start: var(--space-s);
    font-size: var(--step--1);
    line-height: var(--leading-body);
    color: var(--ink);
}

.form__status:empty {
    margin-block-start: 0;
}

/* Brun, nu verde: verdele temei pe hârtie e 3.8:1, sub prag la mărimea asta
   de text (tabelul de contraste din DESIGN.md îl acceptă numai la titluri).
   Reușita se citește din text și din greutate. */
.form__status--ok {
    color: var(--ink);
    font-weight: var(--weight-mid);
}

.form__status--bad {
    color: var(--action-deep);
}


/* ---------------------------------------------------------------------------
   6. HARTA ȘI TRASEUL
   --------------------------------------------------------------------------- */

/* Rama plată, un singur chenar, fără umbră; overflow: hidden ține harta și
   comenzile Google în același contur. border-box: chenarul de 1px trebuie să
   intre în lățimea coloanei, nu să se adune peste ea. */
.place__map {
    box-sizing: border-box;
    display: grid;
    margin-block-start: var(--space-m);
    aspect-ratio: 16 / 10;
    border: var(--hairline) solid var(--earth);
    border-radius: var(--radius-m);
    background: var(--paper-lift);
    overflow: hidden;
    transition: border-color var(--duration) var(--ease);
}

.place__map:hover,
.place__map:focus-within {
    border-color: var(--forest);
}

.place__map > iframe,
.place__map > img {
    width: 100%;
    height: 100%;
    border: 0;
    object-fit: cover;
}

/* Cross-origin, deci nu se pot stiliza separat drumurile/etichetele: filtrul
   încălzește harta spre hârtie și pământ; la interacțiune revine aproape de
   culoarea reală, ca detaliile să fie clare. */
.place__map > iframe {
    filter: grayscale(0.16) sepia(0.2) saturate(0.72) brightness(1.04) contrast(0.93);
    transition: filter var(--duration-slow) var(--ease-out);
}

.place__map:hover > iframe,
.place__map:focus-within > iframe {
    filter: grayscale(0.03) sepia(0.06) saturate(0.94) brightness(1.01) contrast(0.98);
}

/* Conturul global ar fi tăiat de overflow pe ramă; mutat în iframe rămâne vizibil. */
.place__map > iframe:focus-visible {
    outline: 2px solid var(--action);
    outline-offset: -3px;
    border-radius: 0;
}

.place__where {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    margin-block-start: var(--space-s);
    color: var(--ink);
}

.place__pin {
    flex: none;
    width: 1.15rem;
    height: 1.15rem;
    color: var(--forest);
}

/* --action-ink, nu --action: portocaliul plin are contrast 2.8, varianta
   închisă trece pragul. Fără subliniere în repaus — săgeata și culoarea spun
   deja că se dă clic. */
.place__route {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    margin-block-start: var(--space-xs);
    color: var(--action-ink);
    font-weight: var(--weight-mid);
    text-decoration: underline;
    text-decoration-color: transparent;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.28em;
    transition: color var(--duration) var(--ease),
        text-decoration-color var(--duration) var(--ease);
}

.place__route:hover,
.place__route:focus-visible {
    color: var(--action-hot);
    text-decoration-color: currentColor;
}

.place__arrow {
    flex: none;
    width: 1.1rem;
    height: 1.1rem;
    transition: transform var(--duration) var(--ease-out);
}

.place__route:hover .place__arrow,
.place__route:focus-visible .place__arrow {
    transform: translateX(0.25rem);
}


/* ---------------------------------------------------------------------------
   7. DESENELE DE FUNDAL ȘI DRUMUL
   --------------------------------------------------------------------------- */

/* Sub text (z-index: -1), peste hârtia paginii, multiply ca să se stingă în
   crem. max-width: none fiindcă base.css taie orice imagine la 100%.
   Elementul gazdă (.contact) are isolation și fundal — fără ele desenul rămâne alb. */
.motif {
    position: absolute;
    z-index: -1;
    max-width: none;
    mix-blend-mode: multiply;
    pointer-events: none;
}

/* Ramurile intră din marginile ferestrei, tăiate de overflow: clip.
   Plafonul de 46rem e lăţimea reală a branch-1024.webp; peste el s-ar mări o
   imagine, ceea ce nu se face nicăieri pe site.
   Frunzişul stă în colţul dreapta-sus al fişierului: ramura din stânga intră
   neîntoarsă, cea din dreapta e oglindită cu scale: -1 1.
   Opacitatea nu urcă peste 0.68: sub frunziş verdele titlurilor scade de la
   contrast 3.8 la ~3.35, peste pragul de 3 pentru text mare. */
.motif--branch-left {
    /* 8%, nu 4%: bara verde fixed (--header-h) mânca vârful frunzişului. */
    inset-block-start: 8%;
    /* Ancorat la marginea COLOANEI, nu la geam: --bleed e hârtia dintre ele,
       deci ramura se mută odată cu coloana pe ecran lat. */
    inset-inline-start: calc(var(--bleed) - var(--branch-w) * 0.78);
    width: var(--branch-w);
    opacity: 0.68;
    rotate: -9deg;

    --branch-w: clamp(25rem, 40vw, 46rem);
}

/* 42%: banda liberă dintre fotografie şi formular — mai sus/jos ar intra sub
   fundalurile lor opace, care ar acoperi desenul (z-index: -1). */
.motif--branch-right {
    inset-block-start: 42%;
    inset-inline-end: calc(var(--bleed) - var(--branch-w) * 0.62);
    width: var(--branch-w);
    opacity: 0.62;
    rotate: 6deg;
    scale: -1 1;

    --branch-w: clamp(24rem, 44vw, 46rem);
}

/* Fiecare frunză e prinsă de drum, nu împrăștiată ca în livada de pe index.

   --road-x/--road-y: punctul de pe curbă de care se prinde frunza (centrul,
   nu colțul cutiei). Sunt FRACȚII din banda drumului, nu procente din geam:
   --road-x pe lățimea ei (0 = stânga, 1 = dreapta), --road-y pe înălțime,
   exact cum sunt scrise în „d" împărțite la 1000. Se schimbă „d", se schimbă
   și perechile astea.

   --road-turn e unghiul curbei în punctul ăla (0 = spre dreapta, 90 = în jos).
   Frunza desenată are vârful în sus-dreapta, la ~40deg deasupra orizontalei:
     rotate: calc(var(--road-turn) + 102deg)  o pune pe STÂNGA liniei
     rotate: calc(var(--road-turn) - 22deg)   o pune pe DREAPTA liniei
   codița rămâne întoarsă spre linie, limbul în afară, în amândouă cazurile.

   Partea nu e liber aleasă: între 56% și 70% din înălțime drumul trece la
   30-40px de marginea formularului, deci acolo o frunză încape numai pe
   dreapta — de aia ies două la rând pe aceeași parte. Se mută plafonul
   formularului (.form, max-width) sau coloana hărții, se verifică din nou
   fiecare cutie de aici. */
.motif--road {
    width: var(--road-w);
    inset-block-start: calc(var(--road-y0)
        + var(--road-yh) * var(--road-y)
        - var(--road-w) / 2);
    /* Aceeași bandă ca linia (--road-left / --road-span, secțiunea 2), deci
       frunza rămâne lipită de linie la orice lățime. */
    inset-inline-start: calc(var(--road-left)
        + var(--road-span) * var(--road-x)
        - var(--road-w) / 2);
}

/* Prima frunză, mică: drumul abia a ieșit de lângă fotografie, trebuie să se
   citească întâi linia. */
.motif--road-leaf-a {
    --road-x: 0.420;
    --road-y: 0.47;
    --road-w: clamp(4rem, 5.5vw, 6rem);
    --road-turn: 66deg;

    rotate: calc(var(--road-turn) + 102deg);
    opacity: 0.56;
}

.motif--road-leaf-b {
    --road-x: 0.491;
    --road-y: 0.56;
    --road-w: clamp(4.5rem, 6vw, 6.5rem);
    --road-turn: 119deg;

    rotate: calc(var(--road-turn) - 22deg);
    opacity: 0.52;
}

.motif--road-leaf-c {
    --road-x: 0.481;
    --road-y: 0.71;
    --road-w: clamp(4.25rem, 5.75vw, 6.25rem);
    --road-turn: 53deg;

    rotate: calc(var(--road-turn) - 22deg);
    opacity: 0.58;
}

.motif--road-leaf-d {
    --road-x: 0.462;
    --road-y: 0.83;
    --road-w: clamp(4.5rem, 6vw, 6.75rem);
    --road-turn: 95deg;

    rotate: calc(var(--road-turn) + 102deg);
    opacity: 0.5;
}

/* Cea mai mare, sub formular, unde pagina e liberă. */
.motif--road-leaf-e {
    --road-x: 0.530;
    /* 0.92, nu 0.90: la 0.90 vârful din dreapta intra peste „Deschide traseul". */
    --road-y: 0.92;
    --road-w: clamp(5rem, 7vw, 7.5rem);
    --road-turn: 88deg;

    rotate: calc(var(--road-turn) - 22deg);
    opacity: 0.54;
}

/* Capătul drumului, puțin la stânga punctului portocaliu, nu sub el — acesta
   vine după în HTML și acoperit de măr ar arăta a greșeală. Alese față de
   ultimul punct al curbei (0.5, 0.936) — se mută „d", se mută și ele. */
.motif--road-apple {
    --road-x: 0.435;
    --road-y: 0.97;
    --road-w: clamp(4.25rem, 5.75vw, 6.25rem);

    rotate: -6deg;
    opacity: 0.5;
}

/* DRUMUL. SVG întins peste toată pagina (preserveAspectRatio="none" în HTML),
   deci coordonatele viewBox-ului sunt procente din pagină și linia crește
   odată cu conținutul, fără JavaScript. */
.road {
    position: absolute;
    /* Întins pe COLOANĂ, nu pe geam: legat de geam, drumul dispărea sub
       formular pe ecran lat (are z-index: -1). Fără width: 100% — l-ar
       readuce la lățimea geamului. */
    inset-block-start: var(--road-y0);
    inset-inline-start: var(--road-left);
    z-index: -1;
    /* Lățimea se SCRIE: <svg> cu width: auto ia raportul din viewBox (1:1)
       și se face lat cât e de înalt. */
    width: var(--road-span);
    height: var(--road-yh);
    pointer-events: none;
}

/* vector-effect: fără el, întinderea neuniformă ar face linia groasă pe
   verticală și subțire pe orizontală. */
.road__line {
    fill: none;
    stroke: var(--earth);
    stroke-width: 1.5px;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}

/* Capătul drumului. Cerc separat, nu în SVG: în SVG-ul întins ar ieși oval.
   93.6% și 0.5 sunt ultimul punct al curbei (936 și 500 din 1000) — se
   schimbă „d", se schimbă și astea două. Orizontala se citește pe banda
   drumului, ca frunzele, nu pe pagină. */
.road__stop {
    position: absolute;
    z-index: -1;
    inset-block-start: calc(var(--road-y0) + var(--road-yh) * 0.936);
    inset-inline-start: calc(var(--road-left) + var(--road-span) * 0.5);
    width: 0.7rem;
    height: 0.7rem;
    margin: -0.35rem 0 0 -0.35rem;
    border-radius: var(--radius-pill);
    background: var(--action);
}

/* Chenar desenat, nu umbră: o umbră cu blur și decalaj zero e un halou, nu adâncime. */
.road__stop::after {
    content: "";
    position: absolute;
    inset: -0.4rem;
    border: var(--hairline) solid var(--action);
    border-radius: inherit;
    opacity: 0.45;
}


/* ---------------------------------------------------------------------------
   8. SOSIREA LA DERULARE

   .reveal (blocul urcă și se așază) vine din style.css; contact.js îi pune
   clasa. Aici sunt numai cele două mișcări proprii paginii.
   --------------------------------------------------------------------------- */

/* Fotografia se dezvelește de jos în sus prin propria siluetă. .wipe e pusă
   numai de contact.js, deci fără script fotografia e întreagă din primul cadru. */
.reach__frame {
    clip-path: inset(0);
    transition: clip-path 900ms var(--ease-out);
}

.reach__frame.wipe {
    clip-path: inset(100% 0 0 0);
}

.reach__frame.wipe.is-in {
    clip-path: inset(0);
}

/* Drumul se desenează o dată, la încărcare, de sus în jos.
   Se dezvelește cu clip-path, NU cu stroke-dasharray: cu pathLength="1" plus
   vector-effect: non-scaling-stroke și întinderea neuniformă, Chrome
   calculează greșit tiparul de linii și mănâncă o bucată din mijlocul curbei.
   Nu pune dasharray la loc.
   Cele două procente sunt capetele curbei: 316 și 936 din 1000, primul și
   ultimul punct din „d". Se schimbă „d", se schimbă și ele.
   html:not(.no-js), nu o clasă pusă din JS: scriptul din <head> scoate .no-js
   înainte de prima pictare, deci fără JavaScript drumul rămâne desenat întreg. */
html:not(.no-js) .road {
    clip-path: inset(31.6% 0 68.4% 0);
    transition: clip-path 2600ms var(--ease);
}

html:not(.no-js) .road__stop {
    opacity: 0;
    /* Întârzierea e cât ține desenarea liniei: punctul apare la capăt, nu odată cu ea. */
    transition: opacity var(--duration-slow) var(--ease) 2300ms;
}

.contact.is-drawn .road {
    clip-path: inset(31.6% 0 6.4% 0);
}

.contact.is-drawn .road__stop {
    opacity: 1;
}

/* normalize.css și base.css scurtează toate tranzițiile când aparatul anunță
   mișcare redusă. Compoziția aprobată păstrează însă mișcările ei, la fel ca
   pagina principală; fără excepția asta drumul apare întreg într-o clipă. */
@media (prefers-reduced-motion: reduce) {

    html:not(.no-js) .road {
        transition-duration: 2600ms !important;
    }

    html:not(.no-js) .road__stop {
        transition-duration: var(--duration-slow) !important;
    }
}


/* ---------------------------------------------------------------------------
   9. LĂȚIMI — interogări în em, nu px, ca textul mărit din browser să
   primească aranjamentul strâmt mai devreme.

     80em   culoarul dintre formular și hartă, prin care coboară drumul, se
            închide (măsurat: 0 la 1200px). De aici în jos drumul se mută în
            marginea din stânga, iar primul ecran se așază pe o coloană.
     coarse degetul, nu lățimea: câmpurile și „Deschide traseul" sunt sub
            pragul de 44px la orice lățime.
     85em   ecrane mari: lățimea se ține ca pe index, cresc numai crengile.

   Nu există interogare la 48em: formularul și harta se pun singure una sub
   alta (flex-wrap), la fel cele două câmpuri scurte; restul e clamp.
   --------------------------------------------------------------------------- */

@media (max-width: 79.99em) {

    .contact {
        /* CULOARUL DRUMULUI: gutter-ul plus atât, și în el intră numai linia
           cu frunzele ei; textul începe după el. Preț plătit dinadins, la fel
           ca la spina de pe index — drumul e ideea paginii.
           Fără culoar, linia ar DISPĂREA pe bucăți sub caseta hărții și sub
           fotografie, care au fundal opac, iar drumul stă la z-index: -1. */
        --road-corridor: clamp(2.25rem, 7vw, 9rem);
        --road-left: 0px;
        --road-span: calc(var(--gutter) + var(--road-corridor));

        /* Cutia se întinde în sus ca linia să pornească din capul paginii.
           Valorile vin din două condiții: începutul curbei (0.316) să cadă
           la 1.5% din pagină (în padding, peste eyebrow), iar mărul (0.97) la
           95% (încă în pagină, nu tăiat de overflow: clip). Se mută „d" sau
           paddingul, se recalculează. */
        --road-y0: -43.7%;
        --road-yh: 143%;
    }

    .reach,
    .meet {
        padding-inline-start: calc(var(--gutter) + var(--road-corridor));
    }

    /* PRIMUL ECRAN PE O COLOANĂ. Cu cele două alături, la 768px coloana de
       text ajungea la 256px cu titlul la 47px (trei cuvinte pe rând), iar
       fotografia la 410x256. Mai jos se subția în continuare, și fiindcă masca
       de acuarelă e întinsă 100% 100% peste cadru, ea se subția cu el: de
       acolo venea impresia că fotografia se rupe și nu ține pasul cu restul
       paginii. Stivuită, fotografia are toată lățimea liberă la dispoziție. */
    .reach__inner {
        display: block;
    }

    /* Ține forma de titlu din machetă: se rupe după „livadă" în loc să se
       întindă pe un rând lat de 1000px la 1279. */
    .reach__title {
        max-width: 22ch;
    }

    .reach__frame {
        /* Golul de deasupra e --space-2xl plus ce mănâncă mărirea cadrului:
           scale(1.12) din centru urcă 6% din înălțimea fotografiei, adică
           3.75% din lățime (procentele de margine se socotesc pe lățimea
           blocului părinte). Fără corecție, golul se subția pe măsură ce
           fotografia creștea și se lipea de „E-MAIL". */
        margin-block-start: calc(var(--space-2xl) + 3.75%);
        /* Cu 34rem plus ieșirea, fotografia rămâne cu o treaptă mai lată
           decât formularul și harta (ambele plafonate la 30rem) — erou, nu
           bloc singur pe pagină. Pe telefon plafonul nu prinde, coloana fiind
           oricum mai îngustă. */
        max-width: calc(34rem + var(--bleed));
        /* Distanța o dă acum marginea de sus, nu împinsul de pe ecran larg. */
        translate: none;
        /* Mărirea cadrului se face DIN MARGINEA STÂNGĂ, nu din centru:
           centrată, ar împinge fotografia peste culoarul drumului și l-ar
           acoperi. Spre dreapta poate crește liniștită, iese oricum din geam. */
        transform-origin: left center;
    }

    /* Banda drumului e acum de 3-9rem și pagina de câteva ori mai înaltă,
       deci curba e aproape verticală la orice lățime din interval — unghiul
       devine 90deg pentru toate, formulele de rotire ale frunzelor rămân
       neatinse. Frunzele se micșorează ca să încapă între linie și geam. */
    .motif--road {
        --road-turn: 90deg;
        --road-w: clamp(2.25rem, 4.75vw, 5.25rem);
    }

    /* Mărul e cel mai lat din șir, deci și cel care ajunge primul la text. */
    .motif--road-apple {
        --road-w: clamp(2.5rem, 5vw, 5.25rem);
    }

    /* CRENGILE — nu stă text în spatele unui desen la nicio lățime. Stivuit,
       coloana de text ține toată lățimea liberă, deci nu mai există fâșia de
       hârtie goală de pe ecran lat.
       Cea din stânga are unde să stea — culoarul drumului; retragerea crește
       ca să se vadă numai frunzișul din capăt. */
    .motif--branch-left {
        --branch-w: clamp(14rem, 30vw, 25rem);
        inset-inline-start: calc(var(--bleed) - var(--branch-w) * 0.94);
    }

    /* Cea din dreapta nu are unde: la 375px coloana ajunge la 22px de geam,
       orice desen de acolo ar cădea peste câmpurile formularului. Ascunsă, nu
       micșorată — fișierul e oricum același cu al crengii din stânga. */
    .motif--branch-right {
        display: none;
    }

    /* Formularul și harta se pun singure una sub alta pe la ~700px liberi.
       Fără plafon, harta rămânea lată cât coloana lângă un formular mai
       îngust — două blocuri de măsuri diferite aliniate la stânga. */
    .place {
        max-width: 30rem;
    }
}


/* Degetul, nu lățimea: pe un ecran cu atingere pragul e 44px, iar piesele de
   aici sunt sub el cu paddingul normal. Nu se schimbă nimic la mouse, unde
   45px e o țintă bună. */
@media (pointer: coarse) {

    .field__input {
        padding-block: var(--space-xs);
    }

    /* Marginea de sus scade cu exact cât crește paddingul, ca golul dintre
       „Brabova, Dolj" și link să rămână cel desenat. */
    .place__route {
        margin-block-start: var(--space-3xs);
        padding-block: var(--space-2xs);
    }
}


/* Peste 1360px pagina ȚINE lățimea, ca index-ul: --container rămâne 78rem.
   Ce mai crește vine din secțiunea 14 a style.css. Aici rămân doar crengile. */
@media (min-width: 85em) {

    /* Crengile cresc cu --lane, hârtia goală de peste gutter, ca să ajungă
       tot atât peste compoziție pe orice monitor. Plafonul de 64rem e
       lățimea reală a branch-1024.webp; peste el s-ar mări imaginea. */
    .motif--branch-left {
        --branch-w: min(clamp(25rem, 40vw, 46rem) + var(--lane), 64rem);
        /* Retragerea nu poate fi o fracție din lățime (ca în secțiunea 7):
           lățimea crește cu --lane, deci fracția ar duce ramura tot mai adânc
           peste coloană. Scrisă ca „lățimea minus 7.5rem", intrarea peste
           coloană rămâne fixă la orice lățime. */
        inset-inline-start: calc(var(--bleed) - var(--branch-w) + 7.5rem);
    }

    .motif--branch-right {
        --branch-w: min(clamp(24rem, 44vw, 46rem) + var(--lane), 64rem);
        /* Aceeași socoteală, cu fracția ei (0.38): 14rem e cât dă ea în prag. */
        inset-inline-end: calc(var(--bleed) - var(--branch-w) + 14rem);
    }
}