/* ============================================================
   sterren.css: de sterren van de melding, op de pagina's erna. Prefix ags-.

   De melding over het webinar op nieuwe-site.html is het sterrenvenster
   rechtsonder (melding.css blok 19): een stuk nacht waarin sterren
   samentrekken tot "3 nov". Wie daar doorklikt, blijft in die stijl:
     1. van-chatbots-naar-agents-webinar.html            de kroon: de datum in sterren
                                           boven de titel, hemel achter de kop
     2. webinar-aangemeld.html  het ticket, nu groot en van jou
   Het zijn letterlijk dezelfde sterren: één motor (sterrenstof.js) voor de
   melding en deze pagina's. De choreografie staat in sterren.js.

   Gekozen door Mika op 20 sep 2026 uit drie varianten voor de aanmeldpagina
   (kroon, één hemel achter de hele pagina, het ticket onder de knop); het
   ticket verhuisde naar de bevestiging.

   Alles hangt aan .has-js (het inline themascript in de kop): zonder
   JavaScript tekent niemand sterren, en dan blijft de kop gewoon tekst.
   ============================================================ */

/* ============================================================
   1. DE KROON (aanmeldpagina)
   De kop is de compositie van de melding: de datum in sterren, de regel
   wanneer het is, de titel, de knop.

   Lagen: het canvas staat op z-index -1, net als het achtergrondbeeld van
   de kop (.hero--beeld::before) en de mesh (body::before). Bij gelijke
   z-index wint de volgorde in de DOM, dus een canvas dat ná het beeld in
   de sectie staat tekent eroverheen, en alles blijft onder de tekst en
   het glas. Het glas van het agendavel vervaagt de sterren erachter
   vanzelf (backdrop-filter).
   ============================================================ */
.ags-canvas,
.ags-lucht {
  display: none;
}
.has-js .ags-canvas--kop {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  /* een vaste maat, los van de hoogte van de kop: het agendavel schuift
     open en dan zou het canvas mee van maat veranderen. De sterren doven
     uit naar de onderrand (uitloop in sterren.js), dus een canvas dat
     onder de kop uitsteekt laat niets zien. */
  height: 125vh;
  height: 125svh;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.7s ease;
}
/* het vlak waar de datum zich vormt */
.has-js .ags-lucht--kop {
  display: block;
  height: clamp(7.4rem, 3.4rem + 12.6vw, 15.5rem);
  margin: 0 auto clamp(0.7rem, 0.5rem + 0.6vw, 1.1rem);
  max-width: 46rem;
  pointer-events: none;
}
.has-js [data-ag-pagina="aanmelden"] .ag-hero__head {
  padding-top: clamp(1rem, 0.6rem + 1.4vw, 1.9rem);
}
/* het label wordt de regel onder de datum, zoals in de melding: geen
   glazen pil met een stip, maar één regel in het accent. "Nu live" houdt
   zijn ademende stip. */
.has-js [data-ag-pagina="aanmelden"] .ag-hero .ag-pill {
  padding: 0;
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
  border-radius: 0;
  font-size: clamp(0.95rem, 0.88rem + 0.4vw, 1.18rem);
  color: var(--accent-deep);
}
.has-js [data-ag-pagina="aanmelden"] .ag-hero .ag-pill:not(.ag-pill--live)::before {
  display: none;
}
.has-js [data-ag-pagina="aanmelden"] .ag-hero__title {
  margin-top: clamp(0.5rem, 0.4rem + 0.5vw, 0.9rem);
}
/* wie uit de melding komt, hoeft niet op de kop te wachten */
.ags-uit-melding .ag-hero .reveal {
  transition-delay: 0s !important;
}

/* ============================================================
   2. HET TICKET (bevestigingspagina)
   Een toegangskaart, liggend en groot, met dezelfde nacht en dezelfde
   sterren als de melding. De inkepingen zijn een masker, dus de schaduw
   is een drop-shadow op de schil (die volgt het silhouet, box-shadow
   niet); de strook is in beide thema's papier, zodat de kaart op een
   donkere pagina een voorwerp blijft; de kleine kapitalen horen bij een
   pas. Op de telefoon staat hij rechtop.
   Binnenkomen: van onderen het beeld in geschoven,
   landen met een veer (dezelfde als --agm-veer), één keer glans. Daarna
   kantelt hij een paar graden mee met de muis; de glans komt niet terug.
   ============================================================ */
.ags-ticket {
  --ags-veer: linear(0, 0.0209, 0.0752, 0.1517, 0.2416, 0.3376, 0.4344, 0.5278, 0.6151, 0.6944, 0.7647, 0.8256, 0.8772, 0.9199, 0.9544, 0.9815, 1.0021, 1.0172, 1.0275, 1.034, 1.0374, 1.0384, 1.0376, 1.0356, 1.0326, 1.0292, 1.0255, 1.0218, 1.0182, 1.0148, 1.0118, 1.0091, 1.0067, 1.0047, 1.0031, 1.0018, 1.0007, 0.9999, 0.9993, 0.9989, 0.9987, 0.9986, 0.9985, 0.9986, 0.9986, 0.9987, 0.9989, 0.999, 1);
  position: relative;
  margin: clamp(2.4rem, 1.6rem + 3vw, 4rem) auto 0;
  max-width: 58rem;
  perspective: 1500px;
  filter: drop-shadow(0 38px 44px rgba(0, 0, 0, 0.52)) drop-shadow(0 3px 8px rgba(0, 0, 0, 0.22));
}
[data-theme="light"] .ags-ticket {
  filter: drop-shadow(0 32px 38px rgba(18, 30, 45, 0.26)) drop-shadow(0 3px 8px rgba(18, 30, 45, 0.12));
}
.ags-ticket__pas {
  --nx: 55%;
  --p-ink: #0a0e14;
  --p-zacht: #6b7683;
  --p-lijn: rgba(12, 18, 28, 0.22);
  position: relative;
  display: grid;
  grid-template-columns: var(--nx) minmax(0, 1fr);
  border-radius: 26px;
  overflow: hidden;
  background: #f5f8fc;
  color: var(--p-ink);
  text-align: left;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  -webkit-mask:
    radial-gradient(circle 13px at var(--nx) 0, transparent 97%, #000),
    radial-gradient(circle 13px at var(--nx) 100%, transparent 97%, #000);
  -webkit-mask-composite: source-in;
  mask:
    radial-gradient(circle 13px at var(--nx) 0, transparent 97%, #000),
    radial-gradient(circle 13px at var(--nx) 100%, transparent 97%, #000);
  mask-composite: intersect;
}
.ags-ticket.is-kantel .ags-ticket__pas {
  transition: transform 0.16s ease-out;
}
/* binnenkomen. Tot sterren.js .ags-aan op <html> zet, is het ticket er nog
   niet; komt dat script nooit, dan haalt het vangnet hem na ruim twee
   tellen toch tevoorschijn. fill-mode backwards en niet both: na het
   landen moet de gewone transform (het kantelen) het weer overnemen. */
[data-motion="on"].has-js:not(.ags-aan) .ags-ticket__pas {
  opacity: 0;
  animation: agsVangnet 0.4s ease 2.4s forwards;
}
[data-motion="on"].ags-aan .ags-ticket__pas {
  animation: agsLand 1.15s var(--ags-veer) 0.12s backwards;
}
@keyframes agsLand {
  from {
    opacity: 0;
    transform: translateY(38%) rotateX(34deg) rotateZ(3.5deg);
  }
  18% {
    opacity: 1;
  }
}
@keyframes agsVangnet {
  to {
    opacity: 1;
  }
}

.ags-ticket__kunst {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: clamp(14rem, 9rem + 11vw, 19.5rem);
  padding: 22px 26px 18px;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(90% 90% at 50% 118%, rgba(31, 100, 224, 0.55), transparent 62%),
    linear-gradient(180deg, #04091a, #081738);
}
.ags-ticket__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s ease;
}
html.ags-aan .ags-canvas--kop,
html.ags-aan .ags-ticket__canvas {
  opacity: 1;
}
.ags-ticket__top {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  max-width: none;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: rgba(255, 255, 255, 0.92);
}
.ags-ticket__top svg {
  width: 24px;
  height: 24px;
}
.ags-ticket__lucht {
  position: relative;
  flex: 1;
  display: grid;
  place-items: center;
  margin-top: 4px;
  pointer-events: none;
}
/* de datum in letters, voor wie geen sterren krijgt */
.ags-ticket__datum {
  font-family: var(--font-display);
  font-size: clamp(3.4rem, 2rem + 6vw, 6.6rem);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1;
  white-space: nowrap;
  background: linear-gradient(100deg, #c6faff 0%, #8fe2fb 45%, #6fa6ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.has-js .ags-ticket__datum {
  display: none;
}
.ags-ticket__strook {
  display: grid;
  align-content: center;
  gap: clamp(16px, 10px + 1vw, 24px);
  padding: clamp(20px, 12px + 1.4vw, 32px) clamp(20px, 10px + 1.9vw, 38px);
  border-left: 1.5px dashed var(--p-lijn);
}
.ags-ticket__velden {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 8px + 0.8vw, 20px) 18px;
  margin: 0;
}
.ags-ticket__velden dt {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--p-zacht);
}
.ags-ticket__velden dd {
  margin: 2px 0 0;
  font-size: clamp(15px, 13.4px + 0.32vw, 17px);
  font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1.25;
  color: var(--p-ink);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.ags-ticket__velden dd.ags-ticket__ok {
  display: flex;
  align-items: center;
  gap: 0.35em;
  color: #0c7a43;
}
.ags-ticket__ok svg {
  flex: none;
  width: 1em;
  height: 1em;
}
/* op papier altijd het diepe verloop, ook in het donkere thema (zoals de
   knop op het ticket in de melding) */
.ags-ticket__knop {
  width: 100%;
  height: 48px;
  border: 0;
  border-radius: 14px;
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: #f4fbff;
  background: linear-gradient(118deg, #11a0d0 0%, #1f7fe0 100%);
  cursor: pointer;
  transition: filter 0.25s ease, transform 0.25s var(--ease-out);
}
.ags-ticket__knop:hover {
  filter: brightness(1.07);
}
.ags-ticket__knop:active {
  transform: scale(0.985);
}
.ags-ticket__knop:focus-visible {
  outline: 2px solid #1f7fe0;
  outline-offset: 3px;
}
/* de glans: één keer, bij het landen, van links naar rechts. Daarna staat
   hij buiten beeld en blijft hij daar: hij volgt de muis niet en speelt
   niet opnieuw (Mika, 20 sep 2026). De animatie hangt daarom niet aan
   .is-kantel; anders begon hij opnieuw zodra de muis het ticket verliet. */
.ags-ticket__glans {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(112deg, transparent 32%, rgba(255, 255, 255, 0.28) 47%, rgba(255, 255, 255, 0.05) 56%, transparent 66%);
  background-size: 260% 100%;
  background-position: 125% 0;
  background-repeat: no-repeat;
  pointer-events: none;
}
[data-motion="on"].ags-aan .ags-ticket__glans {
  animation: agsGlans 1.25s cubic-bezier(0.4, 0, 0.2, 1) 0.75s both;
}
@keyframes agsGlans {
  from {
    background-position: 125% 0;
  }
  to {
    background-position: -25% 0;
  }
}

/* rechtop op de telefoon: nacht boven, strook onder, de inkepingen
   links en rechts op de scheurlijn */
@media (max-width: 700px) {
  .ags-ticket {
    max-width: 24rem;
  }
  .ags-ticket__pas {
    --ny: 184px;
    grid-template-columns: minmax(0, 1fr);
    -webkit-mask:
      radial-gradient(circle 11px at 0 var(--ny), transparent 97%, #000),
      radial-gradient(circle 11px at 100% var(--ny), transparent 97%, #000);
    -webkit-mask-composite: source-in;
    mask:
      radial-gradient(circle 11px at 0 var(--ny), transparent 97%, #000),
      radial-gradient(circle 11px at 100% var(--ny), transparent 97%, #000);
    mask-composite: intersect;
  }
  .ags-ticket__kunst {
    min-height: 0;
    height: var(--ny);
    padding: 16px 18px 8px;
  }
  .ags-ticket__strook {
    border-left: 0;
    border-top: 1.5px dashed var(--p-lijn);
    padding: 18px 18px 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ags-canvas,
  .ags-ticket__canvas,
  .ags-ticket__pas,
  .ags-ticket__glans {
    transition: none !important;
    animation: none !important;
  }
}