/* KL Weddings — mozgás. Szándékosan külön fájlban: egyetlen sor eltávolításával az egész réteg kikapcsolható, a többi stílushoz nem nyúl. Alapelv, amit itt sehol nem szegünk meg: JS NÉLKÜL MINDEN LÁTSZIK. Az összes rejtő szabály olyan osztályhoz vagy attribútumhoz kötődik, amit kizárólag szkript tesz fel — ha a szkript nem fut le, az oldal a megszokott, mozdulatlan formájában jelenik meg. (A nyitóképnél egyszer már megégettük magunkat egy láthatatlanul maradt elemmel.) */ /* ============ 1. Nyitó-képernyő ============ A réteg mindig létezik, de alapból láthatatlan; csak a -re tett .intro osztály hozza elő, amit a fej-részben lévő szkript ad — az pedig csak a munkamenet első oldalán, és soha nem redukált mozgás mellett. Három rétegből áll: html::before a papírszínű háttér, html::after a monogram GYŰRŰJE, body::before a monogram BETŰI. Azért három, mert a két jelrész külön mozog: a gyűrűt egy körbefutó maszk „rajzolja meg" (mintha toll húzná), a betűket egy ferde, lágy szélű törlés hozza elő balról jobbra — a kalligráfia írásirányában. Egyetlen elemen ez nem menne: a maszk az egész elemre hat, a körcikk a betűk darabjait is előhozná. A két jelrész a branding-mappa vektoros Symbol.svg-jéből származik (1 tizedesre kerekítve, azonos viewBox-szal — ettől fedik egymást pontosan), és adat-URI-ként ül itt: nincs külön kérés, az első festéskor már megvan, és nem tud elkésni a maszk elől. Színe a fejléc-monogram PNG-jének aranya (#A29063), hogy a kettő egyforma legyen. Ha a böngésző nem tud maszkot: a maszk-szabályokat elejti, a jel egyben, azonnal látszik — ez a biztonságos irány. Ha @property-t nem tud: a gyűrű a sweep felénél egyben pattan be (a custom property diszkréten vált), a végállapot ugyanaz. */ @property --kl-iv { syntax: ''; inherits: false; initial-value: 0deg; } :root { --kl-jel: clamp(82px, 6.5vw, 130px); } /* a jel szélessége — együtt nő a képernyővel */ html::before, html::after, body::before { content: ''; position: fixed; inset: 0; opacity: 0; visibility: hidden; pointer-events: none; /* Eltűnéskor: halványodik, és csak utána válik átkattinthatóvá. */ transition: opacity .55s ease, visibility 0s linear .55s; } html::before { z-index: 999; background: var(--paper); } html::after { z-index: 1000; background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='108.6%2091.9%20403.3%20410.2'%3E%3Cpath%20fill='%23A29063'%20d='M509.8,311.3c-0.2,2.3-0.2,4.8-0.6,7.5%20c-0.5,2.7-1.1,5.7-1.6,8.9c-0.6,3.2-1.1,6.7-2,10.3%20c-1.1,3.6-2.3,7.4-3.5,11.4%20c-5.4,15.8-14,34.5-28.1,52.7%20c-3.3,4.7-7.5,8.9-11.3,13.6c-1.8,2.4-4.1,4.5-6.3,6.7%20c-2.2,2.2-4.4,4.4-6.7,6.6c-2.1,2.4-4.7,4.3-7.1,6.5%20c-2.4,2.2-4.8,4.4-7.2,6.7c-5.1,4.3-10.6,8.3-16.3,12.4%20c-23.2,15.4-51.9,26.8-83.7,30.6%20c-3.9,0.6-8,0.5-12,0.8l-6.1,0.3l-3.1,0.2%20c-0.3-0-0.1,0-0,0l-0.4-0l-0.8-0l-1.6-0.1%20c-8.4-0.5-17.4-0.5-25.2-2.1%20c-16.2-1.9-33-7.3-48.9-14%20c-3.9-1.9-7.9-3.8-11.8-5.7c-3.9-1.9-7.6-4.5-11.4-6.7%20l-5.7-3.4l-5.4-4c-3.5-2.7-7.2-5.2-10.6-8.1%20c-13.7-11.6-25.7-25.3-36.1-40.4%20c-10.1-15.3-17.8-32.2-23.5-49.7%20c-5.3-17.8-7.7-36.3-8.1-54.9l0.7-14.1%20c0.1-5,0.9-9.4,1.6-13.9l1-6.7l0.5-3.4l0.9-3.4%20l3.5-13.4c5.7-17.6,13.4-34.5,23.5-49.7%20c10.4-15,22.4-28.8,36.1-40.4%20c3.4-2.9,7.1-5.4,10.6-8.1l5.4-4l5.7-3.4%20c3.8-2.2,7.4-4.8,11.4-6.7c4-1.9,7.9-3.8,11.8-5.7%20c16-6.7,32.4-12.1,49.1-14.1c8.2-1.7,16.6-1.6,24.7-2.1%20l2.7-0.1l3.2,0.2l6.3,0.3c4.1,0.3,8.5,0.2,12.4,0.8%20c3.9,0.6,7.7,1.2,11.5,1.8c1.9,0.3,3.8,0.5,5.7,0.9%20l5.6,1.5c3.8,1,7.5,1.9,11.2,2.9%20c3.6,1.2,7.1,2.6,10.7,3.9%20c14.2,5,26.8,12.3,38.6,19.6%20c5.6,4.1,11.2,8.1,16.3,12.4c2.4,2.3,4.9,4.5,7.2,6.7%20c2.4,2.2,5,4.1,7.2,6.4c2.3,2.2,4.5,4.5,6.7,6.6%20c2.2,2.2,4.5,4.3,6.3,6.7c3.8,4.7,8,9,11.3,13.6%20c14.2,18.2,22.7,36.9,28.1,52.8%20c1.2,4,2.4,7.8,3.5,11.4c0.9,3.6,1.4,7.1,2,10.3%20c0.6,3.2,1.1,6.2,1.6,8.9c0.4,2.7,0.4,5.3,0.6,7.5%20c0.5,9,0.8,13.9,0.8,13.9s-0.2-4.8-0.6-13.9%20c-0-4.5-0.7-10.1-1.5-16.6c-0.5-3.3-0.7-6.8-1.4-10.5%20c-0.8-3.7-1.6-7.6-2.4-11.8c-3.8-16.5-9.6-36.9-21.8-57.9%20c-2.9-5.3-6.6-10.4-10.1-15.8c-1.7-2.8-3.9-5.2-6-7.8%20c-2.1-2.6-4.3-5.2-6.5-7.8c-4.4-5.3-9.9-9.7-15.2-14.6%20c-5.7-4.4-11.6-8.8-17.7-13.2%20c-25.2-16.6-55.8-28.9-90.7-33.1%20c-4.4-0.7-8.4-0.5-12.6-0.9l-6.3-0.3l-3.2-0.2%20c0.2,0-0.7-0-0.8-0l-0.4,0l-0.8,0l-1.7,0.1%20c-8.8,0.5-17.8,0.5-26.7,2.2c-18,2.2-35.8,7.9-53.1,15.2%20c-4.2,2-8.5,4.1-12.8,6.1c-4.2,2.1-8.2,4.8-12.3,7.2%20l-6.1,3.7l-5.8,4.3c-3.8,2.9-7.8,5.6-11.5,8.8%20c-14.8,12.5-27.8,27.3-39,43.6%20c-10.9,16.5-19.2,34.7-25.3,53.7l-3.7,14.5l-0.9,3.6%20l-0.6,3.8l-1.2,7.6c-0.8,5.1-1.6,10.1-1.7,14.9l-0.7,14.8%20c0.5,20,3.1,40.1,8.8,59.2%20c6.1,19,14.4,37.2,25.3,53.7%20c11.2,16.3,24.2,31.1,39,43.6%20c3.7,3.1,7.7,5.9,11.5,8.8l5.8,4.3l6.1,3.7%20c4.1,2.4,8.1,5.1,12.3,7.2c4.3,2.1,8.5,4.1,12.8,6.1%20c17.4,7.3,34.8,13,53.3,15.2%20c9.3,1.8,17.7,1.7,26.2,2.2l1.6,0.1l0.8,0l0.4,0%20c0,0,1,0,0.8,0l3.3-0.2l6.6-0.3%20c4.3-0.3,8.7-0.2,13-0.9c34.3-4.1,65.4-16.4,90.4-33.1%20c6.1-4.4,12-8.8,17.7-13.2c5.3-4.8,10.8-9.3,15.3-14.5%20c2.2-2.6,4.3-5.2,6.5-7.8c2.1-2.6,4.3-5,6-7.8%20c3.5-5.5,7.2-10.5,10.1-15.8%20c12.2-21,17.9-41.4,21.8-57.9%20c0.9-4.2,1.7-8.1,2.4-11.8c0.7-3.7,0.9-7.3,1.4-10.5%20c0.8-6.5,1.5-12.1,1.5-16.6c0.4-9,0.6-13.9,0.6-13.9%20S510.4,302.2,509.8,311.3z'/%3E%3C/svg%3E") no-repeat center center / var(--kl-jel) auto; } body::before { z-index: 1001; background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='108.6%2091.9%20403.3%20410.2'%3E%3Cpath%20fill='%23A29063'%20d='M408.9,353.6c-11.3,1.5-22.8,1.3-34.1-0.2%20c-17-2.4-33.4-7.5-49.2-14%20c-9.6-4.1-18.7-9.2-28.4-13.2%20c-4.2-1.7-8.5-3.2-12.9-4.1c4.7-4.1,9.3-8.3,13.8-12.7%20c8.6-8.5,16.9-17.4,24.9-26.6%20c11-12.6,21.7-25.5,32.7-38c4.7-2.9,9.4-5.9,14-8.9%20c5.4-3.5,10.8-7.2,15.9-11.1c2.9-2.2,5.7-4.5,8.5-6.8%20c2.5-2.1,5-4.3,7.3-6.7c1.2-1.3,2.2-2.6,3.3-4%20c0.6-0.9,1.2-1.8,1.6-2.7c0.3-0.8,0.7-1.5,0.9-2.4%20c0.2-0.8,0.3-1.6,0.4-2.4c0-0.3,0-0.6-0-0.8%20c-0.2-1.7-0.3-2.2-1-3.7c-0.6-1.3-1.8-2.3-3-3.1%20c-1.4-0.9-3.1-1.2-4.7-1.3c-0.2-0-0.3-0-0.5-0%20c-1.1,0-2.1,0.2-3.1,0.4c-1.4,0.3-2.8,1-4.1,1.5%20c-2.8,1.2-5.3,3.2-7.6,5.1c-2.3,1.9-4.5,4-6.7,6.1%20c-4.4,4.1-8.7,8.4-12.9,12.7c-7.1,7.3-13.9,14.9-20.7,22.6%20c-4.5,3-9,6-13.5,8.9c-5.8,3.8-11.7,7.5-17.6,11.2%20c-11.8,7.3-23.8,14.3-35.7,21.6c-2.3,1.4-4.5,2.8-6.8,4.2%20c4.6-11.7,8.7-23.6,12.9-35.4%20c4.6-13,9.2-26,14.3-38.8c1.1-2.7,2.2-5.3,3.3-8%20c0-0-0-0-0-0%20c-7,13.4-13.1,27.3-19,41.2%20c-0.1,0.1-0.1,0.3-0.2,0.4c-3.3,7.9-6.6,15.8-9.9,23.7%20c-0,0.1-0.1,0.2-0.1,0.3c0-0,0-0.1,0.1-0.1%20c-3.1,7.4-6.2,14.8-9.5,22.1c-0.9,0.6-1.8,1.1-2.6,1.7%20c-2.7,1.8-5.4,3.6-8.2,5.3c-2.7,1.6-5.4,3.2-8.1,4.8%20c-5.6,3.3-11.2,6.8-16.2,11c-3.1,2.5-5.9,5.4-8.5,8.5%20c-3.1,3.6-5.9,7.5-8.3,11.6c-1.3,2.2-2.3,4.5-3.3,6.9%20c-0.8,1.9-1.4,4-1.7,6c-0.2,1.2-0.4,2.5-0.4,3.7%20c-0,1.3,0.1,2.6,0.3,3.8c0.3,2,1.2,4.1,2.4,5.7%20c1.7,2.3,3.9,4.4,6.8,5c5.5,1.2,10.5-2.1,14.4-5.6%20c4.9-4.5,8.7-10,12.4-15.5c4-6,7.6-12.3,11-18.6%20c2.8-5.2,5.5-10.4,8-15.7c1.2-2.6,2.4-5.2,3.6-7.8%20c0.7-0.5,1.5-0.9,2.2-1.4c11.8-7.4,23.8-14.4,35.9-21.4%20c5.5-3.2,10.9-6.4,16.4-9.6c-8.7,9.9-17.5,19.6-26.9,28.8%20c-8.1,8-16.6,15.7-25.6,22.7c-0.7,0.6-1.5,1.1-2.2,1.7%20c-1,0.6-1.9,1.4-2.5,2.5c-0.9,1.6-1.2,3.6-0.7,5.3%20c0.3,1.2,0.9,2.2,1.8,3.1c1.2,1.2,3.2,2.2,4.9,2%20c4-0.4,8-0.4,12,0.1c5.7,0.9,11.2,2.6,16.5,4.8%20c4.7,2,9.3,4.3,14,6.5c5.9,2.8,12,5.2,18.3,7.2%20c12.6,4.1,25.9,6.6,39.1,7.3c18.5,1,37.3-1.7,54.3-9.3%20c0-0,0-0-0-0%20C416.6,352.4,412.8,353.1,408.9,353.6z%20M250.2,313.4%20c-2.7,5-5.5,10-8.4,14.9c-3.1,5.1-6.4,10.2-10,15%20c-3,3.9-6.2,7.7-10.1,10.8c-1,0.8-2.1,1.5-3.3,2%20c-0.5,0.2-1,0.3-1.5,0.4c-0.3,0-0.5,0-0.8,0%20c-0.2-0-0.3-0.1-0.5-0.1c-0.2-0.1-0.4-0.2-0.6-0.4%20c-0.3-0.3-0.6-0.6-0.9-1c-0.3-0.5-0.7-1-0.9-1.6%20c-0.2-0.6-0.4-1.3-0.5-2c-0.1-1-0.1-2,0-3%20c0.3-1.9,0.9-3.8,1.6-5.6c1.9-4.2,4.4-8.2,7.2-11.8%20c3.4-4.4,7.2-8.4,11.6-11.8c4.9-3.7,10.1-6.7,15.4-9.7%20c1.6-0.9,3.3-1.9,4.9-2.8%20C252.4,309.1,251.3,311.3,250.2,313.4z'/%3E%3C/svg%3E") no-repeat center center / var(--kl-jel) auto; } html.intro::before, html.intro::after, html.intro body::before { opacity: 1; visibility: visible; transition: none; /* megjelenéskor nincs átmenet: azonnal ott van */ } html.intro::before { pointer-events: auto; } html.intro { overflow: hidden; } /* A gyűrű: a maszk körcikke 0-ról 360 fokra nő, 6 fokos lágy éllel. A körcikk közepe az elem közepe, ami a képernyő közepe — a jel is ott ül, ezért esik egybe a kettő. A 368° azért, hogy a lágy él is túlfusson, és ne maradjon egy hajszálnyi rés a végén. Az időzítés a tollvonásé: lendül, majd a záráskor lassul. */ html.intro::after { -webkit-mask: conic-gradient(from -30deg, #000 calc(var(--kl-iv) - 6deg), transparent var(--kl-iv)); mask: conic-gradient(from -30deg, #000 calc(var(--kl-iv) - 6deg), transparent var(--kl-iv)); /* 0,12 s-os felütés: az első képkockákon még csak a papír áll. Ez nyeli el a két SVG első dekódolását hideg betöltésnél — különben a toll már elindulna, miközben a kép még nem festhető, és a rajzolás eleje hiányozna. */ animation: kl-gyuru 1.05s cubic-bezier(.5,.05,.3,1) .12s both; } @keyframes kl-gyuru { from { --kl-iv: 0deg; } to { --kl-iv: 368deg; } } /* A betűk: a maszk egy 3 jelszélességnyi, ferde átmenet (bal fele fedő, jobb fele átlátszó), amit a jel közepén húzunk át balról jobbra. A mozgás a jelhez van méretezve, nem a képernyőhöz — különben egy 1440 px-es ablakban a 130 px-es jel a sweep egy pillanata alatt villanna be. Kezdés 0,57 s-nál (felütés + 0,45 s): a gyűrű már félig kész, mire a toll a betűkbe fog. Ez az utolsó animáció: a motion.js ennek a végét várja meg. */ html.intro body::before { -webkit-mask: linear-gradient(72deg, #000 44%, transparent 56%) no-repeat; mask: linear-gradient(72deg, #000 44%, transparent 56%) no-repeat; -webkit-mask-size: calc(var(--kl-jel) * 3) 100%; mask-size: calc(var(--kl-jel) * 3) 100%; animation: kl-betuk .9s cubic-bezier(.35,.5,.25,1) .57s both; } @keyframes kl-betuk { from { -webkit-mask-position: calc(50% - var(--kl-jel) * .8) 50%; mask-position: calc(50% - var(--kl-jel) * .8) 50%; } to { -webkit-mask-position: calc(50% + var(--kl-jel) * .8) 50%; mask-position: calc(50% + var(--kl-jel) * .8) 50%; } } /* ============ 2. Beúsztatás — érkezéskor és görgetésre ============ A rejtés a -en lévő .mozgas osztályhoz kötődik, amit a fej-részben lévő szkript ad, még az ELSŐ FESTÉS ELŐTT. Ez lényeges: ha a rejtést a lap alján futó motion.js végezné, a szöveg előbb kirajzolódna, aztán eltűnne — az érkezéskor felúszó elemeknél ez látható villanás lenne. Biztonsági háló: ha a motion.js valamiért meg sem érkezik, a fej-részben lévő időzítő 3 másodperc múlva leszedi a .mozgas osztályt, és minden láthatóvá válik. Szkript nélkül pedig fel sem kerül — a generált HTML teljesen tiszta marad. */ html.mozgas .hero .headline, html.mozgas .quote-band, html.mozgas .section-head, html.mozgas .page-head, html.mozgas .more-link-wrap, html.mozgas .about-block > div:not(.ph), html.mozgas .closing .content, html.mozgas .timeline li, html.mozgas .contact-info .block, html.mozgas footer { opacity: 0; transform: translateY(18px); } /* A megjelenített állapotnak MINDEN fenti szabályt felül kell írnia. Az `!important` itt nem lustaság: a lista egyes tagjai (pl. a `.about-block > div:not(.ph)`) magasabb fajsúlyúak, mint egy sima osztály, tehát egy szokásos szabály nem győzné le őket — és akkor a Rólam szövegoszlopa örökre láthatatlan maradna. */ html.mozgas .rev-be { opacity: 1 !important; transform: none !important; transition: opacity .75s ease, transform .75s cubic-bezier(.2,.7,.3,1); } /* ============ 3. Nyitókép lassú ránagyítása ============ A dia alaphelyzete a nagyított állapot, az animáció pedig onnan indul, ahol a kép még nincs nagyítva. Így amikor a dia elveszti az .on osztályt, nem ugrik vissza a kifelé úszás közben — csak megáll. Az 5 másodperc NEM önkényes: pontosan ennyi a diavetítés üteme (site.js, setInterval 5000). Ha az animáció hosszabb lenne, a váltás pillanatában a kifelé úszó kép egy aprót ugrana a végállapotra — mérhető is volt: 1,038-ról 1,055-re. Ha a diaváltás üteme változik, ezt is át kell írni. `linear`, mert a lassú kameramozgás akkor hiteles, ha egyenletes; a lassuló görbe azt az érzést kelti, hogy a kép menet közben megáll. */ .hero[data-slideshow] img.bg { transform: scale(1.055); } .hero[data-slideshow] img.bg.on { animation: kl-ranagyit 5s linear both; } @keyframes kl-ranagyit { from { transform: scale(1); } to { transform: scale(1.055); } } /* ============ Ha a látogató kevesebb mozgást kért ============ A rendszerbeállítást tiszteletben tartjuk: minden azonnal a helyén van. */ @media (prefers-reduced-motion: reduce) { html::before, html::after, body::before { display: none; } html.intro { overflow: visible; } /* A .mozgas osztályt a fej-részben lévő szkript ilyenkor fel sem teszi, tehát a rejtő szabályok nem illeszkednek — nincs mit visszaállítani. */ .hero[data-slideshow] img.bg, .hero[data-slideshow] img.bg.on { transform: none; animation: none; } }