/* ============================================================================
   DERWENT CENTRAL - Solari Logo Animation
   ============================================================================
   Split-flap / passenger-information-display animation for the Derwent
   Central wordmark. Cycles the second line between CENTRAL and LONDON.

   Structure:
     .dl-logo-solari
       .dl-logo-solari__bar
       .dl-logo-solari__text
         .dl-logo-solari__line1  →  "DERWENT"
         .dl-logo-solari__line2  →  JS-populated flap cells

   Depends on: tokens.css, fonts.css
   ============================================================================ */


/* --- Container ----------------------------------------------------------- */

.dl-logo-solari {
  display: flex;
  align-items: stretch;
  gap: 14px;
  color: var(--dl-white);
  user-select: none;
}


/* --- Accent bar ---------------------------------------------------------- */

.dl-logo-solari__bar {
  width: 3px;
  background: var(--dl-sage);
  border-radius: 2px;
  flex-shrink: 0;
  align-self: stretch;
}


/* --- Text block ---------------------------------------------------------- */

.dl-logo-solari__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-transform: uppercase;
  line-height: 1.2;
  font-family: var(--dl-font-primary);
}

.dl-logo-solari__line1 {
  font-size: 18px;
  font-weight: var(--dl-weight-light);
  letter-spacing: 0.12em;
}

.dl-logo-solari__line2 {
  font-size: 18px;
  font-weight: var(--dl-weight-bold);
  letter-spacing: 0.12em;
  display: flex;
  flex-wrap: nowrap;
  height: 1.4em;
  overflow: hidden;
}


/* --- Flap cells ---------------------------------------------------------- */

.dl-logo-solari__cell {
  display: inline-flex;
  justify-content: center;
  min-width: 0;
  flex-shrink: 0;
  position: relative;
  perspective: 200px;
  overflow: visible;
  height: 1.4em;
  line-height: 1.4em;
}

.dl-logo-solari__char {
  display: block;
  backface-visibility: hidden;
}

.dl-logo-solari__char.is-flipping-out {
  animation: dl-solari-down 0.12s ease-in forwards;
}

.dl-logo-solari__char.is-flipping-in {
  animation: dl-solari-up 0.12s ease-out forwards;
}


/* --- Keyframes ----------------------------------------------------------- */

@keyframes dl-solari-down {
  0%   { transform: rotateX(0deg);    opacity: 1; }
  100% { transform: rotateX(-90deg);  opacity: 0; }
}

@keyframes dl-solari-up {
  0%   { transform: rotateX(90deg);   opacity: 0; }
  100% { transform: rotateX(0deg);    opacity: 1; }
}


/* --- Reduced motion ------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .dl-logo-solari__char.is-flipping-out,
  .dl-logo-solari__char.is-flipping-in {
    animation: none;
  }
}