/* Typography Transition for Language Switch */
[data-i18n] {
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), filter 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    will-change: opacity, transform, filter;
}

body.page-morphing [data-i18n] {
    opacity: 0 !important;
    transform: translateY(6px) !important;
    filter: blur(4px) !important;
}

/* Shatter Button Specific Styles */
.shatter-button-container {
    position: relative;
    display: inline-block;
    margin-left: 20px;
    /* Space from other nav items */
}

.shatter-button {
    position: relative;
    padding: 8px 24px;
    font-weight: 600;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.15s ease-out, opacity 0.15s ease-out;
    background-color: transparent;
    /* Used as fallback */
    z-index: 10;
    border: none;
    font-family: inherit;
    font-size: 14px;
    outline: none;
}

.shatter-button:hover {
    transform: scale(1.05);
}

.shatter-button:active {
    transform: scale(0.95);
}

.shatter-glow-bg {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
}

.shatter-button:hover .shatter-glow-bg {
    opacity: 1;
}

.shatter-shard {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1) rotate(0deg);
    opacity: 1;
    transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    z-index: 20;
}

.shatter-explosion-ring {
    width: 0;
    height: 0;
    opacity: 1;
    transition: width 0.6s ease-out, height 0.6s ease-out, opacity 0.6s ease-out;
    transform: translate(-50%, -50%);
    z-index: 15;
}

/* Add Tailwind arbitrary classes support equivalence or simple overrides if needed */
.absolute {
    position: absolute;
}

.relative {
    position: relative;
}

.inset-0 {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.z-10 {
    z-index: 10;
}

.pointer-events-none {
    pointer-events: none;
}

.rounded-full {
    border-radius: 9999px;
}

.-translate-x-1\/2 {
    transform: translateX(-50%);
}

.-translate-y-1\/2 {
    transform: translateY(-50%);
}