/* ============================================================ BAZA — MISCARE Profil: expresiv, dar cuminte. Tot ce e transform se anuleaza la prefers-reduced-motion. ============================================================ */ /* ---- Reveal la scroll ---- Markup:
sau
JS: adauga clasa .is-in cand elementul intra in viewport (vezi reveal.js). */ [data-reveal] { opacity: 0; transform: translate3d(0, 18px, 0); transition: opacity var(--dur-5) var(--ease-out), transform var(--dur-5) var(--ease-out); transition-delay: calc(var(--i, 0) * 60ms); will-change: opacity, transform; } [data-reveal="left"] { transform: translate3d(-24px, 0, 0); } [data-reveal="right"] { transform: translate3d(24px, 0, 0); } [data-reveal="scale"] { transform: scale(0.94); } [data-reveal].is-in { opacity: 1; transform: none; } /* ---- Hover lift — pe carduri si elemente apasabile ---- */ .m-lift { transition: transform var(--dur-3) var(--ease-standard), box-shadow var(--dur-3) var(--ease-standard), border-color var(--dur-2) var(--ease-standard); } .m-lift:hover { transform: translateY(-2px); box-shadow: var(--sh-3); } .m-lift:active { transform: translateY(0); transition-duration: var(--dur-1); } /* ---- Ken burns lent pe imaginile de hero ---- */ .m-kenburns { overflow: hidden; } .m-kenburns > img { animation: kenburns 18s var(--ease-in-out) infinite alternate; will-change: transform; } @keyframes kenburns { from { transform: scale(1) translate3d(0, 0, 0); } to { transform: scale(1.08) translate3d(1%, -1%, 0); } } /* ---- Parallax pe hero (JS seteaza --py) ---- */ .m-parallax { transform: translate3d(0, calc(var(--py, 0) * 8%), 0); will-change: transform; } /* ---- Puls de accent — badge disponibilitate / urgente ---- */ .m-pulse { position: relative; } .m-pulse::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); animation: pulse 2.4s var(--ease-out) infinite; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); } 70% { box-shadow: 0 0 0 14px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } } /* ---- Marquee (certificari, parteneri) ---- */ .m-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .m-marquee > * { display: flex; gap: var(--sp-12); width: max-content; animation: marquee 32s linear infinite; } .m-marquee:hover > * { animation-play-state: paused; } @keyframes marquee { to { transform: translate3d(-50%, 0, 0); } } /* ---- Shimmer pentru skeleton ---- */ .m-skeleton { background: linear-gradient(90deg, var(--bg-inset) 25%, var(--bg-subtle) 37%, var(--bg-inset) 63%); background-size: 400% 100%; animation: shimmer 1.4s ease infinite; border-radius: var(--r-sm); } @keyframes shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } } /* ---- Underline care creste pe hover (navigatie) ---- */ .m-underline { position: relative; } .m-underline::after { content: ""; position: absolute; left: 0; bottom: -4px; height: 2px; width: 100%; background: var(--accent); border-radius: 2px; transform: scaleX(0); transform-origin: right; transition: transform var(--dur-3) var(--ease-out); } .m-underline:hover::after, .m-underline[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; } /* ---- Count-up: doar clasa, valoarea o urca JS ---- */ .m-count { font-variant-numeric: tabular-nums; } /* ============================================================ COREGRAFIE DE INTRARE — ce se intampla in prima secunda Fara asta, pagina "apare", si orice pagina care apare pare generica. Markup:
cu copii care au style="--i:0|1|2..." JS pune .is-loaded pe dupa ce fonturile s-au incarcat. ============================================================ */ .m-seq [data-seq] { opacity: 0; transform: translate3d(0, 14px, 0); } /* fara JavaScript nu se ascunde nimic — continutul e mai important decat efectul */ @media (scripting: none) { .m-seq [data-seq] { opacity: 1; transform: none; } .m-lines .line > span { transform: none; } .m-wipe { clip-path: none; } } html.is-loaded .m-seq [data-seq] { animation: seq-in var(--dur-6) var(--ease-out) both; animation-delay: calc(120ms + var(--i, 0) * 90ms); } @keyframes seq-in { from { opacity: 0; transform: translate3d(0, 14px, 0); } to { opacity: 1; transform: none; } } /* Titlul intra rand cu rand. JS imparte titlul in linii si pune --i pe fiecare. */ .m-lines { display: block; } .m-lines .line { display: block; overflow: hidden; } .m-lines .line > span { display: block; transform: translate3d(0, 105%, 0); } html.is-loaded .m-lines .line > span { animation: line-in var(--dur-6) var(--ease-out) both; animation-delay: calc(180ms + var(--i, 0) * 110ms); } @keyframes line-in { to { transform: none; } } /* Imaginea se descopera dintr-o parte, nu apare brusc. */ .m-wipe { clip-path: inset(0 0 0 100%); } html.is-loaded .m-wipe { animation: wipe-in 900ms var(--ease-out) both; animation-delay: 80ms; } @keyframes wipe-in { to { clip-path: inset(0 0 0 0); } } /* ============================================================ LEGAT DE SCROLL — unde browserul suporta, miscarea urmareste degetul, nu un cronometru. Chrome/Edge azi; restul primesc varianta clasica cu IntersectionObserver, deci nu pierde nimeni nimic. ============================================================ */ @supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { /* Reveal-ul devine legat de scroll: se sincronizeaza cu pozitia paginii */ [data-reveal]:not(.is-in) { animation: reveal-scroll linear both; animation-timeline: view(); animation-range: entry 8% cover 26%; opacity: 1; } @keyframes reveal-scroll { from { opacity: 0; transform: translate3d(0, 22px, 0); } to { opacity: 1; transform: none; } } /* Imaginea de hero se apropie lent pe masura ce derulezi peste ea */ .m-scroll-zoom > img, .m-scroll-zoom > .ph { animation: scroll-zoom linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; } @keyframes scroll-zoom { from { transform: scale(1.12); } to { transform: scale(1); } } /* Bara de progres a paginii — o linie de cyan, sus */ .m-progress { position: fixed; inset: 0 0 auto 0; height: 3px; z-index: var(--z-toast); background: var(--accent); transform-origin: 0 50%; animation: progress linear both; animation-timeline: scroll(root block); } @keyframes progress { from { transform: scaleX(0); } to { transform: scaleX(1); } } } } /* ============================================================ TRANZITIE INTRE SECTIUNI — sectiunea inchisa "se ridica" peste cea deschisa, in loc sa fie lipita sub ea. Markup:
============================================================ */ .m-rise { border-radius: var(--r-2xl) var(--r-2xl) 0 0; margin-top: calc(var(--sp-8) * -1); position: relative; z-index: 1; } .m-rise + * { position: relative; z-index: 2; } /* Butonul principal reactioneaza la apropierea cursorului (JS seteaza --mx/--my) */ .m-magnet { transition: transform var(--dur-3) var(--ease-out); } .m-magnet:hover { transform: translate3d(calc(var(--mx, 0) * 4px), calc(var(--my, 0) * 4px), 0); } /* ============================================================ ACCESIBILITATE — obligatoriu, nu optional ============================================================ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } [data-reveal] { opacity: 1; transform: none; } .m-kenburns > img, .m-parallax { transform: none; animation: none; } }