/* =============================================
   RESET & BASE
   ============================================= */

*, *::before, *::after { box-sizing: border-box; }
/* box-sizing: border-box betyder at padding og border INKLUDERES i elementets bredde/højde
   I stedet for at lægge til (default: content-box). Gør layout langt mere forudsigeligt.
   *::before og *::after sikrer det også gælder for pseudo-elementer */

body {
    margin: 0;
    /* Browsere har standard margin på body — vi nulstiller for fuld kontrol */
    overflow-x: hidden;
    /* Forhindrer vandret scrollbar hvis animerede elementer midlertidigt er udenfor viewport */
    background: #000;
    /* Sort baggrund: billeder og video ser bedre ud mod sort, og det giver en cinematisk fornemmelse */
    font-family: 'Playfair Display', serif;
    /* Serif-font giver et elegant, redaktionelt udtryk — passer til storytelling-formatet */
}


/* =============================================
   SCROLLYVIDEO CONTAINER
   ============================================= */

#scrolly-video {
    width: 100%;
    height: 100%;
    /* Fylder sin forældrecontainer (den 1100vh høje main) fuldstændigt */
    z-index: 1;
    /* z-index styrer lag-rækkefølge. 1 her, men biblioteket sætter selv sin sticky video til et højere lag */
}


/* =============================================
   SCROLL HINT
   ============================================= */

.scroll-hint {
    position: fixed;
    /* fixed: elementet er låst til browservinduet og bevæger sig ikke med scroll */
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    /* Klassisk CSS-centrering: left:50% placerer venstre kant i midten, translateX(-50%) rykker elementet halvt tilbage */
    color: #fff;
    font-size: 1.8rem;
    /* rem = relativ til root-fontstørrelse (typisk 16px), dvs. 1.8 × 16 = ~29px */
    letter-spacing: 5px;
    /* Spreder bogstaverne ud for et mere dramatisk/typografisk udtryk */
    text-transform: uppercase;
    z-index: 5;
    /* Ligger over scrolly-video (z-index 1) men under .scene (z-index 10) */
    text-shadow: 0 0 10px #000;
    /* Sort glow-effekt gør teksten læsbar uanset baggrundsfarve */
    animation: blink 2s infinite;
    /* Kalder @keyframes blink nedenfor — 2 sekunder pr. cyklus, gentager for evigt */
    margin: 0;
    /* Fjerner standard <p>-margin */
}

@keyframes blink {
    /* Definerer animationens forløb med keyframes (nøglebilleder) */
    0%, 100% { opacity: .2; } /* Start og slut: næsten usynlig */
    50%       { opacity: .8; } /* Midtvejs: næsten fuldt synlig */
    /* Dette skaber en blød pulserende effekt */
}


/* =============================================
   SCENE (fælles stil for alle billede-sektioner)
   ============================================= */

.scene {
    width: 100vw;
    height: 100vh;
    /* vw/vh = viewport-enheder: 100vw = fuld skærmbredde, 100vh = fuld skærmhøjde */
    display: flex;
    justify-content: center;
    align-items: center;
    /* Flexbox centrerer evt. indhold vandret og lodret */
    background: center/cover fixed no-repeat black;
    /* Shorthand for background-position, background-size, background-attachment, background-repeat og background-color
       center/cover: billede centreres og skaleres til altid dække hele elementet (uden hvide kanter)
       fixed: parallax-effekt — baggrundsbilledet scroller ikke med siden
       black: fallback-farve hvis billedet ikke er loadet */
    position: relative;
    /* relative gør elementet til positioning-kontekst for evt. absolute børn */
    z-index: 10;
    /* Høj z-index sikrer at scenerne ligger over scroll-hint og scrolly-video */
    margin: 0;
    /* Nulstiller standard <figure>-margin (browsere tilføjer margin til figure som standard) */
}
/* =============================================
   BILLEDTEKST (CAPTION)
   ============================================= */

.caption {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 60px 20px; /* Mere luft i top/bund for et elegant look */

    /* Typografi */
    color: #fff;
    font-family: 'Playfair Display', serif; /* Samme font som resten af siden */
    font-size: 3rem;       /* Stor og tydelig tekst */
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 4px;
    line-height: 1.2;

    /* Læselighed og visuelt hierarki */
    text-shadow: 2px 2px 15px rgba(0, 0, 0, 0.7);
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, transparent 100%);

    z-index: 15; /* Sørger for den ligger ovenpå billedet */
    pointer-events: none; /* Gør at man stadig kan klikke "igennem" teksten */
}

/* =============================================
   SCROLL-DREVNE ANIMATIONER
   ============================================= */

.fly-in-left {
    animation: slide-from-left linear both;
    /* linear: jævn hastighed gennem hele animationen (ingen ease-in/out)
       both: animation-fill-mode both = elementet holder start-state før animation og slut-state efter */
    animation-timeline: view();
    /* Moderne CSS: animation-timeline: view() kobler animationen til elementets position i viewport
       Animation starter når elementet begynder at komme i syne, slutter når det fylder viewporten */
    animation-range: entry 25% cover 50%;
    /* entry 25%: animation starter når 25% af elementet er synligt i viewport
       cover 50%: animation slutter når elementet dækker 50% af viewport
       Dette skaber en glidende indgang der føles naturlig */
}

.fly-in-right {
    animation: slide-from-right linear both;
    animation-timeline: view();
    animation-range: entry 25% cover 50%;
    /* Samme logik som fly-in-left, men fra højre side */
}

@keyframes slide-from-left {
    from { transform: translateX(-100vw); opacity: 0; }
    /* Starter 100% af viewport-bredden til venstre (helt ude af syne) og usynlig */
    /* "to" er udeladt — browseren antager "to" = ingen transform + opacity 1 (standard) */
}

@keyframes slide-from-right {
    from { transform: translateX(100vw); opacity: 0; }
    /* Samme men fra højre: positiv 100vw = til højre for viewport */
}


/* =============================================
   SLUTVIDEO (vinke.mp4)
   ============================================= */

.end-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* object-fit: cover på video svarer til background-size: cover — fylder containeren uden forvrængning */
    cursor: pointer;
    /* Fortæller brugeren at videoen er klikbar */
}


/* =============================================
   PLAY OVERLAY
   ============================================= */

.play-overlay {
    position: absolute;
    /* absolute er relativt til nærmeste positioned forælder (.final-scene har position: relative) */
    inset: 0;
    /* Shorthand for top:0; right:0; bottom:0; left:0 — dækker hele forælderen */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* Flexbox-kolonne centrerer play-knap og tekst lodret og vandret */
    background: rgba(0,0,0,.45);
    /* Semi-transparent sort overlay gør play-knappen lettere at se */
    z-index: 20;
    /* Skal ligge over videoen (som ikke har explicit z-index) */
    cursor: pointer;
    transition: opacity .5s;
    /* Jævn fade-effekt på 0.5 sekunder når opacity ændres via JavaScript */
}

.play-btn-circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    /* 50% border-radius på et kvadratisk element = perfekt cirkel */
    border: 3px solid #fff;
    background: rgba(255,255,255,.15);
    /* Gennemsigtig hvid baggrund — giver glaseffekt */
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform .2s, background .2s;
    /* Animerer både størrelse og baggrund ved hover — to egenskaber i én transition */
}

.play-overlay:hover .play-btn-circle {
    /* CSS descendant hover: når musen er over .play-overlay, style .play-btn-circle */
    transform: scale(1.1);
    /* Forstørrer 10% ved hover for feedback */
    background: rgba(255,255,255,.25);
    /* Lysere baggrund ved hover */
}

.play-label {
    color: #fff;
    font-style: italic;
    font-size: 1.1rem;
    margin: 16px 0 0;
    /* margin shorthand: top=16px, højre=0, bund=0, venstre=0 */
    letter-spacing: 2px;
    text-shadow: 0 0 10px rgba(0,0,0,.8);
}


/* =============================================
   TILBAGE-TIL-TOP KNAP
   ============================================= */

.top-btn {
    position: fixed;
    /* fixed: forbliver i hjørnet uanset scroll-position */
    bottom: 40px;
    right: 40px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    /* Cirkulær knap */
    background: #e32;
    /* Rød farve — signalerer en handlingsknap og skiller sig ud fra sort baggrund */
    border: none;
    /* Fjerner standard browser-styling på knapper */
    color: #fff;
    font-size: 2rem;
    cursor: pointer;
    z-index: 999;
    /* Meget højt z-index — knappen skal altid ligge øverst i lag-stakken */
    box-shadow: 0 4px 20px rgba(0,0,0,.4);
    /* Skygge giver dybde og løfter knappen visuelt fra baggrunden */
    display: flex;
    justify-content: center;
    align-items: center;
    /* Centrerer pil-symbolet i cirklen */
    transition: transform .2s, background .2s;
    line-height: 1;
    /* Forhindrer at linjehøjde forskyver ikonets centrering */
}

.top-btn:hover {
    background: #c00;
    /* Mørkere rød ved hover — visuelt feedback */
    transform: scale(1.1) translateY(-3px);
    /* Forstørres let og løftes 3px opad — subtil "løft"-effekt */
}