/* ============================================
   Thing on a String — Design System
   ============================================ */

/* --- Tokens --- */
:root {
  /* Ground */
  --color-bg:       #0d0a08;
  --color-surface:  #141009;

  /* Text */
  --color-ink:      #e2d9ce;
  --color-muted:    #4e4840;

  /* Sigil */
  --color-sigil:    #e2d9ce;

  /* Gate accents (tuned for dark ground) */
  --color-motion:      #c96a36;
  --color-motion-dim:  #7a3e1e;

  --color-signal:      #4e72c2;
  --color-signal-dim:  #2e4580;

  --color-wonder:      #7d8775;
  --color-wonder-dim:  #4a5045;

  /* Typography */
  --font-serif:  'Cormorant Garamond', Georgia, serif;
  --font-sans:   'Josefin Sans', 'Helvetica Neue', sans-serif;

  /* -----------------------------------------------
     SACRED GEOMETRY — adjust these in style.css

     --geo-color:        stroke colour of the Flower of Life
                         warm cream #e2d9ce → gold #d4b87a
     --geo-opacity:      FOL visibility
                         0.04 barely there | 0.15 clearly present

     TRIANGLE LINES — adjust these in style.css

     --triangle-color:   gold tone of the triangle
                         medium gold #c4a244 | bright #f0c060 | deep #8a6a20
     --triangle-opacity: triangle visibility
                         0.2 subtle | 0.6 prominent

     TRIANGLE GLOW — adjust in index.html
     Find the triangle-glow filter and change stdDeviation:
                         2 = tight halo | 5 = wide soft glow
     ----------------------------------------------- */
  --geo-color:        #d4b87a;
  --geo-opacity:      0.08;
  --triangle-color:   #c4a244;
  --triangle-opacity: 0.15;
}

/* --- Reset --- */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-serif);
  font-size: 1.05rem;
  line-height: 1.6;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
}

/* --- Sacred geometry background --- */
.geo-bg {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 130vmin;
  height: 130vmin;
  transform: translate(-50%, -50%) rotate(0deg);
  opacity: var(--geo-opacity);
  stroke: var(--geo-color);   /* overrides SVG attribute; change --geo-color above */
  pointer-events: none;
  z-index: 0;
  animation: geo-drift 240s linear infinite;
}

@keyframes geo-drift {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}

/* --- Landing: centering shell --- */
.landing {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 2rem;
}

/* --- Site map: triangle arrangement --- */
/*
   Triangle vertices (in px, within 480×520 container):
     Signal  — top centre      (240,  48)
     Motion  — bottom left     ( 52, 430)
     Wonder  — bottom right    (428, 430)
   Sigil sits at centroid      (240, 290)
*/
.site-map {
  position: relative;
  width: 480px;
  height: 520px;
  flex-shrink: 0;
}

/* Triangle connector lines — gold, glowing */
.triangle-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  mix-blend-mode: screen;  /* brightens where triangle crosses FOL circles */
}

/* Triangle polygon — stroke driven by CSS variables above */
.triangle-polygon {
  fill: none;
  stroke: var(--triangle-color);
  stroke-width: 1.2;
  opacity: var(--triangle-opacity);
}

/* --- Sigil --- */
.sigil-link {
  position: absolute;
  left: 240px;
  top: 290px;
  transform: translate(-50%, -50%);
  display: block;
  line-height: 0;
}

.sigil {
  width: 200px;
  height: auto;
  color: var(--color-sigil);
  transition: opacity 0.4s ease, filter 0.4s ease;
  filter: drop-shadow(0 0 18px rgba(226, 217, 206, 0.07));
}

.sigil-link:hover .sigil,
.sigil-link:focus .sigil {
  opacity: 0.6;
  filter: drop-shadow(0 0 28px rgba(226, 217, 206, 0.18));
}

.sigil-link:focus { outline: none; }

/* --- Gates: absolute at triangle vertices --- */
.gates {
  position: absolute;
  inset: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}

.gate {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.gate--signal { left: 240px; top:  48px; transform: translate(-50%, -50%); }
.gate--motion { left:  52px; top: 430px; transform: translate(-50%, -50%); }
.gate--wonder { left: 428px; top: 430px; transform: translate(-50%, -50%); }

.gate-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
}

.gate-link:focus { outline: none; }

/* Gate glyph: 80×80 SVG including circle frame */
.gate-glyph {
  width: 80px;
  height: 80px;
  transition: transform 0.4s ease, filter 0.4s ease;
}

.gate-link:hover .gate-glyph,
.gate-link:focus .gate-glyph {
  transform: scale(1.08);
}

.gate--motion .gate-link:hover .gate-glyph,
.gate--motion .gate-link:focus .gate-glyph {
  filter: drop-shadow(0 0 10px rgba(201, 106, 54, 0.55));
}

.gate--signal .gate-link:hover .gate-glyph,
.gate--signal .gate-link:focus .gate-glyph {
  filter: drop-shadow(0 0 10px rgba(78, 114, 194, 0.55));
}

.gate--wonder .gate-link:hover .gate-glyph,
.gate--wonder .gate-link:focus .gate-glyph {
  filter: drop-shadow(0 0 10px rgba(125, 135, 117, 0.55));
}

.gate-label {
  font-family: var(--font-sans);
  font-size: 0.6rem;
  font-weight: 300;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  transition: color 0.25s ease;
}

.gate--motion .gate-label  { color: var(--color-motion-dim); }
.gate--signal .gate-label  { color: var(--color-signal-dim); }
.gate--wonder .gate-label  { color: var(--color-wonder-dim); }

.gate-link:hover .gate-label,
.gate-link:focus .gate-label {
  color: var(--color-ink);
}

/* --- Responsive --- */
@media (max-width: 540px) {
  .site-map {
    width: 320px;
    height: 360px;
  }

  .sigil-link { left: 160px; top: 195px; }
  .sigil { width: 140px; }

  .gate--signal { left: 160px; top:  32px; }
  .gate--motion { left:  36px; top: 290px; }
  .gate--wonder { left: 284px; top: 290px; }
}