/* ---------------------------------------------------------------
   vis.vanengelen.cloud — phishing-bewustwording (demo)
   Geen externe bronnen. Geen tracking. Collecteert niets.
--------------------------------------------------------------- */

:root {
  --bg:        #eef2f7;
  --card:      #ffffff;
  --ink:       #15202b;
  --ink-soft:  #475569;
  --line:      #d7dee8;
  --blue:      #1d6efe;
  --blue-ink:  #0b3ea8;
  --amber:     #ffb020;
  --amber-bg:  #fff6e6;
  --red:       #d8392b;
  --green:     #0f8a4f;
  --green-bg:  #e7f6ee;
  --shadow:    0 10px 30px rgba(16, 32, 52, .12);
  --radius:    18px;
  --maxw:      38rem;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:       #0c1118;
    --card:     #141c27;
    --ink:      #eaf0f7;
    --ink-soft: #9fb0c3;
    --line:     #26323f;
    --blue:     #4d8cff;
    --blue-ink: #bcd4ff;
    --amber:    #ffc24d;
    --amber-bg: #2a2212;
    --red:      #ff6a5c;
    --green:    #37c77f;
    --green-bg: #0f2a1d;
    --shadow:   0 10px 30px rgba(0, 0, 0, .45);
  }
}
:root[data-theme="dark"] {
  --bg:#0c1118; --card:#141c27; --ink:#eaf0f7; --ink-soft:#9fb0c3; --line:#26323f;
  --blue:#4d8cff; --blue-ink:#bcd4ff; --amber:#ffc24d; --amber-bg:#2a2212;
  --red:#ff6a5c; --green:#37c77f; --green-bg:#0f2a1d; --shadow:0 10px 30px rgba(0,0,0,.45);
}

* { box-sizing: border-box; }

/* Must win over #portal's display:grid so toggling the `hidden` attribute works. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 18px;
  line-height: 1.55;
  padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
}

strong { font-weight: 700; }

/* =========================================================
   FASE 1 — nep-wifiportaal (het lokaas)
   ========================================================= */
#portal {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 24px 16px;
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(29,110,254,.12), transparent 60%),
    var(--bg);
}

.portal-card {
  width: 100%;
  max-width: 24rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 34px 26px 28px;
  text-align: center;
}

.wifi { color: var(--blue); margin: 2px 0 10px; }

.portal-card .network {
  margin: 0 0 20px;
  font-size: 1.08rem;
  color: var(--ink-soft);
}
.portal-card .network strong { color: var(--ink); }

.progress {
  height: 10px;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
  margin: 6px 0 16px;
}
.progress > span {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--blue), var(--blue-ink));
  animation: fill 3.2s ease-out forwards;
}
@keyframes fill { from { width: 4%; } to { width: 100%; } }

.status {
  margin: 0 0 22px;
  color: var(--ink-soft);
  font-size: .98rem;
  min-height: 1.4em;
}

.connect {
  appearance: none;
  border: 0;
  cursor: pointer;
  width: 100%;
  padding: 15px 18px;
  border-radius: 12px;
  background: var(--blue);
  color: #fff;
  font: inherit;
  font-weight: 700;
  font-size: 1.05rem;
  box-shadow: 0 6px 16px rgba(29,110,254,.35);
}
.connect:active { transform: translateY(1px); }

.fineprint {
  margin: 16px 0 0;
  font-size: .82rem;
  color: var(--ink-soft);
}

/* =========================================================
   FASE 2 — onthulling + les
   ========================================================= */
#reveal { padding-bottom: 48px; }

.hero {
  text-align: center;
  padding: 44px 20px 30px;
  background:
    radial-gradient(130% 100% at 50% 0%, var(--amber-bg), transparent 70%),
    var(--bg);
  border-bottom: 1px solid var(--line);
}
.hook {
  font-size: 4.2rem;
  line-height: 1;
  animation: pop .5s cubic-bezier(.2,1.4,.4,1) both;
}
@keyframes pop { from { transform: scale(.4) rotate(-12deg); opacity: 0; } }

.hero h1 {
  margin: 8px 0 10px;
  font-size: 2.9rem;
  letter-spacing: -.02em;
  outline: none;
}
.hero .lead {
  margin: 0 auto;
  max-width: var(--maxw);
  font-size: 1.18rem;
  color: var(--ink);
}

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 16px;
}

.wrap h2 {
  margin: 34px 0 10px;
  font-size: 1.4rem;
  letter-spacing: -.01em;
}

.calm {
  margin: 26px 0 8px;
  background: var(--green-bg);
  border: 1px solid color-mix(in srgb, var(--green) 35%, transparent);
  border-left: 6px solid var(--green);
  border-radius: 14px;
  padding: 18px 20px;
}
.calm p { margin: 0 0 8px; }
.calm p:last-child { margin-bottom: 0; }
.calm .punch { font-weight: 700; color: var(--green); }

.addr { margin: 26px 0 6px; }
.addr-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 12px 18px;
  box-shadow: var(--shadow);
  font-size: 1.1rem;
}
.addr-bar .lock { font-size: 1rem; }
.addr-bar .url {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-weight: 600;
  color: var(--ink);
  word-break: break-all;
}
.addr-note { margin: 12px 2px 0; color: var(--ink-soft); font-size: 1rem; }

.wrap p { font-size: 1.05rem; }

ul.danger, ol.tips { padding-left: 1.25rem; margin: 10px 0 0; }
ul.danger li, ol.tips li { margin: 0 0 12px; font-size: 1.05rem; }
ul.danger { list-style: none; padding-left: 0; }
ul.danger li {
  position: relative;
  padding: 2px 0 2px 34px;
}
ul.danger li::before {
  content: "⚠️";
  position: absolute;
  left: 0; top: 1px;
}
ol.tips { counter-reset: t; list-style: none; padding-left: 0; }
ol.tips li {
  position: relative;
  padding: 3px 0 3px 46px;
  min-height: 34px;
}
ol.tips li::before {
  counter-increment: t;
  content: counter(t);
  position: absolute;
  left: 0; top: 0;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  font-weight: 800;
  font-size: 1rem;
}

.slogan {
  margin: 40px 0 10px;
  text-align: center;
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.25;
  color: var(--blue);
}

.foot {
  margin-top: 34px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  text-align: center;
  color: var(--ink-soft);
}
.foot p { margin: 6px 0; font-size: .98rem; }
.badge {
  display: inline-block;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: .85rem !important;
  font-weight: 600;
  color: var(--green);
}

/* ------- toegankelijkheid: minder beweging ------- */
@media (prefers-reduced-motion: reduce) {
  .progress > span { animation-duration: .01s; }
  .hook { animation: none; }
  .connect:active { transform: none; }
}