/* Vienna01 — Targa Web en Print BV
   Visuele taal: persvel. Snijtekens, kleurenbalk, halftoonraster,
   en een servernaam die bij het laden in register schuift. */

:root {
  --ink:        #06080f;
  --ink-2:      #101832;
  --ink-3:      #1a2340;
  --paper:      #e9eaf2;
  --paper-dim:  #8d94ad;
  --paper-faint:#4d5675;

  --brand:      #ef8200;
  --brand-lit:  #ff9b26;
  --plate-c:    #00aeef;
  --plate-m:    #ec008c;

  --hair:       rgba(233, 234, 242, .13);
  --hair-soft:  rgba(233, 234, 242, .07);

  --skew:       -19deg;       /* nagemeten aan het beeldmerk */
  --gut:        clamp(1.25rem, 4.5vw, 4.5rem);
  --stack:      clamp(3rem, 7vw, 6rem);
}

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

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

body {
  margin: 0;
  min-height: 100svh;
  background: var(--ink);
  color: var(--paper);
  font-family: Archivo, "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(.95rem, .35vw + .88rem, 1.05rem);
  line-height: 1.55;
  font-synthesis-weight: none;
  overflow-x: clip;
}

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

/* ── Achtergrond: donkere gradient met drijvende inktpluimen ───────── */

.bg {
  position: fixed; inset: 0; z-index: -3;
  background:
    radial-gradient(120% 90% at 50% -10%, #16204a 0%, transparent 60%),
    linear-gradient(168deg, #0a0f22 0%, var(--ink) 45%, #090c18 100%);
}

.bg__plume {
  position: absolute;
  width: 62vmax; height: 62vmax;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .5;
  will-change: transform;
}

.bg__plume--a {
  top: -26vmax; left: -18vmax;
  background: radial-gradient(circle, rgba(239,130,0,.42) 0%, transparent 68%);
  animation: drift-a 47s ease-in-out infinite alternate;
}
.bg__plume--b {
  top: 8vmax; right: -26vmax;
  background: radial-gradient(circle, rgba(0,174,239,.38) 0%, transparent 68%);
  animation: drift-b 61s ease-in-out infinite alternate;
}
.bg__plume--c {
  bottom: -34vmax; left: 22vmax;
  background: radial-gradient(circle, rgba(236,0,140,.26) 0%, transparent 68%);
  animation: drift-c 73s ease-in-out infinite alternate;
}

@keyframes drift-a {
  from { transform: translate3d(0,0,0)            scale(1);    }
  to   { transform: translate3d(16vmax,10vmax,0)  scale(1.22); }
}
@keyframes drift-b {
  from { transform: translate3d(0,0,0)            scale(1.14); }
  to   { transform: translate3d(-14vmax,16vmax,0) scale(.9);   }
}
@keyframes drift-c {
  from { transform: translate3d(0,0,0)            scale(.95);  }
  to   { transform: translate3d(12vmax,-12vmax,0) scale(1.25); }
}

/* Halftoonraster: het vel is gedrukt, niet gerenderd. */
.halftone {
  position: fixed; inset: -30%;
  z-index: -2;
  pointer-events: none;
  opacity: .055;
  transform: rotate(15deg);
  background-image: radial-gradient(circle at center, #fff .8px, transparent .9px);
  background-size: 4px 4px;
}

/* ── Snijtekens en kleurenbalk ─────────────────────────────────────── */

.crops { position: fixed; inset: 0; z-index: 3; pointer-events: none; }

.crop {
  position: absolute;
  width: 22px; height: 22px;
  border: 0 solid var(--paper-faint);
}
.crop--tl { top: 18px;    left: 18px;    border-top-width: 1px;    border-left-width: 1px;  }
.crop--tr { top: 18px;    right: 18px;   border-top-width: 1px;    border-right-width: 1px; }
.crop--bl { bottom: 18px; left: 18px;    border-bottom-width: 1px; border-left-width: 1px;  }
.crop--br { bottom: 18px; right: 18px;   border-bottom-width: 1px; border-right-width: 1px; }

/* Kleurenbalk: schuine cellen die de vorm uit het beeldmerk herhalen. */
.colourbar {
  position: fixed; top: 0; left: 0; right: 0;
  height: 7px; z-index: 4;
  display: flex; gap: 3px;
  padding: 0 3px;
  transform: skewX(var(--skew));
  left: -2%; right: -2%;
}
/* ── Het vel ───────────────────────────────────────────────────────── */

.sheet {
  position: relative; z-index: 1;
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(3rem, 6vw, 5rem) var(--gut) clamp(2.5rem, 5vw, 4rem);
}

.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem 2rem;
  flex-wrap: wrap;
  padding-bottom: 1.4rem;
  border-bottom: 1px solid var(--hair);
}

.brand { display: block; line-height: 0; }
.brand img, .brand__mark {
  display: block;
  height: 28px;
  width: auto;
  max-width: min(58vw, 320px);
  object-fit: contain;
  object-position: left center;
}
.brand:focus-visible { outline: 2px solid var(--brand); outline-offset: 6px; }

/* ── Kop: de servernaam in register ────────────────────────────────── */

.hero { padding: clamp(2.5rem, 7vw, 5.5rem) 0 var(--stack); }

.plates {
  position: relative;
  display: inline-block;
  white-space: nowrap;
  margin: 0;
  font-size: clamp(2.6rem, 11.2vw, 11rem);
  font-weight: 800;
  font-stretch: 125%;
  line-height: .84;
  letter-spacing: -.022em;
  isolation: isolate;
  user-select: none;
}

.plate { display: block; }
.plate--c, .plate--m, .plate--o {
  position: absolute;
  inset: 0;
  mix-blend-mode: screen;
  pointer-events: none;
}
.plate--c { color: var(--plate-c); }
.plate--m { color: var(--plate-m); }
.plate--o { color: var(--brand); }
.plate--k {
  position: relative;
  color: var(--paper);
  opacity: .93;
}

/* Rustpositie: net niet in register, zoals een echt persvel. */
.plate--c { transform: translate(-.016em, -.008em); }
.plate--m { transform: translate( .014em,  .009em); }
.plate--o { transform: translate( .004em, -.014em); }

.plates.is-registering .plate--c { animation: reg-c 1.5s cubic-bezier(.16,.84,.24,1) both; }
.plates.is-registering .plate--m { animation: reg-m 1.5s cubic-bezier(.16,.84,.24,1) .06s both; }
.plates.is-registering .plate--o { animation: reg-o 1.5s cubic-bezier(.16,.84,.24,1) .12s both; }
.plates.is-registering .plate--k { animation: reg-k 1.5s cubic-bezier(.16,.84,.24,1) .18s both; }

@keyframes reg-c {
  from { transform: translate(-.13em, -.05em); opacity: 0; }
  to   { transform: translate(-.016em, -.008em); opacity: 1; }
}
@keyframes reg-m {
  from { transform: translate(.12em, .07em); opacity: 0; }
  to   { transform: translate(.014em, .009em); opacity: 1; }
}
@keyframes reg-o {
  from { transform: translate(.03em, -.11em); opacity: 0; }
  to   { transform: translate(.004em, -.014em); opacity: 1; }
}
@keyframes reg-k {
  from { transform: translate(0, .04em); opacity: 0; }
  to   { transform: translate(0, 0);     opacity: .93; }
}

.hero__sub {
  margin: clamp(1.5rem, 3vw, 2.25rem) 0 0;
  max-width: 46ch;
  font-size: clamp(1rem, .5vw + .92rem, 1.2rem);
  color: var(--paper-dim);
}
.hero__sub-line { display: block; color: var(--paper-faint); }
#heroOs, #heroSites { color: var(--paper-dim); }

/* ── Raster: specificaties naast belasting ─────────────────────────── */

.grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, .85fr);
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: stretch;
}

.rule {
  margin: 0 0 1.1rem;
  padding-bottom: .55rem;
  border-bottom: 1px solid var(--hair);
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--paper);
}

/* ── Specificatietabel ─────────────────────────────────────────────── */

.spec table {
  width: 100%;
  border-collapse: collapse;
}
.spec th, .spec td {
  padding: .68rem .25rem;
  border-bottom: 1px solid var(--hair-soft);
  vertical-align: baseline;
}
.spec tr:last-child th, .spec tr:last-child td { border-bottom: 0; }

.spec th {
  text-align: left;
  font-weight: 400;
  font-size: .9rem;
  color: var(--paper-dim);
  white-space: nowrap;
  padding-right: 1.25rem;
}
.spec td {
  text-align: right;
  color: var(--paper);
}

.num {
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .86em;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}


/* ── Meters ────────────────────────────────────────────────────────── */

.side {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: clamp(2.25rem, 4vw, 3rem);
}
.side .cta { align-self: end; }

.meter + .meter { margin-top: 1.35rem; }

.meter__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 .5rem;
}
.meter__name { font-size: .88rem; color: var(--paper-dim); }
.meter__val  { color: var(--paper); }

.meter__track {
  height: 9px;
  background: rgba(233,234,242,.075);
  transform: skewX(var(--skew));
  overflow: hidden;
}
.meter__fill {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--brand) 0%, var(--brand-lit) 100%);
  transition: width 1.1s cubic-bezier(.16,.84,.24,1);
}
.meter.is-high .meter__fill {
  background: linear-gradient(90deg, var(--brand-lit) 0%, var(--plate-m) 100%);
}

/* ── Verwijzing naar de website ────────────────────────────────────── */

.cta {
  position: relative;
  display: block;
  padding: 1.5rem 1.5rem 1.6rem;
  overflow: hidden;
  border: 1px solid var(--hair);
  color: var(--paper);
  text-decoration: none;
  background: rgba(233,234,242,.02);
  transition: border-color .25s ease, background .25s ease, color .25s ease;
}
.cta__label {
  display: block;
  font-weight: 600;
  font-size: 1.02rem;
  letter-spacing: -.005em;
}
.cta__note {
  display: block;
  margin-top: .2rem;
  font-size: .84rem;
  color: var(--paper-dim);
  transition: color .25s ease;
}
.cta:hover, .cta:focus-visible {
  border-color: var(--brand);
  background: rgba(239,130,0,.1);
  outline: none;
}
.cta:hover .cta__note, .cta:focus-visible .cta__note { color: var(--brand-lit); }
.cta:focus-visible { box-shadow: 0 0 0 2px rgba(239,130,0,.35); }

.cta::after {
  content: "";
  position: absolute;
  right: 1.5rem;
  bottom: 1.55rem;
  width: 26px;
  height: 12px;
  background: var(--brand);
  transform: skewX(var(--skew));
  transition: width .25s ease, background .25s ease;
}
.cta:hover::after, .cta:focus-visible::after { width: 40px; background: var(--brand-lit); }

/* ── Voet ──────────────────────────────────────────────────────────── */

.foot {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem 2rem;
  flex-wrap: wrap;
  margin-top: var(--stack);
  padding-top: 1.3rem;
  border-top: 1px solid var(--hair);
  font-size: .8rem;
  color: var(--paper-faint);
}
.foot p { margin: 0; }
.foot .num { font-size: .75rem; }

/* ── Smalle schermen ───────────────────────────────────────────────── */

@media (max-width: 860px) {
  .grid { grid-template-columns: minmax(0, 1fr); }
  .crop { width: 14px; height: 14px; }
  .crop--tl, .crop--tr { top: 12px; }
  .crop--bl, .crop--br { bottom: 12px; }
  .crop--tl, .crop--bl { left: 12px; }
  .crop--tr, .crop--br { right: 12px; }
}

@media (max-width: 520px) {
  .spec th { white-space: normal; }
  .masthead { align-items: flex-start; }
}

/* ── Bewegingsvoorkeur ─────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .bg__plume { animation: none; }
  .plates.is-registering .plate { animation: none; }
  .meter__fill { transition: none; }
  * { scroll-behavior: auto; }
}