/* Transitions.dev snippets; storefront tuning and Radix adapters follow. */

/* 05-menu-dropdown.md */
:root {
  --dropdown-open-dur: 250ms;
  --dropdown-close-dur: 150ms;
  --dropdown-pre-scale: 0.97;
  --dropdown-closing-scale: 0.99;
  --dropdown-ease: cubic-bezier(0.22, 1, 0.36, 1);
}


.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[data-origin="bottom-left"]   { transform-origin: bottom left; }
.t-dropdown[data-origin="bottom-center"] { transform-origin: bottom center; }
.t-dropdown[data-origin="bottom-right"]  { transform-origin: bottom right; }

.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);
}

@media (prefers-reduced-motion: reduce) {
  .t-dropdown { transition: none !important; }
}


/* 06-modal.md */
:root {
  --modal-open-dur: 250ms;
  --modal-close-dur: 150ms;
  --modal-scale: 0.96;
  --modal-scale-close: 0.96;
  --modal-ease: cubic-bezier(0.22, 1, 0.36, 1);
}


.t-modal {
  transform-origin: center;
  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);
  will-change: transform, opacity;
}
.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);
}

@media (prefers-reduced-motion: reduce) {
  .t-modal { transition: none !important; }
}


/* 09-icon-swap.md */
:root {
  --icon-swap-dur: 250ms;
  --icon-swap-blur: 2px;
  --icon-swap-start-scale: 0.25;
  --icon-swap-ease: ease-in-out;
}


.t-icon-swap {
  position: relative;
  display: inline-grid;
}
.t-icon-swap .t-icon {
  grid-area: 1 / 1;
  transition:
    opacity   var(--icon-swap-dur) var(--icon-swap-ease),
    filter    var(--icon-swap-dur) var(--icon-swap-ease),
    transform var(--icon-swap-dur) var(--icon-swap-ease);
  will-change: opacity, filter, transform;
}
.t-icon-swap[data-state="a"] .t-icon[data-icon="a"],
.t-icon-swap[data-state="b"] .t-icon[data-icon="b"] {
  opacity: 1;
  filter: blur(0);
  transform: scale(1);
}
.t-icon-swap[data-state="a"] .t-icon[data-icon="b"],
.t-icon-swap[data-state="b"] .t-icon[data-icon="a"] {
  opacity: 0;
  filter: blur(var(--icon-swap-blur));
  transform: scale(var(--icon-swap-start-scale));
}

@media (prefers-reduced-motion: reduce) {
  .t-icon-swap .t-icon { transition: none !important; }
}


/* 21-accordion.md */
:root {
  --acc-expand: 250ms;
  --acc-collapse: 250ms;
  --acc-chevron: 250ms;
  --acc-ease: cubic-bezier(0.22, 1, 0.36, 1);
}


/* grid-template-rows 0fr → 1fr gives a clean height animation
   with no JS measurement; the inner element clips overflow. */
.t-acc-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--acc-collapse) var(--acc-ease);
}
.t-acc[data-open="true"] > .t-acc-panel {
  grid-template-rows: 1fr;
  transition: grid-template-rows var(--acc-expand) var(--acc-ease);
}
.t-acc-panel-inner {
  overflow: hidden;
  opacity: 0;
  filter: blur(2px);
  transition:
    opacity var(--acc-collapse) var(--acc-ease),
    filter var(--acc-collapse) var(--acc-ease);
}
.t-acc[data-open="true"] > .t-acc-panel > .t-acc-panel-inner {
  opacity: 1;
  filter: blur(0);
  transition:
    opacity var(--acc-expand) var(--acc-ease),
    filter var(--acc-expand) var(--acc-ease);
}
/* Flip the chevron vertically to turn the "v" into a "^".
   scaleY(-1) about the centre passes through a flat line at
   the midpoint (same look as a `d:` path morph) but animates
   in every browser, unlike CSS `d:` morphing (Chromium only).
   The chevron path is symmetric about the 16x16 viewBox
   centre, so the flip lands exactly on the "^"; non-scaling
   -stroke keeps the stroke width constant through the flip. */
.t-acc-chevron {
  display: inline-flex;
  transform: scaleY(1);
  transform-origin: center;
  transition: transform var(--acc-chevron) var(--acc-ease);
}
.t-acc-chevron path { vector-effect: non-scaling-stroke; }
.t-acc[data-open="true"] > button .t-acc-chevron {
  transform: scaleY(-1);
}

@media (prefers-reduced-motion: reduce) {
  .t-acc-panel, .t-acc-panel-inner, .t-acc-chevron {
    transition: none !important;
  }
}


/* 10-success-check.md */
:root {
  --check-opacity-dur: 500ms;
  --check-rotate-dur: 500ms;
  --check-rotate-from: 80deg;
  --check-bob-dur: 500ms;
  --check-y-amount: 40px;
  --check-blur-dur: 500ms;
  --check-blur-from: 10px;
  --check-path-dur: 500ms;
  --check-path-delay: 80ms;
  --check-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --check-ease-opacity: cubic-bezier(0.22, 1, 0.36, 1);
  --check-ease-rotate: cubic-bezier(0.22, 1, 0.36, 1);
  --check-ease-bob: cubic-bezier(0.34, 1.35, 0.64, 1);
  --check-ease-path: cubic-bezier(0.22, 1, 0.36, 1);
}


/* Wrapper drives the appear animation; it doesn't own any
   sizing or color so you can drop in any icon. */
.t-success-check {
  display: inline-block;
  transform-origin: center;
  opacity: 0;
  will-change: transform, opacity, filter;
}
/* overflow: visible keeps the stroke from clipping while it
   draws; display: block kills the inline whitespace under SVGs. */
.t-success-check svg { display: block; overflow: visible; }
/* Stroke-draw setup. Replace 20 with the result of
   path.getTotalLength() for your path; round caps mean any
   sub-pixel overshoot is invisible. */
.t-success-check svg path {
  stroke-dasharray: 20;
  stroke-dashoffset: 20;
}

.t-success-check[data-state="in"] {
  animation:
    t-check-fade   var(--check-opacity-dur) var(--check-ease-opacity) forwards,
    t-check-rotate var(--check-rotate-dur)  var(--check-ease-rotate)  forwards,
    t-check-blur   var(--check-blur-dur)    var(--check-ease-out)     forwards,
    t-check-bob    var(--check-bob-dur)     var(--check-ease-bob)     forwards;
}
.t-success-check[data-state="in"] svg path {
  animation: t-check-draw var(--check-path-dur) var(--check-ease-path) var(--check-path-delay, 0ms) forwards;
}

@keyframes t-check-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes t-check-rotate {
  from { transform: rotate(var(--check-rotate-from)); }
  to   { transform: rotate(0deg); }
}
@keyframes t-check-blur {
  from { filter: blur(var(--check-blur-from)); }
  to   { filter: blur(0); }
}
@keyframes t-check-bob {
  from { translate: 0 var(--check-y-amount); }
  to   { translate: 0 0; }
}
@keyframes t-check-draw { to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) {
  .t-success-check { animation: none !important; opacity: 1; }
  .t-success-check svg path { animation: none !important; stroke-dashoffset: 0 !important; }
}


/* Sigafast: restrained feedback, no bounce and no continuous decoration. */
:root {
  --duration-quick: 150ms;
  --duration-fast: 250ms;
  --duration-slow: 400ms;
  --ease-smooth-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dropdown-open-dur: var(--duration-fast);
  --dropdown-close-dur: var(--duration-quick);
  --dropdown-pre-scale: 0.985;
  --dropdown-closing-scale: 0.99;
  --dropdown-ease: var(--ease-smooth-out);
  --modal-open-dur: var(--duration-fast);
  --modal-close-dur: var(--duration-quick);
  --modal-scale: 0.985;
  --modal-scale-close: 0.99;
  --modal-ease: var(--ease-smooth-out);
  --icon-swap-dur: var(--duration-quick);
  --icon-swap-blur: 0px;
  --icon-swap-start-scale: 0.95;
  --acc-expand: var(--duration-fast);
  --acc-collapse: var(--duration-fast);
  --acc-chevron: var(--duration-fast);
  --acc-ease: var(--ease-smooth-out);
  --check-opacity-dur: var(--duration-fast);
  --check-rotate-dur: var(--duration-fast);
  --check-rotate-from: 0deg;
  --check-bob-dur: var(--duration-fast);
  --check-y-amount: 0px;
  --check-blur-dur: var(--duration-fast);
  --check-blur-from: 0px;
  --check-path-dur: var(--duration-fast);
  --check-path-delay: 0ms;
  --check-ease-bob: var(--ease-smooth-out);
}

/* Radix Presence waits for animationend before unmounting. Individual scale
   preserves Tailwind's centering translate and Popper's positioning transform. */
[data-motion="customer"].t-radix {
  transform: none;
  opacity: 1;
  pointer-events: auto;
  transition: none;
  will-change: auto;
}
[data-motion="customer"].t-dropdown {
  transform-origin: var(--radix-dropdown-menu-content-transform-origin, var(--radix-hover-card-content-transform-origin, var(--radix-select-content-transform-origin, top center)));
}
[data-motion="customer"].t-radix[data-state="open"] {
  animation: t-surface-in var(--duration-fast) var(--ease-smooth-out);
}
[data-motion="customer"].t-radix[data-state="closed"] {
  animation: t-surface-out var(--duration-quick) var(--ease-smooth-out);
  pointer-events: none;
}
[data-motion="customer"].t-overlay[data-state="open"] { animation: t-fade-in var(--duration-fast) ease-out; }
[data-motion="customer"].t-overlay[data-state="closed"] { animation: t-fade-out var(--duration-quick) ease-out; }
[data-motion="customer"].t-overlay { background: rgb(0 0 0 / 0.55); }
[data-motion="customer"].t-modal { width: calc(100vw - 2rem); max-height: calc(100dvh - 2rem); overflow-y: auto; border-radius: 12px; }
[data-motion="customer"].t-modal button[aria-label],
[data-motion="customer"] [role="menuitem"],
[data-motion="customer"] [role="option"] { min-height: 44px; }
[data-motion="customer"].t-modal > button:last-child { min-width: 44px; min-height: 44px; top: 4px; right: 4px; display: inline-flex; align-items: center; justify-content: center; }
@keyframes t-surface-in { from { opacity: 0; scale: 0.985; } to { opacity: 1; scale: 1; } }
@keyframes t-surface-out { from { opacity: 1; scale: 1; } to { opacity: 0; scale: 0.99; } }
@keyframes t-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes t-fade-out { from { opacity: 1; } to { opacity: 0; } }

/* Closed panels remain measurable for grid interpolation, but never focusable. */
.t-acc-panel-inner { min-height: 0; filter: none; }
.t-acc[data-open="false"] > .t-acc-panel { visibility: hidden; transition: grid-template-rows var(--acc-collapse) var(--acc-ease), visibility 0s var(--acc-collapse); }
.t-acc[data-open="true"] > .t-acc-panel { visibility: visible; }
.t-acc .t-acc-panel-inner { padding: 0; }
[data-motion="customer"].t-radix-accordion[data-state="open"] { animation: t-accordion-in var(--acc-expand) var(--acc-ease); }
[data-motion="customer"].t-radix-accordion[data-state="closed"] { animation: t-accordion-out var(--acc-collapse) var(--acc-ease); }
@keyframes t-accordion-in { from { height: 0; opacity: 0; } to { height: var(--radix-accordion-content-height); opacity: 1; } }
@keyframes t-accordion-out { from { height: var(--radix-accordion-content-height); opacity: 1; } to { height: 0; opacity: 0; } }

.t-selection { position: relative; isolation: isolate; }
.t-selection > [data-selection-indicator] {
  position: absolute; inset: 0 auto auto 0; pointer-events: none; z-index: -1;
  background: hsl(var(--primary) / 0.08); border: 1px solid hsl(var(--primary) / 0.45); border-radius: 999px;
  transition: transform var(--duration-fast) var(--ease-smooth-out), width var(--duration-fast) var(--ease-smooth-out), height var(--duration-fast) var(--ease-smooth-out);
}
.t-selection[data-variant="line"] > [data-selection-indicator] { border: 0; background: hsl(var(--primary)); border-radius: 1px; }
.t-selection button { min-height: 44px; }
.t-selection[data-variant="line"] button[aria-pressed="true"] { border-bottom-color: transparent; }
.t-selection[data-variant="pill"] button[aria-pressed="true"] { background: transparent; border-color: transparent; }
.t-selection[data-variant="pill"] button > svg:last-child { flex-shrink: 0; }

.t-value { display: inline-block; }
.t-value.is-animating { animation: t-value-change var(--duration-fast) var(--ease-smooth-out); }
@keyframes t-value-change { from { opacity: 0.55; translate: 0 2px; } to { opacity: 1; translate: 0 0; } }
.t-content-ready { animation: t-fade-in var(--duration-fast) ease-out; }
.t-customer-ui [role="alert"] { animation: t-fade-in var(--duration-quick) ease-out; }
.t-customer-ui :is(button, a, input, textarea, select, [role="radio"], [role="tab"]) {
  transition-property: color, background-color, border-color, opacity, box-shadow;
  transition-duration: var(--duration-quick);
  transition-timing-function: var(--ease-smooth-out);
}
.t-customer-ui :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), textarea, select) { caret-color: hsl(var(--primary)); }
.t-customer-ui :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select) { min-height: 44px; }
/* Radix select triggers match the storefront Input (44px, rounded-xl, card fill)
   so selects no longer sit shorter/squarer beside text fields in the same form. */
.t-customer-ui button[role="combobox"] { min-height: 44px; border-radius: 0.75rem; border-color: hsl(var(--border)); background-color: hsl(var(--card)); box-shadow: none; }
.t-customer-ui ::selection { background: hsl(var(--primary) / 0.2); color: hsl(var(--foreground)); }
.t-customer-ui .prose { max-width: 72ch; }
.t-customer-ui .prose a { text-underline-offset: 3px; }
.t-customer-ui .card-hover { transition: border-color var(--duration-quick) ease-out, background-color var(--duration-quick) ease-out; }
.t-customer-ui .card-hover:hover { transform: none; box-shadow: none; }
.t-customer-ui .card-hover:focus-visible { border-color: hsl(var(--primary)); }
.t-customer-ui [aria-pressed="true"], .t-customer-ui [aria-selected="true"] { scroll-margin-inline: 16px; }
.t-package-grid { min-height: 0; }
.t-package-grid[data-count="1"] { grid-template-columns: minmax(0, 1fr); max-width: 420px; margin-inline: auto; }
.t-package-grid[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 720px; margin-inline: auto; }
.t-package-grid[data-count="3"] { max-width: 900px; margin-inline: auto; }
@media (min-width: 768px) { .t-package-grid[data-count="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

[data-motion="customer"].t-toast { transition: transform var(--duration-fast) var(--ease-smooth-out); }
[data-motion="customer"].t-toast[data-state="open"] { animation: t-toast-in var(--duration-fast) var(--ease-smooth-out); }
[data-motion="customer"].t-toast[data-state="closed"] { animation: t-fade-out var(--duration-quick) ease-out; }
[data-motion="customer"].t-toast[data-swipe="move"] { animation: none; transition: none; }
[data-motion="customer"].t-toast[data-swipe="end"] { animation: t-fade-out var(--duration-quick) ease-out; }
[data-motion="customer"].t-toast button { min-width: 44px; min-height: 44px; opacity: 1; }
@keyframes t-toast-in { from { opacity: 0; translate: 0 4px; } to { opacity: 1; translate: 0 0; } }

@media (prefers-reduced-motion: reduce) {
  [data-motion="customer"].t-radix,
  [data-motion="customer"].t-overlay,
  [data-motion="customer"].t-radix-accordion,
  [data-motion="customer"].t-toast,
  .t-value.is-animating, .t-content-ready, .t-customer-ui [role="alert"] { animation: none !important; }
  .t-selection > [data-selection-indicator], .t-acc[data-open] > .t-acc-panel { transition: none !important; }
  .t-icon-swap .t-icon, .t-acc-panel-inner { filter: none !important; transform: none !important; }
  .t-customer-ui :is(button, a, input, textarea, select) { transition-duration: 0s; }
}

/* Segmented tool/target controls reuse their native tab roles and key handling. */
.t-tool-tabs { display: inline-block; max-width: 100%; }
.t-tool-tabs > [role="tablist"] { background: transparent; }
.t-tool-tabs [role="tab"][data-state="active"],
.t-selection [role="tab"][aria-selected="true"] { background: transparent; box-shadow: none; }
.t-selection [role="tab"] { min-height: 44px; }
.t-customer-ui button:has(> .t-acc-chevron) { transition-property: color, background-color; }
.t-customer-ui [data-motion="customer"].t-radix-accordion { line-height: 1.65; }

/* One/two available platforms need one row, including on a narrow viewport. */
.t-selection[data-platform-count="1"], .t-selection[data-platform-count="2"] { min-height: 44px; }
.t-selection[data-platform-count="1"] { display: flex; justify-content: center; }
.t-selection[data-platform-count="1"] > button { width: auto; }