/* ============================================
   ATHENACORE THEME ANIMATIONS
   Elite Motion Design System
   60fps • Production-Ready • Premium Quality
   ============================================ */

/* =============================================
   GLOBAL ANIMATION BASE
   Smooth, hardware-accelerated transforms
============================================= */
* {
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
}

.theme-card,
.glass-card,
.card,
.btn,
.nav-item {
 will-change: transform;
 backface-visibility: hidden;
 transform: translateZ(0);
}

/* =============================================
   1. BLUEPRINT - Technical HUD / Architectural
   Motion: Subtle animated grid, minimal and clean
   Identity: Professional engineering aesthetic
============================================= */
@keyframes blueprint-grid-shift {
 0% { 
 background-position: 0 0;
 }
 100% { 
 background-position: 40px 40px;
 }
}

@keyframes blueprint-corner-pulse {
 0%, 100% { 
 opacity: 0.4;
 }
 50% { 
 opacity: 0.7;
 }
}

html[data-theme="blueprint"] {
 position: relative;
 background-color: #020509;
 background-image: 
 linear-gradient(rgba(34, 211, 238, 0.03) 1px, transparent 1px),
 linear-gradient(90deg, rgba(34, 211, 238, 0.03) 1px, transparent 1px);
 background-size: 40px 40px;
 animation: blueprint-grid-shift 30s linear infinite;
}

/* Small technical indicator in corner */
html[data-theme="blueprint"]::after {
 content: '';
 position: fixed;
 top: 20px;
 right: 20px;
 width: 8px;
 height: 8px;
 border: 2px solid rgba(34, 211, 238, 0.4);
 border-radius: 50%;
 animation: blueprint-corner-pulse 3s ease-in-out infinite;
 pointer-events: none;
 z-index: 9999;
}

/* Clean card styling */
html[data-theme="blueprint"] .card,
html[data-theme="blueprint"] .glass-card {
 border: 1px solid rgba(34, 211, 238, 0.25);
 box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

/* Subtle corner accents on cards */
html[data-theme="blueprint"] .card::before {
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 width: 12px;
 height: 12px;
 border-top: 2px solid rgba(34, 211, 238, 0.5);
 border-left: 2px solid rgba(34, 211, 238, 0.5);
 opacity: 0.6;
}

html[data-theme="blueprint"] .card::after {
 content: '';
 position: absolute;
 bottom: 0;
 right: 0;
 width: 12px;
 height: 12px;
 border-bottom: 2px solid rgba(34, 211, 238, 0.5);
 border-right: 2px solid rgba(34, 211, 238, 0.5);
 opacity: 0.6;
}

/* Clean button styling */
html[data-theme="blueprint"] .btn-primary {
 position: relative;
 overflow: hidden;
 transition: all 0.3s ease;
}

html[data-theme="blueprint"] .btn-primary::before {
 content: '';
 position: absolute;
 top: 0;
 left: -100%;
 width: 100%;
 height: 100%;
 background: linear-gradient(90deg, 
 transparent, 
 rgba(34, 211, 238, 0.2), 
 transparent
 );
 transition: left 0.5s ease;
}

html[data-theme="blueprint"] .btn-primary:hover::before {
 left: 100%;
}

/* Active nav indicator */
html[data-theme="blueprint"] .nav-item.active::before {
 content: '';
 position: absolute;
 left: 0;
 top: 50%;
 transform: translateY(-50%);
 width: 3px;
 height: 60%;
 background: rgba(34, 211, 238, 0.6);
 box-shadow: 0 0 8px rgba(34, 211, 238, 0.4);
}

/* =============================================
   2. TERMINAL - Matrix / Hacker Green
   Motion: Glitch, typing cursor, cascading code
   Identity: Command line aesthetic
============================================= */
@keyframes terminal-cursor-blink {
 0%, 49% { opacity: 1; }
 50%, 100% { opacity: 0; }
}

@keyframes terminal-glitch-1 {
 0%, 100% { 
 transform: translate(0);
 clip-path: inset(0 0 0 0);
 }
 10% { 
 transform: translate(-2px, 2px);
 clip-path: inset(20% 0 30% 0);
 }
 20% { 
 transform: translate(2px, -2px);
 clip-path: inset(60% 0 10% 0);
 }
 30% { transform: translate(0); }
}

@keyframes terminal-glitch-2 {
 0%, 100% { 
 transform: translate(0);
 clip-path: inset(0 0 0 0);
 }
 15% { 
 transform: translate(2px, -2px);
 clip-path: inset(40% 0 40% 0);
 }
 25% { 
 transform: translate(-2px, 2px);
 clip-path: inset(10% 0 70% 0);
 }
 35% { transform: translate(0); }
}

@keyframes terminal-code-rain {
 0% { transform: translateY(-100%); opacity: 0; }
 10% { opacity: 1; }
 90% { opacity: 1; }
 100% { transform: translateY(100vh); opacity: 0; }
}

@keyframes terminal-typing-dots {
 0%, 20% { content: ''; }
 40% { content: '.'; }
 60% { content: '..'; }
 80%, 100% { content: '...'; }
}

html[data-theme="terminal"]::after {
 content: '?';
 position: fixed;
 bottom: 20px;
 right: 40px;
 color: #00ff41;
 font-size: 1.2rem;
 font-family: 'Courier New', monospace;
 animation: terminal-cursor-blink 1s step-end infinite;
 z-index: 9999;
 pointer-events: none;
 text-shadow: 0 0 10px #00ff41;
}

html[data-theme="terminal"] .card,
html[data-theme="terminal"] .glass-card {
 border-left: 3px solid #00ff41;
 position: relative;
}

html[data-theme="terminal"] .card::before {
 content: '> ';
 position: absolute;
 left: 1rem;
 top: 1.5rem;
 color: #00ff41;
 font-family: 'Courier New', monospace;
 font-weight: bold;
 animation: terminal-cursor-blink 1s step-end infinite;
}

html[data-theme="terminal"] .btn-primary {
 text-transform: uppercase;
 font-family: 'Courier New', monospace;
 letter-spacing: 2px;
 position: relative;
 overflow: hidden;
}

html[data-theme="terminal"] .btn-primary::before {
 content: '';
 position: absolute;
 top: 0;
 left: -100%;
 width: 100%;
 height: 100%;
 background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
 transition: left 0.5s ease;
}

html[data-theme="terminal"] .btn-primary:hover::before {
 left: 100%;
}

/* =============================================
   3. NEON CITY - Cyberpunk Pink/Purple
   Motion: Neon glow pulse, electric surge
   Identity: Blade Runner aesthetic
============================================= */
@keyframes neon-glow-pulse {
 0%, 100% { 
 filter: brightness(1) drop-shadow(0 0 5px currentColor);
 }
 50% { 
 filter: brightness(1.3) drop-shadow(0 0 20px currentColor);
 }
}

@keyframes neon-border-flow {
 0% { 
 background-position: 0% 50%;
 }
 50% {
 background-position: 100% 50%;
 }
 100% {
 background-position: 0% 50%;
 }
}

@keyframes neon-flicker {
 0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
 opacity: 1;
 filter: brightness(1);
 }
 20%, 24%, 55% {
 opacity: 0.7;
 filter: brightness(0.6);
 }
}

@keyframes neon-electric-surge {
 0% { 
 transform: scaleX(0);
 opacity: 0;
 }
 50% {
 transform: scaleX(1);
 opacity: 1;
 }
 100% {
 transform: scaleX(0);
 opacity: 0;
 }
}

html[data-theme="neon"] {
 background: 
 radial-gradient(ellipse at top, rgba(236, 72, 153, 0.15), transparent 50%),
 radial-gradient(ellipse at bottom, rgba(34, 211, 238, 0.15), transparent 50%);
 animation: neon-glow-pulse 4s ease-in-out infinite;
}

html[data-theme="neon"] .card,
html[data-theme="neon"] .glass-card {
 animation: neon-flicker 5s ease-in-out infinite;
 box-shadow: 
 0 0 20px rgba(236, 72, 153, 0.3),
 inset 0 0 30px rgba(236, 72, 153, 0.05);
}

html[data-theme="neon"] .btn-primary {
 position: relative;
 text-shadow: 0 0 10px currentColor;
 overflow: hidden;
}

html[data-theme="neon"] .btn-primary::after {
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
 transform: scaleX(0);
 transform-origin: left;
}

html[data-theme="neon"] .btn-primary:hover::after {
 animation: neon-electric-surge 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* =============================================
   4. VAPORWAVE - 80s Retro Aesthetic
   Motion: VHS tracking, chromatic aberration, wave
   Identity: A E S T H E T I C
============================================= */
@keyframes vaporwave-vhs-tracking {
 0% { transform: translateX(0); }
 10% { transform: translateX(-2px); }
 20% { transform: translateX(2px); }
 30% { transform: translateX(-1px); }
 40% { transform: translateX(1px); }
 50%, 100% { transform: translateX(0); }
}

@keyframes vaporwave-chromatic {
 0%, 100% { 
 text-shadow: 
 -2px 0 0 rgba(255, 0, 255, 0.7),
 2px 0 0 rgba(0, 255, 255, 0.7);
 }
 50% {
 text-shadow: 
 -4px 0 0 rgba(255, 0, 255, 0.9),
 4px 0 0 rgba(0, 255, 255, 0.9);
 }
}

@keyframes vaporwave-wave {
 0% { transform: translateY(0) rotate(0deg); }
 25% { transform: translateY(-5px) rotate(1deg); }
 50% { transform: translateY(0) rotate(0deg); }
 75% { transform: translateY(5px) rotate(-1deg); }
 100% { transform: translateY(0) rotate(0deg); }
}

@keyframes vaporwave-scanlines {
 0% { background-position: 0 0; }
 100% { background-position: 0 100%; }
}

@keyframes vaporwave-retro-float {
 0%, 100% { 
 transform: translateY(0) perspective(400px) rotateX(0deg);
 }
 50% { 
 transform: translateY(-10px) perspective(400px) rotateX(5deg);
 }
}

html[data-theme="vaporwave"],
html[data-theme="retro"] {
 background: 
 linear-gradient(180deg, rgba(255, 113, 239, 0.1) 0%, transparent 100%),
 repeating-linear-gradient(
 0deg,
 rgba(0, 0, 0, 0.15) 0px,
 transparent 1px,
 transparent 2px,
 rgba(0, 0, 0, 0.15) 3px
 );
 background-size: 100% 100%, 100% 4px;
 animation: vaporwave-scanlines 8s linear infinite;
}

html[data-theme="vaporwave"] .card,
html[data-theme="retro"] .card {
 animation: vaporwave-retro-float 4s ease-in-out infinite;
}

html[data-theme="vaporwave"] h1, 
html[data-theme="vaporwave"] h2, 
html[data-theme="vaporwave"] h3,
html[data-theme="retro"] h1,
html[data-theme="retro"] h2 {
 animation: vaporwave-chromatic 3s ease-in-out infinite;
 font-style: italic;
}

html[data-theme="vaporwave"] .btn-primary,
html[data-theme="retro"] .btn-primary {
 transform-style: preserve-3d;
 transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

html[data-theme="vaporwave"] .btn-primary:hover,
html[data-theme="retro"] .btn-primary:hover {
 transform: perspective(400px) rotateX(-10deg) translateY(-4px);
 box-shadow: 
 0 10px 0 rgba(255, 113, 239, 0.5),
 0 20px 30px rgba(0, 0, 0, 0.3);
}

/* =============================================
   5. SKETCHBOOK - Hand-drawn Paper
   Motion: Pencil sketch, wobble, hand-drawn lines
   Identity: Organic, playful, imperfect
============================================= */
@keyframes sketch-draw-in {
 0% { 
 stroke-dashoffset: 1000;
 opacity: 0;
 }
 100% { 
 stroke-dashoffset: 0;
 opacity: 1;
 }
}

@keyframes sketch-wobble {
 0%, 100% { 
 transform: rotate(0deg) translateY(0);
 border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
 }
 25% {
 transform: rotate(0.5deg) translateY(-2px);
 border-radius: 15px 255px 15px 225px / 225px 15px 255px 15px;
 }
 50% {
 transform: rotate(-0.5deg) translateY(0);
 border-radius: 225px 15px 255px 15px / 15px 255px 15px 225px;
 }
 75% {
 transform: rotate(0.5deg) translateY(2px);
 border-radius: 15px 225px 15px 255px / 255px 15px 225px 15px;
 }
}

@keyframes sketch-pencil-draw {
 0% {
 clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
 }
 100% {
 clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
 }
}

@keyframes sketch-paper-texture {
 0%, 100% { 
 filter: brightness(1) contrast(1);
 }
 50% {
 filter: brightness(1.02) contrast(1.05);
 }
}

@keyframes sketch-handshake {
 0%, 100% { transform: translateX(0); }
 10% { transform: translateX(-1px); }
 20% { transform: translateX(1px); }
 30% { transform: translateX(-1px); }
 40% { transform: translateX(1px); }
 50% { transform: translateX(0); }
}

html[data-theme="sketch"] {
 background: 
 repeating-linear-gradient(
 0deg,
 transparent,
 transparent 29px,
 rgba(44, 62, 80, 0.04) 29px,
 rgba(44, 62, 80, 0.04) 30px
 );
 animation: sketch-paper-texture 5s ease-in-out infinite;
}

html[data-theme="sketch"] .card {
 animation: sketch-pencil-draw 0.6s cubic-bezier(0.4, 0, 0.2, 1) backwards;
 border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
}

html[data-theme="sketch"] .btn-primary {
 border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
 border: 2px solid currentColor;
 position: relative;
 overflow: hidden;
 transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

html[data-theme="sketch"] .btn-primary::before {
 content: '';
 position: absolute;
 top: 0;
 left: -100%;
 width: 100%;
 height: 100%;
 background: repeating-linear-gradient(
 45deg,
 transparent,
 transparent 2px,
 currentColor 2px,
 currentColor 4px
 );
 opacity: 0.2;
 transition: left 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

html[data-theme="sketch"] .btn-primary:hover {
 transform: rotate(-2deg) translateY(-2px);
 animation: sketch-wobble 0.5s ease-in-out;
}

html[data-theme="sketch"] .btn-primary:hover::before {
 left: 100%;
 }

 /* =============================================
   6. FROSTED GLASS - macOS Big Sur Style
   Motion: Smooth blur, depth layers, parallax
   Identity: Premium, sophisticated depth
============================================= */
@keyframes glass-shimmer {
 0% {
 background-position: -200% center;
 }
 100% {
 background-position: 200% center;
 }
}

@keyframes glass-float {
 0%, 100% {
 transform: translateY(0) translateZ(0);
 }
 50% {
 transform: translateY(-6px) translateZ(20px);
 }
}

@keyframes glass-refract {
 0%, 100% {
 filter: hue-rotate(0deg) brightness(1);
 }
 50% {
 filter: hue-rotate(5deg) brightness(1.1);
 }
}

@keyframes glass-depth-pulse {
 0%, 100% {
 box-shadow: 
 0 8px 32px rgba(0, 0, 0, 0.3),
 inset 0 1px 0 rgba(255, 255, 255, 0.1);
 }
 50% {
 box-shadow: 
 0 12px 48px rgba(0, 0, 0, 0.4),
 inset 0 1px 0 rgba(255, 255, 255, 0.2);
 }
}

html[data-theme="glass"],
html[data-theme="frosted"] {
 perspective: 1000px;
 background: 
 radial-gradient(ellipse at top left, rgba(56, 189, 248, 0.15), transparent 50%),
 radial-gradient(ellipse at bottom right, rgba(167, 139, 250, 0.15), transparent 50%);
}

html[data-theme="glass"] .card,
html[data-theme="frosted"] .card {
 backdrop-filter: blur(30px) saturate(180%);
 animation: glass-float 6s ease-in-out infinite;
}

html[data-theme="glass"] .glass-card,
html[data-theme="frosted"] .glass-card {
 animation: glass-depth-pulse 4s ease-in-out infinite;
}

html[data-theme="glass"] .btn-primary,
html[data-theme="frosted"] .btn-primary {
 backdrop-filter: blur(10px) saturate(180%);
 background: rgba(56, 189, 248, 0.8);
 border: 1px solid rgba(255, 255, 255, 0.3);
 position: relative;
 overflow: hidden;
 transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

html[data-theme="glass"] .btn-primary::after,
html[data-theme="frosted"] .btn-primary::after {
 content: '';
 position: absolute;
 top: 50%;
 left: 50%;
 width: 0;
 height: 0;
 background: rgba(255, 255, 255, 0.5);
 border-radius: 50%;
 transform: translate(-50%, -50%);
 transition: width 0.6s ease, height 0.6s ease;
}

html[data-theme="glass"] .btn-primary:hover,
html[data-theme="frosted"] .btn-primary:hover {
 backdrop-filter: blur(15px) saturate(200%);
 transform: translateY(-2px);
}

html[data-theme="glass"] .btn-primary:hover::after,
html[data-theme="frosted"] .btn-primary:hover::after {
 width: 300px;
 height: 300px;
}

/* =============================================
   7. DEEP COSMOS - Space / Galaxy Theme
   Motion: Star field, orbit, cosmic drift
   Identity: Infinite space exploration
============================================= */
@keyframes cosmos-stars-twinkle {
 0%, 100% { opacity: 0.3; transform: scale(1); }
 50% { opacity: 1; transform: scale(1.2); }
}

@keyframes cosmos-orbit {
 0% { 
 transform: rotate(0deg) translateX(40px) rotate(0deg);
 }
 100% { 
 transform: rotate(360deg) translateX(40px) rotate(-360deg);
 }
}

@keyframes cosmos-nebula-drift {
 0%, 100% {
 background-position: 0% 50%;
 }
 50% {
 background-position: 100% 50%;
 }
}

@keyframes cosmos-planet-rotate {
 0% {
 transform: perspective(500px) rotateY(0deg);
 }
 100% {
 transform: perspective(500px) rotateY(360deg);
 }
}

@keyframes cosmos-gravity-well {
 0%, 100% {
 transform: scale(1) translateY(0);
 filter: blur(0);
 }
 50% {
 transform: scale(1.03) translateY(-5px);
 filter: blur(0.5px);
 }
}

html[data-theme="cosmos"] {
 background: 
 radial-gradient(2px 2px at 20% 30%, white, transparent),
 radial-gradient(2px 2px at 60% 70%, white, transparent),
 radial-gradient(1px 1px at 50% 50%, white, transparent),
 radial-gradient(1px 1px at 80% 10%, white, transparent),
 radial-gradient(2px 2px at 90% 60%, white, transparent),
 radial-gradient(1px 1px at 33% 80%, white, transparent),
 radial-gradient(1px 1px at 15% 60%, white, transparent),
 radial-gradient(ellipse at center, rgba(123, 44, 191, 0.2), transparent 50%),
 linear-gradient(180deg, #050510 0%, #0a0a20 100%);
 background-size: 
 200% 200%, 200% 200%, 200% 200%, 200% 200%, 
 200% 200%, 200% 200%, 200% 200%, 100% 100%, 100% 100%;
 animation: cosmos-nebula-drift 20s ease-in-out infinite;
}

html[data-theme="cosmos"]::before {
 content: '';
 position: fixed;
 top: 10%;
 right: 10%;
 width: 300px;
 height: 300px;
 background: radial-gradient(circle, rgba(123, 44, 191, 0.4), transparent 70%);
 border-radius: 50%;
 filter: blur(60px);
 animation: cosmos-gravity-well 8s ease-in-out infinite;
 pointer-events: none;
 z-index: 0;
}

html[data-theme="cosmos"] .card {
 animation: cosmos-gravity-well 6s ease-in-out infinite;
 box-shadow: 
 0 0 30px rgba(123, 44, 191, 0.3),
 inset 0 0 40px rgba(123, 44, 191, 0.1);
}

html[data-theme="cosmos"] .btn-primary {
 position: relative;
 overflow: hidden;
 background: linear-gradient(135deg, #7b2cbf, #9d4edd);
 transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

html[data-theme="cosmos"] .btn-primary::before {
 content: '';
 position: absolute;
 inset: 0;
 background: radial-gradient(circle at var(--x, 50%) var(--y, 50%), rgba(255, 255, 255, 0.4), transparent 50%);
 opacity: 0;
 transition: opacity 0.4s ease;
}

html[data-theme="cosmos"] .btn-primary:hover {
 transform: translateY(-4px);
 box-shadow: 
 0 0 30px rgba(123, 44, 191, 0.8),
 0 10px 40px rgba(0, 0, 0, 0.6);
}

html[data-theme="cosmos"] .btn-primary:hover::before {
 opacity: 1;
}

/* =============================================
   8. MOLTEN - Liquid Lava Flow
   Motion: Viscous liquid, heat wave, ember particles
   Identity: Primal, volcanic energy
============================================= */
@keyframes molten-lava-flow {
 0%, 100% {
 background-position: 0% 50%, 100% 50%;
 }
 50% {
 background-position: 100% 50%, 0% 50%;
 }
}

@keyframes molten-heat-wave {
 0%, 100% {
 transform: translateX(0) scaleY(1);
 }
 25% {
 transform: translateX(2px) scaleY(0.98);
 }
 50% {
 transform: translateX(0) scaleY(1.02);
 }
 75% {
 transform: translateX(-2px) scaleY(0.99);
 }
}

@keyframes molten-ember-rise {
 0% {
 transform: translateY(0) scale(1);
 opacity: 1;
 }
 100% {
 transform: translateY(-100px) scale(0.3);
 opacity: 0;
 }
}

@keyframes molten-glow-pulse {
 0%, 100% {
 box-shadow: 
 0 0 20px rgba(255, 77, 0, 0.4),
 inset 0 0 20px rgba(255, 77, 0, 0.2);
 }
 50% {
 box-shadow: 
 0 0 40px rgba(255, 77, 0, 0.8),
 inset 0 0 30px rgba(255, 77, 0, 0.4);
 }
}

@keyframes molten-viscous-drip {
 0% {
 clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
 }
 50% {
 clip-path: polygon(0 0, 100% 0, 100% 60%, 0 40%);
 }
 100% {
 clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
 }
}

html[data-theme="molten"],
html[data-theme="lava"] {
 background: 
 linear-gradient(135deg, #1a0505, #2a0a0a, #1a0505),
 linear-gradient(45deg, rgba(255, 77, 0, 0.1) 0%, transparent 50%);
 background-size: 200% 200%, 100% 100%;
 animation: molten-lava-flow 10s ease-in-out infinite;
}

html[data-theme="molten"]::before,
html[data-theme="lava"]::before {
 content: '';
 position: fixed;
 bottom: 0;
 left: 0;
 right: 0;
 height: 200px;
 background: radial-gradient(ellipse at bottom, rgba(255, 77, 0, 0.3), transparent 60%);
 filter: blur(40px);
 pointer-events: none;
 z-index: 0;
 animation: molten-glow-pulse 4s ease-in-out infinite;
}

html[data-theme="molten"] .theme-card,
html[data-theme="lava"] .theme-card {
 position: relative;
 transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
 animation: molten-heat-wave 2s ease-in-out infinite;
}

html[data-theme="molten"] .theme-card::before,
html[data-theme="lava"] .theme-card::before {
 content: '';
 position: absolute;
 inset: -2px;
 background: linear-gradient(
 180deg,
 #ff4d00,
 #ff6b1a,
 #ff8533,
 #ff4d00
 );
 background-size: 100% 300%;
 border-radius: inherit;
 z-index: -1;
 opacity: 0;
 filter: blur(15px);
 animation: molten-lava-flow 4s ease-in-out infinite;
 transition: opacity 0.6s ease;
}

html[data-theme="molten"] .theme-card:hover,
html[data-theme="lava"] .theme-card:hover {
 transform: translateY(-8px);
 box-shadow: 
 0 0 40px rgba(255, 77, 0, 0.8),
 0 20px 60px rgba(255, 77, 0, 0.4),
 inset 0 0 30px rgba(255, 77, 0, 0.2);
}

html[data-theme="molten"] .theme-card:hover::before,
html[data-theme="lava"] .theme-card:hover::before {
 opacity: 1;
}

html[data-theme="molten"] .theme-card::after,
html[data-theme="lava"] .theme-card::after {
 content: '';
 position: absolute;
 bottom: 0;
 left: 50%;
 width: 4px;
 height: 4px;
 background: #ff4d00;
 border-radius: 50%;
 box-shadow: 0 0 10px #ff4d00;
 opacity: 0;
}

html[data-theme="molten"] .theme-card:hover::after,
html[data-theme="lava"] .theme-card:hover::after {
 animation: molten-ember-rise 2s ease-out infinite;
}

html[data-theme="molten"] .card,
html[data-theme="lava"] .card {
 animation: molten-viscous-drip 0.8s cubic-bezier(0.4, 0, 0.2, 1) backwards;
 box-shadow: 
 0 0 30px rgba(255, 77, 0, 0.3),
 inset 0 0 20px rgba(255, 77, 0, 0.1);
}

html[data-theme="molten"] .btn-primary,
html[data-theme="lava"] .btn-primary {
 background: linear-gradient(135deg, #ff4d00, #ff6b1a);
 position: relative;
 overflow: hidden;
 animation: molten-glow-pulse 3s ease-in-out infinite;
 transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

html[data-theme="molten"] .btn-primary::before,
html[data-theme="lava"] .btn-primary::before {
 content: '';
 position: absolute;
 inset: 0;
 background: linear-gradient(135deg, transparent, rgba(255, 255, 255, 0.3), transparent);
 transform: translateX(-100%);
 transition: transform 0.6s ease;
}

html[data-theme="molten"] .btn-primary:hover,
html[data-theme="lava"] .btn-primary:hover {
 transform: translateY(-4px);
 box-shadow: 
 0 0 40px rgba(255, 77, 0, 1),
 0 10px 40px rgba(255, 77, 0, 0.6);
}

html[data-theme="molten"] .btn-primary:hover::before,
html[data-theme="lava"] .btn-primary:hover::before {
 transform: translateX(100%);
}

/* =============================================
   9. PRISM - Holographic Rainbow
   Motion: Iridescent shift, chromatic dispersion, refraction
   Identity: Future-forward, hyper-modern
============================================= */
@keyframes prism-rainbow-shift {
 0% { 
 filter: hue-rotate(0deg);
 }
 100% { 
 filter: hue-rotate(360deg);
 }
}

@keyframes prism-refract {
 0%, 100% {
 background-position: 0% 50%;
 }
 50% {
 background-position: 100% 50%;
 }
}

@keyframes prism-hologram {
 0%, 100% {
 opacity: 1;
 transform: translateZ(0);
 }
 50% {
 opacity: 0.8;
 transform: translateZ(10px);
 }
}

@keyframes prism-chromatic-aberration {
 0%, 100% {
 text-shadow: 
 -1px 0 0 rgba(255, 0, 0, 0.5),
 1px 0 0 rgba(0, 255, 255, 0.5);
 }
 50% {
 text-shadow: 
 -2px 0 0 rgba(255, 0, 255, 0.7),
 2px 0 0 rgba(0, 255, 0, 0.7);
 }
}

@keyframes prism-spectral-dispersion {
 0% {
 transform: perspective(1000px) rotateY(0deg);
 filter: hue-rotate(0deg) saturate(100%);
 }
 25% {
 transform: perspective(1000px) rotateY(2deg);
 filter: hue-rotate(90deg) saturate(150%);
 }
 50% {
 transform: perspective(1000px) rotateY(0deg);
 filter: hue-rotate(180deg) saturate(200%);
 }
 75% {
 transform: perspective(1000px) rotateY(-2deg);
 filter: hue-rotate(270deg) saturate(150%);
 }
 100% {
 transform: perspective(1000px) rotateY(0deg);
 filter: hue-rotate(360deg) saturate(100%);
 }
}

html[data-theme="prism"] {
 background: 
 radial-gradient(ellipse at top, rgba(147, 51, 234, 0.2), transparent 50%),
 radial-gradient(ellipse at bottom right, rgba(52, 211, 153, 0.2), transparent 50%),
 radial-gradient(ellipse at bottom left, rgba(251, 191, 36, 0.2), transparent 50%);
 animation: prism-refract 10s ease-in-out infinite;
}

html[data-theme="prism"] .theme-card {
 position: relative;
 background: linear-gradient(
 135deg,
 rgba(167, 139, 250, 0.1),
 rgba(52, 211, 153, 0.1),
 rgba(251, 191, 36, 0.1),
 rgba(248, 113, 113, 0.1)
 );
 background-size: 300% 300%;
 transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
 transform-style: preserve-3d;
}

html[data-theme="prism"] .theme-card::before {
 content: '';
 position: absolute;
 inset: -2px;
 background: linear-gradient(
 45deg,
 #a78bfa,
 #34d399,
 #fbbf24,
 #f87171,
 #a78bfa
 );
 background-size: 300% 300%;
 border-radius: inherit;
 z-index: -1;
 opacity: 0;
 filter: blur(20px);
 animation: prism-refract 4s ease-in-out infinite;
 transition: opacity 0.6s ease;
}

html[data-theme="prism"] .theme-card::after {
 content: '';
 position: absolute;
 inset: 0;
 background: linear-gradient(
 135deg,
 rgba(255, 255, 255, 0.3) 0%,
 transparent 30%,
 transparent 70%,
 rgba(255, 255, 255, 0.3) 100%
 );
 background-size: 200% 200%;
 border-radius: inherit;
 opacity: 0;
 mix-blend-mode: overlay;
 transition: opacity 0.6s ease;
 animation: prism-refract 3s linear infinite;
}

html[data-theme="prism"] .theme-card:hover {
 transform: translateY(-10px) perspective(1000px) rotateX(5deg);
 animation: prism-spectral-dispersion 2s ease-in-out;
 box-shadow: 
 0 0 40px rgba(167, 139, 250, 0.6),
 0 0 80px rgba(52, 211, 153, 0.4),
 0 20px 60px rgba(0, 0, 0, 0.4);
}

html[data-theme="prism"] .theme-card:hover::before,
html[data-theme="prism"] .theme-card:hover::after {
 opacity: 1;
}

html[data-theme="prism"] .card {
 animation: prism-hologram 4s ease-in-out infinite;
 background: linear-gradient(
 135deg,
 rgba(167, 139, 250, 0.05),
 rgba(52, 211, 153, 0.05)
 );
}

html[data-theme="prism"] h1,
html[data-theme="prism"] h2,
html[data-theme="prism"] h3 {
 animation: prism-chromatic-aberration 3s ease-in-out infinite;
}

html[data-theme="prism"] .btn-primary {
 background: linear-gradient(
 135deg,
 #a78bfa,
 #34d399,
 #fbbf24
 );
 background-size: 300% 300%;
 position: relative;
 overflow: hidden;
 animation: prism-refract 3s ease-in-out infinite;
 transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

html[data-theme="prism"] .btn-primary::before {
 content: '';
 position: absolute;
 inset: 0;
 background: linear-gradient(
 45deg,
 transparent 0%,
 rgba(255, 255, 255, 0.5) 50%,
 transparent 100%
 );
 transform: translateX(-100%) skewX(-15deg);
 transition: transform 0.6s ease;
}

html[data-theme="prism"] .btn-primary:hover {
 transform: translateY(-4px);
 box-shadow: 
 0 0 40px rgba(167, 139, 250, 0.8),
 0 10px 40px rgba(52, 211, 153, 0.6);
 animation: prism-rainbow-shift 2s linear infinite;
}

html[data-theme="prism"] .btn-primary:hover::before {
 transform: translateX(100%) skewX(-15deg);
}

/* =============================================
   PERFORMANCE OPTIMIZATIONS
   Ensure 60fps on all devices
============================================= */
@media (prefers-reduced-motion: reduce) {
 *,
 *::before,
 *::after {
 animation-duration: 0.01ms !important;
 animation-iteration-count: 1 !important;
 transition-duration: 0.01ms !important;
 }
}

/* Force GPU acceleration for smooth animations */
.theme-card,
.card,
.glass-card,
.btn-primary,
html[data-theme]::before,
html[data-theme]::after {
 transform: translateZ(0);
 will-change: transform, opacity, filter;
}

/* Reduce motion on low-end devices */
@media (max-width: 768px) {
 html[data-theme] {
 animation-duration: 0s;
 }
}