:root {
  --motion-enter-distance: 16px;
  --motion-enter-duration: 0.62s;
  --motion-enter-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --motion-enter-stagger-step: 0.05s;
  --brand-hover-accent: #9aa8ff;
  --brand-hover-spark: #f0c777;
  --brand-hover-ease: cubic-bezier(0.2, 0.78, 0.22, 1);
  --brand-hover-spring: cubic-bezier(0.19, 1, 0.22, 1);
  --button-sheen-scale: 1.12;
  --button-sheen-icon-scale: 1.2;
  --button-sheen-duration: 0.36s;
  --button-sheen-sweep-duration: 0.62s;
  --button-sheen-ease: cubic-bezier(0.2, 0.8, 0.24, 1);
}

/* Default hidden state before observer reveals elements */
[data-enter] {
  opacity: 0;
  transform: translateY(var(--motion-enter-distance)) scale(0.985);
  filter: blur(6px);
  transition:
    opacity var(--motion-enter-duration) var(--motion-enter-ease),
    transform var(--motion-enter-duration) var(--motion-enter-ease),
    filter var(--motion-enter-duration) var(--motion-enter-ease);
  transition-delay: calc(var(--enter-order, 0) * var(--motion-enter-stagger-step));
  will-change: opacity, transform, filter;
}

/* Visible state */
[data-enter].is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

/* Direction variants */
[data-enter="left"] {
  transform: translateX(calc(-1 * var(--motion-enter-distance))) scale(0.985);
}

[data-enter="right"] {
  transform: translateX(var(--motion-enter-distance)) scale(0.985);
}

[data-enter="zoom"] {
  transform: scale(0.965);
}

[data-enter="hero"] {
  transform: translateY(22px) scale(0.98);
}

[data-enter="soft"] {
  filter: blur(3px);
}

/* Spark Mark hover for the top-left brand entry. */
.brand-hover {
  position: relative;
  isolation: isolate;
  overflow: visible;
  transform-origin: 20px 50%;
}

.brand-hover__mark {
  position: relative;
  display: grid;
  flex: none;
  place-items: center;
  width: max-content;
  height: max-content;
  border-radius: 12px;
  transform-origin: 50% 50%;
  transition:
    transform 0.38s var(--brand-hover-spring),
    filter 0.32s var(--brand-hover-ease);
  will-change: transform, filter;
}

.brand-hover__mark::before,
.brand-hover__mark::after {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  content: "";
  opacity: 0;
  pointer-events: none;
  transform: scale(0.32);
  transition:
    transform 0.36s var(--brand-hover-spring),
    opacity 0.28s var(--brand-hover-ease);
}

.brand-hover__mark::before {
  top: -2px;
  right: -1px;
  background: var(--brand-hover-spark);
  box-shadow: 0 0 12px var(--brand-hover-spark);
}

.brand-hover__mark::after {
  left: -1px;
  bottom: -1px;
  background: var(--brand-hover-accent);
  box-shadow: 0 0 12px var(--brand-hover-accent);
}

.brand-hover__mark img,
img.brand-hover__mark,
.brand-hover__mark svg {
  transition: transform 0.38s var(--brand-hover-spring);
  will-change: transform;
}

.brand-hover__text {
  position: relative;
  z-index: 1;
  display: inline-block;
  transform-origin: left center;
  transition:
    transform 0.36s var(--brand-hover-spring),
    text-shadow 0.34s var(--brand-hover-ease),
    letter-spacing 0.34s var(--brand-hover-ease);
  will-change: transform;
}

.brand-hover:hover .brand-hover__mark,
.brand-hover:focus-visible .brand-hover__mark {
  transform: rotate(-8deg) scale(1.16);
  filter: drop-shadow(0 0 13px rgba(154, 168, 255, 0.36));
}

.brand-hover:hover .brand-hover__mark img,
.brand-hover:hover img.brand-hover__mark,
.brand-hover:hover .brand-hover__mark svg,
.brand-hover:focus-visible .brand-hover__mark img,
.brand-hover:focus-visible img.brand-hover__mark,
.brand-hover:focus-visible .brand-hover__mark svg {
  transform: scale(1.02);
}

.brand-hover:hover .brand-hover__text,
.brand-hover:focus-visible .brand-hover__text {
  transform: translateX(2px) scale(1.08);
  text-shadow: 0 0 18px rgba(154, 168, 255, 0.28);
}

.brand-hover:hover .brand-hover__mark::before,
.brand-hover:hover .brand-hover__mark::after,
.brand-hover:focus-visible .brand-hover__mark::before,
.brand-hover:focus-visible .brand-hover__mark::after {
  opacity: 1;
  transform: scale(1);
}

/* Universal Sheen Pass button hover. JS wraps button contents so the outer box stays stable. */
.motion-button {
  position: relative;
  align-items: center;
  justify-content: center;
  isolation: isolate;
  overflow: hidden;
}

.motion-button__sheen {
  position: absolute;
  inset: -1px;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(
    105deg,
    transparent 0%,
    rgba(255, 255, 255, 0.06) 30%,
    rgba(255, 255, 255, 0.38) 48%,
    rgba(255, 255, 255, 0.1) 64%,
    transparent 100%
  );
  mix-blend-mode: screen;
  transform: translateX(-125%) skewX(-12deg);
  transition:
    opacity 0.18s ease,
    transform var(--button-sheen-sweep-duration) var(--button-sheen-ease);
}

.motion-button__content {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: inherit;
  min-width: 0;
  color: inherit;
  font: inherit;
  text-decoration: inherit;
  transform-origin: 50% 50%;
  transition: transform var(--button-sheen-duration) cubic-bezier(0.2, 0.85, 0.28, 1.22);
  will-change: transform;
  pointer-events: none;
}

.motion-button__content svg,
.motion-button__content i {
  flex: 0 0 auto;
  transform-origin: 50% 50%;
  transition: transform var(--button-sheen-duration) cubic-bezier(0.2, 0.85, 0.28, 1.22);
}

.motion-button.icon-button .motion-button__content,
.motion-button.todo-item__delete .motion-button__content,
.motion-button.habit-delete .motion-button__content,
.motion-button.kanban-delete .motion-button__content,
.motion-button.timeline-delete .motion-button__content,
.motion-button.capture-delete .motion-button__content {
  width: 100%;
  height: 100%;
}

.motion-button.profile-block--button .motion-button__content {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  justify-content: stretch;
  gap: 10px;
  width: 100%;
}

.motion-button.sidebar-item .motion-button__content,
.motion-button.chip .motion-button__content {
  width: 100%;
}

.motion-button.sidebar-item .motion-button__content > span:not(.status-badge) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  white-space: nowrap;
}

.motion-button:not(:disabled):not([aria-disabled="true"]):hover .motion-button__content,
.motion-button:not(:disabled):not([aria-disabled="true"]):focus-visible .motion-button__content {
  transform: scale(var(--button-sheen-scale));
}

.motion-button:not(:disabled):not([aria-disabled="true"]):hover .motion-button__content svg,
.motion-button:not(:disabled):not([aria-disabled="true"]):hover .motion-button__content i,
.motion-button:not(:disabled):not([aria-disabled="true"]):focus-visible .motion-button__content svg,
.motion-button:not(:disabled):not([aria-disabled="true"]):focus-visible .motion-button__content i {
  transform: scale(var(--button-sheen-icon-scale));
}

.motion-button:not(:disabled):not([aria-disabled="true"]):hover .motion-button__sheen,
.motion-button:not(:disabled):not([aria-disabled="true"]):focus-visible .motion-button__sheen {
  opacity: 1;
  transform: translateX(125%) skewX(-12deg);
}

.motion-button.sidebar-item:hover::before,
.motion-button.sidebar-item:focus-visible::before {
  animation: none;
  opacity: 0;
}

.motion-button:not(:disabled):not([aria-disabled="true"]):active .motion-button__content {
  transform: scale(1.03);
  transition-duration: 0.12s;
}

/* Edge-only BorderGlow card hover, based on the source edge-light layer. */
.border-glow-card {
  --edge-proximity: 0;
  --edge-glow-opacity: 0;
  --cursor-angle: 45deg;
  --edge-sensitivity: 28;
  --glow-padding: 42px;
  --glow-color: hsl(224deg 88% 78% / 100%);
  --glow-color-60: hsl(224deg 88% 78% / 60%);
  --glow-color-50: hsl(224deg 88% 78% / 50%);
  --glow-color-40: hsl(224deg 88% 78% / 40%);
  --glow-color-30: hsl(224deg 88% 78% / 30%);
  --glow-color-20: hsl(224deg 88% 78% / 20%);
  --glow-color-10: hsl(224deg 88% 78% / 10%);

  position: relative;
  isolation: isolate;
  overflow: visible;
  transform: translate3d(0, 0, 0.01px);
  transition:
    border-color 0.32s ease,
    box-shadow 0.32s ease;
}

html[data-theme="light"] .border-glow-card {
  --edge-sensitivity: 18;
  --glow-color: hsl(39deg 88% 48% / 100%);
  --glow-color-60: hsl(39deg 88% 48% / 66%);
  --glow-color-50: hsl(37deg 90% 50% / 56%);
  --glow-color-40: hsl(35deg 90% 52% / 44%);
  --glow-color-30: hsl(33deg 86% 54% / 34%);
  --glow-color-20: hsl(31deg 84% 56% / 24%);
  --glow-color-10: hsl(30deg 82% 58% / 16%);
}

html[data-theme="light"] .border-glow-card__edge {
  mix-blend-mode: normal;
  opacity: min(1, calc(var(--edge-glow-opacity) * 1.28));
}

html[data-theme="light"] .border-glow-card:hover,
html[data-theme="light"] .border-glow-card.is-border-glowing {
  border-color: color-mix(in srgb, var(--hairline-strong, rgba(45, 39, 29, 0.22)) 48%, var(--glow-color) 52%);
}

.border-glow-card > :not(.border-glow-card__edge) {
  position: relative;
  z-index: 2;
}

.border-glow-card__edge {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
  opacity: var(--edge-glow-opacity);
  mix-blend-mode: plus-lighter;
  transition: opacity 0.25s ease-out;
  mask-image:
    conic-gradient(
      from var(--cursor-angle) at center,
      black 1.5%,
      transparent 7%,
      transparent 93%,
      black 98.5%
    );
  -webkit-mask-image:
    conic-gradient(
      from var(--cursor-angle) at center,
      black 1.5%,
      transparent 7%,
      transparent 93%,
      black 98.5%
    );
}

.border-glow-card:not(:hover):not(.is-border-glowing) > .border-glow-card__edge {
  opacity: 0;
  transition-duration: 0.75s;
  transition-timing-function: ease-in-out;
}

.border-glow-card__edge::before {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  content: "";
  box-shadow:
    inset 0 0 0 1px var(--glow-color),
    inset 0 0 1px 0 var(--glow-color-60),
    inset 0 0 3px 0 var(--glow-color-50),
    inset 0 0 6px 0 var(--glow-color-40),
    inset 0 0 15px 0 var(--glow-color-30),
    inset 0 0 25px 2px var(--glow-color-20),
    inset 0 0 50px 2px var(--glow-color-10);
}

.border-glow-card:hover,
.border-glow-card.is-border-glowing {
  border-color: color-mix(in srgb, var(--hairline, rgba(255, 255, 255, 0.14)) 68%, var(--glow-color) 32%);
}

.insight-panel.border-glow-card {
  overflow: hidden;
}

.insight-panel.border-glow-card.is-feedback-picker-open {
  overflow: visible;
}

.insight-panel::before {
  border-radius: inherit;
}

/* Reduce motion accessibility */
@media (prefers-reduced-motion: reduce) {
  [data-enter] {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }

  [data-enter].is-visible {
    opacity: 1;
    transform: none;
    filter: none;
  }

  .motion-button__content,
  .motion-button__content svg,
  .motion-button__content i,
  .motion-button__sheen {
    transform: none !important;
    transition: none !important;
  }

  .motion-button__sheen {
    opacity: 0 !important;
  }

  .border-glow-card,
  .border-glow-card__edge {
    transform: none !important;
    transition: none !important;
  }

  .border-glow-card__edge {
    opacity: 0 !important;
  }

  .brand-hover,
  .brand-hover__mark,
  .brand-hover__mark img,
  img.brand-hover__mark,
  .brand-hover__mark svg,
  .brand-hover__text,
  .brand-hover__mark::before,
  .brand-hover__mark::after {
    transform: none !important;
    filter: none !important;
    text-shadow: none !important;
    transition: none !important;
  }

  .brand-hover__mark::before,
  .brand-hover__mark::after {
    opacity: 0 !important;
  }
}