/* Homepage announcement. Strawberry surface with the site's type, gutter and tap tokens. */

.home-announcement {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: var(--announcement-layer);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--announcement-gap);
  min-block-size: var(--announcement-height);
  padding-inline: var(--announcement-gutter);
  background: var(--announcement-background);
  color: var(--announcement-foreground);
  font: var(--announcement-weight) var(--announcement-size) / var(--announcement-leading) var(--announcement-face);
}
.home-announcement__link {
  display: inline-flex;
  align-items: center;
  gap: var(--announcement-gap);
  min-block-size: var(--announcement-height);
  color: inherit;
  text-decoration: none;
}
.home-announcement__link:hover > span:first-child {
  text-decoration: underline;
  text-underline-offset: var(--announcement-ring-offset);
}
.home-announcement__link:focus-visible {
  outline: var(--announcement-ring);
  outline-offset: calc(-1 * var(--announcement-ring-offset));
}
.home-announcement__arrow,
.home-announcement__tagline { flex-shrink: 0; }

body[data-ground='film'] .nav { inset-block-start: var(--announcement-height); }
body[data-ground='film'] .frame { padding-block-start: calc(var(--system-fog-top) + var(--announcement-height)); }
body[data-ground='film'] .fog::before { block-size: calc(var(--system-fog-top) + var(--announcement-height)); }

@media (max-width: 48em) {
  .home-announcement__tagline { display: none; }
}

/* The loadbar finishes first; the banner then slides in after a quiet beat.
   CSS owns the entrance so a failed script can never keep the link hidden. */
.home-announcement {
  animation: announcement-enter var(--announcement-enter) var(--announcement-ease) var(--announcement-delay) both;
}
body[data-ground='film'] .nav,
body[data-ground='film'] .frame {
  animation: announcement-room var(--announcement-enter) var(--announcement-ease) var(--announcement-delay) both;
}
@keyframes announcement-enter {
  from { visibility: hidden; transform: translateY(calc(-1 * var(--announcement-slide-distance))); }
  to { visibility: visible; transform: none; }
}
@keyframes announcement-room {
  from { transform: translateY(calc(-1 * var(--announcement-room-distance))); }
  to { transform: none; }
}

/* Two identical faces turn through the same slot; the width never changes. */
.home-announcement__word {
  display: inline-grid;
  vertical-align: baseline;
  perspective: var(--announcement-flip-depth);
}
.home-announcement__face {
  grid-area: 1 / 1;
  backface-visibility: hidden;
  animation: announcement-flip-front var(--announcement-flip-cycle) var(--announcement-ease) var(--announcement-flip-delay) infinite both;
}
.home-announcement__face--back { animation-name: announcement-flip-back; }
@keyframes announcement-flip-front {
  0%, 86% { transform: rotateX(0); }
  100% { transform: rotateX(calc(-1 * var(--announcement-flip-turn))); }
}
@keyframes announcement-flip-back {
  0%, 86% { transform: rotateX(var(--announcement-flip-turn)); }
  100% { transform: rotateX(0); }
}

/* Motion settings change the distance, never restart the entrance animation. */
html[data-motion='off'] .home-announcement__face { animation: none; }
html[data-motion='off'] .home-announcement__face--back { visibility: hidden; }
@media (prefers-reduced-motion: reduce) {
  .home-announcement__face { animation: none; }
  .home-announcement__face--back { visibility: hidden; }
}

/* Plain type between splats. The effect returns to the exact original line. */
.home-announcement__fun { display: inline-grid; position: relative; isolation: isolate; vertical-align: baseline; }
.home-announcement__fun-prefix,
.home-announcement__fun-period { display: inline-block; white-space: pre; }
.home-announcement__fun-prefix { animation: announcement-fun-room-left var(--announcement-fun-cycle) var(--announcement-ease) var(--announcement-fun-delay) infinite both; }
.home-announcement__fun-period { animation: announcement-fun-room-right var(--announcement-fun-cycle) var(--announcement-ease) var(--announcement-fun-delay) infinite both; }
.home-announcement__goo {
  position: absolute;
  inset-inline-start: 50%;
  inset-block-start: 50%;
  inline-size: var(--announcement-fun-burst-width);
  max-inline-size: none;
  block-size: var(--announcement-fun-burst-height);
  transform: translate(-50%, -50%);
  fill: var(--announcement-fun-fill);
  pointer-events: none;
  overflow: visible;
}
.home-announcement__goo-blob,
.home-announcement__goo-drops {
  opacity: var(--hidden-opacity);
  transform-origin: 0 0;
  animation: announcement-goo-splat var(--announcement-fun-cycle) var(--announcement-ease) var(--announcement-fun-delay) infinite both;
}
.home-announcement__goo-drops { animation-name: announcement-goo-drops; }
.home-announcement__fun-letters { position: relative; z-index: var(--layer-raised); display: flex; }
.home-announcement__fun-letters > span {
  display: inline-block;
  transform-origin: 50% var(--announcement-fun-origin-y);
  animation: announcement-goo-letter var(--announcement-fun-cycle) var(--announcement-ease) var(--announcement-fun-delay) infinite both;
}
.home-announcement__fun-letters > span:nth-child(2) { animation-delay: calc(var(--announcement-fun-delay) + var(--announcement-fun-step-next)); }
.home-announcement__fun-letters > span:nth-child(3) { animation-delay: calc(var(--announcement-fun-delay) + var(--announcement-fun-step-last)); }
@keyframes announcement-goo-splat {
  0%, 13%, 100% { opacity: var(--hidden-opacity); transform: scale(0); }
  2% { opacity: var(--shown-opacity); transform: scale(var(--announcement-fun-pinch), var(--announcement-fun-pull)); }
  4% { opacity: var(--shown-opacity); transform: scale(var(--announcement-fun-stretch), var(--announcement-fun-squash)); }
  6%, 9% { opacity: var(--shown-opacity); transform: scale(1); }
  11% { opacity: var(--shown-opacity); transform: scale(var(--announcement-fun-squash), var(--announcement-fun-stretch)); }
}
@keyframes announcement-goo-drops {
  0%, 3%, 12%, 100% { opacity: var(--hidden-opacity); transform: scale(0); }
  5% { opacity: var(--shown-opacity); transform: scale(var(--announcement-fun-squash)); }
  8% { opacity: var(--shown-opacity); transform: scale(1); }
  11% { opacity: var(--hidden-opacity); transform: scale(1); }
}
@keyframes announcement-goo-letter {
  0%, 14%, 100% { transform: none; }
  1% { transform: scale(var(--announcement-fun-stretch), var(--announcement-fun-squash)); }
  3% { transform: translateY(calc(-1 * var(--announcement-fun-lift))) rotate(calc(-1 * var(--announcement-fun-tilt))) scale(var(--announcement-fun-pinch), var(--announcement-fun-pull)); }
  5% { transform: translateX(var(--announcement-fun-letter-x)) rotate(var(--announcement-fun-tilt)) scale(var(--announcement-fun-overshoot), var(--announcement-fun-squash)); }
  8% { transform: rotate(calc(-1 * var(--announcement-fun-tilt))) scale(var(--announcement-fun-stretch)); }
  11% { transform: scale(var(--announcement-fun-squash), var(--announcement-fun-stretch)); }
}
@keyframes announcement-fun-room-left {
  0%, 15%, 100% { transform: none; }
  3%, 10% { transform: translateX(calc(-1 * var(--announcement-fun-room))); }
}
@keyframes announcement-fun-room-right {
  0%, 15%, 100% { transform: none; }
  3%, 10% { transform: translateX(var(--announcement-fun-period-room)); }
}
html[data-motion='off'] .home-announcement__goo { display: none; }
html[data-motion='off'] .home-announcement__fun-letters > span,
html[data-motion='off'] .home-announcement__fun-prefix,
html[data-motion='off'] .home-announcement__fun-period,
html[data-motion='off'] .home-announcement__goo-blob,
html[data-motion='off'] .home-announcement__goo-drops { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .home-announcement__goo { display: none; }
  .home-announcement__fun-letters > span,
  .home-announcement__fun-prefix,
  .home-announcement__fun-period,
  .home-announcement__goo-blob,
  .home-announcement__goo-drops { animation: none; }
}