/* scroll-reveal — reveal.css Alapállapot: minden [data-reveal] elem LÁTHATÓ marad, amíg a JS meg nem erősíti magát a elemen a "sr-active" osztállyal. Ez a progresszív feljavítás lényege: ha a JS bármi miatt nem fut le (blokkolt script, hiba, lassú hálózat), a látogató simán látja a teljes tartalmat — sosem marad üres/eltűnt szekció. */ html:not(.sr-active) [data-reveal] { opacity: 1; transform: none; } /* Amint a JS megerősítette magát, ezek az elemek kezdő (rejtett) állapotba kerülnek */ html.sr-active [data-reveal] { opacity: 0; transition: opacity var(--sr-duration, 700ms) var(--sr-ease, cubic-bezier(0.16, 1, 0.3, 1)), transform var(--sr-duration, 700ms) var(--sr-ease, cubic-bezier(0.16, 1, 0.3, 1)); transition-delay: var(--sr-delay, 0ms); will-change: opacity, transform; } html.sr-active [data-reveal="up"], html.sr-active [data-reveal=""] { transform: translateY(var(--sr-distance, 28px)); } html.sr-active [data-reveal="down"] { transform: translateY(calc(var(--sr-distance, 28px) * -1)); } html.sr-active [data-reveal="left"] { transform: translateX(var(--sr-distance, 28px)); } html.sr-active [data-reveal="right"] { transform: translateX(calc(var(--sr-distance, 28px) * -1)); } html.sr-active [data-reveal="scale"] { transform: scale(0.94); } html.sr-active [data-reveal="fade"] { transform: none; } /* Látható állapot — a JS ezt az osztályt rakja rá, amikor a viewportba ér */ .sr-visible { opacity: 1 !important; transform: none !important; } /* --- Intro szekvencia (oldalbetöltéskor lejátszódó elemek, pl. hero) --- */ html.sr-active [data-intro] { opacity: 0; transform: translateY(var(--sr-distance, 22px)); transition: opacity var(--sr-duration, 700ms) var(--sr-ease, cubic-bezier(0.16, 1, 0.3, 1)), transform var(--sr-duration, 700ms) var(--sr-ease, cubic-bezier(0.16, 1, 0.3, 1)); transition-delay: var(--sr-delay, 0ms); } html.sr-intro-ready [data-intro] { opacity: 1; transform: none; } /* --- Kézzel rajzolt aláhúzás/kör-akcentus (pl. kiemelt szó a hero címben) --- */ .sr-accent-wrap { position: relative; display: inline-block; } .sr-accent-svg { position: absolute; inset: -0.25em -0.12em; width: calc(100% + 0.24em); height: calc(100% + 0.5em); overflow: visible; pointer-events: none; } .sr-accent-svg path { fill: none; stroke: var(--sr-accent-color, currentColor); stroke-width: var(--sr-accent-width, 3); stroke-linecap: round; stroke-linejoin: round; } /* Csökkentett mozgás — a legtöbb látogatónak ez sosem lesz aktív, de ha igen, tartsuk tiszteletben: nincs csúszás/áttűnés-játék */ @media (prefers-reduced-motion: reduce) { html.sr-active [data-reveal], html.sr-active [data-intro] { transition: opacity 200ms linear !important; transform: none !important; } .sr-accent-svg path { transition: none !important; stroke-dashoffset: 0 !important; } } /* --- KiNor beállítások --- Intenzitás: közepes. Finomhangolás: --sr-distance (elmozdulás), --sr-duration (időtartam). Kártyarácsoknál a késleltetés lépésköze a HTML-ben: data-reveal-step="90" (ms). */ :root { --sr-distance: 28px; --sr-duration: 700ms; } /* Szöveg melletti képek: oldalról úsznak be, arról az oldalról, amelyiken állnak. (A motor elnevezése: data-reveal="right" = balról érkezik, data-reveal="left" = jobbról érkezik.) Nagyobb elmozdulás → kicsit hosszabb, lágyabb átmenet. */ .reveal-side { --sr-distance: 140px; --sr-duration: 1300ms; --sr-ease: cubic-bezier(0.33, 1, 0.68, 1); } /* A jobbról érkező kép kezdőhelyzetben kilógna a lapból — vízszintes görgetősáv helyett levágjuk. */ main { overflow-x: clip; } /* Mobilon (egy oszlop) nincs bal/jobb oldal: ott a képek is alulról úsznak be, a szokásos távolságról. */ @media (max-width: 760px) { .reveal-side { --sr-distance: 28px; --sr-duration: 1000ms; } html.sr-active .reveal-side[data-reveal="left"], html.sr-active .reveal-side[data-reveal="right"] { transform: translateY(var(--sr-distance)); } } /* Kör a főoldali cím "Szeged" szava körül */ .hero--home .sr-accent-wrap { --sr-accent-color: #0a9929; --sr-accent-width: 3.5; } .hero--home .sr-accent-svg { inset: -0.2em -0.28em; width: calc(100% + 0.56em); height: calc(100% + 0.4em); } /* A megrajzolt kör pár másodperc után elhalványul. Időzítés: rajzolás vége ≈ 1,65 s (0,65 s késleltetés + 1 s rajzolás) → 2,5 s kitartás → 1,2 s halványulás. */ html.sr-intro-ready .hero--home .sr-accent-svg { animation: sr-accent-fade 1.2s ease-in-out 4.2s forwards; } @keyframes sr-accent-fade { to { opacity: 0; } }