/* ============================================================
   FLORÍADE — Florais Spagíricos
   Sistema visual: alquimia · ocultismo · arte ancestral
   ============================================================ */

/* ---------- Tipografia ---------- */
:root{
  --font-display: "Cinzel", serif;
  --font-serif: "Cormorant Garamond", "EB Garamond", serif;
  --font-body: "EB Garamond", "Cormorant Garamond", serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  /* rhythm */
  --maxw: 1200px;
  --gutter: clamp(20px, 5vw, 64px);
  --radius: 2px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ============================================================
   PALETAS — duas matérias-primas:  ☉ Ouro (Sol)  ·  ☽ Prata (Luna)
   O coniunctio alquímico: o quente solar casado ao frio lunar.
   ============================================================ */

/* 0 — NÚPCIAS  (coniunctio · prata + azul-noite · Sol et Luna) — PADRÃO */
[data-palette="nupcias"]{
  --bg:#0c1022; --bg-deep:#070a16; --bg-band:#11162c;
  --panel:#141a32; --panel-2:#1b233e; --panel-ink:#e8ecf7;
  --ink:#e9edf7; --ink-soft:#aeb8d4; --ink-faint:#717c9d;
  --gold:#caa257; --gold-soft:#e2c281; --gold-bright:#f1d78d;
  --silver:#c4cde3; --silver-soft:#98a4c4; --silver-bright:#e6ecfa;
  --line:#2b3458; --line-soft:#1c2342;
  --rose:#c98aa8; --leaf:#88a07f; --indigo:#6c7ac9; --clay:#c98153; --vermillion:#d0533c;
  --seal-bg:#141c38; --shadow:rgba(0,0,0,.5); --shadow-strong:rgba(2,5,14,.72);
  --img-base:#121a34; --img-stripe:#192240;
  color-scheme: dark;
}

/* 1 — PERGAMINHO  (claro · manuscrito iluminado) — prata = peltre frio */
[data-palette="pergaminho"]{
  --bg:#ece0c4; --bg-deep:#e0cfa9; --bg-band:#e6d8b6;
  --panel:#f6eed9; --panel-2:#f0e4c6; --panel-ink:#2a2014;
  --ink:#2a2014; --ink-soft:#5b4c34; --ink-faint:#8a7757;
  --gold:#9a7a2c; --gold-soft:#bd9844; --gold-bright:#c8a652;
  --silver:#5f6678; --silver-soft:#838aa0; --silver-bright:#474e60;
  --line:#cab585; --line-soft:#dcca9d;
  --rose:#b06a7d; --leaf:#6f7a45; --indigo:#45486f; --clay:#a4502f; --vermillion:#b23a22;
  --seal-bg:#e9dab4; --shadow:rgba(60,42,18,.16); --shadow-strong:rgba(50,34,12,.28);
  --img-base:#e7d8b3; --img-stripe:#dcc99e;
  color-scheme: light;
}

/* 2 — RITUAL  (escuro · thangka newari) */
[data-palette="ritual"]{
  --bg:#1d0e09; --bg-deep:#140a06; --bg-band:#26120c;
  --panel:#2b1611; --panel-2:#351a13; --panel-ink:#f1e3c4;
  --ink:#f1e3c4; --ink-soft:#d6b78c; --ink-faint:#9e7c5a;
  --gold:#cda44a; --gold-soft:#e0c074; --gold-bright:#f0d488;
  --silver:#c3cad9; --silver-soft:#9aa0b2; --silver-bright:#e0e6f2;
  --line:#7a5430; --line-soft:#4f3420;
  --rose:#d4869b; --leaf:#94a25f; --indigo:#5b6cae; --clay:#c96c3f; --vermillion:#cf3f24;
  --seal-bg:#321a13; --shadow:rgba(0,0,0,.5); --shadow-strong:rgba(0,0,0,.66);
  --img-base:#2a1610; --img-stripe:#371d14;
  color-scheme: dark;
}

/* 3 — TERRA  (escuro quente · batik javanês) */
[data-palette="terra"]{
  --bg:#411e15; --bg-deep:#311610; --bg-band:#4a2418;
  --panel:#4e2619; --panel-2:#5a2f20; --panel-ink:#f0e2c2;
  --ink:#f1e4c5; --ink-soft:#ddba8b; --ink-faint:#b48b60;
  --gold:#d8a740; --gold-soft:#e8c46b; --gold-bright:#f4d57f;
  --silver:#c8ccd6; --silver-soft:#9ba0ad; --silver-bright:#e4e8f0;
  --line:#8a5836; --line-soft:#5d3522;
  --rose:#d18d88; --leaf:#9ca65d; --indigo:#5f6489; --clay:#d27c3d; --vermillion:#d35c2e;
  --seal-bg:#572d1f; --shadow:rgba(0,0,0,.42); --shadow-strong:rgba(0,0,0,.6);
  --img-base:#54291b; --img-stripe:#612f20;
  color-scheme: dark;
}

/* ---------- Reset / base ---------- */
*{ box-sizing:border-box; }
/* durante a troca de paleta, nenhuma transição (evita arrasto/congelamento de cor) */
.pal-switching, .pal-switching *{ transition:none !important; }
html,body{ margin:0; padding:0; }
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:18px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block; }
button{ font-family:inherit; cursor:pointer; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--gold); color:var(--bg); }

/* ---------- Metais: ouro (Sol) · prata (Luna) ---------- */
.glyph--gold{ color:var(--gold); }
.glyph--silver{ color:var(--silver); }
.logo--silver{ color:var(--silver); }
.txt-sol{ color:var(--gold); }
.txt-luna{ color:var(--silver); }

/* ---------- Tipos utilitários ---------- */
.eyebrow{
  font-family:var(--font-mono);
  font-size:.66rem; letter-spacing:.34em; text-transform:uppercase;
  color:var(--gold); font-weight:500;
  display:inline-flex; align-items:center; gap:.7em;
}
.eyebrow--ink{ color:var(--ink-faint); }
.display{
  font-family:var(--font-display);
  font-weight:600; line-height:1.04; letter-spacing:.005em;
  color:var(--ink);
}
.serif{ font-family:var(--font-serif); }
.lead{
  font-family:var(--font-serif);
  font-size:clamp(1.15rem,2vw,1.5rem); line-height:1.45; font-weight:400;
  color:var(--ink-soft);
}

/* ---------- Logo / selo ---------- */
.mark{
  -webkit-mask:url(floriade-logo.svg) center/contain no-repeat;
  mask:url(floriade-logo.svg) center/contain no-repeat;
  background:var(--ink);
  display:inline-block;
}
.mark--gold{ background:var(--gold); }

/* ---------- Logo (sprite) ---------- */
.logo{ color:var(--ink); display:inline-block; vertical-align:middle; }
.logo--gold{ color:var(--gold); }

/* ---------- Botões ---------- */
.btn{
  --b: var(--gold);
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.2em; text-transform:uppercase;
  padding:1.05em 1.9em; border:1px solid var(--b); color:var(--ink);
  background:transparent; border-radius:var(--radius); position:relative; overflow:hidden;
  transition:all .45s var(--ease); white-space:nowrap; text-align:center;
}
.btn::before{
  content:""; position:absolute; inset:0; background:var(--b);
  transform:scaleX(0); transform-origin:left; transition:transform .45s var(--ease); z-index:0;
}
.btn>*{ position:relative; z-index:1; }
.btn:hover{ color:var(--bg); }
.btn:hover::before{ transform:scaleX(1); }
.btn--solid{ background:var(--gold); color:var(--bg); border-color:var(--gold); }
.btn--solid::before{ background:var(--ink); }
.btn--solid:hover{ color:var(--bg); }
.btn--ghost{ --b: var(--line); color:var(--ink-soft); }
.btn--ghost:hover{ color:var(--bg); }
/* botão lunar — contraponto de prata ao botão solar de ouro */
.btn--luna{ --b: var(--silver); color:var(--ink); }
.btn--luna::before{ background:var(--silver); }
.btn--luna:hover{ color:var(--bg); }
.btn--block{ width:100%; }
.btn--sm{ padding:.8em 1.3em; font-size:.64rem; }

/* ---------- Hairlines & ornamentos ---------- */
.rule{ height:1px; background:var(--line); border:0; opacity:.7; }
.rule-soft{ height:1px; background:var(--line-soft); border:0; }

/* Moldura ornamental dupla (cartela alquímica) */
.frame{
  position:relative; border:1px solid var(--line);
  box-shadow:0 0 0 1px var(--bg), 0 0 0 4px var(--line-soft);
}
.frame--gold{ border-color:var(--gold); box-shadow:0 0 0 1px var(--bg), 0 0 0 4px var(--gold-soft); }

/* cantos diamante */
.corners::before,.corners::after,
.corner-tl,.corner-tr,.corner-bl,.corner-br{ pointer-events:none; }

/* Placeholder de imagem com listras finas (estilo técnico) */
.imgholder{
  position:relative; overflow:hidden; background:var(--img-base);
  background-image:repeating-linear-gradient(45deg,
     transparent 0 9px, var(--img-stripe) 9px 10px);
  display:flex; align-items:center; justify-content:center;
}
.imgholder .lbl{
  font-family:var(--font-mono); font-size:.6rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-faint); background:var(--bg); padding:.5em .8em; border:1px solid var(--line-soft);
}

/* ---------- Layout helpers ---------- */
.wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.wrap-wide{ max-width:1440px; margin-inline:auto; padding-inline:var(--gutter); }
.section{ padding-block:clamp(64px,9vw,128px); }
.center{ text-align:center; }

/* ---------- Animação ---------- */
@keyframes spin-slow{ to{ transform:rotate(360deg); } }
@keyframes spin-rev{ to{ transform:rotate(-360deg); } }
/* Entrada apenas por translação — opacidade fica sempre 1, então o
   conteúdo nunca some (seguro em capturas que congelam transições). */
.reveal{ opacity:1; }
@media (prefers-reduced-motion: no-preference){
  .reveal{ transform:translateY(18px); transition:transform .8s var(--ease); transition-delay:calc(var(--i,0) * .07s); }
  .reveal.in{ transform:none; }
}
@media (prefers-reduced-motion: reduce){
  .spin-slow,.spin-rev{ animation:none !important; }
}
.spin-slow{ animation:spin-slow 120s linear infinite; transform-origin:center; }
.spin-rev{ animation:spin-rev 90s linear infinite; transform-origin:center; }

/* ---------- Moldura tapete (vine border) ---------- */
.vine{
  --vine-uri:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='26' viewBox='0 0 56 26' fill='%23000'%3E%3Crect x='0' y='2.1' width='56' height='1.3'/%3E%3Crect x='0' y='22.6' width='56' height='1.3'/%3E%3Cg transform='translate(28 13)'%3E%3Cellipse cx='0' cy='0' rx='5.2' ry='2.4'/%3E%3Cellipse cx='0' cy='0' rx='2.4' ry='5.2'/%3E%3C/g%3E%3Ccircle cx='6' cy='13' r='1.6'/%3E%3Ccircle cx='50' cy='13' r='1.6'/%3E%3Cpath d='M14 13 q3 -4 6 0 q-3 4 -6 0z'/%3E%3Cpath d='M36 13 q3 -4 6 0 q-3 4 -6 0z'/%3E%3C/svg%3E");
  height:18px; background:var(--gold);
  -webkit-mask:var(--vine-uri) repeat-x center/auto 100%;
  mask:var(--vine-uri) repeat-x center/auto 100%;
  opacity:.92;
}
.vine--v{
  width:18px; height:auto;
  -webkit-mask:var(--vine-uri) repeat-y center/100% auto;
  mask:var(--vine-uri) repeat-y center/100% auto;
}
.vine--thin{ height:14px; opacity:.7; }

/* ---------- Componentes ornamentais ---------- */
.seal{ position:relative; display:inline-flex; align-items:center; justify-content:center; }
.seal-ring{ position:absolute; inset:0; width:100%; height:100%; }
.seal-mark{ width:58%; height:58%; position:absolute; }

.divider{
  display:flex; align-items:center; gap:1.4rem; width:100%;
  margin-inline:auto; color:var(--gold);
}
.divider--wide{ max-width:none; }
.divider-line{ flex:1; height:1px; background:linear-gradient(90deg,transparent,var(--line) 22%,var(--line) 78%,transparent); }
.divider-node{ position:relative; display:flex; align-items:center; justify-content:center; width:34px; height:34px; flex:none; }
.divider-diamond{
  position:absolute; inset:6px; border:1px solid var(--gold); transform:rotate(45deg); opacity:.85;
}
.divider-glyph{ font-family:var(--font-mono); font-size:.85rem; color:var(--gold); position:relative; }

.glyph{ font-family:var(--font-mono); color:var(--gold); line-height:1; }

/* ---------- Emblema Sol·Luna (coniunctio) ---------- */
.solluna{ display:inline-block; vertical-align:middle; }
@media (prefers-reduced-motion: no-preference){
  .solluna--breathe{ animation:breathe 7s ease-in-out infinite; transform-origin:center; }
}
@keyframes breathe{ 0%,100%{ filter:drop-shadow(0 0 0 transparent); } 50%{ filter:drop-shadow(0 0 14px color-mix(in srgb, var(--gold) 40%, transparent)); } }

/* divisor lunar (prata) */
.divider--luna{ color:var(--silver); }
.divider--luna .divider-diamond{ border-color:var(--silver); }
.divider--luna .divider-glyph{ color:var(--silver); }

/* glifo que voa até o carrinho ao adicionar */
.fly-glyph{
  position:fixed; z-index:300; transform:translate(-50%,-50%);
  font-family:var(--font-mono); font-size:1.5rem; line-height:1;
  pointer-events:none; will-change:transform,opacity;
}

.alch-wheel{ display:block; }

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar{ width:11px; height:11px; }
::-webkit-scrollbar-track{ background:var(--bg-deep); }
::-webkit-scrollbar-thumb{ background:var(--line); border:3px solid var(--bg-deep); border-radius:10px; }