/* =====================================================================
   SACRED — a design system for artistic sites built on sacred geometry.
   Proporção áurea (φ=1.618), Fibonacci, vesica piscis, flower of life.
   Tokens + type + spacing + geometry utilities. Scope everything under
   .sg-scope so it never clobbers the host page's variables.
   ===================================================================== */

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

.sg-scope {
  /* ---- palette (terroso / templo, sem clichê esotérico) ---- */
  --sg-offwhite: #f3efe6;   /* pergaminho   */
  --sg-paper:    #ece6d8;   /* pedra clara  */
  --sg-charcoal: #16140f;   /* carvão       */
  --sg-ink:      #26221a;   /* tinta quente */
  --sg-stone:    #9a9082;   /* pedra/argila */
  --sg-gold:     #c8a04a;   /* dourado antigo (fosco, não brilhante) */
  --sg-gold-2:   #e3c682;   /* dourado claro */
  --sg-copper:   #b06a3b;   /* cobre        */
  --sg-green:    #20392e;   /* verde profundo */
  --sg-night:    #131d33;   /* azul noturno */

  --sg-bg: var(--sg-offwhite);
  --sg-fg: var(--sg-ink);
  --sg-line: rgba(22,20,15,.14);
  --sg-line-soft: rgba(22,20,15,.07);

  /* ---- proporções ---- */
  --phi: 1.618;
  --phi-inv: 0.618;

  /* ---- spacing: escala de Fibonacci (px) ---- */
  --s-3: 3px;  --s-5: 5px;  --s-8: 8px;  --s-13: 13px; --s-21: 21px;
  --s-34: 34px; --s-55: 55px; --s-89: 89px; --s-144: 144px; --s-233: 233px;

  /* ---- type ---- */
  --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-sans: 'Jost', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

  /* type scale (modular, razão φ a partir de 16px) */
  --t-cap: 12px;     /* labels / kicker  */
  --t-body: 17px;    /* corpo            */
  --t-h4: 21px;
  --t-h3: 34px;      /* 21·φ             */
  --t-h2: 55px;      /* 34·φ             */
  --t-h1: 89px;      /* 55·φ             */
  --t-display: 144px;

  /* ---- forma ---- */
  --radius: 2px;          /* quase reto; geometria fala, não o arredondado */
  --hair: 1px;            /* espessura de linha base */
  --pat-op: 0.06;         /* opacidade de padrões de fundo (sutil!) */

  color: var(--sg-fg);
  background: var(--sg-bg);
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: var(--t-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* tema escuro por seção */
.sg-scope.sg-dark,
.sg-dark {
  --sg-bg: var(--sg-charcoal);
  --sg-fg: #e9e3d6;
  --sg-line: rgba(233,227,214,.16);
  --sg-line-soft: rgba(233,227,214,.07);
}

/* ---- tipografia ---- */
.sg-scope h1, .sg-scope h2, .sg-scope h3, .sg-scope .display {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.01em;
}
.sg-display { font-size: clamp(54px, 11vw, var(--t-display)); font-weight: 400; line-height: 0.98; }
.sg-h1 { font-size: clamp(40px, 8vw, var(--t-h1)); }
.sg-h2 { font-size: clamp(30px, 5vw, var(--t-h2)); }
.sg-h3 { font-size: clamp(23px, 3vw, var(--t-h3)); }
.sg-lead { font-size: clamp(18px, 2.2vw, 24px); line-height: 1.5; font-weight: 300; }
.sg-kicker {
  font-family: var(--font-mono); font-size: var(--t-cap); font-weight: 400;
  letter-spacing: 0.34em; text-transform: uppercase; color: var(--sg-gold);
}
.sg-serif-italic { font-family: var(--font-display); font-style: italic; }
.sg-muted { color: color-mix(in srgb, var(--sg-fg) 62%, transparent); }

/* ---- grids áureos ---- */
.sg-phi-l { display: grid; grid-template-columns: var(--phi)fr 1fr; gap: var(--s-55); align-items: center; }
.sg-phi-r { display: grid; grid-template-columns: 1fr var(--phi)fr; gap: var(--s-55); align-items: center; }
.sg-thirds { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-34); }
@media (max-width: 820px) {
  .sg-phi-l, .sg-phi-r { grid-template-columns: 1fr; gap: var(--s-34); }
}

/* ---- moldura / linhas estruturais ---- */
.sg-frame { border: var(--hair) solid var(--sg-line); }
.sg-rule { height: var(--hair); background: var(--sg-line); border: 0; }
.sg-rule-gold { height: var(--hair); background: linear-gradient(90deg, transparent, var(--sg-gold), transparent); border: 0; }

/* ---- máscara vesica piscis (lente) p/ imagens ---- */
.sg-vesica { clip-path: url(#sg-vesica); aspect-ratio: 1 / 1.732; }
.sg-circle-mask { clip-path: circle(50%); aspect-ratio: 1; }

/* ---- camada de padrão geométrico de fundo (SVG injetado) ---- */
.sg-pattern { position: absolute; inset: 0; pointer-events: none; opacity: var(--pat-op); overflow: hidden; }
.sg-pattern svg { width: 100%; height: 100%; }
.sg-pattern [stroke] { stroke: var(--sg-fg); }
.sg-pattern-gold [stroke] { stroke: var(--sg-gold); }

/* rotação contemplativa (lenta) dos mandalas de fundo */
.sg-rotate { transform-origin: center; animation: sgRotate 220s linear infinite; }
.sg-rotate-rev { transform-origin: center; animation: sgRotate 300s linear infinite reverse; }
@keyframes sgRotate { to { transform: rotate(360deg); } }

/* traço que se desenha (espiral / linhas) */
.sg-draw { stroke-dasharray: var(--len, 4000); stroke-dashoffset: var(--len, 4000); animation: sgDraw 4.2s var(--sg-ease, cubic-bezier(.16,1,.3,1)) forwards; }
@keyframes sgDraw { to { stroke-dashoffset: 0; } }

/* selo / ponto áureo (marca o "olho" da espiral, foco de leitura) */
.sg-eye { width: var(--s-8); height: var(--s-8); border-radius: 50%; background: var(--sg-gold); box-shadow: 0 0 0 var(--s-8) color-mix(in srgb, var(--sg-gold) 18%, transparent); }

@media (prefers-reduced-motion: reduce) {
  .sg-rotate, .sg-rotate-rev, .sg-draw { animation: none; }
  .sg-draw { stroke-dashoffset: 0; }
}