/* ============================================================
   XDress "Atelier Noir" — Polish Layer (v3)
   Motion choreography, foil shimmer, cursor glow, micro-detail.
   Loaded after tokens / components / layout on every page.
   ============================================================ */

/* ---------------- Ambient grain ---------------- */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 300;
  pointer-events: none; opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}
:root[data-theme="light"] body::after { opacity: .035; }

/* ---------------- Ambient aurora — slow champagne drift ---------------- */
@media (prefers-reduced-motion: no-preference) {
  body::before {
    content: ""; position: fixed; inset: -25%; z-index: -1; pointer-events: none;
    background:
      radial-gradient(640px 420px at 18% 16%, color-mix(in oklab, var(--accent) 9%, transparent), transparent 70%),
      radial-gradient(760px 540px at 84% 72%, color-mix(in oklab, var(--accent) 6%, transparent), transparent 70%);
    animation: pol-aurora 30s ease-in-out infinite alternate;
  }
  @keyframes pol-aurora {
    from { transform: translate3d(-2.5%, -2%, 0) scale(1); }
    to   { transform: translate3d(2.5%, 3.5%, 0) scale(1.06); }
  }
  :root[data-theme="light"] body::before { opacity: .6; }
}

/* ---------------- Focus rings ---------------- */
:focus-visible { outline: 1.5px solid var(--accent-line); outline-offset: 2px; border-radius: 2px; }
.btn:focus-visible, .icon-btn:focus-visible, .chip:focus-visible { outline-offset: 1px; }

/* ---------------- Cards: hover depth + cursor-tracked glow ---------------- */
.card { position: relative; transition: border-color var(--t-med), box-shadow var(--t-med), transform var(--t-med); }
.card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-2); transform: translateY(-2px); }
.card::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  pointer-events: none; z-index: 1;
  background: radial-gradient(460px circle at var(--mx, 50%) var(--my, -20%),
    color-mix(in oklab, var(--accent) 12%, transparent), transparent 65%);
  opacity: 0; transition: opacity .45s var(--ease);
}
.card:hover::before { opacity: 1; }

/* diamond markers pivot on hover — a tiny mechanical delight */
.card-head::before, .tri-head::before { transition: transform .55s var(--ease), background var(--t-fast); }
.card:hover > .card-head::before, .tri-head:hover::before { transform: rotate(225deg); background: var(--accent); }

/* ---------------- Foil: sheen pass on load, slow live shimmer on hero ---------------- */
@media (prefers-reduced-motion: no-preference) {
  .foil {
    background-size: 220% 100%;
    animation: pol-foil-in 2.2s var(--ease) .35s backwards;
  }
  @keyframes pol-foil-in {
    from { background-position: 120% 0; }
    to   { background-position: 0% 0; }
  }
  /* the marquee number keeps breathing */
  .hero-num .foil {
    animation: pol-foil-in 2.2s var(--ease) .35s backwards,
               pol-foil-live 8s ease-in-out 3s infinite;
  }
  @keyframes pol-foil-live {
    0%, 100% { background-position: 0% 0; }
    50%      { background-position: 55% 0; }
  }
  /* featured fabric catches the light every few seconds */
  .feat-swatch::before {
    content: ""; position: absolute; inset: -50% -80%; z-index: 1;
    background: linear-gradient(115deg, transparent 42%, oklch(1 0 0 / .30) 50%, transparent 58%);
    transform: translateX(-95%);
    animation: pol-sheen 5.5s var(--ease) 2.2s infinite;
  }
  @keyframes pol-sheen {
    0%        { transform: translateX(-95%); }
    38%, 100% { transform: translateX(95%); }
  }
}

/* ---------------- Primary button: sheen sweep on hover ---------------- */
.btn-primary { position: relative; overflow: hidden; }
.btn-primary::after {
  content: ""; position: absolute; inset: -40% -60%;
  background: linear-gradient(105deg, transparent 40%, oklch(1 0 0 / .35) 50%, transparent 60%);
  transform: translateX(-80%); pointer-events: none;
}
.btn-primary:hover::after { transition: transform .65s var(--ease); transform: translateX(80%); }
html[dir="rtl"] .btn-primary::after { transform: translateX(80%); }
html[dir="rtl"] .btn-primary:hover::after { transform: translateX(-80%); }

/* ---------------- Topbar: shadow once scrolled ---------------- */
.topbar { transition: box-shadow var(--t-med), border-color var(--t-med); }
.topbar.scrolled { box-shadow: 0 10px 30px oklch(0 0 0 / .28); border-bottom-color: var(--border-strong); }
:root[data-theme="light"] .topbar.scrolled { box-shadow: 0 10px 30px oklch(0.35 0.04 70 / .12); }

/* ---------------- Page transitions ---------------- */
.app { transition: opacity .16s ease, transform .16s ease; }
body.pol-leave .app { opacity: 0; transform: translateY(5px); }

/* ============================================================
   Entrance choreography — animation-only (base state visible),
   gated on reduced motion. Injected content animates on insert.
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {

  @keyframes pol-rise { from { opacity: 0; transform: translateY(12px); } }
  @keyframes pol-fade { from { opacity: 0; } }
  @keyframes pol-grow-w { from { width: 0; } }
  @keyframes pol-wipe { from { clip-path: inset(0 100% 0 0); } }

  /* page sections cascade in */
  .page > * { animation: pol-rise .6s var(--ease) backwards; }
  .page > *:nth-child(1) { animation-delay: .05s; }
  .page > *:nth-child(2) { animation-delay: .13s; }
  .page > *:nth-child(3) { animation-delay: .21s; }
  .page > *:nth-child(4) { animation-delay: .29s; }
  .page > *:nth-child(n+5) { animation-delay: .36s; }

  /* grid cards stagger softly inside their section */
  .ov-grid > * { animation: pol-rise .6s var(--ease) backwards; }
  .ov-grid > *:nth-child(1) { animation-delay: .32s; }
  .ov-grid > *:nth-child(2) { animation-delay: .40s; }
  .ov-grid > *:nth-child(n+3) { animation-delay: .48s; }

  .hero-cell { animation: pol-rise .65s var(--ease) backwards; }
  .hero-cell:nth-child(2) { animation-delay: .10s; }
  .hero-cell:nth-child(3) { animation-delay: .18s; }

  .stat-cell { animation: pol-fade .7s var(--ease) backwards; }
  .stat-cell:nth-child(2) { animation-delay: .08s; }
  .stat-cell:nth-child(3) { animation-delay: .16s; }
  .stat-cell:nth-child(4) { animation-delay: .24s; }

  /* injected rows ripple in (also re-runs on rerender — intentional) */
  .insight, .today-row, .wl-row, .kcard, .client-li, .agenda-item, .tl-item {
    animation: pol-rise .45s var(--ease) backwards;
  }
  .insight:nth-child(2), .today-row:nth-child(2), .wl-row:nth-child(2),
  .kcard:nth-child(2), .client-li:nth-child(2), .agenda-item:nth-child(2), .tl-item:nth-child(2) { animation-delay: .06s; }
  .insight:nth-child(3), .today-row:nth-child(3), .wl-row:nth-child(3),
  .kcard:nth-child(3), .client-li:nth-child(3), .agenda-item:nth-child(3), .tl-item:nth-child(3) { animation-delay: .12s; }
  .insight:nth-child(4), .today-row:nth-child(4), .wl-row:nth-child(4),
  .kcard:nth-child(4), .client-li:nth-child(4), .agenda-item:nth-child(4), .tl-item:nth-child(4) { animation-delay: .18s; }
  .insight:nth-child(n+5), .today-row:nth-child(n+5), .wl-row:nth-child(n+5),
  .kcard:nth-child(n+5), .client-li:nth-child(n+5), .agenda-item:nth-child(n+5), .tl-item:nth-child(n+5) { animation-delay: .24s; }

  .tbl tbody tr { animation: pol-fade .35s var(--ease) backwards; }

  /* data fills grow into place */
  .hbar-fill, .funnel-bar > i, .progress > i, .meter-fill {
    animation: pol-grow-w .9s var(--ease) .25s backwards;
  }
  .hbar-row:nth-child(2) .hbar-fill, .funnel-row:nth-child(2) .funnel-bar > i { animation-delay: .33s; }
  .hbar-row:nth-child(3) .hbar-fill, .funnel-row:nth-child(3) .funnel-bar > i { animation-delay: .41s; }
  .hbar-row:nth-child(4) .hbar-fill, .funnel-row:nth-child(4) .funnel-bar > i { animation-delay: .49s; }
  .hbar-row:nth-child(5) .hbar-fill, .funnel-row:nth-child(5) .funnel-bar > i { animation-delay: .57s; }
  .hbar-row:nth-child(6) .hbar-fill, .funnel-row:nth-child(6) .funnel-bar > i { animation-delay: .65s; }

  /* segmented fleet bar wipes open */
  .fleet-bar { animation: pol-wipe 1s var(--ease) .4s backwards; }
  html[dir="rtl"] .fleet-bar { animation-name: pol-wipe-rtl; }
  @keyframes pol-wipe-rtl { from { clip-path: inset(0 0 0 100%); } }

  /* sparkline draws itself */
  .spark .spark-line { stroke-dasharray: 1; animation: pol-draw 1.5s var(--ease) .45s backwards; }
  @keyframes pol-draw { from { stroke-dashoffset: 1; } }
  .spark .spark-fill { animation: pol-fade 1s var(--ease) 1.2s backwards; }
}

/* sparkline endpoint — pulsing champagne ember */
.spark-wrap { position: relative; }
.spark-end {
  position: absolute; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); inset-inline-end: -2px;
  box-shadow: 0 0 0 0 color-mix(in oklab, var(--accent) 55%, transparent);
}
@media (prefers-reduced-motion: no-preference) {
  .spark-end { animation: pol-ember 2.6s var(--ease) 1.8s infinite; }
  @keyframes pol-ember {
    0%   { box-shadow: 0 0 0 0 color-mix(in oklab, var(--accent) 50%, transparent); }
    55%  { box-shadow: 0 0 0 9px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
  }
}

/* ---------------- Ring gauges (stat band) ---------------- */
.stat-ring { display: flex; align-items: center; gap: 13px; }
.ring { width: 44px; height: 44px; flex: none; transform: rotate(-90deg); }
.ring-track { fill: none; stroke: var(--neutral-soft); stroke-width: 2.5; }
.ring-fill {
  fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round;
  stroke-dasharray: var(--ring, 0) 100;
}
@media (prefers-reduced-motion: no-preference) {
  .ring-fill { animation: pol-ring 1.4s var(--ease) .45s backwards; }
  @keyframes pol-ring { from { stroke-dasharray: 0 100; } }
}

/* ---------------- Quiet refinements ---------------- */
.today-row { transition: background var(--t-fast), padding var(--t-fast); }
.today-row:hover { background: var(--accent-softer); }
.today-row .tr-num { transition: transform var(--t-med); }
.today-row:hover .tr-num { transform: scale(1.12); }

.sb-item .icon { transition: transform var(--t-med), color var(--t-fast); }
.sb-item:hover .icon { transform: translateY(-1px); }

.card-link { gap: 5px; }
.card-link::after { content: "→"; font-size: 11px; transition: transform var(--t-fast); display: inline-block; }
.card-link:hover::after { transform: translateX(2px); }
html[dir="rtl"] .card-link::after { content: "←"; }
html[dir="rtl"] .card-link:hover::after { transform: translateX(-2px); }

/* toast: foil hairline */
.toast { border-top: 1px solid var(--accent-line); }

/* ============================================================
   Clarity pass — bigger labels, brighter secondary text,
   visible helper lines. Professional, but effortless to read.
   ============================================================ */
:root[data-theme="light"] { --text-3: oklch(0.52 0.022 70); }

.mast-sub { font-size: var(--fs-md); color: var(--text-2); margin-top: 9px; max-width: 62ch; text-wrap: pretty; }

.stat-cell .sc-label { font-size: 11px; letter-spacing: .08em; color: var(--text-2); }
.sc-help { font-size: var(--fs-sm); color: var(--text-3); margin-top: 3px; letter-spacing: .01em; text-transform: none; }

.card-head h3, .tri-head { font-size: 11.5px; letter-spacing: .11em; }
.kpi-label { font-size: 11px; }
.today-row .tr-label { font-size: var(--fs-md); color: var(--text); }
.today-row { padding-block: 13px; }
.card-link { font-size: 10.5px; }
.btn { font-size: 11.5px; }
.insight .i-sub, .cell-sub { font-size: var(--fs-sm); }
.legend { font-size: var(--fs-base); }

/* ============================================================
   Tables v2 — calm, scannable, sortable
   ============================================================ */
.card .table-wrap { border-radius: inherit; overflow: hidden; overflow-x: auto; }
.tbl th {
  background: var(--panel-2); color: var(--text-2);
  padding: 12px 14px; font-size: 10.5px;
  cursor: pointer; user-select: none;
  transition: color var(--t-fast), background var(--t-fast);
}
.tbl th:hover { color: var(--text); background: var(--panel-3); }
.tbl th[data-sorted] { color: var(--accent); }
.tbl th[data-sorted]::after { content: " ▲"; font-size: 8px; vertical-align: 1px; }
.tbl th[data-sorted="desc"]::after { content: " ▼"; }
.tbl th:first-child, .tbl td:first-child { padding-inline-start: 18px; }
.tbl th:last-child, .tbl td:last-child { padding-inline-end: 18px; }
.tbl td { height: auto; padding-block: 10px; line-height: 1.45; }
.tbl tbody tr:nth-child(even) { background: var(--hover); }
.tbl tbody tr:hover { background: var(--accent-softer); }

/* 14-day availability strip — slimmer, calmer */
.avail-bar { gap: 2.5px; }
.avail-bar i { width: 5px; height: 13px; border-radius: 2px; }

@media print { body::after { display: none; } }