/* digital-gecko.net — a quiet notice, dressed up a little.
   System fonts only: no external requests, no Google Fonts. */

:root{
  --bg-0:#081310;
  --bg-1:#0d1c18;
  --ink:#eef4f0;
  --muted:#9fb6ac;
  --muted-2:#6a8078;
  --line: rgba(178,214,198,.14);
  --accent:#5fd9a0;
  --accent-bright:#8ff0c2;
  --gold:#cda15e;
  --gold-bright:#ecc989;
  --gold-dim:#8a744a;

  --serif: Georgia, 'Iowan Old Style', 'Palatino Linotype', 'Times New Roman', serif;
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

*{ box-sizing:border-box; }

html{ color-scheme:dark; }

body{
  margin:0;
  min-height:100vh;
  font-family:var(--sans);
  color:var(--ink);
  background:
    radial-gradient(60% 50% at 50% 18%, rgba(95,217,160,.10), transparent 60%),
    radial-gradient(80% 60% at 85% 100%, rgba(205,161,94,.06), transparent 60%),
    linear-gradient(180deg, var(--bg-1), var(--bg-0));
  -webkit-font-smoothing:antialiased;
}

a{ color:inherit; }

/* ---------- Home / notice page ---------- */

.stage{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:96px 24px 120px;
  overflow:hidden;
  text-align:center;
}

.prints{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  color:var(--accent);
  pointer-events:none;
}

.card{ position:relative; z-index:1; max-width:640px; }

.kicker{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--sans);
  font-size:.76rem;
  font-weight:600;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--accent);
  margin:0 0 22px;
}
.kicker::before{ content:""; width:26px; height:1px; background:var(--gold-dim); display:inline-block; }
.kicker::after{ content:""; width:26px; height:1px; background:var(--gold-dim); display:inline-block; }

h1{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(1.9rem, 5.4vw, 3.1rem);
  line-height:1.18;
  letter-spacing:-.01em;
  color:var(--ink);
  margin:0 0 26px;
}

.lede{
  font-size:1.05rem;
  line-height:1.65;
  color:var(--muted);
  max-width:38ch;
  margin:0 auto 40px;
}

.agency-link{
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  gap:5px;
  padding:18px 32px;
  border:1px solid var(--gold-dim);
  border-radius:12px;
  background:linear-gradient(180deg, rgba(205,161,94,.10), rgba(205,161,94,.03));
  text-decoration:none;
  box-shadow:0 12px 32px -14px rgba(205,161,94,.4);
  transition:border-color .3s ease, background .3s ease, transform .3s cubic-bezier(.2,.9,.3,1.4), box-shadow .3s ease;
}
.agency-link:hover{
  border-color:var(--gold-bright);
  background:linear-gradient(180deg, rgba(205,161,94,.18), rgba(205,161,94,.06));
  transform:translateY(-3px) scale(1.025);
  box-shadow:0 18px 40px -14px rgba(205,161,94,.6), 0 0 0 1px rgba(236,201,137,.3);
}
.agency-link:active{ transform:translateY(-1px) scale(1.01); }
.agency-name{
  font-family:var(--sans);
  font-weight:600;
  font-size:1.02rem;
  letter-spacing:.01em;
  color:var(--gold-bright);
}
.agency-name{ display:inline-flex; align-items:center; gap:6px; }
.agency-name svg{ opacity:.75; flex-shrink:0; }
.agency-tagline{
  font-family:var(--serif);
  font-style:italic;
  font-size:.85rem;
  color:var(--muted);
}

/* ---------- Hidden-but-honest legal footer ---------- */

.legal{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  display:flex;
  justify-content:center;
  gap:22px;
  padding:16px 20px;
  z-index:2;
}
.legal a{
  font-size:.72rem;
  letter-spacing:.05em;
  color:var(--muted-2);
  text-decoration:none;
  opacity:.5;
  transition:opacity .2s ease, color .2s ease;
}
.legal a:hover{ opacity:1; color:var(--accent-bright); }

/* ---------- Legal pages (Impressum / Datenschutz) ---------- */

.doc{
  position:relative;
  z-index:1;
  max-width:640px;
  margin:0 auto;
  padding:96px 24px 140px;
}
.doc .back{
  display:inline-block;
  margin-bottom:40px;
  font-size:.82rem;
  color:var(--muted);
  text-decoration:none;
  opacity:.7;
}
.doc .back:hover{ opacity:1; color:var(--accent-bright); }
.doc h1{
  font-size:clamp(1.7rem, 4vw, 2.3rem);
  margin-bottom:8px;
}
.doc .updated{
  font-size:.8rem;
  color:var(--muted-2);
  margin-bottom:44px;
}
.doc h2{
  font-family:var(--sans);
  font-size:.98rem;
  color:var(--gold-bright);
  letter-spacing:.02em;
  margin:38px 0 12px;
}
.doc p{
  font-size:.95rem;
  line-height:1.7;
  color:var(--muted);
  margin:0 0 14px;
}
.doc address{ font-style:normal; }
.doc a.inline{ color:var(--accent-bright); text-decoration:underline; text-underline-offset:2px; }
.doc ul{ margin:0 0 14px; padding-left:1.2em; color:var(--muted); font-size:.95rem; line-height:1.7; }
.doc hr{ border:none; border-top:1px solid var(--line); margin:44px 0; }

@media (max-width:520px){
  .legal{ gap:16px; }
}

/* ---------- Entrance animation ---------- */

@keyframes rise{
  from{ opacity:0; transform:translateY(18px); filter:blur(6px); }
  to{ opacity:1; transform:translateY(0); filter:blur(0); }
}
.reveal{
  opacity:0;
  animation:rise 3.2s cubic-bezier(.16,1,.3,1) forwards;
}
.reveal-1{ animation-delay:.2s; }
.reveal-2{ animation-delay:1.7s; }
.reveal-3{ animation-delay:2.4s; animation-duration:1.6s; }

/* The CTA gets its own bouncier "pop" entrance, then a slow idle glow
   so it keeps reading as the one thing on the page you should click. */
@keyframes pop{
  0%{ opacity:0; transform:translateY(14px) scale(.88); filter:blur(5px); }
  65%{ opacity:1; transform:translateY(0) scale(1.035); filter:blur(0); }
  100%{ opacity:1; transform:translateY(0) scale(1); }
}
@keyframes glow{
  0%,100%{ box-shadow:0 12px 32px -14px rgba(205,161,94,.4); }
  50%{ box-shadow:0 12px 38px -10px rgba(205,161,94,.65), 0 0 20px 1px rgba(236,201,137,.18); }
}
.pop-in{
  opacity:0;
  animation:
    pop 2.2s cubic-bezier(.34,1.56,.64,1) 3s forwards,
    glow 8s ease-in-out 5.2s infinite;
}

@media (prefers-reduced-motion: reduce){
  .reveal{ animation:none; opacity:1; }
  .pop-in{ animation:none; opacity:1; }
}