/* Fabric Theme - Custom Styles */

html {
  scroll-behavior: smooth;
}

::-webkit-scrollbar {
  width: 0px;
}

::selection {
  background-color: rgba(34, 211, 238, 0.2);
  color: white;
}

/* Blog Post Title Styling */
.blog-post-title,
.blog-title,
article h1,
.post-title h1 {
  color: #000000 !important;
}

/* Animations */
@keyframes animationIn {
  0% {
    opacity: 0;
    transform: translateY(30px);
    filter: blur(8px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0px);
  }
}

.animate-on-scroll {
  animation-play-state: paused !important;
}

.animate-on-scroll.animate {
  animation-play-state: running !important;
}

@keyframes reveal-vertical {
  0% {
    clip-path: inset(0 0 100% 0);
    opacity: 0;
  }
  1% {
    opacity: 1;
  }
  100% {
    clip-path: inset(0 0 0 0);
    opacity: 1;
  }
}

.animate-line {
  opacity: 0;
  animation: reveal-vertical 1.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

@keyframes beam {
  0% {
    top: -200px;
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    top: 100%;
    opacity: 0;
  }
}

/* Spotlight Effects */
.spotlight-group {
  position: relative;
}

.spotlight {
  position: absolute;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(34, 211, 238, 0.15) 0%, transparent 70%);
  pointer-events: none;
  filter: blur(40px);
  left: var(--mouse-x-rel, 50%);
  top: var(--mouse-y-rel, 50%);
  transform: translate(-50%, -50%);
  transition: opacity 0.3s ease;
  z-index: 0;
}

.spotlight-group::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: radial-gradient(
    300px circle at var(--mouse-x-rel, 50%) var(--mouse-y-rel, 50%),
    rgba(34, 211, 238, 0.15),
    transparent
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 0;
}

.spotlight-group:hover::before {
  opacity: 1;
}

.spotlight-border {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.spotlight-group:hover .spotlight-border {
  opacity: 1;
}

.spotlight-card {
  background: radial-gradient(
    800px circle at var(--mouse-x) var(--mouse-y),
    rgba(34, 211, 238, 0.06),
    transparent 40%
  );
}

.spotlight-border-hover {
  background: radial-gradient(
    300px circle at var(--mouse-x-rel) var(--mouse-y-rel),
    rgba(34, 211, 238, 0.15),
    transparent
  );
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

/* Marquee Effect */
.marquee-mask {
  mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

/* Border Gradient */
[style*="--border-gradient"]::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: var(--border-radius-before, inherit);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  background: var(--border-gradient);
  pointer-events: none;
}

.top-gradient-line {
  background: linear-gradient(to right, #22d3ee, #0ea5e9, #3b82f6);
}

/* Beam Animation */
.animate-beam {
  animation: beam 8s linear infinite;
}

/* Marquee Animation */
.animate-marquee {
  animation: marquee 40s linear infinite;
}

/* Button Effects */
.btn-glow {
  position: relative;
}

.btn-glow::before {
  content: '';
  position: absolute;
  inset: -1px;
  background: linear-gradient(180deg, #22d3ee, #0e7490);
  border-radius: inherit;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: -1;
  filter: blur(10px);
}

.btn-glow:hover::before {
  opacity: 0.5;
}

/* Card Hover Effects */
.card-hover {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card-hover:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -20px rgba(34, 211, 238, 0.2);
}

/* Glass Effects */
.glass {
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.glass-light {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Gradient Text */
.text-gradient-cyan {
  background: linear-gradient(to right, #a5f3fc, #22d3ee, #3b82f6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.text-gradient-white {
  background: linear-gradient(to right, #ffffff, #ffffff, #6b7280);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Pulse Dot */
.pulse-dot {
  position: relative;
}

.pulse-dot::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: currentColor;
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

/* Grid Pattern */
.grid-pattern {
  background-image: 
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 50px 100px;
}

/* Focus Styles */
input:focus,
button:focus,
a:focus {
  outline: 2px solid #22d3ee;
  outline-offset: 2px;
}

button:focus:not(:focus-visible),
a:focus:not(:focus-visible) {
  outline: none;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  .animate-marquee {
    animation-duration: 20s;
  }
}

/* Utility Classes */
.text-balance {
  text-wrap: balance;
}

.backdrop-blur-sm {
  backdrop-filter: blur(4px);
}

.backdrop-blur-md {
  backdrop-filter: blur(12px);
}

.backdrop-blur-lg {
  backdrop-filter: blur(24px);
}