/* ========================================================================== Mozgás a főoldalon – mindhárom főoldal betölti (D-159), a témafájl ELŐTT. Előzmény: a /fooldal-mozgas/ próba (D-156–158), ami a régi dizájn színeivel készült. Zoli, 2026-09-25: *„amire én vágyok az egy teljes oldalas motion dizájn”*. A választott forma: szakaszonként – minden szakasz akkor játssza le a jelenetét, amikor a képbe ér, egyszer; az oldal hossza nem nő a mozgástól. Színt ez a fájl nem hoz be: mindent a téma változóiból vesz (--bordo = cselekvés, --tinta = szöveg, --felulet = kártya), így a színvilág egy témafájllal cserélhető. Két szabály (CLAUDE.md 6.): - A mozgás nem hordoz információt. Minden jelenet VÉGÁLLAPOTA a kiinduló, statikus állapot; a „kezdőállapotok” csak a alatt élnek, amit a mozgas.js tesz fel – és csak akkor, ha a látogató nem kérte a mozgás csökkentését. JS nélkül minden a helyén van. - A nyitókép csak CSS, betöltéskor egyszer fut; mozgás csökkentésénél rögtön a kész állapot látszik. ========================================================================== */ /* ---- 1. Nyitókép: a gép keresője, 3-2-1, vaku, kinyomtatódó fotócsík ---- */ .kereso{position:relative;isolation:isolate;margin:0 0 50px} /* A körfény gyűrűje a kép mögött. Telefonon jobbra, a 20 px-es margóba ér be; asztalon a kép bal felső sarka mögött, a két hasáb közti résben – a tartalomoszlopból nem lóg ki (D-152). A téma SZÖVEGSZÍNE (--tinta): a sötét dizájnon világos, mint egy valódi körlámpa, a világoson sötét gyűrű. Nem a cselekvés színe: ha a gomb színe díszítés lesz, a gomb elveszti a jelzésértékét (CLAUDE.md 5., D-158). */ .kereso::before{content:"";position:absolute;z-index:-1;width:min(62%,300px);aspect-ratio:1;right:-14px;top:-26px;border-radius:50%; border:9px solid color-mix(in srgb,var(--tinta) 90%,transparent); box-shadow:0 0 34px 4px color-mix(in srgb,var(--tinta) 22%,transparent),inset 0 0 30px color-mix(in srgb,var(--tinta) 16%,transparent)} @media (min-width:900px){.kereso::before{width:min(58%,340px);right:auto;left:-38px;top:-44px;border-width:11px}} .kereso-ablak{position:relative;overflow:hidden;border-radius:4px;background:#000} .kereso-ablak img{display:block} .kereso-sarkok{position:absolute;inset:12px;pointer-events:none;--s:22px;--v:2px;opacity:.85;background-repeat:no-repeat; background-image:linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff), linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#fff,#fff); background-size:var(--s) var(--v),var(--v) var(--s),var(--s) var(--v),var(--v) var(--s),var(--s) var(--v),var(--v) var(--s),var(--s) var(--v),var(--v) var(--s); background-position:0 0,0 0,100% 0,100% 0,0 100%,0 100%,100% 100%,100% 100%} .visszaszamlalo{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none} .visszaszamlalo i{grid-area:1/1;font:600 clamp(5rem,20vw,9rem)/1 var(--betu-cim);font-style:normal;color:#fff; font-variant-numeric:lining-nums;text-shadow:0 0 28px rgba(255,255,255,.7);opacity:0} .vaku{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none} /* A fotócsík: a nyomatfájl 2:3-as, a csík a közepén áll fehér margóval – 1:3-ra vágva maga a csík látszik. A .hero-kep img 16:9-es vágását itt felül kell írni. */ .fotocsik{position:absolute;right:14px;bottom:-46px;width:clamp(58px,16%,96px);background:#fff;padding:3px; border-radius:2px;transform:rotate(-6deg);box-shadow:var(--arnyek)} .fotocsik img{display:block;width:100%;height:auto;aspect-ratio:1/3;max-height:none;object-fit:cover} @media (min-width:900px){.fotocsik{right:22px;bottom:-56px}} @media (prefers-reduced-motion:no-preference){ .kereso-ablak img{animation:elokep 2.3s ease-out both} .visszaszamlalo i{animation:szamlalo .62s ease-out both} .visszaszamlalo i:nth-child(1){animation-delay:.2s} .visszaszamlalo i:nth-child(2){animation-delay:.82s} .visszaszamlalo i:nth-child(3){animation-delay:1.44s} .vaku{animation:vaku .8s ease-out 2.06s both} /* Soronként jön ki a gépből (lépcsőzetes kivágás), aztán megdől, ahogy a kézbe esik. */ .fotocsik{animation:nyomtat 1.7s steps(12,end) 2.4s both,ledol .55s cubic-bezier(.3,1.5,.5,1) 4.15s both} } /* Második megnyitástól (ugyanabban a böngészőmunkamenetben) nincs visszaszámlálás – rögtön a kész kép. */ .villanas-latta .kereso-ablak img,.villanas-latta .visszaszamlalo i,.villanas-latta .vaku,.villanas-latta .fotocsik{animation:none} @keyframes elokep{0%,89%{filter:brightness(.5) saturate(.6)}100%{filter:none}} @keyframes szamlalo{0%{opacity:0;transform:scale(1.5)}22%{opacity:1;transform:scale(1)}78%{opacity:1}100%{opacity:0;transform:scale(.92)}} @keyframes vaku{0%{opacity:0}6%{opacity:.96}100%{opacity:0}} @keyframes nyomtat{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}} @keyframes ledol{from{transform:rotate(0)}to{transform:rotate(-6deg)}} /* ---- Első képernyő telefonon (D-158): cím → gombok → ár → fotó → bevezető. Eddig a gombok 796 px-nél, az ár 900 px-nél kezdődött, a látható rész (812 − 69 px alsó sáv) 743 px. Csak a sorrend változik, a szöveg nem. ---- */ @media (max-width:899px){ .hero-also{display:flex;flex-direction:column;gap:18px;padding-top:24px} .hero-szoveg{display:contents} .hero .gombsor{order:1} .hero-ar{order:2;margin:0} .kereso{order:3;margin-top:14px} .hero .bevezeto{order:4;margin:0} .hero-feltetel{order:5;margin:0} } /* ---- Közös kulcskockák a görgetéses jelenetekhez ---- */ @keyframes elohiv{0%{filter:grayscale(1) brightness(2.3) contrast(.3)}100%{filter:none}} @keyframes beuszik{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} @keyframes pattan{0%{transform:scale(0) rotate(-40deg)}100%{transform:none}} /* ---- 2. Bizalmi sáv: a számok felpörögnek (mozgas.js), a tételek egymás után beúsznak, a csillag bepattan ---- */ .mozgas-be .tenyek-sav-hero li{opacity:0} .mozgas-be .tenyek-sav-hero.mozog li{animation:beuszik .6s ease-out both} .mozgas-be .tenyek-sav-hero.mozog li:nth-child(2){animation-delay:.12s} .mozgas-be .tenyek-sav-hero.mozog li:nth-child(3){animation-delay:.24s} .mozgas-be .tenyek-sav-hero .csillag-jel{display:inline-block} .mozgas-be .tenyek-sav-hero.mozog .csillag-jel{animation:pattan .5s cubic-bezier(.3,1.7,.5,1) 1.3s both} /* A „0 lemondott rendezvény” pecsétet kap: rányomódik, és körbeveszi egy pecsétgyűrű (az érték-szín sötét árnyalata, --pezsgo-tinta: minden témán olvasható, és nem a gombé). A sorrend a savok.mjs → bizalmiSav-ból jön: értékelés, rendezvények, lemondott – ha az változik, ez is. */ .tenyek-sav-hero li:nth-child(3) b{position:relative;display:inline-block} .mozgas-be .tenyek-sav-hero li:nth-child(3) b::after{content:"";position:absolute;left:50%;top:50%;width:1.45em;height:1.45em;margin:-.72em 0 0 -.72em; border:2px solid var(--pezsgo-tinta);border-radius:50%;opacity:0} .mozgas-be .tenyek-sav-hero.mozog li:nth-child(3) b{animation:pecset .45s cubic-bezier(.3,1.6,.5,1) 1.1s both} .mozgas-be .tenyek-sav-hero.mozog li:nth-child(3) b::after{animation:pecsetgyuru .5s ease-out 1.3s both} @keyframes pecset{0%{transform:scale(2.4) rotate(-14deg);opacity:0}60%{opacity:1}100%{transform:rotate(-8deg);opacity:1}} @keyframes pecsetgyuru{0%{opacity:0;transform:scale(1.8)}100%{opacity:.9;transform:none}} /* ---- 3. Termékek: a fotó előhívódik; a 360° képe utána térben elfordul, mint a körbefutó kamera ---- */ .mozgas-be .termek img{filter:grayscale(1) brightness(2.3) contrast(.3)} .mozgas-be .termek.mozog img{animation:elohiv 1s ease-out both} @media (min-width:760px){ .mozgas-be .termek:nth-child(2).mozog img{animation-delay:.2s} .mozgas-be .termek:nth-child(3).mozog img{animation-delay:.4s} } .mozgas-be .termek:nth-child(2){perspective:700px} .mozgas-be .termek:nth-child(2).mozog img{animation:elohiv 1s ease-out both,terben 2.4s ease-in-out .9s both} @keyframes terben{0%{transform:none}30%{transform:rotateY(-16deg)}65%{transform:rotateY(12deg)}100%{transform:none}} /* ---- 4. „Hogyan kapjátok meg a képeket és videókat?" (D-157) ---- Négy ábra a /szelfigep/ oldal rajzaiból (partials/megosztas.mjs → megosztasJelenet): nyomtatás, e-mail, AirDrop, QR-kód. Telefonon oldalra lapozható sor (5b. 3.), asztalon négy hasáb. Minden ábra akkor mozdul, amikor maga a képbe ér – telefonon tehát akkor, amikor a látogató odalapoz. */ .kapjatok{padding-block:56px 0} @media (min-width:900px){.kapjatok{padding-block:88px 0}} .kapjatok-sor{display:grid;grid-auto-flow:column;grid-auto-columns:min(60vw,230px);gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;margin-inline:-20px;padding:0 20px 12px;scroll-padding-inline:20px} @media (min-width:900px){.kapjatok-sor{grid-auto-flow:row;grid-template-columns:repeat(4,minmax(0,1fr));overflow:visible;margin-inline:0;padding:0;gap:28px}} .kapjatok figure{margin:0;scroll-snap-align:start;display:grid;gap:16px;align-content:start} .kapjatok figcaption{display:grid;gap:4px;font-size:var(--m-m)} .kapjatok figcaption b{font:700 var(--m-torzs) var(--betu)} .kapjatok figcaption span{color:var(--halvany)} .kapjatok figcaption em{font-style:normal;font-weight:600;color:var(--tinta)} /* Telefonon kisebb ábra: a szakasz így ~150 px-szel rövidebb (Zoli fő kifogása a mobil hossz, 5b. 1.). */ .kapjatok .telefon{max-width:160px;justify-self:start} @media (min-width:900px){.kapjatok .telefon{max-width:200px;justify-self:center}} /* Csak a MOZGÓ elemek (a-* osztály) forognak és nagyulnak a saját közepük körül. Ha minden SVG-elemre hatna, a rajzok saját transform="scale(…)" attribútuma is a közepéből nagyítana – így csúszott el a QR-kód (javítva 09-29). */ .kapjatok svg [class^="a-"]{transform-box:fill-box;transform-origin:center} /* Nyugalmi (statikus) állapot: az e-mail értesítője és az AirDrop koppintása csak mozgás közben látszik. */ .kapjatok-email .a-ertesito,.a-koppintas,.a-sugar{opacity:0} /* Nyomtatás: a sáv betelik, a csík soronként kijön a résből (a nyomtató rése alatt vágva). */ .mozgas-be .kapjatok .a-csik-sav{transform:scaleX(0);transform-origin:0 50%} .mozgas-be .kapjatok .a-csik{transform:translateY(-226px)} .mozgas-be .kapjatok-nyomtatas.mozog .a-csik-sav{animation:betelik 1.8s linear .1s both} .mozgas-be .kapjatok-nyomtatas.mozog .a-csik{animation:kinyomtat 1.9s steps(12,end) .4s both} @keyframes betelik{from{transform:scaleX(0)}to{transform:scaleX(1)}} @keyframes kinyomtat{from{transform:translateY(-226px)}to{transform:none}} /* E-mail: értesítő ereszkedik le, majd megnyílik a levél, és beugrik a kép, utána a videó. */ .mozgas-be .kapjatok-email .a-level,.mozgas-be .kapjatok-email .a-belyeg1,.mozgas-be .kapjatok-email .a-belyeg2{opacity:0} .mozgas-be .kapjatok-email.mozog .a-ertesito{animation:ertesit 1.7s cubic-bezier(.3,1.2,.5,1) .2s both} .mozgas-be .kapjatok-email.mozog .a-level{animation:beuszik .5s ease-out 1.5s both} .mozgas-be .kapjatok-email.mozog .a-belyeg1{animation:beugrik .5s cubic-bezier(.3,1.5,.5,1) 1.8s both} .mozgas-be .kapjatok-email.mozog .a-belyeg2{animation:beugrik .5s cubic-bezier(.3,1.5,.5,1) 2.1s both} @keyframes ertesit{0%{opacity:0;transform:translateY(-70px)}18%{opacity:1;transform:none}78%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-70px)}} @keyframes beugrik{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:none}} /* AirDrop: a kérés rugósan felugrik, megjelenik a fotó és a videó, egy koppintás az Elfogadásra. */ .mozgas-be .kapjatok-airdrop .a-kartya,.mozgas-be .kapjatok-airdrop .a-belyeg1,.mozgas-be .kapjatok-airdrop .a-belyeg2{opacity:0} .mozgas-be .kapjatok-airdrop.mozog .a-kartya{animation:beugrik .6s cubic-bezier(.3,1.5,.5,1) .3s both} .mozgas-be .kapjatok-airdrop.mozog .a-belyeg1{animation:beugrik .45s cubic-bezier(.3,1.5,.5,1) .9s both} .mozgas-be .kapjatok-airdrop.mozog .a-belyeg2{animation:beugrik .45s cubic-bezier(.3,1.5,.5,1) 1.1s both} .mozgas-be .kapjatok-airdrop.mozog .a-koppintas{animation:koppint .7s ease-out 1.8s both} @keyframes koppint{0%{opacity:0;transform:scale(.3)}30%{opacity:1}100%{opacity:0;transform:scale(1.5)}} /* QR: a sarkok ráfókuszálnak, végigfut a beolvasó fény, és leereszkedik a „Koppints a megnyitáshoz". */ .mozgas-be .kapjatok-qr .a-ertesito{opacity:0} .mozgas-be .kapjatok-qr.mozog .a-sarkok{animation:fokusz .5s ease-out .2s 2 both} .mozgas-be .kapjatok-qr.mozog .a-sugar{animation:olvas .7s ease-in-out .5s 2 both} .mozgas-be .kapjatok-qr.mozog .a-ertesito{animation:leereszkedik .5s cubic-bezier(.3,1.3,.5,1) 2s both} @keyframes fokusz{0%{transform:scale(1.1)}100%{transform:none}} @keyframes olvas{0%{opacity:1;transform:none}90%{opacity:1;transform:translateY(90px)}100%{opacity:0;transform:translateY(93px)}} @keyframes leereszkedik{from{opacity:0;transform:translateY(-50px)}to{opacity:1;transform:none}} /* ---- 5. Galéria: nyomatzápor – a nyomatok az asztalra hullanak, aztán előhívódnak ---- */ .mozgas-be #galeria .print{opacity:0} .mozgas-be #galeria .print img{filter:grayscale(1) brightness(2.3) contrast(.3)} .mozgas-be #galeria.mozog .print{animation:hull .8s cubic-bezier(.3,1.35,.5,1) both;animation-delay:calc(var(--k,6) * .14s)} .mozgas-be #galeria.mozog .print img{animation:elohiv 1.1s ease-out both;animation-delay:calc(var(--k,6) * .14s + .4s)} .mozgas-be #galeria .csuszka-elem:nth-child(even) .print{--dol:9deg} #galeria .csuszka-elem:nth-child(1){--k:0}#galeria .csuszka-elem:nth-child(2){--k:1}#galeria .csuszka-elem:nth-child(3){--k:2} #galeria .csuszka-elem:nth-child(4){--k:3}#galeria .csuszka-elem:nth-child(5){--k:4} @keyframes hull{0%{opacity:0;transform:translateY(-140px) rotate(var(--dol,-11deg))}45%{opacity:1}100%{opacity:1;transform:none}} /* ---- 6. Foglalás: a négy lépés egymás után bekattan, a vonal kihúzódik, a szám bepattan ---- Minden lépést külön figyelünk (mozgas.js): telefonon egymás alatt állnak, és mindegyik akkor indul, amikor maga a képbe ér. Asztalon egy sorban vannak, ott a késleltetés adja az egymásutánt. */ .mozgas-be .lepesek li{opacity:0;border-top-color:transparent;background:linear-gradient(var(--tinta),var(--tinta)) 0 0/0 2px no-repeat} .mozgas-be .lepesek li.mozog{animation:beuszik .5s cubic-bezier(.3,1.3,.5,1) both,vonal .6s ease-out both} .mozgas-be .lepesek li.mozog::before{display:inline-block;animation:pattan .45s cubic-bezier(.3,1.7,.5,1) both} @media (min-width:760px){ .mozgas-be .lepesek li.mozog:nth-child(2),.mozgas-be .lepesek li.mozog:nth-child(2)::before{animation-delay:.35s} .mozgas-be .lepesek li.mozog:nth-child(3),.mozgas-be .lepesek li.mozog:nth-child(3)::before{animation-delay:.7s} .mozgas-be .lepesek li.mozog:nth-child(4),.mozgas-be .lepesek li.mozog:nth-child(4)::before{animation-delay:1.05s} } @keyframes vonal{to{background-size:100% 2px}} /* ---- 7. Vélemények: a kártyák oldalról úsznak be, ahogy a csúszka is oldalra visz ---- */ .mozgas-be #velemeny-sav .csuszka-elem{opacity:0} .mozgas-be #velemeny-sav.mozog .csuszka-elem{animation:oldalrol .7s cubic-bezier(.2,.9,.3,1) both;animation-delay:.5s} .mozgas-be #velemeny-sav.mozog .csuszka-elem:nth-child(1){animation-delay:0s} .mozgas-be #velemeny-sav.mozog .csuszka-elem:nth-child(2){animation-delay:.12s} .mozgas-be #velemeny-sav.mozog .csuszka-elem:nth-child(3){animation-delay:.24s} .mozgas-be #velemeny-sav.mozog .csuszka-elem:nth-child(4){animation-delay:.36s} @keyframes oldalrol{from{opacity:0;transform:translateX(70px)}to{opacity:1;transform:none}}