@property --grad-x {
    syntax: '<percentage>';
    inherits: true;
    initial-value: 0%;
}

@property --grad-y {
    syntax: '<percentage>';
    inherits: true;
    initial-value: 0%;
}

@property --drift-x {
    syntax: '<percentage>';
    inherits: true;
    initial-value: 0%;
}

@property --drift-y {
    syntax: '<percentage>';
    inherits: true;
    initial-value: 0%;
}

:root {
    /* Paleta de marca */
    --color-primary: #CA6484;      /* rosa - dominante */
    --color-sky: #9DD4DB;          /* celeste */
    --color-yellow: #F5F09E;       /* amarillo pastel */
    --color-pink-light: #F6B7C3;   /* rosa claro */
    --color-white: #FFFFFF;
    --color-text-dark: #2B2B2B;

    /* Tipografías */
    --font-heading: 'Arsenica', serif;
    --font-subheading: 'Delicate Elegance', cursive;
    --font-body: 'Poppins', sans-serif;

    /* Fondo animado compartido (hero -> categorías), controlado por scroll via JS */
    --grad-x: 0%;
    --grad-y: 0%;
    --stop-sky: 35%;
    --stop-primary: 75%;
    --stop-pink: 100%;
}

/* Movimiento continuo tipo "olas": el centro del degradado recorre un */
/* camino ondulado, sin depender del scroll (ver hero.js para la parte */
/* que sí reacciona al scroll: --grad-x/--grad-y y los --stop-*).      */
@keyframes bg-drift {
    0%   { --drift-x: 0%;   --drift-y: 0%; }
    20%  { --drift-x: 26%;  --drift-y: -17%; }
    40%  { --drift-x: 12%;  --drift-y: 23%; }
    60%  { --drift-x: -23%; --drift-y: 14%; }
    80%  { --drift-x: -14%; --drift-y: -21%; }
    100% { --drift-x: 0%;   --drift-y: 0%; }
}

body {
    animation: bg-drift 15s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    body {
        animation: none;
    }
}