/* ==========================================================================
   MIT Apps for Action — homepage banner
   --------------------------------------------------------------------------
   Styles for _includes/apps-for-action-banner.html, which is slide 2 of the
   homepage carousel (context='carousel') and panel 2 of the phone layout
   (context='panel'), and for the bee flight, _includes/afa-bee-flight.html,
   which the banner and the /explore/apps-for-action header share. Loaded
   from _layouts/home.html and pages/apps-for-action.html.

   The banner is live text, not an image. The headline, the promise line and
   the grey outcome words are real DOM, so they translate, read aloud, select
   and resize; the only picture is the bee, a 4.6 KB SVG lifted out of
   /images/logo.svg. A rendered PNG of the same banner would be ~180 KB.

   Colours come from css/ai2-tokens.css. The grey words are brand slate
   (#58585a), 7.0:1 on white; the light grey in the original mockup was
   closer to 2:1 and would have failed AA.
   ========================================================================== */

.afa-banner {
  position: relative;
  box-sizing: border-box;
  border: 4px solid var(--ai2-brand-orange, #f88d34);
  background: var(--ai2-surface, #fff);
  overflow: hidden;
  text-align: center;
  /* Three bands. The headline is first in the DOM so it is read first;
     grid puts the words above and below it on screen. */
  display: grid;
  grid-template-areas:
    "over"
    "head"
    "under";
}

/* The flight overlay is positioned, so it would paint over the text if the
   text had no stacking position of its own. */
.afa-banner__head,
.afa-banner__over,
.afa-banner__under { position: relative; z-index: 1; }

.afa-banner__head  { grid-area: head; }
.afa-banner__over  { grid-area: over; }
.afa-banner__under { grid-area: under; }

.afa-banner__title {
  margin: 0;
  font-family: var(--ai2-display-font, "Poppins", sans-serif);
  font-weight: 700;
  font-style: italic;
  line-height: 1.02;
  letter-spacing: -0.015em;
  color: var(--ai2-ink, #12181f);
}

.afa-banner__promise {
  margin: 0 auto;
  max-width: 34em;
  font-family: var(--ai2-display-font, "Poppins", sans-serif);
  font-weight: 600;
  font-style: italic;
  line-height: 1.3;
  color: var(--ai2-ink, #12181f);
}

/* The outcome words ------------------------------------------------------
   A flex row that wraps instead of overflowing, so a longer translation
   ("pensadores computacionales") drops to a second line rather than pushing
   the layout sideways. */
.afa-words {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0;
  list-style: none;
}

.afa-words li {
  font-family: var(--ai2-display-font, "Poppins", sans-serif);
  font-weight: 500;
  font-style: italic;
  color: var(--ai2-brand-slate, #58585a);
  line-height: 1.2;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Carousel slide (768px and up)
   --------------------------------------------------------------------------
   4:1, the same shape as every other slide, so the carousel does not change
   height when it rotates. Everything is sized in cqw — percent of the slide's
   width, because .ai2-slide in ai2-home.css is a container — so the banner
   scales exactly like the image slides beside it. */

.afa-banner--carousel {
  aspect-ratio: 4 / 1;
  align-content: center;
  row-gap: 1.1cqw;
  padding: 2cqw 3cqw;
}

.afa-banner--carousel .afa-banner__title   { font-size: 5.4cqw; }
.afa-banner--carousel .afa-banner__promise { font-size: max(0.85rem, 1.7cqw); margin-top: 0.8cqw; }

.afa-banner--carousel .afa-words {
  justify-content: space-between;
  gap: 0.4cqw 2.5cqw;
  padding: 0 4cqw;
}

.afa-banner--carousel .afa-words li { font-size: max(0.75rem, 1.5cqw); }

/* Keep the top row clear of the corner the bee parks in. */
.afa-banner--carousel .afa-banner__over { padding-right: 11cqw; }

/* The small vertical offsets are what make the words feel scattered rather
   than ruled. */
.afa-banner--carousel .afa-banner__over  li:nth-child(1) { transform: translateY(0.55em); }
.afa-banner--carousel .afa-banner__over  li:nth-child(3) { transform: translateY(0.3em); }
.afa-banner--carousel .afa-banner__under li:nth-child(2) { transform: translateY(0.45em); }
.afa-banner--carousel .afa-banner__under li:nth-child(3) { transform: translateY(-0.35em); }

/* --------------------------------------------------------------------------
   Phone panel (below 768px)
   --------------------------------------------------------------------------
   Phones stack the panels rather than rotating them. The words wrap into
   centred clusters, corners match the other panels, and the extra top
   padding is the lane the bee flies in, clear of the words. */

.afa-banner--panel {
  row-gap: 0.65rem;
  padding: 3.4rem 0.85rem 1rem;
  border-radius: var(--ai2-radius-card, 1rem);
}

.afa-banner--panel .afa-banner__title   { font-size: clamp(1.9rem, 10cqw, 2.6rem); }
.afa-banner--panel .afa-banner__promise { font-size: 0.9rem; margin-top: 0.45rem; }

.afa-banner--panel .afa-words {
  justify-content: center;
  gap: 0.25rem 0.9rem;
  padding: 0;
}

.afa-banner--panel .afa-words li { font-size: 0.8rem; }


/* ==========================================================================
   The bee flight — _includes/afa-bee-flight.html
   --------------------------------------------------------------------------
   Used by the banner above and by the header of /explore/apps-for-action.
   The containing box must be position: relative and overflow: hidden.
   ========================================================================== */

/* The overlay keeps the viewBox's 6:1 proportion, so nothing is stretched
   or cropped and the bee scales with its box. On a phone that would make the
   bee about 16px across, so there the overlay is twice the box's width,
   anchored right: the bee is twice the size, and it enters from the left
   edge partway along its path, after the loop. */
.afa-flight {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 0;
  width: 100%;
  aspect-ratio: 6 / 1;
  pointer-events: none;
}

@media (max-width: 767px) {
  .afa-flight { width: 200%; }
}

.afa-trail {
  fill: none;
  stroke: var(--ai2-brand-magenta, #92267c);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-dasharray: 7 9;
  opacity: 0.6;
}

/* The trail is dashed, and animating the dash offset of a dashed line only
   makes the dashes march. So the trail sits under a mask: a solid copy of
   the same path, normalised to pathLength 1000, whose own dash offset runs
   from 1000 to 0 and uncovers the trail just behind the bee. */
.afa-reveal {
  fill: none;
  stroke: #fff;
  stroke-width: 12;
  stroke-linecap: round;
  stroke-dasharray: 1000;
  stroke-dashoffset: 0;
}

/* Defaults are the finished picture, trail drawn and bee parked, which is
   what a browser without offset-path or a visitor who has asked for reduced
   motion gets. Without offset-path the bee keeps the position its transform
   attribute gives it.

   It flies when:
     - its carousel slide becomes active. Bootstrap adds .active only once
       the slide has finished sliding in, so the banner arrives clean and
       then the bee crosses it. The slide's own data-bs-interval leaves time
       to read it after the bee lands.
     - or the include's script adds .is-flying, the first time the box is
       half on screen (trigger='view'). */
@supports (offset-path: path("M 0 0 L 1 1")) {
  .afa-flight .afa-bee {
    transform: none;
    offset-path: path("M -40 158 C 60 160, 118 130, 118 98 C 118 70, 78 64, 68 88 C 56 116, 96 142, 146 144 C 232 150, 300 122, 362 96 C 470 50, 524 86, 652 72 C 802 56, 902 88, 1012 62 C 1082 48, 1112 44, 1146 52");
    offset-rotate: 0deg;
    offset-distance: 100%;
  }

  @media (prefers-reduced-motion: no-preference) {
    /* Waiting off the left edge, trail hidden, until it is time to go. */
    .afa-flight .afa-bee    { offset-distance: 0%; }
    .afa-flight .afa-reveal { stroke-dashoffset: 1000; }

    .carousel-item.active .afa-flight .afa-bee,
    .afa-flight.is-flying .afa-bee {
      animation: afa-fly 3.6s cubic-bezier(0.33, 0, 0.3, 1) 0.25s forwards;
    }
    .carousel-item.active .afa-flight .afa-reveal,
    .afa-flight.is-flying .afa-reveal {
      animation: afa-reveal 3.6s cubic-bezier(0.33, 0, 0.3, 1) 0.25s forwards;
    }
  }
}

@keyframes afa-fly {
  from { offset-distance: 0%; }
  to   { offset-distance: 100%; }
}

@keyframes afa-reveal {
  from { stroke-dashoffset: 1000; }
  to   { stroke-dashoffset: 0; }
}