/* Norman Theme - Flourishings Styles */

/* Flourishing Canvas Container */
#flourish-canvas {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 56px;
  pointer-events: none;
  z-index: 38;
}

/* Flourishing Zone Base */
.flourishing {
  position: fixed;
  bottom: 52px;
  left: 0;
  width: 100%;
  height: 56px;
  z-index: 38;
  pointer-events: none;
}

.flourish-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--accent-secondary) 50%,
    transparent 100%
  );
  z-index: 1;
}

.flourish-ground {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(13, 11, 8, 0.1) 100%
  );
  z-index: 0;
}

/* Individual Flourishing Styles */
.fm-fantasy-fire {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.fm-romance-petals {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.fm-scifi-scan {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.fm-horror-blood {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.fm-thriller-fog {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.fm-childrens-bubbles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.fm-memoir-handwriting {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.fm-litfic-ink {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.fm-coastal-tide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Canvas Performance */
#flourish-canvas {
  image-rendering: optimizeSpeed;
  image-rendering: -moz-crisp-edges;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: optimize-contrast;
  image-rendering: pixelated;
  -ms-interpolation-mode: nearest-neighbor;
}

/* Mobile Flourishing Adjustments */
@media (max-width: 768px) {
  .flourishing {
    height: 48px;
  }
  
  #flourish-canvas {
    height: 48px;
  }
}

@media (max-width: 480px) {
  .flourishing {
    height: 40px;
  }
  
  #flourish-canvas {
    height: 40px;
  }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
  .flourishing {
    display: none;
  }
}

/* High Performance Mode */
.high-performance .flourishing {
  opacity: 0.5;
}

/* Debug Styles (development only) */
.debug .flourishing {
  border: 1px dashed rgba(255, 0, 0, 0.3);
}

.debug #flourish-canvas {
  background: rgba(255, 0, 0, 0.1);
}

/* Flourishing Intensity Classes */
.flourishing.intensity-subtle {
  opacity: 0.25;
}

.flourishing.intensity-default {
  opacity: 0.6;
}

.flourishing.intensity-full {
  opacity: 0.9;
}

/* Flourishing Palettes by Variant */
/* Ink Variant (default) */
body:not(.gilt-variant):not(.page-variant):not(.linen-variant):not(.noir-variant) .flourishing {
  --flourish-primary: #c4a35a;
  --flourish-secondary: rgba(196, 163, 90, 0.3);
  --flourish-warm: #c4a96a;
  --flourish-cool: #6ba3d4;
}

/* Gilt Variant */
body.gilt-variant .flourishing {
  --flourish-primary: #c9a84c;
  --flourish-secondary: rgba(201, 168, 76, 0.3);
  --flourish-warm: #d4b55e;
  --flourish-cool: #7aa8d9;
}

/* Page Variant */
body.page-variant .flourishing {
  --flourish-primary: #b5614a;
  --flourish-secondary: rgba(181, 97, 74, 0.3);
  --flourish-warm: #c9745d;
  --flourish-cool: #5a8fb8;
}

/* Linen Variant */
body.linen-variant .flourishing {
  --flourish-primary: #5c4a32;
  --flourish-secondary: rgba(92, 74, 50, 0.3);
  --flourish-warm: #6b5941;
  --flourish-cool: #4a7ba8;
}

/* Noir Variant */
body.noir-variant .flourishing {
  --flourish-primary: #8eaec4;
  --flourish-secondary: rgba(142, 174, 196, 0.3);
  --flourish-warm: #9eb5c7;
  --flourish-cool: #5a8fb8;
}

/* Flourishing Z-index Management */
.flourishing {
  z-index: 38;
}

#flourish-canvas {
  z-index: 38;
}

.flourish-bar {
  z-index: 39;
}

.flourish-ground {
  z-index: 37;
}

/* Ensure flourishing stays below nav but above panels */
.nav {
  z-index: 40;
}

.panel {
  z-index: 62;
}

/* Flourishing Loading State */
.flourishing.loading {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.flourishing.loaded {
  opacity: 1;
  transition: opacity 0.3s ease;
}

/* Flourishing Error State */
.flourishing.error {
  opacity: 0.2;
}

.flourishing.error::after {
  content: 'Flourishing Error';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Instrument Sans', sans-serif;
  font-size: 10px;
  color: var(--text-tertiary);
  opacity: 0.5;
}