/* ============================================================
   Herinneringen in Beeld — presentatie-speler
   Rustgevend, sereen, professioneel. Bewegende achtergrond +
   zachte Ken Burns op foto's + crossfades.
   ============================================================ */

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }

.player-body {
    background: #05080b;
    overflow: hidden;
    font-family: 'Inter', system-ui, sans-serif;
    color: #fff;
    -webkit-font-smoothing: antialiased;
}

.stage {
    position: fixed;
    inset: 0;
    overflow: hidden;
    background: var(--bg);
    font-family: var(--font);
    cursor: default;
}

/* ── Achtergrondlagen ───────────────────────────────────── */
.bg-layer { position: absolute; inset: -5%; z-index: 0; }
.bg-layer video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Foto-achtergrond in twee lagen: statische basis + rimpelend water */
.bg-photo { position: absolute; inset: 0; }
.photo-base, .photo-water {
    position: absolute; inset: 0;
    background-size: cover; background-position: center;
}
/* Alleen de waterzone rimpelt; bergen en lucht blijven scherp. */
.photo-water {
    filter: url(#water-ripple);
    will-change: filter;
}
.bg-tint {
    position: absolute; inset: 0; z-index: 3;
    background: var(--overlay);
    pointer-events: none;
}

/* WATER — diepe gloed met glinsterende lichtripples */
.bg--water { background:
    radial-gradient(120% 90% at 50% -10%, #143a47 0%, #0b1f29 55%, #07151c 100%); }
.bg--water::before {
    content: ""; position: absolute; inset: -20%;
    background:
        radial-gradient(40% 30% at 30% 35%, rgba(159,214,224,0.28), transparent 70%),
        radial-gradient(45% 35% at 70% 60%, rgba(120,190,205,0.22), transparent 70%),
        radial-gradient(30% 25% at 50% 80%, rgba(200,240,245,0.18), transparent 70%);
    filter: url(#water-distort) blur(6px);
    animation: drift 26s ease-in-out infinite alternate;
    mix-blend-mode: screen;
}
.bg--water::after {
    content: ""; position: absolute; inset: 0;
    background: repeating-linear-gradient(115deg,
        rgba(255,255,255,0.04) 0 2px, transparent 2px 26px);
    animation: shimmer 14s linear infinite;
    opacity: 0.5;
}

/* GARDEN — zacht groen ochtendlicht */
.bg--garden { background:
    radial-gradient(120% 100% at 50% 0%, #2a4421 0%, #16280f 60%, #0c1a08 100%); }
.bg--garden::before {
    content: ""; position: absolute; inset: -10%;
    background:
        radial-gradient(50% 40% at 25% 20%, rgba(220,240,180,0.30), transparent 70%),
        radial-gradient(45% 40% at 80% 70%, rgba(150,200,120,0.22), transparent 70%);
    animation: drift 32s ease-in-out infinite alternate;
    mix-blend-mode: screen;
}

/* TREES — warm gefilterd zonlicht, zacht wiegend */
.bg--trees { background:
    radial-gradient(120% 100% at 50% 0%, #3a2c14 0%, #221808 60%, #140d04 100%); }
.bg--trees::before {
    content: ""; position: absolute; inset: -12%;
    background:
        radial-gradient(35% 30% at 30% 25%, rgba(255,220,150,0.34), transparent 70%),
        radial-gradient(40% 35% at 68% 55%, rgba(230,180,110,0.24), transparent 70%),
        radial-gradient(25% 22% at 50% 85%, rgba(255,235,190,0.18), transparent 70%);
    filter: blur(4px);
    transform-origin: 50% 0%;
    animation: sway 16s ease-in-out infinite alternate;
    mix-blend-mode: screen;
}

/* BLOSSOM — tedere voorjaarsgloed */
.bg--blossom { background:
    radial-gradient(120% 100% at 50% 0%, #4a2438 0%, #2a1622 60%, #1a0e15 100%); }
.bg--blossom::before {
    content: ""; position: absolute; inset: -10%;
    background:
        radial-gradient(45% 40% at 30% 30%, rgba(255,200,220,0.28), transparent 70%),
        radial-gradient(40% 35% at 75% 65%, rgba(255,170,200,0.20), transparent 70%);
    animation: drift 30s ease-in-out infinite alternate;
    mix-blend-mode: screen;
}

@keyframes drift {
    0%   { transform: translate3d(0,0,0) scale(1.02); }
    100% { transform: translate3d(-3%, 2%, 0) scale(1.08); }
}
@keyframes sway {
    0%   { transform: rotate(-1.1deg) translateX(-1%); }
    100% { transform: rotate(1.1deg)  translateX(1%); }
}
@keyframes shimmer {
    0%   { background-position: 0 0; }
    100% { background-position: 600px 0; }
}

/* Zwevende deeltjes (motes / bloesem), door JS toegevoegd */
.particle {
    position: absolute; top: -8%; z-index: 2;
    border-radius: 50%;
    pointer-events: none;
    will-change: transform, opacity;
}
.particle.mote {
    background: radial-gradient(circle, rgba(255,255,235,0.9), rgba(255,255,210,0) 70%);
    animation: rise linear infinite;
}
.particle.petal {
    background: radial-gradient(circle at 35% 30%, #ffd7e6, #f6a8c6 60%, #e98bb0 100%);
    border-radius: 60% 0 60% 60%;
    animation: fall linear infinite;
}
@keyframes rise {
    0%   { transform: translateY(110vh) translateX(0) scale(0.8); opacity: 0; }
    10%  { opacity: 0.9; }
    90%  { opacity: 0.7; }
    100% { transform: translateY(-12vh) translateX(40px) scale(1); opacity: 0; }
}
@keyframes fall {
    0%   { transform: translateY(-12vh) translateX(0) rotate(0deg); opacity: 0; }
    12%  { opacity: 0.95; }
    100% { transform: translateY(112vh) translateX(120px) rotate(420deg); opacity: 0; }
}

/* ── Dia's ──────────────────────────────────────────────── */
.slides { position: absolute; inset: 0; z-index: 5; }
.slide {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity 1.8s ease;
    pointer-events: none;
}
.slide.is-active { opacity: 1; }

/* Titeldia */
.slide-title { flex-direction: column; text-align: center; padding: 6vh 8vw; }
.slide-title::before {
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background: radial-gradient(ellipse 58% 46% at 50% 48%,
        rgba(4,16,22,0.62) 0%, rgba(4,16,22,0.30) 46%, transparent 72%);
}
.slide-title > * { position: relative; z-index: 1; }
.slide-title .eyebrow {
    letter-spacing: 0.35em; text-transform: uppercase;
    font-family: 'Inter', sans-serif; font-weight: 300;
    font-size: clamp(11px, 1.1vw, 14px); color: var(--accent);
    opacity: 0; animation: rise-in 2s ease 0.3s forwards;
}
.slide-title h1 {
    font-weight: 500; line-height: 1.05; margin: 2.2vh 0 1.4vh;
    font-size: clamp(34px, 5.6vw, 84px); color: var(--text);
    text-shadow: 0 2px 24px rgba(0,0,0,0.55), 0 1px 6px rgba(0,0,0,0.4);
    opacity: 0; animation: rise-in 2.2s ease 0.6s forwards;
}
.slide-title .dates {
    font-size: clamp(15px, 1.8vw, 24px); color: var(--text); opacity: 0.85;
    font-style: italic;
    animation: rise-in 2.2s ease 1s forwards; opacity: 0;
}
.slide-title .hobbies {
    margin-top: 3vh; font-family: 'Inter', sans-serif; font-weight: 300;
    letter-spacing: 0.12em; font-size: clamp(12px, 1.2vw, 16px);
    color: var(--text); opacity: 0; animation: rise-in 2.2s ease 1.4s forwards;
}
.slide-title .hobbies span { opacity: 0.7; }
.slide-title .divider {
    width: 0; height: 1px; margin: 2.4vh auto 0;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
    animation: grow-line 2.4s ease 1.2s forwards;
}
@keyframes rise-in { from { opacity: 0; transform: translateY(18px); } to { opacity: var(--to,1); transform: none; } }
@keyframes grow-line { to { width: min(280px, 40vw); } }

/* Fotodia — ingelijste foto met Ken Burns, bewegende achtergrond eromheen */
.slide-photo { flex-direction: column; padding: 7vh 7vw 9vh; }
.frame {
    position: relative; max-width: 78vw; max-height: 72vh;
    border-radius: 4px; overflow: hidden;
    box-shadow: 0 30px 80px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.06);
}
.frame::after { /* zachte binnen-vignet */
    content: ""; position: absolute; inset: 0; pointer-events: none;
    box-shadow: inset 0 0 90px rgba(0,0,0,0.35);
}
.frame img {
    display: block; max-width: 78vw; max-height: 72vh;
    width: auto; height: auto; object-fit: cover;
}
.slide.is-active .frame img { animation: var(--kb, kb1) 14s ease-out forwards; }
@keyframes kb1 { from { transform: scale(1.0)  translate(0,0); }      to { transform: scale(1.09) translate(-2%, -1.5%); } }
@keyframes kb2 { from { transform: scale(1.08) translate(2%, 1%); }   to { transform: scale(1.0)  translate(0,0); } }
@keyframes kb3 { from { transform: scale(1.0)  translate(1%, -1%); }  to { transform: scale(1.10) translate(-1.5%, 1.5%); } }
@keyframes kb4 { from { transform: scale(1.07) translate(-1.5%,0); } to { transform: scale(1.0)  translate(1%, -1%); } }

.caption {
    margin-top: 2.6vh; font-family: 'Inter', sans-serif; font-weight: 300;
    letter-spacing: 0.06em; font-size: clamp(13px, 1.4vw, 18px);
    color: var(--text); opacity: 0;
    text-shadow: 0 1px 16px rgba(0,0,0,0.5);
    animation: rise-in 1.8s ease 0.8s forwards;
}

/* Slotdia */
.slide-closing { flex-direction: column; text-align: center; }
.slide-closing .dove { font-size: clamp(34px, 4vw, 56px); opacity: 0; animation: rise-in 2.4s ease forwards; }
.slide-closing p {
    font-size: clamp(20px, 2.6vw, 38px); font-style: italic; line-height: 1.4;
    color: var(--text); margin: 2.4vh 0 0; opacity: 0;
    animation: rise-in 2.4s ease 0.6s forwards;
}
.slide-closing strong { font-style: normal; font-weight: 500; color: var(--accent); }

/* ── Bediening ──────────────────────────────────────────── */
.controls {
    position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%);
    z-index: 20; display: flex; align-items: center; gap: 14px;
    opacity: 0; transition: opacity 0.4s ease;
}
.stage:hover .controls, .controls.show { opacity: 1; }
.ctrl {
    width: 42px; height: 42px; border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.18);
    background: rgba(10,14,18,0.4); backdrop-filter: blur(8px);
    color: #fff; font-size: 18px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.25s, transform 0.25s;
}
.ctrl:hover { background: rgba(255,255,255,0.16); transform: scale(1.06); }
.ctrl-play { font-size: 13px; }

.progress {
    position: absolute; top: -14px; left: 0;
    height: 2px; width: 0; background: var(--accent);
    border-radius: 2px; transition: width 0.2s linear;
}
.controls { width: min(640px, 80vw); justify-content: center; }
.progress { width: 100%; background: rgba(255,255,255,0.12); }
.progress > i {
    display: block; height: 100%; width: 0; background: var(--accent);
    transition: width 0.25s linear;
}

/* ── Demo-elementen ─────────────────────────────────────── */
.demo-badge {
    position: absolute; top: 18px; left: 18px; z-index: 20;
    background: rgba(255,255,255,0.12); backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,0.2);
    color: #fff; font-family: 'Inter', sans-serif; font-size: 11px;
    letter-spacing: 0.2em; text-transform: uppercase;
    padding: 6px 12px; border-radius: 20px;
}
.template-switcher {
    position: absolute; top: 16px; right: 18px; z-index: 20;
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    font-family: 'Inter', sans-serif; font-size: 12px;
    background: rgba(10,14,18,0.4); backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.14);
    padding: 8px 12px; border-radius: 24px; max-width: 60vw;
}
.template-switcher span { opacity: 0.6; margin-right: 4px; }
.template-switcher a {
    color: rgba(255,255,255,0.75); text-decoration: none;
    padding: 4px 10px; border-radius: 16px; transition: background 0.2s, color 0.2s;
}
.template-switcher a:hover { background: rgba(255,255,255,0.1); color: #fff; }
.template-switcher a.is-active { background: var(--accent); color: #102027; font-weight: 500; }

.player-back {
    position: absolute; top: 18px; left: 18px; z-index: 20;
    background: rgba(10,14,18,0.4); backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.18); color: #fff;
    text-decoration: none; font-family: 'Inter', sans-serif; font-size: 13px;
    padding: 8px 14px; border-radius: 22px; transition: background 0.2s;
}
.player-back:hover { background: rgba(255,255,255,0.16); }

.svg-defs { position: absolute; width: 0; height: 0; }

@media (prefers-reduced-motion: reduce) {
    .bg-layer::before, .bg-layer::after, .particle, .bg-photo { animation: none !important; }
    .slide.is-active .frame img { animation: none !important; transform: scale(1.03); }
    /* Tekst direct tonen i.p.v. infaden. */
    .slide-title .eyebrow, .slide-title h1, .slide-title .dates,
    .slide-title .hobbies, .caption, .slide-closing .dove, .slide-closing p {
        animation: none !important; opacity: 1 !important; transform: none !important;
    }
    .slide-title .divider { animation: none !important; width: min(280px, 40vw); }
}