/* ==========================================================================
   MODIVIAM — Felületek, effektek, mozgás
   --------------------------------------------------------------------------
   Elv: minden effekt halk. Egyetlen elem sem „ugrik". A prémium hatás a
   lassúságból, a hajszálvonalakból és a levegőből jön, nem a látványosságból.
   ========================================================================== */

/* ==========================================================================
   1. FILMSZEMCSE — az egész oldalra
   Egy SVG-ben generált zaj, fixen a viewporton. Ez az, ami a lapos digitális
   felületet „anyagszerűvé" teszi. Nagyon halványan, különben piszkos lesz.
   ========================================================================== */

.mv-grain {
  position: fixed;
  inset: 0;
  z-index: var(--mv-z-grain);
  pointer-events: none;
  opacity: var(--mv-grain-opacity);
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  background-size: 140px 140px;
  will-change: transform;
}

@media (prefers-reduced-motion: no-preference) {
  .mv-grain { animation: mv-grain-drift 7s steps(6) infinite; }
}

@keyframes mv-grain-drift {
  0%   { transform: translate(0, 0); }
  16%  { transform: translate(-2%, -3%); }
  33%  { transform: translate(3%, -2%); }
  50%  { transform: translate(-1%, 3%); }
  66%  { transform: translate(2%, 2%); }
  83%  { transform: translate(-3%, 1%); }
  100% { transform: translate(0, 0); }
}

/* ==========================================================================
   2. BÁRSONY FELÜLETEK
   A fekete bársony fotó adja a textúrát, fölötte noir/navy színréteg.
   Ha a kép nem tölt be, a gradiens önmagában is megáll — sosem lesz üres.
   ========================================================================== */

.mv-velvet,
.mv-section--noir,
.mv-section--navy {
  position: relative;
  isolation: isolate;
  color: var(--mv-on-dark);
  background-color: var(--mv-noir);
}

.mv-section--navy { background-color: var(--mv-navy-deep); }

.mv-velvet::before,
.mv-section--noir::before,
.mv-section--navy::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: var(--mv-velvet-img, none);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.55;
}

.mv-velvet::after,
.mv-section--noir::after,
.mv-section--navy::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--mv-velvet-overlay);
}

/* Vignetta — a széleket lehúzza, a közepet kiemeli. Fotóstúdió-hatás. */
.mv-velvet--vignette::after {
  background:
    var(--mv-velvet-overlay),
    radial-gradient(ellipse 78% 62% at 50% 45%,
      transparent 0%,
      rgba(11, 14, 17, 0.28) 62%,
      rgba(11, 14, 17, 0.72) 100%);
}

/* Sötét szekció szövegszínei */
.mv-section--noir h1, .mv-section--noir h2, .mv-section--noir h3,
.mv-section--noir h4, .mv-section--noir h5, .mv-section--noir h6,
.mv-section--navy h1, .mv-section--navy h2, .mv-section--navy h3,
.mv-section--navy h4, .mv-section--navy h5, .mv-section--navy h6,
.mv-on-noir h1, .mv-on-noir h2, .mv-on-noir h3 {
  color: var(--mv-on-dark);
}

.mv-section--noir p, .mv-section--navy p, .mv-on-noir p {
  color: var(--mv-on-dark-soft);
}

/* ==========================================================================
   3. SZEKCIÓ-RITMUS
   A régi oldal legfőbb baja: minden szekció ugyanolyan magas, fehér, egyforma.
   Itt váltakozó alap + nagy, fluid függőleges tér.
   ========================================================================== */

.mv-section {
  position: relative;
  padding-block: var(--mv-space-3xl);
}

.mv-section--ivory { background-color: var(--mv-ivory); }
.mv-section--warm  { background-color: var(--mv-ivory-warm); }
.mv-section--tight { padding-block: var(--mv-space-xl); }

/* Finom átmenet a világos és sötét sávok között — kemény él helyett */
.mv-section--fade-top::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 140px;
  background: linear-gradient(180deg, rgba(11,14,17,0.5), transparent);
  pointer-events: none;
  z-index: 0;
}

/* ==========================================================================
   4. GOMBOK
   Szögletes, hajszálvonalas, arany kitöltés-söprés hoverre.
   Elementor gombokra is ráül, hogy a meglévő tartalom is átvegye.
   ========================================================================== */

.mv-btn,
.elementor-button.mv-btn,
body[class*="elementor-kit"] .elementor-button-wrapper .elementor-button:not(.mv-btn--raw) {
  --mv-btn-fg: var(--mv-ink);
  --mv-btn-line: var(--mv-ink);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75em;
  overflow: hidden;
  isolation: isolate;
  font-family: var(--mv-font-ui);
  font-size: var(--mv-fs-micro);
  font-weight: 400;
  letter-spacing: var(--mv-ls-button);
  text-transform: uppercase;
  line-height: 1;
  color: var(--mv-btn-fg);
  background: transparent;
  border: var(--mv-hairline) solid var(--mv-btn-line);
  border-radius: var(--mv-radius);
  padding: 1.25em 2.6em;
  cursor: pointer;
  transition: color var(--mv-dur) var(--mv-ease),
              border-color var(--mv-dur) var(--mv-ease);
  text-decoration: none;
}

/* A kitöltés balról söpör be — a klasszikus „scale" helyett, ami olcsóbb. */
.mv-btn::before,
body[class*="elementor-kit"] .elementor-button-wrapper .elementor-button:not(.mv-btn--raw)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--mv-champagne);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--mv-dur) var(--mv-ease-out);
}

.mv-btn:hover,
.mv-btn:focus-visible,
body[class*="elementor-kit"] .elementor-button-wrapper .elementor-button:not(.mv-btn--raw):hover,
body[class*="elementor-kit"] .elementor-button-wrapper .elementor-button:not(.mv-btn--raw):focus-visible {
  color: var(--mv-noir);
  border-color: var(--mv-champagne);
}

.mv-btn:hover::before,
.mv-btn:focus-visible::before,
body[class*="elementor-kit"] .elementor-button-wrapper .elementor-button:not(.mv-btn--raw):hover::before,
body[class*="elementor-kit"] .elementor-button-wrapper .elementor-button:not(.mv-btn--raw):focus-visible::before {
  transform: scaleX(1);
}

/* Elsődleges — tömör noir, aranyra vált */
.mv-btn--solid {
  --mv-btn-fg: var(--mv-ivory);
  --mv-btn-line: var(--mv-noir);
  background: var(--mv-noir);
}

/* Sötét alapon */
.mv-section--noir .mv-btn,
.mv-section--navy .mv-btn,
.mv-on-noir .mv-btn {
  --mv-btn-fg: var(--mv-on-dark);
  --mv-btn-line: rgba(237, 231, 220, 0.42);
}

/* Csak szöveg + nyíl */
.mv-btn--ghost {
  border: 0;
  padding: 0.5em 0;
  gap: 0.9em;
}

.mv-btn--ghost::before { display: none; }

.mv-btn--ghost::after {
  content: "";
  width: 2.2em;
  height: var(--mv-hairline);
  background: currentColor;
  transition: width var(--mv-dur) var(--mv-ease-out);
}

.mv-btn--ghost:hover { color: var(--mv-champagne-dk); }
.mv-btn--ghost:hover::after { width: 3.4em; }

/* ==========================================================================
   5. KÉPKEZELÉS
   Hajszálvonalas arany keret eltolva, lassú zoom hoverre, luminanciás
   összeolvadás sötét alapon.
   ========================================================================== */

.mv-figure {
  position: relative;
  overflow: hidden;
  background: var(--mv-noir);
}

.mv-figure img {
  width: 100%;
  transition: transform var(--mv-dur-slow) var(--mv-ease-out),
              filter var(--mv-dur-slow) var(--mv-ease-out);
  will-change: transform;
}

.mv-figure:hover img { transform: scale(1.045); }

/* Eltolt arany keret — a kép mellé, nem rá */
.mv-figure--framed { overflow: visible; }

.mv-figure--framed::after {
  content: "";
  position: absolute;
  inset: clamp(0.75rem, 2vw, 1.5rem);
  border: var(--mv-hairline) solid var(--mv-champagne);
  opacity: 0.55;
  pointer-events: none;
  transition: inset var(--mv-dur-slow) var(--mv-ease-out),
              opacity var(--mv-dur-slow) var(--mv-ease-out);
}

.mv-figure--framed:hover::after {
  inset: clamp(0.4rem, 1.2vw, 0.9rem);
  opacity: 0.9;
}

/* Duotone: a fotó beleolvad a noir alapba. Termékfotóknál NE használjuk. */
.mv-figure--duotone img {
  filter: grayscale(1) contrast(1.06) brightness(0.92);
  mix-blend-mode: luminosity;
}

.mv-figure--duotone:hover img {
  filter: grayscale(0.35) contrast(1.02) brightness(1);
}

/* Képarányok */
.mv-ratio-portrait  { aspect-ratio: 3 / 4;  }
.mv-ratio-square    { aspect-ratio: 1 / 1;  }
.mv-ratio-landscape { aspect-ratio: 3 / 2;  }
.mv-ratio-cinema    { aspect-ratio: 21 / 9; }

.mv-ratio-portrait img, .mv-ratio-square img,
.mv-ratio-landscape img, .mv-ratio-cinema img {
  width: 100%; height: 100%; object-fit: cover;
}

/* ==========================================================================
   6. SCROLL REVEAL
   A JS csak a .mv-in osztályt teszi rá. Ha a JS nem fut le, minden látszik —
   soha nem marad tartalom láthatatlanul.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {

  .mv-reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity var(--mv-dur-reveal) var(--mv-ease-out),
                transform var(--mv-dur-reveal) var(--mv-ease-out);
    transition-delay: var(--mv-reveal-delay, 0ms);
    will-change: opacity, transform;
  }

  .mv-reveal.mv-in {
    opacity: 1;
    transform: none;
  }

  /* Elemenkénti lépcsőzés — a szülőre .mv-stagger kell */
  .mv-stagger > * { --mv-reveal-delay: 0ms; }
  .mv-stagger > *:nth-child(2) { --mv-reveal-delay: 90ms; }
  .mv-stagger > *:nth-child(3) { --mv-reveal-delay: 180ms; }
  .mv-stagger > *:nth-child(4) { --mv-reveal-delay: 270ms; }
  .mv-stagger > *:nth-child(5) { --mv-reveal-delay: 360ms; }
  .mv-stagger > *:nth-child(6) { --mv-reveal-delay: 450ms; }

  /* Sorról soronként előbukkanó cím */
  .mv-reveal--mask { opacity: 1; transform: none; overflow: hidden; }
  .mv-reveal--mask > span {
    display: block;
    transform: translateY(105%);
    transition: transform var(--mv-dur-reveal) var(--mv-ease-out);
    transition-delay: var(--mv-reveal-delay, 0ms);
  }
  .mv-reveal--mask.mv-in > span { transform: none; }

  /* Hajszálvonal, ami kihúzódik */
  .mv-reveal--line {
    transform: scaleX(0);
    transform-origin: left center;
    opacity: 1;
    transition: transform var(--mv-dur-slow) var(--mv-ease-out);
  }
  .mv-reveal--line.mv-in { transform: scaleX(1); }
}

/* ==========================================================================
   7. PARALLAX
   A JS állítja a --mv-par változót (-1..1). Csak transzformot mozgatunk,
   így nem okoz layoutot.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) and (min-width: 1025px) {
  .mv-parallax {
    transform: translate3d(0, calc(var(--mv-par, 0) * var(--mv-par-depth, 40px)), 0);
    will-change: transform;
  }
  .mv-parallax--slow { --mv-par-depth: 22px; }
  .mv-parallax--deep { --mv-par-depth: 72px; }
}

/* ==========================================================================
   8. FEJLÉC
   Áttetszőből tömörré sűrűsödik görgetésre. Az Elementor Theme Builder
   fejlécére is ráül a .modiviam-header osztályon keresztül, ami már létezik.
   ========================================================================== */

/* A referencia fejléce nagyon vékony és szinte láthatatlan: a tartalom fölött
   lebeg, saját háttér nélkül. Itt is ezt csináljuk — a fejléc nem doboz,
   csak egy keskeny sáv. */
.modiviam-header,
.mv-header {
  --mv-hdr-pad: 0.85rem;
  min-height: 0 !important;
  padding-block: var(--mv-hdr-pad) !important;
  background-color: transparent !important;
  transition: background-color var(--mv-dur) var(--mv-ease),
              backdrop-filter var(--mv-dur) var(--mv-ease),
              box-shadow var(--mv-dur) var(--mv-ease),
              padding var(--mv-dur) var(--mv-ease);
}

/* A fejlécen belüli konténer se tolja fel a magasságot */
.modiviam-header > .e-con,
.elementor-location-header .modiviam-header .e-con-full {
  min-height: 0 !important;
  padding-block: 0 !important;
}

/* Logó mérete a keskeny sávhoz igazítva */
.modiviam-header .elementor-widget-theme-site-logo img,
.modiviam-header .custom-logo {
  max-height: 34px;
  width: auto;
  transition: max-height var(--mv-dur) var(--mv-ease);
}

body.mv-scrolled .modiviam-header .elementor-widget-theme-site-logo img,
body.mv-scrolled .modiviam-header .custom-logo {
  max-height: 28px;
}

body.mv-scrolled .modiviam-header,
body.mv-scrolled .mv-header {
  --mv-hdr-pad: 0.55rem;
  background-color: rgba(11, 14, 17, 0.88) !important;
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  box-shadow: 0 1px 0 var(--mv-rule-on-dark),
              0 18px 40px -30px rgba(0, 0, 0, 0.9);
}

/* Navigációs link — arany aláhúzás fut ki középről */
/* !important kell: az Elementor a menü widgetre widget-szintű szabályt ír
   (`.elementor-element-XXX .elementor-nav-menu a`), ami erősebb nálunk.
   Enélkül a menü Lorában maradt — ez volt az egyik bejelentett hiba. */
.mv-nav a,
.modiviam-header .elementor-nav-menu a,
.elementor-location-header .elementor-nav-menu a,
.mv-header .elementor-nav-menu a {
  position: relative;
  font-family: var(--mv-font-ui) !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  font-size: 0.75rem !important;
  font-weight: 400 !important;
  transition: color var(--mv-dur-fast) var(--mv-ease);
}

.mv-nav a::after,
.modiviam-header .elementor-nav-menu a::after,
.mv-header .elementor-nav-menu a::after {
  content: "";
  position: absolute;
  left: 50%; bottom: -0.45em;
  width: 0; height: var(--mv-hairline);
  background: var(--mv-champagne);
  transform: translateX(-50%);
  transition: width var(--mv-dur) var(--mv-ease-out);
}

.mv-nav a:hover::after,
.modiviam-header .elementor-nav-menu a:hover::after,
.mv-header .elementor-nav-menu a:hover::after,
.modiviam-header .elementor-nav-menu .current-menu-item > a::after {
  width: 100%;
}

/* ==========================================================================
   9. LASSÚ HÁTTÉR-ZOOM (Ken Burns) hero képekhez
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
  .mv-kenburns { overflow: hidden; }
  .mv-kenburns > img,
  .mv-kenburns .mv-kenburns__img {
    animation: mv-kenburns 22s var(--mv-ease-inout) infinite alternate;
    will-change: transform;
  }
}

@keyframes mv-kenburns {
  from { transform: scale(1) translate3d(0, 0, 0); }
  to   { transform: scale(1.09) translate3d(0, -1.4%, 0); }
}

/* ==========================================================================
   10. ARANY CSILLANÁS — csak nagyon szűken, pl. a logón vagy egy címen
   ========================================================================== */

.mv-shimmer {
  background: linear-gradient(100deg,
      var(--mv-champagne-dk) 0%,
      var(--mv-champagne-lt) 42%,
      var(--mv-white) 50%,
      var(--mv-champagne-lt) 58%,
      var(--mv-champagne-dk) 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

@media (prefers-reduced-motion: no-preference) {
  .mv-shimmer { animation: mv-shimmer 6.5s var(--mv-ease-inout) infinite; }
}

@keyframes mv-shimmer {
  0%, 100% { background-position: 130% 50%; }
  50%      { background-position: -30% 50%; }
}

/* ==========================================================================
   11. BETÖLTÉSI ÁLLAPOT — a képek ne „pattanjanak" be
   ========================================================================== */

.mv-fade-img {
  opacity: 0;
  transition: opacity var(--mv-dur-slow) var(--mv-ease);
}
.mv-fade-img.mv-loaded { opacity: 1; }

/* ==========================================================================
   12. MOZGÁS KIKAPCSOLVA — minden azonnal a végállapotba kerül
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .mv-reveal { opacity: 1 !important; transform: none !important; }
  .mv-reveal--mask > span { transform: none !important; }
  .mv-reveal--line { transform: none !important; }
  .mv-grain { animation: none; }
}