/* Prima Speak — shared UI primitives (buttons, links, chips, cards, fields, empty state, reveal + orb helpers).
   Page layouts live in css/site.css and css/dashboard.css. Every transition uses the tokens' eases. */
.container{max-width:var(--ps-max);margin:0 auto;padding-left:var(--ps-gutter);padding-right:var(--ps-gutter)}
.container-wide{max-width:1360px;margin:0 auto;padding-left:var(--ps-gutter);padding-right:var(--ps-gutter)}

/* ---- buttons: transform is composed from variables so magnetic (--mx/--my) and press (--s) never fight ---- */
.btn{--mx:0px;--my:0px;--s:1;position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:14px 24px;border-radius:var(--ps-r-pill);font-weight:600;font-size:.98rem;line-height:1;white-space:nowrap;
  border:1px solid transparent;transform:translate(var(--mx),var(--my)) scale(var(--s));
  transition:transform .42s var(--ps-ease-spring),background-color var(--ps-dur-2) var(--ps-ease-out),
    border-color var(--ps-dur-2) var(--ps-ease-out),box-shadow var(--ps-dur-2) var(--ps-ease-out),color var(--ps-dur-2) var(--ps-ease-out);
  will-change:transform}
.btn:active,.btn.is-pressed{--s:.95;transition-duration:.08s}
.btn .arrow{display:inline-block;transition:transform var(--ps-dur-2) var(--ps-ease-out)}
.btn:hover .arrow{transform:translateX(4px)}
.btn-primary{background:var(--ps-gold);color:var(--ps-gold-ink);box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 8px 24px rgba(245,185,66,.18)}
.btn-primary:hover{background:#FFC957;box-shadow:var(--ps-glow-gold)}
.btn-ghost{background:rgba(255,255,255,.04);color:var(--ps-text);border-color:var(--ps-line-2);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.btn-ghost:hover{border-color:var(--ps-line-3);background:rgba(255,255,255,.08)}
.btn-ink{background:var(--ps-paper-ink);color:var(--ps-paper)}
.btn-ink:hover{background:#2A2436}
.btn-paper{background:var(--ps-paper);color:var(--ps-paper-ink)}
.btn-paper:hover{background:#fff}
.btn-lg{padding:18px 30px;font-size:1.05rem}
.btn-sm{padding:10px 16px;font-size:.88rem}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.55;pointer-events:none}
.btn.is-busy{pointer-events:none}
.btn.is-busy .spinner{display:inline-block}
.spinner{display:none;width:14px;height:14px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:ps-spin .7s linear infinite}
@keyframes ps-spin{to{transform:rotate(360deg)}}
.btn.is-done{background:var(--ps-mint);color:var(--ps-mint-ink);border-color:transparent}

/* ---- text links: the arrow slides, or the underline reveals ---- */
.link-arrow{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--ps-text)}
.link-arrow .arrow{transition:transform var(--ps-dur-2) var(--ps-ease-out)}
.link-arrow:hover .arrow{transform:translateX(5px)}
.link-arrow:hover{color:var(--ps-gold)}
.link-underline{background:linear-gradient(currentColor,currentColor) no-repeat 0 100%/0 1px;transition:background-size var(--ps-dur-2) var(--ps-ease-out);padding-bottom:2px}
.link-underline:hover{background-size:100% 1px}

/* ---- chips, badges ---- */
.chip{display:inline-flex;align-items:center;gap:8px;font-family:var(--ps-mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ps-muted);border:1px solid var(--ps-line-2);background:rgba(255,255,255,.03);border-radius:var(--ps-r-pill);padding:7px 12px;line-height:1}
.chip .dot{width:6px;height:6px;border-radius:50%;background:var(--ps-coral);box-shadow:0 0 12px var(--ps-coral)}
.chip.gold{color:var(--ps-gold);border-color:rgba(245,185,66,.35);background:var(--ps-gold-soft)}
.chip.mint{color:var(--ps-mint);border-color:rgba(94,225,181,.35);background:var(--ps-mint-soft)}
.chip.violet{color:var(--ps-violet);border-color:rgba(139,124,255,.4);background:var(--ps-violet-soft)}
.badge{font-family:var(--ps-mono);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;border-radius:6px;padding:3px 7px;line-height:1.3}
.badge.gold{color:var(--ps-gold-ink);background:var(--ps-gold)}
.badge.soft{color:var(--ps-gold);background:var(--ps-gold-soft);border:1px solid rgba(245,185,66,.3)}

/* ---- cards ---- */
.card{background:var(--ps-surface);border:1px solid var(--ps-line);border-radius:var(--ps-r-lg);padding:28px}
.card-paper{background:var(--ps-paper);color:var(--ps-paper-ink);border-radius:var(--ps-r-lg);padding:clamp(28px,4vw,44px);box-shadow:var(--ps-shadow-paper)}
.card-paper .muted{color:var(--ps-paper-muted)}
.media{position:relative;overflow:hidden;border-radius:var(--ps-r-md);isolation:isolate}
.media>img,.media>picture,.media>.media-fill{display:block;width:100%;height:100%;object-fit:cover;transition:transform var(--ps-dur-3) var(--ps-ease-out);will-change:transform}
.card-hover:hover .media>img,.card-hover:hover .media>.media-fill,.card-hover:focus-within .media>img{transform:scale(1.05)}

/* ---- fields ---- */
.field{width:100%;background:var(--ps-ink);border:1px solid var(--ps-line-2);border-radius:14px;color:var(--ps-text);padding:14px 16px;font-size:1rem;
  transition:border-color var(--ps-dur-2) var(--ps-ease-out),box-shadow var(--ps-dur-2) var(--ps-ease-out)}
.field::placeholder{color:var(--ps-faint)}
.field:focus{outline:none;border-color:var(--ps-violet);box-shadow:0 0 0 4px var(--ps-violet-soft)}
.label{display:block;font-size:.85rem;color:var(--ps-muted);margin-bottom:8px}

/* ---- empty state: context + direction + action, never "No data" ---- */
.empty{display:flex;flex-direction:column;align-items:center;text-align:center;padding:clamp(32px,6vw,64px) clamp(20px,4vw,48px);
  border:1px dashed var(--ps-line-2);border-radius:var(--ps-r-lg);background:radial-gradient(60% 50% at 50% 0%,rgba(139,124,255,.08),transparent)}
.empty .art{width:min(180px,45vw);aspect-ratio:1;margin-bottom:20px;display:grid;place-items:center}
.empty .art img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 18px 30px rgba(0,0,0,.45))}
.empty h3{font-family:var(--ps-display);font-weight:500;font-size:1.5rem;letter-spacing:-.01em;margin:0 0 8px}
.empty p{color:var(--ps-muted);max-width:38ch;margin:0 0 22px}

/* ---- reveal (JS adds .is-in when the element enters the viewport) ---- */
[data-reveal="children"]>*{transition:opacity var(--ps-dur-4) var(--ps-ease-out),transform var(--ps-dur-4) var(--ps-ease-out)}
[data-reveal="children"]:not(.is-in)>*{opacity:0;transform:translateY(26px)}
[data-reveal="self"]{transition:opacity var(--ps-dur-4) var(--ps-ease-out),transform var(--ps-dur-4) var(--ps-ease-out)}
[data-reveal="self"]:not(.is-in){opacity:0;transform:translateY(26px)}
[data-reveal="clip"] .line{display:block;overflow:hidden;padding-bottom:.12em;margin-bottom:-.12em}
[data-reveal="clip"] .line>span{display:block;transform:translateY(112%);transition:transform 1s var(--ps-ease-out)}
[data-reveal="clip"].is-in .line>span{transform:none}
[data-reveal="clip"] .line:nth-child(2)>span{transition-delay:.1s}
[data-reveal="clip"] .line:nth-child(3)>span{transition-delay:.2s}
[data-reveal="mask"]{position:relative}
[data-reveal="mask"]::after{content:"";position:absolute;inset:0;background:var(--ps-bg);transform-origin:right;transition:transform 1s var(--ps-ease-in-out)}
[data-reveal="mask"].is-in::after{transform:scaleX(0)}
@media (prefers-reduced-motion:reduce){
  [data-reveal="children"]:not(.is-in)>*,[data-reveal="self"]:not(.is-in){opacity:1;transform:none}
  [data-reveal="clip"] .line>span{transform:none}
  [data-reveal="mask"]::after{display:none}
  .btn,.btn .arrow,.media>img{transition-duration:.01ms}
}

/* ---- dark mode done right: soft glowing orbs + a whisper of grain ---- */
.orbs{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.orb{position:absolute;border-radius:50%;filter:blur(64px);opacity:.75;will-change:transform;mix-blend-mode:screen}
.orb.gold{background:radial-gradient(circle,rgba(245,185,66,.9),rgba(245,185,66,0) 70%)}
.orb.coral{background:radial-gradient(circle,rgba(255,122,89,.85),rgba(255,122,89,0) 70%)}
.orb.rose{background:radial-gradient(circle,rgba(255,111,181,.75),rgba(255,111,181,0) 70%)}
.orb.violet{background:radial-gradient(circle,rgba(139,124,255,.85),rgba(139,124,255,0) 70%)}
.noise{position:absolute;inset:0;pointer-events:none;opacity:.045;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
@keyframes ps-drift{0%,100%{transform:translate3d(0,0,0) scale(1)}33%{transform:translate3d(4%,-6%,0) scale(1.06)}66%{transform:translate3d(-5%,4%,0) scale(.96)}}
.orb.drift{animation:ps-drift 18s var(--ps-ease-in-out) infinite}
.orb.drift.slow{animation-duration:26s;animation-delay:-8s}
@media (prefers-reduced-motion:reduce){.orb.drift{animation:none}}