.centerIntro{
    position:relative;
    z-index:100;
    color: white;
     transition:opacity .4s ease;
   
}

.introTitle{
    font-size:50px;
    font-weight:600;
    letter-spacing:0.12em;
    text-transform:uppercase;
    margin-bottom:10px;
     margin-top: 5em;
}

.introSubtitle{
    font-size:14px;
    line-height:1.6;
    letter-spacing:0.04em;
    color: white;
}

.introArrow{
    position:absolute;
    right:32px;
    top:50%;
    transform:translateY(-50%);
    font-size:18px;
    background:none;
    border:0;
    cursor:pointer;
    color:#ffffff;
    z-index:60;
    transition:transform .25s ease, opacity .25s ease;
}

.introArrow:hover{
    transform:translateY(-50%) translateX(6px);
    opacity:0.7;
}

/* explode animation */
/* 🔥 TEXT EXPLODE */
.centerIntro.explode{
    opacity:0;
    transform:scale(1.3);
    filter:blur(12px);
    transition:
        opacity .6s ease,
        transform .8s ease,
        filter .8s ease;
}
@keyframes explodeImg{
    0%{
        transform:scale(1);
        opacity:1;
        filter:blur(0);
    }
    60%{
        transform:scale(1.08);
        opacity:1;
        filter:blur(2px);
    }
    100%{
        transform:scale(1.35);
        opacity:0;
        filter:blur(20px);
    }
}


        /* container bovenop de three canvas */
        #app{ position:relative; }

        .startPanel.explode .startBg{
    animation: explodeImg 2.5s cubic-bezier(.16,1,.3,1) forwards;
}
/* Blur alles ACHTER het startscherm */
.startPanel ~ canvas,
.startPanel ~ .aura,
.startPanel ~ .noise {
    filter: blur(14px) saturate(0.9);
    transition: filter 0.8s ease;
}
.startPanel.hidden ~ canvas,
.startPanel.hidden ~ .aura,
.startPanel.hidden ~ .noise {
    filter: blur(0);
}

        /* start panel die IN #app zit */
    .startPanel{
    position: fixed;   /* 👈 fixed ipv absolute */
    inset: 0;
    z-index: 50;
    display: grid;
    place-items: center;
    overflow: hidden;  /* 👈 belangrijk */
}

.startPanel.hidden{
    display: none;
}

.startPanel .startBg{
    position: absolute;
    inset: 0;          /* 👈 vult parent exact */
    width: 100%;
    height: 100%;
    object-fit: cover; /* 👈 dit is de key */
    object-position: center;
    filter: saturate(1.05) contrast(1.05);
    pointer-events: none;
}

        .startPanel .startInner{
            position:relative;
            display:flex;
            flex-direction:column;
            align-items:center;
            gap:14px;
            padding:18px 18px;
            text-align:center;
            max-width:520px;
            pointer-events:none;
        }

        /* ✅ knop onderin het scherm (binnen overlay) */
        .startBtnWrap{
            position:absolute;
            left:0;
            right:0;
            bottom:18px;
            display:flex;
            justify-content:center;
            pointer-events:auto;
            z-index:60;
        }

        .startBtn{
            border:0;
            padding:12px 18px;
            border-radius:999px;
            cursor:pointer;
            background:#fff;
            color:#111;
            font-weight:700;
            letter-spacing:.06em;
            box-shadow:0 14px 40px rgba(0,0,0,.35);
            transform:translateZ(0);
            pointer-events:auto;
        }
        .startBtn:active{ transform:scale(.98); }

        /* UI verbergen tot start */
        .uiHidden{ opacity:0; pointer-events:none; }
        .uiHidden.show{ opacity:1; pointer-events:auto; }

        /* ✅ timeline row + play/pause (fix: knop blijft netjes naast slider, niet “op 2025”) */
      .tlRowFlex{
    display:flex;
    align-items:center;
    gap:20px;              /* ruimte tussen slider en knop */
    width:100%;
}

        .tlPlayBtn{
            width:42px;
            height:42px;
            border-radius:999px;
            border:0;
            cursor:pointer;
            background:#ff9f43;
            color:#111;
            font-weight:900;
            box-shadow:0 10px 26px rgba(0,0,0,.18);
            display:grid;
            place-items:center;
            user-select:none;
            flex:0 0 42px;
        }
        .tlPlayBtn:active{ transform:scale(.98); }
        .tlPlayBtn.isPlaying{ background:#111; color:#fff; }
        .timelineColumn{
    flex:1;
    display:flex;
    flex-direction:column;
}

.timelineDates{
    display:flex;
    justify-content:space-between;
    font-size:14px;
    margin-top:8px;
    padding:0 2px; /* kleine visuele alignment */
}


.guidedWrapper{
    position:fixed;
    inset:0;
    z-index:80;
    display:flex;
    justify-content:space-between;
    align-items:stretch;
    pointer-events:none;
    box-sizing:border-box;
}

/* LEFT PANEL */

.guidedTour{
    width:300px;
    max-height:calc(100vh - 40px);
    margin:20px;
    background:#fff;
    padding:20px;
    display:flex;
    flex-direction:column;
    pointer-events:auto;
    overflow-y:auto;
    box-sizing:border-box;
}


.guidedHeader{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:16px;
}

.guidedHeader h2{
    font-size:20px;
    margin:0;
}

.stepCounter{
    font-size:14px;
    opacity:.6;
}

.guidedCard{
    flex:1;
    border:2px solid #eee;
    padding:16px;
    margin-bottom:16px;
}

.guidedCard h3{
    margin-top:0;
}

.guidedNext{
    border:none;
    background:#ff9f43;
    padding:12px;
    font-weight:600;
    cursor:pointer;
}

/* RIGHT PANEL */
.contextPanel{
    width:280px;
    max-height:calc(100vh - 40px);
    margin:20px;
    background:#fff;
    padding:20px;
    pointer-events:auto;
    overflow-y:auto;
    box-sizing:border-box;
    display: none;
}

.contextPanel.show{
    opacity:1;
    transform:translateX(0);
}
@media (max-width: 1024px){
    .guidedWrapper{
        flex-direction:column;
        align-items:flex-start;
    }

    .guidedTour,
    .contextPanel{
        width:calc(100% - 40px);
        max-width:520px;
        margin:20px auto;
    }
}

@media (max-width: 640px){
    .guidedWrapper{
        justify-content:flex-end;
        align-items:flex-end;
    }

    .guidedTour{
        position:fixed;
        bottom:0;
        left:0;
        right:0;
        width:100%;
        max-height:80vh;
        margin:0;
        border-radius:16px 16px 0 0;
        box-shadow:0 -10px 30px rgba(0,0,0,.2);
        overflow-y:auto;
        animation:slideUp .35s ease;
    }

    .contextPanel{
        display:none;
    }
}

@keyframes slideUp{
    from{
        transform:translateY(100%);
    }
    to{
        transform:translateY(0);
    }
}




    /* =========================
       CONTEXT PANEL (VERHAAL)
       ========================= */

    .contextPanel{
        position: fixed;
        top: 18px;
        right: 18px;
        z-index: 99999;

        width: min(420px, calc(100vw - 36px));
        max-height: calc(100vh - 36px);

        padding: 14px 14px 12px;

        border-radius: 16px;
        background: rgba(255,255,255,.72);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);

        border: 1px solid rgba(0,0,0,.08);
        box-shadow: 0 14px 40px rgba(0,0,0,.10);

        overflow: hidden;
        display: none;
        pointer-events: auto;

        transform: translateY(-6px);
        opacity: 0;
        transition: opacity .22s ease, transform .22s ease;
    }

    .contextPanel.show{
        display: block;
        opacity: 1;
        transform: translateY(0);
    }

    /* header strip (subtle) */
    .contextPanel::before{
        content:"";
        display:block;
        height: 8px;
        width: 100%;
        border-radius: 999px;
        background: linear-gradient(90deg,
        rgba(0,0,0,.82),
        rgba(0,0,0,.12),
        rgba(0,0,0,.06)
        );
        opacity: .35;
        margin-bottom: 10px;
    }

    /* title */
    #contextTitle{
        margin: 0 0 10px;
        font-size: 14px;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: rgba(0,0,0,.78);
        user-select: none;
    }

    /* body text */
    #contextText{
        margin: 0;
        font-size: 14px;
        line-height: 1.65;
        color: rgba(0,0,0,.82);

        max-height: calc(100vh - 36px - 8px - 14px - 12px - 44px);
        overflow: auto;
        padding-right: 6px;
    }

    /* nice scrollbar (webkit) */
    #contextText::-webkit-scrollbar{
        width: 10px;
    }
    #contextText::-webkit-scrollbar-track{
        background: transparent;
    }
    #contextText::-webkit-scrollbar-thumb{
        background: rgba(0,0,0,.14);
        border-radius: 999px;
        border: 3px solid rgba(255,255,255,.6);
    }
    #contextText::-webkit-scrollbar-thumb:hover{
        background: rgba(0,0,0,.22);
    }

    /* mobile: panel becomes bottom sheet */
    @media (max-width: 900px){
        .contextPanel{
            right: 12px;
            left: 12px;
            top: auto;
            bottom: 12px;

            width: auto;
            max-height: 52vh;

            border-radius: 16px;
        }

        #contextText{
            max-height: calc(52vh - 68px);
        }
    }




    /* =========================
   CONTEXT PANEL POP ANIM
   ========================= */

    /* default hidden state */
    .contextPanel{
        /* laat display:none zoals je al hebt */
        transform: translateY(10px) scale(.985);
        opacity: 0;
        filter: blur(6px);
        transform-origin: top right;

        transition:
                opacity .22s ease,
                transform .34s cubic-bezier(.16,1,.3,1),
                filter .28s ease;
    }

    /* show state */
    .contextPanel.show{
        opacity: 1;
        filter: blur(0);
        transform: translateY(0) scale(1);

        animation: contextPop .46s cubic-bezier(.16,1,.3,1) both;
    }

    /* little pop / overshoot */
    @keyframes contextPop{
        0%{
            transform: translateY(14px) scale(.975);
            opacity: 0;
            filter: blur(8px);
        }
        60%{
            transform: translateY(-2px) scale(1.012);
            opacity: 1;
            filter: blur(0);
        }
        100%{
            transform: translateY(0) scale(1);
            opacity: 1;
            filter: blur(0);
        }
    }

    /* exit animation (when show class removed) */
    .contextPanel.isHiding{
        animation: contextOut .24s ease both;
    }

    @keyframes contextOut{
        from{
            transform: translateY(0) scale(1);
            opacity: 1;
            filter: blur(0);
        }
        to{
            transform: translateY(10px) scale(.985);
            opacity: 0;
            filter: blur(6px);
        }
    }

    /* respect reduced motion */
    @media (prefers-reduced-motion: reduce){
        .contextPanel,
        .contextPanel.show,
        .contextPanel.isHiding{
            animation: none !important;
            transition: none !important;
            transform: none !important;
            filter: none !important;
            opacity: 1 !important;
        }
    }

/* ===== COLOFON BUTTON ===== */
.colofonBtn{
  position:fixed;
  bottom:20px;
  right:20px;
  padding:10px 16px;
  border-radius:999px;
  border:none;
  background:#ff9f43;
  color:#111;
  font-weight:600;
  cursor:pointer;
  z-index:300; /* hoger dan startPanel */
}

/* ===== OVERLAY ===== */
.colofonOverlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.4);
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  pointer-events:none;
  transition:opacity .35s ease;
  z-index:400;
}

.colofonOverlay.show{
  opacity:1;
  pointer-events:auto;
}

/* ===== PANEL ===== */
.colofonPanel{
  width:90%;
  max-width:1100px;
  height:85vh;
  background:#fff;

  display:grid;                /* 🔥 DIT IS DE KEY */
  grid-template-columns: 2fr 1fr;

  border-radius:18px;
  overflow:hidden;
}
.colofonOverlay.show .colofonPanel{
  transform:translateY(0);
}

/* ===== LEFT CONTENT ===== */
.colofonContent{
  padding:40px;
  overflow-y:auto;
  font-family:Roboto, Arial, sans-serif;
  color:#111;
}

.colofonContent h1{
  margin-top:0;
  font-size:36px;
}

.colofonContent h2{
  margin-top:32px;
  font-size:18px;
}

.colofonContent ul{
  padding-left:18px;
}

.colofonContent li{
  margin-bottom:6px;
  font-size:14px;
}

.small{
  font-size:12px;
  opacity:.6;
  margin-top:32px;
}

/* ===== RIGHT ORANGE BLOCK ===== */
.colofonVisual{
  background:#ff9f43;
  width:100%;
  height:100%;
}



/* ===== CLOSE BUTTON ===== */
.closeColofon{
  position:absolute;
  top:20px;
  right:20px;
  background:none;
  border:none;
  font-size:32px;
  cursor:pointer;
  z-index:10;
}