/* WOCOM Academy — animated portal walkthroughs.
 *
 * A "demo" is a real screenshot of the WOCOM Hub with a transparent layer on
 * top carrying a cursor, click ripples, highlight boxes and a drag ghost. The
 * screenshot never changes; only the overlay moves. That keeps the training
 * honest — the learner is looking at the actual portal, not an illustration of
 * it — while still showing the gesture that a still image cannot.
 *
 * Everything is positioned in percentages of the stage, so a demo scales from a
 * phone to a desktop without the cursor drifting off its target.
 */

.acad-demo{
  margin:26px 0 30px;
  border:1px solid var(--gray-200,#E5E7EB);
  border-radius:16px;
  overflow:hidden;
  /* Shows either side of a portrait screenshot, whose stage is narrower than
     the figure. Tinted rather than white so the letterboxing reads as framing
     rather than as a layout mistake. */
  background:#FAF8FF;
  box-shadow:0 10px 30px rgba(15,10,46,.07);
}

/* A restrained browser chrome, so it reads as "this is a screen, not a diagram". */
.dm-chrome{
  display:flex;align-items:center;gap:7px;
  padding:9px 14px;
  background:#F5F3FF;
  border-bottom:1px solid var(--gray-200,#E5E7EB);
}
.dm-chrome i{width:9px;height:9px;border-radius:50%;background:#D8D2F0;display:block;}
.dm-chrome b{
  margin-left:8px;font-size:11.5px;font-weight:700;letter-spacing:.04em;
  color:#6D28D9;text-transform:uppercase;
}

/* The stage always keeps the screenshot's own shape, because every gesture is
   positioned as a percentage of this box. That is fine for the wide screenshots
   and wrong for the tall ones: a portrait panel like the account menu or the
   dial pad, stretched to the full column width, renders over 1200px tall and
   dwarfs the lesson around it. So cap the height and let the width follow from
   the ratio, which shrinks the whole thing — overlay included — in proportion. */
.dm-stage{
  position:relative;
  line-height:0;
  background:#fff;
  overflow:hidden;
  width:min(100%, calc(var(--dm-max-h, 560px) * var(--dm-ar, 1.9)));
  margin-inline:auto;
}
.dm-stage>img{
  display:block;width:100%;height:auto;
}

/* Frame stack — a demo that navigates carries one image per destination. The
 * first stays in flow so it holds the box open; the rest sit on top of it and
 * cross-fade. All of them are in the DOM from the start, so a swap never
 * flashes an unloaded image. */
.dm-frame{opacity:0;transition:opacity .34s ease;}
.dm-frame.is-on{opacity:1;}
.dm-stage>.dm-frame:not(:first-of-type){
  position:absolute;left:0;top:0;width:100%;height:100%;
}


.dm-layer{
  position:absolute;inset:0;
  pointer-events:none;
  line-height:normal;
}

/* ---- highlight box ------------------------------------------------------ */
.dm-focus{
  position:absolute;
  border:2.5px solid #7B2FF2;
  border-radius:9px;
  background:rgba(123,47,242,.10);
  box-shadow:0 0 0 4000px rgba(15,10,46,.34);   /* dims everything outside it */
  opacity:0;
  transition:opacity .32s ease, left .5s cubic-bezier(.3,.7,.3,1),
             top .5s cubic-bezier(.3,.7,.3,1), width .5s ease, height .5s ease;
}
.acad-demo.is-focus .dm-focus{opacity:1;}

/* ---- zoom ---------------------------------------------------------------
 * A highlight box tells you where to look. On a small control — a toggle, a
 * chip, one row of a table — it does not help you actually see it. A zoom step
 * scales the whole frame around the point of interest, so the thing being
 * talked about grows on screen while everything else slides out of the way.
 *
 * The stage keeps its box; only the image inside moves, so the overlay
 * coordinates continue to line up with what the learner sees.
 */
.dm-frame,.dm-layer{
  transition:transform .9s cubic-bezier(.32,.72,.26,1), opacity .34s ease;
  transform-origin:50% 50%;
}
.acad-demo.is-zoom .dm-focus{
  /* The dimming veil is unhelpful once the detail fills the screen. */
  box-shadow:0 0 0 4000px rgba(15,10,46,.16);
}

/* ---- cursor ------------------------------------------------------------- */
.dm-cursor{
  position:absolute;left:50%;top:50%;
  width:26px;height:26px;
  margin:-3px 0 0 -3px;                          /* hotspot at the arrow tip */
  opacity:0;
  transition:opacity .3s ease,
             left .85s cubic-bezier(.32,.72,.26,1),
             top  .85s cubic-bezier(.32,.72,.26,1);
  z-index:3;
}
.acad-demo.is-live .dm-cursor{opacity:1;}
/* While the walkthrough is introducing or summing itself up there is no gesture
   to show, so the cursor is taken off the screen rather than left hovering. */
.acad-demo.is-card .dm-cursor{opacity:0;}
.dm-cursor svg{width:100%;height:100%;display:block;filter:drop-shadow(0 2px 4px rgba(15,10,46,.45));}
.dm-cursor.is-fast{transition-duration:.3s,.45s,.45s;}
.dm-cursor.is-press svg{transform:scale(.82);transition:transform .12s ease;}

/* click ripple */
.dm-ring{
  position:absolute;left:2px;top:2px;
  width:14px;height:14px;margin:-7px 0 0 -7px;
  border-radius:50%;
  border:2px solid #7B2FF2;
  opacity:0;
}
.dm-cursor.is-click .dm-ring{animation:dmRing .55s ease-out;}
@keyframes dmRing{
  0%  {opacity:.9; transform:scale(.4);}
  70% {opacity:.5;}
  100%{opacity:0;  transform:scale(4.2);}
}

/* ---- drag ghost --------------------------------------------------------- */
.dm-ghost{
  position:absolute;
  display:inline-flex;align-items:center;gap:7px;
  padding:7px 12px;
  font:700 12px/1.1 var(--font-body,system-ui,-apple-system,"Segoe UI",sans-serif);
  color:#2D1B69;
  background:#fff;
  border:1.5px solid #7B2FF2;
  border-radius:9px;
  box-shadow:0 10px 22px rgba(45,27,105,.28);
  transform:translate(-14px,-12px) rotate(-2.5deg);
  opacity:0;
  transition:opacity .18s ease,
             left .95s cubic-bezier(.32,.72,.26,1),
             top  .95s cubic-bezier(.32,.72,.26,1);
  z-index:2;
  white-space:nowrap;
}
.dm-ghost::before{
  content:"";width:7px;height:7px;border-radius:50%;background:#22C55E;flex:none;
}
.acad-demo.is-drag .dm-ghost{opacity:1;}

/* where a dragged item lands */
.dm-drop{
  position:absolute;
  border:2px dashed #22C55E;
  border-radius:9px;
  background:rgba(34,197,94,.11);
  opacity:0;
  transition:opacity .25s ease;
  z-index:1;
}
.acad-demo.is-drop .dm-drop{opacity:1;}

/* ---- typing caret ------------------------------------------------------- */
.dm-type{
  position:absolute;
  font:600 13px/1.2 var(--font-body,system-ui,sans-serif);
  color:#2D1B69;background:#fff;
  padding:3px 6px;border-radius:5px;
  border:1px solid #C4B5FD;
  opacity:0;transition:opacity .2s ease;
  z-index:2;white-space:nowrap;
}
.acad-demo.is-type .dm-type{opacity:1;}
.dm-type::after{
  content:"";display:inline-block;width:1.5px;height:13px;
  background:#7B2FF2;margin-left:2px;vertical-align:-2px;
  animation:dmCaret 1s steps(1) infinite;
}
@keyframes dmCaret{0%,50%{opacity:1;}51%,100%{opacity:0;}}

/* ---- caption + controls ------------------------------------------------- */
.dm-foot{
  display:flex;align-items:flex-start;gap:14px;
  padding:14px 16px;
  border-top:1px solid var(--gray-200,#E5E7EB);
  background:#FCFBFF;
}
.dm-say{flex:1;min-width:0;}
.dm-say-num{
  display:inline-block;
  font-size:10.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:#7B2FF2;margin-bottom:3px;
}
.dm-say-text{
  margin:0;font-size:14px;line-height:1.62;color:var(--gray-700,#374151);font-weight:500;
}
.dm-controls{flex:none;display:flex;align-items:center;gap:8px;}
.dm-replay,.dm-narrate,.dm-expand{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 15px;border-radius:50px;
  border:1.5px solid #7B2FF2;background:#fff;color:#6D28D9;
  font:800 12.5px/1 var(--font-body,system-ui,sans-serif);
  cursor:pointer;
  transition:background .16s ease,color .16s ease;
}
.dm-replay:hover,.dm-narrate:hover,.dm-expand:hover{background:#7B2FF2;color:#fff;}
.dm-replay[disabled]{opacity:.45;cursor:default;}
.dm-replay:hover[disabled]{background:#fff;color:#6D28D9;}

/* Narration is off until asked for: browsers block audio that starts itself,
   and six talking figures on one page would be unusable. */
.dm-narrate{border-color:var(--gray-200,#E5E7EB);color:var(--gray-600,#4B5563);}
.dm-narrate:hover{background:var(--gray-600,#4B5563);color:#fff;border-color:var(--gray-600,#4B5563);}
.dm-narrate[aria-pressed="true"]{background:#7B2FF2;border-color:#7B2FF2;color:#fff;}
.dm-narrate[hidden]{display:none;}

/* Offered only where the browser can actually do it (see the driver). */
.dm-expand{border-color:var(--gray-200,#E5E7EB);color:var(--gray-600,#4B5563);}
.dm-expand:hover{background:var(--gray-600,#4B5563);color:#fff;border-color:var(--gray-600,#4B5563);}
.dm-expand[hidden]{display:none;}

.acad-demo figcaption{
  padding:12px 16px;
  font-size:13px;line-height:1.65;color:var(--gray-600,#4B5563);
  border-top:1px solid var(--gray-200,#E5E7EB);
  background:#fff;
}

/* The written walkthrough. Always in the DOM for screen readers and for print;
   shown to everyone when motion is off or JavaScript never ran. */
.dm-script{
  margin:0;padding:14px 16px 16px;
  border-top:1px solid var(--gray-200,#E5E7EB);
  background:#FCFBFF;
  font-size:13.5px;line-height:1.7;color:var(--gray-700,#374151);
}
.dm-script ol{margin:0;padding:0 0 0 18px;}
.dm-script li{margin:0 0 5px;}
/* The spoken bookends read as prose, not as steps the learner performs. */
.dm-script .dm-lead{margin:0 0 9px;font-weight:600;color:#4C1D95;}
.dm-script .dm-recap{
  margin:11px 0 0;padding:9px 0 0;
  border-top:1px solid var(--gray-200,#E5E7EB);
  color:var(--gray-600,#4B5563);
}
.acad-demo.is-motion .dm-script{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ---- full screen --------------------------------------------------------
 * The whole figure expands, so the caption and the controls come with it and a
 * learner can follow the narration at the size the detail deserves.
 *
 * The stage is sized from the screenshot's own ratio (--dm-ar, written inline by
 * the renderer) rather than being stretched to the viewport: the gestures are
 * percentages of the stage, so a stage that does not match the image would put
 * the cursor beside its target instead of on it. The reserve subtracted from the
 * height is the chrome bar plus the caption bar at its tallest.
 *
 * :fullscreen and :-webkit-full-screen are written as separate rules on purpose
 * — a browser that does not know one of them would drop the whole selector list.
 */
.acad-demo:fullscreen{
  display:flex;flex-direction:column;justify-content:center;
  width:100vw;height:100vh;margin:0;
  border:0;border-radius:0;box-shadow:none;
  background:#150C3A;
}
.acad-demo:fullscreen .dm-stage{
  align-self:center;
  width:min(100vw, calc((100vh - 190px) * var(--dm-ar, 1.9)));
  max-width:none;                       /* full screen overrides the page cap */
}
.acad-demo:fullscreen .dm-foot{padding:16px 22px;}
.acad-demo:fullscreen .dm-say-text{font-size:17px;}
.acad-demo:fullscreen .dm-say-num{font-size:11.5px;}
.acad-demo:fullscreen figcaption{display:none;}

.acad-demo:-webkit-full-screen{
  display:flex;flex-direction:column;justify-content:center;
  width:100vw;height:100vh;margin:0;
  border:0;border-radius:0;box-shadow:none;
  background:#150C3A;
}
.acad-demo:-webkit-full-screen .dm-stage{
  align-self:center;
  width:min(100vw, calc((100vh - 190px) * var(--dm-ar, 1.9)));
  max-width:none;
}
.acad-demo:-webkit-full-screen .dm-foot{padding:16px 22px;}
.acad-demo:-webkit-full-screen .dm-say-text{font-size:17px;}
.acad-demo:-webkit-full-screen figcaption{display:none;}

@media (max-width:640px){
  .dm-foot{flex-direction:column;gap:10px;}
  .dm-controls{align-self:flex-start;flex-wrap:wrap;}
  .dm-ghost{font-size:10px;padding:5px 9px;}
}

@media print{
  .dm-layer,.dm-controls,.dm-chrome{display:none !important;}
  .dm-frame:not(.is-on):not(:first-of-type){display:none !important;}
  .dm-frame{opacity:1 !important;}
  .acad-demo.is-motion .dm-script{
    position:static;width:auto;height:auto;padding:14px 16px 16px;margin:0;
    overflow:visible;clip:auto;white-space:normal;
  }
}