/*
  Intro (~4 s, bij elke keer laden): het gouden hek zwaait open, de camera
  loopt erdoor, het kasteel komt uit de roze waas naar voren, en daarna
  komt de kaart van onderen omhoog.

  Werking:
  - html.intro-actief   (gezet in <head>) beginstand, animaties gepauzeerd
  - html.intro-start    (intro.js, zodra de beelden er zijn) animaties lopen
  - html.intro-klaar    (intro.js, na afloop) hek en waas zijn verwijderd
  Elke animatie eindigt in de gewone stand van de pagina, dus als intro.js
  nooit iets doet, staat alles na afloop toch goed.

  Tijdlijn (start = 0 s):
    0,3 – 1,8   deuren zwaaien open (rechts 0,15 s later)
    1,4 – 3,0   door het hek: hek schaalt op en vervaagt
    1,2 – 3,0   kasteel komt naar voren, roze waas trekt weg
    2,8 – 4,0   kop en kaarten komen in beeld
*/

:root {
  --gate-width: min(240vw, 150vh); /* breedte van het hek (beeld is 1200x670) */
  --gate-bottom: 2vh;
  --hinge-left: 34.58%; /* scharnieren, zie scripts/beelden-voorbereiden.py */
  --hinge-right: 65.17%;
}

/* ------------------------------------------------------------------ */
/* Lagen                                                                */
/* ------------------------------------------------------------------ */

.intro-hek,
.intro-waas {
  display: none;
}

.intro-actief .intro-hek,
.intro-actief .intro-waas {
  display: block;
}

/* Roze waas voor het kasteel, die bij het naar binnen lopen wegtrekt. */
.intro-waas {
  position: absolute;
  inset: -10%;
  background:
    radial-gradient(ellipse 60% 45% at 50% 40%, rgb(255 245 250 / 0.7), transparent 75%),
    radial-gradient(ellipse 90% 70% at 50% 60%, rgb(248 205 222 / 0.95), rgb(248 205 222 / 0.6) 70%);
}

.intro-hek {
  position: absolute;
  left: 50%;
  bottom: var(--gate-bottom);
  width: var(--gate-width);
  aspect-ratio: 1200 / 670;
  margin-left: calc(var(--gate-width) / -2);
  transform-origin: 50% 70%;
  perspective: 650px;
  perspective-origin: 50% 70%;
}

.intro-hek__deel {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.intro-hek__deel--links {
  transform-origin: var(--hinge-left) 50%;
}

.intro-hek__deel--rechts {
  transform-origin: var(--hinge-right) 50%;
}

/* ------------------------------------------------------------------ */
/* Animaties                                                            */
/* ------------------------------------------------------------------ */

/* Zolang de intro actief is: gepauzeerd in de beginstand ("both paused").
   intro-start zet ze aan (die regel moet NA deze regels staan). */
.intro-actief .intro-hek__deel--links {
  animation: deur-links 1.5s cubic-bezier(0.45, 0, 0.3, 1) 0.3s both paused;
}

.intro-actief .intro-hek__deel--rechts {
  animation: deur-rechts 1.5s cubic-bezier(0.45, 0, 0.3, 1) 0.45s both paused;
}

.intro-actief .intro-hek {
  animation: door-het-hek 1.6s cubic-bezier(0.55, 0, 0.6, 1) 1.4s both paused;
}

.intro-actief .intro-waas {
  animation: waas-weg 1.8s ease-in-out 1.2s both paused;
}

.intro-actief .scene__kasteel {
  animation: kasteel-naar-voren 1.8s cubic-bezier(0.25, 0.1, 0.25, 1) 1.2s both paused;
}

.intro-actief .site-header {
  animation: kop-in 0.8s ease-out 3s both paused;
}

.intro-actief .site-main {
  animation: kaart-omhoog 1.2s cubic-bezier(0.2, 0.8, 0.25, 1) 2.8s both paused;
}

.intro-start .intro-hek,
.intro-start .intro-hek__deel--links,
.intro-start .intro-hek__deel--rechts,
.intro-start .intro-waas,
.intro-start .scene__kasteel,
.intro-start .site-header,
.intro-start .site-main {
  animation-play-state: running;
}

@keyframes deur-links {
  from { transform: rotateY(0deg); }
  to { transform: rotateY(-80deg); }
}

@keyframes deur-rechts {
  from { transform: rotateY(0deg); }
  to { transform: rotateY(80deg); }
}

@keyframes door-het-hek {
  0% { transform: scale(1); opacity: 1; }
  55% { opacity: 1; }
  100% { transform: scale(2.2); opacity: 0; } /* niet groter: anders te grote laag voor telefoons */
}

@keyframes waas-weg {
  from { opacity: 1; transform: scale(1); }
  to { opacity: 0; transform: scale(1.35); }
}

@keyframes kasteel-naar-voren {
  from { transform: translateY(6vh) scale(0.78); opacity: 0.55; }
  to { transform: none; opacity: 1; }
}

@keyframes kop-in {
  from { opacity: 0; transform: translateY(-1rem); pointer-events: none; }
  to { opacity: 1; transform: none; pointer-events: auto; }
}

@keyframes kaart-omhoog {
  from { opacity: 0; transform: perspective(1200px) translateY(40vh) rotateX(22deg); pointer-events: none; }
  60% { opacity: 1; }
  to { opacity: 1; transform: none; pointer-events: auto; }
}