/* transitions-dev snippets used by Blumenfreude theme */

.t-dropdown {
  transform-origin: top left;
  transform: scale(var(--dropdown-pre-scale));
  opacity: 0;
  pointer-events: none;
  transition:
    transform var(--dropdown-open-dur) var(--dropdown-ease),
    opacity var(--dropdown-open-dur) var(--dropdown-ease);
  will-change: transform, opacity;
}
.t-dropdown[data-origin="top-right"] { transform-origin: top right; }
.t-dropdown[data-origin="top-center"] { transform-origin: top center; }
.t-dropdown.is-open {
  transform: scale(1);
  opacity: 1;
  pointer-events: auto;
}
.t-dropdown.is-closing {
  transform: scale(var(--dropdown-closing-scale));
  opacity: 0;
  pointer-events: none;
  transition:
    transform var(--dropdown-close-dur) var(--dropdown-ease),
    opacity var(--dropdown-close-dur) var(--dropdown-ease);
}

.t-panel-slide {
  transform: translateY(var(--panel-translate-y));
  opacity: 0;
  filter: blur(var(--panel-blur));
  pointer-events: none;
  transition:
    transform var(--panel-close-dur) var(--panel-ease),
    opacity var(--panel-close-dur) var(--panel-ease),
    filter var(--panel-close-dur) var(--panel-ease);
  will-change: transform, opacity, filter;
}
.t-panel-slide[data-open="true"] {
  transform: translateY(0);
  opacity: 1;
  filter: blur(0);
  pointer-events: auto;
  transition:
    transform var(--panel-open-dur) var(--panel-ease),
    opacity var(--panel-open-dur) var(--panel-ease),
    filter var(--panel-open-dur) var(--panel-ease);
}

.t-stagger-line {
  display: block;
  opacity: 0;
  transform: translateY(var(--stagger-distance));
  filter: blur(var(--stagger-blur));
  transition:
    opacity var(--stagger-dur) var(--stagger-ease),
    transform var(--stagger-dur) var(--stagger-ease),
    filter var(--stagger-dur) var(--stagger-ease);
  will-change: transform, opacity, filter;
}
.t-stagger-line--2 { transition-delay: var(--stagger-stagger); }
.t-stagger.is-shown .t-stagger-line {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

.t-acc-item .t-acc-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--acc-expand) var(--acc-ease);
}
.t-acc-item.is-open .t-acc-panel { grid-template-rows: 1fr; }
.t-acc-panel-inner { overflow: hidden; }
.t-acc-chevron { transition: transform var(--acc-chevron) var(--acc-ease); }
.t-acc-item.is-open .t-acc-chevron { transform: scaleY(-1); }

.t-modal {
  transform: scale(var(--modal-scale));
  opacity: 0;
  pointer-events: none;
  transition:
    transform var(--modal-open-dur) var(--modal-ease),
    opacity var(--modal-open-dur) var(--modal-ease);
}
.t-modal.is-open {
  transform: scale(1);
  opacity: 1;
  pointer-events: auto;
}
.t-modal.is-closing {
  transform: scale(var(--modal-scale-close));
  opacity: 0;
  pointer-events: none;
  transition:
    transform var(--modal-close-dur) var(--modal-ease),
    opacity var(--modal-close-dur) var(--modal-ease);
}

.t-tilt { perspective: var(--tilt-perspective); }
.t-tilt-card {
  transform-style: preserve-3d;
  transition: transform var(--tilt-return) var(--tilt-return-ease);
  will-change: transform;
}
.t-tilt.is-tilting .t-tilt-card {
  transition: transform var(--tilt-follow) var(--tilt-follow-ease);
}

.t-tt {
  opacity: 0;
  transform: scale(var(--tt-scale));
  transition:
    opacity var(--tt-out-dur) var(--tt-out-ease),
    transform var(--tt-out-dur) var(--tt-out-ease);
  pointer-events: none;
}
.t-tt-wrap:hover .t-tt,
.t-tt-wrap:focus-within .t-tt {
  opacity: 1;
  transform: scale(1);
  transition:
    opacity var(--tt-in-dur) var(--tt-in-ease) var(--tt-delay),
    transform var(--tt-in-dur) var(--tt-in-ease) var(--tt-delay);
}

.t-success-check {
  opacity: 0;
  transform: rotate(var(--check-rotate-from)) translateY(var(--check-y-amount));
  filter: blur(var(--check-blur-from));
}
.t-success-check.is-shown {
  animation:
    bf-check-fade var(--check-opacity-dur) var(--check-ease-opacity) forwards,
    bf-check-rotate var(--check-rotate-dur) var(--check-ease-rotate) forwards,
    bf-check-bob var(--check-bob-dur) var(--check-ease-bob) forwards,
    bf-check-sharpen var(--check-blur-dur) var(--check-ease-out) forwards;
}
.t-success-check path {
  stroke-dasharray: 20;
  stroke-dashoffset: 20;
}
.t-success-check.is-shown path {
  animation: bf-check-draw var(--check-path-dur) var(--check-ease-path) var(--check-path-delay) forwards;
}
@keyframes bf-check-draw {
  to { stroke-dashoffset: 0; }
}
@keyframes bf-check-fade {
  to { opacity: 1; }
}
@keyframes bf-check-rotate {
  to { rotate: 0deg; }
}
@keyframes bf-check-bob {
  to { transform: rotate(0deg) translateY(0); }
}
@keyframes bf-check-sharpen {
  to { filter: blur(0); }
}

/* Tabs sliding – the pill follows the active tab */
.t-tabs {
  position: relative;
  display: inline-flex;
  gap: 0.15rem;
  padding: 0.25rem;
  border-radius: 999px;
  background: var(--tabs-bar-bg);
  isolation: isolate;
}
.t-tabs__pill {
  position: absolute;
  top: 0.25rem;
  bottom: 0.25rem;
  left: 0;
  z-index: -1;
  border-radius: 999px;
  background: var(--tabs-pill-bg);
  box-shadow: 0 1px 3px rgba(66, 5, 24, 0.14);
  transform: translateX(var(--tabs-pill-x, 0));
  width: var(--tabs-pill-w, 0);
  transition:
    transform var(--tabs-dur) var(--tabs-ease),
    width var(--tabs-dur) var(--tabs-ease);
}
.t-tabs__tab {
  border: 0;
  background: transparent;
  font: inherit;
  font-weight: 600;
  color: var(--tabs-text-muted);
  padding: 0.5rem 1.1rem;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--tabs-dur) var(--tabs-ease);
}
.t-tabs__tab[aria-selected="true"],
.t-tabs__tab[aria-current="page"] { color: var(--tabs-text-active); }

/* Notification badge – pops in when the count changes */
.t-badge {
  opacity: 0;
  transform: translate(var(--badge-offset-x), var(--badge-offset-y)) scale(0.2);
  filter: blur(var(--badge-blur));
  transition:
    opacity var(--badge-fade-close-dur) var(--badge-close-ease),
    transform var(--badge-pop-close-dur) var(--badge-close-ease),
    filter var(--badge-fade-close-dur) var(--badge-close-ease);
}
.t-badge.is-shown {
  opacity: 1;
  transform: translate(0, 0) scale(1);
  filter: blur(0);
  transition:
    opacity var(--badge-fade-dur) var(--badge-slide-ease),
    transform var(--badge-pop-dur) var(--badge-pop-ease),
    filter var(--badge-fade-dur) var(--badge-slide-ease);
}

/* Toast open / close */
.t-toast {
  opacity: 0;
  transform: translateY(var(--toast-distance)) scale(var(--toast-scale));
  filter: blur(var(--toast-blur));
  transition:
    opacity var(--toast-close) var(--toast-ease),
    transform var(--toast-close) var(--toast-ease),
    filter var(--toast-close) var(--toast-ease);
}
.t-toast.is-shown {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
  transition:
    opacity var(--toast-open) var(--toast-ease),
    transform var(--toast-open) var(--toast-ease),
    filter var(--toast-open) var(--toast-ease);
}

/* Skeleton reveal – content fades in once the media has decoded */
.t-reveal {
  opacity: 0;
  filter: blur(var(--reveal-blur));
  transition:
    opacity var(--reveal-dur) var(--reveal-ease),
    filter var(--reveal-dur) var(--reveal-ease);
}
.t-reveal.is-shown {
  opacity: 1;
  filter: blur(0);
}

.t-checkbox-box {
  transition: background-color var(--check-box) var(--check-ease);
}
.t-checkbox input:checked + .t-checkbox-box {
  background-color: var(--wp--preset--color--forest, #1f3d2b);
}

@media (prefers-reduced-motion: reduce) {
  .t-dropdown,
  .t-panel-slide,
  .t-stagger-line,
  .t-acc-item .t-acc-panel,
  .t-acc-chevron,
  .t-modal,
  .t-tilt-card,
  .t-tt,
  .t-tabs__pill,
  .t-tabs__tab,
  .t-badge,
  .t-toast,
  .t-reveal,
  .t-success-check,
  .t-success-check path {
    transition: none !important;
    animation: none !important;
  }
  /* Keep the end state visible when motion is suppressed */
  .t-stagger-line,
  .t-reveal,
  .t-success-check {
    opacity: 1;
    transform: none;
    filter: none;
  }
  .t-success-check path { stroke-dashoffset: 0; }
  .t-badge.is-shown,
  .t-toast.is-shown {
    opacity: 1;
    transform: none;
    filter: none;
  }
}