/* CircleTrust v1.18.6 — editorial motion system.
   Motion is intentionally calm: paper glides, cards shuffle, live chat bubbles arrive.
   Fixed navigation chrome never participates in page transitions. */

:root{
  --ct-motion-fast:180ms;
  --ct-motion-page:300ms;
  --ct-motion-spring:cubic-bezier(.22,1,.36,1);
  --ct-motion-soft:cubic-bezier(.33,1,.68,1);
}

/* ---------- route-to-route editorial glide ---------- */
/* Route stages stay mounted so event-handler closures retain their live DOM
   scope. display:contents preserves the original page layout. Loading stages
   opt out below because they need their own grid box. */
.route-stage:not(.route-stage-loading){display:contents}
.app-view{view-transition-name:ct-route-view}
.rail,.dock,.contextbar,.shell-tools{view-transition-name:none}

::view-transition-group(ct-route-view){animation-duration:var(--ct-motion-page);animation-timing-function:var(--ct-motion-spring)}
::view-transition-old(ct-route-view){animation:ct-route-old 190ms var(--ct-motion-soft) both}
::view-transition-new(ct-route-view){animation:ct-route-new var(--ct-motion-page) var(--ct-motion-spring) both}
html[data-ct-route-dir="back"]::view-transition-old(ct-route-view){animation-name:ct-route-old-back}
html[data-ct-route-dir="back"]::view-transition-new(ct-route-view){animation-name:ct-route-new-back}

@keyframes ct-route-old{to{opacity:0;transform:translate3d(-12px,0,0) scale(.994);filter:blur(1.5px)}}
@keyframes ct-route-new{from{opacity:0;transform:translate3d(22px,0,0) scale(.992);filter:blur(2px)}to{opacity:1;transform:none;filter:none}}
@keyframes ct-route-old-back{to{opacity:0;transform:translate3d(12px,0,0) scale(.994);filter:blur(1.5px)}}
@keyframes ct-route-new-back{from{opacity:0;transform:translate3d(-22px,0,0) scale(.992);filter:blur(2px)}to{opacity:1;transform:none;filter:none}}

/* browsers without View Transitions still get a single soft arrival */
.app-view.ct-route-fallback-in > .route-stage > *{animation:ct-fallback-route 300ms var(--ct-motion-spring) both}
@keyframes ct-fallback-route{from{opacity:0;transform:translate3d(0,12px,0) scale(.995)}to{opacity:1;transform:none}}

/* ---------- card arrival + shuffle/deck language ---------- */
.ct-card-arrive{animation:ct-card-arrive 460ms var(--ct-motion-spring) both;animation-delay:min(calc(var(--ct-card-index,0) * 42ms),210ms)}
.ct-deck-card.ct-card-arrive{animation-name:ct-card-deck-arrive}
@keyframes ct-card-arrive{from{opacity:0;transform:translate3d(0,18px,0) scale(.985)}to{opacity:1;transform:none}}
@keyframes ct-card-deck-arrive{from{opacity:0;filter:blur(2px)}to{filter:none}}

@media(max-width:720px){
  /* One card owns the moment; the next one peeks in like a physical deck. */
  .browse-content-grid.ct-card-deck,
  .browse-ask-grid.ct-card-deck,
  .event-grid.ct-card-deck{
    display:flex!important;
    gap:12px;
    overflow-x:auto;
    overflow-y:visible;
    scroll-snap-type:x mandatory;
    scroll-padding-inline:0;
    overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
    padding:4px 10vw 16px 1px;
    scrollbar-width:none;
  }
  .ct-card-deck::-webkit-scrollbar{display:none}
  .ct-card-deck > .ct-deck-card{
    flex:0 0 88%;
    width:88%;
    max-width:88%;
    scroll-snap-align:start;
    scroll-snap-stop:always;
    transform-origin:50% 54%;
    opacity:.76;
    transform:translate3d(0,0,0) scale(.955) rotate(calc((var(--ct-card-index,0) - 1) * .32deg));
    transition:transform 440ms var(--ct-motion-spring),opacity 300ms ease,box-shadow 440ms var(--ct-motion-spring);
    will-change:transform,opacity;
  }
  .ct-card-deck > .ct-deck-card:nth-child(even){transform:translate3d(0,0,0) scale(.955) rotate(.7deg)}
  .ct-card-deck > .ct-deck-card:nth-child(odd){transform:translate3d(0,0,0) scale(.955) rotate(-.7deg)}
  .ct-card-deck > .ct-deck-card.ct-deck-active{
    opacity:1;
    transform:translate3d(0,-2px,0) scale(1) rotate(0deg);
    box-shadow:0 16px 34px color-mix(in srgb,var(--ct-ink) 10%,transparent);
  }
  .event-grid.ct-card-deck{margin-right:-18px}
  .event-grid.ct-card-deck > .event-card-full{min-width:0}
}


/* Message inbox feels continuous with the live thread rather than a hard screen swap. */
.dm-list .dm-row{animation:ct-inbox-row 360ms var(--ct-motion-spring) both}
.dm-list .dm-row:nth-child(2){animation-delay:35ms}.dm-list .dm-row:nth-child(3){animation-delay:70ms}.dm-list .dm-row:nth-child(4){animation-delay:105ms}.dm-list .dm-row:nth-child(5){animation-delay:140ms}.dm-list .dm-row:nth-child(n+6){animation-delay:165ms}
@keyframes ct-inbox-row{from{opacity:0;transform:translate3d(0,10px,0)}to{opacity:1;transform:none}}

/* ---------- live DM: no full-thread flash; bubbles glide into place ---------- */
.dm-msg.is-new{animation:ct-dm-in 360ms var(--ct-motion-spring) both}
.dm-msg.is-new.me{--ct-dm-x:18px}
.dm-msg.is-new.them{--ct-dm-x:-18px}
@keyframes ct-dm-in{from{opacity:0;transform:translate3d(var(--ct-dm-x),8px,0) scale(.94)}to{opacity:1;transform:none}}
.dm-msg.is-confirmed .bubble{animation:ct-dm-confirm 300ms var(--ct-motion-spring)}
@keyframes ct-dm-confirm{0%{transform:scale(.97)}60%{transform:scale(1.025)}100%{transform:scale(1)}}
.dm-day.is-new{animation:ct-day-in 280ms ease both}
@keyframes ct-day-in{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.dm-thread .dm-composer{transition:box-shadow 220ms ease,border-color 220ms ease}
.dm-thread .dm-input:focus{border-color:color-mix(in srgb,var(--ct-accent) 54%,var(--ct-line));box-shadow:0 0 0 4px color-mix(in srgb,var(--ct-accent) 9%,transparent)}

/* Tactile but restrained. */
@media(hover:hover){
  .browse-content-card[data-open-post]:hover,.event-card-full:hover{transform:translateY(-4px);box-shadow:0 18px 38px color-mix(in srgb,var(--ct-ink) 10%,transparent)}
  .pulse-lead:hover,.pulse-card:hover{transform:translateY(-3px);transition:transform 300ms var(--ct-motion-spring),box-shadow 300ms ease}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
  .app-view.ct-route-fallback-in > .route-stage > *, .ct-card-arrive,.dm-msg.is-new,.dm-msg.is-confirmed .bubble,.dm-day.is-new{animation:none!important}
  .ct-deck-card{transition:none!important;transform:none!important;opacity:1!important}
}


/* v1.18.8 — perceived-performance route handoff.
   Navigation chrome responds immediately; slow network reads hydrate into this
   neutral editorial loading state instead of leaving the previous page frozen. */
.route-stage-loading{min-height:58vh;display:grid;place-items:center;padding:48px 20px}
.route-loader{display:grid;justify-items:center;gap:8px;color:var(--ink-muted,#6f6a63);font-family:var(--font-sans,Inter,sans-serif);text-align:center}
.route-loader strong{font-family:var(--font-serif,Fraunces,serif);font-size:clamp(24px,3vw,38px);font-weight:560;color:var(--ink,#1c1916)}
.route-loader span:last-child{font-size:13px;letter-spacing:.02em}
.route-loader-mark{width:24px;height:24px;border:2px solid color-mix(in srgb,var(--coral,#d96a49) 34%,transparent);border-top-color:var(--coral,#d96a49);border-radius:50%;animation:ct-route-spin .72s linear infinite}
@keyframes ct-route-spin{to{transform:rotate(360deg)}}
.ct-content-ready>*{animation:ct-content-ready 220ms var(--ct-motion-soft) both}
@keyframes ct-content-ready{from{opacity:.35;transform:translateY(5px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.route-loader-mark{animation:none}.ct-content-ready>*{animation:none!important}}