/*
 * Doar pagina de prezentare (layouts/prezentare). Scris de mana, fara Tailwind, ca sa nu
 * intre in foaia aplicatiei. Culorile sunt cele din tailwind.config.js.
 *
 * Regula: tot ce se misca sta sub prefers-reduced-motion: no-preference si sub .js-miscare
 * (clasa pusa de public/js/prezentare.js). Fara JS sau cu miscare redusa, pagina e statica
 * si tot continutul e vizibil.
 */
:root {
    --verde: #1E8E5A; --verde-inchis: #17704A; --verde-deschis: #E8F5EE;
    --rosu: #D64545; --rosu-deschis: #FBEBEB;
    --antracit: #1F2933; --antracit-600: #52606D; --antracit-400: #9AA5B1; --antracit-200: #E4E7EB; --antracit-100: #F5F7FA;
    --iesire: cubic-bezier(0.23, 1, 0.32, 1);
}

::selection { background: #CDEBDB; color: var(--antracit); }
:focus-visible { outline: 2px solid var(--verde); outline-offset: 3px; }
.prezentare a { text-underline-offset: 3px; }
/* Capturile inclinate si etichetele de langa telefon nu au voie sa creeze derulare laterala. */
.prezentare main { overflow-x: clip; }

/* ---------- Textura: foaia de registru pe care o inlocuim ---------- */
.foaie-registru { position: relative; isolation: isolate; }
.foaie-registru::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background-image: linear-gradient(to bottom, rgba(31, 41, 51, 0.06) 1px, transparent 1px);
    background-size: 100% 32px;
    -webkit-mask-image: radial-gradient(ellipse 75% 80% at 65% 35%, #000 25%, transparent 72%);
    mask-image: radial-gradient(ellipse 75% 80% at 65% 35%, #000 25%, transparent 72%);
}
.foaie-puncte { position: relative; isolation: isolate; }
.foaie-puncte::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background-image: radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1.2px);
    background-size: 22px 22px;
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 30%, #000 70%, transparent);
    mask-image: linear-gradient(to bottom, transparent, #000 30%, #000 70%, transparent);
}

/* ---------- Adancime pentru capturi ---------- */
.telefon-adanc {
    box-shadow: 0 1px 2px rgba(31, 41, 51, 0.08), 0 14px 28px -8px rgba(31, 41, 51, 0.22), 0 40px 70px -24px rgba(31, 41, 51, 0.28);
}
.hartie-adanc { box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2), 0 24px 48px -12px rgba(0, 0, 0, 0.45); }
@media (min-width: 640px) {
    .inclinat-stanga { transform: rotate(-2deg); }
    .inclinat-dreapta { transform: rotate(2deg) translateY(12px); }
    .inclinat-pdf { transform: rotate(1.5deg); }
}

/* ---------- Telefonul din primul ecran (static) ---------- */
.demo-rand { border-color: var(--antracit-200); transition: border-color .25s ease, background-color .25s ease; }
.demo-rand.iesit { border-color: var(--rosu); background: var(--rosu-deschis); }
.demo-rand.iesit [data-cifra] { color: var(--rosu); }
.demo-camp { border-color: var(--antracit-200); background: #fff; transition: border-color .2s ease, box-shadow .2s ease; }
.demo-foaie { display: block; }
.demo-alegere { border-color: var(--verde); background: var(--verde-deschis); font-weight: 500; }
.demo-gata { display: none; }
.demo-eticheta { display: none; }
@media (min-width: 1024px) {
    .demo-eticheta {
        position: absolute; z-index: 5; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
        padding: 6px 10px; border-radius: 999px; font-size: 13px; font-weight: 500; background: #fff; color: var(--antracit);
        box-shadow: 0 1px 2px rgba(31, 41, 51, 0.08), 0 8px 20px -6px rgba(31, 41, 51, 0.2);
    }
    .demo-eticheta-ora { top: -24px; left: calc(100% - 64px); }
    .demo-eticheta-iesit { top: 190px; left: calc(100% - 22px); color: var(--rosu); }
    .demo-eticheta-verde { bottom: 40px; right: calc(100% - 30px); color: var(--verde-inchis); }
}

/* ---------- Pasii si cronologia, statice: verzi, ca acum ---------- */
.pas-nr { transition: background-color .3s ease, color .3s ease, box-shadow .3s ease; }

/* ---------- Intrebari si registre: semnul + ---------- */
.plus { transition: transform .2s var(--iesire); }

/* ======================= Miscare ======================= */
.fara-tranzitie-demo, .fara-tranzitie-demo * { transition: none !important; }
@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }

    /* Aparitii la derulare. Ce era deja pe ecran la incarcare primeste .vazut fara tranzitie. */
    .js-miscare [data-apar] {
        opacity: 0; transform: translateY(16px);
        transition: opacity .6s var(--iesire), transform .6s var(--iesire);
        transition-delay: calc(var(--i, 0) * 70ms);
    }
    .js-miscare [data-apar].vazut { opacity: 1; transform: none; }
    .js-miscare [data-apar].fara-tranzitie { transition: none; }
    .js-miscare [data-apar].inclinat-stanga.vazut { transform: none; }
    @media (min-width: 640px) {
        .js-miscare [data-apar].inclinat-stanga { transform: rotate(-5deg) translateY(28px); }
        .js-miscare [data-apar].inclinat-dreapta { transform: rotate(5deg) translateY(40px); }
        .js-miscare [data-apar].inclinat-stanga.vazut { transform: rotate(-2deg); }
        .js-miscare [data-apar].inclinat-dreapta.vazut { transform: rotate(2deg) translateY(12px); }
    }
    @media (min-width: 640px) and (hover: hover) and (pointer: fine) {
        .inclinat-stanga, .inclinat-dreapta, .inclinat-pdf { transition: transform .45s var(--iesire), opacity .6s var(--iesire); }
        .js-miscare [data-apar].vazut.inclinat-stanga:hover,
        .js-miscare [data-apar].vazut.inclinat-dreapta:hover,
        .inclinat-pdf:hover { transform: rotate(0) translateY(-4px); transition-delay: 0s; }
    }

    /* Cum merge: cercul cu numarul se umple cand pasul intra pe ecran. */
    .js-miscare .pasi > li .pas-nr { background: #fff; color: var(--antracit-600); box-shadow: inset 0 0 0 2px var(--antracit-200); }
    .js-miscare .pasi > li.vazut .pas-nr { background: var(--verde); color: #fff; box-shadow: inset 0 0 0 2px var(--verde); transition-delay: .35s; }

    /* O zi in bucatarie: firul verde coboara cu derularea, punctele se aprind cand le treci. */
    .js-miscare .cronologie::after {
        content: ""; position: absolute; left: -2px; top: 0; bottom: 0; width: 2px; background: var(--verde);
        transform-origin: top; transform: scaleY(var(--fir, 0));
    }
    .js-miscare .cronologie > li::before { background: var(--antracit-400); transition: background-color .3s ease, transform .3s var(--iesire); }
    .js-miscare .cronologie > li.trecut::before { background: var(--verde); transform: scale(1.25); }
    .js-miscare .cronologie > li > span { transition: opacity .3s ease; }
    .js-miscare .cronologie > li:not(.trecut) > span { opacity: .55; }

    /* Butoane: un pic de ridicare doar cu mouse; apasarea (scale .98) e deja in .buton. */
    @media (hover: hover) and (pointer: fine) {
        .prezentare .buton-verde { transition-property: color, background-color, box-shadow, transform, translate; transition-duration: .2s; transition-timing-function: var(--iesire); }
        .prezentare .buton-verde:hover { translate: 0 -1px; box-shadow: 0 8px 18px -6px rgba(30, 142, 90, 0.55); }
        .sageata { display: inline-block; transition: transform .2s var(--iesire); }
        a:hover > .sageata { transform: translateX(3px); }
    }

    /* Intrebari si registre: + se roteste, raspunsul se deschide lin unde browserul stie. */
    details[open] > summary .plus { transform: rotate(45deg); }
    details > summary + * { animation: none; }
    details[open] > summary + * { animation: deschide .3s var(--iesire); }
    @keyframes deschide { from { opacity: 0; transform: translateY(-4px); } }
    @supports (interpolate-size: allow-keywords) {
        .prezentare { interpolate-size: allow-keywords; }
        .prezentare details::details-content {
            block-size: 0; overflow: hidden;
            transition: block-size .3s var(--iesire), content-visibility .3s allow-discrete;
        }
        .prezentare details[open]::details-content { block-size: auto; }
    }

    /* ---------- Telefonul viu ---------- */
    .js-miscare .demo { height: var(--demo-h, auto); }
    .js-miscare .demo-foaie {
        position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
        border-radius: 18px 18px 0 0; box-shadow: 0 -12px 30px -10px rgba(31, 41, 51, 0.3);
        transform: translateY(105%); transition: transform .45s var(--iesire);
    }
    .js-miscare .demo-alegere { border-color: var(--antracit-200); background: #fff; font-weight: 400; transition: border-color .15s ease, background-color .15s ease, transform .15s var(--iesire); }
    .js-miscare .demo-alegere.apasat { border-color: var(--verde); background: var(--verde-deschis); transform: scale(.97); }
    .js-miscare .demo-gata {
        display: flex; position: absolute; inset: 41px 0 0; z-index: 3; background: #fff;
        opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility 0s .35s;
    }
    .js-miscare .demo-bifa { stroke-dasharray: 40; stroke-dashoffset: 40; }
    .js-miscare .demo-rand { position: relative; }
    .js-miscare .demo-rand .demo-iesit { display: none; }
    .js-miscare .demo-rand.iesit .demo-iesit { display: block; animation: deschide .25s var(--iesire); }
    .js-miscare .demo-rand.ok .demo-camp { border-color: #A7D7BF; }
    .js-miscare .demo-rand.activ .demo-camp { border-color: var(--verde); box-shadow: 0 0 0 3px rgba(30, 142, 90, 0.18); }
    .js-miscare .demo-rand.activ [data-cifra]::after {
        content: ""; display: inline-block; width: 2px; height: 1.05em; margin-left: 1px; vertical-align: -0.15em;
        background: var(--verde); animation: cursor 1s steps(1) infinite;
    }
    @keyframes cursor { 50% { opacity: 0; } }
    .js-miscare .demo-salveaza { transition: transform .12s var(--iesire), background-color .12s ease; }
    .js-miscare .demo-salveaza.apasat { transform: scale(.97); background: var(--verde-inchis); }

    .js-miscare .demo[data-pas="foaie"] .demo-foaie { transform: none; }
    .js-miscare .demo[data-pas="gata"] .demo-gata { opacity: 1; visibility: visible; transition: opacity .35s ease, visibility 0s; }
    .js-miscare .demo[data-pas="gata"] .demo-bifa { stroke-dashoffset: 0; transition: stroke-dashoffset .5s .15s var(--iesire); }

    @media (min-width: 1024px) {
        .js-miscare .demo-eticheta { opacity: 0; transform: translateY(6px) scale(.97); transition: opacity .35s ease, transform .4s var(--iesire); }
        .js-miscare .demo-telefon[data-eticheta~="ora"] .demo-eticheta-ora,
        .js-miscare .demo-telefon[data-eticheta~="iesit"] .demo-eticheta-iesit,
        .js-miscare .demo-telefon[data-eticheta~="verde"] .demo-eticheta-verde { opacity: 1; transform: none; }
    }
}

/* Butonul clipului: atributul hidden castiga in fata lui `flex`. */
.buton-clip[hidden] { display: none; }
/* Pasii si intrebarile pliate pe telefon: fara triunghiul implicit. */
.pas-detalii > summary::-webkit-details-marker, .intrebari-mai-multe > summary::-webkit-details-marker { display: none; }