@font-face {
    font-family: 'AvertaStd';
    src: url('/fonts/AvertaStd-Black.woff2') format('woff2'), url('/fonts/AvertaStd-Black.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'AvertaStd';
    src: url('/fonts/AvertaStd-BlackItalic.woff2') format('woff2'), url('/fonts/AvertaStd-BlackItalic.woff') format('woff');
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'AvertaStd';
    src: url('/fonts/AvertaStd-Bold.woff2') format('woff2'), url('/fonts/AvertaStd-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'AvertaStd';
    src: url('/fonts/AvertaStd-BoldItalic.woff2') format('woff2'), url('/fonts/AvertaStd-BoldItalic.woff') format('woff');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'AvertaStd-ExtrathinItalic';
    src: url('/fonts/AvertaStd-ExtrathinItalic.woff2') format('woff2'), url('/fonts/AvertaStd-ExtrathinItalic.woff') format('woff');
    font-weight: 100;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'AvertaStd';
    src: url('/fonts/AvertaStd-ExtraBold.woff2') format('woff2'), url('/fonts/AvertaStd-ExtraBold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'AvertaStd';
    src: url('/fonts/AvertaStd-ExtraBoldItalic.woff2') format('woff2'), url('/fonts/AvertaStd-ExtraBoldItalic.woff') format('woff');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'AvertaStd-Extrathin';
    src: url('/fonts/AvertaStd-Extrathin.woff2') format('woff2'), url('/fonts/AvertaStd-Extrathin.woff') format('woff');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'AvertaStd';
    src: url('/fonts/AvertaStd-Light.woff2') format('woff2'), url('/fonts/AvertaStd-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'AvertaStd';
    src: url('/fonts/AvertaStd-LightItalic.woff2') format('woff2'), url('/fonts/AvertaStd-LightItalic.woff') format('woff');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'AvertaStd';
    src: url('/fonts/AvertaStd-Regular.woff2') format('woff2'), url('/fonts/AvertaStd-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'AvertaStd-RegularItalic';
    src: url('/fonts/AvertaStd-RegularItalic.woff2') format('woff2'), url('/fonts/AvertaStd-RegularItalic.woff') format('woff');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'AvertaStd';
    src: url('/fonts/AvertaStd-Semibold.woff2') format('woff2'), url('/fonts/AvertaStd-Semibold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'AvertaStd';
    src: url('/fonts/AvertaStd-SemiboldItalic.woff2') format('woff2'), url('/fonts/AvertaStd-SemiboldItalic.woff') format('woff');
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'AvertaStd';
    src: url('/fonts/AvertaStd-Thin.woff2') format('woff2'), url('/fonts/AvertaStd-Thin.woff') format('woff');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'AvertaStd';
    src: url('/fonts/AvertaStd-ThinItalic.woff2') format('woff2'), url('/fonts/AvertaStd-ThinItalic.woff') format('woff');
    font-weight: 100;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Casey';
    src: url('/fonts/CC.woff2') format('woff2'), url('/fonts/CC.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
:root {
    --pink: 223 109 167;
    --purple: 124 111 176;
    --blue: 55 158 210;
    --magenta: 158 57 141;
    --white: 255 255 255;
    --black: 0 0 0;
}
body {
    font-family: 'AvertaStd';
    background-color: rgb(var(--black) / 1);
    margin: 0;
    min-height: 100vh;
	 overflow-x: hidden;
}

#glitterCanvas {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 999;
}
p {
    font-family: 'AvertaStd';
    color: rgb(var(--purple));
    font-size: 1rem;
	line-height: 1.3rem;
	font-weight: 400;
}
strong {
	font-weight:600;
}
h1 {
    font-family: 'Casey';
    font-size: calc(3rem + 1.5vw);
    color: rgb(var(--pink));
}
h2, h3, h4, h5, h6 {
    font-family: 'AvertaStd';
    color: rgb(var(--purple));
}
.pageTitle h2 {
	font-family: 'Casey';
    font-size: calc(3rem + 1.5vw);
    color: rgb(var(--pink));
}
.resizeText {
  white-space: nowrap;
  margin: 0;
  line-height: 1;
  display: inline-block;
}


dl {
	
}
.creditsdl {
    margin: 0;
    padding: 0;
}
.creditsdl dt, .creditsdl dd {
    display: inline;
    margin: 0;
}
.creditsdl dd::before {
    content: " ";
}
/* forceer dat elk dt+dd paar echt op eigen regel blijft */
.creditsdl dt::before {
    content: "";
    display: block;
}
.creditsdl dt {
    font-family: 'Casey';
    color: rgb(var(--pink));
    font-size: 1.7rem;
}
.creditsdl dd {
    font-family: 'AvertaStd';
    color: rgb(var(--purple));
    font-size: 1rem;
}
.bgblack {
    background-color: rgb(var(--black));
}
.bgwhite {
    background-color: rgb(var(--white));
}
.scene {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
    z-index: 1;
}
.glitter-layer, .draaicirkeldiv, .draaioverlay, .draaibassas, .draaititel {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.draaicirkeldiv {
    z-index: 1;
}
.draaioverlay {
    z-index: 3;
    pointer-events: none;
}
#glitterCanvas {
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
    pointer-events: none;
    z-index: 2;
}
.draaibassas {
    z-index: 4;
}
.draaititel {
    z-index: 5;
}
.draaicirkeldiv, .draaititel {
    transform-origin: center center;
}
.draaicirkel-img, .draaioverlay-img, .draailayer-img, .draaititel-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
    margin: auto;
}
.draaioverlay-img {
    max-width: 100vh;
    max-height: 100vw;
    object-fit: contain;
    display: block;
    margin: auto;
}
.draaioverlay-img {
    mix-blend-mode: screen;
    opacity: 0.7;
}
.draaititel-img {
    mix-blend-mode: screen;
    opacity: 0.8;
}
.draaicirkel-img {
    mix-blend-mode: screen;
    opacity: 0.7;
}
.scene-spacer {
    height: 60vh; /*  vertraging */
}
.draaicontent {
    position: relative;
    z-index: 2;

}
#credits {
	position: relative;
}

/* =========================
   SPEELLIJST — CLEAN TOUR STYLE
   ========================= */

.speeldata-item {

	position: relative;
}

/* hover subtiel */
.speeldata-item:hover {
    background: rgb(var(--white) / 0.03);
}

.speellijst-container hr {
    border: none;
    height: 4px;
    background: rgb(var(--purple));
	margin: 0px;
}
.speellijst-container h3 {
     font-weight:800;
}
.speellijst-container h2 {display: none;}
/* =========================
   DATUM / TIJD / LOCATIE TYPOGRAFIE
   ========================= */

.speeldatum {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    align-items: baseline;
    color: rgb(var(--purple));
	padding-bottom: 0.5rem;
}

/* datum = dominant */
.speeldatum {
    font-weight: 600;
    text-transform: uppercase;
	padding-top: 1.5rem;
}

/* tijd = lichter */
.speeldatum .speeltijd,
.speeldatum .tijd {
    font-weight: 400!important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
	
}

/* locatie (theater) = caps bold */
.speellocatie a {
    font-weight: 600;
    text-transform: uppercase;
    color: rgb(var(--blue));
    text-decoration: none;
}

/* plaats = caps light */
.plaats {
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.7;
}

/* bullets / pseudo icons weg */
.speeldatum::before {
    content: none !important;
}

/* =========================
   STATUS
   ========================= */

/* status badge linksboven */
.speelstatus {
    position: absolute;
    top: 0.2rem;
    left: 0;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    opacity: 0.9;
}

.speelstatus.uitverkocht { 
	color: rgb(var(--magenta)); 
}
.speelstatus.besloten { 
	color: rgb(var(--blue)); 
}
.speelstatus.geannuleerd {
    color: rgb(var(--pink));
    text-decoration: line-through;
}

.kaartverkoop-opties {
	margin-bottom: 0.4rem;
    display: flex;
    flex-wrap: wrap;

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

    gap: 0.75rem;

    width: 100%;
}
/* =========================
   TICKET KNOP (BELANGRIJK)
   ========================= */

.button-reserveer {
    display: inline-block;
    background: rgb(var(--pink));
    color: rgb(var(--white)) !important;
    padding: 0.45rem 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.85rem;
    text-decoration: none;
    transition: all 0.2s ease;
    border: 1px solid rgb(var(--pink));
	border-radius: 0px;
}

.button-reserveer:hover {
    background: rgb(var(--magenta));
    border-color: rgb(var(--magenta));
    transform: translateY(-1px);
}
.of-text {
	display: none;
}
/* =========================
   MAIL LINK (andere kleur, wel CTA feel)
   ========================= */

.mailto-link {
    display: inline-block;

    background: rgb(var(--blue));
    color: rgb(var(--white)) !important;

    padding: 0.45rem 0.9rem;
    border-radius: 0px;

    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.85rem;

    text-decoration: none;

    border: 1px solid rgb(var(--blue));

    transition: all 0.2s ease;
}

.mailto-link:hover {
    background: rgb(var(--magenta));
    border-color: rgb(var(--magenta));
    transform: translateY(-1px);
}

/* =========================
   EXTRA TEKST
   ========================= */

.kaartverkoop-tekst,
.kaartverkoop-uitleg {
    margin: 0.3rem 0 0 0;
    opacity: 0.75;
    font-size: 0.7rem;
}

.kaartverkoop-waarschuwing {
    margin-top: 0.5rem;
    color: rgb(var(--pink));
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* =========================
   SPONSOR LOGOS
   ========================= */

.sponsors {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 2rem;
max-width: 100vw;
    margin-top: 3rem;
}

.sponsors img {
    max-height: 70px;
    width: auto;
    max-width: 100px;;
    object-fit: contain;

    opacity: 0.85;
    transition: opacity .2s ease;
}

.sponsors img:hover {
    opacity: 1;
}

/* === DANSPAAR === */
.danspaar {
    position: fixed;
    bottom: 0;
    left: -220px;
    width: 180px;
    opacity: 0;
    pointer-events: none;
    z-index: 2000;
	opacity: 0;
	 will-change: transform, opacity;
}

.danspaar.loop {
    animation: loopOver 4s linear;
}

@keyframes loopOver {

    /* Start links */
    0% {
        transform: translateX(0) rotateY(0deg);
        opacity: 1;
    }

    /* Nog niet draaien */
    49% {
        transform: translateX(calc((100vw + 400px) * 0.49)) rotateY(0deg);
        opacity: 1;
    }

    /* Draait in 0,5 seconde terwijl hij blijft bewegen */
    61.5% {
        transform: translateX(calc((100vw + 400px) * 0.615)) rotateY(180deg);
        opacity: 1;
    }

    /* Verder naar rechts, nu omgedraaid */
    90% {
        transform: translateX(calc(100vw + 220px)) rotateY(180deg);
        opacity: 1;
    }

    /* Uitfaden buiten beeld */
    100% {
        transform: translateX(calc(100vw + 220px)) rotateY(180deg);
        opacity: 0;
    }
}


/* === Scroll Hint === */

.scroll-hint {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);

    font-size: 4rem;
	
    color: rgb(255 255 255 / 0.5);

    opacity: 1;
    pointer-events: none;

    animation: scrollBlink 2.5s ease-in-out infinite;
    z-index: 3000;
}

/* zachte pulse / blink */
@keyframes scrollBlink {
    0% {
        opacity: 0.3;
        transform: translateX(-50%) translateY(0);
    }
    50% {
        opacity: 0.9;
        transform: translateX(-50%) translateY(6px);
    }
    100% {
        opacity: 0.3;
        transform: translateX(-50%) translateY(0);
    }
}

/* verborgen state */
.scroll-hint.hide {
     animation: none;
    opacity: 0;
    transition: opacity .4s ease;
}