/* =============================================
   MAGIC CLEAN - Utilities & Animations
   ============================================= */

/* ===== DISPLAY ===== */
.d-none { display: none !important; }
.d-block { display: block !important; }
.d-flex { display: flex !important; }
.d-grid { display: grid !important; }

@media (min-width: 768px) {
  .md\:d-none { display: none !important; }
  .md\:d-block { display: block !important; }
  .md\:d-flex { display: flex !important; }
}

@media (min-width: 1024px) {
  .lg\:d-none { display: none !important; }
  .lg\:d-block { display: block !important; }
  .lg\:d-flex { display: flex !important; }
}

/* ===== FLEXBOX ===== */
.flex-column { flex-direction: column !important; }
.flex-wrap { flex-wrap: wrap !important; }
.justify-center { justify-content: center !important; }
.justify-between { justify-content: space-between !important; }
.align-center { align-items: center !important; }
.align-start { align-items: flex-start !important; }
.gap-2 { gap: var(--space-2) !important; }
.gap-4 { gap: var(--space-4) !important; }
.gap-6 { gap: var(--space-6) !important; }
.gap-8 { gap: var(--space-8) !important; }

/* ===== TEXT ===== */
.text-left { text-align: left !important; }
.text-center { text-align: center !important; }
.text-right { text-align: right !important; }

.text-primary { color: var(--text-primary) !important; }
.text-secondary { color: var(--text-secondary) !important; }
.text-muted { color: var(--text-muted) !important; }
.text-cyan { color: var(--cyan) !important; }
.text-mint { color: var(--mint) !important; }

.text-sm { font-size: var(--text-sm) !important; }
.text-base { font-size: var(--text-base) !important; }
.text-lg { font-size: var(--text-lg) !important; }
.text-xl { font-size: var(--text-xl) !important; }

.font-medium { font-weight: 500 !important; }
.font-semibold { font-weight: 600 !important; }
.font-bold { font-weight: 700 !important; }

/* ===== SPACING ===== */
.m-0 { margin: 0 !important; }
.mt-0 { margin-top: 0 !important; }
.mt-4 { margin-top: var(--space-4) !important; }
.mt-6 { margin-top: var(--space-6) !important; }
.mt-8 { margin-top: var(--space-8) !important; }
.mt-12 { margin-top: var(--space-12) !important; }
.mt-16 { margin-top: var(--space-16) !important; }

.mb-0 { margin-bottom: 0 !important; }
.mb-4 { margin-bottom: var(--space-4) !important; }
.mb-6 { margin-bottom: var(--space-6) !important; }
.mb-8 { margin-bottom: var(--space-8) !important; }
.mb-12 { margin-bottom: var(--space-12) !important; }

.mx-auto { margin-left: auto !important; margin-right: auto !important; }

.p-0 { padding: 0 !important; }
.p-4 { padding: var(--space-4) !important; }
.p-6 { padding: var(--space-6) !important; }
.p-8 { padding: var(--space-8) !important; }

/* ===== WIDTH ===== */
.w-full { width: 100% !important; }
.max-w-lg { max-width: 32rem !important; }
.max-w-xl { max-width: 40rem !important; }
.max-w-2xl { max-width: 48rem !important; }

/* ===== VISIBILITY ===== */
.opacity-0 { opacity: 0 !important; }
.opacity-50 { opacity: 0.5 !important; }
.opacity-100 { opacity: 1 !important; }

/* ===== POSITION ===== */
.relative { position: relative !important; }
.absolute { position: absolute !important; }
.overflow-hidden { overflow: hidden !important; }

/* ===== BORDER ===== */
.rounded { border-radius: var(--radius-md) !important; }
.rounded-lg { border-radius: var(--radius-lg) !important; }
.rounded-xl { border-radius: var(--radius-xl) !important; }
.rounded-full { border-radius: var(--radius-full) !important; }

/* ===== SCREEN READER ===== */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ===== SCROLL REVEAL ANIMATIONS ===== */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

.reveal-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.reveal-left.revealed {
  opacity: 1;
  transform: translateX(0);
}

.reveal-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.reveal-right.revealed {
  opacity: 1;
  transform: translateX(0);
}

.reveal-scale {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.reveal-scale.revealed {
  opacity: 1;
  transform: scale(1);
}

/* Stagger children */
.stagger > *:nth-child(1) { transition-delay: 0s; }
.stagger > *:nth-child(2) { transition-delay: 0.1s; }
.stagger > *:nth-child(3) { transition-delay: 0.2s; }
.stagger > *:nth-child(4) { transition-delay: 0.3s; }
.stagger > *:nth-child(5) { transition-delay: 0.4s; }
.stagger > *:nth-child(6) { transition-delay: 0.5s; }
.stagger > *:nth-child(7) { transition-delay: 0.6s; }
.stagger > *:nth-child(8) { transition-delay: 0.7s; }
.stagger > *:nth-child(9) { transition-delay: 0.8s; }
.stagger > *:nth-child(10) { transition-delay: 0.9s; }
.stagger > *:nth-child(11) { transition-delay: 1s; }
.stagger > *:nth-child(12) { transition-delay: 1.1s; }

/* ===== HOVER ANIMATIONS ===== */
.hover-lift {
  transition: transform var(--transition-base);
}

.hover-lift:hover {
  transform: translateY(-3px);
}

.hover-glow {
  transition: box-shadow var(--transition-base);
}

.hover-glow:hover {
  box-shadow: var(--shadow-glow-cyan);
}

/* ===== FLOATING ANIMATION ===== */
.float {
  animation: float 6s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* ===== GLOW PULSE ===== */
.glow-pulse {
  animation: glowPulse 3s ease-in-out infinite;
}

@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 10px rgba(40, 240, 255, 0.15); }
  50% { box-shadow: 0 0 20px rgba(40, 240, 255, 0.3); }
}

/* ===== GRADIENT ANIMATION ===== */
.gradient-animate {
  background-size: 200% 200%;
  animation: gradientShift 5s ease infinite;
}

@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ===== LINE ANIMATION ===== */
.line-reveal {
  position: relative;
  overflow: hidden;
}

.line-reveal::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--gradient-brand);
  transform: translateX(-100%);
  transition: transform 0.5s ease;
}

.line-reveal:hover::after {
  transform: translateX(0);
}

/* ===== BORDER ANIMATION ===== */
.border-animate {
  position: relative;
}

.border-animate::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: var(--gradient-brand);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: xor;
  -webkit-mask-composite: xor;
  opacity: 0;
  transition: opacity var(--transition-base);
}

.border-animate:hover::before {
  opacity: 1;
}

/* ===== PARALLAX EFFECT ===== */
[data-parallax] {
  transition: transform 0.1s linear;
}

/* ===== TEXT REVEAL ===== */
.text-reveal {
  overflow: hidden;
}

.text-reveal span {
  display: inline-block;
  transform: translateY(100%);
  transition: transform 0.6s cubic-bezier(0.77, 0, 0.175, 1);
}

.text-reveal.revealed span {
  transform: translateY(0);
}

/* ===== COUNTER ANIMATION ===== */
.counter {
  font-variant-numeric: tabular-nums;
}

/* ===== LOADING STATE ===== */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--bg-card) 0%,
    var(--bg-card-hover) 50%,
    var(--bg-card) 100%
  );
  background-size: 200% 100%;
  animation: skeleton 1.5s ease-in-out infinite;
}

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

/* ===== MAGNETIC HOVER (JS Required) ===== */
.magnetic {
  transition: transform 0.3s cubic-bezier(0.33, 1, 0.68, 1);
}

/* ===== CURSOR EFFECTS ===== */
.cursor-pointer { cursor: pointer; }
.cursor-none { cursor: none; }

/* ===== BLEND MODES ===== */
.blend-overlay { mix-blend-mode: overlay; }
.blend-multiply { mix-blend-mode: multiply; }
.blend-screen { mix-blend-mode: screen; }

/* ===== BACKDROP BLUR ===== */
.backdrop-blur-sm { backdrop-filter: blur(4px); }
.backdrop-blur { backdrop-filter: blur(8px); }
.backdrop-blur-lg { backdrop-filter: blur(16px); }
.backdrop-blur-xl { backdrop-filter: blur(24px); }

/* ===== NOISE OVERLAY ===== */
.noise-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 1;
}

/* ===== GLASS MORPHISM ===== */
.glass {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* ===== ASPECT RATIOS ===== */
.aspect-video { aspect-ratio: 16 / 9; }
.aspect-square { aspect-ratio: 1 / 1; }
.aspect-4-3 { aspect-ratio: 4 / 3; }
.aspect-3-4 { aspect-ratio: 3 / 4; }