/* === QUANTUM FOUNDATION === */
:root {
    --primary-flux: #00f5ff;
    --secondary-flux: #ff006e;
    --tertiary-flux: #8338ec;
    --cosmic-void: #16bcdc;
    --stellar-white: #ffffff;
    --nebula-purple: #bdeefd;
    --plasma-blue: #b39a9a;
    --energy-gold: #ffb700;
    --quantum-green: #06ffa5;
    --dark-matter: #1a1a2e;
    --space-gray: #16213e;
    --flux-gradient: linear-gradient(135deg, var(--primary-flux) 0%, var(--secondary-flux) 50%, var(--tertiary-flux) 100%);
    --cosmic-gradient: linear-gradient(180deg, var(--cosmic-void) 0%, var(--plasma-blue) 50%, var(--nebula-purple) 100%);
    --energy-gradient: linear-gradient(45deg, var(--energy-gold) 0%, var(--quantum-green) 100%);
}

/* === EXHIBITION MATRIX === */
.exhibition-matrix { padding: 100px 50px; max-width: 1400px; margin: 0 auto; }
.matrix-header { text-align: center; margin-bottom: 15px; }
.dimension-title { font-size: 3rem; font-weight: 700; margin-bottom: 1rem; margin-top: 10px; }
.cosmic-subtitle { font-size: 1.2rem; color: black; max-width: 600px; margin: 0 auto; }
.timeline-nexus { display: grid; grid-template-columns: 1fr auto 1fr; gap: 40px; align-items: center; }

/* === MAIN EXHIBITION PORTAL === */
.main-exhibition-portal { position: relative; }
.portal-frame { position: relative; background: rgba(255,255,255,0.05); border-radius: 25px; overflow: hidden; backdrop-filter: blur(20px); transition: all 0.5s cubic-bezier(0.4,0,0.2,1); }
.portal-frame:hover { transform: scale(1.02) translateY(-10px); box-shadow: 0 25px 50px rgba(0,245,255,0.3); }
.energy-border { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--flux-gradient); border-radius: 25px; padding: 3px; }
.energy-border::before { content: ''; position: absolute; top: 3px; left: 3px; right: 3px; bottom: 3px; background: var(--cosmic-void); border-radius: 22px; }
.portal-content { position: relative; z-index: 2; padding: 25px; }
.portal-image { position: relative; border-radius: 20px; overflow: hidden; margin-bottom: 25px; }
.portal-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.portal-frame:hover .portal-image img { transform: scale(1.1); }
.quantum-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(45deg, rgba(0,245,255,0.2) 0%, rgba(255,0,110,0.2) 100%); opacity: 0; transition: opacity 0.3s ease; }
.portal-frame:hover .quantum-overlay { opacity: 1; }
.expo-designation { font-size: 1.5rem; font-weight: 600; margin-bottom: 20px; line-height: 1.4; }
.temporal-data { display: flex; flex-direction: column; gap: 12px; }
.time-coordinate, .space-coordinate { display: flex; align-items: center; gap: 12px; font-size: 1rem; color: rgba(255,255,255,0.8); }
.time-coordinate i, .space-coordinate i { color: #008bff; font-size: 1.1rem; min-width: 20px; }
.space-coordinate span { transition: color 0.3s ease; }
.space-coordinate span:hover { color: var(--quantum-green); }

/* === DIMENSIONAL BRIDGE === */
.dimensional-bridge { display: flex; align-items: center; justify-content: center; height: 300px; position: relative; }
.bridge-core { width: 4px; height: 150px; background: var(--flux-gradient); border-radius: 2px; position: relative; }
.bridge-core::before, .bridge-core::after { content: ''; position: absolute; width: 12px; height: 12px; background: var(--primary-flux); border-radius: 50%; left: 50%; transform: translateX(-50%); box-shadow: 0 0 15px var(--primary-flux); }
.bridge-core::before { top: -6px; }
.bridge-core::after { bottom: -6px; }
.energy-pulse { position: absolute; width: 8px; height: 8px; background: var(--quantum-green); border-radius: 50%; left: 50%; transform: translateX(-50%); animation: energyPulse 2s linear infinite; }

/* === SUB EXHIBITIONS GRID === */
.sub-exhibitions-grid { display: flex; flex-direction: column; gap: 25px; }
.expo-crystal { opacity: 0; transform: translateX(50px); animation: crystalMaterialize 0.8s ease forwards; }
.expo-crystal:nth-child(1) { animation-delay: 0.2s; }
.expo-crystal:nth-child(2) { animation-delay: 0.4s; }
.expo-crystal:nth-child(3) { animation-delay: 0.6s; }
.crystal-core { display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: center; background: rgba(255,255,255,0.05); border-radius: 20px; padding: 20px; border: 1px solid rgba(0,245,255,0.2); backdrop-filter: blur(15px); transition: all 0.3s cubic-bezier(0.4,0,0.2,1); cursor: pointer; position: relative; overflow: hidden; }
.crystal-core::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(0,245,255,0.1), transparent); transition: left 0.5s ease; }
.crystal-core:hover::before { left: 100%; }
.crystal-core:hover { transform: translateY(-8px) scale(1.02); border-color: var(--primary-flux); box-shadow: 0 15px 35px rgba(0,245,255,0.4); }
.crystal-core:active { transform: translateY(-3px) scale(0.98); transition: all 0.1s ease; }
.crystal-glow { position: absolute; top: 10px; left: 10px; width: 20px; height: 20px; background: var(--quantum-green); border-radius: 50%; filter: blur(8px); animation: crystalGlow 3s ease-in-out infinite; }
.crystal-image { width: 100%; height: 100px; border-radius: 10px; overflow: hidden; }
.crystal-image img { width: 100%; height: 100%; object-fit: cover; }
.crystal-title { font-size: 16px; font-weight: 600; margin-bottom: 8px; line-height: 1.3; }
.crystal-metrics { display: flex; flex-direction: column; gap: 6px; }
.metric { display: flex; align-items: center; gap: 8px; font-size: 12px; color: black; }
.metric i { color: var(--primary-flux); font-size: 0.8rem; }

/* === NEWS NEBULA === */
.news-nebula { padding: 100px 50px; position: relative; background: linear-gradient(135deg, rgba(26,26,46,0.8) 0%, rgb(31 125 141 / 90%) 100%); }
.nebula-header { text-align: center; margin-bottom: 80px; }
.news-constellation { max-width: 1400px; margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: 60px; }
.featured-news-portal { position: relative; }
.news-portal-frame { background: rgba(255,255,255,0.05); border-radius: 25px; overflow: hidden; backdrop-filter: blur(20px); border: 1px solid rgba(0,245,255,0.3); position: relative; transition: all 0.5s cubic-bezier(0.4,0,0.2,1); cursor: pointer; }
.news-portal-frame:hover { transform: translateY(-10px); box-shadow: 0 30px 60px rgba(0,245,255,0.3); border-color: var(--primary-flux); }
.portal-glow { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--flux-gradient); border-radius: 25px; padding: 2px; z-index: 1; }
.portal-glow::before { content: ''; position: absolute; top: 2px; left: 2px; right: 2px; bottom: 2px; background: var(--cosmic-void); border-radius: 23px; }
.news-image { position: relative; height: 300px; overflow: hidden; z-index: 2; }
.news-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.news-portal-frame:hover .news-image img { transform: scale(1.1); }
.news-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.7) 100%); }
.news-content { padding: 30px; position: relative; z-index: 2; }
.news-category { display: inline-flex; align-items: center; gap: 8px; background: var(--flux-gradient); color: var(--stellar-white); padding: 8px 16px; border-radius: 20px; font-size: 0.9rem; font-weight: 600; margin-bottom: 20px; }
.news-title { font-size: 2rem; font-weight: 700; margin-bottom: 15px; line-height: 1.3; color: var(--stellar-white); }
.news-excerpt { font-size: 1.1rem; color: rgba(255,255,255,0.8); line-height: 1.6; margin-bottom: 20px; }
.news-meta { display: flex; gap: 20px; align-items: center; }
.news-date, .news-author { display: flex; align-items: center; gap: 8px; color: rgba(255,255,255,0.6); font-size: 0.9rem; }
.news-date i, .news-author i { color: var(--primary-flux); }

/* === NEWS GRID === */
.news-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; }
.news-crystal { opacity: 0; transform: translateY(50px); animation: newsCrystalRise 0.8s ease forwards; }
.news-crystal:nth-child(1) { animation-delay: 0.1s; }
.news-crystal:nth-child(2) { animation-delay: 0.2s; }
.news-crystal:nth-child(3) { animation-delay: 0.3s; }
.news-crystal:nth-child(4) { animation-delay: 0.4s; }
.crystal-news-core { background: rgba(255,255,255,0.05); border-radius: 20px; overflow: hidden; border: 1px solid rgba(0,245,255,0.2); backdrop-filter: blur(15px); transition: all 0.3s cubic-bezier(0.4,0,0.2,1); cursor: pointer; position: relative; }
.crystal-news-core::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(0,245,255,0.1), transparent); transition: left 0.5s ease; }
.crystal-news-core:hover::before { left: 100%; }
.crystal-news-core:hover { transform: translateY(-8px) scale(1.02); border-color: var(--primary-flux); box-shadow: 0 15px 35px rgba(0,245,255,0.4); }
.news-thumb { position: relative; height: 180px; overflow: hidden; }
.news-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
.crystal-news-core:hover .news-thumb img { transform: scale(1.1); }
.news-badge { position: absolute; top: 15px; right: 15px; display: flex; align-items: center; gap: 5px; padding: 6px 12px; border-radius: 15px; font-size: 0.8rem; font-weight: 600; backdrop-filter: blur(10px); background: linear-gradient(45deg, var(--secondary-flux), var(--tertiary-flux)); color: var(--stellar-white); }
.news-badge.trending { background: linear-gradient(45deg, var(--energy-gold), var(--quantum-green)); }
.news-badge.new { background: linear-gradient(45deg, var(--quantum-green), var(--primary-flux)); }
.news-info { padding: 20px; }
.news-cat { display: inline-flex; align-items: center; gap: 6px; color: var(--primary-flux); font-size: 0.8rem; font-weight: 600; margin-bottom: 12px; }
.news-headline { font-size: 1.1rem; font-weight: 600; line-height: 1.4; margin-bottom: 12px; color: var(--stellar-white); }
.news-time { display: flex; align-items: center; gap: 6px; color: rgba(255,255,255,0.6); font-size: 0.8rem; }
.news-time i { color: var(--primary-flux); }

/* === TECH SHOWCASE === */
.tech-showcase { padding: 100px 50px; text-align: center; }
.showcase-header { margin-bottom: 80px; }
.tech-constellation { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 40px; max-width: 1000px; margin: 0 auto; }
.tech-sphere { position: relative; display: flex; flex-direction: column; align-items: center; gap: 15px; cursor: pointer; transition: all 0.3s cubic-bezier(0.4,0,0.2,1); padding: 20px; border-radius: 20px; background: rgba(255,255,255,0.02); border: 1px solid rgba(0,245,255,0.1); }
.tech-sphere:hover { transform: translateY(-15px) scale(1.05); background: rgba(0,245,255,0.05); border-color: var(--primary-flux); box-shadow: 0 20px 40px rgba(0,245,255,0.2); }
.sphere-core { width: 120px; height: 120px; background: var(--flux-gradient); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 2.5rem; color: var(--stellar-white); position: relative; box-shadow: 0 0 30px rgba(0,245,255,0.4); margin-top: 95px; }
.sphere-ring { position: absolute; width: 140px; height: 140px; border: 2px solid rgba(0,245,255,0.3); border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%,-50%); animation: sphereRotate 8s linear infinite; }
.sphere-ring::before { content: ''; position: absolute; top: -4px; left: 50%; width: 8px; height: 8px; background: var(--quantum-green); border-radius: 50%; transform: translateX(-50%); box-shadow: 0 0 10px var(--quantum-green); }
.tech-label { font-size: 1.2rem; font-weight: 700; color: var(--primary-flux); text-align: center; }
.tech-description { font-size: 0.9rem; color: rgba(255,255,255,0.7); text-align: center; margin-top: 5px; opacity: 0; transform: translateY(10px); transition: all 0.3s ease; }
.tech-sphere:hover .tech-description { opacity: 1; transform: translateY(0); }

/* === CONTACT NEXUS === */
.contact-nexus { padding: 100px 50px; text-align: center; }
.nexus-core { max-width: 800px; margin: 0 auto; }
.communication-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 25px; margin-top: 60px; }
.comm-channel { display: flex; align-items: center; gap: 20px; background: rgba(255,255,255,0.05); padding: 25px; border-radius: 20px; border: 1px solid rgba(0,245,255,0.2); backdrop-filter: blur(15px); transition: all 0.3s ease; }
.comm-channel:hover { transform: translateY(-8px) scale(1.02); border-color: var(--primary-flux); box-shadow: 0 15px 35px rgba(0,245,255,0.3); }
.comm-channel:active { transform: translateY(-3px) scale(0.98); transition: all 0.1s ease; }
.channel-icon { width: 60px; height: 60px; background: var(--flux-gradient); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: var(--stellar-white); }
.channel-data { display: flex; flex-direction: column; gap: 5px; text-align: left; }
.channel-label { font-size: 0.9rem; color: var(--primary-flux); font-weight: 600; }
.channel-value { font-size: 1.1rem; font-weight: 500; }

/* === QUANTUM CURSOR === */
.quantum-cursor { position: fixed; pointer-events: none; z-index: 9999; mix-blend-mode: difference; }
.cursor-core { width: 20px; height: 20px; background: var(--primary-flux); border-radius: 50%; position: absolute; transform: translate(-50%,-50%); transition: all 0.1s ease; }
.cursor-aura { width: 40px; height: 40px; border: 1px solid var(--primary-flux); border-radius: 50%; position: absolute; transform: translate(-50%,-50%); transition: all 0.2s ease; opacity: 0.5; }

/* === EXHIBITION CARDS === */
.exhibition-container { max-width: 1200px; margin: 0 auto; padding: 20px; }
.exhibition-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; list-style: none; padding: 0; }
.exhibition-card { background: white; border-radius: 16px; box-shadow: 0 8px 32px rgba(0,0,0,0.1); overflow: hidden; transition: all 0.3s ease; position: relative; min-height: 160px; animation: fadeInUp 0.6s ease forwards; }
.exhibition-card:hover { transform: translateY(-8px); box-shadow: 0 16px 48px rgba(0,0,0,0.15); }
.exhibition-card:nth-child(1) { animation-delay: 0.1s; }
.exhibition-card:nth-child(2) { animation-delay: 0.2s; }
.exhibition-card:nth-child(3) { animation-delay: 0.3s; }
.exhibition-card:nth-child(4) { animation-delay: 0.4s; }
.card-wrapper { position: relative; height: 100%; width: 100%; display: flex; flex-direction: column; }
.card-image { width: 100%; height: 70px; object-fit: contain; transition: transform 0.3s ease; }
.exhibition-card:hover .card-image { transform: scale(1.05); }
.card-title { padding: 12px 16px 8px; font-size: 12px; font-weight: bold; color: #333; line-height: 1.3; }
.card-link { text-decoration: none; color: inherit; flex: 1; display: flex; flex-direction: column; position: relative; padding: 0 16px 16px; }
.card-content { flex: 1; display: flex; flex-direction: column; }
.content-text { color: #666; font-size: 0.85rem; line-height: 1.5; margin-bottom: 12px; }
.card-arrow { position: absolute; bottom: 15px; right: 20px; width: 24px; height: 24px; border-radius: 50%; background: #16bcdc; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; }
.card-arrow::after { content: '→'; color: white; font-weight: bold; font-size: 14px; }
.exhibition-card:hover .card-arrow { background: #764ba2; transform: scale(1.1); }

/* === MODAL STYLES === */
.image-modal { display: none; position: fixed; z-index: 10000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.8); backdrop-filter: blur(5px); }
.modal-content { position: relative; margin: 6% auto; max-width: 39%; max-height: 50%; background: transparent; border-radius: 15px; overflow: hidden; animation: modalFadeIn 0.3s ease-out; }
.modal-image { width: 100%; height: auto; display: block; border-radius: 15px; box-shadow: 0 20px 60px rgba(0,245,255,0.3); }
.modal-close { position: absolute; top: -15px; right: -15px; width: 50px; height: 50px; background: linear-gradient(135deg, #00f5ff 0%, #ff006e 100%); border: none; border-radius: 50%; color: white; font-size: 24px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; box-shadow: 0 5px 15px rgba(0,0,0,0.3); }
.modal-close:hover { transform: scale(1.1) rotate(90deg); box-shadow: 0 8px 25px rgba(0,245,255,0.5); }
.modal-trigger { position: fixed; bottom: 30px; right: 30px; width: 70px; height: 70px; background: linear-gradient(135deg, #00f5ff 0%, #ff006e 50%, #8338ec 100%); border: none; border-radius: 50%; color: white; font-size: 28px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; box-shadow: 0 10px 30px rgba(0,245,255,0.4); z-index: 1000; animation: pulseGlow 2s infinite; }
.modal-trigger:hover { transform: scale(1.1); box-shadow: 0 15px 40px rgba(0,245,255,0.6); }

/* === MISC === */
.fas, .fab, .fa-solid { font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands" !important; display: inline-block !important; font-weight: 900 !important; }
.shipping-support i, .social-link i, .mobile-bottom-link i, #back-top i { display: inline-block !important; }
*[ssr], *[ssr-manifest], *[ssr-app], ssr { display: none !important; }

/* === ANIMATIONS === */
@keyframes stellarDrift { 0% { transform: translateY(0); } 100% { transform: translateY(-200px); } }
@keyframes nebulaFloat { 0%, 100% { transform: translate(0,0) scale(1); } 33% { transform: translate(30px,-20px) scale(1.1); } 66% { transform: translate(-20px,30px) scale(0.9); } }
@keyframes gridPulse { 0%, 100% { opacity: 0.3; } 50% { opacity: 0.6; } }
@keyframes fragmentReveal { to { opacity: 1; transform: translateY(0); } }
@keyframes highlightGlow { 0%, 100% { box-shadow: 0 0 10px var(--primary-flux); } 50% { box-shadow: 0 0 25px var(--primary-flux), 0 0 35px var(--secondary-flux); } }
@keyframes streamFlow { to { opacity: 1; transform: translateX(0); } }
@keyframes matrixActivate { to { opacity: 1; } }
@keyframes plasmaFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-20px); } }
@keyframes holoFloat { 0%, 100% { transform: translateY(0) rotateY(-15deg) rotateX(5deg); } 50% { transform: translateY(-15px) rotateY(-10deg) rotateX(3deg); } }
@keyframes scanlineMove { 0% { transform: translateY(-100%); } 100% { transform: translateY(100%); } }
@keyframes energyPulse { 0% { top: 10%; opacity: 1; } 100% { top: 90%; opacity: 0; } }
@keyframes crystalMaterialize { to { opacity: 1; transform: translateX(0); } }
@keyframes crystalGlow { 0%, 100% { opacity: 0.5; transform: scale(1); } 50% { opacity: 1; transform: scale(1.2); } }
@keyframes sphereRotate { 0% { transform: translate(-50%,-50%) rotate(0deg); } 100% { transform: translate(-50%,-50%) rotate(360deg); } }
@keyframes newsCrystalRise { to { opacity: 1; transform: translateY(0); } }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
@keyframes modalFadeIn { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: scale(1); } }
@keyframes pulseGlow { 0%, 100% { box-shadow: 0 10px 30px rgba(0,245,255,0.4); } 50% { box-shadow: 0 15px 40px rgba(0,245,255,0.8); } }

/* === RESPONSIVE === */
@media (max-width: 1024px) {
    .quantum-field { grid-template-columns: 1fr; gap: 60px; text-align: center; }
    .timeline-nexus { grid-template-columns: 1fr; gap: 60px; }
    .dimensional-bridge { transform: rotate(90deg); height: 100px; }
    .bridge-core { width: 100px; height: 4px; }
}
@media (max-width: 768px) {
    .hero-constellation, .exhibition-matrix, .tech-showcase, .contact-nexus { padding: 60px 20px; }
    .sphere-core { width: 120px; height: 120px; font-size: 2.5rem; margin-top: 75px; }
    .galactic-title { font-size: 2.5rem; }
    .dimension-title { font-size: 2rem; }
    .action-matrix { flex-direction: column; align-items: center; }
    .navigation-orb { top: 20px; right: 20px; }
    .orb-core { padding: 15px; gap: 10px; }
    .nav-crystal { width: 40px; height: 40px; font-size: 16px; }
    .tech-constellation { grid-template-columns: repeat(2, 1fr); gap: 30px; }
    .sphere-ring { width: 100px; height: 100px; }
    .exhibition-grid { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; }
    .card-image { height: 100%; }
    .exhibition-card { min-height: 185px; }
    .card-title { font-size: 1.1rem; padding: 16px 16px 8px; }
    .card-link { padding: 0 16px 16px; }
    .content-text { font-size: 0.9rem; }
    .modal-content { margin: 10% auto; max-width: 95%; max-height: 70%; }
    .modal-trigger { bottom: 20px; right: 20px; width: 60px; height: 60px; font-size: 24px; }
    .modal-close { top: -10px; right: -10px; width: 40px; height: 40px; font-size: 20px; }
    .news-nebula { padding: 60px 20px; }
}
@media (max-width: 480px) {
    .tech-constellation { grid-template-columns: 1fr; }
    .communication-grid { grid-template-columns: 1fr; }
    .crystal-core { grid-template-columns: 1fr; text-align: center; gap: 15px; }
    .crystal-image { justify-self: center; }
    .dimensional-bridge { transform: rotate(90deg); height: 100px; display: none; }
    .exhibition-container { padding: 10px; }
    .exhibition-grid { grid-template-columns: 1fr; gap: 12px; }
    .card-image { height: 80px; }
    .card-title { font-size: 1rem; padding: 12px 12px 6px; }
    .card-link { padding: 0 12px 12px; }
    .content-text { font-size: 0.85rem; margin-bottom: 10px; }
    .card-arrow { bottom: 10px; right: 12px; width: 20px; height: 20px; }
    .card-arrow::after { font-size: 12px; }
}
@media (min-width: 1200px) {
    .exhibition-grid { grid-template-columns: repeat(4, 1fr); }
}