/* Scene indicator - vertical stack of short horizontal lines on the
   right edge of the hero showing which scene the visitor is in and
   how many scenes exist. Per Arun 2026-09-14.

   One line per scene from js/scenes.js (currently 6: helmet, horse,
   valley, bandipur, snow, outro). The active line grows to the
   "big" size; the others sit at the "small" size. Size and opacity
   animate smoothly on every scene change.

   Placement:  fixed to the right edge, vertically centered.
   Blend:      mix-blend-mode: difference - stays visible against
               any video / day / night background.
   Clickable:  each line is a real <button> that jumps straight to
               that scene via window.rideGoToScene(index).
   Mobile:     hidden entirely (@media hover: none / pointer: coarse
               and @media max-width: 767px both hide the container). */

.scene-indicator {
  position: fixed;
  /* Top-left corner of the viewport (moved from top-center per Arun
     2026-09-14). Top-aligned with the first text row of the top-right
     home-corner-nav so the bars and the nav labels read on the same
     visual baseline.
     left: 49px = 60px (the chrome / logo left edge) minus the 11px
     horizontal button padding, so the FIRST BAR's visible edge lands
     flush at x=60, in line with the logo below it.
     top: 32px + 10px vertical button padding = 42px effective top
     of the visible bar - matches the visible cap-top of the corner
     nav's first row (nav container at top:40, NewBlack Bold cap
     inset ~2 px = y=42). Active / hover bars grow DOWNWARD from
     that visible top edge (see align-items below).
     gap: 2px + 11px horizontal button padding on each side = 24px
     visible spacing between bar edges. This gives each button a
     comfortable ~24 x 27 px click hit-box around the 2 x 7 px bar
     without shifting any visible pixel. */
  top: 32px;
  left: 49px;
  transform: none;
  z-index: 1100;                     /* above hero chrome (1010), below home menu (5000) */
  display: flex;
  flex-direction: row;               /* horizontal stack (was column) */
  align-items: flex-start;           /* every bar anchored to the same top edge; grows extend DOWNWARD from there */
  gap: 2px;                          /* horizontal gap - the rest of the visual spacing lives inside the buttons' padding */
  padding: 0;
  margin: 0;
  list-style: none;
  pointer-events: none;              /* the container passes clicks through; buttons re-enable */
  color: #fff;
  /* mix-blend-mode: difference removed 2026-09-14 - reading as too
     jarring per Arun; plain white with opacity does the job more
     quietly. */
}

.scene-indicator__item {
  display: block;
  /* Invisible padding widens the hit-box around the 2px bar without
     changing where the bar renders. See .scene-indicator's comment
     for how the container's `gap` and `top` compensate to keep the
     visible layout identical. Per Arun 2026-09-14 - "the ideal one,
     required only for the best UX" - 11 px horizontal + 10 px
     vertical gives a ~24 x 27 px click target on the idle state. */
  padding: 10px 11px;
  background: transparent;
  border: 0;
  color: inherit;                    /* browsers default <button> to `buttontext` (black); force inherit from .scene-indicator so the line's background:currentColor picks up #fff */
  cursor: pointer;
  pointer-events: auto;              /* re-enable clicks on the button itself */
  -webkit-appearance: none;
  appearance: none;
}
.scene-indicator__item:focus { outline: none; }
.scene-indicator__item:focus-visible .scene-indicator__line {
  outline: 1px solid #fff;
  outline-offset: 3px;
}

/* The visible bar. Now VERTICAL per Arun 2026-09-14 (was horizontal
   when the stack was on the right edge). Small state = 2 × 14 px,
   opacity 0.7. Active state = 2 × 32 px, opacity 1. Fully rounded
   end-caps (border-radius 999px collapses to `width / 2` = 1 px on
   a 2px-wide bar, so top and bottom become perfect semicircles).
   Growth is in the HEIGHT dimension - because the container uses
   align-items: flex-start, every bar shares the same top edge and
   the taller states extend DOWNWARD (music-equalizer style). */
.scene-indicator__line {
  display: block;
  width: 2px;
  height: 7px;                       /* 50% of the previous 14 px per Arun 2026-09-14 */
  background: currentColor;
  border-radius: 999px;
  opacity: 0.7;
  transition:
    height  360ms cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 240ms ease;
}
.scene-indicator__item[aria-current="true"] .scene-indicator__line {
  height: 16px;                      /* 50% of the previous 32 px */
  opacity: 1;
}

/* Hover: bar grows to 20% taller than the active state (19 px), full
   opacity, regardless of whether it's the current scene. Same 360 ms
   ease. */
.scene-indicator__item:hover .scene-indicator__line {
  height: 19px;                      /* 50% of the previous 38 px */
  opacity: 1;
}

/* Hide the cursor-tip pill (the small text pill that spring-follows
   the cursor, from js/cursor-tip.js) while the pointer is over an
   indicator button. The custom triangle cursor STAYS visible per
   Arun 2026-09-14 - only the accompanying text pill hides so it
   doesn't overlap the indicator's own visual affordance. */
body:has(.scene-indicator__item:hover) .cursor-tip {
  opacity: 0;
  transition: opacity 180ms ease;
}

/* Hide while the home menu is open (menu owns the screen), while the
   game modal is open, and while the preloader is up. */
body.home-menu-open .scene-indicator,
body.is-game-open   .scene-indicator,
body.is-preloading  .scene-indicator {
  opacity: 0;
  pointer-events: none;
  transition: opacity 240ms ease;
}

/* Note (2026-09-14): the indicator does NOT fade during the eye-blink
   transition. That would make it flash out on every scene change,
   which defeats its purpose as a persistent "you are here" marker.
   It stays put through the whole ride. */

/* Mobile viewport (< 768 px) - hidden entirely per Arun.
   Uses viewport width only, NOT hover/pointer type - a touchscreen
   laptop with a wide viewport still shows the indicator. */
@media (max-width: 767px) {
  .scene-indicator { display: none !important; }
}

/* Reduced motion: kill the growth animation, just switch instantly. */
@media (prefers-reduced-motion: reduce) {
  .scene-indicator__line { transition-duration: 0ms; }
}