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

/* Cyberpunk Fonts */
.font-cyber { font-family: 'Orbitron', sans-serif; }
.font-jannah { font-family: 'Rajdhani', sans-serif; }
.font-tech { font-family: 'Black Ops One', cursive; }
.font-fredoka { font-family: 'Fredoka', sans-serif; }

/* Native Fonts */
.font-arabic { font-family: 'Noto Sans Arabic', sans-serif; }
.font-javanese { font-family: 'Noto Sans Javanese', sans-serif; }
.font-chinese { font-family: 'Noto Sans SC', sans-serif; }
.font-japanese { font-family: 'Noto Sans JP', sans-serif; }
.font-korean { font-family: 'Noto Sans KR', sans-serif; }
.font-thai { font-family: 'Noto Sans Thai', sans-serif; }
.font-hindi { font-family: 'Noto Sans Devanagari', sans-serif; }

body {
  background-color: #0f172a;
  color: white;
  overflow-x: hidden;
}

body.light-mode {
  background-color: #f3f4f6;
  color: #000 !important;
}

/* Glassmorphism */
.glass-panel {
  background: rgba(15, 23, 42, 0.7);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(6, 182, 212, 0.2);
}

/* Neon Effects */
.neon-border {
  box-shadow: 0 0 5px #06b6d4, 0 0 10px #06b6d4 inset;
}

.neon-text {
  text-shadow: 0 0 5px #06b6d4, 0 0 10px #06b6d4;
}

.cyber-button {
  position: relative;
  background: linear-gradient(45deg, #0f172a, #1e293b);
  border: 1px solid #06b6d4;
  color: #06b6d4;
  text-transform: uppercase;
  letter-spacing: 1px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.cyber-button:hover {
  background: #06b6d4;
  color: #000;
  box-shadow: 0 0 15px #06b6d4;
}

/* Starfield Animation */
.starfield {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.star {
  position: absolute;
  background: white;
  border-radius: 50%;
  animation: twinkle var(--duration) linear infinite;
  opacity: 0;
}

@keyframes twinkle {
  0% { opacity: 0; transform: scale(0.5); }
  50% { opacity: 1; transform: scale(1.2); box-shadow: 0 0 10px white; }
  100% { opacity: 0; transform: scale(0.5); }
}

.comet {
  position: absolute;
  width: 2px;
  height: 2px;
  background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,1));
  box-shadow: 0 0 20px 2px rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  animation: shoot 4s linear infinite;
  opacity: 0;
}

.comet::before {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 0;
  width: 100px;
  height: 1px;
  background: linear-gradient(to left, rgba(255,255,255,1), rgba(255,255,255,0));
}

@keyframes shoot {
  0% { transform: translate(0, 0) rotate(-45deg); opacity: 1; }
  20% { transform: translate(-200px, 200px) rotate(-45deg); opacity: 0; }
  100% { transform: translate(-200px, 200px) rotate(-45deg); opacity: 0; }
}

/* Dynamic Frame Blink */
.frame-blink {
  animation: frame-pulse 3s infinite alternate;
}

@keyframes frame-pulse {
  0% { box-shadow: 0 0 10px #06b6d4; border-color: #06b6d4; }
  100% { box-shadow: 0 0 20px #a855f7, 0 0 10px #a855f7 inset; border-color: #a855f7; }
}

/* Glitch Effect */
.glitch {
  position: relative;
}
.glitch::before, .glitch::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #0f172a;
  opacity: 0.8;
}
.glitch::before {
  left: 2px;
  text-shadow: -1px 0 red;
  clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%);
  animation: glitch-anim-2 3s infinite linear alternate-reverse;
}
.glitch::after {
  left: -2px;
  text-shadow: -1px 0 blue;
  clip-path: polygon(0 55%, 100% 55%, 100% 100%, 0 100%);
  animation: glitch-anim 2.5s infinite linear alternate-reverse;
}
@keyframes glitch-anim {
  0% { clip-path: inset(10% 0 80% 0); }
  100% { clip-path: inset(80% 0 10% 0); }
}
@keyframes glitch-anim-2 {
  0% { clip-path: inset(80% 0 10% 0); }
  100% { clip-path: inset(10% 0 80% 0); }
}

/* Loader */
.loader-cyber {
  width: 24px;
  height: 24px;
  border: 2px solid #06b6d4;
  border-top: 2px solid transparent;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* Task Strikethrough */
.task-completed {
  position: relative;
  color: #9ca3af;
  transition: color 0.3s ease;
}
.task-completed::after {
  content: ' ';
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background: #06b6d4;
  animation: strike 0.3s ease-out forwards;
}
@keyframes strike {
  0%   { width : 0; }
  100% { width: 100%; }
}

/* Hide Google Translate Toolbar */
.goog-te-banner-frame.skiptranslate {
    display: none !important;
} 
body {
    top: 0px !important; 
}

@media print {
  .no-print, .scanlines { display: none !important; }
  body { background: white; color: black; }
}