/* ============================================================================
   The Science New Wave tab in the site nav — views/partials/snw_tab.hbs.

   SCIENCE, NEW, WAVE and a helix take turns in one slot, each rolling up into
   place. It replaced a 24px helix image that read as a small orange "XX" on
   the dark bar. Loaded by layout.hbs and falconDarkLayout.hbs (which share the
   topbar partial) and by falconLayout.hbs, which has a navbar of its own.
   ============================================================================ */

.snw-roll {
    position: relative; display: inline-block; vertical-align: middle;
    height: 1.3em; line-height: 1.3em; overflow: hidden;
    /* on a white bar, an orange dark enough to read: #c2410c on #fff is 5.2:1 */
    color: #c2410c;
    font-weight: 800; letter-spacing: 0.11em; text-transform: uppercase;
}
/* Dark bars get the amber /science-new-wave itself uses, and a little glow.
   Habitat profiles darken falconLayout's white navbar (habitat-profile.css). */
.topbar--dark .snw-roll,
body.hp-page .navbar .snw-roll {
    color: #ff9147;
    text-shadow: 0 0 10px rgba(255, 145, 71, 0.45);
}

/* An invisible SCIENCE, the longest word, gives the slot its width. */
.snw-roll__size { display: block; visibility: hidden; }

.snw-roll__track {
    position: absolute; top: 0; left: 0; right: 0;
    animation: snw-roll 5.6s cubic-bezier(0.7, 0, 0.2, 1) infinite;
}
.snw-roll__track > span {
    display: flex; align-items: center; justify-content: center; height: 1.3em;
}
.snw-roll__dna .snw-helix { width: 2.4em; height: 1.2em; }
.topbar--dark .snw-roll__dna .snw-helix,
body.hp-page .navbar .snw-roll__dna .snw-helix { filter: drop-shadow(0 0 5px rgba(255, 145, 71, 0.5)); }

/* Each stop holds for 1.1s, then rolls up in 0.3s. The fifth stop is SCIENCE
   again, identical to the first, so the jump back to the start is invisible. */
@keyframes snw-roll {
    0%, 20%  { transform: translateY(0); }
    25%, 45% { transform: translateY(-1.3em); }
    50%, 70% { transform: translateY(-2.6em); }
    75%, 95% { transform: translateY(-3.9em); }
    100%     { transform: translateY(-5.2em); }
}

/* Pointing at it, or tabbing to it, holds the word that is showing. */
.tb-snw:hover .snw-roll__track,
.tb-snw:focus-visible .snw-roll__track { animation-play-state: paused; }

/* The mobile drawer has room for the whole name, so it says it. */
.sidemenu__nav__list .tb-snw--full {
    display: flex; align-items: center; gap: 10px;
    color: #ff9147 !important;
}
.sidemenu__nav__list .tb-snw--full .snw-helix { width: 30px; height: 15px; flex: none; }

/* Below 1160px the bar has no room for a word-wide slot: measured on
   /science-new-wave, it pushed the search button off the bar from about 1100px
   (the live nav already runs out of room below about 1065px). There, and for
   anyone who asks for less motion, the tab is the helix alone, holding still,
   at the size the old icon was. */
@media (max-width: 1160px), (prefers-reduced-motion: reduce) {
    .snw-roll { width: 2em; }
    .snw-roll__size { display: none; }
    .snw-roll__track { animation: none; transform: translateY(-3.9em); }
    .snw-roll__dna .snw-helix { width: 2em; height: 1em; }
}
/* ...and on a narrow bar the link gives back the padding the words needed, so
   the tab takes no more of the bar than the old 24px icon did. */
@media (max-width: 1160px) {
    .topbar__nav__list > li > a.tb-snw { padding-left: 4px; padding-right: 4px; }
}