/* ========== Basis ========== */
:root{
  --blue:#78d6e3; /* lichtblauw uit cover (benadering) */
  --blue-deep:#06313a; /* donkerblauw/teal */
  --black:#0b0f10;
  --red:#e22d2d; /* rood voor slogans */
  --white:#f7f7f7;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--blue-deep);color:var(--white);font-family:Segoe UI, Roboto, Helvetica, Arial, sans-serif;scroll-behavior:smooth}
img{max-width:100%;display:block}
.container{width:min(1100px, 92%);margin-inline:auto}
.skip{position:absolute;left:-9999px;top:auto}
.skip:focus{left:1rem;top:1rem;background:#000;color:#fff;padding:.4rem .6rem;border-radius:.4rem}

/* ========== Navigatie ========== */
.nav{position:fixed;inset:0 auto auto 0;height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 1rem;background:linear-gradient(180deg, rgba(11,15,16,.9), rgba(11,15,16,.2));backdrop-filter:blur(6px);z-index:40;border-bottom:1px solid rgba(255,255,255,.06)}
.nav .brand{font-weight:800;letter-spacing:1px}
.nav .brand span{color:var(--red)}
.nav a{color:#e8f9ff;text-decoration:none;margin-left:1rem;opacity:.9}
.nav a:hover{opacity:1}

/* ========== Hero ========== */
.hero{min-height:100vh;display:grid;place-items:center;padding-top:64px;position:relative;overflow:hidden}
.hero .hero-inner{display:grid;grid-template-columns:1.2fr .9fr;gap:2rem;align-items:center;width:min(1200px,92%);z-index:2}
@media (max-width:900px){.hero .hero-inner{grid-template-columns:1fr} .cover{order:-1}}

.hero .blue-vibe{position:absolute;inset:-20% -10% -20% -10%;background:
  radial-gradient(1200px 700px at 60% 40%, rgba(120,214,227,.6), transparent),
  radial-gradient(900px 500px at 30% 60%, rgba(120,214,227,.35), transparent);
  filter:blur(6px);opacity:.9}
.hero .forest-overlay{position:absolute;inset:0;background:url('assets/img/de-challenge-boek-cover.jpg') center/cover no-repeat;mix-blend-mode:multiply;opacity:.45;filter:saturate(110%) contrast(110%)}

.tape{position:absolute;top:10%;left:-10%;width:140%;transform:rotate(-12deg);opacity:.9;mix-blend-mode:multiply;pointer-events:none;z-index:1}

.title-card .title-top{display:block;font-size:.9rem;opacity:.9;letter-spacing:.2em}
.title-card .title{display:block;font-family:Impact, Haettenschweiler, 'Arial Black', sans-serif;font-size:clamp(2.6rem, 6vw, 6rem);letter-spacing:.04em;text-shadow:0 6px 20px rgba(0,0,0,.55)}
.title-card .author{display:block;margin-top:.4rem;font-size:1.05rem;opacity:.9}

.slogans{margin:1rem 0 1.4rem;display:grid;gap:.5rem}
.slogans p{margin:0;font-weight:800;color:var(--red);text-transform:uppercase;letter-spacing:.02em}

/* Glitch effect in rood met RGB schaduw */
.glitch{position:relative;display:inline-block;font-size:clamp(1.1rem,2.2vw,1.6rem)}
.glitch::before,.glitch::after{content:attr(data-text);position:absolute;left:0;top:0}
.glitch::before{transform:translate(1px,-1px);color:#00f;mix-blend-mode:screen;opacity:.35}
.glitch::after{transform:translate(-1px,1px);color:#0ff;mix-blend-mode:screen;opacity:.35}
.glitch{animation:gl 2.2s infinite ease-in-out}
@keyframes gl{0%,100%{text-shadow:0 0 0 rgba(0,0,0,0)}20%{text-shadow:2px 0 0 rgba(226,45,45,.9)}40%{text-shadow:-2px 0 0 rgba(226,45,45,.9)}60%{text-shadow:2px 0 0 rgba(226,45,45,.9)}80%{text-shadow:-1px 0 0 rgba(226,45,45,.9)}}

.cta{display:inline-block;background:var(--red);color:white;text-decoration:none;padding:.8rem 1.1rem;border-radius:.4rem;font-weight:800;box-shadow:0 10px 30px rgba(226,45,45,.35);transition:transform .2s, box-shadow .2s}
.cta:hover{transform:translateY(-2px);box-shadow:0 14px 36px rgba(226,45,45,.5)}

.cover{align-self:end;justify-self:center;background:rgba(0,0,0,.25);padding:.6rem;border-radius:.6rem;border:1px solid rgba(255,255,255,.08);backdrop-filter:blur(3px)}
.cover figcaption{font-size:.8rem;opacity:.75;margin-top:.4rem}

/* ========== Secties ========== */
.section{padding:80px 0;background:linear-gradient(180deg, rgba(6,49,58,1), rgba(6,49,58,.92))}
.section:nth-of-type(even){background:linear-gradient(180deg, rgba(6,49,58,.92), rgba(6,49,58,1))}
.section h2{font-family:Impact, Haettenschweiler, 'Arial Black', sans-serif;letter-spacing:.02em;font-size:clamp(1.6rem,3.5vw,2.4rem);margin:0 0 1rem}

/* Auteur */
.auteur-grid{display:grid;grid-template-columns:300px 1fr;gap:2rem;align-items:center}
@media (max-width:800px){.auteur-grid{grid-template-columns:1fr}}
.auteur-foto{border-radius:.6rem;overflow:hidden;box-shadow:0 20px 40px rgba(0,0,0,.35)}
.auteur-tekst p{line-height:1.7}

/* Boeken */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
@media (max-width:900px){.cards{grid-template-columns:1fr}}
.card{background:#0f1d21;border:1px solid rgba(255,255,255,.06);border-radius:.8rem;overflow:hidden;position:relative;box-shadow:0 10px 30px rgba(0,0,0,.3);transition:transform .2s}
.card h3{margin:.8rem;font-weight:900;letter-spacing:.02em}
.card:hover{transform:translateY(-6px)}

/* Fragmenten / tijdlijn */
.fragmenten{position:relative}
.timeline{display:grid;gap:1.4rem;margin-top:.8rem}
.moment{display:grid;grid-template-columns:320px 1fr;gap:1rem;background:#0f1d21;border:1px solid rgba(255,255,255,.06);border-radius:.8rem;overflow:hidden}
@media (max-width:900px){.moment{grid-template-columns:1fr}}
.moment-media img{height:100%;width:100%;object-fit:cover}
.moment-tekst{padding:1rem}
.moment-tekst h3{margin:0 0 .4rem;color:var(--blue)}

/* Reveal on scroll */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .8s ease, transform .8s ease}
.reveal.show{opacity:1;transform:translateY(0)}

/* Tilt micro-interactie (via JS klasse) */
.tilt{transform-style:preserve-3d}
.tilt .shadow{position:absolute;inset:0;background:radial-gradient(400px 200px at 50% 120%, rgba(226,45,45,.25), transparent)}

/* Footer */
.footer{padding:40px 0;text-align:center;background:#0b0f10;color:#cdeaf1;font-size:.95rem}