/* Web only. The spec bans blue browser focus boxes, and react-native-web leaves
   the UA outline on every pressable and input. Focus stays visible for keyboard
   users, but drawn in champagne rather than the browser's default blue. */
* { -webkit-tap-highlight-color: transparent; }

:focus { outline: none; }

:focus-visible {
  outline: 1px solid rgba(200, 164, 93, 0.55);
  outline-offset: 2px;
  border-radius: 10px;
}

input:focus,
textarea:focus { outline: none; box-shadow: none; }

::selection { background: rgba(200, 164, 93, 0.28); }

/* ------------------------------------------------------------------ *
 * Entrance animation
 *
 * Moves the element, and deliberately never touches its opacity.
 *
 * A running CSS animation overrides the element's own styles, so an animation
 * that starts and then stops progressing — a background tab, a throttled frame
 * loop — holds whatever its first keyframe said. When that keyframe set
 * opacity to 0, the content stayed invisible and the page read as a
 * half-rendered ghost of itself. Animating only the transform means the worst
 * case is content sitting ten pixels low, which nobody will ever notice, while
 * the content itself can never disappear.
 * ------------------------------------------------------------------ */
@keyframes byt-rise-in {
  from { transform: translateY(var(--byt-fade-distance, 12px)); }
  to   { transform: translateY(0); }
}

.byt-fade-in {
  /* React Native Web renders every View as a column flexbox. This wrapper is a
     plain div, so without these it would default to display:block and stack
     its children by the normal document flow instead — which collapses the
     heading and the paragraph beneath it onto one line. These are the same
     base rules RNW gives a View, so the wrapper lays out identically to the
     one it replaced. */
  display: flex;
  flex-direction: column;
  align-items: stretch;
  flex-basis: auto;
  flex-shrink: 0;
  position: relative;
  box-sizing: border-box;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  border-width: 0;
  z-index: 0;

  animation: byt-rise-in 460ms cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
  .byt-fade-in { animation: none; }
}