.elementor-2226 .elementor-element.elementor-element-699e9fa{--display:flex;--min-height:100vh;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--overflow:hidden;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-2226 .elementor-element.elementor-element-8467213{--display:flex;}.elementor-2226 .elementor-element.elementor-element-8467213:not(.elementor-motion-effects-element-type-background), .elementor-2226 .elementor-element.elementor-element-8467213 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://animacio.tasnadi.group/wp-content/uploads/2025/08/top-scaled.webp");}.elementor-2226 .elementor-element.elementor-element-48778e1{--display:flex;--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-2226 .elementor-element.elementor-element-48778e1:not(.elementor-motion-effects-element-type-background), .elementor-2226 .elementor-element.elementor-element-48778e1 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://animacio.tasnadi.group/wp-content/uploads/2025/08/cartoon2-scaled.webp");}.elementor-2226 .elementor-element.elementor-element-35a6549{--display:flex;--min-height:100vh;--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-2226 .elementor-element.elementor-element-65fa641{z-index:999;}.elementor-2226 .elementor-element.elementor-element-65fa641 .elementor-heading-title{color:var( --e-global-color-e3b9808 );}:root{--page-title-display:none;}/* Start custom CSS */:root{
      /* Spotlight beállítások */
      --spot-x: 50%;
      --spot-y: 50%;
      --spot-radius: 250px;      /* kör "fő" sugara */
      --spot-feather: 10px;     /* perem elmosás (minél nagyobb, annál lágyabb) */
      --transition-ms: 60ms;     /* a pozíció frissítésének vizuális simítása */

      /* Képek (cseréld a sajátodra) */
      
      --top-image: url("https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?q=80&w=1920&auto=format&fit=crop");
      --bottom-image: url("https://images.unsplash.com/photo-1500534314209-a25ddb2bd429?q=80&w=1920&auto=format&fit=crop");
        
       /* --top-image: url("C:/Users/totha/Documents/kódolás/top.avif");
*/
      }

    * { box-sizing: border-box; }

.hero {
      position: relative;
      width: 100%;
      min-height: 100vh; /* teljes képernyős */
      overflow: hidden;
    }

    /* Alsó réteg (background) */
    .hero__layer--bottom,
    .hero__layer--top {
      position: absolute;
      inset: 0;
      background-position: center;
      background-size: cover;
      background-repeat: no-repeat;
      will-change: transform;
    }

    .hero__layer--bottom {
      background-image: var(--top-image);
      
      transform: scale(1.0); /* enyhe nagyítás a szép kitöltéshez */
    }

    /* Felső réteg – ezen vágunk ki egy kör alakú, lágy peremű "lyukat"
       A lyuk alatt kilátszik az alsó kép. */
    .hero__layer--top {
      background-image: var(--top-image);
        
        /*filter: grayscale(1);*/
      /* A maszkot radial-gradient adja:
         - első színátmenet: teljesen átlátszatlan (fedi a top képet)
         - a "lyuk" közepén teljesen átlátszó
         Az at() formában a kör középpontja CSS változókból jön (egér pozíció). */
      -webkit-mask: radial-gradient(
        circle var(--spot-radius) at var(--spot-x) var(--spot-y),
        transparent 0,
        transparent calc(var(--spot-radius) - 1px),
        rgba(0,0,0,0.2) calc(var(--spot-radius) + 1px),
        rgba(0,0,0,0.6) calc(var(--spot-radius) + var(--spot-feather) * 0.95),
        rgba(0,0,0,0.85) calc(var(--spot-radius) + var(--spot-feather) * 0.20),
        black calc(var(--spot-radius) + var(--spot-feather))
      );
      mask: radial-gradient(
        circle var(--spot-radius) at var(--spot-x) var(--spot-y),
        transparent 0,
        transparent calc(var(--spot-radius) - 10px),
        rgba(0,0,0,0.2) calc(var(--spot-radius) + 10px),
        rgba(0,0,0,0.6) calc(var(--spot-radius) + var(--spot-feather) * 0.99),
        rgba(0,0,0,0.95) calc(var(--spot-radius) + var(--spot-feather) * 0.20),
        black calc(var(--spot-radius) + var(--spot-feather))
      );

      /* kis simítás a változó mozgatására */
      transition:
        mask-position var(--transition-ms) linear,
        -webkit-mask-position var(--transition-ms) linear;
    }

    /* Opcionális cím vagy CTA a hero-n */
    .hero__content {
      position: absolute;
      inset: 0;
      display: grid;
      place-items: center;
      pointer-events: none; /* ne zavarja az egérkövetést */
      text-align: center;
      padding: 2rem;
      background: linear-gradient(to bottom, rgba(0,0,0,0.35), rgba(0,0,0,0) 40%);
    }
    .hero__title {
      font-size: clamp(2rem, 4vw + 1rem, 4rem);
      line-height: 1.1;
      margin: 0;
      text-shadow: 0 2px 30px rgba(0,0,0,0.5);
    }

    /* Reszponzív finomhangolás: kisebb kijelzőn kisebb kör, lágyabb perem */
    @media (max-width: 768px) {
      :root {
        --spot-radius: 220px;
        --spot-feather: 100px;
      }
    }/* End custom CSS */