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

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

:root {
    /* Paleta Shinju Studio */
    --color-pink: #F25EA3;
    --color-green: #ABD94A;
    --color-yellow: #F2CE16;
    --color-lila: #F8E6FF;
    --color-black: #000000;
    --color-white: #FFFFFF;

    --color-pink-ink: #C23E7D;
    --color-green-ink: #6E9A20;

    /* Tipografías */
    --font-display: 'Mango Grotesque', 'Arial Narrow', sans-serif;
    --font-editorial: 'Velogira', Georgia, serif;
    --font-body: 'Satoshi', -apple-system, BlinkMacSystemFont, sans-serif;

    --radius-pill: 999px;
    --radius-card: 28px;

    --container: 1180px;
    --space-section: clamp(64px, 8vw, 110px);

    --grad-x: 30%;
    --grad-y: 20%;
}

@keyframes bg-drift {
    0%   { --grad-x: 20%; --grad-y: 10%; }
    25%  { --grad-x: 75%; --grad-y: 30%; }
    50%  { --grad-x: 60%; --grad-y: 80%; }
    75%  { --grad-x: 15%; --grad-y: 65%; }
    100% { --grad-x: 20%; --grad-y: 10%; }
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}