entscheidomat/app/globals.css

@import "tailwindcss";

@theme {
  /* Typografie */
  --font-sans: var(--font-inter), ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-display: var(--font-cormorant), Georgia, serif;

  /* Farben – Warmes Porzellan-Papier mit sattem Gelb-Grün / Smaragd */
  --color-paper: #faf8f3;
  --color-surface: #ffffff;
  --color-ink: #111412;
  --color-ink-soft: #45504a;
  --color-line: #e0eae4;

  --color-primary: #111412;
  --color-primary-strong: #000000;
  --color-primary-soft: #e6f7f0;

  /* Glücksspiel & Zufall – Gelb-Grün / Smaragdgrün */
  --color-emerald-accent: #0d7a57;
  --color-emerald-strong: #095c41;
  --color-emerald-soft: #e6f7f0;
  --color-emerald-line: #b2e5d1;

  --color-clay: #b4633f;
  --color-clay-soft: #f6eae2;

  /* Schatten */
  --shadow-soft: 0 2px 4px rgb(17 20 18 / 0.03), 0 12px 36px rgb(17 20 18 / 0.06);
  --shadow-lift: 0 4px 12px rgb(17 20 18 / 0.06), 0 24px 52px rgb(17 20 18 / 0.10);
  --shadow-cta: 0 12px 28px rgb(17 20 18 / 0.22);

  /* Animationen */
  --animate-float: float 7s ease-in-out infinite;
  --animate-coin-spin: coin-spin 10s linear infinite;
  --animate-bob: bob 2.4s ease-in-out infinite;

  @keyframes float {
    0%,
    100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-16px);
    }
  }
  @keyframes coin-spin {
    from {
      transform: rotateY(0deg);
    }
    to {
      transform: rotateY(360deg);
    }
  }
  @keyframes bob {
    0%,
    100% {
      transform: translateY(0);
      opacity: 0.7;
    }
    50% {
      transform: translateY(6px);
      opacity: 1;
    }
  }
  @keyframes stream {
    from {
      stroke-dashoffset: 1000;
    }
    to {
      stroke-dashoffset: 0;
    }
  }
  @keyframes shootTL {
    0% {
      transform: translate(0, 0);
      opacity: 0;
    }
    20% {
      opacity: 0.7;
    }
    80% {
      opacity: 0.7;
    }
    100% {
      transform: translate(520px, 180px);
      opacity: 0;
    }
  }
  @keyframes shootTR {
    0% {
      transform: translate(0, 0);
      opacity: 0;
    }
    20% {
      opacity: 0.7;
    }
    80% {
      opacity: 0.7;
    }
    100% {
      transform: translate(-520px, 190px);
      opacity: 0;
    }
  }
  @keyframes shootBL {
    0% {
      transform: translate(0, 0);
      opacity: 0;
    }
    20% {
      opacity: 0.65;
    }
    80% {
      opacity: 0.65;
    }
    100% {
      transform: translate(480px, -170px);
      opacity: 0;
    }
  }
}

/* ---------- Basis ---------- */

html {
  scroll-behavior: smooth;
}

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

body {
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Der Inline-Check im Root-Layout läuft vor der Hydration. Dadurch blitzt der
   Preloader bei einem Reload innerhalb derselben Browser-Session nicht auf. */
/* Der Preloader würde auf einem gedrosselten Mobilgerät das LCP-Element
   verdecken. Die Seite bleibt dort sofort lesbar; Desktop behält den Effekt. */
@media (max-width: 767px) {
  [data-preloader-overlay] {
    display: none;
  }
}

/* Die Hero-Inhalte sind bereits vor dem Öffnen des Vorhangs im Startzustand.
   So kann GSAP sie nicht erst sichtbar machen und anschließend zurücksetzen. */
@media (prefers-reduced-motion: no-preference) {
  html[data-preloader="active"] .hero-el {
    opacity: 0;
    transform: translateY(34px);
  }

  .reveal {
    opacity: 0;
    transform: translateY(var(--reveal-y, 30px));
    transition:
      opacity 0.7s ease var(--reveal-delay, 0s),
      transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) var(--reveal-delay, 0s);
  }

  .reveal--visible {
    opacity: 1;
    transform: translateY(0);
  }
}

::selection {
  background: rgb(22 21 19 / 0.12);
}

:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: 6px;
}

/* Dezente Scrollbar */
::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: var(--color-paper);
}
::-webkit-scrollbar-thumb {
  background: #d5d0c2;
  border-radius: 8px;
  border: 2px solid var(--color-paper);
}
::-webkit-scrollbar-thumb:hover {
  background: #c1bbab;
}

/* ---------- Hintergrund-Deko ---------- */

.bg-grid {
  background-image:
    linear-gradient(to right, rgb(32 30 25 / 0.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgb(32 30 25 / 0.045) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(ellipse 90% 65% at 50% 0%, black 25%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 90% 65% at 50% 0%, black 25%, transparent 78%);
}

.bg-noise {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.03;
}

/* ---------- 3D-Münze (gebürstetes Messing, flach) ---------- */

.coin-scene {
  perspective: 1100px;
}

.coin {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  will-change: transform;
}

.coin-face {
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.coin-face--front {
  transform: translateZ(4px);
  background: #dec998;
  box-shadow:
    inset 0 1px 2px rgb(255 250 235 / 0.5),
    inset 0 -2px 4px rgb(120 90 40 / 0.12);
}

.coin-face--back {
  background: #d6be87;
  box-shadow:
    inset 0 1px 2px rgb(255 248 228 / 0.5),
    inset 0 -2px 4px rgb(110 82 36 / 0.12);
}

.coin-edge {
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  background: #8a6f44;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.coin-engraving {
  position: absolute;
  inset: 8%;
  border-radius: 9999px;
  border: 2px solid rgb(122 94 51 / 0.38);
  pointer-events: none;
}

.coin-engraving--inner {
  inset: 16%;
  border-width: 1px;
  border-color: rgb(122 94 51 / 0.26);
}

.coin-label {
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: #6e5533;
  text-shadow: 0 1px 0 rgb(255 246 224 / 0.8);
  max-width: 78%;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- 3D-Würfel ---------- */

.dice-scene {
  perspective: 900px;
}

.dice {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  will-change: transform;
}

.dice-face {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fdfcf9;
  border: 1px solid var(--color-line);
  border-radius: 18%;
  box-shadow: inset 0 0 14px rgb(32 30 25 / 0.06);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
  padding: 8%;
}

.dice-face-label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(9px, 1.6vw, 13px);
  line-height: 1.2;
  text-align: center;
  color: var(--color-ink);
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------- Magic 8-Ball (warmes Anthrazit, flach) ---------- */

.ball-body {
  background: #1d1b17;
  box-shadow:
    inset 0 -18px 42px rgb(0 0 0 / 0.6),
    inset 0 10px 26px rgb(255 255 255 / 0.07),
    0 30px 60px rgb(32 30 25 / 0.28);
}

.ball-window {
  background: #12130f;
  box-shadow:
    inset 0 4px 18px rgb(0 0 0 / 0.75),
    0 0 0 6px rgb(255 255 255 / 0.05);
}

/* ---------- Diverse ---------- */

.tabular {
  font-variant-numeric: tabular-nums;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}