/*
Theme Name: Código Metabólico
Theme URI: https://codigometabolico.com
Author: Código Metabólico
Description: Tema da landing page do Sistema Código Metabólico — reprodução 1:1 da versão atual.
Version: 1.0.0
License: GPLv2 or later
Text Domain: codigo-metabolico
*/

/* ===== Variables (replicando src/styles.css) ===== */
:root{
  --radius: 0.875rem;
  --background: oklch(0.12 0.005 280);
  --foreground: oklch(0.98 0.005 280);
  --card: oklch(0.16 0.01 280);
  --card-foreground: oklch(0.98 0.005 280);
  --muted-foreground: oklch(0.7 0.02 280);
  --border: oklch(0.25 0.02 280 / 60%);
  --neon-pink: oklch(0.68 0.28 350);
  --neon-green: oklch(0.85 0.25 150);
  --neon-purple: oklch(0.55 0.27 295);
  --gradient-neon: linear-gradient(135deg, oklch(0.68 0.28 350), oklch(0.55 0.27 295));
  --shadow-neon-pink: 0 0 40px oklch(0.68 0.28 350 / 0.5), 0 0 80px oklch(0.68 0.28 350 / 0.25);
  --shadow-card: 0 20px 60px -20px oklch(0 0 0 / 0.6);
}

*{box-sizing:border-box;border-color:var(--border);}
html,body{overflow-x:hidden;max-width:100vw;margin:0;padding:0;}
img,video{max-width:100%;height:auto;display:block;}
a{color:inherit;text-decoration:none;}
button{font:inherit;cursor:pointer;background:none;border:none;color:inherit;}

body{
  color:var(--foreground);
  font-family:"Inter",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  background-color:oklch(0.1 0.02 300);
  background-image:
    radial-gradient(ellipse 70% 50% at 15% 0%, oklch(0.32 0.18 300 / 0.55), transparent 60%),
    radial-gradient(ellipse 60% 45% at 85% 25%, oklch(0.3 0.2 350 / 0.45), transparent 60%),
    radial-gradient(ellipse 80% 50% at 20% 55%, oklch(0.28 0.15 320 / 0.4), transparent 65%),
    radial-gradient(ellipse 70% 50% at 80% 80%, oklch(0.3 0.2 350 / 0.4), transparent 60%),
    linear-gradient(180deg, oklch(0.09 0.02 300) 0%, oklch(0.11 0.04 320) 50%, oklch(0.1 0.05 350) 100%);
  background-attachment:fixed;
}

h1,h2,h3,h4{font-family:"Space Grotesk",system-ui,sans-serif;letter-spacing:-0.02em;overflow-wrap:break-word;margin:0;}
p,ul,ol{margin:0;}
ul{list-style:none;padding:0;}

/* ===== Utilities (replicam @utility do Tailwind v4 do projeto) ===== */
.glass-card{
  background:linear-gradient(180deg, oklch(0.2 0.02 280 / 0.6), oklch(0.14 0.01 280 / 0.6));
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  border:1px solid oklch(1 0 0 / 0.08);
  border-radius:calc(var(--radius) + 8px);
}
.text-gradient-neon{
  background:linear-gradient(135deg, oklch(0.85 0.25 150), oklch(0.68 0.28 350));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.btn-neon{
  background:var(--gradient-neon);
  color:#fff;font-weight:700;border-radius:9999px;
  padding:1rem 1.5rem;min-height:52px;
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  box-shadow:var(--shadow-neon-pink);
  transition:transform .2s ease, box-shadow .3s ease;
  text-transform:uppercase;letter-spacing:.04em;font-size:.9rem;line-height:1.2;
  text-align:center;white-space:normal;max-width:100%;
}
@media (min-width:640px){ .btn-neon{padding:1.1rem 2rem;font-size:.95rem;} }
.btn-neon:hover{transform:translateY(-2px);box-shadow:0 0 60px oklch(0.68 0.28 350 / 0.7), 0 0 120px oklch(0.68 0.28 350 / 0.35);}

/* Animations */
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes pulse-glow{0%,100%{opacity:.6}50%{opacity:1}}
@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
@keyframes ping{75%,100%{transform:scale(2);opacity:0}}
.animate-float{animation:float 6s ease-in-out infinite;}
.animate-pulse-glow{animation:pulse-glow 4s ease-in-out infinite;}
.animate-marquee{animation:marquee 40s linear infinite;}
.animate-marquee-slow{animation:marquee 85s linear infinite;}
.animate-ping{animation:ping 1s cubic-bezier(0,0,.2,1) infinite;}

.group:hover .group-hover\:\[animation-play-state\:paused\]{animation-play-state:paused;}

/* Mask helpers (substitui Tailwind arbitrary mask-image) */
.mask-fade-x{
  -webkit-mask-image:linear-gradient(to right, transparent, black 8%, black 92%, transparent);
          mask-image:linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}
.mask-fade-x-tight{
  -webkit-mask-image:linear-gradient(to right, transparent, black 7%, black 93%, transparent);
          mask-image:linear-gradient(to right, transparent, black 7%, black 93%, transparent);
}

/* Fix Tailwind via CDN: shadows escritos como var */
.shadow-card{box-shadow:var(--shadow-card);}