/* ANIMACIJE */
@keyframes pulse {
  0% { box-shadow: 0 0 10px #BFA14A; }
  50% { box-shadow: 0 0 20px #BFA14A; }
  100% { box-shadow: 0 0 10px #BFA14A; }
}

@keyframes pulse-strong {
  0% { box-shadow: 0 0 12px #BFA14A; }
  50% { box-shadow: 0 0 28px #BFA14A, 0 0 10px #BFA14A; }
  100% { box-shadow: 0 0 12px #BFA14A; }
}

@keyframes fire-flicker {
    0%, 24%, 100% { 
        text-shadow: 0 0 10px #fff, 0 0 20px #ffae42, 0 0 30px #ffae42, 0 0 40px #ff8000, 0 0 50px #ff8000; 
    }
    25%, 75% { 
        text-shadow: 0 0 12px #fff, 0 0 25px #ffc87f, 0 0 35px #ffc87f, 0 0 45px #ff8000, 0 0 55px #ff9000; 
    }
    50% { 
        text-shadow: 0 0 8px #fff, 0 0 18px #ffae42, 0 0 28px #ffae42, 0 0 38px #ff4500, 0 0 48px #ff4500; 
    }
}

/* DODAJ OVO - MOBILNA ANIMACIJA VATRE */
@keyframes fire-flicker-mobile {
    0%, 100% { 
        text-shadow: 
            0 0 8px #fff,
            0 0 16px #ffae42,
            0 0 24px #ff8000,
            0 0 32px #ff4500;
    }
    25%, 75% { 
        text-shadow: 
            0 0 10px #fff,
            0 0 20px #ffc87f,
            0 0 30px #ff8000,
            0 0 40px #ff9000;
    }
    50% { 
        text-shadow: 
            0 0 6px #fff,
            0 0 14px #ffae42,
            0 0 22px #ff4500,
            0 0 30px #ff4500;
    }
}

@-webkit-keyframes fire-flicker-mobile {
    0%, 100% { 
        -webkit-text-shadow: 
            0 0 8px #fff,
            0 0 16px #ffae42,
            0 0 24px #ff8000,
            0 0 32px #ff4500;
    }
    25%, 75% { 
        -webkit-text-shadow: 
            0 0 10px #fff,
            0 0 20px #ffc87f,
            0 0 30px #ff8000,
            0 0 40px #ff9000;
    }
    50% { 
        -webkit-text-shadow: 
            0 0 6px #fff,
            0 0 14px #ffae42,
            0 0 22px #ff4500,
            0 0 30px #ff4500;
    }
}

@keyframes fire-glow-card {
    0%, 100% {
        box-shadow: 
            0 0 25px #BFA14A,
            0 0 40px #ffae42,
            0 0 60px #ff8000;
        border-color: #ffae42;
    }
    25% {
        box-shadow: 
            0 0 30px #ffae42,
            0 0 50px #ff8000,
            0 0 70px #ff4500;
        border-color: #ff8000;
    }
    50% {
        box-shadow: 
            0 0 35px #ff8000,
            0 0 55px #ff4500,
            0 0 75px #BFA14A;
        border-color: #ff4500;
    }
    75% {
        box-shadow: 
            0 0 30px #ff4500,
            0 0 50px #BFA14A,
            0 0 70px #ffae42;
        border-color: #ffae42;
    }
}

@keyframes fire-border-glow {
    0%, 100% {
        border-color: #ffae42;
    }
    25% {
        border-color: #ff8000;
    }
    50% {
        border-color: #ff4500;
    }
    75% {
        border-color: #ffae42;
    }
}

@keyframes outer-fire-glow {
    0%, 100% {
        box-shadow: 
            0 0 20px #ffae42,
            0 0 40px #ff8000,
            0 0 60px #ff4500;
        opacity: 0.8;
    }
    25% {
        box-shadow: 
            0 0 25px #ff8000,
            0 0 45px #ff4500,
            0 0 65px #BFA14A;
        opacity: 0.9;
    }
    50% {
        box-shadow: 
            0 0 30px #ff4500,
            0 0 50px #BFA14A,
            0 0 70px #ffae42;
        opacity: 1;
    }
    75% {
        box-shadow: 
            0 0 25px #BFA14A,
            0 0 45px #ffae42,
            0 0 65px #ff8000;
        opacity: 0.9;
    }
}

@keyframes sparkle {
  0% { opacity: 1; transform: scale(1) translateY(0) rotate(0deg); }
  100% { opacity: 0; transform: scale(1.5) translateY(-40px) rotate(25deg); }
}

@keyframes fall {
    0% {
        transform: translateY(-20px) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translateY(100vh) rotate(720deg);
        opacity: 0;
    }
}

/* VATRENI EFEKTI ZA TEKST */
.fire-text {
    animation: fire-flicker 2s linear infinite;
    color: #fff !important;
}

a.fire-text:hover {
    background: transparent !important;
    color: #fff !important;
    box-shadow: 0 0 15px #BFA14A;
}

/* VATRENI EFEKT ZA CIJELI OKVIR - ISPRAVLJENO */
.card-wrapper {
    border: 3px solid #BFA14A;
    border-radius: 20px;
    padding: 20px;
    max-width: 500px;
    width: 100%;
    background: #1A1A1A !important; /* CRNA POZADINA UNUTRA */
    margin: 10px;
    animation: fire-glow-card 3s ease-in-out infinite;
    position: relative; 
    z-index: 901; 
    overflow: hidden;
}

/* VANJSKI GLOW EFEKT - SAMO OKO RUBOVA */
.card-wrapper::before {
    content: '';
    position: absolute;
    top: -8px;
    left: -8px;
    right: -8px;
    bottom: -8px;
    border-radius: 28px;
    background: transparent;
    z-index: -1;
    animation: outer-fire-glow 4s ease-in-out infinite;
    opacity: 0.7;
    pointer-events: none;
}

/* DODATNI BORDER GLOW */
.card-wrapper::after {
    content: '';
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    border-radius: 24px;
    border: 2px solid transparent;
    background: linear-gradient(45deg, #ffae42, #ff8000, #ff4500, #BFA14A) border-box;
    -webkit-mask: 
        linear-gradient(#fff 0 0) padding-box, 
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: fire-border-glow 3s ease-in-out infinite;
    z-index: -1;
    pointer-events: none;
}

/* FORSIRAJ ANIMACIJE NA MOBILNIM UREDAJIMA - ISPRAVLJENO */
@media (max-width: 768px) {
    /* FORSIRAJ VATRU NA IMENU I PREZIMENU */
    h1.fire-text {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        animation: fire-flicker-mobile 2s linear infinite !important;
        -webkit-animation: fire-flicker-mobile 2s linear infinite !important;
    }
    
    /* FORSIRAJ VATRU NA PODNASLOVU */
    .subtitle.fire-text {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        animation: fire-flicker-mobile 2s linear infinite !important;
        -webkit-animation: fire-flicker-mobile 2s linear infinite !important;
    }
    
    /* FORSIRAJ CARD WRAPPER ANIMACIJU NA MOBILNIMA */
    .card-wrapper {
        animation: fire-glow-card-mobile 3s ease-in-out infinite !important;
        -webkit-animation: fire-glow-card-mobile 3s ease-in-out infinite !important;
    }
}

/* MOBILNI DETEKTOR KLASA */
body.mobile-device .fire-text {
    animation: fire-flicker-mobile 2s linear infinite !important;
    -webkit-animation: fire-flicker-mobile 2s linear infinite !important;
}

/* MOBILE FIRE EFFECTS KLASA */
body.mobile-fire-effects .fire-text {
    animation: fire-flicker-mobile 2s linear infinite !important;
    -webkit-animation: fire-flicker-mobile 2s linear infinite !important;
}

/* MOBILNE ANIMACIJE - JAKĹ E VERZIJE */
@keyframes fire-glow-card-mobile {
    0%, 100% {
        box-shadow: 
            0 0 25px #BFA14A,
            0 0 45px #ffae42,
            0 0 65px #ff8000,
            0 0 85px #ff4500;
        border-color: #ffae42;
    }
    25% {
        box-shadow: 
            0 0 30px #ffae42,
            0 0 50px #ff8000,
            0 0 70px #ff4500,
            0 0 90px #BFA14A;
        border-color: #ff8000;
    }
    50% {
        box-shadow: 
            0 0 35px #ff8000,
            0 0 55px #ff4500,
            0 0 75px #BFA14A,
            0 0 95px #ffae42;
        border-color: #ff4500;
    }
    75% {
        box-shadow: 
            0 0 30px #ff4500,
            0 0 50px #BFA14A,
            0 0 70px #ffae42,
            0 0 90px #ff8000;
        border-color: #ffae42;
    }
}

@-webkit-keyframes fire-glow-card-mobile {
    0%, 100% {
        -webkit-box-shadow: 
            0 0 25px #BFA14A,
            0 0 45px #ffae42,
            0 0 65px #ff8000,
            0 0 85px #ff4500;
        border-color: #ffae42;
    }
    25% {
        -webkit-box-shadow: 
            0 0 30px #ffae42,
            0 0 50px #ff8000,
            0 0 70px #ff4500,
            0 0 90px #BFA14A;
        border-color: #ff8000;
    }
    50% {
        -webkit-box-shadow: 
            0 0 35px #ff8000,
            0 0 55px #ff4500,
            0 0 75px #BFA14A,
            0 0 95px #ffae42;
        border-color: #ff4500;
    }
    75% {
        -webkit-box-shadow: 
            0 0 30px #ff4500,
            0 0 50px #BFA14A,
            0 0 70px #ffae42,
            0 0 90px #ff8000;
        border-color: #ffae42;
    }
}

/*
===========================================
VATRENI EFEKT ZA SLIKU (HEADSHOT) - KONAČNA PULSE VERZIJA
===========================================
*/

/* 1. Glavni sjaj na samom wrapperu - Smanjeno na 'pulse' */
.headshot-wrapper {
    animation: pulse 2s infinite; /* <-- KONAČNA VERZIJA */
}

/* 2. Vanjski, širi sjaj (prilagođen za krug) - SMANJENO */
.headshot-wrapper::before {
    content: '';
    position: absolute;
    top: -4px;     /* Bilo je -8px */
    left: -4px;    /* Bilo je -8px */
    right: -4px;   /* Bilo je -8px */
    bottom: -4px;  /* Bilo je -8px */
    border-radius: 50%;
    background: transparent;
    z-index: -1; 
    animation: outer-fire-glow 4s ease-in-out infinite;
    opacity: 0.4;  /* Bilo je 0.7 */
    pointer-events: none;
}

/* 3. Dodatni animirani rub (prilagođen za krug) - SMANJENO */
.headshot-wrapper::after {
    content: '';
    position: absolute;
    top: -2px;     /* Bilo je -4px */
    left: -2px;    /* Bilo je -4px */
    right: -2px;   /* Bilo je -4px */
    bottom: -2px;  /* Bilo je -4px */
    border-radius: 50%;
    border: 2px solid transparent;
    background: linear-gradient(45deg, #ffae42, #ff8000, #ff4500, #BFA14A) border-box;
    -webkit-mask: 
        linear-gradient(#fff 0 0) padding-box, 
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: fire-border-glow 3s ease-in-out infinite;
    z-index: -1; 
    pointer-events: none;
}

/*
===========================================
NOVA LAGANA VATRA ZA POTPIS
===========================================
*/
@keyframes light-yellow-flicker {
    0%, 100% { 
        text-shadow: 0 0 8px #fff, 0 0 16px #BFA14A, 0 0 24px #BFA14A, 0 0 32px #ffae42; 
    }
    50% { 
        text-shadow: 0 0 10px #fff, 0 0 20px #BFA14A, 0 0 30px #ffae42, 0 0 40px #ffae42; 
    }
}

@-webkit-keyframes light-yellow-flicker {
    0%, 100% { 
        -webkit-text-shadow: 0 0 8px #fff, 0 0 16px #BFA14A, 0 0 24px #BFA14A, 0 0 32px #ffae42; 
    }
    50% { 
        -webkit-text-shadow: 0 0 10px #fff, 0 0 20px #BFA14A, 0 0 30px #ffae42, 0 0 40px #ffae42; 
    }
}
/*
===========================================
NOVA ANIMACIJA DIMA ZA GUMBE ZA DIJELJENJE
===========================================
*/
@keyframes smoke-pulse {
  0% {
    /* Početno stanje: lagani sivi sjaj */
    box-shadow: 0 0 10px #AAAAAA;
    border-color: #AAAAAA;
  }
  50% {
    /* Sredina: jači bijeli sjaj, kao dim */
    box-shadow: 0 0 18px #FFFFFF, 0 0 10px #AAAAAA;
    border-color: #FFFFFF;
  }
  100% {
    /* Povratak na početno stanje */
    box-shadow: 0 0 10px #AAAAAA;
    border-color: #AAAAAA;
  }
}

@-webkit-keyframes smoke-pulse {
  0% {
    -webkit-box-shadow: 0 0 10px #AAAAAA;
    border-color: #AAAAAA;
  }
  50% {
    -webkit-box-shadow: 0 0 18px #FFFFFF, 0 0 10px #AAAAAA;
    border-color: #FFFFFF;
  }
  100% {
    -webkit-box-shadow: 0 0 10px #AAAAAA;
    border-color: #AAAAAA;
  }
}

/*
===========================================
NOVA ANIMACIJA ZA BOŽIĆNI GUMB (BIJELI SJAJ)
===========================================
*/
@keyframes white-flicker {
  0%, 100% { 
    text-shadow: 0 0 8px #fff, 0 0 16px #fff, 0 0 24px #e0e0e0; 
  }
  50% { 
    text-shadow: 0 0 12px #fff, 0 0 20px #fff, 0 0 30px #c0c0c0; 
  }
}

@-webkit-keyframes white-flicker {
  0%, 100% { 
    -webkit-text-shadow: 0 0 8px #fff, 0 0 16px #fff, 0 0 24px #e0e0e0; 
  }
  50% { 
    -webkit-text-shadow: 0 0 12px #fff, 0 0 20px #fff, 0 0 30px #c0c0c0; 
  }
}

/*
===========================================
NOVA ANIMACIJA ZA WHATSAPP GUMB (ZELENI PULS)
===========================================
*/
@keyframes green-pulse {
  0% { box-shadow: 0 0 10px #25D366; border-color: #FFFFFF; }
  50% { box-shadow: 0 0 20px #25D366, 0 0 10px #FFFFFF; border-color: #FFFFFF; }
  100% { box-shadow: 0 0 10px #25D366; border-color: #FFFFFF; }
}

@-webkit-keyframes green-pulse {
  0% { -webkit-box-shadow: 0 0 10px #25D366; border-color: #FFFFFF; }
  50% { -webkit-box-shadow: 0 0 20px #25D366, 0 0 10px #FFFFFF; border-color: #FFFFFF; }
  100% { -webkit-box-shadow: 0 0 10px #25D366; border-color: #FFFFFF; }
}

/*
===========================================
NOVA SMANJENA SMOKE EFFECT ANIMACIJA
===========================================
*/
@keyframes subtle-smoke-effect {
  0% {
    box-shadow: 
      0 0 8px #FFFFFF,
      0 0 12px #AAAAAA;
    border-color: #FFFFFF;
  }
  25% {
    box-shadow: 
      0 0 10px #FFFFFF,
      0 0 15px #CCCCCC;
    border-color: #CCCCCC;
  }
  50% {
    box-shadow: 
      0 0 12px #FFFFFF,
      0 0 18px #EEEEEE;
    border-color: #FFFFFF;
  }
  75% {
    box-shadow: 
      0 0 10px #FFFFFF,
      0 0 15px #CCCCCC;
    border-color: #CCCCCC;
  }
  100% {
    box-shadow: 
      0 0 8px #FFFFFF,
      0 0 12px #AAAAAA;
    border-color: #FFFFFF;
  }
}

@-webkit-keyframes subtle-smoke-effect {
  0% {
    -webkit-box-shadow: 
      0 0 8px #FFFFFF,
      0 0 12px #AAAAAA;
    border-color: #FFFFFF;
  }
  25% {
    -webkit-box-shadow: 
      0 0 10px #FFFFFF,
      0 0 15px #CCCCCC;
    border-color: #CCCCCC;
  }
  50% {
    -webkit-box-shadow: 
      0 0 12px #FFFFFF,
      0 0 18px #EEEEEE;
    border-color: #FFFFFF;
  }
  75% {
    -webkit-box-shadow: 
      0 0 10px #FFFFFF,
      0 0 15px #CCCCCC;
    border-color: #CCCCCC;
  }
  100% {
    -webkit-box-shadow: 
      0 0 8px #FFFFFF,
      0 0 12px #AAAAAA;
    border-color: #FFFFFF;
  }
}

/* DODATAK: MOBILNA ANIMACIJA ZA HEADSHOT */
@media (max-width: 768px) {
    .headshot-wrapper {
        animation: pulse 2s infinite !important;
        -webkit-animation: pulse 2s infinite !important;
    }
}