*{margin:0;padding:0;box-sizing:border-box}
:root{
    /*Colours*/
  --black:#050505;
  --black-darkened: #020202;
  --background-header:#0c0c0cd8;
  --background-header-fade:#0c0c0c00;
  --background: #303030;
  --panel:#0c0c0c;
  --accent:#a1bdd1;
  --accent-strong: #c5f02c;
  --white:#e8e6e1;
  --muted:#9a9a95;
  --muted-light:#b0b0aa;
  --border:#1a1a1a;
  --border-light:#252525;

  /*Backgrounds*/
  --bg-image: url("../visual/BackgroundRoots.png");

  /*Spacing*/

  /* Typography */
}
html{scroll-behavior:smooth;height:100%;}



/*-------------------------------------------------------------BACKGROUND------------------------------------------------------------------*/
body{
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    margin: 0;

    background: black;
  
    color:var(--white);
    font-family:Arial,Helvetica,sans-serif;font-size:20px;line-height:1.7;letter-spacing: -0.02em;
    overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
    text-rendering:optimizeLegibility;
}
.background {
    position: fixed;
    inset: 0;
    z-index: -10;

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;

    transition: opacity 0.4s ease;
    will-change: opacity;
}
.bg1 { z-index: -2; opacity: 1; pointer-events: none;}
.bg2 { z-index: -1; opacity: 0; pointer-events: none;}

.background-video{
    position:fixed;
    inset:0;
    z-index:-20;
    overflow:hidden;
    pointer-events: none;
}
.background-video video{
    width:100%;
    height:100%;
    object-fit:cover;
    pointer-events: none;
}
.background-overlay{
    position:fixed;
    inset:0;
    z-index:-19;
    background:
        rgba(0,0,0,.65);
    pointer-events: none;
}


main{
    position: relative;
    z-index: 15;
    flex:1;
}
body::before{
  content:'';position:fixed;inset:0;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events:none;z-index:999;opacity:0.5;
}
a{color:inherit;text-decoration:none}

.section{padding:5rem 3rem;border-bottom:1px solid var(--border);}
.section-header{display:flex;align-items:center;gap:1rem;margin-bottom:3rem;}
.section-num{font-size:1.2rem;font-weight:500;color:var(--accent);letter-spacing:0.08em;}
.section-title{font-size:1.25rem;font-weight:800;letter-spacing:0.2em;color:var(--muted-light);text-transform:uppercase;}
.section-line{flex:1;height:1px;background:var(--border);}

.lineup-days{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--border);}
.lineup-day{background:var(--panel);padding:2.5rem 2rem;}

.artist-list{display:flex;flex-direction:column;gap:0.15rem;}

/*-------------------------------------------------------------HEADER------------------------------------------------------------------*/
header {
    position: sticky;
    top: 0;
    z-index: 9999;
    width: 100%;
    background: linear-gradient(
        to bottom,
        rgba(5,5,5,0.9) 0%,
        rgba(5,5,5,0.8) 40%,
        rgba(5,5,5,0.7) 60%,
        rgba(5,5,5,0.5) 80%,
        rgba(5,5,5,0.0) 100%
    );

    isolation:isolate;
}

.navbar {
    max-width: 1200px;
    margin: auto;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    height: 80px;

    position:relative;
    z-index:10000;
}
.nav-links {
    justify-self: center;
    display: flex;
    gap: 2rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.nav-links a {
    color: white;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease;
}
.nav-links a:hover {
    color: var(--accent-strong);
}
.nav-links a.active {
    color: var(--accent);
}
.nav-links a.active:hover {
    color: var(--accent-strong);
}

.logo {
    justify-self: start;
    margin-left: 2rem;
}
.logo img {
    width: min(40vw, 80px);
    height: auto;
    opacity: 0.95;

    display: block;
}

.instagram {
    justify-self: end;
    margin-right: 2rem;
}
.instagram img {
    width: min(40vw, 60px);
    height: auto;
    opacity: 0.95;

    display: block;
}

.tab:hover {
    color: var(--accent-strong);
}
.tab.active {
    color: var(--accent);
}
.tab.active:hover {
    color: var(--accent-strong);
}
.divider {
    color: var(--border-light);
    user-select: none;
}
.burger {
    display:none;
    background:none;
    border:none;
    width:35px;
    height:30px;
    flex-direction:column;
    justify-content:space-between;
    cursor:pointer;
    padding:0;
    z-index: 1500;
}
.burger span {
    height:2px;
    width:100%;
    background:white;
    transition:.3s ease;
}
@media(max-width:800px){
    .burger {
        display:flex;
        z-index:10001;
    }
    .navbar {
        max-width:none;
        display:flex;
        justify-content:space-between;
        height:70px;
        padding:0 2rem;
        z-index:10000;
    }
    .logo {
        margin-left:0;
    }
    .instagram {
        display:none;
    }
    .nav-links {
        position:fixed;
        inset:0;
        top: 70px;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100vw;
        height:calc(100vh - 70px);
        background:
        linear-gradient(
        rgba(5,5,5,.96) 0%,
        rgba(5,5,5,.90) 80%,
        rgba(5,5,5,.25) 100%
        );
        display:flex;
        flex-direction:column;
        justify-content:center;
        align-items:center;
        gap:0.5rem;
        transform:translateY(-110%);
        transition:.4s ease;
        z-index:10000;
    }
    .nav-links.open {
        transform:translateY(0);
    }
    .nav-links a {
        font-size:2rem;
        letter-spacing:.15em;
        text-transform:uppercase;
    }
}
.burger.active span:nth-child(1){
    transform:translateY(14px) rotate(45deg);
}
.burger.active span:nth-child(2){
    opacity:0;
}
.burger.active span:nth-child(3){
    transform:translateY(-14px) rotate(-45deg);
}

/*-------------------------------------------------------------CTA------------------------------------------------------------------*/
.cta {
    margin-top: 1rem;
    padding: 2rem 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;

    position: relative;
}

.cta-inner {
    max-width: 600px;
}

.cta h2 {
    font-size: 2.5rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 1rem;
}

.cta p {
    opacity: 0.8;
    margin-bottom: 2rem;
    font-size: 2rem;
    text-transform: uppercase;
}

.cta-button {
    display: inline-block;
    padding: 1rem 2.5rem;

    border: 1px solid var(--accent-strong);
    color: var(--accent-strong);

    font-size: 2rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-weight: 700;

    transition: 0.2s ease;
}
.ticket-button {
    display: inline-block;
    padding: 1rem 2.5rem;

    border: 1px solid var(--accent-strong);
    color: var(--accent-strong);

    font-size: 2rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-weight: 700;

    transition: 0.2s ease;
}

.cta-button:hover {
    background: var(--accent-strong);
    color: black;
    transform: translateY(-2px);
}
.ticket-button:hover {
    background: var(--accent-strong);
    color: black;
    transform: translateY(-2px);
}

.cta::before {
    content: "";
    position: absolute;
    inset: 0;

    /*
    background: radial-gradient(
        circle at center,
        rgba(49, 80, 255, 0.12),
        transparent 20%
    );
    */

    pointer-events: none;
}
/*-------------------------------------------------------------HOME/HERO------------------------------------------------------------------*/
.hero {
    height: 100vh;
    width: 100%;

    position: relative;

    display: flex;
    justify-content: center;
    align-items: center;

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow:hidden;
}
.hero-video{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    z-index:0;
    pointer-events: none;
}
.hero-content {
    position:absolute;

    top:45%;
    left:50%;

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

    z-index:3;

    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
}
.hero-logo {
    position: relative;
    z-index: 3;
    width: min(70vw, 650px);
    height: auto;
    margin-bottom:1rem;
    animation:
        heroFade 1.5s ease forwards;
}
.hero-description {
    max-width:600px;
    font-size:clamp(1rem,2vw,1.35rem);
    line-height:1.5;
    letter-spacing:.15em;
    text-transform:uppercase;
    color: var(--text-light);
    margin:0;
}
.hero-meta {
    display:flex;
    gap:2rem;
    margin-top:2rem;
    font-size:.85rem;
    letter-spacing:.25em;
    text-transform:uppercase;
    color:var(--accent);
}
.hero-meta span {
    display:flex;
    align-items:center;
}
.hero-meta span + span::before {
    content:"";
    width:4px;
    height:4px;
    background:var(--accent);
    border-radius:50%;
    margin-right:2rem;
}
.hero-animation {
    position: absolute;
    inset: 0;

    background-image: url("../visual/waves.gif");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    opacity: .25;
    mix-blend-mode: screen;

    z-index: 1;

    pointer-events: none;
}
.hero-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            rgba(0,0,0,.7),
            rgba(0,0,0,.7)
        );

    z-index: 2;
    pointer-events: none;
}

/*
.hero::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:200px;
    background:
        linear-gradient(
            transparent,
            #050505
        );
    z-index:2;
}
*/

@media(max-width:700px){
    .hero {
        height: 90vh;
        background-position:center;
    }
    .hero-logo {
        width:85vw;
    }
}
/*
.hero-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            rgba(0,0,0,.45),
            rgba(0,0,0,.75)
        );
}
*/
@keyframes heroFade {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/*-------------------------------------------------------------LINEUP------------------------------------------------------------------*/
.lineup {
    display:none;
    transition: opacity .4s ease;
    
}
.lineup.active {
    display: grid;
    grid-template-columns: 1fr 1fr;
    max-width: 1200px;
    margin: 0 auto;
    margin-bottom: 4rem;
    padding: 0 4rem;
    gap: 12rem;

    /*border: 1px solid red;*/
}
.lineup-header {
    text-align: center;
    margin-bottom: 4rem;
}
.day {
    min-width: 400px;

    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.day-left {
    text-align: left;
}
.day-right {
    text-align: right;
}
.day-label-left{
  text-align: left;
  font-size:1.15rem;letter-spacing:0.18em;color:var(--accent);
  text-transform:uppercase;margin-bottom:1.75rem;
  display:flex;align-items:center;gap:0.75rem;
}
.day-label-right{
  text-align: right;
  font-size:1.15rem;letter-spacing:0.18em;color:var(--accent);
  text-transform:uppercase;margin-bottom:1.75rem;
  display:flex;align-items:center;justify-content: flex-end;gap:0.75rem;
}
.artist-list{
    gap: 1rem;
}
.artist{
  font-size:clamp(1.8rem,3.5vw,2rem);font-weight:900;letter-spacing:0em;row-gap: 1rem;
  text-transform:uppercase;color:#b8b6b1;line-height:1.2;
  transition:color 0.15s,padding-left 0.2s,padding-right 0.2s;cursor:default;padding-left:0;
}
.artist.left:hover{color:var(--accent-strong);padding-left:16px;}
.artist.right:hover{color:var(--accent-strong);padding-right:16px;}

.artist-overlay {
    position: fixed;
    inset: 0;

    display: flex;
    justify-content: center;
    align-items: center;

    pointer-events: none;

    z-index: -1;
}
.artist-image {
    height: 100vh;
    width: auto;

    opacity: 0;

    transition:
        opacity 0.5s ease,
        transform 0.5s ease,
        filter 0.5s ease;

    object-fit: contain;

    /*mix-blend-mode: screen;*/
    /*filter: grayscale(.2);*/

    -webkit-mask-image: linear-gradient(
        to right,
        transparent,
        black 12%,
        black 88%,
        transparent
    );

    mask-image: linear-gradient(
        to right,
        transparent,
        black 12%,
        black 88%,
        transparent
    );

    pointer-events: none;
}

.toggle {
    position: relative;
    z-index: 15;

    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;

    margin-bottom: 1.5rem;
}
.toggle-progress {
    width: 200px;
    height: 2px;

    position: relative;

    background:
        linear-gradient(var(--accent), var(--accent)),
        rgba(255,255,255,.25);

    background-repeat: no-repeat;
    background-size: 0% 100%, 100% 100%;

    transition: background-size linear;
}

.tab {
    all: unset; /* removes default button styling */
    cursor: pointer;

    font: inherit;
    color: var(--text-light);

    text-transform: uppercase;
    letter-spacing: 0.15em;

    transition: color 0.25s ease;
}
/*-------------------------------------------------------------LINEUP MOBILE------------------------------------------------------------------*/
@media (max-width: 1100px) {

    .lineup.active {
        grid-template-columns: 1fr;
        gap: 5rem;
        padding: 0 2rem;
    }

    .day {
        min-width: 0;
        width: 100%;
    }

    /* Keep both columns left-aligned on mobile */
    .day-right, .day-left, .day-label-left, .day-label-right {
        text-align: center;
    }

    .day-label-right, .day-label-left {
        justify-content: flex-start;
    }

    .artist.right {
        padding-right: 0;
    }

    .artist.right:hover {
        padding-right: 0;
        padding-left: 16px;
    }
}

/*-------------------------------------------------------------TICKETS------------------------------------------------------------------*/
.tickets-section {
    background: transparent;
}
.tickets-header {
    text-align: center;
    margin-bottom: 2rem;
}
.tickets-grid {
    display:grid;
    grid-template-columns:repeat(2,1fr);  /* tu spremeni v repeat(3,1fr), ce hoces dodat se volunterr nivo nazaj*/
    gap:2rem;
}
.ticket-card {
    background:
        rgba(5,5,5,.45);

    backdrop-filter:blur(4px);
    border:1px solid rgba(255,255,255,.15);
    padding:3rem 2.5rem;
    display:flex;
    flex-direction:column;
    min-height:500px;
    transition:
        transform .3s ease,
        border-color .3s ease;
}
.ticket-card:hover {
    transform:translateY(-8px);
    border-color:var(--accent);
}
.tc-tier {
    font-size:.9rem;
    letter-spacing:.3em;
    color:var(--accent);
    text-transform:uppercase;
}
.tc-price {
    font-size:clamp(3.5rem,7vw,5rem);
    font-weight:900;
    letter-spacing:-.06em;
    margin:.75rem 0;
}
.tc-desc {
    font-size:1.1rem;
    color:white;
}
.tc-reason {
    margin-top:auto;
    padding-top:2rem;
    border-top:
        1px solid rgba(255,255,255,.15);

    font-size:1rem;
    line-height:1.7;
    color:rgba(255,255,255,.65);
}
.ticket-card.supporter {
    border-color:var(--accent);
}
.tc-perk {
    color:var(--accent);
    font-size:1.5rem;
    padding:1rem 0;
    border-top:
        1px solid rgba(255,255,255,.15);
}
.cta-bar {
    margin-top:2rem;
    padding:3rem;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:1rem;
    background:transparent;
    /*border-top:
        1px solid rgba(255,255,255,.15);
*/
}

.cta-text{font-size:1.15rem;font-weight:600;color:var(--black);text-align:center;line-height:1.6;}

@media (max-width: 700px) {
  .tickets-grid {
        grid-template-columns: 1fr;
    }
  .ticket-card {
        min-height: auto;
        padding: 2rem;
    }
}

/*-------------------------------------------------------------LOCATION------------------------------------------------------------------*/
.location-block{
    display:grid;
    grid-template-columns:2fr 1fr;
    gap:4rem;
    align-items:start;
}
.loc-name{
    font-size:clamp(3rem,8vw,6rem);
    font-weight:900;
    letter-spacing:-.05em;
    line-height:.95;
    text-transform:uppercase;
}
.loc-country{
    margin-top:1rem;
    color:var(--accent);
    letter-spacing:.25em;
    text-transform:uppercase;
}
.loc-note{
    padding-left:2rem;
    border-left:2px solid var(--accent);
    background:none;
}
.onsite-row{
    display:grid;
    grid-template-columns:220px 1fr;
    gap:3rem;
    padding:2rem 0;
}
.onsite-label{
    color:var(--accent);
    letter-spacing:.25em;
    font-size:1rem;
}

/*-------------------------------------------------------------FAQ------------------------------------------------------------------*/

.faq-section{
    max-width:1000px;
    margin:0 auto;
}
.faq-intro{
    margin:4rem 0 5rem;
}
.faq-intro h1{
    font-size:clamp(2.5rem,6vw,4rem);
    text-transform:uppercase;
    margin-bottom:1rem;
}
.faq-intro p{
    max-width:700px;
    color:var(--muted);
    line-height:1.8;
}
.faq-list{
    display:flex;
    flex-direction:column;
}
.faq-item{
    padding:2.5rem 0;
    /*border-bottom:1px solid rgba(255,255,255,.12);*/
}
.faq-item h2{
    font-size:1.3rem;
    color:var(--accent);
    letter-spacing:.08em;
    margin-bottom:1.2rem;
}
.faq-item p{
    color:var(--white);
    line-height:1.8;
    max-width:850px;
}
.faq-item p + p{
    margin-top:1rem;
}
.faq-checklist{
    margin-top:1rem;
    padding-left:1.4rem;
    line-height:2;
}
.faq-checklist li{
    color:var(--white);
}

/*-------------------------------------------------------------FOOTER------------------------------------------------------------------*/
footer{padding:1.5rem;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;}
.footer-logo{font-size:1.25rem;font-weight:900;letter-spacing:0.18em;text-transform:uppercase;color:var(--muted-light);}
.footer-copy{font-size:1.25rem;color: var(--muted-light);letter-spacing:0.1em;text-transform:uppercase;}

#cookie-settings {
    background: none;
    border: none;
    padding: 0;

    font-family: inherit;
    font-size: 1.25rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;

    color: var(--muted-light);
    cursor: pointer;

    transition: color 0.2s ease;
}
#cookie-settings:hover {
    color: var(--muted);
}
#cookie-settings:focus-visible {
    outline: 2px solid #000;
    outline-offset: 4px;
}


.schedule-wrap{background:var(--panel);padding:2.5rem 2rem;}
.schedule-row{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:1rem;padding:0.85rem 0;border-bottom:1px solid var(--border);
}
.schedule-row:last-child{border-bottom:none;}
.sr-label{font-size:1.15rem;letter-spacing:0.08em;color:var(--muted);text-transform:uppercase;flex-shrink:0;}
.sr-value{font-size:1.25rem;font-weight:800;color:var(--white);text-align:right;}
.sr-sub{font-size:1.15rem;color:var(--muted);text-align:right;margin-top:3px;}

.loc-note-title{font-size:1.25rem;font-weight:800;color:var(--white);}
.loc-note p{font-size:1.15rem;color:var(--muted-light);}

.onsite-row:last-child{border-bottom:none;}
.onsite-detail{font-size:1.15rem;color:var(--white);}


.tickets-grid .ticket-card{flex:1;}



@keyframes fadein{from{opacity:0}to{opacity:1}}
@keyframes slidein{from{opacity:0;transform:translateY(25px)}to{opacity:1;transform:none}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.25}}
.reveal{opacity:0;transform:translateY(12px);transition:opacity 0.5s ease,transform 0.5s ease;}
.reveal.visible{opacity:1;transform:none;}

@media(max-width:700px){
  .section{padding:3.5rem 1.5rem;}
  .lineup-days,.location-block{grid-template-columns:1fr;}
  .tickets-grid{flex-wrap:wrap!important;}
  .tickets-grid .ticket-card{flex:1 1 100%!important;}
  .schedule-row{flex-direction:column;gap:0.25rem;}
  .sr-value{text-align:left;}
  .sr-sub{text-align:left;}
  .loc-note{border-left:none;border-top:2px solid var(--accent);}
  .onsite-row{grid-template-columns:1fr;}
  .onsite-label-cell{border-right:none;border-bottom:1px solid var(--border);padding:1.25rem 1.5rem;}
  .onsite-content-cell{padding:1.25rem 1.5rem;}
  footer{padding:2rem 1.5rem;}
  .hero-gif{width:80vw;opacity:0.2;}
  .hero-gif-spacer{display:block;}
}

/*-------------------------------------------------------------COOKIE CONSENT------------------------------------------------------------------*/
.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 10000;

    background: rgba(0, 0, 0, 0.95);
    backdrop-filter: blur(10px);

    padding: 20px;
    box-sizing: border-box;
}
.cookie-content {
    max-width: 1200px;
    margin: auto;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}
.cookie-text {
    max-width: 750px;
}
.cookie-text h3 {
    margin: 0 0 8px;
}
.cookie-text p {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
}
.cookie-buttons {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}
.cookie-buttons button {
    padding: 10px 22px;
    border: 1px solid white;
    background: transparent;
    color: white;
    cursor: pointer;

    font-family: inherit;
    font-size: 14px;
}
.cookie-buttons .cookie-accept {
    background: white;
    color: black;
}
.cookie-buttons button:hover {
    opacity: 0.8;
}

/* Mobile */
@media (max-width: 700px) {
    .cookie-content {
        flex-direction: column;
        align-items: stretch;
        gap: 15px;
    }
    .cookie-buttons {
        width: 100%;
    }
    .cookie-buttons button {
        flex: 1;
    }
}