/* The logo: its plate, the opening animation and the menu it ends on.
 *
 * Kept apart from site.css because the login page needs it too, and the
 * login page is served by the Worker before anything else is reachable.
 *
 * The logo has its own two colours — the yellow plate and the dark green it
 * is drawn in. They are the mark's, not the site's, and stay as the design
 * exported them; the rest of the site keeps its own palette.
 */

.logo {
  --logo-yellow: #FFC915;
  --logo-green: #1F3F36;

  display: block;
  margin: 0;
  border-radius: 24px;
  overflow: hidden;
  background: var(--logo-yellow);
  /* The plate clips its drawing even while parts of it move on their own
     compositor layers: without its own stacking context, Chrome on Android
     let the word run past the rounded edge of the plate mid-animation. */
  isolation: isolate;
  contain: paint;

  /* The frame is the shape the drawing ends in — the mark and the five
     words, with nothing but a margin around them. The animation is wider
     than that and is fitted into it; what it no longer does is leave a
     third of the plate empty. Held from the start, so the static logo
     underneath does not make the page jump when the drawing arrives. */
  aspect-ratio: 238 / 149;
}

.logo svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Before the script runs, the static logo sits in the middle of the frame. */
.logo [data-logo-still] { object-fit: contain; }

/* The site's own stylesheet is not on the login page, so the rule that keeps
   a hidden element hidden has to be here too. */
.logo__play[hidden] { display: none; }

.logo__play {
  display: block;
  margin: 12px auto 0;
  min-height: 44px;
  padding: 10px 18px;
  font: inherit;
  font-size: 15px;
  color: var(--logo-green, #1F3F36);
  background: none;
  border: 1px solid currentcolor;
  border-radius: 999px;
  cursor: pointer;
}

/* ------------------------------------------------------- the animation --- */

/* The outline of the house is drawn on at the end, so it starts unseen.
   Declared here rather than as a style attribute in the drawing: the gate
   serves the page under a Content-Security-Policy that allows no inline
   style at all, and the drawing is served through it. */
.obal { opacity: 0; }

#lg { transition: fill 0.7s ease; }

/* The ball that bounces across the word and ends as the dot of the i. The
   prototype coloured it in its own stylesheet; without this it is black. */
#ball { fill: var(--logo-green, #1F3F36); }

/* Where the row of words is measured: off the page, out of the way, and
   out of the drawing — whose view moves, which is what made a length read
   inside it come back from the layout before the move. */
.logo__measure {
  position: absolute;
  left: -9999px;
  top: 0;
  width: 10px;
  height: 10px;
  overflow: hidden;
  pointer-events: none;
}

/* The invisible rectangles that let a letter be hovered along with its word. */
.hit { fill: transparent; cursor: pointer; }
.logo--menu .hit { pointer-events: none; }

.lab text {
  font-family: 'IBM Plex Sans Condensed', 'IBM Plex Sans', sans-serif;
  font-size: 90px;
  letter-spacing: 1px;
}

.ini { fill: #FFC915; font-weight: 700; }
.rest { fill: #FFFFFF; font-weight: 500; }
.pill { fill: #1F3F36; }

/* A label drops in under its letter: a slow, eased fall and fade. Only
   opacity and transform move — a clip-path running with them is what
   made the labels arrive in steps. */
.lab {
  opacity: 0;
  transform: translateY(-50px);
  transition:
    transform 0.62s cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity 0.5s ease;
}

.lab.on { opacity: 1; transform: translateY(0); }

.letter { transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); }
.letter.on { transform: translateY(-40px); }
.letter.bump { transform: translateY(var(--b, 22px)); transition: transform 0.09s ease-out; }

/* The voice mark in the L: waves while it listens, rings once it has heard. */
#waves,
#rings { transform-box: fill-box; transform-origin: center; }

#waves { transition: transform 0.26s ease 0.28s, opacity 0.2s ease 0.28s; }
#rings { transform: scaleX(0); opacity: 0; transition: transform 0.26s ease, opacity 0.2s ease; }

.logo--target #waves {
  transform: scaleX(0);
  opacity: 0;
  transition: transform 0.26s cubic-bezier(0.5, 0, 0.8, 0.4), opacity 0.1s linear 0.16s;
}

.logo--target #rings {
  transform: scaleX(1);
  opacity: 1;
  transition: transform 0.42s cubic-bezier(0.2, 0.8, 0.2, 1) 0.26s, opacity 0.1s linear 0.26s;
}

/* Once the target has left the wall, the waves come back in its place. */
.logo--burst #rings { opacity: 0; transition: none; }

.logo--burst #waves {
  transform: scaleX(1);
  opacity: 1;
  transition: transform 0s, opacity 0.6s ease var(--waves, 750ms);
}

/* The target itself, flying past the reader rather than inside the drawing. */
.logo__fly {
  position: fixed;
  pointer-events: none;
  z-index: 50;
  will-change: transform, opacity;
}

/* ------------------------------------------------------------ the menu --- */

/* The pill is the target. The word sits on top of it, and the description
   after the word is still there when it is invisible — leaving the text
   able to take a click would let a tag's hidden half cover its neighbour. */
.tag { cursor: pointer; outline: none; }
.tag text { pointer-events: none; }
.tag:focus-visible rect { stroke: #FFFFFF; stroke-width: 8; }

@media (prefers-reduced-motion: reduce) {
  .lab,
  .letter,
  #waves,
  #rings { transition: none; }
}

/* The block the logo sits in on the home page: the drawing, and under it the
   one control that replays it. */
.logo-block {
  padding-top: var(--space-hero-top);
  display: flex;
  flex-direction: column;
}