/*
|-----------------------------------------------------------------------------
| De poort — under construction
|-----------------------------------------------------------------------------
| Alleen wat deze pagina extra nodig heeft. Kleuren, knoppen, het woordmerk en
| de iconen komen uit eager-thema.css; hier staat niets dubbel.
|
| Deze pagina laadt bewust géén Tailwind: dat scheelt 22 kB op precies de
| pagina die het vaakst wordt opgevraagd zolang de site nog dicht is.
*/

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

.poort {
    position: relative;
    z-index: 10;
    max-width: 46rem;
    margin: 0 auto;
    padding: clamp(3rem, 9vh, 6rem) 1.25rem 4rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0;
}

/* ── Merk ─────────────────────────────────────────────────────────── */
/* Alleen de maat en de marge; de verhouding tussen de twee regels komt
   uit .merk in het thema. */
.poort-merk {
    font-size: clamp(1.75rem, 6vw, 2.5rem);
    margin-bottom: 2.5rem;
    /* Kop, tekst, badges en voettekst staan gecentreerd; het merk stond als
       enige links, tot 194 px ernaast zodra .poort zijn volle breedte haalt.
       .merk zet zelf align-self: flex-start voor de landingspagina. */
    align-self: center;
}

.poort-kop {
    /* De staart van de g werd afgesneden. Met background-clip: text wordt de
       gradiënt alleen binén de doos van het element getekend, en met een
       regelhoogte van 1,15 tegen een letterhoogte van 1,41 steekt de tekst er
       0,13 em boven én onder uit. Gemeten stak de inkt 2,02 px onder de doos:
       precies de staart van de g, die daardoor geen kleur kreeg.

       Opgelost met ruimte in de doos en niet met een grotere regelhoogte: die
       1,15 is een ontwerpkeuze en de kop breekt op smalle schermen over twee
       regels. De marge krimpt met exact hetzelfde bedrag mee, zodat er in de
       opmaak geen pixel verschuift. */
    padding-bottom: 0.14em;
    margin: 0 0 calc(0.9rem - 0.14em);
    font-size: clamp(1.5rem, 4.5vw, 2.25rem);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.15;
    text-wrap: balance;
    background: linear-gradient(100deg, #ffffff 6%, #cfc6ff 46%, #8fe6f5 96%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
@media (forced-colors: active) {
    .poort-kop { background: none; color: CanvasText; }
}

/* De naam van het portal, alleen op de poort.

   Groter dan de gewone kop, want het is geen zin maar de naam zelf. De
   spatiëring staat op de twee stukken los en niet op het geheel: hoofdletters
   op deze maat vallen zonder extra ruimte tegen elkaar aan, terwijl "portal" in
   kleine letters juist strak moet blijven.

   Dat het zwaar-licht is en niet groot-klein, is overgenomen van het woordmerk
   erboven (EAGER zwaar, NINJA licht). Twee maten onder elkaar met elk hun eigen
   verhouding wordt onrustig; dezelfde regel twee keer toepassen niet.

   De gradiënt hoeft hier niet herhaald te worden: die staat op .poort-kop en
   loopt daardoor over beide stukken door, precies zoals bij het woordmerk. */
.poort-kop.groot {
    font-size: clamp(2.5rem, 10vw, 3.75rem);
    letter-spacing: normal;
}
.poort-kop.groot .kop-merk {
    font-weight: 600;
    letter-spacing: 0.06em;
}
/* De ruimte tussen de twee woorden is een gewone spatie in de HTML plus de
   letter-spacing die achter de D blijft staan. Bewust geen marge: dan zou er
   in de DOM "CLOUDportal" staan, en dat is wat een schermlezer voorleest. */
.poort-kop.groot .kop-soort {
    font-weight: 300;
    letter-spacing: -0.01em;
}

.poort-sub {
    margin: 0 0 2.75rem;
    max-width: 34rem;
    font-size: 0.9375rem;
    line-height: 1.7;
    /* Op de tussenpagina staat hier het adres van de bezoeker. Dat is één
       ondeelbaar woord en liep op een smal scherm de rand uit. */
    overflow-wrap: break-word;
    color: var(--muted);
}

/* ── De preview ───────────────────────────────────────────────────────
   Een blik op wat er komt, niet de pagina zelf. De inhoud staat onscherp
   en is niet te selecteren; "hold to peek" haalt de waas er even af. */
.poort-kijk { margin: 0 0 3rem; width: 100%; }

.kijk-doos {
    position: relative;
    border: 1px solid var(--line);
    border-radius: 1rem;
    background: linear-gradient(180deg, #101118, #0a0b10);
    box-shadow: var(--shadow);
    overflow: hidden;
    padding: 1.75rem 1.5rem 0;
    /* De onderkant loopt uit beeld: er is meer, je krijgt het nu niet. */
    max-height: 21rem;
    -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent);
    mask-image: linear-gradient(to bottom, #000 62%, transparent);
}

.kijk-inhoud {
    filter: blur(7px);
    opacity: 0.62;
    transform: scale(0.98);
    user-select: none;
    -webkit-user-select: none;
    pointer-events: none;
    transition: filter 0.45s ease, opacity 0.45s ease, transform 0.45s ease;
}
.kijk-doos.piek .kijk-inhoud {
    filter: blur(1.4px);
    opacity: 0.9;
    transform: scale(1);
}
@media (prefers-reduced-motion: reduce) {
    .kijk-inhoud { transition: none; }
}

/* De kopregels als balken. De vorm klopt, de woorden blijven binnen. */
.kijk-titel { display: flex; flex-direction: column; align-items: center; gap: 0.7rem; margin-bottom: 1.4rem; }
.kijk-titel span {
    height: 2.1rem; border-radius: 0.4rem;
    background: linear-gradient(100deg, #ffffff 6%, #cfc6ff 46%, #8fe6f5 96%);
    opacity: 0.85;
}
.kijk-regels { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; margin-bottom: 1.5rem; }
.kijk-regels span { height: 0.6rem; border-radius: 999px; background: rgba(255,255,255,0.14); }
.kijk-knoppen { display: flex; justify-content: center; gap: 0.7rem; margin-bottom: 1.75rem; }
.kijk-knoppen span { width: 8.5rem; height: 2.4rem; border-radius: 0.6rem; background: rgba(255,255,255,0.16); }
.kijk-knoppen span:last-child { background: rgba(255,255,255,0.06); border: 1px solid var(--line); }

.kijk-onder {
    display: flex; align-items: center; justify-content: center;
    gap: 0.85rem; flex-wrap: wrap;
    margin-top: 1rem;
}
.kijk-knop {
    display: inline-flex; align-items: center; gap: 0.45rem;
    padding: 0.5rem 0.9rem;
    border-radius: 0.625rem;
    border: 1px solid var(--line);
    background: rgba(255,255,255,0.04);
    color: var(--txt);
    font: inherit; font-size: 0.8125rem;
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}
.kijk-knop:hover { border-color: var(--line-hi); background: rgba(255,255,255,0.08); }
.kijk-knop .ms { font-size: 1rem; }
.kijk-hint { font-size: 0.75rem; color: var(--dim); }

/* ── Toegang vragen ───────────────────────────────────────────────── */
.poort-toegang {
    /* De ruimte tussen de kop en dit blok zat vroeger in de ondertitel
       (.poort-sub, margin-bottom 2,75rem). Die tekst staat er niet meer, dus
       de ruimte staat nu hier. Bewust niet opgelost door .poort-kop of
       .poort-sub aan te passen: die twee staan ook op de tussenpagina, en daar
       is de ondertitel er wél. */
    margin-top: 2rem;
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 1rem;
    background: var(--bg-card);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    padding: 2rem 1.75rem;
    text-align: left;
}

/* 1,4rem en niet 0,4: daaronder stond een uitleg die zijn eigen ondermarge
   meebracht. Die tekst is eruit, dus de ruimte tot het invoerveld staat nu
   hier. De regel .toegang-uitleg is meegegaan met die tekst; hij werd nergens
   anders gebruikt. */
.toegang-kop { margin: 0 0 1.4rem; font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em; }

.toegang-rij { display: flex; flex-direction: column; gap: 0.6rem; }
@media (min-width: 34rem) { .toegang-rij { flex-direction: row; } }

.poort-toegang input[type="email"],
.poort-toegang input[type="text"] {
    flex: 1; min-width: 0;
    padding: 0.8rem 1rem;
    border-radius: 0.625rem;
    border: 1px solid var(--line);
    background: rgba(0,0,0,0.4);
    color: #fff;
    font: inherit; font-size: 0.9375rem;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.poort-toegang input::placeholder { color: rgba(255,255,255,0.25); }
.poort-toegang input:focus {
    border-color: rgba(124,92,255,0.6);
    box-shadow: 0 0 0 2px rgba(124,92,255,0.2);
}
/* Geen font-size hier: die stond op 13 px met !important, en dat sloeg de
   regel in het thema plat die invoervelden op smalle schermen 16 px geeft.
   Onder de 16 px zoomt iOS in zodra je het veld aantikt — en niet terug. De
   kleine letter staat nu alleen op desktop, waar dat probleem niet bestaat.
   641 px en niet 40rem: het themablok loopt tot en met 640 px. */
.toegang-reden { margin-top: 0.6rem; width: 100%; }
@media (min-width: 641px) {
    .poort-toegang input.toegang-reden { font-size: 0.8125rem; }
}

.code-form { margin-top: 1.5rem; padding-top: 1.4rem; border-top: 1px solid var(--line); }
.code-form label { display: block; margin-bottom: 0.55rem; font-size: 0.8125rem; color: var(--muted); }

.melding {
    margin: 0 0 1.2rem; padding: 0.75rem 0.9rem;
    border-radius: 0.6rem; font-size: 0.8125rem; line-height: 1.55;
    border: 1px solid;
}
.melding-goed  { color: #a9e8c4; background: rgba(52,217,123,0.08);  border-color: rgba(52,217,123,0.28); }
.melding-fout  { color: #f6b1b1; background: rgba(248,113,113,0.08); border-color: rgba(248,113,113,0.28); }
.melding-wacht { color: #f2ce93; background: rgba(245,165,36,0.08);  border-color: rgba(245,165,36,0.28); }

/* ── Beloftes ─────────────────────────────────────────────────────── */
.poort-badges {
    list-style: none; margin: 2.25rem 0 0; padding: 0;
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: 0.5rem 1.6rem;
}
.poort-badges li {
    display: inline-flex; align-items: center; gap: 0.45rem;
    font-size: 0.8125rem; color: var(--dim);
}
.poort-badges .ms { font-size: 1rem; color: var(--a2); }

/* ── Voet ─────────────────────────────────────────────────────────── */
.poort-voet {
    margin-top: 3rem;
    display: flex; align-items: center; justify-content: center;
    flex-wrap: wrap; gap: 0.5rem;
    font-size: 0.75rem; color: var(--dim);
}
/* De streep hoort bij de tekst, niet bij de doos. Met een border-bottom zakte
   hij mee naar de onderkant zodra de knop op een aanraakscherm 44 px hoog werd,
   en hing hij als los streepje onder het woord — een button centreert zijn
   inhoud verticaal, de rand niet. */
.poort-voet a,
.poort-uit button {
    color: var(--muted);
    text-decoration: underline;
    text-decoration-color: rgba(255,255,255,0.16);
    text-underline-offset: 0.25em;
}
.poort-voet a:hover,
.poort-uit button:hover { color: #fff; }
.poort-uit { display: inline; }
.poort-uit button { border: 0; background: none; padding: 0; font: inherit; cursor: pointer; }

/* En dan staan de twee in dezelfde rij ook even hoog: de knop kreeg 44 px van
   de themaregel, de link ernaast bleef 18 px. */
@media (pointer: coarse) {
    .poort-voet a { display: inline-flex; align-items: center; min-height: 2.75rem; }
}
.poort-punt { opacity: 0.5; }

/* De mockup binnen de preview: kleiner, en de bovenkant is genoeg. */
.kijk-inhoud .mock { border-radius: 0.6rem; }
.kijk-inhoud .nt { font-size: 7.5px; }
@media (max-width: 40rem) {
    .kijk-inhoud .nt-side { display: none; }
    .kijk-doos { max-height: 17rem; }
}