/* ============================================================
   hero.css — interactive canvas header + centered lockup
   ============================================================ */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  padding: var(--nav-h) 24px 40px;
  overflow: hidden;
}

#hero-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 0;
  image-rendering: auto;       /* smooth upscale of the low-res marble buffer */
  filter: saturate(.92) contrast(.96) brightness(.96) blur(.3px);
}
/* darken canvas toward the bottom so text reads */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(60% 50% at 50% 52%, rgba(14,13,11,.62) 0%, rgba(14,13,11,.28) 45%, transparent 70%),
    radial-gradient(130% 95% at 50% 40%, transparent 28%, rgba(14,13,11,.5) 80%, var(--bg) 100%);
}

.hero-inner {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center;
  gap: 26px;
}

.hero-logo {
  width: 84px; height: 84px; border-radius: 50%;
  /* recolor the black logo to warm white (normal text colour) */
  filter: invert(93%) sepia(8%) saturate(420%) hue-rotate(2deg) brightness(102%) contrast(96%);
  opacity: 0; transform: scale(.85) rotate(-4deg);
  animation: heroPop 1.1s var(--ease) .15s forwards;
}

/* Sonnenzirkel wordmark — large, warm, slightly hand-set feel */
.hero-wordmark {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.8rem, 9vw, 6.5rem);
  line-height: .95;
  letter-spacing: -.02em;
  color: var(--text);
  text-shadow: 0 4px 30px rgba(14,13,11,.55);
  opacity: 0; transform: translateY(22px);
  animation: heroUp 1s var(--ease) .35s forwards;
}

.hero-cta {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 34px;
  font-family: var(--font-display); font-weight: 600; font-size: .98rem;
  background: var(--amber); color: var(--bg);
  border-radius: 40px;
  opacity: 0; transform: translateY(14px);
  animation: heroUp .9s var(--ease) .55s forwards;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), background .3s;
}
.hero-cta:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 14px 40px rgba(240,165,0,.35);
}
.hero-cta .arrow { transition: transform .3s var(--ease); }
.hero-cta:hover .arrow { transform: translateX(5px); }

@keyframes heroUp { to { opacity: 1; transform: none; } }
@keyframes heroPop { to { opacity: 1; transform: scale(1) rotate(0deg); } }