/**
 * Family Office App Kit — cotton-ball / Comet motion (RL-COTTON-001).
 *
 * Doctrine: sneeze → soft overshoot → cotton-ball settle. Sophisticated,
 * non-stress KVM motion. Never snap, never scale(0), never transition:all.
 *
 * Source seed: Pockit `containers/nephew-ct/family-hub/comet-motion.css`.
 * Framework walls live here so Briefcase + every father-shell consumer inherit
 * the same motion (RL-FATHER-001). Hub-specific selectors stay in Pockit CSS.
 */

:root,
.fo-kit {
  /* Pockit comet tokens — primary names for shared motion */
  --comet-duration-fast: 0.15s;
  --comet-duration-mid: 0.32s;
  --comet-duration-slide: 0.32s;
  --comet-ease-back: cubic-bezier(0.12, 0.4, 0.29, 1.46);
  --comet-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --comet-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);

  /* FO aliases (existing consumers) */
  --fo-breathe-settle: var(--comet-ease-back);
  --fo-breathe-ease: var(--comet-ease-out);
  --fo-breathe-duration: 0.55s;
  --fo-breathe-duration-fast: 0.42s;
  --comet: var(--comet-ease-back);
}

/* ─── Keyframes — soft overshoot settle ───────────────────────── */

@keyframes fo-breathe-in {
  0% {
    opacity: 0;
    transform: scale(0.94) translateY(14px);
    filter: blur(3px);
  }
  55% {
    opacity: 1;
    transform: scale(1.012) translateY(-2px);
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes fo-breathe-overlay-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes cotton-ball-settle {
  0% {
    opacity: 0;
    transform: scale(0.9) translateY(16px);
    filter: blur(4px);
  }
  48% {
    opacity: 1;
    transform: scale(1.014) translateY(-4px);
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes comet-panel-in {
  0% {
    opacity: 0;
    transform: scale(0.965) translateY(6px);
  }
  72% {
    opacity: 1;
    transform: scale(1.006) translateY(0);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes comet-section-in {
  0% {
    opacity: 0;
    transform: scale(0.98) translateY(10px);
  }
  70% {
    opacity: 1;
    transform: scale(1.004) translateY(0);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes comet-menu-child-in {
  0% {
    opacity: 0;
    transform: translateX(-8px) scale(0.98);
  }
  75% {
    opacity: 1;
    transform: translateX(1px) scale(1.01);
  }
  100% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@keyframes comet-status-in {
  from {
    opacity: 0;
    transform: scale(0.92);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes comet-status-bar-in {
  0% {
    opacity: 0;
    transform: translateY(10px) scale(0.985);
  }
  72% {
    opacity: 1;
    transform: translateY(-1px) scale(1.002);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes fo-haptic-flash {
  0% {
    filter: brightness(1);
  }
  40% {
    filter: brightness(1.12);
  }
  100% {
    filter: brightness(1);
  }
}

/* ─── Utility classes (any FO consumer) ───────────────────────── */

.fo-breathe-in,
.fo-breathe-section,
.fo-filter-empty {
  animation: fo-breathe-in var(--fo-breathe-duration) var(--fo-breathe-settle) both;
  animation-delay: var(--fo-delay, 0ms);
  transform-origin: top center;
}

.fo-breathe-card,
.fo-card-enter {
  animation: cotton-ball-settle var(--fo-breathe-duration-fast) var(--comet-ease-back) both;
  animation-delay: var(--fo-delay, 0ms);
  transform-origin: center center;
}

.fo-panel-enter,
.comet-panel-enter {
  animation: comet-panel-in var(--comet-duration-mid) var(--comet-ease-back) both;
  animation-delay: var(--fo-delay, var(--comet-delay, 0ms));
  transform-origin: top center;
}

.fo-section-enter,
.comet-section-enter {
  animation: comet-section-in var(--comet-duration-mid) var(--comet-ease-back) both;
  animation-delay: var(--fo-delay, var(--comet-delay, 0ms));
  transform-origin: top center;
}

.fo-cotton-settle,
.cotton-ball-settle {
  animation: cotton-ball-settle var(--comet-duration-mid) var(--comet-ease-back) both;
  animation-delay: var(--fo-delay, var(--comet-delay, 0ms));
  transform-origin: top center;
}

.fo-view-swap > *,
.fo-kit .shell-body.fo-view-swap > *,
.main-content.comet-view-swap > * {
  animation: cotton-ball-settle var(--comet-duration-mid) var(--comet-ease-back) both;
  transform-origin: top center;
}

.fo-status-in,
.comet-status-in {
  animation: comet-status-in 0.28s var(--comet-ease-back) both;
  animation-delay: var(--fo-delay, var(--comet-delay, 0ms));
}

.fo-breathe-overlay {
  /* overlay fade handled by surface CSS; class marks modal roots */
}

/* Collapse / expand panels (menus, drawers content) */
.fo-collapse,
.comet-collapse {
  max-height: 0;
  opacity: 0;
  transform: scaleY(0.97);
  transform-origin: top center;
  overflow: hidden;
  pointer-events: none;
  transition:
    max-height var(--comet-duration-mid) var(--comet-ease-back),
    opacity 0.26s var(--comet-ease-out),
    transform var(--comet-duration-mid) var(--comet-ease-back);
}

.fo-collapse.is-open,
.comet-collapse.is-open {
  max-height: min(480px, 50vh);
  opacity: 1;
  transform: scaleY(1);
  pointer-events: auto;
}

.fo-collapse.is-open > *,
.comet-collapse.is-open > * {
  animation: comet-menu-child-in 0.3s var(--comet-ease-back) both;
  animation-delay: var(--fo-delay, var(--comet-delay, 0ms));
}

/* Dropdown / popover cotton settle */
.fo-dropdown-panel--animate,
.comet-dropdown-panel--animate,
.fo-kit .comet-dropdown.is-open .comet-dropdown-panel:not([hidden]) {
  animation: cotton-ball-settle 0.24s var(--comet-ease-back) both;
  transform-origin: top center;
}

/* ─── Cotton-ball press (non-stress tap) ──────────────────────── */

.fo-press,
.fo-kit button:not(:disabled):not(.fo-no-press),
.fo-kit .bc-tab,
.fo-kit .rail-quick-action,
.fo-kit .status-badge,
.fo-kit .app-card,
.fo-kit .fo-door-link,
.fo-kit .icon-btn:not(:disabled),
.fo-kit .comet-dropdown-trigger,
.fo-kit .comet-segment-btn {
  transition:
    transform var(--comet-duration-fast) var(--comet-ease-back),
    filter 0.18s var(--comet-ease-out),
    background 0.18s var(--comet-ease-out),
    background-color var(--comet-duration-fast) ease,
    border-color var(--comet-duration-fast) ease,
    color var(--comet-duration-fast) ease,
    box-shadow 0.18s var(--comet-ease-out);
  -webkit-tap-highlight-color: transparent;
}

.fo-press:active:not(:disabled),
.fo-kit button:active:not(:disabled):not(.fo-no-press),
.fo-kit .bc-tab:active,
.fo-kit .rail-quick-action:active,
.fo-kit .status-badge:active,
.fo-kit .app-card:active,
.fo-kit .fo-door-link:active,
.fo-kit .icon-btn:active:not(:disabled),
.fo-kit .comet-dropdown-trigger:active {
  transform: scale(0.97);
}

/* ─── Father Console / Briefcase surface bindings ─────────────── */

.fo-kit .shell-body > section,
.fo-kit .bc-canvas > section.fo-panel-enter,
.fo-kit [data-bc-panel].is-entering {
  animation: comet-panel-in var(--comet-duration-mid) var(--comet-ease-back) both;
  transform-origin: top center;
}

.fo-kit .app-card,
.fo-kit .bc-card,
.fo-kit .fo-card {
  transform-origin: center center;
}

.fo-kit .app-card.fo-enter,
.fo-kit .bc-card.fo-enter,
.fo-kit .overview-card.fo-enter {
  animation: cotton-ball-settle var(--fo-breathe-duration-fast) var(--comet-ease-back) both;
  animation-delay: var(--fo-delay, 0ms);
}

.fo-kit .status-badge,
.fo-kit .app-badge,
.fo-kit .fo-status-chip {
  animation: comet-status-in 0.26s var(--comet-ease-back) both;
}

.fo-kit .status-badge:nth-child(2),
.fo-kit .app-badge:nth-child(2) {
  animation-delay: 40ms;
}
.fo-kit .status-badge:nth-child(3),
.fo-kit .app-badge:nth-child(3) {
  animation-delay: 80ms;
}
.fo-kit .status-badge:nth-child(4),
.fo-kit .app-badge:nth-child(4) {
  animation-delay: 120ms;
}

/* Modal / sheet cotton entry */
.fo-kit .fo-proto-modal,
.fo-kit .pad-changelog-modal,
.fo-kit .fo-modal,
.fo-kit [role="dialog"].fo-cotton {
  animation: cotton-ball-settle 0.36s var(--comet-ease-back) both;
  transform-origin: center center;
}

.fo-kit .fo-proto-modal-backdrop,
.fo-kit .fo-modal-backdrop {
  animation: fo-breathe-overlay-in 0.22s var(--comet-ease-out) both;
}

/* Haptic visual flash (Mac / no-vibrate simulation) */
.fo-haptic-flash {
  animation: fo-haptic-flash 0.22s var(--comet-ease-out) both;
}

/* ─── Reduced motion ─────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .fo-breathe-in,
  .fo-breathe-section,
  .fo-breathe-card,
  .fo-card-enter,
  .fo-panel-enter,
  .comet-panel-enter,
  .fo-section-enter,
  .comet-section-enter,
  .fo-cotton-settle,
  .cotton-ball-settle,
  .fo-filter-empty,
  .fo-view-swap > *,
  .fo-kit .shell-body.fo-view-swap > *,
  .main-content.comet-view-swap > *,
  .fo-status-in,
  .comet-status-in,
  .fo-collapse.is-open > *,
  .comet-collapse.is-open > *,
  .fo-dropdown-panel--animate,
  .comet-dropdown-panel--animate,
  .fo-kit .status-badge,
  .fo-kit .app-badge,
  .fo-kit .app-card.fo-enter,
  .fo-kit .bc-card.fo-enter,
  .fo-kit .fo-proto-modal,
  .fo-kit .pad-changelog-modal,
  .fo-kit .fo-modal,
  .fo-haptic-flash {
    animation: none !important;
  }

  .fo-collapse,
  .comet-collapse,
  .fo-press,
  .fo-kit button:not(:disabled):not(.fo-no-press),
  .fo-kit .bc-tab,
  .fo-kit .rail-quick-action,
  .fo-kit .status-badge,
  .fo-kit .app-card {
    transition: none !important;
  }
}