@tailwind base;
@tailwind components;
@tailwind utilities;

/* --- 1. 基础设置 --- */
body { margin: 0; padding: 0; overflow-x: hidden; background-color: #ffffff; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

::selection { background-color: #0600CA; color: #ffffff; }

/* --- 2. 滚动条工具 --- */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

.custom-scrollbar::-webkit-scrollbar { height: 4px; }
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.1); border-radius: 4px; }
.custom-scrollbar:hover::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.2); }

/* --- 3. 视觉特效工具 (Mask & Hologram) --- */
.mask-linear-fade {
    mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
}

.cyber-grid {
    mask-image: radial-gradient(circle at center, black 40%, transparent 100%);
    -webkit-mask-image: radial-gradient(circle at center, black 40%, transparent 100%);
}

/* 全息扫描背景 */
@keyframes hologram-scan {
    0% { background-position: 0% 0%; }
    100% { background-position: 0% 100%; }
}
.bg-hologram {
    background: linear-gradient(to bottom, transparent 0%, rgba(6, 0, 202, 0.05) 40%, rgba(6, 0, 202, 0.1) 50%, rgba(6, 0, 202, 0.05) 60%, transparent 100%);
    background-size: 100% 200%;
    animation: hologram-scan 3s linear infinite;
}

/* --- 4. 玻璃拟态与容器 --- */
/* 统一使用更适合浅色背景的玻璃效果，增强阴影深度 */
.glass-panel {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
}

.glass-shadow {
    box-shadow: 0 8px 30px rgba(0,0,0,0.04);
}

.perspective-1000 { perspective: 1000px; }
.perspective-2000 { perspective: 2000px; } /* 为学生端翻转卡片保留更大景深 */

/* 教师端背景网格 */
.grid-pattern-tech {
    background-image: linear-gradient(to right, rgba(6, 0, 202, 0.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(6, 0, 202, 0.05) 1px, transparent 1px);
    background-size: 20px 20px;
}

/* 门板纹理 (复用) */
.noise-texture {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.05'/%3E%3C/svg%3E");
}

/* --- 5. 动画关键帧定义 --- */

/* 扫描线 (教师端) */
@keyframes scanline {
    0% { transform: translateY(-100%); opacity: 0; }
    50% { opacity: 1; }
    100% { transform: translateY(300%); opacity: 0; }
}
.animate-scan {
    animation: scanline 3s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    background: linear-gradient(to bottom, transparent, rgba(6, 0, 202, 0.3), transparent);
}

/* 呼吸灯 (状态指示) */
@keyframes pulse-status {
    0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4); }
    70% { box-shadow: 0 0 0 10px rgba(34, 197, 94, 0); }
}
.status-pulse-green { animation: pulse-status 2s infinite; }

/* 警报闪烁 (异常状态) */
@keyframes pulse-alert {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}
.animate-alert { animation: pulse-alert 1.5s ease-in-out infinite; }

/* 柱状图增长 (家长端/教师端) */
@keyframes growUp {
    from { height: 0%; }
    to { height: 100%; }
}

/* 缓慢弹跳 (图标呼吸感) */
@keyframes bounce-slow {
    0%, 100% { transform: translateY(-5%); }
    50% { transform: translateY(5%); }
}
.animate-bounce-slow { animation: bounce-slow 3s infinite ease-in-out; }

/* 浮动爱心 (家长端交互) */
@keyframes float-up {
    0% { transform: translateY(0) scale(1); opacity: 1; }
    100% { transform: translateY(-100px) scale(0.5); opacity: 0; }
}
.animate-float-up { animation: float-up 1s ease-out forwards; }

/* 内容区块淡入上浮 (通用切换效果) */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in-up { animation: fadeInUp 0.5s ease-out forwards; }

@keyframes dash { 
    to { stroke-dashoffset: -1000; } 
}
/* --- 6. 新增：垂直排版与蒙版辅助 --- */
.vertical-rl {
    writing-mode: vertical-rl;
    text-orientation: mixed;
}

/* 确保父容器是 relative 才能让绝对定位的辉光生效 */
.relative-group {
    position: relative;
    transform-style: preserve-3d;
}

/* --- 7. 首页开屏 “Cyber Slash” 动画 --- */
@keyframes slash-enter-left {
    0% { transform: translateX(-150%) scaleX(2); opacity: 0; }
    50% { opacity: 1; }
    100% { transform: translateX(0) scaleX(1); opacity: 1; }
}

@keyframes text-glitch-appear {
    0% { opacity: 0; transform: scale(1.1); text-shadow: -2px 0 red, 2px 0 cyan; }
    20% { opacity: 1; transform: scale(0.95); text-shadow: 2px 0 red, -2px 0 cyan; }
    40% { transform: scale(1.02); text-shadow: -1px 0 red, 1px 0 cyan; }
    100% { opacity: 1; transform: scale(1); text-shadow: 0 0 transparent; }
}

@keyframes cyber-wipe-out-right {
    0% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); transform: translateX(0); }
    30% { transform: translateX(5%); }
    100% { clip-path: polygon(120% 0, 120% 0, 120% 100%, 120% 100%); transform: translateX(20%); opacity: 0; }
}

.light-trail-bar {
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.85) 50%, #00ffff 100%);
    filter: blur(4px);
    box-shadow: 0 0 24px rgba(255,255,255,0.5);
}

/* --- 8. Hero 3D 卡片动画 --- */
@keyframes card-flip-in {
    0% { opacity: 0; transform: rotateY(-26deg) translateX(50px) scale(0.9); }
    100% { opacity: 1; transform: rotateY(0) translateX(0) scale(1); }
}
.animate-card-flip-in {
    animation: card-flip-in 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
.transform-style-3d { transform-style: preserve-3d; }

/* --- 9. 页面切换动画 --- */
/* 退出动画：砖块出现覆盖屏幕 */
@keyframes wave-pulse-exit {
    0% { transform: scale(0); border-radius: 40%; }
    100% { transform: scale(1.02); border-radius: 0%; }
}

/* 入场动画：砖块消失露出内容 */
@keyframes wave-pulse-enter {
    0% { transform: scale(1.02); border-radius: 0%; }
    100% { transform: scale(0); border-radius: 40%; }
}

@keyframes logo-fade-in {
    0% { opacity: 0; transform: scale(0.9); }
    100% { opacity: 1; transform: scale(1); }
}

@keyframes logo-fade-out {
    0% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(0.9); }
}