/**
 * Simplified hydration consistency CSS
 * 
 * This file prevents hydration errors by completely disabling problematic
 * styles during server-side rendering, and only enabling them after hydration.
 */

/* During SSR, completely suppress all theme-related effects */
:root:not(.client-hydrated) [data-theme] {
  /* This attribute will be applied client-side only */
  display: none !important;
}

/* During SSR and before hydration, completely suppress all holographic effects */
:root:not(.client-hydrated) .shader,
:root:not(.client-hydrated) .specular,
:root:not(.client-hydrated) [class*="holo-"],
html.hydration-pending .shader,
html.hydration-pending .specular,
html.hydration-pending [class*="holo-"] {
  /* Disable ALL properties that might cause hydration mismatches */
  background-image: none !important;
  background-color: transparent !important;
  background: none !important;
  transform: none !important;
  z-index: 0 !important;
  opacity: 0 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  animation: none !important;
  transition: none !important;
  clip-path: none !important;
  mask-image: none !important;
  -webkit-mask-image: none !important;
  text-shadow: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* Hide pseudo-elements completely before hydration */
:root:not(.client-hydrated) .shader::before,
:root:not(.client-hydrated) .shader::after,
:root:not(.client-hydrated) .specular::before,
:root:not(.client-hydrated) .specular::after,
:root:not(.client-hydrated) [class*="holo-"]::before,
:root:not(.client-hydrated) [class*="holo-"]::after {
  display: none !important;
  content: "" !important;
  background: none !important;
  opacity: 0 !important;
}

/* Only after client hydration, re-enable all holographic effects */
body.client-hydrated .shader,
body.client-hydrated .specular,
body.client-hydrated [class*="holo-"] {
  /* Use initial to reset to the cascade value */
  background-image: initial;
  background-color: initial;
  background: initial;
  transform: initial;
  z-index: initial;
  opacity: initial;
  filter: initial;
  mix-blend-mode: initial;
  animation: initial;
  transition: initial;
  clip-path: initial;
  mask-image: initial;
  -webkit-mask-image: initial;
  text-shadow: initial;
  border: initial;
  box-shadow: initial;
}

/* Re-enable pseudo-elements after hydration */
body.client-hydrated .shader::before,
body.client-hydrated .shader::after,
body.client-hydrated .specular::before,
body.client-hydrated .specular::after,
body.client-hydrated [class*="holo-"]::before,
body.client-hydrated [class*="holo-"]::after {
  display: initial !important;
  content: "" !important;
  opacity: initial !important;
  background: initial !important;
}

/* Add a short fade-in transition when enabling effects */
body.client-hydrated .shader,
body.client-hydrated .specular {
  transition: opacity 0.3s ease !important;
}