/* ============================================================
   Daan & Luanna — one continuous cinematic scroll-film
   Warm dusk / impressionist · scrub + autopilot
   ============================================================ */

:root{
  --ink:#2a2136; --night:#171a35; --night-2:#0d1030;
  --cream:#f4ead6; --cream-soft:#efe3cd;
  --amber:#f2b25c; --amber-deep:#d98a3d;
  --gold:#c9a24a; --gold-soft:#d8bd7e;
  --serif:'Cormorant Garamond','Cormorant',Georgia,serif;
  --serif-body:'EB Garamond',Georgia,serif;
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{ box-sizing:border-box; margin:0; padding:0; }
button, a{ -webkit-tap-highlight-color:transparent; }
html{ overflow-anchor:none; }
body{ background:var(--night-2); color:var(--cream); font-family:var(--serif-body);
  -webkit-font-smoothing:antialiased; overflow-x:hidden; overflow-anchor:none; }

/* ================= Fixed film stage ================= */
#stage{ position:fixed; inset:0; z-index:0; overflow:hidden; background:var(--night-2); }
#film{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; display:block; }

.stage-vignette{ position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    radial-gradient(120% 92% at 50% 44%, transparent 46%, rgba(13,16,48,.26) 80%, rgba(13,16,48,.6) 100%),
    linear-gradient(to bottom, rgba(13,16,48,.12), transparent 20%, transparent 72%, rgba(13,16,48,.5)); }
.stage-grain{ position:absolute; inset:0; z-index:3; pointer-events:none; opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* ================= Overlay ================= */
#overlay{ position:fixed; inset:0; z-index:5; pointer-events:none; }

/* travel HUD */
.hud{ position:absolute; left:calc(clamp(16px,4vw,48px) + env(safe-area-inset-left)); top:calc(clamp(14px,4vh,42px) + env(safe-area-inset-top));
  opacity:0; transform:translateY(-10px); transition:opacity .6s var(--ease), transform .6s var(--ease);
  text-shadow:0 1px 12px rgba(13,16,48,.8); }
.hud.show{ opacity:1; transform:none; }
.hud-inner{ position:relative; padding:12px 16px; }
.hud-inner::before{ content:""; position:absolute; inset:0; border:1px solid rgba(201,162,74,.45);
  background:linear-gradient(160deg, rgba(23,26,53,.4), rgba(23,26,53,.14)); backdrop-filter:blur(3px); }
.hud-inner>*{ position:relative; }
.hud-row{ display:flex; align-items:center; gap:8px; font-family:var(--serif); font-size:clamp(10px,1.2vw,12px);
  letter-spacing:.26em; text-transform:uppercase; color:var(--gold-soft); }
.hud-plane{ color:var(--amber); }
.hud-dist{ display:flex; align-items:baseline; gap:6px; margin-top:2px; }
#hud-km{ font-family:var(--serif); font-weight:500; font-size:clamp(26px,4vw,40px); line-height:1; color:var(--cream); }
.hud-unit{ font-family:var(--serif); font-style:italic; font-size:clamp(12px,1.4vw,15px); color:var(--gold-soft); }

/* scroll-along hints */
#hints{ position:absolute; inset:0; }
.hint{ position:absolute; left:50%; top:50%; transform:translate(-50%,calc(-50% + 16px));
  width:max-content; max-width:88vw; text-align:center;
  font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:clamp(24px,4.4vw,52px); letter-spacing:.03em; color:var(--cream);
  text-shadow:0 2px 30px rgba(13,16,48,.95), 0 1px 4px rgba(13,16,48,.8);
  opacity:0; transition:opacity 1s var(--ease), transform 1s var(--ease); }
.hint.show{ opacity:1; transform:translate(-50%,-50%); }

/* final reveal */
.reveal{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.5rem; text-align:center; padding:8vh 6vw;
  /* soft translucent dark-blue veil: image stays visible, text pops */
  background:
    radial-gradient(135% 105% at 50% 46%, rgba(22,31,82,.40) 0%, rgba(13,18,52,.60) 62%, rgba(9,12,40,.74) 100%);
  -webkit-backdrop-filter:blur(1.5px); backdrop-filter:blur(1.5px);
  opacity:0; transform:scale(1.02); transition:opacity 1.1s var(--ease), transform 1.4s var(--ease); }
.reveal.show{ opacity:1; transform:none; }
.rv-eyebrow{ font-family:var(--serif); font-style:italic; letter-spacing:.34em; text-transform:uppercase;
  font-size:clamp(12px,1.6vw,16px); color:var(--gold-soft); margin-bottom:.6rem; }
.rv-couple{ font-family:var(--serif); font-weight:400; text-transform:uppercase; letter-spacing:.04em;
  font-size:clamp(40px,9vw,132px); line-height:.96; color:var(--cream);
  text-shadow:0 3px 34px rgba(13,16,48,.7); }
.rv-couple .amp{ font-style:italic; text-transform:none; color:var(--amber); padding:0 .1em; }
.rv-rule{ width:64px; height:1px; background:var(--gold); margin:1rem 0 .4rem; opacity:.85; }
.rv-date{ font-family:var(--serif); font-size:clamp(20px,3vw,34px); letter-spacing:.06em; color:var(--cream); }
.rv-place{ font-family:var(--serif); font-style:italic; font-size:clamp(15px,2vw,22px); letter-spacing:.08em; color:var(--cream-soft); }
.rv-btn{ pointer-events:none; margin-top:2rem; display:inline-block;
  font-family:var(--serif); font-style:italic; letter-spacing:.06em; font-size:clamp(15px,1.9vw,20px);
  color:var(--night); text-decoration:none; padding:.75em 2.1em;
  background:linear-gradient(120deg,var(--gold-soft),var(--amber)); box-shadow:0 12px 34px rgba(242,178,92,.34);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease); }
.reveal.show .rv-btn{ pointer-events:auto; }
.rv-btn:hover{ transform:translateY(-3px); box-shadow:0 18px 44px rgba(242,178,92,.5); }
.rv-more-link{ pointer-events:none; margin-top:1.5rem; display:inline-block;
  font-family:var(--serif); font-style:italic; letter-spacing:.05em;
  font-size:clamp(15px,2vw,20px); color:var(--cream); text-decoration:none;
  padding:.66em 1.9em; border:1.5px solid var(--gold); border-radius:999px;
  background:linear-gradient(160deg, rgba(201,162,74,.26), rgba(201,162,74,.08));
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  box-shadow:0 8px 26px rgba(201,162,74,.2);
  animation:morePulse 2.6s var(--ease) infinite;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease), color .3s var(--ease); }
.reveal.show .rv-more-link{ pointer-events:auto; }
.rv-more-link:hover{ transform:translateY(-2px); color:#fff; animation:none;
  background:linear-gradient(160deg, rgba(242,178,92,.4), rgba(201,162,74,.16));
  box-shadow:0 16px 38px rgba(242,178,92,.38); border-color:var(--amber); }
@keyframes morePulse{
  0%,100%{ box-shadow:0 8px 26px rgba(201,162,74,.16); border-color:rgba(201,162,74,.75); }
  50%{ box-shadow:0 10px 34px rgba(242,178,92,.42); border-color:var(--amber); }
}
@media (prefers-reduced-motion:reduce){ .rv-more-link{ animation:none; } }

/* ===== invitation letter page (uitnodiging.html) ===== */
.brief-page{ min-height:100vh; min-height:100svh; padding:8vh 5vw;
  display:flex; align-items:center; justify-content:center;
  background:radial-gradient(130% 90% at 50% 12%, #20244d 0%, #12163e 55%, #0d1030 100%); }
.brief-card{ position:relative; width:min(680px,94vw);
  background:linear-gradient(180deg,#f7edd7,#efe2c9); color:var(--ink);
  border:1px solid rgba(201,162,74,.55); border-radius:4px;
  padding:clamp(30px,7vw,68px) clamp(24px,6vw,64px);
  box-shadow:0 40px 90px rgba(0,0,0,.5); }
.brief-card::before{ content:""; position:absolute; inset:10px; border:1px solid rgba(201,162,74,.35); border-radius:2px; pointer-events:none; }
.brief-inner{ position:relative; }
.brief-eyebrow{ text-align:center; font-family:var(--serif); font-style:italic; letter-spacing:.22em;
  text-transform:uppercase; color:#b0812f; font-size:clamp(12px,3.2vw,15px); }
.brief-title{ text-align:center; font-family:var(--serif); font-weight:500; letter-spacing:.02em;
  font-size:clamp(30px,7vw,50px); line-height:1.02; margin:.35rem 0; color:var(--ink); }
.brief-emoji{ text-align:center; font-size:clamp(19px,5vw,24px); margin-top:.2rem; }
.brief-rule{ width:58px; height:1px; background:#c9a24a; margin:1.5rem auto 1.8rem; opacity:.8; }
.brief-greet{ font-family:var(--serif); font-style:italic; font-size:clamp(18px,4.8vw,23px); margin-bottom:1.1rem; color:var(--ink); }
.brief-body p{ font-family:var(--serif-body); font-size:clamp(15px,4vw,18px); line-height:1.72; margin:0 0 1.15rem; color:#3a3040; }
.brief-sign{ font-family:var(--serif); font-style:italic; font-size:clamp(18px,4.8vw,23px); margin-top:1.8rem; color:var(--ink); }
.brief-sign span{ display:block; }
.brief-actions{ display:flex; flex-wrap:wrap; gap:.9rem 1.4rem; align-items:center; justify-content:center; margin-top:2.6rem; }
.brief-btn{ display:inline-block; font-family:var(--serif); font-style:italic; letter-spacing:.05em;
  font-size:clamp(15px,4vw,19px); color:var(--night); text-decoration:none; padding:.7em 1.9em; border-radius:999px;
  background:linear-gradient(120deg,var(--gold-soft),var(--amber)); box-shadow:0 12px 30px rgba(242,178,92,.3);
  transition:transform .3s var(--ease); }
.brief-btn:hover{ transform:translateY(-2px); }
.brief-back{ font-family:var(--serif); font-style:italic; letter-spacing:.04em; font-size:clamp(14px,3.6vw,17px);
  color:#7c6a3f; text-decoration:none; border-bottom:1px solid rgba(124,106,63,.4); padding-bottom:2px; }
.brief-back:hover{ color:var(--ink); border-color:var(--ink); }

/* autoplay toggle button */
.play-btn{ position:absolute; left:50%; bottom:12vh; transform:translateX(-50%);
  pointer-events:auto; cursor:pointer;
  display:inline-flex; align-items:center; gap:.6em; white-space:nowrap;
  font-family:var(--serif); font-style:italic; letter-spacing:.06em;
  font-size:clamp(14px,1.7vw,18px); color:var(--cream);
  padding:.55em 1.4em; border:1px solid rgba(201,162,74,.6); border-radius:999px;
  background:linear-gradient(160deg, rgba(23,26,53,.5), rgba(23,26,53,.28));
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  text-shadow:0 1px 10px rgba(13,16,48,.8);
  opacity:0; transition:opacity .7s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease); }
.play-btn.show{ opacity:1; }
.play-btn:hover{ box-shadow:0 8px 26px rgba(242,178,92,.28); border-color:var(--amber); }
.play-btn .pb-icon{ color:var(--amber); font-size:.85em; transform:translateY(.02em); }
.play-btn.playing{ border-color:rgba(201,162,74,.4); }

/* scroll cue */
.cue{ position:absolute; left:50%; bottom:5vh; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:.6rem;
  font-family:var(--serif); font-style:italic; letter-spacing:.24em; text-transform:lowercase;
  font-size:13px; color:var(--gold-soft); text-shadow:0 1px 10px rgba(13,16,48,.8);
  opacity:0; transition:opacity .8s var(--ease); }
.cue.show{ opacity:.9; }
.cue i{ width:1px; height:42px; background:linear-gradient(var(--gold),transparent);
  animation:cueDrop 2.4s var(--ease) infinite; transform-origin:top; }
@keyframes cueDrop{ 0%{transform:scaleY(0);opacity:0} 40%{transform:scaleY(1);opacity:1} 100%{transform:scaleY(1) translateY(12px);opacity:0} }

/* scroll length */
#scrollspace{ position:relative; z-index:1; width:1px; }

/* loader */
#loader{ position:fixed; inset:0; z-index:50; background:var(--night-2);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.3rem;
  transition:opacity 1s ease; }
#loader.hidden{ opacity:0; pointer-events:none; }
#loader .l-note{ font-family:var(--serif); font-style:italic; letter-spacing:.16em; font-size:15px; color:var(--gold-soft); }
#loader .l-bar{ width:min(58vw,280px); height:2px; background:rgba(201,162,74,.25); overflow:hidden; }
#loader .l-bar i{ display:block; height:100%; width:0; background:linear-gradient(90deg,var(--amber-deep),var(--amber)); transition:width .3s ease; }

/* private code gate */
.gate{ position:fixed; inset:0; z-index:60; display:flex; align-items:center; justify-content:center;
  padding:8vw; text-align:center;
  background:
    radial-gradient(120% 90% at 50% 30%, rgba(30,26,60,.6), rgba(13,16,48,.96)),
    linear-gradient(160deg, #171a35, #0d1030);
  transition:opacity .55s var(--ease); }
.gate-card{ width:min(92vw,420px); }
.gate-eyebrow{ font-family:var(--serif); font-style:italic; letter-spacing:.28em; text-transform:uppercase;
  font-size:clamp(12px,3.2vw,15px); color:var(--gold-soft); margin-bottom:1.1rem; }
.gate-title{ font-family:var(--serif); font-weight:500; letter-spacing:.02em;
  font-size:clamp(30px,8vw,52px); color:var(--cream); line-height:1.02; }
.gate-sub{ margin-top:.9rem; font-family:var(--serif-body); font-size:clamp(14px,3.6vw,17px);
  line-height:1.5; color:var(--cream-soft); opacity:.85; }
.gate-form{ margin-top:1.8rem; display:flex; flex-direction:column; gap:.8rem; align-items:stretch; }
.gate-input{ width:100%; font-family:var(--serif); font-size:clamp(16px,4.4vw,20px); text-align:center;
  color:var(--cream); background:rgba(244,234,214,.06); border:1px solid rgba(201,162,74,.5);
  border-radius:999px; padding:.7em 1.2em; letter-spacing:.04em; outline:none; }
.gate-input::placeholder{ color:rgba(216,189,126,.6); font-style:italic; }
.gate-input:focus{ border-color:var(--amber); background:rgba(244,234,214,.1); }
.gate-btn{ font-family:var(--serif); font-style:italic; letter-spacing:.05em;
  font-size:clamp(16px,4.4vw,20px); color:var(--night); cursor:pointer; border:0; border-radius:999px;
  padding:.72em 1.4em; background:linear-gradient(120deg,var(--gold-soft),var(--amber));
  box-shadow:0 12px 30px rgba(242,178,92,.28); transition:transform .3s var(--ease); }
.gate-btn:hover{ transform:translateY(-2px); }
.gate-error{ margin-top:1rem; font-family:var(--serif); font-style:italic; color:#f0b8a8; font-size:clamp(13px,3.4vw,16px); }

@media (prefers-reduced-motion:reduce){ .cue i{ animation:none; } }