/* Colors, sizes and times come from config.js (set as CSS variables by script.js) */
:root {
  --page-bg: #000;
  --text: #fff;
  --bar-bg: rgba(45, 46, 41, 0.5);
  --bar-bg-clear: rgba(45, 46, 41, 0);
  --dim-rgba: rgba(0, 0, 0, 0.8);
  --font: 'Newsreader', 'Times New Roman', Times, serif;
  --bar-width: 85%;
  --fs: 18px;
  --fs-name: 24px;
  --fs-email: 18px;
  --fs-footer: 14px;
  --icon-size: var(--fs-footer);
  --icon-gap: 20px;
  --content-gap: 28px;
  --hover-fade: 250ms;
  --pad: clamp(20px, 2.5vw, 48px);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { min-height: 100%; }

body {
  background: var(--page-bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs);
  line-height: 1.3;
  -webkit-font-smoothing: antialiased;
}
body.upper .site, body.upper .loader-line { text-transform: uppercase; }

a { color: inherit; text-decoration: none; }

/* ---------- Background layers ---------- */
.bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: var(--page-bg); }
.bg video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bg-dim { position: absolute; inset: 0; background: var(--dim-rgba); }
.bg-noise { position: absolute; inset: -50%; background-repeat: repeat; pointer-events: none; }
.bg-noise.animate { animation: grain 0.9s steps(6) infinite; }
@keyframes grain {
  0%   { transform: translate(0, 0); }
  17%  { transform: translate(-6%, 4%); }
  33%  { transform: translate(5%, -7%); }
  50%  { transform: translate(-3%, 8%); }
  67%  { transform: translate(7%, 3%); }
  83%  { transform: translate(-8%, -5%); }
  100% { transform: translate(0, 0); }
}

/* ---------- Page ---------- */
.site {
  position: relative; z-index: 1;
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column;
  padding:
    calc(var(--pad) + env(safe-area-inset-top, 0px))
    calc(var(--pad) + env(safe-area-inset-right, 0px))
    calc(var(--pad) + env(safe-area-inset-bottom, 0px))
    calc(var(--pad) + env(safe-area-inset-left, 0px));
}

/* Every section fades in (timing is set from config.js) */
.block {
  opacity: 0;
  transform: translateY(var(--rise, 0px));
  transition-property: opacity, transform;
  transition-timing-function: ease;
}
.block.in { opacity: var(--op, 1); transform: none; }

.site-name {
  text-align: center;
  font-weight: 400;
  font-size: var(--fs-name);
  line-height: 1.15;
  letter-spacing: 0.01em;
  padding-top: clamp(24px, 6vh, 70px);
  overflow-wrap: anywhere;
}

main {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--content-gap);
  padding: clamp(16px, 3vh, 40px) 0;
}

.about { display: flex; flex-direction: column; align-items: center; gap: 1.2em; text-align: center; max-width: 60ch; }
.about h2 { font-weight: 400; font-size: var(--fs); line-height: 1.3; }
.about p { line-height: 1.5; }
.about h2, .about p { text-transform: none; }
body.about-upper .about h2, body.about-upper .about p { text-transform: uppercase; }

/* ---------- Hover box (fades in and out) ---------- */
.hover-bar {
  display: inline-block;
  background-color: var(--bar-bg-clear);
  transition: background-color var(--hover-fade) ease;
}
/* Hover box: on touch screens it shows while pressed instead of sticking after a tap */
@media (hover: hover) { .hover-bar:hover { background-color: var(--bar-bg); } }
.hover-bar:active, .hover-bar:focus-visible { background-color: var(--bar-bg); outline: none; }

.email-wrap { width: 100%; display: flex; justify-content: center; }
.email { display: block; width: var(--bar-width); text-align: center; font-size: var(--fs-email); text-transform: none; padding: 0.35em 0.5em; overflow-wrap: anywhere; }

/* ---------- Social icons ---------- */
.socials { display: flex; align-items: center; justify-content: center; gap: var(--icon-gap); }
.icon-link { display: inline-flex; align-items: center; justify-content: center; padding: 4px; }
.icon-link svg { width: var(--icon-size); height: var(--icon-size); fill: currentColor; display: block; }
.icon-link svg.stroke { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
a:focus-visible { outline: 1px solid var(--text); outline-offset: 2px; }
.hover-bar:focus-visible { outline: none; }

/* ---------- Footer ---------- */
.footer { text-align: center; font-size: var(--fs-footer); padding-top: 24px; }

/* ---------- Loading screen ---------- */
.loader {
  position: fixed; inset: 0; z-index: 10;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.9em;
  text-align: center;
  padding: 0 24px;
}
.loader-line { opacity: 0; font-weight: 400; overflow-wrap: anywhere; }

/* Bigger tap targets on touch screens */
@media (pointer: coarse) {
  .icon-link { min-width: 44px; min-height: 44px; }
  .email { padding: 0.7em 0.5em; }
}

@media (prefers-reduced-motion: reduce) {
  .bg-noise.animate { animation: none; }
}