/* ============================================================
   Blic op Oneindig — coming soon
   ============================================================ */

/* ---------- lettertype ---------- */
@font-face{
  font-family:"Sniglet";
  src:url("fonts/Sniglet-Regular.woff2") format("woff2");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Sniglet";
  src:url("fonts/Sniglet-ExtraBold.woff2") format("woff2");
  font-weight:800;
  font-style:normal;
  font-display:swap;
}

/* ---------- tokens ---------- */
:root{
  --olive:#666333;
  --butter:#faf3a2;

  --edge: clamp(20px, 4.4vw, 56px);   /* marge rondom */
  --ui:   clamp(11px, 1.05vw, 13px);  /* kleine labels */
  --body: clamp(13px, 1.35vw, 15px);  /* lopende tekst */
  --track:.1em;

  --font:"Sniglet", ui-rounded, "Segoe UI", system-ui, sans-serif;
}

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; }

body{
  /* 100svh = kleinste viewport-hoogte: de adresbalk op mobiel snijdt niets af */
  height:100vh;
  height:100svh;
  overflow:hidden;

  background:var(--olive);
  color:var(--butter);

  font-family:var(--font);
  font-size:var(--ui);
  font-weight:400;
  line-height:1.45;
  letter-spacing:var(--track);
  text-transform:uppercase;

  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
  overscroll-behavior:none;
}

a{ color:inherit; text-decoration:none; }

a:focus-visible,
button:focus-visible,
input:focus-visible{ outline:2px solid var(--butter); outline-offset:3px; }

/* alleen voor schermlezers */
.sr{
  position:absolute; width:1px; height:1px; margin:-1px;
  padding:0; border:0; clip-path:inset(50%); overflow:hidden; white-space:nowrap;
}

/* ============================================================
   Fotolaag — ligt achter de tekst
   ============================================================ */
#stage{
  position:fixed; inset:0; z-index:0;
  pointer-events:none;
  contain:strict;
}

.shot{
  position:absolute; top:0; left:0;
  width:clamp(150px, 19vw, 290px);
  opacity:0;
  will-change:transform, opacity;
  transform-origin:50% 50%;
}

.shot img{
  display:block; width:100%; height:auto;
  filter:saturate(.96) contrast(1.02);
}

/* heel lichte olijfwaas zodat de foto's bij de huisstijl blijven horen */
.shot::after{
  content:""; position:absolute; inset:0;
  background:var(--olive);
  opacity:.07;
  mix-blend-mode:multiply;
}

/* ============================================================
   Layout — drie rijen over de volle hoogte
   ============================================================ */
.sheet{
  position:relative; z-index:1;
  height:100%;
  display:grid;
  grid-template-rows:auto 1fr auto;
  gap:clamp(16px, 2.4vh, 32px);
  padding:var(--edge);
  padding-bottom:max(var(--edge), env(safe-area-inset-bottom));
}

.row{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:16px; flex-wrap:wrap;
}

/* onderstreping die vanuit links uitgroeit */
.link{
  position:relative;
  padding-bottom:2px;
  background-image:linear-gradient(currentColor, currentColor);
  background-size:0% 1px;
  background-repeat:no-repeat;
  background-position:0 100%;
  transition:background-size .3s cubic-bezier(.22,.61,.36,1);
}
.link:hover,
.link:focus-visible{ background-size:100% 1px; }

/* ---------- midden ---------- */
.middle{
  display:flex; flex-direction:column; justify-content:center;
  min-height:0;
}

.logo{
  display:block;
  width:clamp(240px, 54vw, 620px);
  max-height:46vh;
  height:auto;
}

.tagline{
  margin:clamp(14px, 2.4vh, 28px) 0 0;
  max-width:18ch;
  font-size:clamp(20px, 2.6vw, 34px);
  font-weight:800;
  line-height:1.2;
  text-wrap:balance;
  letter-spacing:.005em;
  text-transform:none;
}

/* ---------- onderkant ---------- */
.bottom{ display:grid; gap:clamp(14px, 2vh, 22px); }

.ask{
  margin:0 0 12px;
  max-width:46ch;
  font-size:clamp(14px, 1.5vw, 17px);
  font-weight:400;   /* extrabold wordt dicht op klein formaat */
  line-height:1.35;
  letter-spacing:.01em;
  text-transform:none;
}

.signup{
  display:flex; align-items:center; gap:12px;
  width:min(100%, 420px);
  padding-bottom:8px;
  border-bottom:1px solid color-mix(in srgb, var(--butter) 45%, transparent);
  transition:border-color .3s ease;
}
.signup:focus-within{ border-bottom-color:var(--butter); }

.signup input{
  flex:1 1 auto; min-width:0;
  padding:0; border:0; background:none;
  color:inherit;
  font:inherit;
  font-size:clamp(14px, 1.4vw, 16px);
  letter-spacing:inherit;
  text-transform:none;
}
.signup input::placeholder{ color:color-mix(in srgb, var(--butter) 55%, transparent); }

.signup button{
  flex:0 0 auto;
  margin:0; padding:4px 2px; border:0; background:none;
  color:inherit;
  font:inherit; font-size:18px; line-height:1;
  cursor:pointer;
  transition:transform .3s cubic-bezier(.22,.61,.36,1);
}
.signup button:hover{ transform:translateX(5px); }

/* statusregel onder het formulier */
.note{
  min-height:1.4em;
  letter-spacing:.01em;
  text-transform:none;
  opacity:0;
  transition:opacity .35s ease;
}
.note.on{ opacity:.85; }

.contact{ display:flex; gap:6px 18px; flex-wrap:wrap; }
.dot{ opacity:.5; }

/* ============================================================
   Schermformaten
   ============================================================ */
@media (max-width:640px){
  :root{ --ui:11px; }
  .logo{ width:80vw; max-height:34vh; }
  .signup{ width:100%; }
  .contact{ gap:4px 14px; }
}

/* liggende telefoon: hoogte is de beperking, niet de breedte */
@media (max-height:520px) and (orientation:landscape){
  .logo{ width:min(42vw, 380px); max-height:38vh; }
  .tagline{ display:none; }
}

@media (prefers-reduced-motion:reduce){
  .link{ transition:none; }
  .signup button:hover{ transform:none; }
}