/* ============================================================ INTRO — cortina de intrare la prima vizita in sesiune. Ecran verde -> textul apare cu fade -> textul iese, apare logo-ul -> toata cortina pleaca de jos in sus. Reguli de siguranta: - implicit `display:none`. Se afiseaza DOAR daca scriptul din a pus `html.intro-on`. Fara JS nu ramane nimeni blocat in spatele unui ecran verde. - totul e animatie CSS cu `forwards`, deci se termina singura chiar daca JS-ul moare dupa ce a pornit-o. - `prefers-reduced-motion` o sare complet. ============================================================ */ .intro { display: none; } .intro-on .intro { display: grid; place-items: center; position: fixed; inset: 0; z-index: 400; background: var(--green-deep); color: #fff; padding: 6vw; text-align: center; animation: introLift .85s cubic-bezier(.76, 0, .24, 1) 2.55s forwards; } .intro__stack { position: relative; display: grid; place-items: center; } .intro__line { grid-area: 1 / 1; max-width: 20ch; font-size: clamp(1.9rem, 5.4vw, 4.1rem); font-weight: 400; letter-spacing: -0.02em; line-height: 1.16; text-wrap: balance; color: rgba(255, 255, 255, .76); opacity: 0; transform: translateY(14px); animation: introIn .7s var(--ease) .15s forwards, introOut .45s var(--ease) 1.55s forwards; } /* Propozitia ramane intreaga; accentul cade DOAR pe cele doua lucruri care conteaza („28 de ani" si „implantologie"), prin greutate si alb plin, in timp ce restul frazei sta subtire si usor stins. */ .intro__hi { font-weight: 800; letter-spacing: -0.035em; color: #fff; } .intro__logo { grid-area: 1 / 1; width: min(74vw, 460px); opacity: 0; transform: translateY(14px) scale(.97); animation: introIn .65s var(--ease) 1.9s forwards; } .intro__logo img { width: 100%; height: auto; display: block; } @keyframes introIn { to { opacity: 1; transform: none; } } @keyframes introOut { to { opacity: 0; transform: translateY(-12px); } } @keyframes introLift { 0% { transform: translateY(0); } 99% { transform: translateY(-100%); visibility: visible; } 100% { transform: translateY(-100%); visibility: hidden; } } @media (prefers-reduced-motion: reduce) { .intro-on .intro { display: none; } }