/* site-base.css — estilos base compartilhados entre index.html (produção) e dev.html */
:root {
  /* shared palette across variations */
  --violet: #9d4eff;
  --violet-soft: #c79aff;
  --lemon: #f4d03f;
  --ink: #0a0612;
  --bone: #f4eee0;
  --aubergine: #1c0a22;
  --cream: #f6f1e7;
  --cream-dim: rgba(246,241,231,0.62);
  --gold: #d5b174;
}
html, body { margin: 0; padding: 0; background: #f0eee9; font-family: Manrope, system-ui, sans-serif; touch-action: pan-y; }
* { box-sizing: border-box; }
/* Force every interactive button/anchor to allow vertical page scroll while tapping */
button, a { touch-action: manipulation; }
a { color: inherit; }

@keyframes scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-33.333%); }
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.65; transform: scale(1.25); }
}
@keyframes shimmer {
  from { background-position: -800px 0; }
  to { background-position: 800px 0; }
}
@keyframes shine-sweep {
  0% { background-position: 200% 0; }
  100% { background-position: -100% 0; }
}
@keyframes shape-enter {
  from { opacity: 0; transform: translateY(-150px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes float-y {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(15px); }
}
/* GlowCard — spotlight effect that follows pointer */
/* Allow vertical page scroll even when swiping over a glow card (was blocking scroll on mobile) */
[data-glow] { touch-action: pan-y !important; }
[data-glow] * { touch-action: pan-y; }
[data-glow]::before,
[data-glow]::after {
  pointer-events: none;
  content: "";
  position: absolute;
  inset: calc(var(--border-size) * -1);
  border: var(--border-size) solid transparent;
  border-radius: calc(var(--radius, 14) * 1px);
  background-attachment: fixed;
  background-size: calc(100% + (2 * var(--border-size))) calc(100% + (2 * var(--border-size)));
  background-repeat: no-repeat;
  background-position: 50% 50%;
  -webkit-mask: linear-gradient(transparent, transparent), linear-gradient(white, white);
  mask: linear-gradient(transparent, transparent), linear-gradient(white, white);
  -webkit-mask-clip: padding-box, border-box;
  mask-clip: padding-box, border-box;
  -webkit-mask-composite: source-in, xor;
  mask-composite: intersect;
}
[data-glow]::before {
  background-image: radial-gradient(
    calc(var(--spotlight-size) * 0.75) calc(var(--spotlight-size) * 0.75) at
    calc(var(--x, 0) * 1px) calc(var(--y, 0) * 1px),
    hsl(var(--hue, 210) calc(var(--saturation, 100) * 1%) calc(var(--lightness, 50) * 1%) / 1), transparent 100%
  );
  filter: brightness(2);
}
[data-glow]::after {
  background-image: radial-gradient(
    calc(var(--spotlight-size) * 0.5) calc(var(--spotlight-size) * 0.5) at
    calc(var(--x, 0) * 1px) calc(var(--y, 0) * 1px),
    hsl(0 100% 100% / 1), transparent 100%
  );
}
[data-glow] [data-glow] {
  position: absolute;
  inset: 0;
  will-change: filter;
  opacity: var(--outer, 1);
  border-radius: calc(var(--radius, 14) * 1px);
  border-width: calc(var(--border-size) * 20);
  filter: blur(calc(var(--border-size) * 10));
  background: none;
  pointer-events: none;
  border: none;
}
[data-glow] > [data-glow]::before {
  inset: -10px;
  border-width: 10px;
}
/* For deep contrast in artboards — give image-slot some life */
image-slot::part(empty),
image-slot[data-empty="true"] {
  background:
    repeating-linear-gradient(45deg, rgba(157,78,255,0.04), rgba(157,78,255,0.04) 12px, transparent 12px, transparent 24px),
    linear-gradient(180deg, rgba(157,78,255,0.06), transparent 80%);
}