/* ==========================================================================
   Y - OS V01D - v1o layer: Owner palette + "4D" motion (depth, parallax, spring)
   Loads after y-v1n.css. Anti-Twitter ethos unchanged: chronological, calm, no bait.
   Palette: base #050505 - panels #0a0a0c / #111216 - cobalt #1e4ed8 - small text #5b82ff
            uranium #d4ff00 (active items + warnings only) - text #e8e8ea - muted #8a8f98
   ========================================================================== */

/* ---------- one shared motion system (speeds + curves) ---------- */
:root{
  --y-t-1:120ms;   /* micro: press, hover colour        */
  --y-t-2:220ms;   /* standard: fades, toggles          */
  --y-t-3:383ms;   /* spring settle: modals, rise, route */
  --y-t-4:640ms;   /* depth drift: parallax catch-up     */
  --y-e-out:cubic-bezier(.2,.7,.2,1);
  --y-e-io:cubic-bezier(.65,0,.35,1);
  --y-e-spring:cubic-bezier(.34,1.36,.64,1);
  --y-depth:900px;
  --y-ease:var(--y-e-out);            /* v1n alias */
}
@supports (transition-timing-function:linear(0,1)){
  :root{--y-e-spring:linear(0,.009,.035 2.1%,.141 4.4%,.281 6.7%,.723 12.9%,.938 16.7%,1.017 20.4%,1.043 24.3%,1.035 28.1%,1.007 36.7%,.997 43.7%,1)}
}

/* ---------- Owner palette (dark is the Y default) ---------- */
html.dark{
  --y-bg:#050505;--y-panel:#0a0a0c;--y-panel-2:#111216;
  --y-ink:#e8e8ea;--y-muted:#8a8f98;--y-small:#5b82ff;
  --y-cobalt:#1e4ed8;--y-cobalt-mid:#2f5fe6;--y-cobalt-hot:#5b82ff;--y-uranium:#d4ff00;
  --y-line:rgb(30 78 216/.16);
  --y-glass:rgb(10 10 12/.80);--y-glass-2:rgb(17 18 22/.94);--y-glass-b:rgb(30 78 216/.28);
  --y-hover:rgb(30 78 216/.09);--y-focus:#5b82ff;
  --y-z1:inset 0 1px 0 rgb(255 255 255/.03),0 6px 18px rgb(0 0 0/.45);
  --y-z2:inset 0 1px 0 rgb(255 255 255/.04),0 14px 40px rgb(0 0 0/.55);
  --y-z3:inset 0 1px 0 rgb(255 255 255/.05),0 30px 90px rgb(0 0 0/.70);
  --y-shadow:var(--y-z2);
  --color-gray-900:5 5 5;--color-gray-800:17 18 22;--color-primary-900:10 10 12;--color-primary-800:17 18 22;
  --color-accent-500:30 78 216;
}
html.dark,html.dark body{color:var(--y-ink)}
/* static wallpaper (no JS / reduced motion): cobalt glow + faint grid, no uranium wash */
html.dark body{background:
   radial-gradient(900px 520px at 80% -5%,rgb(30 78 216/.20),transparent 60%),
   linear-gradient(rgb(30 78 216/.06) 1px,transparent 1px) 0 0/48px 48px,
   linear-gradient(90deg,rgb(30 78 216/.06) 1px,transparent 1px) 0 0/48px 48px,
   #050505!important;background-attachment:fixed!important}
html.dark.y-has-depth body{background:#050505!important}

/* uranium only for active items + warnings */
#y-topbar .y-glyph{background:var(--y-cobalt);color:#fff}
.y-ethos i{background:var(--y-cobalt-hot);box-shadow:0 0 6px rgb(91 130 255/.6)}
#y-topbar .y-dot{background:var(--y-cobalt-hot);box-shadow:0 0 6px rgb(91 130 255/.7)}
#y-topbar a.on,#y-topbar a[aria-current="page"]{background:rgb(30 78 216/.24);box-shadow:inset 0 -2px 0 var(--y-uranium)}          /* active = uranium */
.y-modal-h::before,#soapbox main::before{background:linear-gradient(90deg,var(--y-cobalt),var(--y-cobalt-hot))!important}
#soapbox main .sticky .bg-primary-500{background:var(--y-cobalt)!important}
.y-wel-ic{background:var(--y-cobalt);color:#fff;box-shadow:0 0 28px rgb(30 78 216/.45)}
#soapbox div:has(> img[src$="/images/banner.png"]),#soapbox div:has(> a > img[src$="/images/banner.png"]){background:
   linear-gradient(rgb(91 130 255/.10) 1px,transparent 1px) 0 0/24px 24px,
   linear-gradient(90deg,rgb(91 130 255/.10) 1px,transparent 1px) 0 0/24px 24px,
   linear-gradient(135deg,#0a0a0c,#1e4ed8 60%,#111216)!important}
#y-hector-hdr .title{color:var(--y-ink)!important;text-shadow:none!important}
#y-spectral-fallback a{color:var(--y-small)!important}
#y-hector-fab{box-shadow:0 8px 28px rgb(0 0 0/.55),0 0 0 1px rgb(30 78 216/.5)!important;filter:none!important}
#y-hector-fab:hover{filter:none!important}
.y-label-ann{color:var(--y-uranium)}                       /* announcements/warnings keep uranium */
.y-note-item.lvl-warn{border-color:rgb(212 255 0/.45);background:linear-gradient(90deg,rgb(212 255 0/.06),var(--y-glass))}
.y-sec h3,.y-kicker,.y-note-tx a,.y-sec a,.y-pv-body a,.y-pv-tag,.y-dg-badge,.y-dg-ic,.y-caught-ic{color:var(--y-small)}
html.dark .y-row select option{background:#111216}

/* ---------- depth: elevation tokens ---------- */
html.dark #y-topbar{background:rgb(10 10 12/.82)!important;box-shadow:var(--y-z1)}
html.dark .y-modal{background:var(--y-glass-2);box-shadow:var(--y-z3)}
html.dark .y-toast{box-shadow:var(--y-z2)}
html.dark .y-note-item,html.dark .y-digest,html.dark .y-threadbar,html.dark .y-preview{box-shadow:var(--y-z1)}

/* ---------- parallax layers (#y-depth is injected by y-v1o.js) ---------- */
#y-depth{position:fixed;inset:-48px;z-index:-1;pointer-events:none;overflow:hidden;contain:strict}
#y-depth i{position:absolute;inset:0;display:block;will-change:transform}
#y-depth .y-d-far{background:
   linear-gradient(rgb(30 78 216/.06) 1px,transparent 1px) 0 0/48px 48px,
   linear-gradient(90deg,rgb(30 78 216/.06) 1px,transparent 1px) 0 0/48px 48px;
  transform:translate3d(calc(var(--y-px,0)*-4px),calc(var(--y-py,0)*-4px - var(--y-sg,0px)),0)}
#y-depth .y-d-mid{background:radial-gradient(900px 520px at 80% -5%,rgb(30 78 216/.22),transparent 60%),radial-gradient(640px 420px at 10% 110%,rgb(30 78 216/.08),transparent 60%);
  transform:translate3d(calc(var(--y-px,0)*-12px),calc(var(--y-py,0)*-10px - var(--y-sm,0px)),0)}
#y-depth .y-d-near{background:radial-gradient(120% 90% at 50% 40%,transparent 60%,rgb(5 5 5/.65));
  transform:translate3d(calc(var(--y-px,0)*-20px),calc(var(--y-py,0)*-16px),0) scale(1.04)}
html:not(.dark) #y-depth{display:none}
html:not(.dark).y-has-depth body{background:var(--y-bg)!important}

/* ---------- spring transitions (all timings from the shared tokens) ---------- */
.y-btn,.y-pill,.y-mbtn,.y-ethos-b,.y-x,.y-live-badge,#y-topbar a,#y-topbar button{transition:background-color var(--y-t-1) var(--y-e-out),color var(--y-t-1) var(--y-e-out),border-color var(--y-t-1) var(--y-e-out),box-shadow var(--y-t-2) var(--y-e-out),transform var(--y-t-2) var(--y-e-spring)!important}
.y-btn:hover,.y-live-badge:hover{transform:translateY(-1px)}
.y-btn:active,.y-pill:active,.y-mbtn:active{transform:scale(.97)}
.y-switch{transition:background-color var(--y-t-2) var(--y-e-out)}
.y-knob{transition:transform var(--y-t-3) var(--y-e-spring)}
.y-dots span{transition:background-color var(--y-t-2) var(--y-e-out),width var(--y-t-3) var(--y-e-spring)}
.y-modal-wrap{animation:y-fade var(--y-t-2) var(--y-e-out)}
.y-modal-wrap.out{animation:y-fadeout var(--y-t-2) var(--y-e-io) forwards}
.y-modal{animation:y-pop4d var(--y-t-3) var(--y-e-spring);transform-origin:50% 0}
.y-toast{animation:y-rise var(--y-t-3) var(--y-e-spring)}
.y-toast.out{animation:y-fadeout var(--y-t-2) var(--y-e-io) forwards}
.y-note-item,.y-digest,.y-why,.y-restore,.y-alt-nudge,.y-preview{animation-duration:var(--y-t-2);animation-timing-function:var(--y-e-out)}
.y-caught{animation:y-fade var(--y-t-3) var(--y-e-out)}
@media (max-width:640px){.y-modal{animation:y-sheet var(--y-t-3) var(--y-e-spring)}}
/* posts rise once, from slightly behind the glass (y-v1o.js adds .y-rise the first time a post scrolls in) */
.y-rise{animation:y-rise var(--y-t-3) var(--y-e-spring) both}
#soapbox [data-y-rise="pending"]{opacity:0}
/* route change: the column settles forward */
.y-route-in{animation:y-route var(--y-t-3) var(--y-e-out) both}
@keyframes y-pop4d{from{opacity:0;transform:perspective(var(--y-depth)) translate3d(0,10px,-60px) rotateX(6deg)}to{opacity:1;transform:none}}
@keyframes y-rise{from{opacity:0;transform:perspective(var(--y-depth)) translate3d(0,12px,-24px) rotateX(3deg)}to{opacity:1;transform:none}}
@keyframes y-route{from{opacity:.001;transform:translate3d(0,6px,0)}to{opacity:1;transform:none}}
@keyframes y-sheet{from{transform:translate3d(0,48px,0);opacity:.4}to{transform:none;opacity:1}}

/* ---------- live-progress badge (links to www.doomchat.ca/live/) ---------- */
.y-live-badge{display:inline-flex!important;align-items:center;gap:6px;height:24px;padding:0 9px!important;border-radius:999px!important;border:1px solid var(--y-glass-b)!important;background:var(--y-panel,#0a0a0c)!important;color:var(--y-ink)!important;font:600 10.5px/1 var(--y-f-m)!important;letter-spacing:.08em;text-transform:uppercase;text-decoration:none!important;white-space:nowrap}
.y-live-badge .y-live-dot{width:6px;height:6px;border-radius:50%;background:var(--y-uranium);box-shadow:0 0 6px rgb(212 255 0/.55)}
.y-live-badge:hover{border-color:rgb(91 130 255/.55)!important;background:rgb(30 78 216/.16)!important}
.y-ethos .y-live-badge{margin-left:6px;height:22px;text-transform:uppercase}
@media (min-width:1024px){.y-ethos .y-live-badge{display:none!important}}
html:not(.dark) .y-live-badge{background:#fff!important;color:#0b1220!important}
html:not(.dark) .y-live-badge .y-live-dot{background:var(--y-cobalt);box-shadow:none}

/* ---------- reduced motion: static fallback (OS setting or Calm > Reduce motion) ---------- */
@media (prefers-reduced-motion:reduce){
  :root{--y-t-1:0ms;--y-t-2:0ms;--y-t-3:0ms;--y-t-4:0ms}
  #y-depth i{transform:none!important}
  .y-rise,.y-route-in{animation:none!important}
  #soapbox [data-y-rise]{opacity:1!important}
  .y-btn:hover,.y-live-badge:hover{transform:none}
}
html.y-reduce-motion,html.y-motion-static{--y-t-1:0ms;--y-t-2:0ms;--y-t-3:0ms;--y-t-4:0ms}
html.y-reduce-motion #y-depth i,html.y-motion-static #y-depth i{transform:none!important}
html.y-reduce-motion #soapbox [data-y-rise],html.y-motion-static #soapbox [data-y-rise]{opacity:1!important}
html.y-reduce-motion .y-rise,html.y-motion-static .y-rise,html.y-reduce-motion .y-route-in,html.y-motion-static .y-route-in{animation:none!important}