/*
========================================
FOUC PREVENCIJA - KRITIČNO ZA BARBA.JS
========================================
Ova logika sprečava prikazivanje elemenata pre nego što su spremni.
Rešava problem kada C slovo i ring ne budu vidljivi tokom Barba tranzicija.
*/


@media (max-width: 768px) {
    /* Cherry sekcija - normalna visina, statična */
    #cherry-intro,
    .cherry-animation-section {
        position: relative;
        width: 100%;
        height: 100svh !important;
        min-height: 100svh !important;
        max-height: 100svh !important;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    /* Fallback za starije browsere */
    @supports not (height: 100svh) {
        #cherry-intro,
        .cherry-animation-section {
            height: 100vh !important;
            min-height: 100vh !important;
            max-height: 100vh !important;
        }
    }
    
    /* Wrapper - jednostavan, centriran */
    .cherry-content-wrapper {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    /* SVG - vidljiv odmah, manji scale */
    #cherry-svg {
        transform: scale(0.65) !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    /* Zakomentarisano jer smo ponovo aktivirali animaciju slova na mobilnom */
    /* Sva slova - vidljiva i normalno pozicionirana */
    /* #cherry-intro #c-letter,
    #cherry-intro #h-letter,
    #cherry-intro #e-letter,
    #cherry-intro #r1-letter,
    #cherry-intro #r2-letter,
    #cherry-intro #y-letter {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateY(-50px) !important;  
    }*/
    
    /* Cherry ikonica - kao tačka iza Y (na kraju reči) */
    /* #cherry-intro #g-cherryIcon {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateX(950px) translateY(170px) scale(0.35) !important;
    } */
    
    /* Slogan i arrow - vidljivi odmah */
    #cherry-intro .slogan,
    #cherry-intro #arrowDown {
        opacity: 1 !important;
        visibility: visible !important;
    }
}

/* INICIJALNO: Sakrij SVG i sve elemente dok JavaScript ne postavi 'cherry-ready' klasu */
body:not(.cherry-ready) #cherry-intro #cherry-svg {
    opacity: 0 !important;
    visibility: hidden !important;
}

body:not(.cherry-ready) #cherry-intro #c-letter,
body:not(.cherry-ready) #cherry-intro #g-cherryIcon {
    opacity: 0 !important;
    visibility: hidden !important;
}

/* KADA JE SPREMNO: Prikaži C slovo i cherry ikonu */
body.cherry-ready #cherry-intro #c-letter,
body.cherry-ready #cherry-intro #g-cherryIcon {
    opacity: 1 !important;
    visibility: visible !important;
    transition: opacity 0.3s ease;
}

/* SVG glavni kontejner */
body.cherry-ready #cherry-intro #cherry-svg {
    opacity: 1 !important;
    visibility: visible !important;
}

/*
========================================
OSNOVNE POSTAVKE ZA MOBILNE UREĐAJE
========================================
*/
/* Smooth scrolling setup - već podešeno u mobilnom bloku gore */

/*
========================================
SAKRIVANJE ELEMENATA PRE INICIJALIZACIJE
========================================
Ova logika osigurava da se animacija ne vidi dok se potpuno ne učita.

Kako funkcioniše:
1. Na početku su svi elementi sakriveni (visibility: hidden)
2. Kada se JavaScript učita, dodaje se 'cherry-ready' klasa na body
3. Tada se elementi prikazuju i animacija počinje
*/

/* Sakrivanje SVG elemenata pre inicijalizacije */
#cherry-intro #cherry-svg,
#cherry-intro .slogan,
#cherry-intro #arrowDown,
#cherry-intro #mobile-scroll-hint {
    visibility: hidden !important;
}

/* Prikazivanje SVG kada je animacija spremna za pokretanje */
body.cherry-ready #cherry-intro #cherry-svg {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Slogan i arrow ostaju sakriveni dok se animacija ne pokrene */
body.cherry-ready #cherry-intro .slogan,
body.cherry-ready #cherry-intro #arrowDown,
body.cherry-ready #cherry-intro #mobile-scroll-hint {
    visibility: visible !important;
}

/* Tokom scroll animacije - automatski prikazivanje */
body.cherry-ready.is-animating #cherry-intro .slogan,
body.cherry-ready.is-animating #cherry-intro #arrowDown {
    opacity: 1 !important;
}

/*Sprečava FOUC tokom Barba tranzicija */
body:not(.cherry-ready) #cherry-intro #animatedCherryContainer {
    opacity: 0;
    visibility: hidden;
}

body.cherry-ready #cherry-intro #animatedCherryContainer {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease, visibility 0s;
}

img, svg {
    image-rendering: auto;              /* Automatski kvalitet slike */
    -webkit-font-smoothing: antialiased; /* Smooth tekst na Webkit browserima */
    -moz-osx-font-smoothing: grayscale;  /* Smooth tekst na Firefox/Mac */
}

/*
========================================
KONTEJNERI ZA ANIMACIJU
========================================
*/

/* Glavni kontejner za cherry animaciju */
#animatedCherryContainer {
    width: 100%;
    height: 100%;
    height: 100dvh; /* Fallback za mobilne */
    position: relative;
    z-index: 10;
    transform-origin: 50% 50%; /* Centar za transformacije */
}

/* Sekcija koja sadrži celu animaciju - full screen */
#cherry-intro,
.cherry-animation-section {
    position: relative;
    width: 100%;
    height: 100svh !important; /* !important da spreči bilo kakvu promenu */
    min-height: 100svh !important; /* Garantuje minimalnu visinu */
    background: #ffffff;
    /* overflow: hidden je uklonjen na mobilnom - Samsung Internet ne slika SVG <g>
       elemente koji su translatovani van overflow:hidden paint boundary-a.
       Clip je prebačen na cherry-content-wrapper (samo na mobilnom via media query) */
    overflow: hidden;
    z-index: 12;
}

@media (max-width: 768px) {
    #cherry-intro,
    .cherry-animation-section {
        overflow: visible;
    }
    /* Zadržavamo clip na wrapperima koji ne sadrže animirana slova */
    .cherry-content-wrapper {
        overflow: visible;
    }
}

/* Wrapper za centiranje sadržaja */
.cherry-content-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* KRITIČNO: Garantuje da cherry-intro zauzima 100vh ODMAH, bez čekanja na JS */
html body #cherry-intro {
    height: 100svh !important;
    min-height: 100svh !important;
}

/* Dodatna zaštita od layout shift-a */
body:not(.cherry-ready) #cherry-intro {
    height: 100svh !important;
    min-height: 100svh !important;
    background: #ffffff; /* Beli background da ne bude prazan prostor */
}

/*
========================================
GLAVNI SVG - RESPONSIVNO SKALIRANJE
========================================
Ovaj SVG sadrži sva slova i cherry ikonu.
Automatski se prilagodi različitim veličinama ekrana.

Važne postavke koje možete menjati:
- transform: scale() - osnovna veličina SVG-a
- transform-origin - tačka oko koje se vrše transformacije
*/
#cherry-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: visible;                    /* Dozvoli da elementi izlaze van SVG granica */
    shape-rendering: geometricPrecision;  /* Oštri oblici */
    text-rendering: geometricPrecision;   /* Oštar tekst */
    display: block;
    transform-origin: 50% 45%;            /* Centar transformacije (malo levo od centra) */
    transform: scale(0.72);               /* MOBILNI: veći scale za bolje iskustvo */
}

/* Stilovi za SVG putanje (slova) */
.ch-path {
    fill: #000000;                        /* Crna boja slova */
    shape-rendering: geometricPrecision;  /* Oštri krajevi */
    vector-effect: non-scaling-stroke;    /* Stroke se ne menja sa scale */
}

/* Osnovne transformacije za SVG grupe */
#cherry-svg .fixed-element,
#cherry-svg g {
    transform-box: fill-box;    /* Transformacije relativno prema elementu */
    transform-origin: 50% 50%;  /* Centar elementa */
}

/*
========================================
SLOGAN - TEKST ISPOD LOGO-A
========================================
*/
.slogan {
    position: absolute;
    bottom: 38%;
    font-size: 5vw;
    font-weight: 700;
    color: #000000;
    letter-spacing: 6px;
    margin: 0;
    padding: 0 1rem;
    white-space: normal;
    text-align: center;
    will-change: transform, opacity;
    z-index: 1;
    pointer-events: none;
}

/* Stilovi za linije slogana na mobilnom */
.slogan .slogan-line1,
.slogan .slogan-line2 {
    display: block;
    line-height: 1.05; 
}

.slogan .slogan-line1 {
    margin-bottom: 0.25rem;
}

/*
========================================
ARROW (STRELICA) - POZIV ZA AKCIJU
========================================
Strelica na dnu stranice koja poziva korisnika da skroluje.
Automatski se prilagodi veličini uređaja.
*/
/* Osnovno pozicioniranje i stilovi */
#arrowDown {
    position: absolute;
    bottom: 10%;              /* 5% od dna ekrana */
    font-size: 2rem;         /* Veličina na mobilnom */
    color: #000;
    cursor: pointer;
    will-change: transform, opacity; /* Optimizacija za animacije */
}

/* SVG ikonica unutar arrow-a */
#arrowDown svg {
    display: block;
    width: 1.8rem;  /* Mobilna veličina */
    height: auto;   /* Automatska visina */
}

/*
========================================
ARROW ANIMACIJA - "BOUNCE" EFEKAT
========================================
Strelica se pomera gore-dole da privuče pažnju.

Parametri koji se mogu menjati:
- animation: arrowBounce 2s - trajanje (2 sekunde)
- ease-in-out - tip animacije
- infinite - beskonačno ponavljanje
- translateY(8px) - koliko daleko se pomera (8px)
*/
#arrow-icon {
    animation: arrowBounce 2s ease-in-out infinite;
    transform-origin: center;
    transform-box: fill-box;
}

/* Definisanje bounce animacije */
@keyframes arrowBounce {
    0%, 100% { transform: translateY(0); }    /* Početak i kraj - normalna pozicija */
    50% { transform: translateY(8px); }       /* Sredina - pomereno dole */
}

/* Brža animacija kada korisnik hover-uje */
#arrowDown:hover #arrow-icon {
    animation: arrowBounce 0.6s ease-in-out infinite; /* Brže - 0.6s umesto 2s */
}

/*
========================================
MOBILNI SCROLL HINT - "SKROLUJ I ISTRAŽI"
========================================
Poruka koja se prikazuje SAMO na mobilnim uređajima.
Poziva korisnika da skroluje jer možda ne zna da treba.

Sakrije se automatski kada počne scroll animacija.
*/
#mobile-scroll-hint {
    position: absolute;
    bottom: 12%;
    left: 50%;
    transform: translateX(-50%);              /* Centriranje */
    display: flex;
    align-items: center;                      /* Vertikalno poravnavanje */
    gap: 0.4rem;
    font-size: 1rem;
    font-weight: 700;
    color: #000000;
    text-transform: uppercase;
    letter-spacing: 4px;
    white-space: nowrap;                     /* Sve u jednom redu */
    will-change: transform, opacity;          /* Optimizacija za animacije */
    z-index: 1;
}

/* Strelica u scroll hint-u */
#mobile-scroll-hint .hint-arrow {
    width: 1.5rem;
    height: 2.1rem;
    color: #e8235b;
}

#mobile-scroll-hint .hint-arrow svg {
    width: 100%;
    height: 100%;
}

/* Animacija hint strelice (ista kao glavna arrow) */
#mobile-scroll-hint .hint-arrow #hint-arrow-icon {
    animation: arrowBounce 2s ease-in-out infinite;
    transform-origin: center;
    transform-box: fill-box;
}

/*
========================================
VISIBILITY STATES - KONTROLA PRIKAZIVANJA
========================================
Ova logika kontroliše kada se koji elementi prikazuju tokom animacije.

Redosled:
1. Početno: svi sakriveni
2. cherry-ready klasa: SVG postaje vidljiv
3. is-animating klasa: slogan i arrow se fade-in tokom scroll-a
*/

/* Početno stanje - sakriveni elementi */
#cherry-intro .fixed-element,
#cherry-intro .cherry-icon-wrapper {
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.5s ease-out; /* Smooth prelaz */
}

/* Smooth tranzicije za slova tokom animacije */
#cherry-intro #h-letter,
#cherry-intro #e-letter,
#cherry-intro #r1-letter,
#cherry-intro #r2-letter,
#cherry-intro #y-letter,
#cherry-intro #g-cherryIcon {
    transition: opacity 0.4s ease-out;
}

/* Samsung Internet paint-culling fix - SAMO MOBILNI:
   will-change forsira GPU compositor layer čak i kada je element daleko van viewporta.
   Bez ovoga, Samsung ne slika elemente na -1500vh i oni su nevidljivi dok ne dođe repaint.
   NE koristimo transform: translateZ(0) jer will-change vec postiže isti efekat,
   a translateZ(0) bi interferisao sa GSAP animacijama na desktopu. */
@media (max-width: 768px) {
    #cherry-intro #h-letter,
    #cherry-intro #e-letter,
    #cherry-intro #r1-letter,
    #cherry-intro #r2-letter,
    #cherry-intro #y-letter {
        will-change: transform;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }
}

/* Scoped to cherry-ready state (homepage) */
/* body.cherry-ready .cherry-animation-section,
body.cherry-ready #cherry-intro {
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
} */

/* 
========================================
MOBILNI CSS POZICIONIRANJE SLOVA
========================================
Ovaj CSS blok kontroliše početne pozicije slova na mobilnim uređajima.
Koristi se umesto data atributa za potpunu kontrolu na mobilnom.

Kako funkcioniše:
1. Svako slovo se postavlja van ekrana u određenom smeru
2. GSAP animacija zatim vodi slova ka finalnim pozicijama
3. Slova dolaze sa različitih strana = dinamična animacija

Vrednosti koje možete menjati:
- translateX: horizontalno pomeranje (negativno = levo, pozitivno = desno)
- translateY: vertikalno pomeranje (negativno = gore, pozitivno = dole) 
- scale: veličina slova (veći broj = veće slovo)

Primeri:
- translateX(-60vw) = 60% širine ekrana levo od centra
- translateY(-800vh) = 800% visine ekrana gore od centra
- scale(16) = slovo je 16 puta veće od originalne veličine
*/
@media (max-width: 768px) {
    /* C SLOVO - VIDLJIVO U VIEWPORTU, MALO ISPOD CENTRA */
    #cherry-intro #c-letter {
        /* transform: translateX(0px) translateY(80px) scale(7.5); */
        transform: translateX(-120px) translateY(-600px) scale(7.5);
        transform-origin: center center;
    }

    
    /* H SLOVO - #1 ODOZGO */
    #cherry-intro #h-letter {
        transform: translateX(0) translateY(-1500vh) scale(20);
        transform-origin: center center;
    }
    
    /* E SLOVO - #2 ODOZDO */
    #cherry-intro #e-letter {
        transform: translateX(0) translateY(800vh) scale(20);
        transform-origin: center center;
    }
    
    /* R1 SLOVO (prvo R) - #3 ODOZGO */
    #cherry-intro #r1-letter {
        transform: translateX(0) translateY(-800vh) scale(18);
        transform-origin: center center;
    }
    
    /* R2 SLOVO (drugo R) - #4 ODOZDO */
    #cherry-intro #r2-letter {
        transform: translateX(0) translateY(800vh) scale(15);
        transform-origin: center center;
    }
    
    /* Y SLOVO - #5 ODOZGO */
    #cherry-intro #y-letter {
        transform: translateX(0) translateY(-1200vh) scale(35);
        transform-origin: center center;
    }
    
    /* CHERRY IKONICA - #6 ODOZDO (centar) */
    #cherry-intro #g-cherryIcon {
        /* transform: translateX(0vw) translateY(800vh) scale(12);
        transform-origin: center center; */
    }
}

/*
========================================
TABLET I DESKTOP - RESPONSIVNI STILOVI
========================================
*/
@media (min-width: 768px) {
    .slogan {
        font-size: 2vw;           /* Manji font na većim ekranima */
        letter-spacing: 14px;     /* Veći razmak između slova */
        bottom: 40%;              /* Više ka vrhu */
        padding: 0;               /* Ukloni padding */
        white-space: nowrap;      /* Sve u jednom redu */
    }
    
    /* Na većim ekranima obe linije u istom redu */
    .slogan .slogan-line1,
    .slogan .slogan-line2 {
        display: inline;     /* U istom redu umesto blok */
        line-height: normal; /* Normalna visina reda */
    }
    
    .slogan .slogan-line1 {
        margin-bottom: 0;    /* Ukloni razmak jer su u istom redu */
    }
    
    /* Veća veličina strelice za tablet i desktop */
    #arrowDown svg {
        width: 2.75rem; /* Veća veličina */
    }
    
    /* SAKRIJ mobilni scroll hint na tablet/desktop */
    #mobile-scroll-hint {
        display: none !important; /* !important da JavaScript ne može da override */
    }
}

/*
========================================
RESPONSIVNO SKALIRANJE SVG-a
========================================
Različite veličine SVG-a za različite uređaje:
- Mobilni (do 768px): scale(0.72) - najveći
- Tablet (769px-1024px): scale(0.6) - srednji
- Desktop (1025px+): scale(0.5) - najmanji

Možete menjati ove vrednosti ako želite da promenite veličinu animacije.
*/

/* Tablet: manji od mobilnog ali veći od desktop */
@media (min-width: 769px) and (max-width: 1024px) {
    #cherry-svg {
        transform: scale(0.6);
    }
    .slogan {        
        bottom: 35%;
    }
}

/* Desktop: najmanji scale za velike ekrane */
@media (min-width: 1025px) {
    #cherry-svg {
        transform: scale(0.5);
        transform-origin: 50% 45%;
    }
    .slogan {        
        bottom: 30%;
    }
}

/*
========================================
FINALNA VIDLJIVOST STANJA
========================================
*/

/* Kada je animacija spremna */
body.cherry-ready #cherry-intro .fixed-element,
body.cherry-ready #cherry-intro .cherry-icon-wrapper {
    visibility: visible;
    opacity: 1;
}

/* Tokom aktivne animacije */
body.is-animating #cherry-intro .fixed-element {
    opacity: 1;
}

/* ========================================================================
   SCROLL EXPLORE OVERLAY - Početni Screen Cover za Homepage
   ========================================================================
   
   POZICIONIRANJE:
   - Inline stilovi iz JavaScript-a imaju prioritet (initializeScrollExploreOverlay)
   - CSS služi kao fallback za slučaj da JavaScript kasni
   
   KONTROLA:
   - display: none inicijalno (spreči FOUC)
   - JavaScript dodaje inline stilove i pokreće animaciju
   - GSAP kontroliše y transform i opacity tokom scroll animacije
   
   POZIVA SE IZ:
   - enableScrollAfterCherryReady() funkcije
   - Barba.js beforeEnter hook (tokom SPA navigacije)
   ======================================================================== */

.scroll-explore-overlay {    
    
    /* Fallback pozicioniranje (JavaScript override-uje inline) */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 12;  /* Ispod headera (10000) */
    
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    will-change: opacity, transform;  /* Optimizacija za GSAP animaciju */
}

/* MOBILNI: Sakrij overlay potpuno */
@media (max-width: 768px) {
    .scroll-explore-overlay {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }
}

/* Sadržaj overlay-a */
.scroll-explore-overlay .scroll-explore-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    text-align: center;
}

/* Cherry-intro sekcija - normalan flow (overlay je fixed pa ne treba margin) */
#cherry-intro {
    position: relative;
    z-index: 1; /* Ispod overlay-a */
}

/* Responsivno - tekst i strelica */
.scroll-explore-text {
    font-size: 1.5rem;
    font-weight: 500;
    color: #000;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    line-height: 1;
    margin: 0;
}

.scroll-explore-arrow {
    width: 44px;
    height: 62px;
    color: #000;
    animation: scrollBounce 2s ease-in-out infinite;
}

.scroll-explore-arrow svg {
    width: 100%;
    height: 100%;
}

/* Bounce animacija za strelicu */
@keyframes scrollBounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(15px);
    }
}

/* Responsivno */
@media (max-width: 768px) {
    .scroll-explore-text {
        font-size: 1.2rem;
        letter-spacing: 0.1em;
    }
    
    .scroll-explore-arrow {
        width: 36px;
        height: 52px;
    }
    
    .pin-spacer {
        background-color: #ffffff !important;
    }

}

@media (max-width: 480px) {
    .scroll-explore-text {
        font-size: 1rem;
    }
    
    .scroll-explore-arrow {
        width: 32px;
        height: 48px;
    }
}