/* ==================================================
   VELIKA ARKANA
   HERO UVOD
================================================== */


.arcana-page{

position:relative;

}



.arcana-hero{

position:relative;

padding:80px 7% 60px;

display:flex;

justify-content:center;

align-items:center;

overflow:hidden;

}



.arcana-content{

position:relative;

z-index:2;

max-width:950px;

text-align:center;

}



/* mali naslov */


.arcana-small-title{

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

font-size:13px;

letter-spacing:5px;

text-transform:uppercase;

color:var(--gold);

margin-bottom:25px;

}



/* glavni naslov */


.arcana-title{

font-family:"Cormorant Garamond",serif;

font-size:70px;

font-weight:600;

letter-spacing:3px;

color:#35291d;

margin-bottom:30px;

}



/* ukras */


.arcana-symbol{

font-size:28px;

color:var(--gold);

letter-spacing:10px;

margin-bottom:30px;

}



/* tekst kartica */


.arcana-intro-box{

background:

linear-gradient(

135deg,

rgba(255,255,255,.85),

rgba(245,220,170,.55)

);


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


padding:45px 60px;


box-shadow:

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


}


.arcana-intro-box p{

font-family:"Cormorant Garamond",serif;

font-size:27px;

line-height:1.7;

color:var(--ink);

margin-bottom:20px;

}


.arcana-source{

font-size:12px;

letter-spacing:4px;

color:var(--gold);

margin-top:25px;

}
/* ==================================================
   VELIKA ARKANA
   LEBDEĆI SIMBOLI
================================================== */


.arcana-symbols{

position:absolute;

inset:0;

pointer-events:none;

overflow:hidden;

z-index:1;

}



.arcana-symbols span{

position:absolute;

font-size:35px;

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

text-shadow:

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

animation:

arcanaFloat 12s infinite ease-in-out;

}



/* pozicije simbola */


.arcana-symbols span:nth-child(1){

top:15%;

left:10%;

}



.arcana-symbols span:nth-child(2){

top:25%;

left:30%;

animation-delay:2s;

}



.arcana-symbols span:nth-child(3){

top:18%;

right:15%;

animation-delay:4s;

}



.arcana-symbols span:nth-child(4){

bottom:25%;

left:18%;

animation-delay:6s;

}



.arcana-symbols span:nth-child(5){

top:55%;

right:25%;

animation-delay:8s;

}



.arcana-symbols span:nth-child(6){

bottom:15%;

right:12%;

animation-delay:10s;

}





@keyframes arcanaFloat{


0%,100%{

transform:

translateY(0)
rotate(0deg);

opacity:.35;

}



50%{

transform:

translateY(-35px)
rotate(180deg);

opacity:1;

}


}
/* ==================================================
   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:grid;

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;

}





.arcana-card .card-subtitle{

font-family:"Cormorant Garamond",serif;

font-size:18px;

line-height:1.5;

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);

}





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


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

grid-column:2;

}



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

grid-column:3;

}





/* ==================================================
   TABLET
================================================== */


@media(max-width:1100px){


.arcana-grid{

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

}


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

grid-column:auto;

}


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

grid-column:auto;

}


}







/* ==================================================
   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;

}


}