/* Cross-document transitions between the Aeons pages and Pleroma.
   Both documents have to opt in for the browser to animate between them, and
   styles.css is an untouched shared copy, so the opt-in lives in its own file
   that is added alongside it rather than edited into it. */
@view-transition { navigation: auto; }

::view-transition-old(root),
::view-transition-new(root) { animation-duration: 240ms; }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none; }
}

/* The home hero's two beats. Same reason this lives here rather than in
   styles.css: that file is an untouched shared copy, and this has to win
   against it, so it goes in the sheet that loads after.

   Animations, not transitions. A transition needs the element to be painted
   at one opacity and then changed to another, which means unhiding it and
   clearing the class in two separate frames — and if those frames never come,
   because the tab is in the background or rAF is throttled, the class is never
   cleared and the hero stays blank. That is not a cosmetic failure: the
   headline is the only text on this page. An animation starts by itself when
   the element begins being displayed, and `both` holds the final frame, so the
   resting state is opaque whether the animation ran, was throttled, or was
   switched off entirely. */
@keyframes hero-line-in  { from { opacity: 0; } to { opacity: 1; } }
@keyframes hero-line-out { from { opacity: 1; } to { opacity: 0; } }

.home-hero-line { animation: hero-line-in 600ms ease both; }
.home-hero-line.is-leaving { animation: hero-line-out 600ms ease both; }

@media (prefers-reduced-motion: reduce) {
  .home-hero-line,
  .home-hero-line.is-leaving { animation: none; }
}

/* The language button is 31x31 — the one control on this half small enough to
   be awkward on a phone. styles.css already gives the nav links a 44px
   minimum on small screens; this brings the last one into line. Same technique
   as pleroma.css: the hit area grows, the drawn button does not, so nothing in
   the footer bar shifts.

   Safe against the menu it opens: .lang-menu sits above the button with an 8px
   gap and a higher z-index, and this reaches only 6.5px past the button's
   edge, so it can never swallow a tap meant for a language.

   The home link on the emblem gets the same treatment: it is 22px wide, and
   it is the way back to the front page from every prose page.

   Text links inside sentences are deliberately NOT included. Their size is set
   by the line height of the words around them, and growing them would put
   overlapping hit areas on adjacent lines — a tap landing on the wrong link is
   worse than a small one. Both the accessibility guidance and common sense
   make an exception for links in running text. */
#lang-toggle::after,
.center-logo::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: max(100%, 44px);
  height: max(100%, 44px);
}

.center-logo { position: relative; }

/* styles.css gives the nav a 44px minimum, but only under `max-width: 800px`.
   A phone held sideways is 844px wide, so it misses the query and gets the
   sizing meant for a mouse — the MENU button ends up under 24px on the one
   device that cannot afford it. Width was never the right question here;
   `pointer: coarse` asks the actual one, which is whether the thing doing the
   pointing is a finger. */
@media (pointer: coarse) {
  .menu-trigger-toggle { position: relative; }

  .menu-trigger-toggle::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: max(100%, 44px);
    height: max(100%, 44px);
  }
}