:root {
  --ui-scale: 1.25;

  --bg1: radial-gradient(circle at top, #2a2e55, #151426);
  --ink: rgba(255, 255, 255, 0.92);
  --text: rgba(255, 255, 255, 0.76);
  --muted: rgba(255, 255, 255, 0.55);
  --line: rgba(255, 255, 255, 0.14);
  --accent: #ff8a3d;

  --font:
    "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --t-med: 1000ms;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font);
  background: var(--bg1);
  color: var(--text);
}

/* =========================
Topbar
========================= */

.topbar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 5;
  padding: calc(14px * var(--ui-scale)) calc(18px * var(--ui-scale));
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0));
  pointer-events: none;
}

.topbar-inner {
  max-width: 920px;
  margin: 0 auto;
  display: flex;
  gap: calc(14px * var(--ui-scale));
  align-items: baseline;
}

.kicker {
  margin: 0;
  font-size: calc(12px * var(--ui-scale));
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
}

.meta {
  margin: 0;
  font-size: calc(12px * var(--ui-scale));
  letter-spacing: 0.06em;
  color: var(--muted);
}

/* =========================
Panels
========================= */

main {
  position: relative;
}

.panel {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: calc(110px * var(--ui-scale)) 22px calc(80px * var(--ui-scale));
  border-bottom: 1px solid var(--line);
}

.content {
  width: min(920px, 100%);
}

/* =========================
Typography
========================= */

h1 {
  margin: 0 0 calc(14px * var(--ui-scale));
  font-size: clamp(calc(40px * 1.15), calc(6vw * 1.15), calc(68px * 1.15));
  letter-spacing: -0.04em;
  color: var(--ink);
  font-weight: 700;
}

h2 {
  margin: 0 0 calc(10px * var(--ui-scale));
  font-size: clamp(calc(26px * 1.4), calc(3.2vw * 1.4), calc(38px * 1.4));
  letter-spacing: -0.02em;
  color: var(--ink);
  font-weight: 650;
}

p {
  margin: 0 0 calc(14px * var(--ui-scale));
  font-size: clamp(
    calc(16px * var(--ui-scale)),
    calc(2vw * var(--ui-scale)),
    calc(20px * var(--ui-scale))
  );
  color: var(--text);
  max-width: 62ch;
}

/* =========================
Panel Variationen
========================= */

.panel--intro {
  border-bottom-color: transparent;
}

.panel--a {
  background: rgba(255, 255, 255, 0.02);
}

.panel--b {
  background: rgba(255, 138, 61, 0.03);
}

.panel--c {
  background: rgba(0, 255, 255, 0.02);
}

.panel--d {
  background: rgba(255, 255, 255, 0.015);
}

.panel--e {
  background: rgba(255, 138, 61, 0.02);
}

/* Hint */

.hint {
  margin-top: calc(28px * var(--ui-scale));
  display: inline-flex;
  gap: calc(10px * var(--ui-scale));
  align-items: center;
  color: var(--muted);
  font-size: calc(12px * var(--ui-scale));
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.hint span:first-child {
  font-size: calc(18px * var(--ui-scale));
  color: var(--accent);
}

/* Gallery */

.gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(16px * var(--ui-scale));
  margin-top: calc(20px * var(--ui-scale));
}

.gallery img {
  width: 100%;
  display: block;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

/* =========================
Reveal System
========================= */

.reveal .reveal-item {
  opacity: 0;
  transform: translateY(40px);
  filter: blur(12px);
  transition:
    opacity var(--t-med) var(--ease),
    transform var(--t-med) var(--ease),
    filter var(--t-med) var(--ease);
  will-change: opacity, transform, filter;
}

.reveal.is-visible .reveal-item {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* Varianten */

.reveal--fade .reveal-item {
  transform: translateY(50px);
  filter: blur(14px);
}

.reveal--slide .reveal-item {
  transform: translateX(90px);
  filter: blur(10px);
}

.reveal--slide.is-visible .reveal-item {
  transform: translateX(0);
  filter: blur(0);
}

.reveal--scale .reveal-item {
  transform: scale(0.82);
  filter: blur(10px);
}

.reveal--scale.is-visible .reveal-item {
  transform: scale(1);
  filter: blur(0);
}

.reveal--rotate .reveal-item {
  transform: rotate(12deg) translateY(26px);
  filter: blur(10px);
}

.reveal--rotate.is-visible .reveal-item {
  transform: rotate(0deg) translateY(0);
  filter: blur(0);
}

/* Reduced motion */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .reveal .reveal-item {
    transition: none;
    opacity: 1;
    transform: none;
    filter: none;
  }
}

/* Mobile */

@media (max-width: 760px) {
  .topbar-inner {
    flex-direction: column;
    gap: 4px;
  }

  .gallery {
    grid-template-columns: 1fr;
  }
}

/* Signature Section */

.panel--signature {
  position: relative;
  overflow: hidden;
}

.sig-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
  pointer-events: none;
  opacity: 0.95;
}

.sig-content {
  position: relative;
  z-index: 1;
}

.reveal--signature .reveal-item {
  text-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

.sig-meta {
  color: rgba(255, 255, 255, 0.58);
  font-size: calc(12px * var(--ui-scale));
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-top: calc(10px * var(--ui-scale));
}

/* Scroll to top */

.end {
  padding: calc(60px * var(--ui-scale)) 0 calc(80px * var(--ui-scale));
  text-align: center;
}

.to-top {
  text-decoration: none;
  display: inline-block;
  opacity: 0;
  transform: translateY(80px);
  transition:
    opacity 500ms var(--ease),
    transform 500ms var(--ease);
}

.to-top.is-visible {
  opacity: 0.6;
  transform: translateY(0);
}

.to-top:hover {
  opacity: 1;
}

.arrow-up {
  font-size: calc(18px * var(--ui-scale));
  color: var(--accent);
}