/**
 * Custom Component Styles for leptos-daisyui-rs
 *
 * These are custom components not included in daisyUI 5:
 * - FAB (Floating Action Button) with speed dial
 * - Text Rotate with CSS animations
 * - Hover 3D (requires JavaScript, styles here support it)
 * - Hover Gallery (requires JavaScript, styles here support it)
 */

/* ==================== FAB Component ==================== */

/* Hide action buttons initially */
.fab > *:not(:first-child) {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: scale(0.8);
  transition: all 0.2s ease-in-out;
}

/* Show action buttons when FAB is focused */
.fab:focus > *:not(:first-child),
.fab:focus-within > *:not(:first-child) {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: scale(1);
}

/* Stagger animation for action buttons */
.fab:focus > *:nth-child(2),
.fab:focus-within > *:nth-child(2) {
  transition-delay: 0.05s;
}

.fab:focus > *:nth-child(3),
.fab:focus-within > *:nth-child(3) {
  transition-delay: 0.1s;
}

.fab:focus > *:nth-child(4),
.fab:focus-within > *:nth-child(4) {
  transition-delay: 0.15s;
}

.fab:focus > *:nth-child(5),
.fab:focus-within > *:nth-child(5) {
  transition-delay: 0.2s;
}

.fab:focus > *:nth-child(6),
.fab:focus-within > *:nth-child(6) {
  transition-delay: 0.25s;
}

/* Vertical stacking layout */
.fab {
  display: inline-flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: 0.5rem;
  position: relative;
}

/* Flower layout (quarter-circle) */
.fab.fab-flower {
  flex-direction: row;
  flex-wrap: wrap;
}

.fab.fab-flower > *:not(:first-child) {
  position: absolute;
}

.fab.fab-flower:focus > *:nth-child(2),
.fab.fab-flower:focus-within > *:nth-child(2) {
  transform: translate(-80px, -80px) scale(1);
}

.fab.fab-flower:focus > *:nth-child(3),
.fab.fab-flower:focus-within > *:nth-child(3) {
  transform: translate(-110px, 0) scale(1);
}

.fab.fab-flower:focus > *:nth-child(4),
.fab.fab-flower:focus-within > *:nth-child(4) {
  transform: translate(-80px, 80px) scale(1);
}

.fab.fab-flower:focus > *:nth-child(5),
.fab.fab-flower:focus-within > *:nth-child(5) {
  transform: translate(0, 110px) scale(1);
}

.fab.fab-flower:focus > *:nth-child(6),
.fab.fab-flower:focus-within > *:nth-child(6) {
  transform: translate(80px, 80px) scale(1);
}


/* ==================== Text Rotate Component ==================== */

@keyframes text-rotate-1-item {
  0%, 100% { opacity: 1; transform: translateY(0); }
  50% { opacity: 0; transform: translateY(-20px); }
}

@keyframes text-rotate-2-items {
  0%, 45% { opacity: 1; transform: translateY(0); }
  50%, 95% { opacity: 0; transform: translateY(-20px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes text-rotate-3-items {
  0%, 30% { opacity: 1; transform: translateY(0); }
  33%, 97% { opacity: 0; transform: translateY(-20px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes text-rotate-4-items {
  0%, 22% { opacity: 1; transform: translateY(0); }
  25%, 97% { opacity: 0; transform: translateY(-20px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes text-rotate-5-items {
  0%, 18% { opacity: 1; transform: translateY(0); }
  20%, 98% { opacity: 0; transform: translateY(-20px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes text-rotate-6-items {
  0%, 15% { opacity: 1; transform: translateY(0); }
  16.66%, 98% { opacity: 0; transform: translateY(-20px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Stack all rotating items in a single inline-grid cell. `display: contents`
   flattens the middle container so the items become grid children of
   `.text-rotate`; each shares grid cell 1/1 so they overlap in place, the box
   sizes to the widest item, and the visible word sits on the text baseline.
   (The previous absolute/relative model let the container grow to ~3 line
   heights, pushing the words above the visible band where overflow clipped
   them — ldui-mys.) */
.text-rotate {
  display: inline-grid;
  overflow: hidden;
  vertical-align: bottom;
  align-items: center;
}

.text-rotate > span {
  display: contents;
}

.text-rotate > span > span {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
  align-self: center;
  opacity: 0;
  white-space: nowrap;
}

/* Show first item by default */
.text-rotate > span > span:first-child {
  opacity: 1;
}

/* Pause animation on hover */
.text-rotate:hover > span > span {
  animation-play-state: paused !important;
}

/* Apply animations based on number of children */
.text-rotate > span:has(> span:nth-child(1):last-child) > span {
  animation: text-rotate-1-item 3s ease-in-out infinite;
}

.text-rotate > span:has(> span:nth-child(2):last-child) > span:nth-child(1) {
  animation: text-rotate-2-items 6s ease-in-out infinite;
}

.text-rotate > span:has(> span:nth-child(2):last-child) > span:nth-child(2) {
  animation: text-rotate-2-items 6s ease-in-out infinite 3s;
}

.text-rotate > span:has(> span:nth-child(3):last-child) > span:nth-child(1) {
  animation: text-rotate-3-items 9s ease-in-out infinite;
}

.text-rotate > span:has(> span:nth-child(3):last-child) > span:nth-child(2) {
  animation: text-rotate-3-items 9s ease-in-out infinite 3s;
}

.text-rotate > span:has(> span:nth-child(3):last-child) > span:nth-child(3) {
  animation: text-rotate-3-items 9s ease-in-out infinite 6s;
}

.text-rotate > span:has(> span:nth-child(4):last-child) > span:nth-child(1) {
  animation: text-rotate-4-items 12s ease-in-out infinite;
}

.text-rotate > span:has(> span:nth-child(4):last-child) > span:nth-child(2) {
  animation: text-rotate-4-items 12s ease-in-out infinite 3s;
}

.text-rotate > span:has(> span:nth-child(4):last-child) > span:nth-child(3) {
  animation: text-rotate-4-items 12s ease-in-out infinite 6s;
}

.text-rotate > span:has(> span:nth-child(4):last-child) > span:nth-child(4) {
  animation: text-rotate-4-items 12s ease-in-out infinite 9s;
}

.text-rotate > span:has(> span:nth-child(5):last-child) > span:nth-child(1) {
  animation: text-rotate-5-items 15s ease-in-out infinite;
}

.text-rotate > span:has(> span:nth-child(5):last-child) > span:nth-child(2) {
  animation: text-rotate-5-items 15s ease-in-out infinite 3s;
}

.text-rotate > span:has(> span:nth-child(5):last-child) > span:nth-child(3) {
  animation: text-rotate-5-items 15s ease-in-out infinite 6s;
}

.text-rotate > span:has(> span:nth-child(5):last-child) > span:nth-child(4) {
  animation: text-rotate-5-items 15s ease-in-out infinite 9s;
}

.text-rotate > span:has(> span:nth-child(5):last-child) > span:nth-child(5) {
  animation: text-rotate-5-items 15s ease-in-out infinite 12s;
}

.text-rotate > span:has(> span:nth-child(6):last-child) > span:nth-child(1) {
  animation: text-rotate-6-items 18s ease-in-out infinite;
}

.text-rotate > span:has(> span:nth-child(6):last-child) > span:nth-child(2) {
  animation: text-rotate-6-items 18s ease-in-out infinite 3s;
}

.text-rotate > span:has(> span:nth-child(6):last-child) > span:nth-child(3) {
  animation: text-rotate-6-items 18s ease-in-out infinite 6s;
}

.text-rotate > span:has(> span:nth-child(6):last-child) > span:nth-child(4) {
  animation: text-rotate-6-items 18s ease-in-out infinite 9s;
}

.text-rotate > span:has(> span:nth-child(6):last-child) > span:nth-child(5) {
  animation: text-rotate-6-items 18s ease-in-out infinite 12s;
}

.text-rotate > span:has(> span:nth-child(6):last-child) > span:nth-child(6) {
  animation: text-rotate-6-items 18s ease-in-out infinite 15s;
}


/* ==================== Hover 3D Component ==================== */

.hover-3d {
  position: relative;
  transform-style: preserve-3d;
  perspective: 1000px;
  transition: transform 0.1s ease-out;
  /* The perspective-projected card renders slightly outside its host box; a
     vertical margin keeps the tilt from colliding with adjacent content
     (e.g. section headers) — ldui-tuu. */
  margin-block: 1.5rem;
}

/* The tilted content keeps `flat` (not `preserve-3d`): it still tilts via the
   host's inherited `perspective`, but staying out of a shared 3D context stops
   it z-fighting with the coplanar z-index hover zones, which caused the
   on-hover flicker (ldui-tuu). Hardened further: promote the content to its
   OWN compositing layer (`will-change` + `backface-visibility: hidden`) so the
   compositor composites its tilt independently of the zones instead of
   repainting the shared context every frame, and make it non-interactive so
   only the stationary zones hit-test — the component is documented
   "non-interactive content only", so no real click target is lost, and this
   removes any residual per-frame re-tilt path. */
.hover-3d > *:not(div:empty) {
  transform-style: flat;
  transition: transform 0.1s ease-out;
  will-change: transform;
  backface-visibility: hidden;
  pointer-events: none;
}

/* Hover zones - hidden overlay grid */
.hover-3d > div:empty {
  position: absolute;
  width: 33.333%;
  height: 33.333%;
  z-index: 10;
  pointer-events: all;
}

.hover-3d > div:empty:nth-child(1) { top: 0; left: 0; }
.hover-3d > div:empty:nth-child(2) { top: 0; left: 33.333%; }
.hover-3d > div:empty:nth-child(3) { top: 0; left: 66.666%; }
.hover-3d > div:empty:nth-child(4) { top: 33.333%; left: 0; }
.hover-3d > div:empty:nth-child(5) { top: 33.333%; left: 33.333%; }
.hover-3d > div:empty:nth-child(6) { top: 33.333%; left: 66.666%; }
.hover-3d > div:empty:nth-child(7) { top: 66.666%; left: 0; }
.hover-3d > div:empty:nth-child(8) { top: 66.666%; left: 33.333%; }


/* ==================== Hover Gallery Component ==================== */

.hover-gallery {
  position: relative;
  overflow: hidden;
  display: block;
}

.hover-gallery > img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  pointer-events: none;
}

.hover-gallery > img:first-child {
  position: relative;
  opacity: 1;
  pointer-events: auto;
}

/* Show images on hover (will be enhanced with JavaScript) */
.hover-gallery:hover > img {
  opacity: 1;
}


/* ==================== Indicator Center Positioning Fix ==================== */

/**
 * Fix for daisyUI bug where center variants set all 4 positioning properties
 * to 50%, constraining the indicator-item to 0x0 size. We override with
 * proper CSS centering using left/top at 50% + transform offset.
 *
 * Bug affects: .indicator-top.indicator-center, .indicator-middle.indicator-center,
 * .indicator-bottom.indicator-center
 */

/* Top Center - horizontally centered at top */
.indicator-item.indicator-top.indicator-center {
  top: 0 !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translateX(-50%) !important;
}

/* Middle Center - centered both horizontally and vertically */
.indicator-item.indicator-middle.indicator-center {
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translate(-50%, -50%) !important;
}

/* Bottom Center - horizontally centered at bottom */
.indicator-item.indicator-bottom.indicator-center {
  top: auto !important;
  left: 50% !important;
  right: auto !important;
  bottom: 0 !important;
  transform: translateX(-50%) !important;
}


/* ==================== Accordion Plus Icon Fix ==================== */

/**
 * Fix for character encoding issue where the daisyUI minus sign (U+2212)
 * displays as "â^ʹ" due to server Content-Type header not specifying UTF-8.
 * Replace with ASCII hyphen-minus (U+002D) which doesn't have encoding issues.
 *
 * Only override the OPEN/CHECKED states, not the base closed state which
 * correctly shows "+" already.
 */

.collapse-plus:focus:not(.collapse-close) > .collapse-title:after,
.collapse-plus:not(.collapse-close) > input:is([type="checkbox"], [type="radio"]):checked ~ .collapse-title:after,
.collapse-plus[open] > .collapse-title:after {
  content: "-" !important;
}


/* ==================== Drawer Container-Relative Positioning Fix ==================== */

/**
 * Fix for drawer close animation appearing at wrong position.
 *
 * Root cause: daisyUI sets .drawer-side to position:fixed (viewport-relative) when
 * closed, but position:sticky (container-relative) when open. This causes the close
 * animation to slide to viewport left edge instead of container left edge.
 *
 * Solution: Force drawer-side to always use position:absolute within overflow-hidden
 * containers, making it container-relative in both open and closed states.
 */

/* Target drawers inside overflow-hidden containers (like the demo) */
.overflow-hidden > .drawer > .drawer-side {
  position: absolute !important;
  inset-inline-start: 0 !important;
  height: 100% !important;
}

/* When drawer-open, override sticky positioning to absolute */
.overflow-hidden > .drawer.drawer-open > .drawer-toggle:checked ~ .drawer-side,
.overflow-hidden > .drawer.drawer-open > .drawer-side {
  position: absolute !important;
}