/* ==========================================================================
   Motion and finish (round 1i). Loaded last on every page. js/motion.js moves
   things in and fills numbers; this file holds the feel of every touch, the
   overlays and their exits, the sign-in story, and the colour clean-up.
   Press 90ms, hover 160ms, arrive 240 to 420ms, leave 160ms: leaving is always
   quicker than arriving, and nothing here stops anyone from clicking.
   ========================================================================== */
@property --p { syntax: "<number>"; inherits: true; initial-value: 0; }
:root {
  interpolate-size: allow-keywords;
  --press: 90ms; --hover: 160ms; --arrive: 280ms; --leave: 160ms;
  --spring: linear(0, 0.009, 0.035 2.1%, 0.141 4.4%, 0.723 12.9%, 0.938 16.7%, 1.017 18.9%, 1.077 21.2%, 1.121 23.7%, 1.149 26.5%, 1.159 29.6%, 1.144 34.8%, 1.018 51.6%, 0.998 57.8%, 0.991 64.3%, 1);
  --glass-fill: rgba(255, 255, 255, 0.74);
}

/* ---- colour: a clean field and a rail with real depth ---- */
html { background: #f7f5fc; }
body::before { background:
  radial-gradient(64vw 64vw at -6% -12%, rgba(106, 95, 193, 0.2), transparent 62%),
  radial-gradient(56vw 56vw at 106% -8%, rgba(250, 127, 170, 0.15), transparent 62%),
  radial-gradient(60vw 44vw at 96% 108%, rgba(194, 239, 78, 0.12), transparent 64%),
  #f7f5fc; }
.sidebar { background: linear-gradient(180deg, #2c1766 0%, #211349 58%, #1a1036 100%); -webkit-backdrop-filter: none; backdrop-filter: none; }
.dk-top { background: linear-gradient(100deg, #1f1238 0%, #2c1766 60%, #3a2384 100%); -webkit-backdrop-filter: none; backdrop-filter: none; }
.sidebar .nav-item .nav-name { display: block; overflow: visible; white-space: normal !important; text-overflow: clip; line-height: 1.3; overflow-wrap: anywhere; }
.sidebar .nav-item { position: relative; transition: background-color var(--hover) ease, color var(--hover) ease; }
.sidebar .nav-item.active::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 3px; background: var(--accent-lime); animation: tick-in var(--arrive) var(--ease-out) backwards; }
@keyframes tick-in { from { transform: scaleY(0); } }
mark.lime { background: linear-gradient(var(--accent-lime), var(--accent-lime)) no-repeat; background-size: 100% 100%; }

/* ---- the sliding pill ---- */
.has-pill:not(#cp-tabs) { position: relative; }
.has-pill > :not(.pill-ind) { position: relative; z-index: 1; }
.pill-ind { position: absolute; top: 0; left: 0; z-index: 0; border-radius: var(--r-sm); background: var(--grad-primary); box-shadow: 0 6px 14px -8px rgba(66, 32, 130, 0.6); pointer-events: none; transition: transform 340ms var(--spring), width 280ms var(--ease-out), opacity 120ms ease; will-change: transform; }
.has-pill > [aria-selected="true"], .has-pill > [aria-pressed="true"], .has-pill > .on, .has-pill > .is-active { background: none !important; box-shadow: none !important; }
.seg .pill-ind { box-shadow: none; }
.gate-modes .pill-ind { border-radius: 0; background: none; box-shadow: inset 0 -3px 0 var(--primary); }
.dk-views .pill-ind { background: rgba(255, 255, 255, 0.16); box-shadow: none; }
.view-tabs button, .seg .seg-btn, .gate-modes button { transition: color var(--hover) ease; }

/* ---- touch: every control answers at once ---- */
.btn, .btn-outline, .btn-brand, .dk-primary, .dk-ghost, .dk-chipbtn, .pp-go, .pp-ob, .pp-alt, .pp-skip, .ls, .icon-toggle, .gate-form button[type="submit"], .sidebar #add-project-btn, #cp-tabs button {
  transition: transform var(--press) ease, background-color var(--hover) ease, border-color var(--hover) ease, box-shadow var(--hover) ease, color var(--hover) ease, filter var(--hover) ease; }
.btn:active:not(:disabled), .btn-outline:active:not(:disabled), .dk-primary:active:not(:disabled), .dk-ghost:active:not(:disabled), .dk-chipbtn:active:not(:disabled), .pp-go:active:not(:disabled), .pp-ob:active:not(:disabled), .pp-alt:active:not(:disabled), .ls:active, .icon-toggle:active, .gate-form button[type="submit"]:active, .sidebar #add-project-btn:active, #cp-tabs button:active { transform: scale(0.97); }
.btn-brand:hover:not(:disabled), .gate-form button[type="submit"]:hover:not(:disabled) { filter: brightness(1.12); box-shadow: 0 10px 22px -10px rgba(66, 32, 130, 0.7); }
a, button, input, select, textarea, summary { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline-offset: 2px; transition: outline-offset var(--press) ease; }
input:not([type="checkbox"]):not([type="radio"]), select, textarea { transition: border-color var(--hover) ease, box-shadow var(--hover) ease, background-color var(--hover) ease; }
input:not([type="checkbox"]):not([type="radio"]):focus, select:focus, textarea:focus { border-color: #6a5fc1; box-shadow: 0 0 0 3px rgba(106, 95, 193, 0.18); outline: none; }
input[type="checkbox"]:checked { animation: check-pop 220ms var(--spring); }
@keyframes check-pop { from { transform: scale(0.8); } }
tbody tr { transition: background-color 120ms ease; }
.att-row svg, .att-row .att-go { transition: transform var(--hover) var(--ease-out); }
.att-row:hover svg, .att-row:hover .att-go { transform: translateX(3px); }

input[type="file"] { font: inherit; color: var(--ink-2); }
input[type="file"]::file-selector-button { margin-right: 10px; padding: 8px 14px; border: 1px solid var(--hairline-cool); border-radius: var(--r-sm); background: #fff; color: var(--ink); font: inherit; font-weight: 500; cursor: pointer; transition: background-color var(--hover) ease, border-color var(--hover) ease; }
input[type="file"]::file-selector-button:hover { background: var(--well-hover); border-color: #6a5fc1; }
.lf-rec input[type="url"], .lf-rec input[type="text"] { min-height: 40px; padding: 8px 12px; border: 1px solid var(--hairline-cool); border-radius: var(--r-sm); background: #fff; font: inherit; }

/* forms breathe: a label sits with its own field, not the one above it */
#su-campaign, #ec-form { display: grid; gap: 14px; }

/* cards lift, and a soft light follows the pointer */
.cr, .kc { position: relative; isolation: isolate; }
.cr { transition: transform 220ms var(--ease-out), box-shadow 220ms ease, background-color 160ms ease; }
.cr:hover { transform: translateY(-2px); }
.cr:active { transform: translateY(0) scale(0.995); }
.cr::after, .kc::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity 220ms ease;
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%), rgba(106, 95, 193, 0.13), transparent 70%); }
.cr:hover::after, .kc:hover::after { opacity: 1; }

/* the bar at the top settles in once the page moves under it */
.topbar { transition: box-shadow 200ms ease; }
.is-scrolled .topbar { box-shadow: 0 10px 24px -18px rgba(31, 22, 51, 0.4); }

/* details open by sliding, where the browser can */
.rk-detail::details-content, .modal-advanced::details-content { block-size: 0; overflow: hidden; transition: block-size 280ms var(--ease-out), content-visibility 280ms allow-discrete; }
.rk-detail[open]::details-content, .modal-advanced[open]::details-content { block-size: auto; }

/* ---- overlays arrive and leave ---- */
.modal-backdrop { animation: fade-in 180ms ease both; }
.modal-panel { animation: panel-in 300ms var(--spring) both; }
.modal-backdrop.is-leaving { animation: fade-out var(--leave) ease both; pointer-events: none; }
.modal-backdrop.is-leaving .modal-panel { animation: panel-out var(--leave) var(--ease-in) both; }
.drawer { animation: drawer-slide 340ms var(--ease-out) both; will-change: transform; }
.drawer-back { animation: fade-in 200ms ease both; }
.drawer.is-leaving { animation: drawer-away 190ms var(--ease-in) both; pointer-events: none; }
.drawer-back.is-leaving { animation: fade-out 190ms ease both; pointer-events: none; }
.drawer-body > :not(.skel) { animation: soft-rise 300ms var(--ease-out) backwards; }
.toast { animation: toast-spring 380ms var(--spring) both; }
.toast.is-leaving { animation: toast-away var(--leave) var(--ease-in) both; }
.dk-toast { animation: toast-spring 380ms var(--spring) both; }
.pp-toast { animation: soft-rise 260ms var(--spring) backwards; }
.menu-popover, .dk-more-pop { animation: pop-in 180ms var(--ease-out) both; transform-origin: top right; }
@keyframes fade-in { from { opacity: 0; } }
@keyframes fade-out { to { opacity: 0; } }
@keyframes panel-in { from { opacity: 0; transform: translateY(10px) scale(0.97); } }
@keyframes panel-out { to { opacity: 0; transform: translateY(4px) scale(0.985); } }
@keyframes drawer-slide { from { transform: translateX(100%); } }
@keyframes drawer-away { to { transform: translateX(100%); } }
@keyframes soft-rise { from { opacity: 0; transform: translateY(6px); } }
@keyframes toast-spring { from { opacity: 0; transform: translate(-50%, 16px) scale(0.96); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes toast-away { to { opacity: 0; transform: translate(-50%, 8px) scale(0.98); } }
@keyframes pop-in { from { opacity: 0; transform: translateY(-4px) scale(0.97); } }

/* ---- loading is a shape, not a word ---- */
.skel { display: grid; gap: 12px; padding: 10px 4px; }
.skel i { display: block; height: 12px; border-radius: 6px; background: linear-gradient(90deg, rgba(66, 32, 130, 0.07) 25%, rgba(66, 32, 130, 0.15) 37%, rgba(66, 32, 130, 0.07) 63%); background-size: 400% 100%; animation: skel 1.4s ease infinite; }
@keyframes skel { from { background-position: 100% 0; } to { background-position: 0 0; } }
td .skel { padding: 16px 8px; }

/* ---- sign-in: one call, from hello to the client, once ---- */
.gate-art { background-image: var(--stars), radial-gradient(70% 60% at 85% 12%, rgba(250, 127, 170, 0.22), transparent 70%), radial-gradient(70% 60% at 10% 100%, rgba(106, 95, 193, 0.45), transparent 70%), linear-gradient(150deg, #1c1035 0%, #2c1766 60%, #3a2384 100%); }
.gate-title { animation: story-in 700ms var(--ease-out) 80ms backwards; }
.gate-title mark.lime { animation: stroke 620ms var(--ease-out) 420ms backwards; }
@keyframes stroke { from { background-size: 0% 100%; } }
.gate-card { animation: story-in 620ms var(--ease-out) 140ms backwards; }
.gate-art { gap: 24px; }
.gate-title { font-size: clamp(40px, 4.6vw, 60px); }
.story { display: grid; gap: 12px; width: min(100%, 440px); }
.talk { gap: 6px; width: 100%; }
@media (max-height: 800px) and (min-width: 901px) { .talk .bub:nth-child(n+3) { display: none; } }
.talk .bub { font-size: 15px; animation: bub-in 460ms var(--spring) backwards; }
.talk .bub:nth-child(1) { animation-delay: 700ms; }
.talk .bub:nth-child(2) { animation-delay: 1400ms; }
.talk .bub:nth-child(3) { animation-delay: 2100ms; }
.talk .bub:nth-child(4) { animation-delay: 2800ms; }
.talk .bub.them { background: rgba(255, 255, 255, 0.14); }
.talk .bub.us { transform-origin: bottom right; }
.talk .bub.them { transform-origin: bottom left; }
.story-card { padding: 14px 16px; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: var(--r-lg); background: rgba(255, 255, 255, 0.08); color: #fff; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); animation: story-in 560ms var(--ease-out) 3500ms backwards; }
.story-head { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.story-head b { font-weight: 600; }
.story-head em { margin-left: auto; padding: 2px 8px; border-radius: 6px; background: var(--accent-lime); color: var(--ink-deep); font-size: 12px; font-style: normal; font-weight: 600; }
.story-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-lime); }
.story-card p { margin: 4px 0 10px; color: var(--on-dark-muted); font-size: 14px; }
.story-steps { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: 14px; }
.story-steps li { display: flex; align-items: center; gap: 8px; animation: fade-in 320ms ease backwards; }
.story-steps li::before { content: ""; flex: none; width: 16px; height: 16px; border-radius: 50%; background: var(--accent-lime) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.3 2.3 4.7-5' fill='none' stroke='%231f1633' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; animation: tick-pop 340ms var(--spring) backwards; }
.story-steps li:nth-child(1), .story-steps li:nth-child(1)::before { animation-delay: 4100ms; }
.story-steps li:nth-child(2), .story-steps li:nth-child(2)::before { animation-delay: 4600ms; }
.story-steps li:nth-child(3), .story-steps li:nth-child(3)::before { animation-delay: 5100ms; }
@keyframes story-in { from { opacity: 0; transform: translateY(14px); } }
@keyframes bub-in { from { opacity: 0; transform: translateY(8px) scale(0.92); } }
@keyframes tick-pop { from { transform: scale(0); } }
.dk-gate-card:not(.dk-gate-plain) { animation: story-in 520ms var(--ease-out) backwards; }

/* ---- Sapa Dial ---- */
.dk-row { transition: background-color var(--hover) ease, border-color var(--hover) ease, transform var(--hover) var(--ease-out), box-shadow var(--hover) ease; }
.dk-row:hover { transform: translateX(2px); }
.dk-row:active { transform: scale(0.99); }
.dk-meter i { transition: width 500ms var(--ease-out); }
.pp-ob.is-picked { background: var(--primary) !important; border-color: var(--primary) !important; color: #fff !important; opacity: 1 !important; animation: picked 280ms var(--spring); }
@keyframes picked { 0% { transform: scale(0.96); } }
.dk-main.is-queue:not(.is-person) .dk-person { grid-column: 2 / -1; }
.dk-main.is-queue:not(.is-person) .dk-guide { display: none; }
.dk-main:not(.is-person) .dk-person { padding: 0; border: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.dk-person .dk-pick { margin: 0; min-height: min(62vh, 520px); background-image: var(--stars), radial-gradient(60% 60% at 80% 10%, rgba(250, 127, 170, 0.2), transparent 70%), linear-gradient(150deg, #1c1035 0%, #2c1766 60%, #3a2384 100%); }

/* phones: one column, and nothing clipped */
@media (max-width: 900px) {
  .dk-main.is-queue { grid-template-columns: minmax(0, 1fr); }
  .dk-main.is-queue .dk-guide { grid-column: auto; position: static; max-height: none; }
}
@media (max-width: 760px) {
  .cp-meta { flex-wrap: wrap; white-space: normal; }
}

/* ---- reduced motion: movement goes, a short fade stays, loading still shows ---- */
@media (prefers-reduced-motion: reduce) {
  .gate-title, .gate-title mark.lime, .gate-card, .talk .bub, .story-card, .story-steps li, .story-steps li::before { animation-delay: 0ms !important; }
  .cr:hover, .cr:active, .dk-row:hover, .dk-row:active { transform: none; }
  .btn:active:not(:disabled), .btn-outline:active:not(:disabled), .dk-primary:active:not(:disabled), .dk-ghost:active:not(:disabled), .dk-chipbtn:active:not(:disabled), .pp-go:active:not(:disabled), .pp-ob:active:not(:disabled), .pp-alt:active:not(:disabled), .ls:active, .icon-toggle:active, .gate-form button[type="submit"]:active, .sidebar #add-project-btn:active, #cp-tabs button:active { transform: none; }
  .pill-ind { transition: opacity 120ms ease; }
  .rk-detail::details-content, .modal-advanced::details-content { transition: none; }
  .modal-backdrop, .drawer-back, .modal-panel, .drawer { animation: fade-in 150ms ease both !important; animation-duration: 150ms !important; }
  .skel i { animation: none; background: rgba(66, 32, 130, 0.1); }
}