/* Coming soon voor hub.vdpevents.nl. Basisstijlen zijn de eindtoestand; animaties vertrekken
   vanuit hun begintoestand. Zo toont reduced motion direct de complete pagina. */

@font-face {
  font-family: "Archivo";
  src: url("/fonts/archivo-italic.woff2") format("woff2");
  font-style: italic;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat";
  src: url("/fonts/montserrat-italic.woff2") format("woff2");
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
}

:root {
  --ink: #04070b;
  --night: #0a1522;
  --red: #d8203e;
  --red-hot: #ff5466;
  --red-deep: #a8102c;
  --paper: #f4f1ec;
  --mist: #9ba8b9;
  --tag: #c6ceda;
  --light: #d6e2ff;
  --line: color-mix(in srgb, var(--paper) 20%, transparent);
  --gutter: clamp(16px, 3.2vw, 40px);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* Tijdlijn van de laadanimatie */
  --t-logo: 0.7s;
  --t-title: 1.15s;
  --t-fill: 1.95s;
  --t-sub: 2.35s;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
}

html,
body {
  height: 100%;
  overflow: hidden;
}

body {
  background: radial-gradient(120% 90% at 50% 38%, var(--night) 0%, var(--ink) 62%) var(--ink);
  color: var(--paper);
  font-family: "Montserrat", "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overscroll-behavior: none;
}

/* ---------- Achtergrondlagen ---------- */

.floor {
  position: fixed;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.beams {
  display: none;
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  mix-blend-mode: screen;
  animation: lights-on 1.8s linear 0.5s both;
}

.js .beams {
  display: block;
}

.beam {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--beam-w, 40vmin);
  height: var(--beam-h, 100vh);
  transform-origin: 50% 0;
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--light) 20%, transparent),
    color-mix(in srgb, var(--light) 8%, transparent) 60%,
    color-mix(in srgb, var(--light) 2%, transparent)
  );
  clip-path: polygon(45% 0, 55% 0, 100% 100%, 0 100%);
  mask-image: linear-gradient(to bottom, transparent 18%, #000 42%, #000 82%, transparent);
  filter: blur(28px);
  will-change: transform;
}

.shade {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 46% 34% at 50% 40%, color-mix(in srgb, var(--ink) 62%, transparent), transparent 72%),
    radial-gradient(ellipse 120% 95% at 50% 45%, transparent 52%, rgb(0 0 0 / 0.72));
}

.corners span {
  position: fixed;
  width: 22px;
  height: 22px;
  border: 0 solid var(--line);
  animation: corner 1s var(--ease-out) 0.3s both;
}

.corners span:nth-child(1) {
  top: max(var(--gutter), env(safe-area-inset-top));
  left: max(var(--gutter), env(safe-area-inset-left));
  border-top-width: 1px;
  border-left-width: 1px;
  transform-origin: 0 0;
}

.corners span:nth-child(2) {
  top: max(var(--gutter), env(safe-area-inset-top));
  right: max(var(--gutter), env(safe-area-inset-right));
  border-top-width: 1px;
  border-right-width: 1px;
  transform-origin: 100% 0;
}

.corners span:nth-child(3) {
  bottom: max(var(--gutter), env(safe-area-inset-bottom));
  right: max(var(--gutter), env(safe-area-inset-right));
  border-bottom-width: 1px;
  border-right-width: 1px;
  transform-origin: 100% 100%;
}

.corners span:nth-child(4) {
  bottom: max(var(--gutter), env(safe-area-inset-bottom));
  left: max(var(--gutter), env(safe-area-inset-left));
  border-bottom-width: 1px;
  border-left-width: 1px;
  transform-origin: 0 100%;
}

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.08;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Inhoud ---------- */

.stage {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 4vh var(--gutter) 27vh;
  overflow: hidden auto;
  text-align: center;
}

/* auto-marges centreren; past de inhoud niet (grote standaardletter), dan scrollt alleen deze laag */
.stage > :first-child { margin-top: auto; }
.stage > :last-child { margin-bottom: auto; }

.logo {
  display: block;
  width: clamp(156px, 18vw, 260px);
  height: auto;
  overflow: visible;
  margin-bottom: clamp(22px, 5.5vh, 60px);
}

.logo__mark,
.logo__word path {
  fill: var(--red);
}

.logo__tag path {
  fill: var(--tag);
}

.logo__mark {
  transform-box: fill-box;
  animation: mark-in 1.2s var(--ease-out) var(--t-logo) both;
}

.logo__word path {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: letter-in 0.8s var(--ease-out) both;
}

.logo__word path:nth-child(1) { animation-delay: calc(var(--t-logo) + 0.3s); }
.logo__word path:nth-child(2) { animation-delay: calc(var(--t-logo) + 0.36s); }
.logo__word path:nth-child(3) { animation-delay: calc(var(--t-logo) + 0.42s); }
.logo__word path:nth-child(4) { animation-delay: calc(var(--t-logo) + 0.48s); }
.logo__word path:nth-child(5) { animation-delay: calc(var(--t-logo) + 0.54s); }
.logo__word path:nth-child(6) { animation-delay: calc(var(--t-logo) + 0.6s); }

.logo__tag {
  transform-box: fill-box;
  animation: tag-in 1s var(--ease-out) calc(var(--t-logo) + 0.7s) both;
}

.title {
  position: relative;
  font-family: "Archivo", "Arial Black", sans-serif;
  font-style: italic;
  font-weight: 800;
  font-stretch: 125%;
  /* de vw-grens houdt de titel binnen het scherm, ook bij een grote standaardletter */
  font-size: min(clamp(2.05rem, min(10.2vw, 14vh), 8rem), 10.6vw);
  line-height: 0.9;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

/* Maatlijn onder de titel, als op een bouwtekening */
.title::after {
  content: "";
  position: absolute;
  left: 0.1em;
  right: 0.1em;
  bottom: calc(-1 * clamp(16px, 3vh, 30px));
  height: 9px;
  background:
    linear-gradient(var(--line), var(--line)) left center / 1px 100% no-repeat,
    linear-gradient(var(--line), var(--line)) right center / 1px 100% no-repeat,
    linear-gradient(var(--line), var(--line)) center / 100% 1px no-repeat;
  animation: measure 1.3s var(--ease-out) calc(var(--t-title) + 0.55s) both;
}

.title__line {
  display: block;
  overflow: hidden;
  /* ruimte voor de cursieve overhang, anders knipt overflow de letters af */
  padding: 0.05em 0.2em 0.07em;
  margin: -0.05em -0.2em -0.07em;
}

.title__word {
  display: inline-block;
  animation: rise 1.1s var(--ease-out) both;
}

.title__line:first-child .title__word:first-child { animation-delay: var(--t-title); }
.title__line:first-child .title__word:last-child { animation-delay: calc(var(--t-title) + 0.08s); }

/* "volle gang": rood vult de letters als een voortgangsbalk, daarna trekt er af en toe een glans door */
.title__line--accent .title__word {
  color: transparent;
  background-image:
    linear-gradient(100deg, transparent 42%, color-mix(in srgb, var(--paper) 90%, transparent) 50%, transparent 58%),
    linear-gradient(180deg, var(--red-hot) 5%, var(--red) 55%, var(--red-deep)),
    linear-gradient(color-mix(in srgb, var(--paper) 10%, transparent) 0 0);
  background-size: 300% 100%, 100% 100%, 100% 100%;
  background-position: 100% 0, 0 0, 0 0;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
}

.title__line--accent .title__word:first-child {
  animation:
    rise 1.1s var(--ease-out) calc(var(--t-title) + 0.16s) both,
    fill 0.65s var(--ease-in-out) var(--t-fill) both,
    sheen 7s ease-in-out calc(var(--t-fill) + 1.6s) infinite;
}

.title__line--accent .title__word:last-child {
  animation:
    rise 1.1s var(--ease-out) calc(var(--t-title) + 0.24s) both,
    fill 0.65s var(--ease-in-out) calc(var(--t-fill) + 0.5s) both,
    sheen 7s ease-in-out calc(var(--t-fill) + 1.75s) infinite;
}

.subtitle {
  max-width: 36em;
  margin-top: clamp(34px, 6.5vh, 64px);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(0.95rem, 0.62rem + 0.95vw, 1.4rem);
  line-height: 1.55;
  letter-spacing: 0.01em;
  color: var(--mist);
  text-wrap: balance;
}

.subtitle__part {
  display: inline-block;
  animation: soft-in 1.1s var(--ease-out) var(--t-sub) both;
}

.subtitle__part--strong {
  color: var(--paper);
  font-weight: 600;
  animation-delay: calc(var(--t-sub) + 0.3s);
}

.dots {
  font-weight: 700;
  letter-spacing: 0.06em;
}

.dots span {
  display: inline-block;
  color: var(--red-hot);
  animation: dot 1.6s ease-in-out infinite;
}

.dots span:nth-child(1) { animation-delay: calc(var(--t-sub) + 1s); }
.dots span:nth-child(2) { animation-delay: calc(var(--t-sub) + 1.18s); }
.dots span:nth-child(3) { animation-delay: calc(var(--t-sub) + 1.36s); }

/* Lage, brede schermen (telefoon liggend): alles compacter zodat het in één scherm past */
@media (max-height: 540px) and (orientation: landscape) {
  .stage { padding-block: 3vh 10vh; }
  .logo { width: 128px; margin-bottom: 4vh; }
  .subtitle { margin-top: 7vh; }
}

/* ---------- Keyframes ---------- */

@keyframes lights-on {
  0% { opacity: 0; }
  10% { opacity: 0.75; }
  16% { opacity: 0.1; }
  26% { opacity: 0.9; }
  32% { opacity: 0.35; }
  100% { opacity: 1; }
}

@keyframes corner {
  from { opacity: 0; transform: scale(0.2); }
}

@keyframes mark-in {
  from {
    opacity: 0;
    transform: translateX(-8%);
    clip-path: polygon(0 0, 0 0, -30% 100%, -30% 100%);
  }
  to {
    opacity: 1;
    transform: none;
    clip-path: polygon(0 0, 130% 0, 100% 100%, -30% 100%);
  }
}

@keyframes letter-in {
  from { opacity: 0; transform: translateY(45%) skewX(-14deg); }
}

@keyframes tag-in {
  from { opacity: 0; transform: translateX(-3%); clip-path: inset(0 100% 0 0); }
  to { opacity: 1; transform: none; clip-path: inset(0 -5% 0 0); }
}

/* Diep genoeg dat ook het schuine uiteinde van een breed woord onder het masker blijft;
   de opacity houdt de titel onzichtbaar tot de animatie begint. */
@keyframes rise {
  from { transform: translateY(145%) skewY(5deg); opacity: 0; }
  30% { opacity: 1; }
}

@keyframes fill {
  from { background-size: 300% 100%, 0% 100%, 100% 100%; }
}

@keyframes sheen {
  0% { background-position: 100% 0, 0 0, 0 0; }
  32%, 100% { background-position: 0% 0, 0 0, 0 0; }
}

@keyframes measure {
  from { opacity: 0; transform: scaleX(0); }
}

@keyframes soft-in {
  from { opacity: 0; transform: translateY(0.7em); filter: blur(8px); }
}

@keyframes dot {
  /* alleen beweging: een doorzichtige punt zakt onder het tekstcontrast (WCAG 1.4.3) */
  0%, 55%, 100% { transform: none; }
  25% { transform: translateY(-0.3em); }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
  }
}