@font-face {
  font-family: 'Chuner Demo';
  src: url('/assets/fonts/ChunerDemo-BF69e73d11e80b2.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Hartone Softed';
  src: url('/assets/fonts/Hartone Softed.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Heavitas';
  src: url('/assets/fonts/Heavitas.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('/assets/fonts/PlusJakartaSans-VariableFont_wght.ttf') format('truetype');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('/assets/fonts/PlusJakartaSans-Italic-VariableFont_wght.ttf') format('truetype');
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
}

:root {
  --radius: 1rem;

  /* Brand palette — strict hex codes from spec */
  --azul-deep: #12306d;
  --azul: #164194;
  --azul-bright: #0069B4;
  --azul-soft: #00569D;
  --magenta: #E8308A;
  --magenta-deep: #b81f6a;
  --magenta-soft: #F297AC;
  --amarelo: #FFDE14;
  --amarelo-deep: #d9bc09;
  --offwhite: oklch(0.96 0.012 90);

  --background: var(--offwhite);
  --foreground: oklch(0.18 0.05 265);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.18 0.05 265);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.18 0.05 265);
  --primary: var(--azul);
  --primary-foreground: var(--offwhite);
  --secondary: var(--magenta);
  --secondary-foreground: oklch(1 0 0);
  --muted: oklch(0.93 0.012 90);
  --muted-foreground: oklch(0.42 0.04 265);
  --accent: var(--amarelo);
  --accent-foreground: var(--azul-deep);
  --destructive: oklch(0.577 0.245 27.325);
  --destructive-foreground: oklch(0.98 0 0);
  --border: oklch(0.88 0.02 90);
  --input: oklch(0.88 0.02 90);
  --ring: var(--azul-bright);

  --gradient-hero: linear-gradient(115deg, var(--azul-bright) 0%, var(--azul) 20%, oklch(0.85 0.10 340) 52%, var(--magenta) 72%, var(--amarelo) 100%);
  --gradient-brand: linear-gradient(120deg, var(--azul-bright) 0%, oklch(0.86 0.10 340) 45%, var(--magenta) 70%, var(--amarelo) 100%);
  --gradient-warm: linear-gradient(120deg, var(--magenta) 0%, var(--amarelo) 100%);
  --gradient-cool: linear-gradient(160deg, var(--azul-bright) 0%, var(--azul-deep) 100%);
  --gradient-sun: radial-gradient(circle at 30% 30%, var(--amarelo) 0%, transparent 60%);
  --gradient-banner:
    radial-gradient(ellipse at 0% 0%,    #27b5e8 0%, transparent 52%),
    radial-gradient(ellipse at 100% 0%,  #e8407a 0%, transparent 52%),
    radial-gradient(ellipse at 100% 100%,#ffd600 0%, transparent 52%),
    #ffffff;

  --shadow-soft: 0 12px 40px -12px oklch(0.30 0.16 268 / 0.25);
  --shadow-glow: 0 20px 60px -20px oklch(0.60 0.24 0 / 0.35);
  --shadow-card: 0 8px 28px -10px oklch(0.18 0.05 265 / 0.18);

  --ease-cinematic: cubic-bezier(0.22, 1, 0.36, 1);
}

.dark {
  --background: oklch(0.14 0.04 265);
  --foreground: var(--offwhite);
  --card: oklch(0.20 0.06 265);
  --card-foreground: var(--offwhite);
  --muted: oklch(0.24 0.04 265);
  --muted-foreground: oklch(0.74 0.02 90);
  --border: oklch(1 0 0 / 10%);
}

* {
  border-color: var(--border);
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  background-color: var(--background);
  color: var(--foreground);
  font-family: 'Plus Jakarta Sans', sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1,
h2,
h3,
h4 {
  font-family: 'Heavitas', 'Chuner Demo', sans-serif;
  letter-spacing: -0.02em;
}

::selection {
  background: var(--magenta);
  color: white;
}

.bg-gradient-hero {
  background: var(--gradient-hero);
}

.bg-gradient-brand {
  background: var(--gradient-brand);
}

.bg-gradient-warm {
  background: var(--gradient-warm);
}

.bg-gradient-cool {
  background: var(--gradient-cool);
}

.bg-gradient-sun {
  background: var(--gradient-sun);
}

.bg-gradient-banner {
  background: var(--gradient-banner);
}

.reveal {
  opacity: 0;
  transform: translateY(28px);
  animation: reveal 0.9s var(--ease-cinematic) forwards;
}

.reveal-delay-1 {
  animation-delay: 0.1s;
}

.reveal-delay-2 {
  animation-delay: 0.25s;
}

.reveal-delay-3 {
  animation-delay: 0.4s;
}

.reveal-delay-4 {
  animation-delay: 0.55s;
}

@keyframes reveal {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.55;
  pointer-events: none;
}

.smile-shape {
  width: 100%;
  height: 100%;
  background:
    radial-gradient(ellipse 60% 40% at 50% 35%, transparent 60%, var(--magenta) 60.5%, var(--magenta) 70%, transparent 71%);
}