/* story.css - anime.js storytelling layer (Tech Manager Lab)
   Loaded AFTER motion.css. Desktop-only enhancement: every rule here is
   scoped to html.story-on, which story.js adds only when it will run.
   With JS off, with reduced motion, or on phones, nothing here applies
   and motion.css keeps the page readable and animated. */

/* ---- hand control from CSS reveals to anime.js timelines ----
   Only the CSS transition is disabled here. Opacity/transform stay under
   anime.js inline styles: an `!important` rule would silently win over
   every frame the timeline writes, so the page would look static.
   motion.js still adds .in as a no-JS / fallback safety net. */
html.story-on .reveal,
html.story-on .reveal.in,
html.story-on .reveal-group > *,
html.story-on .reveal-group.in > * {
  transition: none !important;
}
html.story-on .drift { animation: none !important; }

/* ---- story beats / progress rail ---- */
.story-rail {
  position: fixed;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  z-index: 55;
  padding: 14px 8px;
  border-radius: 999px;
  background: rgba(2, 17, 50, .55);
  border: 1px solid rgba(46, 230, 255, .18);
  backdrop-filter: blur(6px);
}

.story-dot {
  position: relative;
  display: block;
  width: 10px;
  height: 10px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(46, 230, 255, .55);
  background: transparent;
  cursor: pointer;
  transition: transform 220ms ease-out, background-color 220ms ease-out,
              box-shadow 220ms ease-out, opacity 220ms ease-out;
  opacity: .7;
}
.story-dot:hover,
.story-dot:focus-visible {
  opacity: 1;
  transform: scale(1.25);
  outline: none;
}
.story-dot[aria-current="true"] {
  background: #2EE6FF;
  border-color: #2EE6FF;
  opacity: 1;
  transform: scale(1.45);
  box-shadow: 0 0 12px rgba(46, 230, 255, .85);
}

.story-dot-label {
  position: absolute;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.4px;
  color: #CFEBFF;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease-out;
}
.story-dot:hover .story-dot-label,
.story-dot:focus-visible .story-dot-label { opacity: 1; }

/* ---- long-page progress bar (blog) ---- */
.story-bar {
  width: 2px;
  height: 180px;
  border-radius: 2px;
  background: rgba(46, 230, 255, .18);
  overflow: hidden;
}
.story-bar-fill {
  display: block;
  width: 100%;
  height: 0;
  background: linear-gradient(180deg, #5EE9FF, #2EE6FF);
}
.story-count {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1px;
  color: #CFEBFF;
  opacity: .75;
}

/* ---- blog: one card per scroll gesture (stepping handled in story.js) ---- */

@media (max-width: 1023px) {
  .story-rail { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .story-rail { display: none; }
}