/* Het Kaartje — the dual ticket-shaped hero input: paste a URL and we build a live demo bot,
   or type a question and you ask the real assistant on this page. Styled as a theatre ticket:
   amber stub with perforation, ink frame, hard print shadow. Shared by the homepage now and the
   landing pages from fase 3. */

.kaartje { max-width: 44rem; margin: 0; }
.kaartje__label { display: block; font-family: ui-monospace, 'Cascadia Mono', 'SF Mono', Menlo, Consolas, monospace; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); margin-bottom: 0.55rem; }
.kaartje__ticket { position: relative; display: flex; align-items: stretch; background: var(--surface); border: 2px solid var(--ink); border-radius: 0.9rem; box-shadow: 0.4rem 0.45rem 0 rgba(10, 10, 10, 0.9); transform: rotate(-0.4deg); }
.kaartje__ticket:focus-within { outline: 3px solid var(--accent-deep); outline-offset: 3px; }

/* the tear-off stub: amber, perforated edge, vertical caption */
.kaartje__stub { flex: none; display: grid; place-items: center; width: 2.4rem; background: var(--accent); border-right: 2px dashed var(--ink); border-radius: 0.7rem 0 0 0.7rem; }
.kaartje__stub span { writing-mode: vertical-rl; transform: rotate(180deg); font-family: ui-monospace, 'Cascadia Mono', 'SF Mono', Menlo, Consolas, monospace; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink); }

.kaartje__veld { flex: 1; min-width: 0; border: 0; background: transparent; padding: 1rem 1rem; font: inherit; font-size: 1.05rem; color: var(--ink); }
.kaartje__veld::placeholder { color: var(--muted); }
.kaartje__veld:focus { outline: none; }
.kaartje__knop { margin: 0.45rem 0.45rem 0.45rem 0; white-space: nowrap; }

.kaartje__micro { font-family: ui-monospace, 'Cascadia Mono', 'SF Mono', Menlo, Consolas, monospace; font-size: 0.76rem; color: var(--muted); margin: 0.55rem 0 0; min-height: 1.2em; }

/* "Bewaar deze demo" / throttle-capture: a small mail row under the ticket */
.kaartje__bewaar { margin-top: 1.1rem; max-width: 44rem; }
.kaartje__bewaarlabel { display: block; font-size: 0.88rem; font-weight: 600; margin-bottom: 0.45rem; }
.kaartje__bewaarrij { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.kaartje__bewaarrij input { flex: 1; min-width: 12rem; padding: 0.6rem 0.85rem; border: 1.5px solid var(--ink); border-radius: 999px; font: inherit; background: var(--surface); }
.kaartje__bewaarrij input:focus-visible { outline: 3px solid var(--accent-deep); outline-offset: 2px; }

/* the credits roll while a demo builds — honestly labelled as scripted */
.kaartje__aftiteling { list-style: none; margin: 0.9rem 0 0; padding: 0; font-family: ui-monospace, 'Cascadia Mono', 'SF Mono', Menlo, Consolas, monospace; font-size: 0.8rem; letter-spacing: 0.05em; text-transform: uppercase; }
.kaartje__aftiteling li { opacity: 0; transform: translateY(0.25rem); transition: opacity 0.3s ease, transform 0.3s ease; margin: 0.15rem 0; }
.kaartje__aftiteling li.in { opacity: 1; transform: none; }
.kaartje__aftiteling .kaartje__aftiteling-label { font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); }

/* the tear: the stub rips off when a demo build starts */
@media (prefers-reduced-motion: no-preference) {
  .kaartje__ticket.is-gescheurd .kaartje__stub { animation: kaartje-scheur 0.55s cubic-bezier(0.3, 0, 0.7, 0.2) forwards; }
  @keyframes kaartje-scheur {
    35% { transform: translate(-0.15rem, 0.1rem) rotate(-3deg); }
    100% { transform: translate(-1.1rem, 0.9rem) rotate(-12deg); opacity: 0; }
  }
}
@media (prefers-reduced-motion: reduce) {
  .kaartje__ticket { transform: none; }
  .kaartje__aftiteling li { opacity: 1; transform: none; transition: none; }
}

@media (max-width: 38rem) {
  .kaartje__ticket { flex-wrap: wrap; }
  .kaartje__stub { display: none; }
  .kaartje__veld { flex: 1 1 100%; padding: 0.85rem 0.9rem; }
  .kaartje__knop { margin: 0 0.45rem 0.45rem 0.45rem; flex: 1; justify-content: center; }
}