/* ===========================================================
   THE CIRCLE / VIVAREA — shared brand tokens
   =========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Spectral:ital,wght@0,400;0,500;1,400&family=Playfair+Display:wght@500;600&display=swap');

:root {
  /* ---- type ---- */
  --font-display: 'Cormorant Garamond', 'Spectral', Georgia, serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace;

  /* ---- surfaces (deep navy — from the Circle of Arts mark) ---- */
  --bg:        #0d1730;
  --bg-deep:   #0a1124;
  --panel:     rgba(255,255,255,.022);
  --panel-2:   rgba(255,255,255,.04);
  --panel-hi:  rgba(255,255,255,.06);
  --line:      rgba(255,255,255,.07);
  --line-hi:   rgba(255,255,255,.12);

  /* ---- text ---- */
  --cream:     #efe7d4;   /* serif headlines */
  --ink:       #d7dae3;   /* strong body */
  --muted:     #969cab;   /* body */
  --faint:     #5f6678;   /* meta / labels */

  /* ---- accents — gedecktes Messing / Champagner, kein lautes Gelb ----
     Primary  ≈ #CFA75B / #D6A642  (ruhiger Messingwert)
     Soft     ≈ #F0D28A  (nur sparsam für Lichtpunkte)
     Dark     ≈ #8A6A2E  (Linien / Schatten / Tiefe) */
  --acc-h:     80;                                 /* primary hue — tweakable */
  --gold:      oklch(0.745 0.084 var(--acc-h));    /* primary brass #CFA75B */
  --gold-soft: oklch(0.705 0.082 var(--acc-h));
  --gold-deep: oklch(0.535 0.072 var(--acc-h));    /* dark gold #8A6A2E — lines/shadows */
  --gold-hi:   oklch(0.865 0.072 var(--acc-h));    /* soft light point #F0D28A — sparingly */
  --gold-on:   oklch(0.22 0.045 var(--acc-h));     /* text on gold fills */
  --teal:      oklch(0.74 0.09 178);
  --purple:    oklch(0.70 0.13 290);
  --rose:      oklch(0.72 0.13 18);

  --gold-glow: oklch(0.745 0.084 var(--acc-h) / .10);

  --accent: var(--gold);   /* tweakable */

  /* ---- radius / shadow ---- */
  --r-sm: 10px;
  --r:    16px;
  --r-lg: 22px;
  --shadow: 0 24px 60px -30px rgba(0,0,0,.8);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---- shared atoms ---- */
.eyebrow {
  font-size: 11px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--faint);
  font-weight: 500;
}
.serif { font-family: var(--font-display); }

.gold { color: var(--gold); }

/* Rainbow ribbon-heart wordmark uses this gradient text */
.rainbow-text {
  background: linear-gradient(92deg,
    oklch(0.72 0.14 250), oklch(0.74 0.12 200),
    oklch(0.80 0.13 150), oklch(0.84 0.13 95),
    oklch(0.80 0.13 55),  oklch(0.74 0.15 18));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

::selection { background: var(--gold-glow); color: var(--cream); }

/* ===========================================================
   Heart torus energy field — slow "breathing" mode.
   Field lines sit BEHIND the Art mark, never over it.
   =========================================================== */
@keyframes tf-breathe { 0%,100% { transform: scale(.97); } 50% { transform: scale(1.04); } }
@keyframes tf-glow    { 0%,100% { opacity: .4; } 50% { opacity: .8; } }

.torus-field { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 1; pointer-events: none; transform-origin: center; animation: tf-breathe 7s ease-in-out infinite; will-change: transform; }
.torus-field .tf-svg { width: 100%; height: 100%; overflow: visible; }
.tf-line { fill: none; stroke-linecap: round; }
.tf-glow { animation: tf-glow 7s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .torus-field, .tf-glow { animation: none !important; }
}

/* ===========================================================
   Elliptical oscillation field — staggered breathing ellipses
   (Schwingungen) + slow spinning orbital ellipses.
   =========================================================== */
@keyframes ew-osc  { 0%,100% { transform: scale(.86); opacity: .55; } 50% { transform: scale(1.12); opacity: .16; } }
@keyframes ew-spin { to { transform: rotate(360deg); } }
@keyframes ew-glow { 0%,100% { opacity: .5; } 50% { opacity: .9; } }

.ew-svg { width: 100%; height: 100%; overflow: visible; }
.ew-ring  { transform-box: fill-box; transform-origin: center; animation: ew-osc 6.5s ease-in-out infinite; will-change: transform, opacity; }
.ew-orbit { transform-box: fill-box; transform-origin: center; animation: ew-spin 64s linear infinite; }
.ew-orbit-2 { animation-duration: 92s; animation-direction: reverse; }
.ew-glow  { animation: ew-glow 7.5s ease-in-out infinite; }
.ew-dot   { filter: drop-shadow(0 0 6px currentColor); opacity: .9; }

/* open brushed enso ring — gentle living sway + a slow breath in the underglow */
@keyframes ew-sway     { 0%,100% { transform: rotate(-2.2deg) scale(.995); } 50% { transform: rotate(2.2deg) scale(1.005); } }
@keyframes ew-ensoglow { 0%,100% { opacity: .14; } 50% { opacity: .3; } }
.ew-enso      { transform-box: fill-box; transform-origin: center; }
.ew-enso-spin { transform-box: fill-box; transform-origin: center; animation: ew-sway 13s ease-in-out infinite; will-change: transform; }
.ew-ensoglow  { animation: ew-ensoglow 7.5s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .ew-ring, .ew-orbit, .ew-glow, .ew-dot, .ew-enso-spin, .ew-ensoglow { animation: none !important; }
}

/* thin scrollbars */
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-thumb { background: rgba(255,255,255,.08); border-radius: 99px; }
*::-webkit-scrollbar-track { background: transparent; }