/* The hero's walkthrough (walkthrough.js): the comment-pin cursor with the ice loader's cubes, the caption and the title
   bar's Play / Pause / Resume control. Nothing here is drawn over the app's own controls: the cursor and its press ring only. The loader itself is the shared one, by reference: */
@import url("../../../assets/loader/ice-loader.css");

.wt-layer { position: absolute; inset: 0; z-index: 4; pointer-events: none; overflow: hidden; }

/* ---- the cursor: Infospector's comment pin (a circle whose top-left corner is a 4 px point: the hotspot), IcedCoffee's cubes inside.
   The visitor's own cursor over the app windows is this same pin (demos/pin.js), as images rendered from these rules: after any
   change to .wt-pin or .wt-cubes, run `node site/inside/tools/cursor.mjs` so the two stay one look. */
.wt-cursor {
  position: absolute; left: 0; top: 0; width: 0; height: 0; opacity: 0; will-change: transform, opacity;
  transition: opacity 260ms ease;
}
.wt-cursor.is-on { opacity: 1; }
.wt-cursor.is-hop { opacity: 0; transition-duration: 160ms; }   /* Reduce Motion: it fades between points instead of gliding */
.wt-pin {
  position: absolute; left: -1px; top: -1px; width: 36px; height: 36px; box-sizing: border-box; display: grid; place-items: center;
  border-radius: 4px 18px 18px 18px; border: 2px solid #ffaf43; background: #16171a; color: #ffaf43;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .45), 0 0 0 1px rgba(0, 0, 0, .25);
  transform-origin: 0 0; transition: transform 420ms var(--spring, cubic-bezier(.34, 1.56, .64, 1));
}
.wt-cursor.is-press .wt-pin { transform: scale(.84); border-color: #fff; transition: transform 110ms ease-out, border-color 80ms ease-out; }   /* (Q, Oct 10: the outline goes white on a click) */
.wt-pin { transition: transform 420ms var(--spring, cubic-bezier(.34, 1.56, .64, 1)), border-color 260ms ease; }
.wt-cubes { --ic-loader-size: 16px; color: #ffaf43; transform: translate(-1.5px, -1.5px) rotate(-45deg); }   /* the pyramid's top cube points at the pin's tip (top left), nudged toward it so it reads centered in the teardrop */
/* still while it moves (the loader's rest pose, its first frame); one quarter turn on a click */
.wt-cursor:not(.is-turning) .ic-loader .ic-loader__strip,
.wt-cursor:not(.is-turning) .ic-loader .ic-loader__hop { animation: none; }
/* the press ring, from the hotspot */
.wt-ring {
  position: absolute; left: -14px; top: -14px; width: 28px; height: 28px; border-radius: 50%; opacity: 0;
  border: 2px solid #fff; box-sizing: border-box;   /* (white, like the pin's outline on the click) */
}
.wt-cursor.is-ring .wt-ring { animation: wt-ring 560ms cubic-bezier(.22, 1, .36, 1); }
@keyframes wt-ring { 0% { opacity: .95; transform: scale(.25); } 100% { opacity: 0; transform: scale(1.5); } }

/* ---- the caption: one short line per beat, in the page's voice */
/* [subtitles] bottom center of the window, like a subtitle */
.wt-caption {
  position: absolute; left: 50%; bottom: 20px; max-width: calc(100% - 48px); display: flex; align-items: center; translate: -50% 0;
  padding: 9px 16px; border-radius: 999px; white-space: nowrap; overflow: hidden;
  font: 600 15px/1.2 "Archivo", "Helvetica Neue", Helvetica, sans-serif; letter-spacing: .1px; color: #ffaf43;
  background: rgba(16, 17, 19, .84); border: 1px solid rgba(255, 175, 67, .28);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
  opacity: 0; transform: translateY(8px);
  transition: opacity 240ms ease, transform 520ms var(--spring, cubic-bezier(.34, 1.56, .64, 1));
}
.wt-caption.is-on { opacity: 1; transform: none; }
/* [caption-under] the caption as plain text 14 px under the window, left on its edge, in the cursor's amber; the line keeps its height
   while the words change, so nothing under it moves */
.wt-caption.wt-caption--under {
  position: static; left: auto; bottom: auto; max-width: 100%; height: 24px; margin-top: 14px; padding: 0; border: 0; border-radius: 0;
  background: none; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none;
  font: 600 16px/24px "Archivo", "Helvetica Neue", Helvetica, sans-serif; color: #ffaf43; transform: translateY(4px);
}
.wt-caption.wt-caption--under.is-on { transform: none; }
.wt-text { overflow: hidden; text-overflow: clip; }
/* a caption too long for a narrow window is cut with a fade, never wrapped (the whole line is in the beat list) */
.wt-caption.is-cut .wt-text { -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }

/* ---- the control, at the right end of the window's title bar */
.hero-win .win-bar { position: relative; }
.wt-ctl {
  position: absolute; right: 8px; top: 50%; translate: 0 -50%; display: inline-flex; align-items: center; gap: 6px;
  height: 22px; padding: 0 10px 0 8px; border-radius: 999px; cursor: pointer; white-space: nowrap;
  font: 500 12px/1 "Archivo", "Helvetica Neue", Helvetica, sans-serif; color: var(--ink-2, #c9cbd0);
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .14);
  transition: color 200ms ease, border-color 200ms ease, background-color 200ms ease;
}
.wt-ctl svg { width: 10px; height: 10px; fill: currentColor; flex: none; }
/* (the title bar's own span rule centers and fades the window title; the control's label is not that) */
.win-bar .wt-ctl span { flex: none; min-width: 0; margin: 0; text-align: left; color: inherit; font-size: inherit; overflow: visible; -webkit-mask-image: none; mask-image: none; }
.wt-ctl:hover { color: #ffaf43; border-color: rgba(255, 175, 67, .5); }
.wt-ctl.is-accent { color: #ffaf43; border-color: rgba(255, 175, 67, .45); background: rgba(255, 175, 67, .1); }
.wt-ctl.is-accent:hover { background: rgba(255, 175, 67, .18); }
.wt-ctl:focus-visible { outline: 2px solid #ffaf43; outline-offset: 2px; }

/* [takeover] the visitor has the app: no lean, and the window outlined in the accent so it reads as live */
.hero-win.wt-hands { --tx: 0deg !important; --ty: 0deg !important; outline: 2px solid var(--page-acc, #ffaf43); outline-offset: 3px; }
.hero-win { transition: transform 1200ms cubic-bezier(.33, 1, .68, 1), outline-color 200ms ease; }

/* [takeover] the tag, top right of the screen: "Take over demo" on hover or focus; "Turn on auto demo" and "Auto: 5 ... 1" while the
   visitor has the app (always shown then). Bold, on the accent, so it reads over any screen of the app */
.wt-take {
  position: absolute; top: 14px; right: 14px; z-index: 6; display: inline-flex; align-items: center; gap: 6px;
  height: 34px; padding: 0 16px; border-radius: 999px; cursor: pointer; white-space: nowrap;
  font: 700 14px/1 "Archivo", "Helvetica Neue", Helvetica, sans-serif; letter-spacing: .2px; font-variant-numeric: tabular-nums;
  color: #16171a; background: #ffaf43; border: 0;   /* [caption-under] the cursor's amber (was the page's accent) */ box-shadow: 0 6px 18px rgba(0, 0, 0, .4), 0 0 0 1px rgba(0, 0, 0, .25);
  opacity: 0; transform: translateY(-4px); pointer-events: none;
  transition: opacity 180ms ease, transform 320ms var(--spring, cubic-bezier(.34, 1.56, .64, 1)), filter 160ms ease;
}
.hero-win:hover .wt-take, .wt-take:focus-visible, .hero-win.wt-hands .wt-take { opacity: 1; transform: none; pointer-events: auto; }
.wt-take:hover { filter: brightness(1.08); }
.wt-take:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.hero-win.wt-hands .wt-take:not(.is-count) { color: #ffaf43; background: rgba(16, 17, 19, .9); box-shadow: 0 6px 18px rgba(0, 0, 0, .4), inset 0 0 0 1.5px #ffaf43; }
@media (hover: none) { .wt-take { opacity: 1; transform: none; pointer-events: auto; } }

@media (prefers-reduced-motion: reduce) {
  .wt-pin, .wt-caption { transition: opacity 200ms ease; transform: none; }
  .wt-cursor.is-press .wt-pin { transform: none; }
  .wt-cursor.is-ring .wt-ring { animation-duration: 400ms; }
  .wt-cursor .wt-cubes.ic-loader.ic-loader .ic-loader__win { animation: none; }   /* still, not the calm pulse */
}
/* [subtitles] the cursor over the subtitle: a click near the bottom of the app stays in sight */
.wt-cursor { z-index: 3; }
.wt-caption { z-index: 2; }