@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
@import url('amalthea/assets/fonts/GFS_Bodoni/gfs-bodoni.css');

:root {
    --manrope-font: "Manrope", arial;
    --inter-font: "Inter", arial;
    --oktah-font: "Okta Neue", arial;
    --gfs-bodoni-font: 'GFS Bodoni', arial;
    --minion-pro: "minion-pro", arial;
    --future-pt: "futura-pt";
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    height: 100%;
    font-family: var(--manrope-font);
    background: #190B00;
}



.main-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100vh;
}

/* SHARED CARD STYLES */
.phasma-card,
.card-title,
.card-date,
.card-description,
.card-program,
.card-atraktos,
.card-host,
.card-sponsors {
    font-family: var(--gfs-bodoni-font);
}

.phasma-grid-wrapper {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

.phasma-slider {
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform 0.6s ease;
}

.phasma-grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: 0.8fr 0.3fr 0.3fr 0.4fr 0.2fr 0.5fr;
    background: #190b00;
    flex-grow: 1;
    height: 100vh;
    overflow-y: auto;
    flex-shrink: 0;
}

.phasma-card {
    padding: 20px;
    border: 1px solid #190b00;
    color: #190b00;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
}

/* INDIVIDUAL CARD COLORS */
.card-title { background: #190b00; }
.card-date { background: #b34228; color: #d5ab5f; }
.card-hours { background: #d5ab5f; color: #b34228; }
.card-description { background: #c3ce88; color: #190b00; }
.card-assets { background: #6168e5; color: #190b00; }
.card-dancers { background: #d5ab5f; color: #190b00; }
.card-program { background: #b34228; color: #190b00; }
.card-atraktos-title { background: #82b0db; color: #190b00; }
.card-atraktos-address { background: #6168e5; color: #190b00; }
.card-host { background: #c3ce88; color: #190b00; }
.card-sponsors { background: #82b0db; color: #190b00; }
.card-workshops { background: #82b0db; color: #190b00; }

/* GRID PLACEMENT */
.card-title {
    grid-column: 1 / 5;
    grid-row: 1 /2;
    justify-content: flex-end;
    padding: 5% 3% 2%;
}

.card-date {
    grid-column: 5;
    grid-row: 1 / 3;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.big-date {
    font-size: clamp(24px, 10vw, 170px);
    font-family: var(--minion-pro);
    font-weight: 600;
    line-height: 1;
    padding-top: 5%;
}

.card-hours {
    grid-column: 4 / 6;
    grid-row: 3;
    justify-content: center;
    font-family: var(--gfs-bodoni-font);
}

.hours-title {
    letter-spacing: 0.3em;
    font-weight: 600;
    text-transform: uppercase;
    font-size: clamp(18px, 4vw, 36px);
    font-family: var(--future-pt);   
}

.card-description {
    grid-column: 1 / 4;
    grid-row: 2 / 4;
    font-family: var(--manrope-font);
    font-weight: 500;
    font-size: clamp(12px, 1.7vw, 26px);
    padding-left: 3%;
    justify-content: center;
    padding-right: 20%;

}

.card-program {
    grid-column: 1 / 3;
    grid-row: 4 / 6;
    font-size: clamp(16px, 3vw, 48px);
    justify-content: center;
    text-align: center;
    font-family: var(--minion-pro);
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card-program:hover {
    transform: translateY(-4px) translateX(4px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}

.card-atraktos-title {
    grid-column: 3 / 6;
    grid-row: 4;
    justify-content: center;
}

.atraktos-title {
    letter-spacing: 0.5em;
    font-weight: 600;
    text-transform: uppercase;
    font-size: clamp(20px, 3vw, 50px);
    font-family: var(--future-pt);
    text-align: center;
}

.card-atraktos-address {
    grid-column: 3 / 6;
    grid-row: 5;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card-atraktos-address:hover {
    transform: translateX(-4px) translateY(-4px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}

.atraktos-address {
    letter-spacing: 0.5em;
    font-weight: 600;
    text-transform: uppercase;
    font-size: clamp(10px, 2vw, 26px);
    font-family: var(--manrope-font);
    text-align: center;
    text-decoration: none;
    color: #190b00;
}

.card-assets {
    grid-column: 4;
    grid-row: 2 / 3;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.card-dancers {
    grid-column: 2 / 5;
    grid-row: 6;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.moving {
    position: absolute;
    left: 0;
    max-height: 150px;
    min-height: 80px;
    height: 100%;
    width: auto;
    animation: move 25s linear infinite;
}

/* Fixed horizontal gaps */
.moving:nth-child(1) { animation-delay: 0s; }
.moving:nth-child(2) { animation-delay: -2.5s; }
.moving:nth-child(3) { animation-delay: -5s; }
.moving:nth-child(4) { animation-delay: -7.5s; }
.moving:nth-child(5) { animation-delay: -10s; }
.moving:nth-child(6) { animation-delay: -12.5s; }
.moving:nth-child(7) { animation-delay: -15s; }
.moving:nth-child(8) { animation-delay: -17.5s; }
.moving:nth-child(9) { animation-delay: -20s; }
.moving:nth-child(10) { animation-delay: -22.5s; }

@keyframes move {
    from {
        transform: translateX(-140px);
    }
    to {
        transform: translateX(100vw);
    }
}

.asset-image {
    max-width: 50%;
    object-fit: contain;
}

.card-host {
    grid-column: 5 / 6;
    grid-row: 6;
    font-size: clamp(20px, 3vw, 48px);
    justify-content: center;
    text-align: center;
    font-family: var(--minion-pro);
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card-host:hover {
    transform: translateX(-4px) translateY(-4px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}

.card-sponsors {
    grid-column: 1 / 2;
    grid-row: 6;
    font-size: clamp(20px, 3vw, 48px);
    justify-content: center;
    font-family: var(--future-pt);
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card-sponsors:hover {
    transform: translateX(4px) translateY(-4px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}

/* TYPOGRAPHY */
.phasma-card h3 {
    text-transform: uppercase;
    letter-spacing: 0.18em;
}

.card-program ul {
    list-style: none;
    font-size: 20px;
}

.card-program li {
    font-size: 14px;
    margin-bottom: 4px;
}

.side-panels {
    width: 50%;
    min-width: 320px;
    flex-shrink: 0;
}

.programme-panel,
.partners-panel,
.host-panel {
    position: absolute;
    top: 0;
    left: 0;

    height: 100%;
    min-width: 50%;
    width: 50%;
    background: #b34228;
    color: #190b00;
    z-index: 50;

    transform: translateX(-200%);
    transition: transform 0.5s ease;
    font-family: var(--minion-pro);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.phasma-slider {
    display: flex;
    width: 100%;
    height: 100%;
    transform: translateX(0%);
    transition: transform 0.6s ease;
}

.phasma-slider.active .phasma-grid {
    opacity: 0.6;
    transition: opacity 0.5s ease;
}

.programme-panel {
    background: #b34228;
}

.partners-panel {
    background: #82b0db;
    justify-content: flex-start;
    padding: 5% 0;
    gap: 3%;
}

.host-panel {
    background: #c3ce88;
    transform: translateX(100%);
    position: relative;
    padding: 5%;
    gap: 3%;
    font-family: var(--manrope-font);
}

.host-panel.active {
    transform: translateX(-100%);
}

.phasma-slider.right {
    transform: translateX(50%);
}

.phasma-slider.left {
    transform: translateX(-50%);
}

.programme-panel.active,
.partners-panel.active {
    transform: translateX(-100%);
}

.programme-panel h3,
.partners-panel h3,
.host-panel h3 {
    text-transform: uppercase;
    letter-spacing: 0.2em;
    margin-bottom: 30px;
    font-size: clamp(10px, 2vw, 26px);
}

.partners-panel h3 {
    font-family: var(--future-pt);
    font-weight: 600;
}

.programme-panel ul {
    list-style: none;
}

.programme-panel li, 
.host-panel p {
    margin-top: 10px;
    font-size: clamp(10px, 1.7vw, 24px);
}

/* CLOSE (X) BUTTON */
.programme-close,
.partners-close,
.host-close {
    background: none;
    border: none;
    font-size: 32px;
    cursor: pointer;
    color: #190b00;
    padding-top: 20px;
}

.sponsors-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 30px;
    align-items: center;
}

.sponsors-grid img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
}


.tab-content {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  max-width: 900px;
  text-align: center;
}

.tab-pane {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
  margin: 0 15px;
  width: 100%;
}

#single-sponsor {
  justify-content: center;
}

.tab-pane img {
  max-width: 100px;
  max-height: 150px;
  margin: 18px 22px;
  object-fit: contain;
  transition: transform 0.3s ease;
  background-color: white;
  border: 1px #190b00 solid;
  aspect-ratio: 1/1;
  padding: 5px;
}


@media (max-width: 1000px) {
    .phasma-grid {
        grid-template-rows: 0.5fr 0.3fr 0.3fr 0.4fr 0.2fr 0.5fr;
    }
    .card-title {
        grid-column: 1/6;
    }
    .card-date {
        grid-row: 2/4;
    }
    .card-hours {
        grid-column: 4/5;
    }
}

@media (max-width: 650px) {
    .phasma-grid {
        grid-template-rows: 0.5fr 0.5fr 0.3fr 0.4fr 0.3fr 0.5fr;
    }
    .card-description {
        font-size: clamp(12px, 3vw, 26px);
    }
    .card-date {
        grid-row: 2/3;
    }
    .card-hours {
        grid-column: 4/6;
    }
    .hours-title {
        text-align: center;
    }
    .atraktos-title {
        font-size: clamp(14px, 3vw, 50px);
    }
    .atraktos-address {
        font-size: clamp(8px, 2vw, 26px);
    }

        .side-panels {
        width: 100%;
    }

    .programme-panel,
    .partners-panel,
    .host-panel {
        height: 100%;
        min-width: 100%;
        width: 100%;
    }

    .host-panel.active {
        transform: translateX(-100%);
    }

    .phasma-slider.right {
        transform: translateX(100%);
    }

    .phasma-slider.left {
        transform: translateX(-100%);
    }

    .programme-panel.active,
    .partners-panel.active {
        transform: translateX(-100%);
    }

    .programme-panel li, .host-panel p {
        font-size: clamp(14px, 1.7vw, 24px);
    }

    .programme-panel h3, .partners-panel h3, .host-panel h3 {
        font-size: clamp(20px, 2vw, 26px);
    }
}

@media (max-width: 550px) {
    .phasma-grid {
        grid-template-rows: 0.3fr 0.5fr 0.3fr 0.4fr 0.2fr 0.3fr 0.4fr;
    }
    .card-date {
        grid-column: 4/6;
    }
    .big-date {
        font-size: clamp(24px, 16vw, 170px);
    }
    .card-assets {
        grid-row: 4/6;
        grid-column: 1/3;
    }
    .card-program {
        grid-column: 2/5;
        grid-row: 6/7;
        font-size: clamp(12px, 3vw, 48px);
    }
    .card-dancers {
        grid-row: 7;
        grid-column: 1/6;
    }
    .card-atraktos-address {
        background: #d5ab5f;
    }
    .atraktos-title {
        font-size: clamp(16px, 3vw, 50px);
    }
    .card-sponsors {
        font-size: clamp(14px, 3vw, 48px);
    }
    :root {
    --duration: 32.5s;
    --items: 10;
    --gap: calc(var(--duration) / var(--items));
    }

    .moving {
    width: 100px;
    animation: move var(--duration) linear infinite;
    }

    .moving:nth-child(1)  { animation-delay: calc( 0 * -1 * var(--gap)); }
    .moving:nth-child(2)  { animation-delay: calc( 1 * -1 * var(--gap)); }
    .moving:nth-child(3)  { animation-delay: calc( 2 * -1 * var(--gap)); }
    .moving:nth-child(4)  { animation-delay: calc( 3 * -1 * var(--gap)); }
    .moving:nth-child(5)  { animation-delay: calc( 4 * -1 * var(--gap)); }
    .moving:nth-child(6)  { animation-delay: calc( 5 * -1 * var(--gap)); }
    .moving:nth-child(7)  { animation-delay: calc( 6 * -1 * var(--gap)); }
    .moving:nth-child(8)  { animation-delay: calc( 7 * -1 * var(--gap)); }
    .moving:nth-child(9)  { animation-delay: calc( 8 * -1 * var(--gap)); }
    .moving:nth-child(10) { animation-delay: calc( 9 * -1 * var(--gap)); }

    @keyframes move {
        from {
            transform: translateX(-300px);
        }
        to {
            transform: translateX(calc(100vw + 300px));
        }
    }
}