/* ============================================================
   Druckts? — Shared base layer
   Reset · design tokens · animated printer · scroll reveals
   ============================================================ */

/* ---------- Modern reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body { min-height: 100%; line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, picture, svg, video, canvas { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
h1, h2, h3, h4 { line-height: 1.05; text-wrap: balance; letter-spacing: -0.02em; }
p { text-wrap: pretty; }
:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; border-radius: 4px; }

/* ---------- Shared brand tokens ---------- */
:root {
  --brand-mint:  #A6D8D2;
  --brand-mint-600: #6FB9B1;
  --brand-ink:   #0E0E0E;
  --brand-sand:  #F6F4EF;
  --brand-solar: #FFC94D;
  --brand-leaf:  #3FA66B;

  --maxw: 1200px;
  --gutter: clamp(1.25rem, 4vw, 4rem);
  --section-y: clamp(4.5rem, 11vw, 9rem);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Layout helpers ---------- */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 1rem; top: -3rem; z-index: 999;
  background: var(--brand-ink); color: #fff; padding: .6rem 1rem; border-radius: 8px;
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 1rem; }

/* ---------- Scroll reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: none; }

/* ============================================================
   Animated 3D-printer (brand motif) — injected by printer.js
   Colours are themed per version via CSS custom props:
   --pr-stroke, --pr-object, --pr-accent, --pr-glow
   ============================================================ */
.printer { width: 100%; height: auto; overflow: visible; }
.printer [stroke] { vector-effect: non-scaling-stroke; }

.pr-frame, .pr-gantry, .pr-bed, .pr-rail {
  fill: none;
  stroke: var(--pr-stroke, var(--brand-ink));
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pr-frame { stroke-width: 3.4; }
.pr-bed { stroke-width: 4.5; }

/* draw-on of the frame */
.pr-draw {
  stroke-dasharray: var(--len, 1400);
  stroke-dashoffset: var(--len, 1400);
}
.printer.is-live .pr-draw { animation: pr-draw 2.2s var(--ease) forwards; }
@keyframes pr-draw { to { stroke-dashoffset: 0; } }

/* print head travels along the X gantry */
.pr-head { transform-box: fill-box; transform-origin: center; }
.printer.is-live .pr-head { animation: pr-travel 3.6s ease-in-out 1.1s infinite; }
@keyframes pr-travel {
  0%, 100% { transform: translateX(-26px); }
  50%      { transform: translateX(26px); }
}
.pr-nozzle { fill: var(--pr-accent, var(--brand-solar)); }

/* printed object grows layer by layer */
.pr-layer {
  fill: var(--pr-object, var(--brand-mint));
  transform-box: fill-box;
  transform-origin: bottom center;
  transform: scaleY(0);
  opacity: 0;
}
.printer.is-live .pr-layer { animation: pr-layer .5s var(--ease) forwards; }
.printer.is-live .pr-layer:nth-child(1) { animation-delay: 1.4s; }
.printer.is-live .pr-layer:nth-child(2) { animation-delay: 1.7s; }
.printer.is-live .pr-layer:nth-child(3) { animation-delay: 2.0s; }
.printer.is-live .pr-layer:nth-child(4) { animation-delay: 2.3s; }
.printer.is-live .pr-layer:nth-child(5) { animation-delay: 2.6s; }
.printer.is-live .pr-layer:nth-child(6) { animation-delay: 2.9s; }
@keyframes pr-layer { to { transform: scaleY(1); opacity: 1; } }

/* tiny sun = "Sonnenschein in sich" */
.pr-sun { transform-box: fill-box; transform-origin: center; }
.printer.is-live .pr-sun { animation: pr-spin 18s linear infinite; }
@keyframes pr-spin { to { transform: rotate(360deg); } }

/* ============================================================
   Review-only chrome: floating version switcher
   ============================================================ */
.vswitch {
  position: fixed;
  z-index: 200;
  left: 50%;
  bottom: clamp(1rem, 3vw, 1.75rem);
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: .25rem;
  padding: .35rem;
  background: rgba(14, 14, 14, .9);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-radius: 999px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .28);
  font: 600 .82rem/1 "Inter", system-ui, sans-serif;
}
.vswitch a {
  display: inline-flex;
  align-items: center;
  padding: .5rem .85rem;
  border-radius: 999px;
  color: #fff;
  opacity: .7;
  transition: opacity .2s var(--ease), background .2s var(--ease);
}
.vswitch a:hover { opacity: 1; }
.vswitch a[aria-current="page"] { background: var(--brand-mint); color: var(--brand-ink); opacity: 1; }
.vswitch .vswitch__home { opacity: .55; font-weight: 500; }
@media print { .vswitch { display: none; } }

/* ---------- Reduced motion: everything calm ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .printer .pr-draw { stroke-dashoffset: 0; }
  .printer .pr-layer { transform: none; opacity: 1; }
  .printer.is-live .pr-head,
  .printer.is-live .pr-sun,
  .printer.is-live .pr-draw,
  .printer.is-live .pr-layer { animation: none; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}