/* DJD Estamparia — Design tokens, keyframes & custom utilities */
:root{
  --radius:0.625rem;
  --background:oklch(1 0 0);
  --foreground:oklch(0.15 0.02 240);
  --card:oklch(1 0 0);
  --card-foreground:oklch(0.15 0.02 240);
  --muted:oklch(0.96 0.005 240);
  --muted-foreground:oklch(0.45 0.02 240);
  --border:oklch(0.92 0.01 240);
  --primary:oklch(0.72 0.22 142);
  --primary-foreground:oklch(0.12 0 0);
  --primary-glow:oklch(0.82 0.24 142);
  --ink:oklch(0.12 0 0);
  --ink-foreground:oklch(0.98 0 0);
  --secondary:oklch(0.96 0.01 142);
  --color-yellow:oklch(0.88 0.18 95);
  --color-yellow-foreground:oklch(0.12 0 0);
  --color-blue:oklch(0.62 0.2 245);
  --color-blue-foreground:oklch(0.98 0 0);
  --color-pink:oklch(0.72 0.22 0);
  --color-pink-foreground:oklch(0.98 0 0);
  --color-orange:oklch(0.74 0.2 50);
  --color-orange-foreground:oklch(0.12 0 0);
  --color-polvix:oklch(0.52 0.28 305);
  --color-polvix-light:oklch(0.68 0.22 305);
  --color-polvix-dark:oklch(0.38 0.24 305);
  --color-polvix-foreground:oklch(0.98 0 0);
  --shadow-soft:0 10px 30px -12px oklch(0 0 0 / .18);
  --shadow-glow:0 0 60px oklch(0.82 0.24 142 / .45);
  --shadow-polvix:0 0 50px oklch(0.52 0.28 305 / 0.4);
  --ease-out-expo:cubic-bezier(0.16,1,0.3,1);
}

html,body{background:var(--background);color:var(--foreground);}
body{font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;position:relative;}
body::before{
  content:"";
  position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(ellipse 70% 45% at 8% 15%, oklch(0.52 0.28 305 / 0.09), transparent 55%),
    radial-gradient(ellipse 55% 40% at 92% 75%, oklch(0.52 0.28 305 / 0.07), transparent 50%),
    radial-gradient(ellipse 40% 30% at 50% 100%, oklch(0.72 0.22 142 / 0.05), transparent 45%);
}
body::after{
  content:"";
  position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.35;
  background-image:linear-gradient(oklch(0.52 0.28 305 / 0.04) 1px, transparent 1px),
    linear-gradient(90deg, oklch(0.52 0.28 305 / 0.04) 1px, transparent 1px);
  background-size:56px 56px;
  mask-image:linear-gradient(to bottom, black 0%, transparent 85%);
}
::selection{background:oklch(0.52 0.28 305 / 0.35);color:var(--foreground);}

/* Animations */
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes float{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-18px) rotate(2deg)}}
@keyframes bounce-slow{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes fade-up{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
@keyframes spin-slow{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes polvix-glow{0%,100%{opacity:.35;transform:scale(1)}50%{opacity:.65;transform:scale(1.08)}}
@keyframes polvix-shimmer{0%{background-position:200% center}100%{background-position:-200% center}}

.animate-marquee{animation:marquee 30s linear infinite}
.animate-float{animation:float 6s ease-in-out infinite}
.animate-bounce-slow{animation:bounce-slow 3s ease-in-out infinite}
.animate-fade-up{animation:fade-up .8s var(--ease-out-expo) both}
.animate-spin-slow{animation:spin-slow 18s linear infinite}
.animate-polvix-glow{animation:polvix-glow 4s ease-in-out infinite}

/* Tailwind custom color hookups via CSS variables consumed by tailwind config */
.bg-ink{background-color:var(--ink)}
.text-ink{color:var(--ink)}
.text-ink-foreground{color:var(--ink-foreground)}
.bg-primary{background-color:var(--primary)}
.text-primary{color:var(--primary)}
.text-primary-foreground{color:var(--primary-foreground)}
.bg-yellow{background-color:var(--color-yellow)}
.text-yellow{color:var(--color-yellow)}
.text-yellow-foreground{color:var(--color-yellow-foreground)}
.bg-blue{background-color:var(--color-blue)}
.text-blue{color:var(--color-blue)}
.text-blue-foreground{color:var(--color-blue-foreground)}
.bg-pink{background-color:var(--color-pink)}
.text-pink{color:var(--color-pink)}
.text-pink-foreground{color:var(--color-pink-foreground)}
.bg-orange{background-color:var(--color-orange)}
.text-orange{color:var(--color-orange)}
.text-orange-foreground{color:var(--color-orange-foreground)}

.shadow-soft{box-shadow:var(--shadow-soft)}
.shadow-glow{box-shadow:var(--shadow-glow)}
.shadow-polvix{box-shadow:var(--shadow-polvix)}
.text-polvix{color:var(--color-polvix)}
.bg-polvix{background-color:var(--color-polvix)}
.border-polvix{border-color:var(--color-polvix)}
html{scroll-behavior:smooth}

/* Polvix — detalhes e hovers */
#site-header{border-color:oklch(0.52 0.28 305 / 0.12)}
#loader .animate-bounce-slow{filter:drop-shadow(0 0 32px oklch(0.52 0.28 305 / 0.5)) drop-shadow(0 0 48px oklch(0.82 0.24 142 / 0.35))}
#mascot-img .mascot-glow{background:radial-gradient(circle, oklch(0.52 0.28 305 / 0.55), oklch(0.72 0.22 142 / 0.2) 55%, transparent 70%)}
#mascot-bubble{border:1px solid oklch(0.52 0.28 305 / 0.2);box-shadow:var(--shadow-soft), var(--shadow-polvix)}
.social-polvix{transition:transform .25s var(--ease-out-expo), border-color .25s, background-color .25s, box-shadow .25s, color .25s}
.social-polvix:hover{transform:translateY(-4px);border-color:var(--color-polvix);background-color:var(--color-polvix);color:var(--color-polvix-foreground);box-shadow:var(--shadow-polvix)}
.social-polvix--instagram:hover{background:linear-gradient(135deg, oklch(0.62 0.28 340), var(--color-polvix));border-color:transparent}
.social-polvix--facebook:hover{background:linear-gradient(135deg, oklch(0.55 0.2 265), var(--color-polvix));border-color:transparent}
footer .footer-glow{background:radial-gradient(circle at 20% 50%, oklch(0.72 0.22 142 / 0.35), transparent 55%), radial-gradient(circle at 80% 40%, oklch(0.52 0.28 305 / 0.35), transparent 50%)}
.polvix-accent-line{height:3px;background:linear-gradient(90deg, transparent, var(--color-polvix), var(--color-polvix-light), transparent)}
.text-polvix-shimmer{background:linear-gradient(90deg, var(--color-polvix), var(--color-polvix-light), var(--color-polvix));background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:polvix-shimmer 6s linear infinite}
.section-polvix-glow{pointer-events:none;position:absolute;border-radius:9999px;background:var(--color-polvix);filter:blur(80px);opacity:.12}

/* Banner carousel — em telas menores, ancora o recorte à direita */
.carousel-slide img{
  object-fit:cover;
  object-position:80% center;
}
@media (min-width:768px){
  .carousel-slide img{object-position:center}
}

/* Cookie banner — LGPD */
html.cookie-banner-dismissed #cookie-banner{display:none!important;}
.cookie-banner{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:110;
  transform:translateY(110%);
  opacity:0;
  visibility:hidden;
  transition:transform .35s var(--ease-out-expo), opacity .3s ease, visibility .35s;
  border-top:1px solid oklch(0.52 0.28 305 / 0.2);
  background:oklch(0.99 0.005 240 / 0.96);
  backdrop-filter:blur(16px);
  box-shadow:0 -12px 40px oklch(0 0 0 / 0.12), 0 0 0 1px oklch(0.52 0.28 305 / 0.08);
}
.cookie-banner--show{
  transform:translateY(0);
  opacity:1;
  visibility:visible;
}
.cookie-banner__inner{
  border-left:3px solid var(--color-polvix);
}