/* =============================================================================
   Guide Demo Animation
   Zoom + click indicator for guide page screenshots.
   Controlled via CSS custom properties set inline on the container:
     --demo-zoom-x / --demo-zoom-y   transform-origin (percentages)
     --demo-scale                    zoom level
     --demo-click-x / --demo-click-y click indicator position (percentages)
   ============================================================================= */

.guide-demo-zoom {
  position: relative;
  transform-origin: var(--demo-zoom-x, 50%) var(--demo-zoom-y, 50%);
  animation: guide-demo-zoom 7s linear infinite;
}

.guide-demo-before {
  display: block;
  width: 100%;
  animation: guide-demo-before 7s linear infinite;
}

.guide-demo-after {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  animation: guide-demo-after 7s linear infinite;
}

.guide-demo-click-indicator {
  position: absolute;
  left: var(--demo-click-x, 50%);
  top: var(--demo-click-y, 50%);
  transform: translate(-50%, -50%);
  pointer-events: none;
  width: 0;
  height: 0;
}

.guide-demo-dot {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #0ea5e9;
  top: -5px;
  left: -5px;
  animation: guide-demo-dot 7s linear infinite;
}

.guide-demo-ripple {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid #0ea5e9;
  top: -5px;
  left: -5px;
  animation: guide-demo-ripple 7s linear infinite;
}

/* --- Keyframes --------------------------------------------------------------- */

/*
  Cycle (7s total):
    0–20%  : rest at full view
    20–31% : zoom in  (ease-in-out via per-step timing function)
    31–39% : hold zoomed
    39–50% : click + before→after crossfade
    50–64% : hold on result
    64–74% : zoom out (ease-in-out)
    74–100%: pause at full view
*/

@keyframes guide-demo-zoom {
  0%   { transform: scale(1); }
  20%  { transform: scale(1);                          animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
  31%  { transform: scale(var(--demo-scale, 2.5));     animation-timing-function: linear; }
  64%  { transform: scale(var(--demo-scale, 2.5));     animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
  74%  { transform: scale(1); }
  100% { transform: scale(1); }
}

@keyframes guide-demo-before {
  0%, 38%   { opacity: 1; }
  50%, 100% { opacity: 0; }
}

@keyframes guide-demo-after {
  0%, 38%   { opacity: 0; }
  50%, 100% { opacity: 1; }
}

@keyframes guide-demo-dot {
  0%, 38% { opacity: 0; transform: scale(0); }
  42%     { opacity: 1; transform: scale(1); }
  54%     { opacity: 0; transform: scale(0.4); }
  100%    { opacity: 0; }
}

@keyframes guide-demo-ripple {
  0%, 38% { opacity: 0;   transform: scale(0); }
  43%     { opacity: 0.6; transform: scale(1); }
  60%     { opacity: 0;   transform: scale(3.5); }
  100%    { opacity: 0;   transform: scale(0); }
}

/* =============================================================================
   Click-first variant
   Fires the click at full scale, then zooms into the result.
   --demo-click-x/y  = position of the button being clicked (full-scale coords)
   --demo-zoom-x/y   = transform-origin for the result zoom
   --demo-scale      = zoom level for the result
   ============================================================================= */

/*
  Cycle (8s total):
    0–14%  : rest at full view (before image)
    14–24% : click fires on the button at full scale
    24–36% : click fades, before→after crossfade (modal appears)
    36–48% : zoom in to result (ease-in-out)
    48–63% : hold on zoomed result
    63–73% : zoom out (ease-in-out)
    73–100%: pause at full view (after image)
*/

.guide-demo--click-first .guide-demo-zoom   { animation-name: guide-demo-zoom-cf;   animation-duration: 8s; }
.guide-demo--click-first .guide-demo-before { animation-name: guide-demo-before-cf; animation-duration: 8s; }
.guide-demo--click-first .guide-demo-after  { animation-name: guide-demo-after-cf;  animation-duration: 8s; }
.guide-demo--click-first .guide-demo-dot    { animation-name: guide-demo-dot-cf;    animation-duration: 8s; }
.guide-demo--click-first .guide-demo-ripple { animation-name: guide-demo-ripple-cf; animation-duration: 8s; }

@keyframes guide-demo-zoom-cf {
  0%   { transform: scale(1); }
  36%  { transform: scale(1);                          animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
  48%  { transform: scale(var(--demo-scale, 2));        animation-timing-function: linear; }
  63%  { transform: scale(var(--demo-scale, 2));        animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
  73%  { transform: scale(1); }
  100% { transform: scale(1); }
}

@keyframes guide-demo-before-cf {
  0%, 22%    { opacity: 1; }
  36%, 100%  { opacity: 0; }
}

@keyframes guide-demo-after-cf {
  0%, 22%    { opacity: 0; }
  36%, 100%  { opacity: 1; }
}

@keyframes guide-demo-dot-cf {
  0%, 13% { opacity: 0; transform: scale(0); }
  17%     { opacity: 1; transform: scale(1); }
  25%     { opacity: 0; transform: scale(0.4); }
  100%    { opacity: 0; }
}

@keyframes guide-demo-ripple-cf {
  0%, 13%  { opacity: 0;   transform: scale(0); }
  17%      { opacity: 0.6; transform: scale(1); }
  30%      { opacity: 0;   transform: scale(3.5); }
  100%     { opacity: 0;   transform: scale(0); }
}

/* --- Reduced motion: skip animation, show result state ----------------------- */

@media (prefers-reduced-motion: reduce) {
  .guide-demo-zoom    { animation: none; transform: none !important; }
  .guide-demo-before  { animation: none; opacity: 0 !important; }
  .guide-demo-after   { animation: none; opacity: 1 !important; }
  .guide-demo-ripple,
  .guide-demo-dot     { display: none; }
}