/* ==========================================================
   LUMEN SANUS
   VELIKA ARKANA.HTML

   VELIKA ARKANA· CARL GUSTAV JUNG

   CSS BEZ KARTICA I MANDALA
========================================================== */


/* ==========================================================
   OSNOVNO
========================================================== */

.analytic-main {

    position: relative;

    width:100%;

    margin-top:110px;

    overflow:hidden;

    background:rgba(248,242,231,.55);

    color:var(--ink);

}



/* ==========================================================
   HERO
========================================================== */


.analytic-hero {

    position: relative;

    min-height:75vh;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:
        120px 30px 110px;

    background:

        radial-gradient(
            circle at 50% 45%,
            var(--paper-dark) 0%,
            var(--paper) 58%,
            var(--paper) 100%
        );

    text-align:center;

    overflow:hidden;
}



.analytic-hero::before {

    content:"";

    position:absolute;

    width:
        680px;

    height:
        680px;

    top:50%;

    left:50%;

    transform:
        translate(-50%,-50%);

    border-radius:50%;

    border:
        1px solid rgba(176,138,82,.18);

    box-shadow:

        0 0 70px rgba(176,138,82,.08),

        inset 0 0 70px rgba(176,138,82,.05);

    pointer-events:none;
}



.analytic-hero::after {

    content:"✦";

    position:absolute;

    bottom:35px;

    left:50%;

    transform:
        translateX(-50%);

    color:
        var(--gold);

    font-size:
        14px;

    opacity:.65;
}



.analytic-hero-inner {

    position:relative;

    z-index:2;

    width:
        min(900px,100%);

    margin:auto;
}



/* ==========================================================
   EYEBROW
========================================================== */


.analytic-main .eyebrow {

    margin:
        0 0 18px;

    color:
        var(--gold);

    font-size:
        .72rem;

    font-weight:
        600;

    letter-spacing:
        .24em;

    line-height:
        1.5;

    text-transform:
        uppercase;
}

/* ==========================================================
   HERO NASLOV
========================================================== */


.analytic-hero h1 {

    margin:
        0 0 30px;

    color:
        var(--ink);

    font-family:

        "Cormorant Garamond",
        Georgia,
        serif;

    font-size:

        clamp(3.3rem,8vw,6.4rem);

    font-weight:
        400;

    line-height:
        .95;

    letter-spacing:
        .02em;
}



.analytic-lead {

    width:
        min(750px,100%);

    margin:
        0 auto 30px;

    color:
        var(--brown);

    font-family:

        "Cormorant Garamond",
        Georgia,
        serif;

    font-size:

        clamp(1.35rem,2.5vw,1.8rem);

    line-height:
        1.55;
}



.analytic-intro-text {

    width:
        min(760px,100%);

    margin:auto;

    color:
        var(--brown);

    font-size:
        .97rem;

    line-height:
        1.9;
}



/* ==================================================
   GALERIJA VELIKE ARKANE
================================================== */


.arcana-gallery{

padding:80px 7% 120px;

text-align:center;

}




.arcana-section-label{

font-family:"Inter",sans-serif;

font-size:13px;

letter-spacing:5px;

text-transform:uppercase;

color:var(--gold);

margin-bottom:20px;

}



.arcana-gallery-title{

font-family:"Cormorant Garamond",serif;

font-size:55px;

font-weight:600;

color:#35291d;

margin-bottom:70px;

}





.arcana-grid{

max-width:1400px;

margin:auto;

display:grid;

grid-template-columns:repeat(4,1fr);

gap:40px;

}





/* ================= KARTE ================= */


.arcana-card{

display:block;

padding:18px;

background:

linear-gradient(

135deg,

#fffaf0,

#ead7af

);


border:1px solid rgba(176,138,82,.45);


box-shadow:

0 25px 60px rgba(70,40,20,.18);


position:relative;

overflow:hidden;

transition:.5s;

}




.arcana-card::before{

content:"✦";

position:absolute;

top:12px;

right:15px;

font-size:25px;

color:rgba(176,138,82,.3);

}





.arcana-card img{

width:100%;

height:auto;

display:block;

transition:.7s;

}





.arcana-card h3{

font-family:"Cormorant Garamond",serif;

font-size:30px;

color:var(--gold);

margin-top:20px;
text-align:center;
}





.arcana-card .card-subtitle{

font-family:"Cormorant Garamond",serif;

font-size:18px;

line-height:1.5;
text-align:center;
color:var(--brown);

display:block;

}





.arcana-card:hover{

transform:translateY(-15px);

box-shadow:

0 40px 90px rgba(176,138,82,.45);

}





.arcana-card:hover img{

transform:scale(1.04);

}
/* ==================================================
   POSLEDNJE DVE KARTE - CENTAR
================================================== */


.arcana-card.last-row:nth-last-child(2){

grid-column:2;

}



.arcana-card.last-row:last-child{

grid-column:3;

}
/* ==================================================
   ANIMACIJA POJAVLJIVANJA KARATA
================================================== */


.arcana-card{

opacity:0;

animation:

arcanaCardShow .8s ease forwards;

}



.arcana-card:nth-child(1){animation-delay:.1s;}
.arcana-card:nth-child(2){animation-delay:.2s;}
.arcana-card:nth-child(3){animation-delay:.3s;}
.arcana-card:nth-child(4){animation-delay:.4s;}
.arcana-card:nth-child(5){animation-delay:.5s;}
.arcana-card:nth-child(6){animation-delay:.6s;}
.arcana-card:nth-child(7){animation-delay:.7s;}
.arcana-card:nth-child(8){animation-delay:.8s;}
.arcana-card:nth-child(9){animation-delay:.9s;}
.arcana-card:nth-child(10){animation-delay:1s;}
.arcana-card:nth-child(11){animation-delay:1.1s;}
.arcana-card:nth-child(12){animation-delay:1.2s;}
.arcana-card:nth-child(13){animation-delay:1.3s;}
.arcana-card:nth-child(14){animation-delay:1.4s;}
.arcana-card:nth-child(15){animation-delay:1.5s;}
.arcana-card:nth-child(16){animation-delay:1.6s;}
.arcana-card:nth-child(17){animation-delay:1.7s;}
.arcana-card:nth-child(18){animation-delay:1.8s;}
.arcana-card:nth-child(19){animation-delay:1.9s;}
.arcana-card:nth-child(20){animation-delay:2s;}
.arcana-card:nth-child(21){animation-delay:2.1s;}
.arcana-card:nth-child(22){animation-delay:2.2s;}



@keyframes arcanaCardShow{


from{

opacity:0;

transform:

translateY(50px);

}



to{

opacity:1;

transform:

translateY(0);

}


}

/* ==================================================
   MISTIČNI SJАJ KARATA
================================================== */


.arcana-card::after{

content:"";

position:absolute;

inset:-80%;

background:

linear-gradient(

120deg,

transparent,

rgba(255,255,255,.45),

transparent

);


transform:rotate(25deg);

left:-120%;

transition:1s;

}





.arcana-card:hover::after{

left:120%;

}





.arcana-card:hover::before{

color:#dfc18a;

text-shadow:

0 0 20px rgba(176,138,82,.9);

}
/* ==================================================
   MOBILNI
================================================== */


@media(max-width:700px){


.arcana-gallery{

padding:60px 5%;

}



.arcana-gallery-title{

font-size:40px;

}



.arcana-grid{

grid-template-columns:1fr;

gap:30px;

}



.arcana-card{

padding:15px;

}



.arcana-card h3{

font-size:26px;

}


}
/* ==================================================
   MISTIČNE ZVEZDICE POZADINE
================================================== */



.stars-bg{

position:fixed;

inset:0;

pointer-events:none;

overflow:hidden;

z-index:0;

}


header{

position:fixed;

z-index:100;

}


main,
footer{

position:relative;

z-index:2;

}
.stars-bg span{

position:absolute;

color:rgba(176,138,82,.28);

text-shadow:
0 0 15px rgba(176,138,82,.5),
0 0 30px rgba(176,138,82,.35);

animation:starFloat 12s ease-in-out infinite;

}

.stars-bg span:nth-child(1){top:3%;left:5%;font-size:65px;}
.stars-bg span:nth-child(2){top:8%;left:25%;font-size:45px;}
.stars-bg span:nth-child(3){top:12%;right:12%;font-size:80px;}
.stars-bg span:nth-child(4){top:20%;left:55%;font-size:55px;}
.stars-bg span:nth-child(5){top:28%;right:35%;font-size:70px;}
.stars-bg span:nth-child(6){top:38%;left:10%;font-size:48px;}
.stars-bg span:nth-child(7){top:45%;left:40%;font-size:85px;}
.stars-bg span:nth-child(8){top:52%;right:15%;font-size:60px;}
.stars-bg span:nth-child(9){top:60%;left:65%;font-size:75px;}
.stars-bg span:nth-child(10){top:68%;left:20%;font-size:50px;}
.stars-bg span:nth-child(11){top:75%;right:40%;font-size:65px;}
.stars-bg span:nth-child(12){bottom:5%;left:8%;font-size:90px;}
.stars-bg span:nth-child(13){bottom:10%;left:35%;font-size:55px;}
.stars-bg span:nth-child(14){bottom:15%;right:8%;font-size:80px;}
.stars-bg span:nth-child(15){bottom:25%;left:60%;font-size:60px;}
.stars-bg span:nth-child(16){bottom:35%;right:28%;font-size:70px;}
.stars-bg span:nth-child(17){top:15%;left:75%;font-size:50px;}
.stars-bg span:nth-child(18){top:82%;left:82%;font-size:65px;}
.stars-bg span:nth-child(19){top:48%;left:82%;font-size:75px;}
.stars-bg span:nth-child(20){bottom:45%;left:3%;font-size:60px;}

@keyframes starFloat{

0%,100%{
transform:translateY(0) rotate(0deg);
opacity:.25;
}

50%{
transform:translateY(-35px) rotate(180deg) scale(1.2);
opacity:.9;
}

}