/* ============================================================================
   DeLaw — Motion & signature visuals
   Every colour is a token; every animation is off under prefers-reduced-motion and under the
   firm's own switch (html[data-motion="reduced"]). Motion here explains state (what arrived,
   what changed, what is live) — never decoration for its own sake.
   ============================================================================ */

/* ---------- the brand aurora: a slow, low-alpha light field over the navy chrome ---------- */
.aurora{ position:relative; isolation:isolate; overflow:hidden; }
.aurora::before,.aurora::after{ content:""; position:absolute; inset:-40%; z-index:-1; pointer-events:none;
  background:
    radial-gradient(42% 38% at 18% 22%, hsla(var(--brand-h),80%,62%,.34), transparent 60%),
    radial-gradient(36% 34% at 82% 18%, rgba(201,162,75,.22), transparent 62%),
    radial-gradient(44% 40% at 70% 86%, hsla(var(--brand-h),70%,45%,.30), transparent 60%);
  filter:blur(28px); animation:auroraDrift 26s ease-in-out infinite alternate; }
.aurora::after{ background:
    radial-gradient(30% 28% at 60% 40%, rgba(201,162,75,.16), transparent 60%),
    radial-gradient(38% 36% at 24% 78%, hsla(var(--brand-h),85%,70%,.22), transparent 60%);
  animation-duration:34s; animation-direction:alternate-reverse; }
@keyframes auroraDrift{ 0%{ transform:translate3d(-4%, -3%, 0) rotate(0deg) scale(1) } 50%{ transform:translate3d(3%, 4%, 0) rotate(6deg) scale(1.08) } 100%{ transform:translate3d(-2%, 5%, 0) rotate(-4deg) scale(1.03) } }
.auth-brand.aurora .auth-brand-inner{ position:relative; z-index:1; }

/* ---------- the mark: the scale settles on entry ---------- */
.mark-settle .logo svg{ transform-origin:50% 20%; animation:markSettle 1.4s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes markSettle{ 0%{ transform:rotate(-14deg) scale(.86); opacity:0 } 55%{ transform:rotate(5deg) scale(1.04); opacity:1 } 100%{ transform:none } }

/* ---------- reveal on scroll / on render: cards and rows rise into place ---------- */
[data-reveal]{ opacity:0; transform:translateY(10px); transition:opacity .5s var(--ease), transform .55s cubic-bezier(.2,.7,.2,1); will-change:opacity,transform; }
[data-reveal].in{ opacity:1; transform:none; }
.stagger>[data-reveal]:nth-child(2){ transition-delay:.05s } .stagger>[data-reveal]:nth-child(3){ transition-delay:.10s } .stagger>[data-reveal]:nth-child(4){ transition-delay:.15s } .stagger>[data-reveal]:nth-child(5){ transition-delay:.20s } .stagger>[data-reveal]:nth-child(6){ transition-delay:.25s } .stagger>[data-reveal]:nth-child(n+7){ transition-delay:.30s }
.vfade{ animation:viewIn .32s cubic-bezier(.2,.7,.2,1); }

/* ---------- numbers count up; the digits are tabular so nothing jitters ---------- */
[data-count]{ font-variant-numeric:tabular-nums; }
.kpi .kpi-val{ transition:color .3s; }
.kpi.elevate{ transition:transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s, border-color .3s; }
.kpi.elevate:hover{ transform:translateY(-3px); box-shadow:var(--shadow); border-color:var(--brand-200); }

/* ---------- cursor glow on elevated cards (the --mx/--my vars come from motion.js) ---------- */
.card.elevate,.kpi.elevate{ position:relative; overflow:hidden; --mx:50%; --my:50%; }
.card.elevate::after,.kpi.elevate::after{ content:""; position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .35s;
  background:radial-gradient(260px circle at var(--mx) var(--my), hsla(var(--brand-h),80%,62%,.10), transparent 45%); }
.card.elevate:hover::after,.kpi.elevate:hover::after{ opacity:1; }
html[data-theme="dark"] .card.elevate::after,html[data-theme="dark"] .kpi.elevate::after{ background:radial-gradient(260px circle at var(--mx) var(--my), hsla(var(--brand-h),80%,70%,.14), transparent 45%); }

/* ---------- press ripple on buttons ---------- */
.btn{ position:relative; overflow:hidden; }
.btn .ripple{ position:absolute; border-radius:50%; transform:scale(0); pointer-events:none; background:currentColor; opacity:.18; animation:ripple .55s ease-out forwards; }
@keyframes ripple{ to{ transform:scale(2.6); opacity:0 } }

/* ---------- charts draw themselves in ---------- */
svg.chart-anim path[stroke]{ stroke-dasharray:1600; stroke-dashoffset:1600; animation:drawLine 1.2s cubic-bezier(.4,0,.2,1) forwards; }
svg.chart-anim path[fill]:not([fill="none"]){ opacity:0; animation:fadeIn .8s .5s forwards; }
svg.chart-anim rect{ transform-box:fill-box; transform-origin:50% 100%; animation:growBar .7s cubic-bezier(.2,.7,.2,1) both; }
svg.chart-anim rect:nth-child(2n){ animation-delay:.06s } svg.chart-anim rect:nth-child(3n){ animation-delay:.12s }
svg.chart-anim circle[stroke]{ stroke-dasharray:1200; stroke-dashoffset:1200; animation:drawLine 1.1s .1s cubic-bezier(.4,0,.2,1) forwards; }
@keyframes drawLine{ to{ stroke-dashoffset:0 } } @keyframes growBar{ from{ transform:scaleY(0) } to{ transform:scaleY(1) } } @keyframes fadeIn{ to{ opacity:1 } }
.minibars i{ transform-origin:50% 100%; animation:growBar .6s cubic-bezier(.2,.7,.2,1) both; }

/* ---------- the day ring: how ready today is ---------- */
.ring{ position:relative; width:88px; height:88px; flex:none; }
.ring svg{ transform:rotate(-90deg); display:block; }
.ring .track{ stroke:var(--line); } .ring .bar{ stroke:var(--brand-500); stroke-linecap:round; transition:stroke-dashoffset 1.2s cubic-bezier(.2,.7,.2,1); }
.ring .bar.ok{ stroke:var(--success-500); } .ring .bar.warn{ stroke:var(--warn-500); } .ring .bar.bad{ stroke:var(--danger-500); }
.ring .lbl{ position:absolute; inset:0; display:grid; place-items:center; font-weight:800; font-size:18px; color:var(--ink); font-variant-numeric:tabular-nums; }
.ring .lbl small{ display:block; font-size:9.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); }

/* ---------- the morning brief card ---------- */
.brief{ position:relative; overflow:hidden; border:1px solid var(--brand-100); border-radius:var(--radius-lg); padding:20px 22px; background:linear-gradient(135deg,var(--surface),var(--brand-50)); }
html[data-theme="dark"] .brief{ background:linear-gradient(135deg,var(--surface),var(--brand-50)); border-color:var(--line); }
.brief .brief-aurora{ position:absolute; inset:-30% -10% auto auto; width:46%; height:160%; pointer-events:none; filter:blur(30px); opacity:.55;
  background:radial-gradient(closest-side, hsla(var(--brand-h),80%,62%,.22), transparent 70%), radial-gradient(closest-side at 70% 70%, rgba(201,162,75,.18), transparent 70%); animation:auroraDrift 22s ease-in-out infinite alternate; }
.brief>*{ position:relative; }
.brief .greet{ font-family:var(--font-display); font-size:26px; line-height:1.1; letter-spacing:-.01em; color:var(--ink); }
.brief .greet .w{ display:inline-block; opacity:0; transform:translateY(8px); animation:wordIn .55s cubic-bezier(.2,.7,.2,1) forwards; }
@keyframes wordIn{ to{ opacity:1; transform:none } }
.brief-chips{ display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
.brief-chip{ display:inline-flex; align-items:center; gap:7px; padding:7px 11px; border-radius:999px; background:var(--surface); border:1px solid var(--line); font-size:12.5px; font-weight:600; color:var(--ink-2); box-shadow:var(--shadow-xs); }
.brief-chip b{ color:var(--ink); font-variant-numeric:tabular-nums; }
.brief-chip .dotp{ width:8px; height:8px; border-radius:50%; background:var(--brand-500); position:relative; }
.brief-chip .dotp.live::after{ content:""; position:absolute; inset:-3px; border-radius:50%; border:2px solid var(--brand-400); animation:ping 1.6s ease-out infinite; }
.brief-chip .dotp.ok{ background:var(--success-500) } .brief-chip .dotp.warn{ background:var(--warn-500) } .brief-chip .dotp.bad{ background:var(--danger-500) }
.nudge{ display:flex; gap:12px; align-items:flex-start; padding:11px 12px; border-radius:12px; background:var(--surface); border:1px solid var(--line-2); transition:transform .25s, box-shadow .25s, border-color .25s; }
.nudge:hover{ transform:translateX(3px); box-shadow:var(--shadow-sm); border-color:var(--brand-200); }
.nudge .n-ic{ width:34px; height:34px; border-radius:10px; display:grid; place-items:center; flex:none; }
.nudge .n-ic.critical{ background:var(--danger-50); color:var(--danger-text) } .nudge .n-ic.high{ background:var(--warn-50); color:var(--warn-text) } .nudge .n-ic.normal{ background:var(--brand-50); color:var(--brand-text) } .nudge .n-ic.good{ background:var(--success-50); color:var(--success-text) }
.nudge .n-t{ font-weight:650; font-size:13.5px; color:var(--ink); } .nudge .n-b{ font-size:12.5px; color:var(--ink-3); margin-top:2px; line-height:1.45; }
.nudge .n-act{ display:flex; gap:6px; margin-top:8px; flex-wrap:wrap; }
.nudge.leaving{ animation:nudgeOut .35s ease-in forwards; }
@keyframes nudgeOut{ to{ opacity:0; transform:translateX(24px); max-height:0; padding-top:0; padding-bottom:0; margin:0 } }

/* ---------- the bell notices ---------- */
@keyframes bellRing{ 0%,100%{ transform:rotate(0) } 15%{ transform:rotate(14deg) } 30%{ transform:rotate(-12deg) } 45%{ transform:rotate(9deg) } 60%{ transform:rotate(-6deg) } 75%{ transform:rotate(3deg) } }
.topbar-btn.ringing svg{ transform-origin:50% 10%; animation:bellRing 1s ease-in-out 1; }
.ncount{ animation:pop .35s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes pop{ from{ transform:scale(.4) } to{ transform:scale(1) } }

/* ---------- today in the diary, live now, countdown chips ---------- */
.today-dot{ position:relative; } .today-dot::after{ content:""; position:absolute; inset:-4px; border-radius:50%; border:2px solid var(--brand-400); animation:ping 1.8s ease-out infinite; }
.live-pill{ display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--danger-text); }
.live-pill::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--danger-500); box-shadow:0 0 0 0 var(--danger-500); animation:livePulse 1.4s ease-out infinite; }
@keyframes livePulse{ 70%{ box-shadow:0 0 0 7px hsla(0,80%,60%,0) } 100%{ box-shadow:0 0 0 0 hsla(0,80%,60%,0) } }
.countdown{ font-variant-numeric:tabular-nums; transition:color .4s, background .4s; }

/* ---------- celebration canvas ---------- */
#celebrate{ position:fixed; inset:0; z-index:3000; pointer-events:none; }

/* ---------- toasts spring in ---------- */
.toast{ animation:toastSpring .55s cubic-bezier(.34,1.4,.64,1) both; }
@keyframes toastSpring{ from{ opacity:0; transform:translateX(36px) scale(.94) } to{ opacity:1; transform:none } }

/* ---------- skeleton shimmer is the same everywhere ---------- */
.skeleton,.skel{ background:linear-gradient(90deg, var(--surface-3) 25%, var(--hover) 50%, var(--surface-3) 75%); background-size:200% 100%; animation:shimmer 1.4s linear infinite; }

/* ---------- sidebar: the active item glides, the group labels breathe in ---------- */
.nav-item{ transition:background .2s, color .2s, transform .2s; } .nav-item:active{ transform:scale(.985); }

/* ---------- the switch and the guard ---------- */
html[data-motion="reduced"] .aurora::before,html[data-motion="reduced"] .aurora::after,html[data-motion="reduced"] .brief .brief-aurora{ animation:none; }
html[data-motion="reduced"] [data-reveal]{ opacity:1; transform:none; transition:none; }
html[data-motion="reduced"] .brief .greet .w{ opacity:1; transform:none; animation:none; }
html[data-motion="reduced"] svg.chart-anim path[stroke],html[data-motion="reduced"] svg.chart-anim circle[stroke]{ stroke-dashoffset:0; animation:none; }
html[data-motion="reduced"] svg.chart-anim rect,html[data-motion="reduced"] .minibars i,html[data-motion="reduced"] svg.chart-anim path[fill]{ animation:none; opacity:1; transform:none; }
html[data-motion="reduced"] .btn .ripple,html[data-motion="reduced"] .mark-settle .logo svg,html[data-motion="reduced"] .topbar-btn.ringing svg{ animation:none; }
@media (prefers-reduced-motion: reduce){
  .aurora::before,.aurora::after,.brief .brief-aurora,.brief .greet .w,.mark-settle .logo svg,.btn .ripple,.topbar-btn.ringing svg{ animation:none !important; opacity:1; transform:none; }
  [data-reveal]{ opacity:1; transform:none; transition:none; }
  svg.chart-anim path[stroke],svg.chart-anim circle[stroke]{ stroke-dashoffset:0; animation:none; } svg.chart-anim rect,.minibars i,svg.chart-anim path[fill]{ animation:none; opacity:1; transform:none; }
}