/* Selected CSS recipes from transitions.dev; see TRANSITIONS-LICENSE.txt.
 * https://github.com/Jakubantalik/transitions.dev/tree/main/skills/transitions-dev
 */

/* transitions.dev / 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-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"] .t-acc-chevron {
  transform: scaleY(-1);
}

/* transitions.dev / 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);
}

/* transitions.dev / 04-text-states-swap.md */
:root {
  --text-swap-dur: 150ms;
  --text-swap-translate-y: 4px;
  --text-swap-blur: 2px;
  --text-swap-ease: ease-in-out;
}

.t-text-swap {
  display: inline-block;
  transform: translateY(0);
  filter: blur(0);
  opacity: 1;
  transition:
    transform var(--text-swap-dur) var(--text-swap-ease),
    filter    var(--text-swap-dur) var(--text-swap-ease),
    opacity   var(--text-swap-dur) var(--text-swap-ease);
  will-change: transform, filter, opacity;
}
.t-text-swap.is-exit {
  transform: translateY(calc(var(--text-swap-translate-y) * -1));
  filter: blur(var(--text-swap-blur));
  opacity: 0;
}
.t-text-swap.is-enter-start {
  transform: translateY(var(--text-swap-translate-y));
  filter: blur(var(--text-swap-blur));
  opacity: 0;
  transition: none;
}

/* Integration with the existing page layout. */

.t-acc-panel, .t-acc-panel-inner { min-width: 0; min-height: 0; }
.t-acc[data-open="false"] > .t-acc-panel { grid-template-rows: 0fr; }
.t-acc[data-open="false"] > .t-acc-panel > .t-acc-panel-inner { opacity: 0; filter: blur(2px); }
.t-acc > summary .t-acc-chevron { transform: scaleY(1); }
.t-acc[data-open="true"] > summary .t-acc-chevron { transform: scaleY(-1); }
.t-acc .principle-content { animation: none; }
.t-acc > summary:focus-visible { outline: 2px solid #3273dc; outline-offset: -3px; }

.collapsible-item.motion-ready { opacity: 1; transform: none; transition: none; pointer-events: auto; will-change: auto; }
tr.collapsible-item.motion-ready { display: table-row; }
table.collapsible-item.motion-ready { display: table; }
.collapsible-item.motion-ready .motion-cell-content { box-sizing: border-box; }
.section-heading-button { appearance: none; border: 0; padding: 0; background: none; color: inherit; font: inherit; text-align: inherit; cursor: pointer; }
.section-heading-button:focus-visible { outline: 2px solid #1772d0; outline-offset: 5px; border-radius: 2px; }
.toggle-arrow { transition-duration: var(--acc-chevron); transition-timing-function: var(--acc-ease); }
.rush-name[aria-expanded] > .rush-short, .rush-name[aria-expanded] > .rush-full { visibility: hidden; }
.rush-display { grid-area: 1 / 1; }
#cv-popup-overlay[hidden] { display: none; }
#cv-popup-overlay.cv-popup-hidden { transition-duration: var(--modal-close-dur); }