/* TSWHZC Custom Styles - 渐进式几何流体设计语言 */

/* Custom Properties */
:root {
    --tswhzc-blue: #3B82F6;
    --tswhzc-light: #E0F2FE;
    --tswhzc-dark: #0F172A;
    --tswhzc-gradient-start: #3B82F6;
    --tswhzc-gradient-end: #E0F2FE;
}

/* Base Styles */
* {
    scroll-behavior: smooth;
}

html, body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    line-height: 1.6;
    overflow-x: hidden;
}

body {
    margin: 0;
    padding: 0;
}

/* 防止滚动条的通用样式 */
section {
    position: relative;
}

/* 特定section的overflow处理 */
section:not(.allow-overflow) {
    overflow: hidden;
}

.container {
    max-width: 100%;
}

/* 修复图片溢出问题 */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* 艺术性标题字体 */
.font-display {
    font-family: 'Playfair Display', serif;
    font-weight: 900;
    letter-spacing: -0.02em;
    font-style: italic;
}

.font-headline {
    font-family: 'Oswald', 'Montserrat', sans-serif;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* 主标题样式增强 */
h1, .text-4xl, .text-5xl, .text-6xl, .text-7xl {
    font-family: 'Playfair Display', serif;
    font-weight: 900;
    letter-spacing: -0.03em;
    line-height: 1.1;
    font-style: italic;
}

h2, .text-3xl, .text-2xl {
    font-family: 'Oswald', 'Montserrat', sans-serif;
    font-weight: 700;
    letter-spacing: 0.03em;
    line-height: 1.2;
    text-transform: uppercase;
}

/* 品牌标志字体 */
.brand-text {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* 优雅字体增强 */
.elegant-text {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    letter-spacing: -0.01em;
    font-style: italic;
}

/* Subtle Floating Card Animation */
@keyframes float {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-3px);
    }
}

.floating-card {
    animation: float 20s ease-in-out infinite;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* 稳定卡片样式 - 无浮动动画 */
.stable-card {
    position: relative;
    transition: transform 0.3s ease;
}

.stable-card:hover {
    transform: translateY(-4px);
}

/* 挑战卡片等高布局 */
.challenge-cards-wrapper {
    align-items: stretch;
}

.challenge-card {
    position: relative;
    transition: transform 0.3s ease;
    min-height: 100%;
}

.challenge-card:hover {
    transform: translateY(-4px);
}

/* 确保所有卡片等高 */
@media (min-width: 1024px) {
    .challenge-cards-wrapper {
        display: flex;
        align-items: stretch;
    }

    .challenge-card {
        display: flex;
        flex-direction: column;
    }

    .challenge-card > div {
        flex: 1;
        display: flex;
        flex-direction: column;
    }
}

/* 统一图片高度 */
.challenge-card img {
    height: 14rem; /* h-56 equivalent */
    width: 100%;
    object-fit: cover;
}

/* Bridge模块等高卡片 */
@media (min-width: 768px) {
    .bridge-cards-wrapper {
        display: flex;
        align-items: stretch;
    }

    .bridge-card {
        display: flex;
        flex-direction: column;
    }

    .bridge-card > div {
        flex: 1;
        display: flex;
        flex-direction: column;
    }
}

.bridge-card img {
    height: 14rem; /* h-56 equivalent */
    width: 100%;
    object-fit: cover;
}

/* Solution页面Pillar卡片等高 */
@media (min-width: 768px) {
    .pillar-card {
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    .pillar-card > div {
        flex: 1;
        display: flex;
        flex-direction: column;
    }
}

.pillar-card img {
    height: 14rem; /* h-56 equivalent */
    width: 100%;
    object-fit: cover;
}

/* Tech页面技术卡片等高 */
@media (min-width: 768px) {
    .tech-card {
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    .tech-card > div {
        flex: 1;
        display: flex;
        flex-direction: column;
    }
}

.tech-card img {
    height: 12rem; /* h-48 equivalent */
    width: 100%;
    object-fit: cover;
}

/* Solution页面Web3卡片等高 */
@media (min-width: 1024px) {
    .web3-cards-grid {
        display: flex;
        align-items: stretch;
    }

    .web3-cards-grid > div {
        display: flex;
        flex-direction: column;
    }

    .web3-cards-grid .floating-card > div {
        flex: 1;
        display: flex;
        flex-direction: column;
    }
}

.floating-card::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, var(--tswhzc-blue), var(--tswhzc-light), var(--tswhzc-blue));
    border-radius: inherit;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: -1;
    filter: blur(5px);
}

.floating-card:hover::before {
    opacity: 0.7;
}

/* Enhanced Magnetic Hover Effect */
.magnetic-hover {
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
    overflow: hidden;
}

.magnetic-hover::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.08) 0%, rgba(224, 242, 254, 0.05) 50%, rgba(59, 130, 246, 0.08) 100%);
    opacity: 0;
    transition: all 0.5s ease;
    z-index: 0;
}

.magnetic-hover:hover::before {
    opacity: 1;
}

.magnetic-hover:hover {
    transform: translateY(-6px) scale(1.02);
    box-shadow: 0 20px 40px rgba(59, 130, 246, 0.12), 0 8px 16px rgba(59, 130, 246, 0.08);
}

.magnetic-hover > * {
    position: relative;
    z-index: 2;
}

/* Ensure icons are always visible */
.magnetic-hover i {
    position: relative;
    z-index: 3;
    display: inline-block !important;
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    font-style: normal !important;
}

/* Fix icon display issues */
.fas, .fa-solid {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    display: inline-block !important;
}

/* Specific fixes for security icons */
.fa-vault::before { content: "\f911" !important; }
.fa-shield-alt::before { content: "\f3ed" !important; }
.fa-user-shield::before { content: "\f505" !important; }
.fa-check::before { content: "\f00c" !important; }

/* Advanced SVG Background Animations */
@keyframes gentle-float {
    0%, 100% {
        transform: translateY(0px) rotate(0deg) scale(1);
        opacity: 0.15;
    }
    50% {
        transform: translateY(-30px) rotate(180deg) scale(1.05);
        opacity: 0.25;
    }
}

@keyframes subtle-spin {
    0% {
        transform: rotate(0deg) scale(1);
        opacity: 0.1;
    }
    50% {
        transform: rotate(180deg) scale(1.1);
        opacity: 0.2;
    }
    100% {
        transform: rotate(360deg) scale(1);
        opacity: 0.1;
    }
}

@keyframes wave-motion {
    0%, 100% {
        transform: translateX(0px) translateY(0px) rotate(0deg);
        opacity: 0.12;
    }
    25% {
        transform: translateX(20px) translateY(-15px) rotate(45deg);
        opacity: 0.18;
    }
    75% {
        transform: translateX(-20px) translateY(-10px) rotate(-45deg);
        opacity: 0.15;
    }
}

@keyframes morphing-shape {
    0%, 100% {
        transform: scale(1) rotate(0deg);
        opacity: 0.08;
        filter: blur(0px);
    }
    33% {
        transform: scale(1.2) rotate(120deg);
        opacity: 0.15;
        filter: blur(1px);
    }
    66% {
        transform: scale(0.9) rotate(240deg);
        opacity: 0.12;
        filter: blur(0.5px);
    }
}

/* Unified Hero Section */
.unified-hero {
    position: relative;
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding-top: 4rem;
}

.unified-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, 
        var(--tswhzc-light) 0%, 
        rgba(255, 255, 255, 0.95) 25%, 
        rgba(255, 255, 255, 0.9) 50%,
        var(--tswhzc-gradient-end) 100%);
    z-index: 1;
}

/* Page-specific SVG styles */
.hero-about .hero-bg-shape {
    animation: gentle-float 20s ease-in-out infinite;
}

.hero-about .hero-bg-shape:nth-child(1) { animation-delay: 0s; }
.hero-about .hero-bg-shape:nth-child(2) { animation-delay: 4s; }
.hero-about .hero-bg-shape:nth-child(3) { animation-delay: 8s; }
.hero-about .hero-bg-shape:nth-child(4) { animation-delay: 12s; }

.hero-solution .hero-bg-shape {
    animation: subtle-spin 25s linear infinite;
}

.hero-solution .hero-bg-shape:nth-child(1) { animation-delay: 0s; }
.hero-solution .hero-bg-shape:nth-child(2) { animation-delay: 6s; }
.hero-solution .hero-bg-shape:nth-child(3) { animation-delay: 12s; }
.hero-solution .hero-bg-shape:nth-child(4) { animation-delay: 18s; }

.hero-tech .hero-bg-shape {
    animation: wave-motion 15s ease-in-out infinite;
}

.hero-tech .hero-bg-shape:nth-child(1) { animation-delay: 0s; }
.hero-tech .hero-bg-shape:nth-child(2) { animation-delay: 3s; }
.hero-tech .hero-bg-shape:nth-child(3) { animation-delay: 6s; }
.hero-tech .hero-bg-shape:nth-child(4) { animation-delay: 9s; }

.hero-contact .hero-bg-shape {
    animation: morphing-shape 18s ease-in-out infinite;
}

.hero-contact .hero-bg-shape:nth-child(1) { animation-delay: 0s; }
.hero-contact .hero-bg-shape:nth-child(2) { animation-delay: 4.5s; }
.hero-contact .hero-bg-shape:nth-child(3) { animation-delay: 9s; }
.hero-contact .hero-bg-shape:nth-child(4) { animation-delay: 13.5s; }

.hero-legal .hero-bg-shape {
    animation: gentle-float 22s ease-in-out infinite reverse;
}

.hero-legal .hero-bg-shape:nth-child(1) { animation-delay: 0s; }
.hero-legal .hero-bg-shape:nth-child(2) { animation-delay: 5.5s; }
.hero-legal .hero-bg-shape:nth-child(3) { animation-delay: 11s; }
.hero-legal .hero-bg-shape:nth-child(4) { animation-delay: 16.5s; }

/* Base shape positioning */
.hero-bg-shape {
    position: absolute;
    z-index: 2;
    pointer-events: none;
}

.hero-bg-shape:nth-child(1) {
    top: 15%;
    left: 12%;
}

.hero-bg-shape:nth-child(2) {
    top: 25%;
    right: 18%;
}

.hero-bg-shape:nth-child(3) {
    bottom: 35%;
    left: 25%;
}

.hero-bg-shape:nth-child(4) {
    bottom: 20%;
    right: 15%;
}

/* Hero Content */
.hero-content {
    position: relative;
    z-index: 10;
}

/* Gradient Border Animation */
@keyframes gradient-border {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

.gradient-border {
    background: linear-gradient(-45deg, var(--tswhzc-blue), var(--tswhzc-light), var(--tswhzc-blue), var(--tswhzc-gradient-end));
    background-size: 400% 400%;
    animation: gradient-border 15s ease infinite;
    padding: 2px;
    border-radius: 1rem;
}

.gradient-border > * {
    background: white;
    border-radius: calc(1rem - 2px);
}

/* Particle Background Animation */
@keyframes particle-float {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
        opacity: 1;
    }
    33% {
        transform: translateY(-30px) rotate(120deg);
        opacity: 0.8;
    }
    66% {
        transform: translateY(-20px) rotate(240deg);
        opacity: 0.6;
    }
}

.particle-bg {
    position: relative;
    overflow: hidden;
}

.particle-bg::before,
.particle-bg::after {
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    background: var(--tswhzc-blue);
    border-radius: 50%;
    animation: particle-float 8s ease-in-out infinite;
    opacity: 0.1;
}

.particle-bg::before {
    top: 10%;
    left: 10%;
    animation-delay: 0s;
}

.particle-bg::after {
    top: 80%;
    right: 20%;
    animation-delay: 4s;
}

/* Glass Morphism Effect */
.glass-morphism {
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
}

/* Fluid Shape Animations */
@keyframes morph {
    0%, 100% {
        border-radius: 40% 60% 70% 30% / 40% 40% 60% 50%;
    }
    34% {
        border-radius: 70% 30% 50% 50% / 30% 60% 70% 40%;
    }
    67% {
        border-radius: 100% 60% 60% 100% / 100% 100% 60% 60%;
    }
}

.fluid-shape {
    animation: morph 8s ease-in-out infinite;
}

/* Asymmetric Grid Layouts - Enhanced */
.asymmetric-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1.5rem;
    width: 100%;
    overflow: hidden; /* Prevent any scrollbars */
    max-width: 100%;
}

.asymmetric-grid .item-1 {
    grid-column: 1 / 8;
    grid-row: 1 / 3;
}

.asymmetric-grid .item-2 {
    grid-column: 8 / 13;
    grid-row: 1 / 2;
}

.asymmetric-grid .item-3 {
    grid-column: 8 / 13;
    grid-row: 2 / 4;
}

.asymmetric-grid .item-4 {
    grid-column: 1 / 5;
    grid-row: 3 / 4;
}

.asymmetric-grid .item-5 {
    grid-column: 5 / 8;
    grid-row: 3 / 4;
}

/* Diagonal Layout System */
.diagonal-split {
    position: relative;
    overflow: hidden;
}

.diagonal-split::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, transparent 50%);
    transform: skewX(-12deg) translateX(20%);
    z-index: 1;
}

/* Staggered Grid Layout */
.staggered-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 2rem;
    align-items: start;
}

.staggered-grid .col-large {
    grid-column: span 8;
}

.staggered-grid .col-medium {
    grid-column: span 4;
}

.staggered-grid .col-small {
    grid-column: span 6;
}

/* Prevent Individual Module Scrollbars */
.no-scrollbar {
    overflow: visible !important;
    max-height: none !important;
    height: auto !important;
}

.content-card, .feature-card, .pillar-card {
    overflow: visible;
    height: auto;
    max-height: none;
    display: flex;
    flex-direction: column;
}

/* Responsive Asymmetric Grid */
@media (max-width: 768px) {
    .asymmetric-grid, .staggered-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .asymmetric-grid > *, .staggered-grid > * {
        grid-column: 1 !important;
        grid-row: auto !important;
    }

    .staggered-grid .col-large,
    .staggered-grid .col-medium,
    .staggered-grid .col-small {
        grid-column: span 1;
    }
}

/* Multi-layered Shadow Effects */
.layered-shadow {
    box-shadow: 
        0 1px 3px rgba(0, 0, 0, 0.12),
        0 1px 2px rgba(0, 0, 0, 0.24),
        0 10px 20px rgba(59, 130, 246, 0.1),
        0 6px 6px rgba(59, 130, 246, 0.1);
}

.layered-shadow:hover {
    box-shadow: 
        0 14px 28px rgba(0, 0, 0, 0.25),
        0 10px 10px rgba(0, 0, 0, 0.22),
        0 20px 40px rgba(59, 130, 246, 0.15),
        0 12px 12px rgba(59, 130, 246, 0.15);
}

/* Gradient Text Animation */
@keyframes gradient-text {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

.animated-gradient-text {
    background: linear-gradient(-45deg, var(--tswhzc-blue), #8B5CF6, #EF4444, var(--tswhzc-blue));
    background-size: 400% 400%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradient-text 4s ease infinite;
}

/* Interactive Button Styles */
.btn-primary {
    position: relative;
    background: linear-gradient(135deg, var(--tswhzc-blue), var(--tswhzc-gradient-end));
    border: none;
    border-radius: 50px;
    color: white;
    font-weight: 600;
    padding: 1rem 2rem;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.3s ease;
    transform-style: preserve-3d;
}

.btn-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transition: left 0.5s;
}

.btn-primary:hover::before {
    left: 100%;
}

.btn-primary:hover {
    transform: translateY(-2px) rotateX(5deg);
    box-shadow: 0 10px 20px rgba(59, 130, 246, 0.3);
}

/* Progressive Loading Animation */
@keyframes progressive-load {
    0% {
        transform: scaleX(0);
        opacity: 0;
    }
    50% {
        opacity: 0.8;
    }
    100% {
        transform: scaleX(1);
        opacity: 1;
    }
}

.progressive-load {
    animation: progressive-load 0.8s ease forwards;
    transform-origin: left;
}

/* Geometric Pattern Backgrounds */
.geometric-pattern {
    background-image: 
        radial-gradient(circle at 1px 1px, rgba(59, 130, 246, 0.15) 1px, transparent 0);
    background-size: 20px 20px;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--tswhzc-blue), var(--tswhzc-gradient-end));
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--tswhzc-blue);
}

/* Navigation Enhancements */
.nav-blur {
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    background: rgba(255, 255, 255, 0.9);
    border-bottom: 1px solid rgba(59, 130, 246, 0.1);
}

/* Form Enhancements */
.form-input {
    background: rgba(255, 255, 255, 0.9);
    border: 2px solid transparent;
    border-radius: 12px;
    padding: 1rem;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.form-input:focus {
    border-color: var(--tswhzc-blue);
    background: rgba(255, 255, 255, 1);
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
    outline: none;
}

/* Mobile Optimizations */
@media (max-width: 768px) {
    .floating-card {
        animation-duration: 4s;
    }

    .magnetic-hover:hover {
        transform: none;
    }

    .layered-shadow {
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }
}

/* Accessibility Enhancements */
@media (prefers-reduced-motion: reduce) {
    .floating-card,
    .gradient-border,
    .particle-bg::before,
    .particle-bg::after,
    .fluid-shape,
    .animated-gradient-text {
        animation: none;
    }

    .magnetic-hover {
        transition: none;
    }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    .glass-morphism {
        background: rgba(15, 23, 42, 0.25);
        border: 1px solid rgba(255, 255, 255, 0.1);
    }

    .form-input {
        background: rgba(15, 23, 42, 0.9);
        color: white;
    }
}

/* Print Styles */
@media print {
    .floating-card,
    .magnetic-hover,
    .gradient-border,
    .particle-bg::before,
    .particle-bg::after {
        animation: none;
        transform: none;
    }

    .glass-morphism {
        background: white;
        backdrop-filter: none;
    }
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
    .glass-morphism {
        background: white;
        border: 2px solid var(--tswhzc-blue);
    }

    .magnetic-hover:hover {
        border: 2px solid var(--tswhzc-blue);
    }
}

/* Loading States */
.loading-shimmer {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer 2s infinite;
}

@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

/* Intersection Observer Animations */
.fade-in-up {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease;
}

.fade-in-up.animate {
    opacity: 1;
    transform: translateY(0);
}

.fade-in-left {
    opacity: 0;
    transform: translateX(-30px);
    transition: all 0.6s ease;
}

.fade-in-left.animate {
    opacity: 1;
    transform: translateX(0);
}

.fade-in-right {
    opacity: 0;
    transform: translateX(30px);
    transition: all 0.6s ease;
}

.fade-in-right.animate {
    opacity: 1;
    transform: translateX(0);
}

/* Overflow Protection - Enhanced */
.container {
    width: 100%;
    max-width: 100%;
}

/* Global Scrollbar Prevention */
* {
    box-sizing: border-box;
}

body, html {
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
}

/* Prevent all individual module scrollbars */
.card, .pillar, .feature, .section-content,
.bg-white, .bg-gradient-to-br, .backdrop-blur-lg, [class*="space-y"] {
    overflow: visible !important;
    max-height: none !important;
    height: auto !important;
}

/* Specific fixes for common scrollbar issues */
.grid > div, .flex > div, .space-y-6 > div {
    overflow: visible;
    height: auto;
    max-height: none;
}

/* Ensure grid items don't create scrollbars */
.grid {
    width: 100%;
    overflow: visible;
}

.grid > * {
    min-width: 0; /* Prevent grid blowout */
    overflow: visible;
}

/* Text content should wrap, not scroll */
p, div, span, h1, h2, h3, h4, h5, h6 {
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
}

/* Z-index Management */
.z-nav { z-index: 50; }
.z-dropdown { z-index: 40; }
.z-modal { z-index: 60; }
.z-floating { z-index: 10; }