/* Motion effektek — CSAK a Kiskunyhó főoldalhoz kiemelt 3 blokk.
Forrás: ai-oprendszer/általánosan jó landingek/motion-effektek/
Használt effektek: reveal (hero cím), group (kártyák), accordion (GY.I.K.)
A vasszabály szerint oldalanként 2-3 effekt a maximum. */
/* =========================================================================
MOTION EFFEKTEK — vanilla CSS/JS port
Forrás-inspiráció: ibelick/motion-primitives (MIT), React + Motion.dev
Ez a fájl NEM tartalmaz külső könyvtárat. Statikus HTML landingekre való.
Használat: a -be,
a elé.
Minden effekt data-attribútummal kapcsolható be, lásd README.md.
========================================================================= */
:root {
--mp-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
--mp-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--mp-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
--mp-ease-bounce: cubic-bezier(0.2, 1.8, 0.4, 1);
}
/* Képernyőolvasónak megmaradó eredeti szöveg (a felaprított változat aria-hidden) */
.mp-sr {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
/* =========================================================================
1. SZÖVEG-FELFEDÉS — data-mp="reveal"
Betűnként / szavanként / soronként lépcsőzve úszik be a szöveg.
========================================================================= */
[data-mp="reveal"] {
--mp-dur: 0.3s;
}
.mp-seg {
display: inline-block;
white-space: pre;
will-change: transform, opacity, filter;
transition:
opacity var(--mp-dur) var(--mp-ease),
transform var(--mp-dur) var(--mp-ease),
filter var(--mp-dur) var(--mp-ease);
transition-delay: var(--mp-delay, 0s);
}
.mp-seg--line {
display: block;
}
/* kiinduló (rejtett) állapotok presetenként */
[data-mp="reveal"][data-preset="fade"] .mp-seg {
opacity: 0;
}
[data-mp="reveal"][data-preset="slide"] .mp-seg {
opacity: 0;
transform: translateY(20px);
}
[data-mp="reveal"][data-preset="blur"] .mp-seg {
opacity: 0;
filter: blur(12px);
}
[data-mp="reveal"][data-preset="fade-in-blur"] .mp-seg {
opacity: 0;
transform: translateY(20px);
filter: blur(12px);
}
[data-mp="reveal"][data-preset="scale"] .mp-seg {
opacity: 0;
transform: scale(0);
}
/* látható állapot */
[data-mp="reveal"].mp-in .mp-seg {
opacity: 1;
transform: none;
filter: blur(0px);
}
/* =========================================================================
2. BLOKK-FELFEDÉS — data-mp="group"
A közvetlen gyerekek (kártyák, listaelemek) lépcsőzve jelennek meg.
========================================================================= */
[data-mp="group"] {
--mp-dur: 0.5s;
}
[data-mp="group"] > * {
will-change: transform, opacity, filter;
transition:
opacity var(--mp-dur) var(--mp-ease),
transform var(--mp-dur) var(--mp-ease),
filter var(--mp-dur) var(--mp-ease);
transition-delay: var(--mp-delay, 0s);
}
[data-mp="group"][data-preset="fade"] > * {
opacity: 0;
}
[data-mp="group"][data-preset="slide"] > * {
opacity: 0;
transform: translateY(20px);
}
[data-mp="group"][data-preset="scale"] > * {
opacity: 0;
transform: scale(0.8);
}
[data-mp="group"][data-preset="blur"] > * {
opacity: 0;
filter: blur(4px);
}
[data-mp="group"][data-preset="blur-slide"] > * {
opacity: 0;
filter: blur(4px);
transform: translateY(20px);
}
[data-mp="group"][data-preset="zoom"] > * {
opacity: 0;
transform: scale(0.5);
transition-timing-function: var(--mp-ease-spring);
}
[data-mp="group"][data-preset="flip"] > * {
opacity: 0;
transform: perspective(800px) rotateX(-90deg);
transition-timing-function: var(--mp-ease-spring);
}
[data-mp="group"][data-preset="bounce"] > * {
opacity: 0;
transform: translateY(-50px);
transition-timing-function: var(--mp-ease-bounce);
}
[data-mp="group"][data-preset="rotate"] > * {
opacity: 0;
transform: rotate(-180deg);
transition-timing-function: var(--mp-ease-spring);
}
[data-mp="group"][data-preset="swing"] > * {
opacity: 0;
transform: rotate(-10deg);
transition-timing-function: var(--mp-ease-bounce);
}
[data-mp="group"].mp-in > * {
opacity: 1;
transform: none;
filter: blur(0px);
}
/* =========================================================================
14. NYÍLÓ GY.I.K. — data-mp="accordion"
Sima magasság-animáció ugrás nélkül (grid-template-rows).
========================================================================= */
.mp-acc-head {
display: flex;
width: 100%;
align-items: center;
justify-content: space-between;
gap: 1rem;
text-align: left;
cursor: pointer;
background: none;
border: 0;
font: inherit;
color: inherit;
}
.mp-acc-body {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 0.35s var(--mp-ease);
}
.mp-acc-body > * {
overflow: hidden;
min-height: 0;
}
.mp-acc-item.mp-open > .mp-acc-body {
grid-template-rows: 1fr;
}
.mp-acc-icon {
flex: none;
transition: transform 0.35s var(--mp-ease);
}
.mp-acc-item.mp-open .mp-acc-icon {
transform: rotate(45deg);
}
/* =========================================================================
@media (prefers-reduced-motion: reduce) {
.mp-seg,
[data-mp="group"] > *,
.mp-loop-item,
.mp-num-strip,
.mp-roll-face,
.mp-slider-pill,
.mp-acc-body,
.mp-acc-icon,
.mp-morph-backdrop,
.mp-morph-dialog {
transition-duration: 0.01ms !important;
transition-delay: 0ms !important;
}
[data-mp="shimmer"],
[data-mp="spin"],
.mp-trail::before,
.mp-glow {
animation: none !important;
}
[data-mp="shimmer"] {
color: var(--mp-shimmer-light);
background-image: none;
}
.mp-seg,
[data-mp="group"] > * {
opacity: 1 !important;
transform: none !important;
filter: none !important;
}
}
/* =========================================================================
13. CSÚSZÓ KIJELÖLÉS — data-mp="slider"
A háttérpirula átcsúszik az aktív fülre. Tab-sorhoz, ár-kapcsolóhoz.
========================================================================= */
[data-mp="slider"] {
position: relative;
}
.mp-slider-pill {
position: absolute;
left: 0;
top: 0;
z-index: 0;
border-radius: var(--mp-pill-radius, 999px);
background: var(--mp-pill-bg, rgba(0, 0, 0, 0.08));
opacity: 0;
transform: translate(0, 0);
transition:
transform 0.35s var(--mp-ease),
width 0.35s var(--mp-ease),
height 0.35s var(--mp-ease),
opacity 0.2s linear;
pointer-events: none;
}
[data-mp="slider"] > *:not(.mp-slider-pill) {
position: relative;
z-index: 1;
}
/* =========================================================================