/* ===========================
   TABS
   =========================== */

/*** TABS (CONTAINER) ***/
.boows_tab_container {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
  font-family: var(--boows-font, 'Outfit', sans-serif);
  --boows-tabbar-inner-bg: var(--boows-col-primary);
  --boows-tabbar-inner-border: 0;
  --boows-tabbar-highlight-bg: #fff;
  --boows-tabbar-highlight-border: 0;
  --boows-tabbar-tab-color: rgba(255, 255, 255, 0.85);
  --boows-tabbar-tab-hover-bg: rgba(255, 255, 255, 0.10);
  --boows-tabbar-tab-hover-color: #fff;
  --boows-tabbar-active-color: var(--boows-col-text);
  --boows-tabbar-scroll-bg: rgba(var(--boows-col-primary-rgb, 8, 162, 154), 0.18);
  --boows-tabbar-scroll-bg-hover: rgba(var(--boows-col-primary-rgb, 8, 162, 154), 0.28);
  --boows-tabbar-scroll-color: #fff;
  --boows-tabbar-scroll-border: rgba(255, 255, 255, 0.28);
  --boows-tabbar-height: 56px;
  --boows-tabbar-inner-height: 48px;
  --boows-tabbar-item-height: 42px;
  --boows-tabbar-item-font-size: var(--boows-font-size-sm, 0.875rem);
  --boows-tabbar-inner-gap: 6px;
  --boows-tabbar-inner-pad-x: 3px;
  --boows-tabbar-item-pad-x: 14px;
  --boows-tabbar-highlight-radius: var(--boows-button-radius, 4px);
  --boows-tabbar-scroller-indicator-color: var(--boows-col-primary, #08a29a);
  --boows-tabbar-count-bg: rgba(255, 255, 255, 0.22);
  --boows-tabbar-count-color: #fff;
  --boows-tabbar-count-active-bg: rgba(var(--boows-col-primary-rgb, 8, 162, 154), 0.16);
  --boows-tabbar-count-active-color: var(--boows-col-primary, #08a29a);
}

.boows_tab_container.boows-tab-sticky {
  position: -webkit-sticky;
  position: sticky;
  top: var(--boows-tab-sticky-top, 0);
  z-index: 25;
  overflow: visible;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.boows-tab-sticky-placeholder {
  display: block;
  width: 100%;
  height: 0;
  visibility: hidden;
  pointer-events: none;
}

.boows_tab_container.boows-tab-sticky.boows-tab-sticky-fallback-active {
  position: fixed !important;
}

/* Scroll buttons */
.boows_tab_container .boows_scroll_button {
  background: var(--boows-tabbar-scroll-bg);
  color: var(--boows-tabbar-scroll-color);
}

.boows_tab_container .boows_scroll_button:hover {
  background: var(--boows-tabbar-scroll-bg-hover);
}

.boows_scroll_button {
  border: 1px solid var(--boows-tabbar-scroll-border);
  cursor: pointer;
  height: 34px;
  width: 34px;
  display: none;
  align-items: center;
  justify-content: center;
  position: absolute;
  z-index: 6;
  user-select: none;
  border-radius: 10px;
  transition: transform 0.18s ease, background 0.18s ease, opacity 0.18s ease;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.14);
}

.boows_scroll_button:active {
  transform: scale(0.96);
}

.boows_scroll_button.left {
  left: 8px;
}

.boows_scroll_button.right {
  right: 8px;
}

/* Tab bar (viewport) - no shadow, higher */
.boows-page .tab_bar,
.boows_tab_container .tab_bar {
  height: var(--boows-tabbar-height);
  display: flex;
  align-items: center;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  flex-grow: 1;
  scrollbar-width: none;
  -ms-overflow-style: none;
  box-sizing: border-box;
  scroll-behavior: smooth;

  background: transparent;
  border: 0;
  box-shadow: none;

  position: relative;
  /*padding: 0 10px;*/
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.boows-page .tab_bar::-webkit-scrollbar,
.boows_tab_container .tab_bar::-webkit-scrollbar {
  display: none;
}

/* Inner bar (fit-content) */
.tab_bar_inner {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--boows-tabbar-inner-gap);

  height: var(--boows-tabbar-inner-height);
  padding: 0 var(--boows-tabbar-inner-pad-x);
  width: fit-content;
  flex: 0 0 auto;

  background: var(--boows-tabbar-inner-bg);
  border: var(--boows-tabbar-inner-border);
  box-shadow: none;

  border-radius: calc(var(--boows-radius, 4px) + 2px);
  padding-right: 4px;
}

/* Active sliding pill */
.tab_bar_highlight {
  position: absolute;
  top: 50%;
  left: 0;
  height: var(--boows-tabbar-item-height);
  width: 0;
  background: var(--boows-tabbar-highlight-bg);
  border: var(--boows-tabbar-highlight-border);
  box-shadow: none;
  border-radius: var(--boows-tabbar-highlight-radius);
  z-index: 1;
  transition:
    left 260ms cubic-bezier(0.2, 0.9, 0.2, 1),
    width 260ms cubic-bezier(0.2, 0.9, 0.2, 1),
    opacity 160ms ease;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-50%);
  box-sizing: border-box;
}

/* Tab items */
.boows-page .tab_item,
.boows_tab_container .tab_item {
  font-family: var(--boows-font, 'Outfit', sans-serif);
  font-size: var(--boows-tabbar-item-font-size);

  padding: 0 var(--boows-tabbar-item-pad-x);
  margin: 0;
  height: var(--boows-tabbar-item-height);
  line-height: var(--boows-tabbar-item-height);
  display: inline-flex;
  align-items: center;
  gap: 8px;

  background: transparent;
  border: 0;
  border-radius: var(--boows-button-radius, 4px);

  color: var(--boows-tabbar-tab-color);
  cursor: pointer;
  user-select: none;
  position: relative;
  min-width: max-content;
  z-index: 2;

  transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.boows_tab_container .tab_item .tab_item_label {
  display: inline-block;
  white-space: nowrap;
}

.boows_tab_container .tab_item .tab_item_count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  box-sizing: border-box;
  line-height: 1;
  font-size: 0.68rem;
  font-weight: 700;
  white-space: nowrap;
  background: var(--boows-tabbar-count-bg);
  color: var(--boows-tabbar-count-color);
  pointer-events: none;
}

.boows-page .tab_item i.material-icons,
.boows_tab_container .tab_item i.material-icons,
.boows-page .tab_item i.material-symbols-outlined,
.boows_tab_container .tab_item i.material-symbols-outlined {
  font-size: 18px;
  line-height: 18px;
  opacity: 0.95;
  font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 20;
}

.boows-page .tab_item:hover,
.boows_tab_container .tab_item:hover {
  background: var(--boows-tabbar-tab-hover-bg);
  color: var(--boows-tabbar-tab-hover-color);
}

.boows-page .tab_item:active,
.boows_tab_container .tab_item:active {
  transform: scale(0.98);
}

/* Active tab text (pill is highlight) */
.boows-page .tab_bar .tab_item.active,
.boows_tab_container .tab_bar .tab_item.active {
  color: var(--boows-tabbar-active-color);
}

.boows_tab_container .tab_bar .tab_item.active .tab_item_count {
  background: var(--boows-tabbar-count-active-bg);
  color: var(--boows-tabbar-count-active-color);
}

/* -------------------------------------------
   Content borders / separation
   ------------------------------------------- */
.tab_content {
  width: 100%;
}

.tab_item_content {
  width: 100%;
  min-height: var(--boows-whitespace-l5);
  position: relative;
  box-sizing: border-box;
  display: none;

  background: #fff;
  border: 1px solid var(--boows-col-text-10);
  border-radius: var(--boows-radius-card, 8px);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.16);

  margin-top: var(--boows-whitespace-l3);
  padding: var(--boows-whitespace-l5);
  z-index: 1;

  opacity: 0;
  transform: translateY(6px);
  transition: opacity 220ms ease, transform 220ms ease;
}

.tab_content .tab_item_content.active {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

/* Dashboard variant */
.boows-page .boows-dashboard-box .tab_item_content {
  padding: 20px 0;
  box-shadow: none;
  max-width: 100%;
  border: 0;
}

/* -------------------------------------------
   Hierarchy variants: primary / secondary / tertiary
   ------------------------------------------- */
.boows_tab_container.boows-tab-style-primary {
  --boows-tabbar-inner-bg: var(--boows-col-primary);
  --boows-tabbar-inner-border: 0;
  --boows-tabbar-highlight-bg: #fff;
  --boows-tabbar-highlight-border: 0;
  --boows-tabbar-tab-color: rgba(255, 255, 255, 0.85);
  --boows-tabbar-tab-hover-bg: rgba(255, 255, 255, 0.10);
  --boows-tabbar-tab-hover-color: #fff;
  --boows-tabbar-active-color: var(--boows-col-text);
  --boows-tabbar-scroll-bg: rgba(var(--boows-col-primary-rgb, 8, 162, 154), 0.18);
  --boows-tabbar-scroll-bg-hover: rgba(var(--boows-col-primary-rgb, 8, 162, 154), 0.28);
  --boows-tabbar-scroll-color: #fff;
}

.boows_tab_container.boows-tab-style-secondary {
  --boows-tabbar-inner-bg: linear-gradient(180deg, var(--boows-col-text-5, #f7f9fa) 0%, var(--boows-col-text-10, #edf2f4) 100%);
  --boows-tabbar-inner-border: 1px solid var(--boows-col-text-20, #d6dde1);
  --boows-tabbar-highlight-bg: rgba(var(--boows-col-primary-rgb, 8, 162, 154), 0.14);
  --boows-tabbar-highlight-border: 1px solid rgba(var(--boows-col-primary-rgb, 8, 162, 154), 0.28);
  --boows-tabbar-tab-color: var(--boows-col-text-70, #48606c);
  --boows-tabbar-tab-hover-bg: rgba(var(--boows-col-primary-rgb, 8, 162, 154), 0.10);
  --boows-tabbar-tab-hover-color: var(--boows-col-text, #061a24);
  --boows-tabbar-active-color: var(--boows-col-primary, #08a29a);
  --boows-tabbar-scroll-bg: rgba(var(--boows-col-primary-rgb, 8, 162, 154), 0.16);
  --boows-tabbar-scroll-bg-hover: rgba(var(--boows-col-primary-rgb, 8, 162, 154), 0.24);
  --boows-tabbar-scroll-color: var(--boows-col-primary, #08a29a);
  --boows-tabbar-inner-height: 46px;
  --boows-tabbar-item-height: 40px;
  --boows-tabbar-item-pad-x: 13px;
  --boows-tabbar-count-bg: rgba(var(--boows-col-text-rgb, 6, 26, 36), 0.12);
  --boows-tabbar-count-color: var(--boows-col-text-80, #31414a);
  --boows-tabbar-count-active-bg: rgba(var(--boows-col-primary-rgb, 8, 162, 154), 0.16);
  --boows-tabbar-count-active-color: var(--boows-col-primary, #08a29a);
}

.boows_tab_container.boows-tab-style-tertiary {
  --boows-tabbar-inner-bg: transparent;
  --boows-tabbar-inner-border: 1px solid rgba(var(--boows-col-text-rgb, 6, 26, 36), 0.16);
  --boows-tabbar-highlight-bg: rgba(var(--boows-col-primary-rgb, 8, 162, 154), 0.12);
  --boows-tabbar-highlight-border: 0;
  --boows-tabbar-tab-color: var(--boows-col-text-60, #5f6d76);
  --boows-tabbar-tab-hover-bg: rgba(var(--boows-col-primary-rgb, 8, 162, 154), 0.08);
  --boows-tabbar-tab-hover-color: var(--boows-col-text, #061a24);
  --boows-tabbar-active-color: var(--boows-col-primary, #08a29a);
  --boows-tabbar-scroll-bg: rgba(var(--boows-col-text-rgb, 6, 26, 36), 0.10);
  --boows-tabbar-scroll-bg-hover: rgba(var(--boows-col-text-rgb, 6, 26, 36), 0.18);
  --boows-tabbar-scroll-color: var(--boows-col-text-80, #31414a);
  --boows-tabbar-height: 48px;
  --boows-tabbar-inner-height: 40px;
  --boows-tabbar-item-height: 34px;
  --boows-tabbar-item-font-size: 0.82rem;
  --boows-tabbar-inner-gap: 4px;
  --boows-tabbar-inner-pad-x: 2px;
  --boows-tabbar-item-pad-x: 10px;
  --boows-tabbar-count-bg: rgba(var(--boows-col-text-rgb, 6, 26, 36), 0.12);
  --boows-tabbar-count-color: var(--boows-col-text-80, #31414a);
  --boows-tabbar-count-active-bg: rgba(var(--boows-col-primary-rgb, 8, 162, 154), 0.16);
  --boows-tabbar-count-active-color: var(--boows-col-primary, #08a29a);
}

.boows_tab_container.boows-tab-style-secondary .tab_item {
  font-weight: 600;
}

/* -------------------------------------------
   Layout variants
   ------------------------------------------- */
.boows_tab_container.boows-tab-layout-full-width .tab_bar {
  overflow-x: hidden;
}

.boows_tab_container.boows-tab-layout-full-width .tab_bar_inner {
  display: flex;
  width: 100%;
}

.boows_tab_container.boows-tab-layout-full-width .tab_item {
  flex: 1 1 0;
  min-width: 0;
  justify-content: center;
  overflow: hidden;
  text-overflow: ellipsis;
}

.boows_tab_container.boows-tab-layout-full-width .boows_scroll_button {
  display: none !important;
}

.boows_tab_container.boows-tab-layout-scroller-top .tab_bar {
  padding-top: 10px;
}

.boows_tab_container.boows-tab-layout-scroller-top,
.boows_tab_container.boows-tab-layout-scroller-bottom {
  --boows-tabbar-inner-bg: var(--boows-col-primary-40);
  --boows-tabbar-scroller-indicator-color: var(--boows-col-primary);
  --boows-tabbar-scroll-bg: rgba(0, 0, 0, 0.22);
  --boows-tabbar-scroll-bg-hover: rgba(0, 0, 0, 0.34);
  --boows-tabbar-scroll-color: #fff;
  --boows-tabbar-scroll-border: rgba(255, 255, 255, 0.26);
}

.boows_tab_container.boows-tab-layout-scroller-top {
  padding-top: 2px;
}

.boows_tab_container.boows-tab-layout-scroller-top .boows_scroll_button {
  top: 0;
}

.boows_tab_container.boows-tab-layout-scroller-top .tab_bar_highlight,
.boows_tab_container.boows-tab-layout-scroller-bottom .tab_bar_highlight {
  top: 0;
  height: 3px;
  border: 0;
  border-radius: 999px;
  background: var(--boows-tabbar-scroller-indicator-color);
  transform: none;
}

.boows_tab_container.boows-tab-layout-scroller-bottom {
  margin-top: 0;
  padding-bottom: 2px;
}

.boows_tab_container.boows-tab-layout-scroller-bottom .tab_bar {
  padding-bottom: 10px;
}

.boows_tab_container.boows-tab-layout-scroller-bottom .boows_scroll_button {
  top: auto;
  bottom: 0;
}

.boows_tab_container.boows-tab-layout-scroller-bottom .tab_bar_highlight {
  top: auto;
  bottom: 0;
}

.boows_tab_container.boows-tab-layout-classic .tab_bar,
.boows_tab_container.boows-tab-layout-klassik .tab_bar,
.boows_tab_container.boows-tab-layout-old-school .tab_bar {
  height: auto;
}

.boows_tab_container.boows-tab-layout-classic .tab_bar_inner,
.boows_tab_container.boows-tab-layout-klassik .tab_bar_inner,
.boows_tab_container.boows-tab-layout-old-school .tab_bar_inner {
  width: 100%;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.boows_tab_container.boows-tab-layout-classic .tab_bar_highlight,
.boows_tab_container.boows-tab-layout-klassik .tab_bar_highlight,
.boows_tab_container.boows-tab-layout-old-school .tab_bar_highlight {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.boows_tab_container.boows-tab-layout-classic .tab_item,
.boows_tab_container.boows-tab-layout-klassik .tab_item,
.boows_tab_container.boows-tab-layout-old-school .tab_item {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.boows_tab_container.boows-tab-layout-classic .tab_bar .tab_item.active,
.boows_tab_container.boows-tab-layout-klassik .tab_bar .tab_item.active,
.boows_tab_container.boows-tab-layout-old-school .tab_bar .tab_item.active {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.boows_tab_container.boows-tab-layout-classic .tab_content .tab_item_content,
.boows_tab_container.boows-tab-layout-klassik .tab_content .tab_item_content,
.boows_tab_container.boows-tab-layout-old-school .tab_content .tab_item_content {
  margin-top: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.boows_tab_container.boows-tab-layout-icon-active-label {
  --boows-tabbar-inner-bg: linear-gradient(90deg, var(--boows-col-primary-80, var(--boows-col-primary)) 0%, var(--boows-col-primary, #08a29a) 100%);
  --boows-tabbar-inner-border: 0;
  --boows-tabbar-tab-color: rgba(255, 255, 255, 0.82);
  --boows-tabbar-tab-hover-bg: rgba(255, 255, 255, 0.12);
  --boows-tabbar-tab-hover-color: #fff;
  --boows-tabbar-active-color: var(--boows-col-primary, #08a29a);
  --boows-tabbar-height: 58px;
  --boows-tabbar-inner-height: 50px;
  --boows-tabbar-item-height: 44px;
  --boows-tabbar-inner-pad-x: 3px;
  --boows-tabbar-item-pad-x: 12px;
  --boows-tabbar-icon-active-label-radius: var(--boows-border-radius-button, 6px);
}

.boows_tab_container.boows-tab-layout-icon-active-label .tab_bar_highlight {
  display: none;
}

.boows_tab_container.boows-tab-layout-icon-active-label .tab_item {
  min-width: 44px;
  width: 44px;
  padding: 0;
  gap: 0;
  justify-content: center;
  border-radius: var(--boows-tabbar-icon-active-label-radius);
  transition: background 240ms ease, color 240ms ease, width 240ms ease, padding 240ms ease;
}

.boows_tab_container.boows-tab-layout-icon-active-label .tab_item .tab_item_label {
  max-width: 0;
  opacity: 0;
  margin-left: 0;
  overflow: hidden;
  transform: translateX(-8px);
  transition: max-width 260ms ease, opacity 220ms ease, margin-left 220ms ease, transform 260ms ease;
}

.boows_tab_container.boows-tab-layout-icon-active-label .tab_item .tab_item_count,
.boows_tab_container.boows-tab-layout-active-height .tab_item .tab_item_count {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  font-size: 0.6rem;
}

.boows_tab_container.boows-tab-layout-icon-active-label .tab_item.active {
  width: auto;
  background: var(--boows-col-primary-20, #e6f6f5);
  color: var(--boows-col-primary, #08a29a);
  padding: 0 18px;
  justify-content: flex-start;
  box-shadow: 0 10px 22px rgba(var(--boows-col-primary-rgb, 8, 162, 154), 0.28);
}

.boows_tab_container.boows-tab-layout-icon-active-label .tab_item.active .tab_item_label {
  max-width: 180px;
  opacity: 1;
  margin-left: 8px;
  transform: translateX(0);
}

.boows_tab_container.boows-tab-layout-active-height {
  --boows-tabbar-inner-bg: linear-gradient(90deg, var(--boows-col-primary-80, var(--boows-col-primary)) 0%, var(--boows-col-primary, #08a29a) 100%);
  --boows-tabbar-inner-border: 0;
  --boows-tabbar-tab-color: rgba(255, 255, 255, 0.9);
  --boows-tabbar-tab-hover-bg: rgba(255, 255, 255, 0.12);
  --boows-tabbar-tab-hover-color: #fff;
  --boows-tabbar-active-color: var(--boows-col-primary, #08a29a);
  --boows-tabbar-scroll-bg: rgba(255, 255, 255, 0.14);
  --boows-tabbar-scroll-bg-hover: rgba(255, 255, 255, 0.24);
  --boows-tabbar-scroll-color: #fff;
  --boows-tabbar-scroll-border: rgba(255, 255, 255, 0.28);
  --boows-tabbar-height: 82px;
  --boows-tabbar-inner-height: 64px;
  --boows-tabbar-item-height: 50px;
  --boows-tabbar-inner-pad-x: 10px;
}

.boows_tab_container.boows-tab-layout-active-height .tab_bar {
  overflow-y: visible;
  padding-top: 16px;
}

.boows_tab_container.boows-tab-layout-active-height .tab_bar_inner {
  width: 100%;
  border-radius: 18px;
  overflow: visible;
}

.boows_tab_container.boows-tab-layout-active-height .tab_bar_highlight {
  display: none;
}

.boows_tab_container.boows-tab-layout-active-height .tab_item {
  min-width: 56px;
  justify-content: center;
  gap: 0;
  transition: transform 320ms cubic-bezier(0.2, 0.88, 0.26, 1.18), background 220ms ease, box-shadow 260ms ease, color 220ms ease, width 260ms ease, padding 260ms ease;
}

.boows_tab_container.boows-tab-layout-active-height .tab_item .tab_item_label {
  display: none;
}

.boows_tab_container.boows-tab-layout-active-height .tab_item i {
  transition: transform 260ms ease;
}

.boows_tab_container.boows-tab-layout-active-height .tab_item.active {
  height: 56px;
  line-height: 56px;
  border-radius: 999px;
  transform: translateY(-16px);
  background: var(--boows-col-primary-20, #e6f6f5);
  color: var(--boows-col-primary, #08a29a);
  box-shadow: 0 12px 28px rgba(var(--boows-col-primary-rgb, 8, 162, 154), 0.38);
}

.boows_tab_container.boows-tab-layout-active-height .tab_item.active .tab_item_count {
  top: 6px;
}

.boows_tab_container.boows-tab-layout-active-height .tab_item.active i {
  transform: scale(1.08);
}

body.boows-rounded .boows_tab_container.boows-tab-layout-icon-active-label {
  --boows-tabbar-icon-active-label-radius: var(--boows-border-radius-button, 14px);
}

body.boows-pill .boows_tab_container.boows-tab-layout-icon-active-label {
  --boows-tabbar-icon-active-label-radius: 999px;
}

/* -------------------------------------------
   Style bindings: default / rounded / pill
   ------------------------------------------- */

.boows-rounded .tab_bar_inner {
  border-radius: calc(var(--boows-radius, 8px) + 6px);
}

.boows-pill .tab_bar_inner {
  border-radius: 999px;
}

.boows-pill .tab_bar_highlight,
.boows-pill .tab_item {
  border-radius: 999px;
}

/* -------------------------------------------
   View Transition styling (tabpanel swap)
   ------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(boows-tab-panel),
  ::view-transition-new(boows-tab-panel) {
    animation-duration: 220ms;
    animation-timing-function: ease;
  }

  ::view-transition-old(boows-tab-panel) {
    animation-name: boowsTabOut;
  }

  ::view-transition-new(boows-tab-panel) {
    animation-name: boowsTabIn;
  }

  @keyframes boowsTabOut {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(6px); }
  }

  @keyframes boowsTabIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
  }
}