/* ============================================================
   RIVERSIDE — MOZGÁS

   A görgetésre adott válaszok: fejléc, belépő szekciók, parallax,
   mobil foglalási sáv — és a csökkentett mozgás kezelése.

   A színek, méretek és betűk egyetlen helyen, a style.css tetején
   élnek (TOKENEK). Ha egy színt átírsz ott, minden oldal követi.
   ============================================================ */

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}

/* ============================================================
   5. GÖRGETÉS

   A cél: az oldal finoman életre keljen, de ne vonja el a figyelmet.
   Minden mozgás `transform` és `opacity` — ezeket a böngésző a
   kompozitoron rajzolja, nem kell újraszámolnia az elrendezést.

   Három szabály tartja kordában:
     1. egy elem EGYSZER jelenik meg, utána nem mozog többé;
     2. a fejléc magassága változik, de a helyét állandó méretű
        kitöltő őrzi — így a tartalom soha nem ugrik meg;
     3. `prefers-reduced-motion` esetén minden mozgás elmarad, a
        tartalom pedig azonnal látszik (lásd a fájl végét).
   ============================================================ */
:root{
  --header-h-sm:58px;          /* a fejléc összehúzott magassága */
  --reveal-y:18px;             /* ennyit emelkedik a belépő elem */
  --reveal-dur:720ms;
}

/* Fix pozíció: a görgetéskor változó magasság így nem tolja a tartalmat. */
.rv-header{position:fixed;left:0;right:0;top:0;transition:height var(--dur-slow) var(--ease-out),background var(--dur-slow) var(--ease-out),box-shadow var(--dur-slow) var(--ease-out),border-color var(--dur-slow) var(--ease-out)}

/* A helykitöltő magassága ÁLLANDÓ, a fejlécé nem — ezért nincs ugrás. */
.rv-headerSpacer{height:var(--header-h);flex:0 0 auto}

.rv-headerSpacer--none{height:0}

/* Az oldal tetején légiesebb: halványabb fátyol, keret és árnyék nélkül. */
.rv-header--top{background:rgba(251,249,245,.5);border-bottom-color:transparent}

/* Lefelé görgetve tömörebb és határozottabb. Felfelé görgetve
   visszanyeri a teljes magasságát (ezt a JS dönti el). */
.rv-header--compact{height:var(--header-h-sm);background:rgba(251,249,245,.95);box-shadow:var(--shadow-sm)}

.rv-header--compact .rv-wordmark__sub{opacity:0;transition:opacity var(--dur-base) var(--ease-out)}

/* A hero fölött a fejléc fátyla önmagában kevés lenne a szöveg
   olvashatóságához, ezért a fotó tetejére is kerül egy halk sötétítés. */
.rv-hero__media::before{content:'';position:absolute;left:0;right:0;top:0;height:160px;background:linear-gradient(to bottom,rgba(27,30,29,.28),rgba(27,30,29,0));pointer-events:none;z-index:1}

/* Két képpont a fejléc alsó élén. Csak görgetés közben látszik, és
   `scaleX`-szel nő — nem szélességgel, hogy ne kelljen újraszámolni. */
.rv-progress{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--action-accent-bg);transform:scaleX(var(--rv-progress,0));transform-origin:0 50%;opacity:0;transition:opacity var(--dur-base) var(--ease-out)}

.rv-header--compact .rv-progress{opacity:.85}

/* ---------- Szekciók és kártyák belépése ---------- */
@media (prefers-reduced-motion:no-preference){
  .rv-reveal{opacity:0;transform:translate3d(0,var(--reveal-y),0);
    transition:opacity var(--reveal-dur) var(--ease-entrance),transform var(--reveal-dur) var(--ease-entrance);
    transition-delay:var(--rv-delay,0ms)}
  .rv-reveal--in{opacity:1;transform:none}
  /* Kép esetén egy hajszálnyi nagyításból simul a helyére. */
  .rv-reveal--zoom{transform:translate3d(0,var(--reveal-y),0) scale(1.015)}
  .rv-reveal--zoom.rv-reveal--in{transform:none}
}

/* A kép 12%-kal nagyobb, mint a kerete: ez fölül-alul nagyjából 30
   képpont ráhagyást ad. A parallax legfeljebb 28 képpontot mozdít
   rajta, tehát a keret mindig tele marad — soha nem látszik ki él. */
@media (prefers-reduced-motion:no-preference){
  .rv-hero__media{overflow:hidden}
  .rv-hero__img{transform:translate3d(0,var(--rv-parallax,0px),0) scale(1.12);will-change:transform}
}

/* Hosszú oldalon ne kelljen visszagörgetni a foglaláshoz. Csak
   mobilon, csak a hero elhagyása után, és csak ott, ahol nincs már
   saját ragadó sáv (a foglalási oldalon nincs rá szükség). */
.rv-ctabar{display:none}

@media (max-width:900px){
  .rv-ctabar{position:fixed;left:0;right:0;bottom:0;z-index:35;display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);
    padding:10px var(--space-5) calc(10px + env(safe-area-inset-bottom,0px));
    background:rgba(251,249,245,.95);backdrop-filter:blur(10px);border-top:1px solid var(--border-hairline);
    transform:translate3d(0,110%,0);transition:transform var(--dur-slow) var(--ease-entrance);will-change:transform}
  .rv-ctabar--on{transform:none}
  .rv-ctabar__price{display:flex;flex-direction:column;gap:2px;min-width:0}
  .rv-ctabar__from{font-family:var(--font-display);font-size:19px;color:var(--text-heading);line-height:1.1}
  .rv-ctabar__note{font-size:var(--text-caption);color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}

/* Aki az operációs rendszerében kérte, annak semmi nem mozog: a
   belépő elemek azonnal láthatók, a parallax és a sávok ugrás
   nélkül jelennek meg. */
@media (prefers-reduced-motion:reduce){
  .rv-header,.rv-ctabar,.rv-progress{transition:none}
  .rv-ctabar{transform:none}
  .rv-hero__img{transform:none}
}

/* A mobil foglalási sáv ne takarja el a lábléc utolsó sorát. */
@media (max-width:900px){
  .rv-hasCtabar .rv-section:last-child{padding-bottom:var(--space-6)}
  .rv-footer{padding-bottom:72px}
}


/* ============================================================
   TÖLTŐIKON — „vízcsepp és hullámgyűrűk"

   Egy csepp esik a víz színére, és két gyűrű terül szét belőle:
   a folyó-téma kicsiben. Egyetlen színt használ (`currentColor`),
   ezért a gombban a gomb színét, máshol a fő kiemelő (agyag) színt
   kapja. Csökkentett mozgásnál nem mozog: állókép lesz belőle.

   Használat (js/main.js):
     toltoIkon('sm' | 'lg')       → HTML a beillesztéshez
     gombFolyamat(gomb, 'Küldjük…') / gombKesz(gomb, 'Küldés')
     toltoBe(doboz) / toltoKi(doboz)   → egy terület betöltés alatt
   ============================================================ */
.rv-toltes{display:inline-flex;align-items:center;justify-content:center;flex:none;color:var(--clay-500);vertical-align:-.22em;line-height:0}
.rv-toltes--sm{width:1.6em;height:1.6em}
.rv-toltes--lg{width:52px;height:52px}
.rv-btn .rv-toltes{color:currentColor}
.rv-toltes__svg{width:100%;height:100%;overflow:visible}
.rv-toltes__gyuru{fill:none;stroke:currentColor;stroke-width:1.7;transform-box:fill-box;transform-origin:center;opacity:0;animation:rv-gyuru 1.9s cubic-bezier(.25,.6,.35,1) infinite}
.rv-toltes__gyuru--b{animation-delay:.38s}
.rv-toltes__csepp{fill:currentColor;transform-box:fill-box;transform-origin:center;opacity:0;animation:rv-csepp 1.9s cubic-bezier(.5,0,.9,.6) infinite}
@keyframes rv-gyuru{
  0%,24%{transform:scale(.2);opacity:0}
  30%{opacity:.95}
  100%{transform:scale(1.9);opacity:0}
}
@keyframes rv-csepp{
  0%{transform:translateY(-3px) scale(.6);opacity:0}
  10%{opacity:1}
  26%{transform:translateY(7.5px) scale(1);opacity:1}
  31%,100%{transform:translateY(8px) scale(.2);opacity:0}
}
@media (prefers-reduced-motion:reduce){
  .rv-toltes__gyuru--a{animation:none !important;opacity:.75;transform:scale(1.15)}
  .rv-toltes__gyuru--b{animation:none !important;opacity:.35;transform:scale(1.8)}
  .rv-toltes__csepp{animation:none !important;opacity:1;transform:translateY(0)}
}

/* Egy terület betöltés alatt: a tartalom halványodik, középen a töltő.
   A töltő csak negyed másodperc után jelenik meg, hogy egy gyors
   válasznál ne villanjon fel feleslegesen. */
.rv-toltes-alatt{position:relative;min-height:120px}
.rv-toltes-alatt>*:not(.rv-toltes-fedo){opacity:.4;pointer-events:none;transition:opacity .2s}
.rv-toltes-fedo{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;animation:rv-fedo-be .25s ease-out .25s forwards}
@keyframes rv-fedo-be{to{opacity:1}}
@media (prefers-reduced-motion:reduce){.rv-toltes-fedo{animation:none !important;opacity:1}}