/* ============================================================
   SPLIT-FLAP POPULAR BOARD
   ------------------------------------------------------------
   One five-row departure board for the homepage hero. The rows are
   static HTML, so the card is complete without JavaScript. The
   component script adds a pool of the remaining services, gives
   every row its own timer, and replaces a row with the same
   two-layer text fold used by the status pill.

   Only transform and opacity animate. The board is clipped, so a
   fold can never paint into the row above or below it.
   ============================================================ */

.sf-head__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.sf-heading {
  display: inline-grid;
  align-items: center;
  min-width: 8.5rem;
  white-space: nowrap;
  vertical-align: middle;
}

.sf-status__text .sf-text {
  grid-area: 1 / 1;
  white-space: nowrap;
  backface-visibility: hidden;
}

.sf-status__text.is-cycling {
  perspective: 600px;
}

.sf-status__text.is-cycling .sf-text--out {
  transform-origin: 50% 100%;
  animation: sf-text-out 240ms ease-in both;
}

.sf-status__text.is-cycling .sf-text--in {
  transform-origin: 50% 0;
  animation: sf-text-in 260ms 220ms var(--ease-out) both;
}

.sf-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 8.5rem;
  padding: 4px 8px;
  border: 1px solid rgba(124, 220, 179, 0.32);
  border-radius: var(--r-full);
  background: linear-gradient(
    180deg,
    rgba(52, 196, 138, 0.2),
    rgba(52, 196, 138, 0.07)
  );
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  color: var(--brand-100);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: var(--tracking-flag);
  line-height: 1.2;
  text-transform: uppercase;
}

.sf-status__dot {
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand-400);
  box-shadow: 0 0 0 3px rgba(52, 196, 138, 0.12);
}

.sf-status__text {
  display: inline-grid;
  align-items: center;
  min-width: 0;
}

.sf-pause {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: var(--r-full);
  background: transparent;
  color: var(--slate-400);
  cursor: pointer;
  touch-action: manipulation;
  transition: background var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}

.sf-pause[hidden] {
  display: none !important;
}

.sf-pause:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--white);
}

.sf-pause:focus-visible {
  outline: 2px solid var(--brand-300);
  outline-offset: 2px;
}

.sf-pause__icon {
  width: 12px;
  height: 12px;
  pointer-events: none;
}

.sf-pause__icon--play {
  display: none;
}

.sf-pause[aria-pressed="true"] .sf-pause__icon--pause {
  display: none;
}

.sf-pause[aria-pressed="true"] .sf-pause__icon--play {
  display: block;
}

.sf-board {
  --sf-row: 42px;
  position: relative;
  margin-top: var(--sp-4);
  padding: 3px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--r-lg);
  background: linear-gradient(
    180deg,
    rgba(4, 10, 20, 0.56),
    rgba(4, 10, 20, 0.3)
  );
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05),
    inset 0 -1px 0 rgba(0, 0, 0, 0.28),
    0 18px 34px -26px rgba(0, 0, 0, 0.7);
  isolation: isolate;
  overflow: hidden;
}

/* Faint scan lines sit above the rows but below the controls. They are a
   texture, not an overlay: 0.018 alpha is deliberately almost invisible. */
.sf-board::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  background: repeating-linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.018) 0 1px,
    transparent 1px 4px
  );
  pointer-events: none;
}

.sf-board__list {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sf-board__pool[hidden] {
  display: none !important;
}

.sf-row {
  position: relative;
  height: var(--sf-row);
  overflow: hidden;
  border-radius: calc(var(--r-md) - 1px);
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.038),
    rgba(255, 255, 255, 0.012)
  );
  transition: background var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}

.sf-row:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 10px;
  bottom: 0;
  left: 10px;
  z-index: 2;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.09),
    transparent
  );
  pointer-events: none;
}

.sf-row:hover {
  background: linear-gradient(
    180deg,
    rgba(52, 196, 138, 0.1),
    rgba(255, 255, 255, 0.025)
  );
  box-shadow: inset 0 0 0 1px rgba(124, 220, 179, 0.16);
}

.sf-row__face {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  height: 100%;
  padding: 0 12px;
}

.sf-row__name {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 10px;
  color: var(--white);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.2;
}

.sf-row__name svg {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  color: var(--brand-400);
}

.sf-row__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sf-row__price {
  display: inline-flex;
  align-items: baseline;
  flex: 0 0 auto;
  gap: 0.28em;
  color: var(--brand-300);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  white-space: nowrap;
}

.sf-row__unit {
  color: var(--slate-300);
  font-family: var(--font-body);
  font-size: 0.72em;
  font-weight: 600;
}

.sf-row__included {
  color: var(--brand-300);
  font-size: 0.92em;
  letter-spacing: 0.01em;
}

/* Rows reuse the status pill's two-layer text fold: the old face folds away
   at its bottom edge, then the new face folds in from its top edge. The
   wrapper is aria-hidden so assistive tech never reads the row twice. */
.sf-row-flip {
  position: absolute;
  inset: 0;
  display: block;
  perspective: 600px;
}

.sf-row-flip__layer {
  position: absolute;
  inset: 0;
  display: block;
  backface-visibility: hidden;
}

.sf-row.is-flipping .sf-row-flip__layer {
  will-change: transform;
}

.sf-row.is-flipping .sf-row-flip__layer--out {
  transform-origin: 50% 100%;
  animation: sf-text-out 240ms ease-in both;
}

.sf-row.is-flipping .sf-row-flip__layer--in {
  transform-origin: 50% 0;
  animation: sf-text-in 260ms 220ms var(--ease-out) both;
}

@keyframes sf-text-out {
  from {
    opacity: 1;
    transform: rotateX(0deg);
  }
  to {
    opacity: 0.2;
    transform: rotateX(-90deg);
  }
}

@keyframes sf-text-in {
  from {
    opacity: 0.2;
    transform: rotateX(90deg);
  }
  to {
    opacity: 1;
    transform: rotateX(0deg);
  }
}

@media (max-width: 600px) {
  .visual-card__head {
    gap: var(--sp-2);
    padding-bottom: var(--sp-2);
  }

  .visual-card__title {
    font-size: 0.6875rem;
    line-height: 1.2;
    letter-spacing: var(--tracking-flag);
  }

  .sf-board {
    --sf-row: 40px;
    margin-top: var(--sp-3);
    padding: 2px;
  }

  .sf-row__face {
    gap: 8px;
    padding: 0 10px;
  }

  .sf-row__name {
    gap: 8px;
    font-size: 0.75rem;
  }

  .sf-row__name svg {
    width: 15px;
    height: 15px;
  }

  .sf-row__price {
    font-size: 0.75rem;
  }

  .sf-heading {
    min-width: 8.25rem;
  }

  .sf-status {
    min-width: 8rem;
    padding: 3px 7px;
    font-size: 0.5625rem;
  }

  .sf-pause {
    width: 30px;
    height: 30px;
  }
}

/* At 360px the title, status pill and pause control no longer share a
   readable line. Put the meta group on its own full-width line rather than
   letting the phrase lengths move the card height around. */
@media (max-width: 379px) {
  .visual-card__head {
    flex-wrap: wrap;
  }

  .sf-head__meta {
    width: 100%;
    margin-left: 0;
    justify-content: space-between;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sf-row.is-flipping .sf-row-flip__layer,
  .sf-status__text.is-cycling .sf-text {
    animation: none !important;
  }

  .sf-row.is-flipping .sf-row-flip__layer--out {
    display: none;
  }
}