/* ---------------------------------------------------------------
   Hacker Bürofachhandel — Static Site Stylesheet
   Custom utilities, theme tokens, and animations layered on top
   of the Tailwind Play CDN (configured in tailwind-config.js).
--------------------------------------------------------------- */

:root {
  --color-bg: #f6f4ef;
  --color-bg-2: #eeebe3;
  --color-card: #ffffff;
  --color-ink: #0e0d0c;
  --color-ink-soft: #2d2a27;
  --color-ink-mute: #777069;
  --color-line: #1a17150f;
  --color-line-strong: #1a171524;
  --color-accent: #b9381f;
  --color-accent-deep: #8a2714;
  --color-vermillion: #b9381f;
  --color-cream: #f6f4ef;

  --font-display: "Fraunces", "Times New Roman", serif;
  --font-body: "Geist", "Helvetica Neue", system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", monospace;

  color-scheme: light;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

html,
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--color-ink);
  color: var(--color-bg);
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.022em;
  margin: 0;
}

p,
ul,
ol,
dl,
dd,
dt,
figure {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

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

img,
video {
  display: block;
  max-width: 100%;
  height: auto;
  color: transparent;
}

button {
  font: inherit;
  background: none;
  border: 0;
  cursor: pointer;
  color: inherit;
}

/* -----------------------------------------------------------
   Typography & Utility Classes
----------------------------------------------------------- */

.font-display {
  font-family: var(--font-display);
}
.font-mono {
  font-family: var(--font-mono);
}
.text-balance {
  text-wrap: balance;
}
.text-pretty {
  text-wrap: pretty;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-ink-mute);
}

.hairline-top {
  border-top: 1px solid var(--color-line-strong);
}
.hairline-b {
  border-bottom: 1px solid var(--color-line-strong);
}

.card {
  background: var(--color-card);
  box-shadow:
    0 1px 0 rgba(0, 0, 0, 0.03),
    0 24px 48px -36px rgba(14, 13, 12, 0.25);
  border: 1px solid var(--color-line);
}

.paper-card {
  background: var(--color-card);
  box-shadow:
    0 1px 0 rgba(0, 0, 0, 0.03),
    0 24px 48px -36px rgba(14, 13, 12, 0.25);
  border: 1px solid var(--color-line);
}

.grain {
  position: relative;
}
.grain::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.12;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.05 0 0 0 0 0.04 0 0 0 0 0.03 0 0 0 0.2 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* -----------------------------------------------------------
   Reveal-on-scroll
----------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.9s cubic-bezier(0.2, 0.7, 0.1, 1),
    transform 0.9s cubic-bezier(0.2, 0.7, 0.1, 1);
  will-change: opacity, transform;
}
.reveal.is-in {
  opacity: 1;
  transform: translateY(0);
}
.reveal[data-delay="1"] {
  transition-delay: 0.1s;
}
.reveal[data-delay="2"] {
  transition-delay: 0.2s;
}
.reveal[data-delay="3"] {
  transition-delay: 0.3s;
}
.reveal[data-delay="4"] {
  transition-delay: 0.4s;
}
.reveal[data-delay="5"] {
  transition-delay: 0.5s;
}

@keyframes subtle-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}

.img-zoom {
  overflow: hidden;
}
.img-zoom > * {
  transition: transform 1.2s cubic-bezier(0.2, 0.7, 0.1, 1);
}
.img-zoom:hover > * {
  transform: scale(1.04);
}

.rule-dotted {
  background-image: radial-gradient(
    circle,
    var(--color-ink-mute) 0.9px,
    transparent 1.2px
  );
  background-size: 10px 100%;
  background-repeat: repeat-x;
  background-position: center;
  height: 1px;
  opacity: 0.5;
}

/* -----------------------------------------------------------
   Marquee (footer)
----------------------------------------------------------- */
@keyframes marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
.marquee {
  animation: marquee 50s linear infinite;
}