/* --- VÉGLEGES KÓD: Kosárba tesz Gomb Animáció + Lenyomódás --- */

/* 1. Alapállapot beállítása az átmenethez (transition) */
.product-addtocart-wrapper .button-add-to-cart {
    /* Biztosítjuk, hogy a változások lágyan történjenek */
    transition: all 0.2s ease-in-out; 
    /* Enyhe árnyék alapból, hogy a gomb kiemelkedjen a síkból */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); 
    position: relative; 
}

/* 2. Rávitel (HOVER) állapot: Kiemelés */
.product-addtocart-wrapper .button-add-to-cart:hover {
    /* Nagyobb árnyék, ami a kiemelkedés érzetét adja */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.35); 
    /* Picit megnöveljük a gombot, dinamikusabb hatásért */
    transform: scale(1.03); 
    /* Finom színkiemelés */
    filter: brightness(1.1);
    /* Az átmenetet picit gyorsítjuk, hogy dinamikusabb legyen a reakció */
    transition: all 0.15s ease-in; 
}

/* 3. Lenyomás (ACTIVE) állapot: A fizikai kattintás érzete */
/* Ez aktiválódik abban a pillanatban, amikor az egérgomb le van nyomva a gomb felett. */
.product-addtocart-wrapper .button-add-to-cart:active {
    /* Visszahúzzuk az árnyékot, mintha a gomb belesüllyedne az oldalba. */
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    
    /* Enyhén összenyomjuk és lejjebb toljuk a gombot. */
    transform: translateY(1px) scale(0.99); 
    
    /* Még gyorsabb átmenet a pillanatnyi reakcióért */
    transition: all 0.05s ease-out;
} 


/* @keyframes: A pulzáló/villogó animáció meghatározása */
@keyframes button-pulse {
    0% { 
        /* Kezdőállapot: normál árnyék */
        box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.5); 
    }
    50% { 
        /* Középállapot: az árnyék szétterjed (pulzál) */
        box-shadow: 0 0 0 15px rgba(255, 0, 0, 0); 
    }
    100% { 
        /* Vissza a kezdőállapothoz */
        box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.5); 
    }
}
/* Célzott kategória gomb (cseréld az ID-t a sajátodra!) */
/* Feltételezzük, hogy a kategória gombja egy <a> tag a listában. */

#cat_239 a {
    /* Hozzárendelés: animáció neve | időtartam | ismétlés típusa | ismétlések száma */
    animation: button-pulse 2s infinite ease-in-out; 
    
    /* Fontos, hogy a box-shadow látszódjon */
    position: relative; 
    z-index: 10;
    
    /* Kezdeti vizuális kiemelés */
    background-color: #ff0000; /* Színt adunk a gombnak a figyelemfelkeltés érdekében */
    border-radius: 5px;
}

/* Opcionális: Ha rávitelkor is megtartaná a pulzálást */
#cat_500 a:hover {
    filter: brightness(1.1);
}



/* 1. Alap pulzálás animáció definiálása (0-1-0 opacitás váltás) */
@keyframes pulzalas {
    0% { opacity: 0.1; }  /* Majdnem eltűnik */
    50% { opacity: 1; }   /* Teljesen látszik */
    100% { opacity: 0.1; }
}

/* 2. Az ELSŐ matrica (ID-10, INGYEN SZÁLLÍTÁS) animációja */
.badgeitem-content-id-10 {
    /* Az animáció indul azonnal, időtartama 2 másodperc, végtelen ismétlés */
    animation: pulzalas 2s infinite; 
}

/* 3. A MÁSODIK matrica (ID-14, -33%) animációjának késleltetése */
.badgeitemid_14 {
    /* Ugyanaz az animáció */
    animation: pulzalas 2s infinite; 
    /* A kulcs: fél idővel késleltetjük az indulást (2s / 2 = 1s) */
    animation-delay: 1s; 
}



/* 1. Pulzálás animáció definiálása a címhez, zöld árnyékkal */
@keyframes cim-pulzalas {
    0% { 
        transform: scale(1); /* Eredeti méret */
        text-shadow: 0 0 5px rgba(0, 0, 0, 0.2); /* Enyhe, alap árnyék */
    }
    50% { 
        transform: scale(1.03); /* Kicsit nagyobb méret */
        /* Zöld kiemelés: (pl. LimeGreen) */
        text-shadow: 0 0 15px rgba(50, 205, 50, 0.9); 
    }
    100% { 
        transform: scale(1); /* Vissza az eredeti méretre */
        text-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    }
}

/* 2. Az animáció alkalmazása a főcímre */
.page-head-title {
    /* Az animáció neve, időtartama 3 másodperc, végtelen ismétlés, sima mozgás */
    animation: cim-pulzalas 3s infinite ease-in-out;
    /* Fontos: A tranzícióhoz alapvető beállítás, hogy ne torzuljon az elem */
    display: inline-block; 
}



/* 1. Finom árnyék-pulzálás animáció definiálása */
@keyframes arnyek-pulzalas {
    0% { 
        text-shadow: 0 0 1px rgba(0, 0, 0, 0.4); 
    }
    50% { 
        text-shadow: 0 0 8px rgba(0, 0, 255, 0.7); /* Kék kiemelés */
    }
    100% { 
        text-shadow: 0 0 1px rgba(0, 0, 0, 0.4); 
    }
}

/* 2. Az animáció alkalmazása a H3 címre */
.module-head-title {
    /* Az animáció neve, időtartama 2.5 másodperc, végtelen ismétlés */
    animation: arnyek-pulzalas 2.5s infinite ease-in-out; 
    /* Fontos, hogy a text-shadow működjön: */
    display: inline-block; 
}














.snowflake {
  position: fixed;
  top: -10px;
  color: white;
  z-index: 9999;
  pointer-events: none;
  animation-name: fall;
  animation-timing-function: linear;
}
@keyframes fall {
  to { transform: translateY(100vh); }
}


















/* Pontosan erre a képre célozunk az URL-részlet alapján */
img[src*="577442550_1600906681219160_1626818065940895526_n.jpg.webp"] {
  display: block;
  margin: 20px auto;
  max-width: 300px;
  border-radius: 10px;
  animation: pulse 4s infinite ease-in-out !important;
}

@keyframes pulse {
  0%   { transform: scale(1); filter: brightness(1); }
  50%  { transform: scale(1.05); filter: brightness(1.2); }
  100% { transform: scale(1); filter: brightness(1); }
}






/* Visszaszámláló szöveg a beléptetési üzeneten belül */
.welcome-countdown {
  display: block;
  margin-top: 6px;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
}

/* Ha a beléptetési üzenetnek sötét háttere van, ez kontrasztos marad */
.welcome-countdown .time {
  font-size: 20px;
}







/* BaitFishing.hu logó – forgás + pulzálás */
img[src*="baitfishing-logo_vektorizalt"] {
  animation: bfSpinIn 1s ease forwards, bfPulse 3s ease-in-out infinite 1s;
  transform-origin: center center;
  will-change: transform, opacity;
}

/* Belépő forgás */
@keyframes bfSpinIn {
  0%   { opacity: 0; transform: rotate(-360deg) scale(0.5); }
  100% { opacity: 1; transform: rotate(0deg) scale(1); }
}

/* Pulzálás */
@keyframes bfPulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.05); }
  100% { transform: scale(1); }
}

img[src*="baitfishing-logo_vektorizalt"]:hover {
  animation: bfHoverSpin 1s ease forwards;
}

@keyframes bfHoverSpin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}


img[src*="baitfishing-logo_vektorizalt"]:hover {
  animation: bfHoverSpin 1s ease forwards;
}

@keyframes bfHoverSpin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}