/* * Memelio Magija — judesys ir efektai. * * Taisyklė: kiekvienas efektas turi turėti pradinę būseną, kuri veikia ir * be JavaScript. Todėl visos „reveal" klasės pridedamos JS pagalba * (per ) — jei JS neveikia, turinys tiesiog matomas. */ /* ===================================================================== * Atskleidimas slenkant * ================================================================== */ .mm-js [data-mm-reveal] { opacity: 0; transform: translate3d(0, 26px, 0); transition: opacity var(--mm-dur-reveal) var(--mm-ease-out-expo), transform var(--mm-dur-reveal) var(--mm-ease-out-expo), clip-path var(--mm-dur-reveal) var(--mm-ease-out-expo); transition-delay: var(--mm-reveal-delay, 0ms); will-change: opacity, transform; } .mm-js [data-mm-reveal="left"] { transform: translate3d(-38px, 0, 0); } .mm-js [data-mm-reveal="right"] { transform: translate3d(38px, 0, 0); } .mm-js [data-mm-reveal="scale"] { transform: scale(0.94); } .mm-js [data-mm-reveal="fade"] { transform: none; } /* Užuolaida: vaizdas atsidengia iš apačios į viršų. */ .mm-js [data-mm-reveal="wipe"] { opacity: 1; transform: none; clip-path: inset(100% 0 0 0); } .mm-js [data-mm-reveal="wipe-left"] { opacity: 1; transform: none; clip-path: inset(0 100% 0 0); } .mm-js [data-mm-reveal].is-visible { opacity: 1; transform: none; clip-path: inset(0 0 0 0); } @media (prefers-reduced-motion: reduce) { .mm-js [data-mm-reveal] { opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important; } } /* ===================================================================== * Antraštės skaidymas į eilutes — kiekviena eilutė iškyla atskirai * ================================================================== */ .mm-split-line { display: block; overflow: hidden; } .mm-split-line > span { display: block; transform: translate3d(0, 105%, 0); transition: transform 1000ms var(--mm-ease-out-expo); transition-delay: var(--mm-line-delay, 0ms); } .is-visible .mm-split-line > span, .mm-split-line.is-visible > span { transform: translate3d(0, 0, 0); } @media (prefers-reduced-motion: reduce) { .mm-split-line > span { transform: none !important; transition: none; } } /* ===================================================================== * Parallax — fonai juda lėčiau nei puslapis * ================================================================== */ [data-mm-parallax] { will-change: transform; } @media (prefers-reduced-motion: reduce) { [data-mm-parallax] { transform: none !important; } } /* ===================================================================== * Slinkimo eiga po antrašte * ================================================================== */ .mm-progress { position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%; transform: scaleX(0); transform-origin: left; background: linear-gradient(90deg, var(--mm-red-deep), var(--mm-red-bright)); pointer-events: none; } /* ===================================================================== * Firminis kursorius (tik pelės įrenginiuose) * ================================================================== */ .mm-cursor { position: fixed; top: 0; left: 0; z-index: var(--mm-z-cursor); width: 28px; height: 28px; margin: -14px 0 0 -14px; border: 1px solid var(--mm-red); border-radius: 50%; pointer-events: none; opacity: 0; mix-blend-mode: difference; transition: width 260ms var(--mm-ease-out-expo), height 260ms var(--mm-ease-out-expo), margin 260ms var(--mm-ease-out-expo), opacity 200ms linear, background 260ms var(--mm-ease); will-change: transform; } .mm-cursor.is-active { opacity: 1; } /* Užvedus ant nuorodos žiedas išsiplečia. */ .mm-cursor.is-hover { width: 54px; height: 54px; margin: -27px 0 0 -27px; background: rgba(224, 27, 36, 0.12); } .mm-cursor__dot { position: fixed; top: 0; left: 0; z-index: var(--mm-z-cursor); width: 4px; height: 4px; margin: -2px 0 0 -2px; border-radius: 50%; background: var(--mm-red-bright); pointer-events: none; opacity: 0; transition: opacity 200ms linear; will-change: transform; } .mm-cursor__dot.is-active { opacity: 1; } @media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) { .mm-cursor, .mm-cursor__dot { display: none; } } /* ===================================================================== * Magnetinis mygtukas — traukia kursorių link savęs * ================================================================== */ [data-mm-magnetic] { will-change: transform; transition: transform 420ms var(--mm-ease-out-expo); } /* ===================================================================== * Pakreipimas 3D (produktų ir darbų kortelės) * ================================================================== */ [data-mm-tilt] { transform-style: preserve-3d; transition: transform 480ms var(--mm-ease-out-expo); } [data-mm-tilt] > * { transform: translateZ(0); } @media (hover: none), (prefers-reduced-motion: reduce) { [data-mm-tilt] { transform: none !important; } } /* ===================================================================== * Švytinti šviesa, sekanti pelę panelėje * ================================================================== */ [data-mm-spotlight] { position: relative; isolation: isolate; } [data-mm-spotlight]::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; opacity: 0; transition: opacity var(--mm-dur) var(--mm-ease); background: radial-gradient( 320px circle at var(--mm-mx, 50%) var(--mm-my, 50%), color-mix(in srgb, var(--mm-accent) 16%, transparent), transparent 70% ); pointer-events: none; } [data-mm-spotlight]:hover::before { opacity: 1; } /* ===================================================================== * Puslapio įėjimo animacija — trumpa raudona užuolaida * ================================================================== */ .mm-curtain { position: fixed; inset: 0; z-index: 9800; background: var(--mm-black); pointer-events: none; transform-origin: top; animation: mm-curtain-lift 900ms var(--mm-ease-out-expo) forwards; } .mm-curtain::after { content: ""; position: absolute; inset: 0; background: radial-gradient(50% 50% at 50% 50%, var(--mm-red-wash), transparent 70%); } @keyframes mm-curtain-lift { 0% { transform: scaleY(1); } 100% { transform: scaleY(0); } } @media (prefers-reduced-motion: reduce) { .mm-curtain { display: none; } } /* ===================================================================== * Skaitiklis — kol nesuveikė, rodo nulį, kad nešoktų maketas * ================================================================== */ [data-mm-count] { font-variant-numeric: tabular-nums; } /* ===================================================================== * Prieš / po slankiklis (dažymo procesas) * ================================================================== */ .mm-compare { position: relative; overflow: hidden; border-radius: var(--mm-radius); background: var(--mm-surface-2); touch-action: pan-y; cursor: ew-resize; user-select: none; } .mm-compare img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; } .mm-compare__after { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--mm-compare, 50%)); } .mm-compare__handle { position: absolute; top: 0; bottom: 0; left: var(--mm-compare, 50%); width: 2px; background: var(--mm-red); transform: translateX(-1px); pointer-events: none; box-shadow: 0 0 24px var(--mm-red-glow); } .mm-compare__grip { position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border: 1px solid var(--mm-red); border-radius: 50%; background: rgba(5, 5, 6, 0.72); backdrop-filter: blur(6px); display: grid; place-items: center; color: var(--mm-red); } .mm-compare__label { position: absolute; bottom: var(--mm-4); padding: var(--mm-2) var(--mm-3); border-radius: var(--mm-radius-sm); background: rgba(5, 5, 6, 0.7); backdrop-filter: blur(6px); font-size: 0.625rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mm-text-2); pointer-events: none; } .mm-compare__label--before { left: var(--mm-4); } .mm-compare__label--after { right: var(--mm-4); } /* ===================================================================== * Lightbox * ================================================================== */ .mm-lightbox { position: fixed; inset: 0; z-index: var(--mm-z-modal); display: grid; grid-template-rows: auto 1fr auto; background: rgba(4, 4, 5, 0.96); backdrop-filter: blur(14px); opacity: 0; visibility: hidden; transition: opacity var(--mm-dur) var(--mm-ease), visibility var(--mm-dur); } .mm-lightbox.is-open { opacity: 1; visibility: visible; } .mm-lightbox__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--mm-4); padding: var(--mm-5) var(--mm-gutter); border-bottom: 1px solid var(--mm-line); } .mm-lightbox__count { font-family: var(--mm-font-mono); font-size: var(--mm-fs-xs); color: var(--mm-text-3); } .mm-lightbox__stage { position: relative; display: grid; place-items: center; padding: var(--mm-5) var(--mm-gutter); min-height: 0; } .mm-lightbox__stage img { max-width: min(1100px, 100%); max-height: 100%; object-fit: contain; border-radius: var(--mm-radius); opacity: 0; transform: scale(0.97); transition: opacity var(--mm-dur) var(--mm-ease), transform var(--mm-dur-slow) var(--mm-ease-out-expo); } .mm-lightbox.is-open .mm-lightbox__stage img { opacity: 1; transform: none; } .mm-lightbox__foot { padding: var(--mm-5) var(--mm-gutter) var(--mm-7); border-top: 1px solid var(--mm-line); text-align: center; } .mm-lightbox__title { font-family: var(--mm-font-display); font-size: var(--mm-fs-h4); font-weight: 300; text-transform: uppercase; letter-spacing: var(--mm-ls-display); color: var(--mm-text); margin-bottom: var(--mm-2); } .mm-lightbox__meta { font-size: var(--mm-fs-xs); color: var(--mm-text-3); } .mm-iconbtn { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--mm-line); border-radius: var(--mm-radius); background: none; color: var(--mm-text-2); cursor: pointer; transition: color var(--mm-dur-fast) var(--mm-ease), border-color var(--mm-dur-fast) var(--mm-ease), background var(--mm-dur-fast) var(--mm-ease); } .mm-iconbtn:hover { color: var(--mm-text); border-color: var(--mm-red); background: var(--mm-red-wash); } .mm-lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; } .mm-lightbox__nav--prev { left: var(--mm-gutter); } .mm-lightbox__nav--next { right: var(--mm-gutter); } /* ===================================================================== * Horizontalus slinkimas (procesų juostos) * ================================================================== */ .mm-rail { display: flex; gap: var(--mm-4); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: var(--mm-line-strong) transparent; padding-bottom: var(--mm-4); -webkit-overflow-scrolling: touch; } .mm-rail > * { flex: none; scroll-snap-align: start; } .mm-rail::-webkit-scrollbar { height: 3px; } .mm-rail::-webkit-scrollbar-track { background: var(--mm-line-soft); } .mm-rail::-webkit-scrollbar-thumb { background: var(--mm-line-strong); border-radius: var(--mm-radius-pill); } .mm-rail::-webkit-scrollbar-thumb:hover { background: var(--mm-red); }