/* The product tutorial under the hero (AppDemo.tsx). */

/* Scenes scroll inside the canvas when the tutorial needs it; no bar. */
.demo-scroll { scrollbar-width: none; }
.demo-scroll::-webkit-scrollbar { display: none; }

/* The frame runs out into the page at the bottom. */
.demo-fade {
  -webkit-mask-image: linear-gradient(180deg, #000 92%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 92%, transparent 100%);
}

/* The scene pill: placed at the top of the section with no height, it
 * sticks to the bottom of the screen for as long as the section is there. */
.demo-dock {
  position: sticky;
  top: calc(100svh - 3.75rem);
  height: 0;
  z-index: 40;
}
/* Feature stage of landing v3 (features/Features.tsx): the dark card behind
 * each app panel, the step rail, the demo cursor. Tone per step
 * in --fx-tone (Fuse cyan, violet for the private bridge). */

.fx-card {
  --fx-tone: 236 238 241;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-radius: 22px;
  border: 1px solid var(--v3-line-strong);
  background: #070b0c;
  transition: border-color 0.4s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.fx-card:hover { border-color: rgba(255, 255, 255, 0.2); }

/* The halftone mountains along the bottom, masked into the dark. */
.fx-halftone {
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: -6%;
  z-index: -1;
  height: 60%;
  pointer-events: none;
  background: url('/images/PATrjzweIjkjy36opMOqUdps6d8.c3c0f.png') center bottom / cover no-repeat;
  opacity: 0.3;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 70%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 70%);
  transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.fx-card:hover .fx-halftone { transform: scale(1.04); }
.fx-halftone { filter: hue-rotate(var(--fx-hue, 0deg)) saturate(var(--fx-sat, 1)); transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1), filter 0.8s cubic-bezier(0.33, 0, 0.2, 1); }
.fx-wash { position: absolute; inset: 0; z-index: -1; pointer-events: none; }

/* Step rail. */
.fx-tick {
  position: relative;
  display: flex;
  height: 30px;
  width: 22px;
  align-items: center;
  justify-content: center;
}
.fx-tick-bar {
  display: block;
  width: 2px;
  height: 14px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.16);
  transition: height 0.4s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.3s;
}
.fx-tick:hover .fx-tick-bar { background: rgba(255, 255, 255, 0.45); }
.fx-tick.is-on .fx-tick-bar { height: 24px; background: rgb(var(--v3-accent)); }
.fx-tick.is-done .fx-tick-bar { background: rgba(255, 255, 255, 0.34); }
.fx-tick-tip {
  position: absolute;
  left: calc(100% + 8px);
  top: 50%;
  transform: translate(-4px, -50%);
  white-space: nowrap;
  border-radius: 8px;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  background: #17181c;
  border: 1px solid var(--v3-line-strong);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.fx-tick:hover .fx-tick-tip,
.fx-tick:focus-visible .fx-tick-tip { opacity: 1; transform: translate(0, -50%); }

/* Feature points: lift and brighten on hover. */
.fx-point { transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.3s, background-color 0.3s; }
.fx-point:hover { transform: translateY(-1px); border-color: rgba(255, 255, 255, 0.16); background-color: rgba(255, 255, 255, 0.04); }


/* Demo cursor: a white arrow with a dark edge; a thin ring on click. */
.fx-cursor-ring {
  position: absolute;
  left: -9px;
  top: -9px;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 1.5px solid rgba(255, 255, 255, 0.8);
}

/* The surface of the gas drop slides by one wave length, so it loops seamlessly. */
@keyframes fx-drop-wave { from { transform: translateX(0); } to { transform: translateX(32px); } }
.fx-drop-wave { animation: fx-drop-wave 2.4s linear infinite; }

@media (prefers-reduced-motion: reduce) {
  .fx-drop-wave { animation: none; }
  .fx-card, .fx-halftone, .fx-point, .fx-tick-bar { transition: none; }
}