@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
    .glow-purple {
        box-shadow: 0 0 20px rgba(168, 85, 247, 0.5);
    }
}

html,
body {
    touch-action: manipulation;
}

/* Enable View Transitions */
@view-transition {
    navigation: auto;
}

::view-transition-group(avatar),
::view-transition-group(import-icon),
::view-transition-group(profile-header) {
    animation-duration: 0.5s;
    mix-blend-mode: normal;
}

::view-transition-old(avatar),
::view-transition-new(avatar) {
    height: 100%;
    width: 100%;
    object-fit: cover;
}