/**
 * Smelting brand tokens + animated logo.
 */
:root {
    --app-primary-color: #3c3d5a;
    --app-secondary-color: #030406;
    --app-bg-color: #ffffff;
    --app-accent-color: #5a5c7a;
    --app-on-primary: #ffffff;
    --app-muted: #6b6c80;
    --app-border: rgba(60, 61, 90, 0.18);
}

html, body {
    background-color: var(--app-bg-color);
    color: var(--app-secondary-color);
}

h1, h2, h3, h4, h5, h6 {
    color: var(--app-secondary-color);
}

.btn-primary,
.btn-pay,
.smelting-pay-btn {
    background-color: var(--app-primary-color) !important;
    border-color: var(--app-primary-color) !important;
    color: var(--app-on-primary) !important;
}

.btn-primary:hover,
.btn-pay:hover,
.smelting-pay-btn:hover {
    background-color: var(--app-accent-color) !important;
    border-color: var(--app-accent-color) !important;
    color: var(--app-on-primary) !important;
}

/* --- Logo / icon marks --- */
.smelting-brand-mark,
.smelting-logo,
.smelting-icon {
    display: inline-block;
    vertical-align: middle;
    width: auto;
    max-width: 100%;
    height: auto;
}

.smelting-icon {
    max-height: 48px;
}

.smelting-logo {
    max-height: 56px;
}

.smelting-logo--hero {
    max-height: none;
    max-width: min(420px, 88vw);
}

.smelting-logo--nav {
    max-height: 48px;
}

.smelting-logo--footer {
    max-height: 64px;
}

/* Entrance: shield halves feel like they assemble */
.smelting-logo-animate {
    position: relative;
    isolation: isolate;
    animation:
        smelting-logo-enter 0.9s cubic-bezier(0.22, 1, 0.36, 1) both,
        smelting-logo-float 5.5s ease-in-out 1.1s infinite;
    will-change: transform, filter, opacity;
}

.smelting-logo-animate--once {
    animation: smelting-logo-enter 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Metallic shimmer sweep */
.smelting-logo-shimmer {
    position: relative;
    overflow: hidden;
    border-radius: 4px;
}

.smelting-logo-shimmer::after {
    content: "";
    position: absolute;
    inset: -20% -40%;
    background: linear-gradient(
        115deg,
        transparent 35%,
        rgba(255, 255, 255, 0.08) 42%,
        rgba(255, 255, 255, 0.55) 50%,
        rgba(249, 228, 152, 0.35) 54%,
        transparent 62%
    );
    transform: translateX(-120%) rotate(8deg);
    animation: smelting-shimmer 3.8s ease-in-out 1.2s infinite;
    pointer-events: none;
    mix-blend-mode: screen;
}

/* Diamond sparkle pulse on icon/logo */
.smelting-logo-sparkle {
    animation:
        smelting-logo-enter 0.9s cubic-bezier(0.22, 1, 0.36, 1) both,
        smelting-sparkle 2.8s ease-in-out 1s infinite;
}

.smelting-logo-hero-wrap {
    display: inline-block;
    position: relative;
    margin-bottom: 1.25rem;
}

.smelting-logo-hero-wrap::before {
    content: "";
    position: absolute;
    inset: 18% 22%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.35) 0%, transparent 70%);
    filter: blur(10px);
    opacity: 0;
    animation: smelting-diamond-glow 2.8s ease-in-out 1.1s infinite;
    pointer-events: none;
    z-index: 0;
}

.smelting-logo-hero-wrap .smelting-logo {
    position: relative;
    z-index: 1;
}

@keyframes smelting-logo-enter {
    0% {
        opacity: 0;
        transform: translateY(18px) scale(0.86);
        filter: brightness(0.7) saturate(0.8);
    }
    60% {
        opacity: 1;
        transform: translateY(-2px) scale(1.03);
        filter: brightness(1.12) saturate(1.05);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: brightness(1) saturate(1);
    }
}

@keyframes smelting-logo-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

@keyframes smelting-shimmer {
    0%, 18% { transform: translateX(-120%) rotate(8deg); opacity: 0; }
    28% { opacity: 1; }
    55% { transform: translateX(120%) rotate(8deg); opacity: 0.9; }
    100% { transform: translateX(120%) rotate(8deg); opacity: 0; }
}

@keyframes smelting-sparkle {
    0%, 100% { filter: brightness(1) drop-shadow(0 0 0 transparent); }
    40% { filter: brightness(1.18) drop-shadow(0 0 10px rgba(255, 255, 255, 0.35)); }
    55% { filter: brightness(1.05) drop-shadow(0 0 4px rgba(249, 228, 152, 0.4)); }
}

@keyframes smelting-diamond-glow {
    0%, 100% { opacity: 0; transform: scale(0.85); }
    45% { opacity: 0.85; transform: scale(1.05); }
    60% { opacity: 0.35; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .smelting-logo-animate,
    .smelting-logo-animate--once,
    .smelting-logo-sparkle,
    .smelting-logo-shimmer::after,
    .smelting-logo-hero-wrap::before {
        animation: none !important;
    }
}