/* ===== The line above the header travels right to left =====
   Founder 2026-11-09: "Add this about the header 'Free AI & Web Development Training for
   Everyone' and also make it move from right to left."

   The sentence was the standing line in this bar on all 188 pages from 2026-11-07 (a10c5e5f)
   until 07:20 today, when "remove this Free AI & Web Development Training for Everyone" took it
   out along with the hero headline (6cb6069b). It is back here, in the same .beta-item the bar was
   built for, and moving again.

   Why its own file and not styles.css, where the bar's own rules live: styles.css is linked by
   ~240 pages, and this host sends no Cache-Control for stylesheets, so a change there reaches a
   returning visitor only if every one of those 240 links gets a new ?v=. A new file has a URL no
   browser has ever seen, so it arrives first time, for everyone, and the shared stylesheet is left
   exactly as it is. Loaded last of the page's own stylesheets, so it wins on order as well as
   weight; nginx then injects phone.css, which only sets flex on .beta-clip below 600px.

   How the movement is built. The bar's markup is .beta-track > two identical .beta-track-half
   blocks (the second aria-hidden, so a screen reader reads the sentence once). The track is as wide
   as both halves, and the animation slides it left by exactly half its width - at which point the
   second half is standing precisely where the first began, and the loop restarts with nothing to
   see. That is why the sentence never appears to jump back, and why the bar is never empty.
   This is the mechanism the bar used for its four messages before 11-07; the halves were kept in
   the markup when the movement was removed, which is why they are the obvious thing to drive.

   Speed. Measured on the live page: the half is 488px - the sentence and its icon are 432px, the
   same figure the 11-07 note records for the standing line, plus the 56px gap. 488px in 13s is
   37.5px/s, against ~50px/s for the old four-message loop, which was brisk for a sentence this
   long; at this speed the whole line can be read as it passes and it comes round every 13 seconds.
   One number tunes it: --beta-move. (Those are CSS pixels. getBoundingClientRect reports 610 and
   1219 for the half and the track, because site-scale.css puts zoom: 1.25 on <html>.)

   It stops when the pointer is on the bar or anything in it has keyboard focus, so a line being
   read is not snatched away.
   ========================================================================================= */
.beta-bar { --beta-move: 13s; }

/* The edge fade comes back with the movement: it is what carries the words in and out of view
   instead of letting them appear and vanish at a hard edge. It was removed with the animation on
   11-07 for exactly that reason - on a line that never moves it only greys out the wording. */
.beta-bar .beta-clip {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent);
          mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent);
}

/* styles.css centres a single standing line in a track pinned to the clip's width (width: 100%;
   justify-content: center). A travelling line needs the opposite: a track as wide as its content,
   starting at the left edge, with halves that refuse to shrink. */
.beta-bar .beta-track { width: max-content; justify-content: flex-start; will-change: transform; }
.beta-bar .beta-track-half { flex-shrink: 0; }

/* Also from the standing-line design: the item was allowed to shrink and cut itself off with an
   ellipsis, because it had only the room between the two buttons. Here it has all the room it
   wants, so the cap and the ellipsis come off - left on, the sentence renders as
   "Free AI & Web Development Traini..." no matter how wide the window is. The 56px is the gap
   between one pass and the next, the same spacing the four messages had. */
.beta-bar .beta-track-half .beta-item {
  flex-shrink: 0; min-width: auto; max-width: none;
  overflow: visible; text-overflow: clip; padding-right: 56px;
}

@media (prefers-reduced-motion: no-preference) {
  .beta-bar .beta-track { animation: betascroll var(--beta-move) linear infinite; }
  .beta-bar:hover .beta-track, .beta-bar:focus-within .beta-track { animation-play-state: paused; }
}
@keyframes betascroll { to { transform: translateX(-50%); } }

/* Reduced motion, and the site's own lite mode: no movement at all. The second half would then sit
   beside the first as a visible repeat, so it is hidden and the single line goes back to standing
   in the middle of the bar - the 11-07 design, which is the right thing to fall back to. */
@media (prefers-reduced-motion: reduce) {
  .beta-bar .beta-track { width: 100%; justify-content: center; animation: none; }
  .beta-bar .beta-track-half[aria-hidden="true"] { display: none; }
  .beta-bar .beta-track-half .beta-item { overflow: hidden; text-overflow: ellipsis; padding-right: 0; }
}
html.lite .beta-bar .beta-track { animation: none !important; }

/* ===== Phones (600px and under) =====
   topbar.js hides the track here and fades one message at a time through .beta-rotator instead,
   because 312px of bar has room for one thing: the sentence, then the gold watermark button, in
   turn. The sentence still moves - it arrives from the right each time its turn comes round.

   Why an arrival rather than the crossing the desktop gets: a turn is 4.5s and the sentence is
   372px in a 312px window, so crossing it would mean ~150px/s, faster than a news ticker and
   unreadable - and this is the one screen where the line wraps to two lines and can be read whole.
   Nothing is traded away for the movement: the watermark button keeps its turn and stays still
   while it is tappable, and the class countdown keeps its place for when classes resume.

   Only .beta-slogan moves. The rotator clones whatever .beta-item it is showing, so the class
   travels with the copy, and the button's turn is left alone. A fresh clone is inserted each turn,
   which is what re-runs the animation. */
@media (max-width: 600px) and (prefers-reduced-motion: no-preference) {
  .beta-bar .beta-rotator .beta-slogan { animation: betaslidein 0.75s cubic-bezier(.22,.61,.36,1) both; }
}
@keyframes betaslidein { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
html.lite .beta-bar .beta-rotator .beta-slogan { animation: none !important; }