/* ============================================================
   Shared Animation Primitives
   ============================================================
   Five reusable transition patterns. All workers apply these
   instead of inventing per-element animations.

   Primitive A — Fade         (opacity in-place)
   Primitive B — Collapse     (vertical height)
   Primitive C — Crossfade    (swap two elements)
   Primitive D — Modal        (backdrop + scale)
   Primitive E — Status color (bg/border/color transition)
   ============================================================ */

/* ----------------------------------------------------------
   A — Fade
   Add .t-fade to the element. Toggle .t-hidden to show/hide.
   The element stays in the DOM (visibility:hidden) so it
   doesn't cause layout reflow on disappear.
   ---------------------------------------------------------- */
.t-fade {
  transition: opacity 0.2s ease, visibility 0.2s ease;
  opacity: 1;
  visibility: visible;
}

.t-fade.t-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Variant: fade that also removes from layout flow when hidden.
   Uses max-height:0 + overflow:hidden so surrounding content
   reflows smoothly. */
.t-fade-remove {
  transition: opacity 0.2s ease, max-height 0.2s ease, margin 0.2s ease, padding 0.2s ease;
  opacity: 1;
  overflow: hidden;
}

.t-fade-remove.t-hidden {
  opacity: 0;
  max-height: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  pointer-events: none;
}

/* ----------------------------------------------------------
   B — Collapse
   Vertical expand/contract. Uses grid row trick for smooth
   height animation without knowing the content height.
   Wrap content in .t-collapse > .t-collapse-content.
   Toggle .t-collapsed on the .t-collapse wrapper.
   ---------------------------------------------------------- */
.t-collapse {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.25s ease;
}

.t-collapse.t-collapsed {
  grid-template-rows: 0fr;
}

.t-collapse > .t-collapse-content {
  overflow: hidden;
  min-height: 0;
}

/* Simpler variant using max-height for elements where the
   grid wrapper isn't practical. Set --collapse-height to
   a value larger than the content (e.g. 500px). */
.t-collapse-simple {
  transition: max-height 0.25s ease, opacity 0.2s ease;
  max-height: var(--collapse-height, 500px);
  opacity: 1;
  overflow: hidden;
}

.t-collapse-simple.t-collapsed {
  max-height: 0;
  opacity: 0;
}

/* ----------------------------------------------------------
   C — Crossfade
   For swapping two elements in the same position.
   Parent needs .t-crossfade (position:relative).
   Children get .t-crossfade-a / .t-crossfade-b.
   Toggle .t-show-b on the parent to switch.
   ---------------------------------------------------------- */
.t-crossfade {
  position: relative;
  /* height determined by whichever child is visible */
}

.t-crossfade > .t-crossfade-a,
.t-crossfade > .t-crossfade-b {
  transition: opacity 0.2s ease;
}

.t-crossfade > .t-crossfade-a {
  opacity: 1;
}

.t-crossfade > .t-crossfade-b {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}

.t-crossfade.t-show-b > .t-crossfade-a {
  opacity: 0;
  pointer-events: none;
}

.t-crossfade.t-show-b > .t-crossfade-b {
  opacity: 1;
  pointer-events: auto;
  position: relative;
}

/* ----------------------------------------------------------
   D — Modal
   For overlay modals appended to body. The overlay element
   gets .t-modal-overlay. Add .t-modal-open after appending
   to trigger the entrance. Remove .t-modal-open and wait
   for transitionend before removing from DOM.

   The direct child (the dialog box) gets the scale effect.
   ---------------------------------------------------------- */
.t-modal-overlay {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.t-modal-overlay.t-modal-open {
  opacity: 1;
  pointer-events: auto;
}

.t-modal-overlay > :first-child {
  transform: scale(0.95);
  transition: transform 0.2s ease;
}

.t-modal-overlay.t-modal-open > :first-child {
  transform: scale(1);
}

/* ----------------------------------------------------------
   E — Status color
   Add .t-status to any element that changes color classes.
   The transition is automatic on class swap.
   ---------------------------------------------------------- */
.t-status {
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease,
    opacity 0.2s ease;
}

/* ----------------------------------------------------------
   Entrance animation (one-shot, for newly inserted elements)
   Add .t-enter to an element when it's inserted into the DOM.
   ---------------------------------------------------------- */
@keyframes t-enter-fade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.t-enter {
  animation: t-enter-fade 0.25s ease-out both;
}

/* ----------------------------------------------------------
   Dropdown menus — specific fade variant that also handles
   transform for a subtle slide-down.
   ---------------------------------------------------------- */
.t-dropdown {
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease;
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.t-dropdown.t-hidden {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  pointer-events: none;
}