/* ============================================================
   TrackCue V4 — Transitions & Micro-Interactions
   "UX de ouf" — page transitions, ripple, stagger reveals
   ============================================================ */

/* ---------- 0. Reduced motion guard ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}

/* ---------- 1. Easings & timings ---------- */
:root{
  --ease-out-expo:cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart:cubic-bezier(0.25, 1, 0.5, 1);
  --ease-spring:cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-in-out-quart:cubic-bezier(0.76, 0, 0.24, 1);
  --t-fast:160ms;
  --t-base:280ms;
  --t-slow:520ms;
}

/* ---------- 2. View Transitions API (cross-page) ---------- */
@view-transition{ navigation:auto; }
::view-transition-old(root){
  animation:cf-vt-out var(--t-base) var(--ease-out-quart) forwards;
}
::view-transition-new(root){
  animation:cf-vt-in var(--t-slow) var(--ease-out-expo) forwards;
}
@keyframes cf-vt-out{
  to{opacity:0; transform:translateY(-6px) scale(.992); filter:blur(2px)}
}
@keyframes cf-vt-in{
  from{opacity:0; transform:translateY(10px) scale(.994); filter:blur(4px)}
  to  {opacity:1; transform:none; filter:blur(0)}
}

/* ---------- 3. Page-load fade fallback ---------- */
html.cf-page-enter body{
  animation:cf-page-enter var(--t-slow) var(--ease-out-expo) both;
}
@keyframes cf-page-enter{
  from{opacity:0; transform:translateY(8px); filter:blur(3px)}
  to  {opacity:1; transform:none; filter:none}
}

html.cf-page-leave body{
  animation:cf-page-leave var(--t-base) var(--ease-in-out-quart) forwards;
  pointer-events:none;
}
@keyframes cf-page-leave{
  to{opacity:0; transform:translateY(-4px) scale(.995); filter:blur(2px)}
}

/* ---------- 4. Buttons — universal micro-interaction ---------- */
button,
.btn,
.button,
[role="button"],
a.btn,
a.button{
  position:relative;
  overflow:hidden;
  transition:
    transform var(--t-fast) var(--ease-out-quart),
    box-shadow var(--t-base) var(--ease-out-quart),
    background-color var(--t-base) var(--ease-out-quart),
    border-color var(--t-base) var(--ease-out-quart),
    color var(--t-base) var(--ease-out-quart);
  will-change:transform;
}

button:hover:not(:disabled),
.btn:hover:not(:disabled),
.button:hover:not(:disabled),
a.btn:hover,
a.button:hover{
  transform:translateY(-1px);
}

button:active:not(:disabled),
.btn:active:not(:disabled),
.button:active:not(:disabled),
a.btn:active,
a.button:active,
[role="button"]:active{
  transform:translateY(0) scale(.972);
  transition-duration:80ms;
}

button:focus-visible,
.btn:focus-visible,
.button:focus-visible,
[role="button"]:focus-visible{
  outline:none;
  box-shadow:0 0 0 2px var(--s-0,#050406),0 0 0 4px var(--amber,#ff7a18);
}

/* Ripple */
.cf-ripple{
  position:absolute;
  border-radius:50%;
  pointer-events:none;
  background:radial-gradient(circle, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 70%);
  transform:scale(0);
  animation:cf-ripple-out 620ms var(--ease-out-expo) forwards;
  mix-blend-mode:screen;
  z-index:0;
}
@keyframes cf-ripple-out{
  to{transform:scale(2.6); opacity:0}
}

button > *,
.btn > *,
.button > *{ position:relative; z-index:1 }

/* ---------- 5. Cards — hover lift ---------- */
.card,
.tile,
.track-card,
.track-row,
.set-card,
.kpi-card{
  transition:
    transform var(--t-base) var(--ease-out-quart),
    box-shadow var(--t-base) var(--ease-out-quart),
    border-color var(--t-base) var(--ease-out-quart);
  will-change:transform;
}
.card:hover,
.tile:hover,
.set-card:hover,
.kpi-card:hover{
  transform:translateY(-3px);
  box-shadow:var(--e-3, 0 12px 32px rgba(0,0,0,.32));
  border-color:var(--b-strong, rgba(255,255,255,.18));
}

/* ---------- 6. Stagger reveal ---------- */
.cf-reveal{
  opacity:0;
  transform:translateY(14px);
  filter:blur(4px);
  transition:
    opacity var(--t-slow) var(--ease-out-expo),
    transform var(--t-slow) var(--ease-out-expo),
    filter var(--t-slow) var(--ease-out-expo);
  transition-delay:calc(var(--i, 0) * 60ms);
}
.cf-reveal.cf-in{
  opacity:1;
  transform:none;
  filter:none;
}

/* ---------- 7. Liens — underline gliss ---------- */
a:not(.btn):not(.button):not(.nav-item):not([class*="tab"]){
  background-image:linear-gradient(currentColor,currentColor);
  background-size:0% 1px;
  background-repeat:no-repeat;
  background-position:0 100%;
  transition:background-size var(--t-base) var(--ease-out-quart), color var(--t-fast) ease;
}
a:not(.btn):not(.button):not(.nav-item):not([class*="tab"]):hover{
  background-size:100% 1px;
}

/* ---------- 8. Inputs — focus ring smooth ---------- */
input,
select,
textarea{
  transition:
    border-color var(--t-base) var(--ease-out-quart),
    box-shadow var(--t-base) var(--ease-out-quart),
    background-color var(--t-base) var(--ease-out-quart);
}
input:focus,
select:focus,
textarea:focus{
  outline:none;
  border-color:var(--amber, #ff7a18);
  box-shadow:0 0 0 4px var(--amber-soft, rgba(255,122,24,.16));
}

/* ---------- 9. Modals / Dialogs ---------- */
.modal,
[role="dialog"],
.dialog,
.cf-modal{
  animation:cf-modal-in var(--t-base) var(--ease-out-expo) both;
}
.modal-backdrop,
.cf-backdrop{
  animation:cf-backdrop-in var(--t-base) var(--ease-out-quart) both;
  backdrop-filter:blur(0);
}
@keyframes cf-modal-in{
  from{opacity:0; transform:translateY(20px) scale(.96)}
  to  {opacity:1; transform:none}
}
@keyframes cf-backdrop-in{
  from{opacity:0; backdrop-filter:blur(0)}
  to  {opacity:1; backdrop-filter:blur(8px)}
}

/* ---------- 10. Toasts ---------- */
.toast,
.cf-toast{
  animation:cf-toast-in 480ms var(--ease-spring) both;
}
@keyframes cf-toast-in{
  from{opacity:0; transform:translateY(-20px) scale(.92)}
  to  {opacity:1; transform:none}
}
.toast.leaving,
.cf-toast.leaving{
  animation:cf-toast-out var(--t-base) var(--ease-in-out-quart) forwards;
}
@keyframes cf-toast-out{
  to{opacity:0; transform:translateY(-12px) scale(.96)}
}

/* ---------- 11. Tabs / Nav active underline ---------- */
.nav-item,
[class*="tab"],
.menu-item{
  position:relative;
  transition:
    color var(--t-base) var(--ease-out-quart),
    background-color var(--t-base) var(--ease-out-quart);
}
.nav-item::after,
[class*="tab"]::after{
  content:"";
  position:absolute;
  left:12px; right:12px; bottom:0;
  height:2px;
  background:linear-gradient(90deg, var(--amber,#ff7a18), var(--pink,#ff2e6b));
  border-radius:2px;
  transform:scaleX(0);
  transform-origin:left;
  transition:transform var(--t-base) var(--ease-out-expo);
}
.nav-item.active::after,
.nav-item[aria-current="page"]::after,
[class*="tab"].active::after,
[class*="tab"][aria-selected="true"]::after{
  transform:scaleX(1);
}

/* ---------- 12. Loading state pour boutons ---------- */
.cf-loading{
  pointer-events:none;
  position:relative;
  color:transparent !important;
}
.cf-loading::after{
  content:"";
  position:absolute;
  inset:0;
  margin:auto;
  width:18px; height:18px;
  border:2px solid rgba(255,255,255,.25);
  border-top-color:var(--amber, #ff7a18);
  border-radius:50%;
  animation:cf-spin .7s linear infinite;
}
@keyframes cf-spin{to{transform:rotate(360deg)}}

/* ---------- 13. Skeleton shimmer ---------- */
.skeleton,
.cf-skeleton{
  background:linear-gradient(
    90deg,
    var(--s-2, #12111a) 0%,
    var(--s-3, #1a1926) 50%,
    var(--s-2, #12111a) 100%
  );
  background-size:200% 100%;
  animation:cf-shimmer 1.4s linear infinite;
  border-radius:8px;
}
@keyframes cf-shimmer{
  from{background-position:200% 0}
  to  {background-position:-200% 0}
}

/* ---------- 14. KPI ticker ---------- */
.cf-tick{
  display:inline-block;
  animation:cf-tick-in var(--t-slow) var(--ease-out-expo) both;
}
@keyframes cf-tick-in{
  from{opacity:0; transform:translateY(8px)}
  to  {opacity:1; transform:none}
}

/* ---------- 15. Route overlay (page-leave veil) ---------- */
.cf-route-overlay{
  position:fixed;
  inset:0;
  background:linear-gradient(180deg, rgba(5,4,6,0) 0%, rgba(5,4,6,.55) 100%);
  pointer-events:none;
  opacity:0;
  z-index:9999;
  transition:opacity var(--t-base) var(--ease-out-quart);
}
html.cf-page-leave .cf-route-overlay{ opacity:1; }

/* ---------- 16. Top progress bar (route loader) ---------- */
.cf-progress{
  position:fixed;
  top:0; left:0;
  height:2px;
  width:0%;
  background:linear-gradient(90deg, var(--amber,#ff7a18), var(--pink,#ff2e6b), var(--violet,#8b5cf6));
  background-size:200% 100%;
  z-index:10000;
  box-shadow:0 0 12px var(--amber-glow, rgba(255,122,24,.38));
  transition:width 280ms var(--ease-out-quart), opacity 200ms;
  animation:cf-progress-bg 1.6s linear infinite;
}
.cf-progress.done{ opacity:0; }
@keyframes cf-progress-bg{
  from{background-position:0 0}
  to  {background-position:200% 0}
}

/* ============================================================
   Pack 1-6 — UX premium additions (2026-04-27)
   ============================================================ */

/* ---------- PACK 1 : Track morph (library → analyze) ---------- */
::view-transition-old(cf-track-cover),
::view-transition-new(cf-track-cover),
::view-transition-old(cf-track-title),
::view-transition-new(cf-track-title),
::view-transition-old(cf-track-bpm),
::view-transition-new(cf-track-bpm){
  animation-duration:560ms;
  animation-timing-function:var(--ease-out-expo);
  mix-blend-mode:normal;
}
::view-transition-group(cf-track-cover),
::view-transition-group(cf-track-title),
::view-transition-group(cf-track-bpm){
  animation-duration:600ms;
  animation-timing-function:var(--ease-out-expo);
}

/* ---------- PACK 2 : Waveform reveal sweep ---------- */
.cf-wave-reveal{
  position:relative;
  -webkit-mask-image:linear-gradient(90deg, #000 0%, #000 0%, transparent 0%);
          mask-image:linear-gradient(90deg, #000 0%, #000 0%, transparent 0%);
  -webkit-mask-size:100% 100%;
          mask-size:100% 100%;
  animation:cf-wave-sweep 1100ms var(--ease-out-expo) both;
}
@keyframes cf-wave-sweep{
  0%{
    -webkit-mask-image:linear-gradient(90deg, #000 -10%, transparent 0%);
            mask-image:linear-gradient(90deg, #000 -10%, transparent 0%);
  }
  100%{
    -webkit-mask-image:linear-gradient(90deg, #000 100%, transparent 110%);
            mask-image:linear-gradient(90deg, #000 100%, transparent 110%);
  }
}
.cf-wave-reveal::after{
  content:"";
  position:absolute;
  top:0; bottom:0;
  width:64px;
  pointer-events:none;
  background:linear-gradient(90deg,
    transparent 0%,
    rgba(255,122,24,.18) 30%,
    rgba(255,46,107,.42) 50%,
    rgba(139,92,246,.18) 70%,
    transparent 100%);
  filter:blur(8px);
  mix-blend-mode:screen;
  animation:cf-wave-flare 1100ms var(--ease-out-expo) both;
  z-index:5;
}
@keyframes cf-wave-flare{
  from{left:-80px;  opacity:0}
  20% {opacity:1}
  80% {opacity:1}
  to  {left:calc(100% + 8px); opacity:0}
}

/* ---------- PACK 3 : Magnetic CTAs + hero parallax ---------- */
.cf-magnetic{
  transition:transform 420ms var(--ease-spring), box-shadow var(--t-base) var(--ease-out-quart);
  will-change:transform;
}
/* Hero parallax — on définit des vars qu'on bind via JS */
.hero,
.hero-grid{
  --cf-px:0;
  --cf-py:0;
}
.hero::before{
  transition:transform 600ms var(--ease-out-quart);
  transform:translate3d(calc(var(--cf-px)*1px), calc(var(--cf-py)*1px), 0);
}

/* ---------- PACK 4 : Sliding tab indicator (FLIP) ---------- */
.cf-tabs-track{
  position:absolute;
  bottom:0;
  height:2px;
  border-radius:2px;
  background:linear-gradient(90deg, var(--amber,#ff7a18), var(--pink,#ff2e6b), var(--violet,#8b5cf6));
  background-size:200% 100%;
  animation:cf-progress-bg 2.4s linear infinite;
  pointer-events:none;
  transform-origin:left;
  transition:transform 360ms var(--ease-out-expo), width 360ms var(--ease-out-expo), opacity 200ms;
  box-shadow:0 0 12px var(--amber-glow, rgba(255,122,24,.4));
  z-index:1;
}
/* Quand le slider est actif on cache l'underline ::after par tab */
.cf-tabs-host .nav-item::after,
.cf-tabs-host [class*="tab"]::after,
.cf-tabs-host .view-chip::after{ display:none !important; }

/* ---------- PACK 5 : Play button → EQ bars morph ---------- */
.cf-eq{
  display:inline-flex;
  align-items:flex-end;
  gap:2px;
  width:14px;
  height:14px;
}
.cf-eq span{
  display:block;
  width:3px;
  background:currentColor;
  border-radius:1px;
  transform-origin:bottom;
  animation:cf-eq-bar 880ms var(--ease-in-out-quart) infinite;
}
.cf-eq span:nth-child(1){ height:60%; animation-delay:-.2s }
.cf-eq span:nth-child(2){ height:100%; animation-delay:-.55s }
.cf-eq span:nth-child(3){ height:80%;  animation-delay:-.85s }
@keyframes cf-eq-bar{
  0%,100%{ transform:scaleY(.35) }
  50%    { transform:scaleY(1) }
}
/* Quand un bouton .play porte .cf-playing on cache le svg et on injecte les bars (JS) */
.play.cf-playing svg{ display:none }
.play.cf-playing{
  background:linear-gradient(135deg, var(--amber,#ff7a18), var(--pink,#ff2e6b)) !important;
  color:#0b0a0f !important;
  box-shadow:0 0 18px var(--amber-glow, rgba(255,122,24,.5));
}

/* ---------- PACK 6 : Hot cue ripple + glow pulse ---------- */
.cf-cue-pulse{
  animation:cf-cue-pulse 720ms var(--ease-out-expo) both;
}
@keyframes cf-cue-pulse{
  0%   { transform:translateX(-50%) scale(.4); filter:brightness(2) drop-shadow(0 0 10px currentColor); }
  60%  { transform:translateX(-50%) scale(1.18); filter:brightness(1.4) drop-shadow(0 0 14px currentColor); }
  100% { transform:translateX(-50%) scale(1);    filter:brightness(1)   drop-shadow(0 0 0 currentColor); }
}
.cue-marker.cf-cue-pulse .cue-tip{
  animation:cf-cue-tip-glow 720ms var(--ease-out-expo) both;
}
@keyframes cf-cue-tip-glow{
  0%  { box-shadow:0 0 0 0 currentColor }
  60% { box-shadow:0 0 0 8px transparent }
  100%{ box-shadow:0 0 0 0 transparent }
}

/* Ripple radial spawné par JS au point de pose du cue */
.cf-cue-ripple{
  position:absolute;
  border-radius:50%;
  pointer-events:none;
  width:8px; height:8px;
  margin-left:-4px; margin-top:-4px;
  animation:cf-cue-ripple-out 700ms var(--ease-out-expo) forwards;
  z-index:30;
  mix-blend-mode:screen;
}
@keyframes cf-cue-ripple-out{
  0%   { transform:scale(0);  opacity:.95; box-shadow:0 0 0 0 currentColor }
  60%  { opacity:.6;          box-shadow:0 0 0 24px transparent }
  100% { transform:scale(12); opacity:0;   box-shadow:0 0 0 32px transparent }
}

/* ============================================================
   BATCH 2 — 8 features premium (2026-04-27)
   Pack A : Cmd+K palette / B : Spotlight / C : Scroll-hero /
   D : Theme wipe / E : Skeleton morph / F : Confetti BPM /
   G : Number scrub / H : Achievement toasts
   ============================================================ */

/* ---------- A. Cmd+K Command Palette ---------- */
.cf-palette-overlay{
  position:fixed; inset:0; z-index:99998;
  background:rgba(5,4,6,.65);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  display:none; align-items:flex-start; justify-content:center;
  padding-top:14vh;
  animation:cf-pal-bg 240ms var(--ease-out-quart);
}
.cf-palette-overlay.open{ display:flex; }
@keyframes cf-pal-bg{from{opacity:0}to{opacity:1}}
.cf-palette{
  width:min(620px, 92vw);
  background:var(--s-2,#12111a);
  border:1px solid var(--b-strong, rgba(255,255,255,.18));
  border-radius:18px;
  box-shadow:0 24px 80px rgba(0,0,0,.6), 0 0 0 1px var(--amber-soft, rgba(255,122,24,.16));
  overflow:hidden;
  animation:cf-pal-in 380ms var(--ease-out-expo) both;
}
@keyframes cf-pal-in{
  from{opacity:0; transform:translateY(-20px) scale(.94); filter:blur(8px)}
  to  {opacity:1; transform:none; filter:none}
}
.cf-palette-input{
  width:100%; background:transparent; border:0; outline:none;
  color:var(--c-primary,#f4f1ec);
  font-family:inherit; font-size:18px;
  padding:18px 22px;
  border-bottom:1px solid var(--b-default);
}
.cf-palette-input::placeholder{ color:var(--c-tertiary, #6b6780); }
.cf-palette-list{ max-height:50vh; overflow-y:auto; padding:8px; }
.cf-palette-section{
  font-family:var(--font-mono, monospace);
  font-size:10px; color:var(--c-tertiary, #6b6780);
  text-transform:uppercase; letter-spacing:.1em;
  padding:10px 14px 4px;
}
.cf-palette-item{
  display:grid; grid-template-columns:32px 1fr auto;
  gap:10px; padding:10px 12px; border-radius:10px;
  cursor:pointer; align-items:center;
  transition:background .16s;
}
.cf-palette-item.active,
.cf-palette-item:hover{ background:var(--amber-soft, rgba(255,122,24,.16)); }
.cf-palette-item .ico{
  width:32px; height:32px; border-radius:8px;
  background:linear-gradient(135deg, var(--violet-soft), var(--pink-soft));
  display:flex; align-items:center; justify-content:center; font-size:14px;
}
.cf-palette-item .ttl{ font-size:13px; font-weight:500 }
.cf-palette-item .ctx{ font-size:11px; color:var(--c-tertiary); margin-top:2px }
.cf-palette-item .kbd{
  font-family:var(--font-mono, monospace); font-size:11px;
  padding:2px 6px; border-radius:4px;
  background:var(--s-3, #1a1926); border:1px solid var(--b-default);
  color:var(--c-secondary);
}

/* ---------- B. Cursor spotlight on .hero / [data-cf-spot] ---------- */
.cf-spot-host{ position:relative; }
.cf-spot-host::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(280px circle at var(--cf-mx,50%) var(--cf-my,50%),
                             rgba(255,122,24,.18), transparent 60%);
  opacity:0; transition:opacity 260ms;
  z-index:0;
}
.cf-spot-host.cf-spot-active::before{ opacity:1; }
.cf-spot-host > *{ position:relative; z-index:1; }

/* ---------- C. Scroll-driven hero ---------- */
.cf-hero-h1, .hero h1{
  transition:transform 80ms linear, opacity 200ms;
  will-change:transform;
}
.cf-hero-blob{ transition:transform 100ms linear; will-change:transform; }

/* ---------- D. Theme switch wipe ---------- */
.cf-wipe-overlay{
  position:fixed; inset:0; pointer-events:none; z-index:99997;
  clip-path:circle(0% at 50% 50%);
  background:linear-gradient(135deg, var(--amber,#ff7a18), var(--pink,#ff2e6b), var(--violet,#8b5cf6));
  animation:cf-wipe 800ms var(--ease-out-expo) forwards;
}
@keyframes cf-wipe{
  0%   { clip-path:circle(0% at var(--cf-wx,50%) var(--cf-wy,50%)); opacity:1 }
  60%  { opacity:1 }
  100% { clip-path:circle(180% at var(--cf-wx,50%) var(--cf-wy,50%)); opacity:0 }
}

/* ---------- E. Skeleton → content morph ---------- */
.cf-morph-out{ animation:cf-morph-out 600ms var(--ease-out-expo) forwards; }
@keyframes cf-morph-out{
  to{ opacity:0; filter:blur(6px) saturate(1.2); transform:scale(1.04) }
}
.cf-morph-in{ animation:cf-morph-in 600ms var(--ease-out-expo) both; }
@keyframes cf-morph-in{
  from{ opacity:0; filter:blur(6px); transform:scale(.96) }
  to  { opacity:1; filter:none; transform:none }
}

/* ---------- F. Confetti BPM ---------- */
.cf-confetti-canvas{
  position:fixed; inset:0; pointer-events:none; z-index:99996; overflow:hidden;
}
.cf-confetti-canvas.scoped{ position:absolute }
.cf-confetti-piece{
  position:absolute; width:8px; height:14px; border-radius:2px;
  animation:cf-confetti-fall var(--cf-dur, 2200ms) cubic-bezier(.4,.5,.6,1) forwards;
  will-change:transform;
}
@keyframes cf-confetti-fall{
  0%   { transform:translate(0,0) rotate(0); opacity:1 }
  100% { transform:translate(var(--cf-tx,0), var(--cf-ty,300px)) rotate(var(--cf-tr,360deg)); opacity:0 }
}

/* ---------- G. Number scrub ---------- */
.cf-scrub{
  cursor:ns-resize; user-select:none; position:relative;
  transition:border-color .2s, box-shadow .2s, transform .15s;
}
.cf-scrub:hover{
  border-color:var(--amber,#ff7a18) !important;
  box-shadow:0 0 0 4px var(--amber-soft, rgba(255,122,24,.16));
}
.cf-scrub.cf-scrubbing{
  border-color:var(--amber,#ff7a18) !important;
  box-shadow:0 0 0 4px var(--amber-soft, rgba(255,122,24,.16));
  transform:scale(1.02);
}
.cf-scrub::after{
  content:"↕"; position:absolute; right:6px; top:50%;
  transform:translateY(-50%); font-size:11px;
  color:var(--c-tertiary); opacity:0; transition:opacity .2s; pointer-events:none;
}
.cf-scrub:hover::after, .cf-scrub.cf-scrubbing::after{ opacity:.6 }

/* ---------- H. Achievement toasts ---------- */
.cf-ach-feed{
  position:fixed; top:18px; right:18px; z-index:99995;
  display:flex; flex-direction:column; gap:10px;
  width:340px; max-width:calc(100vw - 36px);
}
.cf-ach{
  background:linear-gradient(135deg,
    rgba(255,122,24,.16), rgba(139,92,246,.16));
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border:1px solid var(--b-default, rgba(255,255,255,.09));
  border-radius:14px; padding:12px 14px;
  display:flex; gap:12px; align-items:center;
  animation:cf-ach-in 480ms var(--ease-spring) both;
  position:relative; overflow:hidden;
  box-shadow:0 12px 40px rgba(0,0,0,.4);
}
.cf-ach::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, var(--amber), var(--pink), var(--violet));
  opacity:.06; pointer-events:none;
}
.cf-ach .badge{
  width:42px; height:42px; border-radius:50%;
  background:linear-gradient(135deg, var(--amber,#ff7a18), var(--pink,#ff2e6b));
  display:flex; align-items:center; justify-content:center;
  font-size:20px; flex-shrink:0;
  box-shadow:0 0 18px var(--amber-glow, rgba(255,122,24,.38));
  animation:cf-ach-spin 1.4s var(--ease-spring) both;
}
@keyframes cf-ach-spin{ from{ transform:scale(0) rotate(-180deg)} to{ transform:scale(1) rotate(0)} }
.cf-ach .ttl{ font-family:var(--font-display, 'Space Grotesk',sans-serif); font-weight:600; font-size:13px; margin:0; line-height:1.2 }
.cf-ach .ctx{ color:var(--c-secondary, #a8a3b8); font-size:11px; margin:2px 0 0; line-height:1.3 }
@keyframes cf-ach-in{ from{ opacity:0; transform:translateY(-20px) scale(.92)} to{ opacity:1; transform:none} }
.cf-ach.leaving{ animation:cf-ach-out 280ms var(--ease-out-quart) forwards }
@keyframes cf-ach-out{ to{ opacity:0; transform:translateX(40px)} }