/* ============================================================================
   QA Reef — animated cursor demo engine (styles)
   Dependency-free. Pair with demo-engine.js.

   Ships only the primitives the ENGINE drives: the cursor, the click ripple,
   the typing caret, the button-press state, popover open/close and option
   highlight, and the step-list rows. Everything else (your mock app's layout)
   is yours. All colours come from CSS custom properties with sea-palette
   fallbacks, so a host page can retheme without touching this file.

   Every animated property is transform/opacity only — no layout, no paint of
   width/height/top/left — so the whole engine stays on the compositor.
   ========================================================================= */

:root{
  --demo-abyss:#07222E; --demo-deep:#0B3040; --demo-teal:#124F60;
  --demo-tide:#2E8C9E;  --demo-foam:#CFEDE9; --demo-coral:#FF6A45;
  --demo-sand:#E9DFC8;
}

/* --- the pane: the coordinate space every cursor position is relative to --- */
[data-demo-pane]{ position:relative; }

/* --- cursor -------------------------------------------------------------- */
/* Positioned at the pane's origin and moved with translate3d only. Its own
   layer (will-change) so a moving cursor never repaints the app beneath it. */
.demo-cursor{
  position:absolute; left:0; top:0; width:22px; height:26px;
  pointer-events:none; z-index:40;
  will-change:transform; transform:translate3d(-100px,-100px,0);
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.45));
  transition:opacity .2s ease;
}
.demo-cursor.is-hidden{ opacity:0; }
.demo-cursor svg{ display:block; width:100%; height:100%; }

/* --- click ripple -------------------------------------------------------- */
/* Placed with transform (not left/top) and scaled out; removed on animationend. */
.demo-ripple{
  position:absolute; left:0; top:0; width:34px; height:34px; margin:-17px 0 0 -17px;
  border-radius:50%; pointer-events:none; z-index:39;
  border:2px solid var(--demo-coral,#FF6A45);
  will-change:transform,opacity;
  animation:demo-ripple .52s cubic-bezier(.22,.68,.32,1) forwards;
}
@keyframes demo-ripple{
  from{ transform:translate3d(var(--rx,0),var(--ry,0),0) scale(.28); opacity:.85; }
  to  { transform:translate3d(var(--rx,0),var(--ry,0),0) scale(1.5);  opacity:0;   }
}

/* --- typing caret -------------------------------------------------------- */
.demo-caret{
  position:absolute; left:0; top:50%; width:1.5px; height:1.05em;
  background:var(--demo-foam,#CFEDE9); opacity:0; pointer-events:none;
  will-change:transform,opacity; transform:translate(0,-50%);
}
.is-typing .demo-caret{ animation:demo-caret 1s steps(1,end) infinite; }
@keyframes demo-caret{ 0%,50%{opacity:.9} 51%,100%{opacity:0} }

/* --- control reactions the engine toggles -------------------------------- */
.demo-press{ transform:scale(.972); filter:brightness(.92); }  /* button depress */
[data-popover]{ transition:box-shadow .18s ease; }
[data-popover].is-open{ box-shadow:0 0 0 2px color-mix(in srgb,var(--demo-tide,#2E8C9E) 70%,transparent); }

/* Popovers animate opacity+transform and are taken out of hit-testing when shut,
   rather than display:none — so opening/closing never triggers layout. */
.demo-pop{
  position:absolute; z-index:30; opacity:0; pointer-events:none;
  transform:translate3d(0,-6px,0) scale(.985); transform-origin:top center;
  transition:opacity .16s ease, transform .16s cubic-bezier(.22,.68,.32,1);
}
.demo-pop.is-open{ opacity:1; pointer-events:auto; transform:translate3d(0,0,0) scale(1); }
.demo-opt{ transition:background-color .14s ease; }
.demo-opt.is-hl{ background:color-mix(in srgb,var(--demo-tide,#2E8C9E) 28%,transparent); }

/* --- step list ----------------------------------------------------------- */
[data-demo-steps]{ list-style:none; margin:0; padding:0; }
[data-demo-steps] > li{
  display:flex; align-items:center; gap:10px;
  padding:9px 12px; margin-bottom:7px; border-radius:9px;
  background:color-mix(in srgb,var(--demo-teal,#124F60) 34%,transparent);
  color:var(--demo-foam,#CFEDE9); font-size:14px; line-height:1.35;
  will-change:transform,opacity;
  animation:demo-step-in .28s cubic-bezier(.22,.68,.32,1) both;
}
@keyframes demo-step-in{ from{opacity:0; transform:translate3d(0,7px,0);} to{opacity:1; transform:none;} }
[data-demo-steps] .demo-tick{
  flex:0 0 auto; width:19px; height:19px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:#3FCF9A; color:#08281f;
}
[data-demo-steps] .demo-tick svg{ display:block; }
[data-demo-steps] .demo-step-label{ flex:1 1 auto; }
[data-demo-steps-empty].is-gone{ display:none !important; }

/* --- reduced motion: nothing animates, ever ------------------------------ */
/* The engine also SKIPS the animation entirely and renders the end state; this
   block is the belt-and-braces so no keyframe can fire even if a host reuses
   these classes elsewhere. */
@media (prefers-reduced-motion: reduce){
  .demo-cursor, .demo-ripple, .demo-caret,
  [data-demo-steps] > li, .demo-pop, .demo-opt, [data-popover]{
    animation:none !important; transition:none !important;
  }
  .demo-cursor{ opacity:0 !important; }
  .demo-ripple{ display:none !important; }
}