/* ============================================================
   De Verloren Vallei — gedeelde stijl (pitch + concept)
   ============================================================ */
:root{
  --sky:#7ec8e3; --sky-soft:#bfe6f2;
  --leaf-900:#0d2417; --leaf-850:#11331f; --leaf-800:#1b5233; --leaf-700:#2e7d32;
  --leaf-500:#5aa23a; --leaf-300:#a7d96b; --leaf-100:#dff0c2;
  --wood-dark:#4f3318; --wood:#6e5128; --wood-mid:#8a5a2b; --wood-light:#b9863f;
  --sand:#ecd9a6;
  --gold:#c79a4a; --gold-bright:#f4a92b; --gold-soft:#ffc758;
  --cream:#f3efe2; --cream-dim:#d8cfb6;
  --ink:#2a1d0e;
  --maxw:1180px;
  --display:'Anton',sans-serif; --fun:'Baloo 2',sans-serif; --body:'Outfit',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{overscroll-behavior:none}

/* Full-screen section snap — gentle "proximity" so only the cinematic
   full-height sections (.snap) snap to the top of the viewport; all the
   taller content sections scroll freely. Disabled under reduced motion. */
@media (prefers-reduced-motion: no-preference){
  html{scroll-snap-type:y proximity}
}
.snap{scroll-snap-align:start;scroll-snap-stop:normal}
/* every snap section fills a full viewport */
.snap{min-height:100vh;min-height:100dvh}
body{font-family:var(--body);color:var(--cream);
  /* cinematic dark forest photo — fixed so it flows seamlessly down the whole page, no cuts */
  background:
    linear-gradient(rgba(9,17,10,.40),rgba(9,17,10,.52)),
    url("bg-forest.webp") center center/cover no-repeat;
  background-color:#0c1408;background-attachment:fixed;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;line-height:1.6}
::selection{background:var(--gold-bright);color:var(--leaf-900)}

/* ===== fullscreen preloader: holds until all assets are buffered =====
   The art (loading.webp) has an EMPTY stone bar groove; .ld-fill overlays it and
   the green <i> grows 0→100% driven by the real load progress in site.js. */
#loader{position:fixed;inset:0;z-index:9999;background:#000;display:grid;place-items:center;transition:opacity .65s ease}
#loader.hide{opacity:0;pointer-events:none}
.ld-stage{position:relative;width:min(100vw,177.78vh);aspect-ratio:16/9;
  background:#000 url("loading.webp") center/cover no-repeat}
/* inner groove measured from the art (2560×1440) */
.ld-fill{position:absolute;left:35.6%;top:64.4%;width:40.1%;height:5.35%;border-radius:999px;overflow:hidden}
.ld-fill i{display:block;height:100%;width:0;border-radius:999px;
  background:linear-gradient(180deg,#e3ff6b 0%,#9be23a 40%,#5fae16 100%);
  box-shadow:0 0 9px rgba(150,255,60,.5),inset 0 2px 3px rgba(255,255,255,.5),inset 0 -3px 4px rgba(0,40,0,.32);
  transition:width .4s cubic-bezier(.4,0,.2,1)}
html.no-js #loader{display:none}

/* ===== desktop-only gate: phones/small screens see the mobile.webp notice ===== */
#mobile-gate{display:none}
@media (max-width:932px){
  html,body{overflow:hidden;height:100%}
  body{background:#0d2417!important}              /* no forest photo load on phone */
  body>*:not(#mobile-gate){display:none!important}
  #loader{display:none!important}                 /* never show the loading screen on mobile */
  #mobile-gate{display:block;position:fixed;inset:0;z-index:100000;
    background:#0d2417 url("mobile.webp") center center/cover no-repeat}
}
img,video{display:block;max-width:100%}
a{color:inherit}

/* soft mottled grain over the whole field (the cloth-like texture) */
body::after{content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.07;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:soft-light}

.progress{position:fixed;top:0;left:0;height:5px;width:0%;z-index:120;border-radius:0 4px 4px 0;
  background:linear-gradient(90deg,var(--leaf-500),var(--leaf-300),var(--gold-bright));
  box-shadow:0 1px 8px rgba(0,0,0,.3)}

/* cursor */
.cursor-dot,.cursor-ring{position:fixed;top:0;left:0;z-index:200;pointer-events:none;border-radius:50%;
  transform:translate(-50%,-50%);will-change:transform}
.cursor-dot{width:8px;height:8px;background:var(--gold-bright)}
.cursor-ring{width:38px;height:38px;border:2px solid rgba(244,169,43,.7);
  transition:width .25s,height .25s,background .25s,border-color .25s}
.cursor-ring.is-hot{width:64px;height:64px;background:rgba(244,169,43,.12);border-color:var(--gold-bright)}
body.has-cursor{cursor:none}
body.has-cursor a,body.has-cursor button,body.has-cursor [data-magnetic]{cursor:none}

/* nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:110;display:flex;align-items:center;justify-content:space-between;
  padding:14px clamp(16px,4vw,40px);transition:background .4s,padding .4s,box-shadow .4s}
.nav.scrolled{background:rgba(13,36,23,.86);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 6px 22px rgba(0,0,0,.3);padding-top:10px;padding-bottom:10px}
.nav .brand{display:flex;align-items:center;gap:10px;font-family:var(--display);text-transform:uppercase;
  letter-spacing:.05em;font-size:1.05rem;color:var(--cream);text-decoration:none}
.nav .brand img{height:34px;width:auto}
.nav .links{display:flex;align-items:center;gap:8px}
/* plain nav link — white text, no frame (Showconcept) */
.nav a.navlink{position:relative;background:transparent;border:0;
  font-family:var(--fun);font-weight:800;font-size:.86rem;text-transform:uppercase;letter-spacing:.05em;
  color:#fff;text-decoration:none;padding:8px 14px;text-shadow:0 2px 6px rgba(0,0,0,.55);
  transition:filter .25s,color .25s}
.nav a.navlink:hover{color:var(--gold-soft)}
/* framed variant — wood plaque, text hidden (baked label supplied later) */
.nav a.navlink.framed{color:transparent;text-shadow:none;padding:3px 16px;
  border-style:solid;border-width:14px 22px;border-color:transparent;
  border-image:url("nav-frame.webp") 78 116 fill / 14px 22px / 0 stretch}
.nav a.navlink.framed:hover{filter:brightness(1.12) drop-shadow(0 0 8px rgba(244,169,43,.55))}
@media(max-width:680px){.nav .brand span{display:none}.nav a.navlink{padding:7px 11px;font-size:.78rem}}

/* ===== stone-tablet buttons (mossy edges, golden glow on hover) ===== */
.stone,.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--fun);font-weight:800;text-transform:uppercase;letter-spacing:.04em;line-height:1.12;
  font-size:clamp(.9rem,1.6vw,1.05rem);color:#3a2c18;text-decoration:none;cursor:pointer;
  padding:15px 30px;border-radius:18px;border:2px solid #877457;isolation:isolate;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.10'/%3E%3C/svg%3E"),
    linear-gradient(180deg,rgba(255,255,255,.5),rgba(70,52,28,.06)),
    linear-gradient(180deg,#e3d7bd,#c3b291 55%,#b09c78);
  background-size:120px 120px,cover,cover;background-blend-mode:overlay,normal,normal;
  text-shadow:0 1px 0 rgba(255,255,255,.45);
  box-shadow:0 12px 24px rgba(0,0,0,.34),inset 0 2px 1px rgba(255,255,255,.55),inset 0 -5px 10px rgba(74,58,32,.3);
  transition:transform .2s,box-shadow .28s,border-color .28s,filter .28s}
/* mossy leaf clusters spilling over two opposite corners */
.stone::before,.stone::after,.btn::before,.btn::after{content:"";position:absolute;width:52px;height:52px;z-index:3;
  pointer-events:none;background:center/contain no-repeat;filter:drop-shadow(0 2px 2px rgba(0,0,0,.35));
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg stroke='%232e4d1c' stroke-width='1' stroke-opacity='.45'%3E%3Cpath d='M34 34C16 30 8 16 9 5 22 7 34 16 34 34Z' fill='%234f7a30'/%3E%3Cpath d='M34 34C33 15 43 6 56 7 56 20 49 32 34 34Z' fill='%236fae4f'/%3E%3Cpath d='M34 34C20 40 9 36 3 27 14 22 29 22 34 34Z' fill='%233c5e26'/%3E%3Cpath d='M34 34C40 20 53 16 60 20 54 31 47 35 34 34Z' fill='%23a7d96b'/%3E%3C/g%3E%3C/svg%3E")}
.stone::before,.btn::before{top:-17px;left:-15px;transform:rotate(-12deg)}
.stone::after,.btn::after{bottom:-17px;right:-15px;transform:rotate(168deg)}
.btn:hover,.stone:hover{transform:translateY(-2px);border-color:#cda251;
  box-shadow:0 0 30px rgba(244,169,43,.6),0 14px 28px rgba(0,0,0,.4),inset 0 2px 1px rgba(255,255,255,.6),inset 0 -5px 10px rgba(120,80,20,.25);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.10'/%3E%3C/svg%3E"),
    linear-gradient(180deg,rgba(255,255,255,.55),rgba(120,80,20,.05)),
    linear-gradient(180deg,#f8e8af,#ecc973 55%,#e0b85a)}
.btn.ghost{background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.10'/%3E%3C/svg%3E"),
    linear-gradient(180deg,rgba(255,255,255,.42),rgba(70,52,28,.08)),
    linear-gradient(180deg,#d7c9ad,#b6a482 55%,#a18d6a);color:#3a2c18;border-color:#7d6c4f}
.btn .arrow{transition:transform .25s;z-index:2}.btn:hover .arrow{transform:translateX(4px)}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 26px;width:100%}
.layer{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;will-change:transform;pointer-events:none}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:.96;letter-spacing:.4px;text-transform:uppercase}

/* signboard */
/* no wood — subtle dark glass panel so the atmospheric bg shows through */
.board{position:relative;border-radius:18px;padding:clamp(24px,3vw,34px);color:var(--cream);
  background:linear-gradient(180deg,rgba(14,26,16,.62),rgba(8,16,10,.7));
  -webkit-backdrop-filter:blur(7px) saturate(1.05);backdrop-filter:blur(7px) saturate(1.05);
  border:1px solid rgba(167,217,107,.20);
  box-shadow:0 22px 48px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.06)}
.board::before,.board::after{display:none}

.leaf-num{display:inline-flex;align-items:center;gap:12px;font-family:var(--fun);font-weight:800;color:var(--leaf-900);
  background:linear-gradient(180deg,var(--leaf-300),var(--leaf-500));border:3px solid var(--leaf-800);border-radius:40px;
  padding:6px 18px 6px 14px;box-shadow:0 6px 16px rgba(0,0,0,.22);font-size:.92rem;letter-spacing:.04em}
.leaf-num b{font-family:var(--display);font-size:1.35rem;color:var(--leaf-900);line-height:1}

.sec-title{font-size:clamp(2.3rem,6vw,4.8rem);color:var(--cream);max-width:18ch;margin:18px 0 24px;
  text-shadow:0 4px 0 rgba(0,0,0,.18),0 8px 22px rgba(0,0,0,.3)}
.lead{font-size:clamp(1.05rem,1.7vw,1.38rem);font-weight:400;color:var(--cream);max-width:62ch}
.lead strong{color:var(--gold-soft);font-weight:700}
.fill{background:var(--gold-bright);color:var(--leaf-900);padding:.05em .4em;font-weight:700;border-radius:6px;
  box-shadow:0 2px 0 rgba(0,0,0,.2)}
section{position:relative}
.band{padding:clamp(80px,11vw,150px) 0;position:relative;overflow:hidden}
.band > .wrap{position:relative;z-index:1}
[data-reveal]{opacity:0;transform:translateY(46px)}

/* media — clean, no wooden "kader" frame, no text overlay */
.media-frame{position:relative;border-radius:18px;overflow:hidden;
  box-shadow:0 26px 50px rgba(0,0,0,.45);aspect-ratio:16/10;background:var(--leaf-900)}
/* oversized + inset so the ±8% parallax travel never exposes the frame background */
.media-frame video,.media-frame img{position:absolute;top:-11%;left:0;width:100%;height:122%;object-fit:cover}
.media-frame .ph{display:none}

footer{position:relative;z-index:2;padding:28px 0;text-align:center;font-family:var(--fun);font-weight:600;
  font-size:.76rem;color:var(--cream-dim);letter-spacing:.1em;text-transform:uppercase;
  background:var(--leaf-900);border-top:3px solid var(--wood-dark)}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  [data-reveal]{opacity:1!important;transform:none!important}
  *{transition:none!important;animation:none!important}
}
.no-anim [data-reveal]{opacity:1;transform:none}

/* ===== mobile: no scroll-snap on touch (felt janky), sections size to content ===== */
@media(max-width:760px){
  html{scroll-snap-type:none}
}
/* ===== mobile: keep buttons inside the viewport, no odd overflow ===== */
@media(max-width:600px){
  .btn,.stone{font-size:.84rem;padding:13px 20px;letter-spacing:.03em;
    white-space:normal;text-align:center;max-width:100%}
  .btn::before,.btn::after,.stone::before,.stone::after{width:38px;height:38px}
  .btn::before,.stone::before{top:-12px;left:-10px}
  .btn::after,.stone::after{bottom:-12px;right:-10px}
}