/* ============================================================
   Sonnenzirkel — main.css
   Variables, Reset, Typography, Atmosphere
   ============================================================ */

:root {
  /* Surfaces */
  --bg:        #0e0d0b;
  --surface-1: #1a1914;
  --surface-2: #252319;
  --line:      #2e2b22;

  /* Accents */
  --amber:     #f0a500;
  --terra:     #c4502a;
  --moss:      #3d6b3f;

  /* Text */
  --text:      #ede8d8;
  --text-dim:  #8a8370;

  /* Type */
  --font-display: "JetBrains Mono", ui-monospace, monospace;
  --font-body:    "JetBrains Mono", ui-monospace, monospace;

  /* Rhythm */
  --nav-h: 68px;
  --maxw: 1200px;
  --ease: cubic-bezier(.2,.7,.2,1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  position: relative;
}

/* Warm vignette + grain overlay across the whole page */
body::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 9000;
  background:
    radial-gradient(120% 80% at 50% 0%, transparent 55%, rgba(0,0,0,.45) 100%),
    radial-gradient(140% 120% at 50% 100%, transparent 50%, rgba(0,0,0,.55) 100%);
}
body::after {
  content: "";
  position: fixed; inset: -50%;
  pointer-events: none;
  z-index: 9001;
  opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grainShift 8s steps(6) infinite;
}
@keyframes grainShift {
  0%,100%{transform:translate(0,0)} 16%{transform:translate(-3%,2%)}
  33%{transform:translate(2%,-3%)} 50%{transform:translate(-2%,3%)}
  66%{transform:translate(3%,1%)} 83%{transform:translate(-1%,-2%)}
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }

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

/* Typography helpers */
h1,h2,h3 { font-family: var(--font-display); font-weight: 700; line-height: 1.08; letter-spacing: -.02em; }

.section { max-width: var(--maxw); margin: 0 auto; padding: 110px 28px; }
.section-eyebrow {
  font-family: var(--font-display);
  font-size: .72rem; letter-spacing: .35em; text-transform: uppercase;
  color: var(--amber); margin-bottom: 14px; display: block;
}
.section-title {
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  margin-bottom: 50px;
}
.section-title .dot { color: var(--terra); }

/* Reveal on scroll */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--surface-2); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--terra); }

/* Page routing — galleries vs main */
#gallery-page { display: none; }
body.gallery-open #main-page { display: none; }
body.gallery-open #gallery-page { display: block; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
  /* Elements that are hidden by default and only revealed via animation
     must be forced visible when animations are disabled. */
  .hero-logo, .hero-wordmark, .hero-cta,
  .g-item, .event-card { opacity: 1 !important; transform: none !important; }
}