/* ==========================================================================
 * Captiq macOS motion & material system — macos-motion.css
 *
 * Apple-grade design tokens, true vibrancy materials, signature motion curves
 * and premium details. Loaded LAST by every layout, so these tokens refine
 * (never replace) each surface's own stylesheet.
 *
 * Motion language
 *   --ease-apple: cubic-bezier(0.32, 0.72, 0, 1) — Apple's signature curve,
 *   used for ~90% of transitions. GPU-friendly: transform + opacity only.
 *
 * Opt-ins
 *   [data-reveal]            entrance on scroll (JS adds .in; stagger via
 *                            data-reveal-index or data-reveal-group)
 *   [data-reveal="scale|left|right"]  entrance variants
 *   .sheet / .open           macOS sheet (window.CaptiqSheet.open/close)
 *   .macos-win               window card: traffic-light dots + scale-from-.96
 *                            entrance. Inside a toggled container it animates
 *                            every time the container unhides.
 *   .segmented > .seg-btn    macOS segmented control (JS slides indicator)
 *   .win-dots                traffic-light dots (red/yellow/green)
 *   .glass                   vibrancy utility
 * ========================================================================== */

/* ---- §1 · Design tokens ------------------------------------------------- */
:root {
  /* Motion */
  --ease-apple: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-spring: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-out: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-in-out: cubic-bezier(0.42, 0, 0.58, 1);
  --dur-press: .12s;
  --dur-fast: .18s;
  --dur-med: .35s;
  --dur-slow: .6s;

  /* Typography */
  --sf: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
        Inter, "Segoe UI", sans-serif;
  --sf-mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;

  /* Apple system palette */
  --blue: #0071E3;            /* system blue · light mode */
  --blue-dark: #0A84FF;       /* system blue · dark mode */
  --ink: #1d1d1f;             /* primary label */
  --ink-2: #515154;           /* secondary label */
  --ink-3: #86868b;           /* tertiary label */
  --ink-d: #f5f5f7;           /* primary label · dark */
  --ink-d2: #aeaeb2;          /* secondary label · dark */
  --paper: #fbfbfd;           /* page background · light */
  --paper-d: #000000;         /* page background · dark */

  /* Vibrancy materials */
  --blur-vibrant: blur(24px) saturate(1.8);
  --mat-light: rgba(255, 255, 255, .6);
  --mat-light-strong: rgba(255, 255, 255, .72);
  --mat-dark: rgba(28, 28, 30, .6);
  --mat-dark-strong: rgba(28, 28, 30, .72);
  --hairline-l: rgba(0, 0, 0, .08);
  --hairline-d: rgba(255, 255, 255, .12);

  /* Premium shadows */
  --sh-premium: 0 8px 30px rgba(0, 0, 0, .12);
  --sh-lift: 0 16px 44px rgba(0, 0, 0, .16);
  --sh-win: 0 24px 80px rgba(0, 0, 0, .28);

  /* Focus */
  --focus-ring: 0 0 0 4px rgba(10, 132, 255, .25);

  /* ---- Shared token refinements (page-scoped: each layout loads only its
     own theme CSS before this file, so these safely retune every surface) */
  --font: var(--sf);
  --primary: var(--blue);
  --primary-dark: #0060c9;
  --primary-soft: rgba(0, 113, 227, .1);
  --accent: var(--blue);
  --gradient: linear-gradient(135deg, #0A84FF 0%, #0071E3 100%);
  --gradient-soft: linear-gradient(135deg, rgba(10, 132, 255, .1) 0%, rgba(0, 113, 227, .1) 100%);
  --text: var(--ink);
  --text-soft: var(--ink-2);
  --muted: #6e6e73;
  --bg: var(--paper);
  --bg-soft: #f5f5f7;
  --card: #ffffff;
  --border: var(--hairline-l);
  --border-strong: rgba(0, 0, 0, .14);
  --info: var(--blue-dark);
  --info-bg: rgba(10, 132, 255, .1);
  --shadow: var(--sh-premium);
  --shadow-lg: var(--sh-lift);
  --transition: var(--dur-fast) var(--ease-apple);
}

/* Site dark mode → true Apple dark */
[data-theme="dark"] {
  --bg: #000000;
  --bg-soft: #101014;
  --bg-muted: #1c1c1e;
  --card: #1c1c1e;
  --text: #f5f5f7;
  --text-soft: #d7d7dc;
  --muted: #86868b;
  --border: rgba(255, 255, 255, .12);
  --border-strong: rgba(255, 255, 255, .2);
  --primary: #0A84FF;
  --primary-dark: #409cff;
  --primary-soft: rgba(10, 132, 255, .16);
  --accent: #0A84FF;
  --gradient: linear-gradient(135deg, #409cff 0%, #0A84FF 100%);
  --gradient-soft: linear-gradient(135deg, rgba(10, 132, 255, .18) 0%, rgba(64, 156, 255, .18) 100%);
  --shadow: 0 8px 30px rgba(0, 0, 0, .5);
  --shadow-lg: 0 18px 50px rgba(0, 0, 0, .6);
}

/* Editor (always dark) → Final Cut grays + system blue */
body.ed-body {
  --font: var(--sf);
  --accent: #0A84FF;
  --accent-soft: rgba(10, 132, 255, .18);
  --accent-2: #5ac8fa;
  --bg-0: #000000;
  --bg-1: #1c1c1e;
  --bg-2: #2c2c2e;
  --bg-3: #3a3a3c;
  --bg-4: #48484a;
  --line: rgba(255, 255, 255, .1);
  --line-soft: rgba(255, 255, 255, .06);
  --txt: #f5f5f7;
  --txt-dim: #aeaeb2;
  --txt-faint: #6e6e73;
  --danger: #ff453a;
  --warn: #ffd60a;
  --ok: #30d158;
}

/* ---- §2 · Typography ---------------------------------------------------- */
body {
  font-family: var(--sf);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1;
}
h1, h2, h3, .h-display {
  letter-spacing: -0.02em;
  line-height: 1.12;
  font-weight: 700;
  text-wrap: balance;
}
h1 { font-weight: 800; }
::selection { background: rgba(10, 132, 255, .28); }

/* ---- §3 · Vibrancy materials -------------------------------------------- */
.glass {
  -webkit-backdrop-filter: var(--blur-vibrant);
  backdrop-filter: var(--blur-vibrant);
  background: var(--mat-light-strong);
  border: 1px solid rgba(255, 255, 255, .45);
}
[data-theme="dark"] .glass,
.dark .glass {
  background: var(--mat-dark-strong);
  border-color: var(--hairline-d);
}
body.ed-body .glass { background: var(--mat-dark-strong); border-color: var(--hairline-d); }

/* ---- Site chrome -------------------------------------------------------- */
.site-header {
  -webkit-backdrop-filter: var(--blur-vibrant);
  backdrop-filter: var(--blur-vibrant);
  background: var(--mat-light);
  border-bottom: 1px solid transparent;
}
.site-header.is-scrolled {
  border-bottom-color: var(--hairline-l);
  box-shadow: 0 1px 12px rgba(0, 0, 0, .06);
}
[data-theme="dark"] .site-header { background: var(--mat-dark); }
[data-theme="dark"] .site-header.is-scrolled { border-bottom-color: var(--hairline-d); }
.nav-link { transition: color var(--dur-fast) var(--ease-apple),
                       background var(--dur-fast) var(--ease-apple); }

/* Auth window card */
.auth-wrap {
  background:
    radial-gradient(700px 360px at 15% 8%, rgba(10, 132, 255, .1), transparent 60%),
    radial-gradient(640px 340px at 85% 92%, rgba(90, 200, 250, .12), transparent 60%),
    var(--bg-soft);
}
.auth-card {
  background: var(--mat-light-strong);
  -webkit-backdrop-filter: var(--blur-vibrant);
  backdrop-filter: var(--blur-vibrant);
  border: 1px solid var(--hairline-l);
  box-shadow: var(--sh-win);
}
[data-theme="dark"] .auth-card {
  background: var(--mat-dark-strong);
  border-color: var(--hairline-d);
}

/* ---- Finder-style sidebars (dashboard + admin) -------------------------- */
body.dash .dash-sidebar,
body.admin .admin-sidebar {
  background: var(--mat-light);
  -webkit-backdrop-filter: var(--blur-vibrant);
  backdrop-filter: var(--blur-vibrant);
  border-right: 1px solid var(--hairline-l);
}
body.dash .dash-brand,
body.admin .brand-text { color: var(--ink); }
body.dash .dash-brand-mark,
body.admin .brand-mark { background: var(--gradient); box-shadow: 0 2px 8px rgba(0, 113, 227, .35); }
body.dash .dash-nav-item,
body.admin .sidebar-nav .nav-link {
  color: var(--ink-2);
  border-radius: 8px;
  transition: background var(--dur-fast) var(--ease-apple),
              color var(--dur-fast) var(--ease-apple),
              transform var(--dur-press) var(--ease-apple);
}
body.dash .dash-nav-item:hover,
body.admin .sidebar-nav .nav-link:hover { background: rgba(0, 0, 0, .05); color: var(--ink); }
body.dash .dash-nav-item:active,
body.admin .sidebar-nav .nav-link:active { transform: scale(.97); }
body.dash .dash-nav-item.is-active,
body.admin .sidebar-nav .nav-link.active {
  background: rgba(0, 113, 227, .12);
  color: var(--blue);
  font-weight: 600;
}
body.dash .dash-nav-item.is-active .dash-nav-icon,
body.admin .sidebar-nav .nav-link.active .nav-icon { color: var(--blue); }
body.dash .dash-sidebar-foot .dash-back,
body.admin .sidebar-foot .foot-link { color: var(--ink-3); }
body.dash .dash-sidebar-foot .dash-back:hover,
body.admin .sidebar-foot .foot-link:hover { color: var(--ink); }
body.admin .brand-text em { color: var(--ink-3); }
body.admin .admin-topbar {
  background: var(--mat-light);
  -webkit-backdrop-filter: var(--blur-vibrant);
  backdrop-filter: var(--blur-vibrant);
  border-bottom: 1px solid var(--hairline-l);
}
body.dash .dash-topbar {
  background: var(--mat-light);
  -webkit-backdrop-filter: var(--blur-vibrant);
  backdrop-filter: var(--blur-vibrant);
  border-bottom: 1px solid var(--hairline-l);
}

/* ---- Editor chrome: Final Cut / iMovie dark vibrancy · 8px grid ---------- */
body.ed-body .ed-header {
  background: var(--mat-dark);
  -webkit-backdrop-filter: var(--blur-vibrant);
  backdrop-filter: var(--blur-vibrant);
  border-bottom: 1px solid var(--hairline-d);
  gap: 8px;
  padding: 0 16px;
}
body.ed-body .ed-header-actions { gap: 8px; }
body.ed-body .ed-rail {
  background: var(--mat-dark);
  -webkit-backdrop-filter: var(--blur-vibrant);
  backdrop-filter: var(--blur-vibrant);
  border-right: 1px solid var(--hairline-d);
  padding: 8px 6px;
  gap: 2px;
}
body.ed-body .rail-btn {
  border-radius: 10px;
  padding: 8px 4px;
  gap: 4px;
  color: var(--txt-dim);
  transition: background var(--dur-fast) var(--ease-apple),
              color var(--dur-fast) var(--ease-apple),
              transform var(--dur-press) var(--ease-apple);
}
body.ed-body .rail-btn:hover { background: rgba(255, 255, 255, .08); color: var(--txt); }
body.ed-body .rail-btn:active { transform: scale(.92); }
body.ed-body .rail-btn.active {
  background: rgba(10, 132, 255, .28);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(10, 132, 255, .5);
}
body.ed-body .ed-panels,
body.ed-body .ed-props {
  background: var(--mat-dark);
  -webkit-backdrop-filter: var(--blur-vibrant);
  backdrop-filter: var(--blur-vibrant);
  border-right: 1px solid var(--hairline-d);
}
body.ed-body .ed-props { border-right: 0; border-left: 1px solid var(--hairline-d); }
body.ed-body .ed-timeline {
  background: rgba(22, 22, 24, .72);
  -webkit-backdrop-filter: var(--blur-vibrant);
  backdrop-filter: var(--blur-vibrant);
  border-top: 1px solid var(--hairline-d);
}
body.ed-body .timeline-toolbar { border-bottom: 1px solid var(--hairline-d); }
body.ed-body .track { border-bottom: 1px solid var(--line-soft); }
body.ed-body .track-label {
  color: var(--txt-faint);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}
body.ed-body .user-dropdown,
body.ed-body .modal-card {
  background: var(--mat-dark-strong);
  -webkit-backdrop-filter: var(--blur-vibrant);
  backdrop-filter: var(--blur-vibrant);
  border: 1px solid var(--hairline-d);
  box-shadow: var(--sh-win);
}
body.ed-body .modal { background: rgba(0, 0, 0, .55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
body.ed-body .ed-logo { background: var(--gradient); box-shadow: 0 2px 10px rgba(10, 132, 255, .45); }
body.ed-body .ed-plan-badge {
  background: rgba(10, 132, 255, .16);
  color: #7ab8ff;
  border: 1px solid rgba(10, 132, 255, .35);
}
body.ed-body .save-status { color: var(--txt-faint); }
body.ed-body .save-status.saved { color: var(--ok); }
body.ed-body .time-display { font-family: var(--sf-mono); }

/* ---- §4 · Buttons, inputs, controls -------------------------------------- */
.btn, button {
  font-family: var(--sf);
  transition: transform var(--dur-press) var(--ease-apple),
              box-shadow var(--dur-fast) var(--ease-apple),
              background var(--dur-fast) var(--ease-apple),
              border-color var(--dur-fast) var(--ease-apple),
              filter var(--dur-fast) var(--ease-apple);
}
.btn:active, button:active { transform: scale(.97); transition-duration: var(--dur-press); }
.btn:disabled, button:disabled { transform: none; }

/* Primary buttons → Apple blue, refined depth */
.btn-primary, .btn.btn-primary {
  background: var(--gradient);
  box-shadow: 0 2px 10px rgba(0, 113, 227, .35), inset 0 1px 0 rgba(255, 255, 255, .22);
  border: 0;
}
.btn-primary:hover, .btn.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(0, 113, 227, .42), inset 0 1px 0 rgba(255, 255, 255, .22);
  filter: brightness(1.04);
}
.btn-primary:active, .btn.btn-primary:active { transform: scale(.97); box-shadow: 0 2px 8px rgba(0, 113, 227, .3); }
body.ed-body .btn-primary {
  background: var(--blue-dark);
  box-shadow: 0 2px 10px rgba(10, 132, 255, .4), inset 0 1px 0 rgba(255, 255, 255, .2);
}
body.ed-body .btn-primary:hover { filter: brightness(1.1); transform: translateY(-1px); }

/* Editor chrome buttons */
body.ed-body .icon-btn {
  border-radius: 8px;
  transition: background var(--dur-fast) var(--ease-apple),
              color var(--dur-fast) var(--ease-apple),
              transform var(--dur-press) var(--ease-apple),
              border-color var(--dur-fast) var(--ease-apple);
}
body.ed-body .icon-btn:hover:not(:disabled) { background: rgba(255, 255, 255, .1); color: #fff; }
body.ed-body .icon-btn:active:not(:disabled) { transform: scale(.9); }
body.ed-body .chip-btn:hover { border-color: rgba(10, 132, 255, .6); }
body.ed-body .tool-row-btn { transition: border-color var(--dur-fast) var(--ease-apple), transform var(--dur-press) var(--ease-apple), background var(--dur-fast) var(--ease-apple); }
body.ed-body .tool-row-btn:hover { border-color: rgba(10, 132, 255, .55); background: rgba(255, 255, 255, .05); }
body.ed-body .tool-row-btn:active { transform: scale(.97); }

/* Cards: buttery hover lift */
.card {
  transition: transform var(--dur-med) var(--ease-apple),
              box-shadow var(--dur-med) var(--ease-apple),
              border-color var(--dur-med) var(--ease-apple);
  border: 1px solid var(--hairline-l);
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-lift);
}

/* Inputs: macOS focus ring */
input, select, textarea {
  font-family: var(--sf);
  transition: border-color var(--dur-fast) var(--ease-apple),
              box-shadow var(--dur-fast) var(--ease-apple),
              background var(--dur-fast) var(--ease-apple);
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--blue-dark);
  box-shadow: var(--focus-ring);
}
a:focus-visible, button:focus-visible, summary:focus-visible,
[tabindex]:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: 8px;
}

/* Segmented control (macOS) */
.segmented {
  position: relative;
  display: inline-flex;
  align-items: stretch;
  background: rgba(120, 120, 128, .18);
  border-radius: 10px;
  padding: 2px;
  gap: 0;
}
.seg-btn {
  position: relative;
  z-index: 1;
  border: 0;
  background: transparent;
  padding: 6px 16px;
  font-size: 13px;
  font-weight: 500;
  border-radius: 8px;
  color: var(--ink-2);
  cursor: pointer;
  white-space: nowrap;
}
.seg-btn.is-active { color: var(--ink); font-weight: 600; }
.seg-indicator {
  position: absolute;
  top: 2px; bottom: 2px; left: 0;
  width: 0;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 1px 5px rgba(0, 0, 0, .18), inset 0 0 0 .5px rgba(0, 0, 0, .06);
  transition: left var(--dur-med) var(--ease-apple), width var(--dur-med) var(--ease-apple);
  pointer-events: none;
}
[data-theme="dark"] .seg-btn { color: var(--ink-d2); }
[data-theme="dark"] .seg-btn.is-active { color: var(--ink-d); }
[data-theme="dark"] .seg-indicator { background: #3a3a3c; }
body.ed-body .seg-btn { color: var(--txt-dim); }
body.ed-body .seg-btn.is-active { color: #fff; }
body.ed-body .seg-indicator { background: #48484a; }

/* Pills / badges */
.badge, .pill {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .01em;
  border-radius: 999px;
  padding: 3px 10px;
}

/* ---- §5 · Motion --------------------------------------------------------- */
/* Entrance reveals */
.js-motion [data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-apple);
  transition-delay: calc(var(--i, 0) * 60ms);
  will-change: opacity, transform;
}
.js-motion [data-reveal="scale"] { transform: scale(.96); }
.js-motion [data-reveal="left"] { transform: translateX(-24px); }
.js-motion [data-reveal="right"] { transform: translateX(24px); }
.js-motion [data-reveal].in { opacity: 1; transform: none; will-change: auto; }

/* Sheet modals: rise + scale from .96 + fade */
.sheet {
  opacity: 0;
  transform: translateY(16px) scale(.96);
  transform-origin: center top;
  transition: opacity var(--dur-med) var(--ease-apple),
              transform var(--dur-med) var(--ease-apple);
  pointer-events: none;
}
.sheet.open {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

/* Window cards: traffic-light chrome + scale-from-.96 entrance.
   When placed inside a container that toggles .hidden, the entrance
   replays on every open — no JS changes needed. */
.macos-win { position: relative; }
.auth-card .win-dots {
  position: absolute;
  top: 20px;
  left: 22px;
}
body.ed-body .modal-head .win-dots { flex: 0 0 auto; }
body.ed-body .modal-head h3 { flex: 1; text-align: center; }
.win-dots {
  display: inline-flex;
  gap: 8px;
  align-items: center;
}
.win-dots span {
  width: 12px; height: 12px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .18), 0 1px 2px rgba(0, 0, 0, .12);
}
.win-dots span:nth-child(1) { background: #ff5f57; }
.win-dots span:nth-child(2) { background: #febc2e; }
.win-dots span:nth-child(3) { background: #28c840; }
.modal:not(.hidden) .macos-win,
.macos-win.win-enter {
  animation: win-in var(--dur-med) var(--ease-apple);
  transform-origin: center center;
}
@keyframes win-in {
  from { opacity: 0; transform: scale(.96) translateY(10px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* Dropdowns / popovers: scale in from .96, origin top */
.dropdown-panel,
[data-popover] { transform-origin: top center; }
.dropdown.is-open .dropdown-panel,
[data-popover].open { animation: mm-pop var(--dur-fast) var(--ease-apple); }
@keyframes mm-pop {
  from { opacity: 0; transform: scale(.96) translateY(-4px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
body.ed-body .user-dropdown:not(.hidden) { animation: mm-pop var(--dur-fast) var(--ease-apple); transform-origin: top right; }

/* Toast: spring up */
.toast { animation: toast-in var(--dur-med) var(--ease-apple); }
@keyframes toast-in {
  from { opacity: 0; transform: translate(-50%, 12px) scale(.96); }
  to   { opacity: 1; transform: translate(-50%, 0) scale(1); }
}

/* Parallax targets */
[data-parallax] { will-change: transform; }

/* Editor chrome entrances (run once, transform/opacity only) */
body.ed-body .ed-header { animation: ed-drop var(--dur-med) var(--ease-apple); }
body.ed-body .ed-rail { animation: ed-rail-in var(--dur-med) var(--ease-apple); }
body.ed-body .ed-timeline { animation: ed-rise var(--dur-med) var(--ease-apple); }
@keyframes ed-drop { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }
@keyframes ed-rail-in { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: none; } }
@keyframes ed-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.ed-body .ed-panels { transition: opacity var(--dur-slow) var(--ease-apple),
                                transform var(--dur-slow) var(--ease-apple); }

/* ---- §6 · Refined scrollbars (macOS overlay style) ----------------------- */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: rgba(120, 120, 128, .55);
  border-radius: 8px;
  border: 3px solid transparent;
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: rgba(120, 120, 128, .8); background-clip: content-box; border: 3px solid transparent; }
* { scrollbar-width: thin; scrollbar-color: rgba(120, 120, 128, .55) transparent; }

/* ---- §7 · Reduced motion ------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal], .sheet { opacity: 1 !important; transform: none !important; }
}