/* =========================================================
   Wies Ruyters — academic site
   Shared design system: reset, gradient background, header
   (menu + brand mark), footer, and small utilities.
   Page-specific layout lives in the <style> block of each page
   or in a page-specific section at the bottom of this file.
   ========================================================= */

@view-transition {
  navigation: auto;
}

:root {
  --navy: #053e76;
  --navy-soft: rgba(5, 62, 118, 0.65);
  --yellow: #ffc100;
  --lavender: #a5a5d5;
  --blue-accent: #c2daee;
  --green: rgb(8, 211, 123);
  --white: #ffffff;

  /* Header (top-left menu + top-right name badge). Full size from 900px
     wide upward; below that both shrink in proportion to the window so
     they always sit side by side at the top and never overlap.
     --header-h is the header's height, for pages to leave room for it. */
  --hdr-font: clamp(9px, 1.667vw, 15px);
  --hdr-inset: clamp(8px, 2.667vw, 24px);
  --brand-w: clamp(110px, 33.333vw, 300px);
  --header-h: max(calc(var(--hdr-inset) + 8.3 * var(--hdr-font)), calc(0.53 * var(--brand-w)));
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  font-family: var(--font-sans);
  color: var(--navy);
  overflow: hidden;
  position: relative;
}

/* ---------- one continuous scrolling page ----------
   plain scroll, no scroll-snap: snapping fought badly with
   conference-presentations (much taller than 100vh) and made the
   footer at the very bottom of contact hard to reach smoothly, so
   sections just flow one after another and the browser scrolls
   through them normally, top to bottom and back. */

.scroll-container {
  height: 100vh;
  overflow-y: auto;
}

.section {
  position: relative;
  min-height: 100vh;
}

.section[hidden] {
  display: none;
}

a {
  color: inherit;
}

img {
  max-width: 100%;
  display: block;
}

::selection {
  background: var(--yellow);
  color: var(--navy);
}

/* ---------- animated gradient background ---------- */

.gradient-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  --scroll-shift: 0deg;
  background: conic-gradient(
    from calc(var(--angle-base, 200deg) + var(--scroll-shift, 0deg)) at 45% 35%,
    #ddc9ea 0%,
    #c8d3ee 28%,
    #bedcef 52%,
    #cfc7ec 78%,
    #ddc9ea 100%
  );
}

/* ---------- top-left menu ---------- */

.menu {
  position: fixed;
  top: var(--hdr-inset);
  left: var(--hdr-inset);
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-family: var(--font-mono);
}

.menu a {
  display: block;
  width: fit-content;
  padding: 0.467em 1.067em;
  font-size: var(--hdr-font);
  letter-spacing: 0.06em;
  text-decoration: none;
  background: var(--navy);
  color: #fff;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.menu a + a {
  margin-top: 0;
}

.menu a.active {
  background: var(--yellow);
  color: #14110a;
  font-weight: 700;
}

.menu a:not(.active):hover {
  background: #0b4f8f;
}

/* ---------- brand mark (name tags + portrait + email) ----------
   The hero (index.html only) is the standalone design SVG
   (vis/vis_portrait+wies-ruyters.svg) loaded as a plain <img>, since
   it needs no interactivity of its own. The corner mark (every page,
   including index.html once scrolled past the hero) is inlined SVG
   markup so its portrait and email sub-regions can each carry their
   own hover/click behavior - portrait links back home, email links
   to mailto:. Only the corner mark carries the view-transition-name:
   index.html has both marks in the DOM at once, and two elements
   sharing one name is invalid, so the hero doesn't participate in
   the cross-page morph (there's no equivalent hero on the other
   pages anyway). */

.brand {
  z-index: 25;
}

.brand-svg {
  display: block;
  width: 100%;
  height: auto;
}

/* corner (scientific_projects / conference_presentations /
   beyond_academia / contact) */

.brand--corner {
  position: fixed;
  top: 0;
  right: 0;
  width: var(--brand-w);
  z-index: 25;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
  view-transition-name: brand-mark;
}

.brand--corner.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.corner-portrait-link {
  cursor: pointer;
}

.corner-portrait-outline {
  fill: none;
  stroke: #fff;
  stroke-width: 88.75px;
  transition: stroke 0.2s ease, stroke-width 0.2s ease;
}

.corner-portrait-link:hover .corner-portrait-outline,
.corner-portrait-link:focus-visible .corner-portrait-outline {
  stroke: #000;
  stroke-width: 100px;
}

.corner-mail-link {
  cursor: pointer;
}

.corner-mail-bg {
  fill: #fff;
  transition: fill 0.15s ease;
}

.corner-mail-link:hover .corner-mail-bg,
.corner-mail-link:focus-visible .corner-mail-bg {
  fill: var(--yellow);
}

/* ---------- footer copyright ---------- */

.site-footer {
  position: absolute;
  bottom: 22px;
  left: 0;
  right: 0;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.08em;
  color: rgba(5, 62, 118, 0.45);
  pointer-events: none;
}

/* ---------- highlighter text utility ---------- */
/* wraps inline text with a per-line white "highlighter" box,
   matching the marker-strip look in the designs */

.highlight {
  background: #fff;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  padding: 0.05em 0.3em;
}

.highlight--yellow {
  background: var(--yellow);
}

.highlight--green {
  background: rgb(8, 211, 123);
}

.highlight--blue {
  background: var(--blue-accent);
}

/* ---------- visually-hidden (skip links / a11y) ---------- */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}