/* Section callouts — a crew member with a speech bubble, ported from design10
 * (`design10-character-callout*` in design10.css). Only `.design10-page` is
 * stripped from the selectors; design11 does not carry that page class.
 * Behaviour lives in hero10.js, next to the sprite factory it needs. */

/* Reuse the five pixel characters from the hero as section guides. They
 * replace the small section labels while leaving each section's main copy and
 * layout intact. */
/* The bubble, not the character-plus-bubble pair, sits on the section's
 * centre line: an empty spacer as wide as the character stands on the opposite
 * side (`::after` below), so the bubble's centre is the heading's centre
 * whichever side the character is on (it used to swing 19-28px left and right
 * from one section to the next). */
.design10-character-callout {
  --callout-sprite: 42px;
  --callout-gap: 14px;
  align-items: center;
  color: #161718;
  display: flex;
  gap: var(--callout-gap);
  justify-content: center;
  margin: 0 auto 28px;
  max-width: min(580px, calc(100% - 50px));
  min-height: 58px;
  opacity: 0;
  position: relative;
  transform: translateY(12px);
  transition: opacity 420ms ease, transform 620ms cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 4;
}
.design10-character-callout.is-visible {
  opacity: 1;
  transform: translateY(0);
}
/* The spacer is the only thing that gives way: on a narrow screen the bubble
 * keeps every pixel it had before and only drifts off centre once the line no
 * longer fits. The negative margins cancel the flex gap the spacer would
 * otherwise add. */
.design10-character-callout--left::after,
.design10-character-callout--right::after {
  content: "";
  flex: 0 1 auto;
  min-width: 0;
  width: calc(var(--callout-sprite) + var(--callout-gap));
  margin: 0 calc(var(--callout-gap) / -2);
}
.design10-character-callout--right {
  flex-direction: row-reverse;
}
.design10-character-callout-character {
  align-items: flex-end;
  display: flex;
  flex: 0 0 auto;
  transform: translateY(3px);
}
.design10-character-callout-character .design10-lovanaut-sprite {
  animation: design10-callout-pico 2.1s ease-in-out infinite;
  width: var(--callout-sprite);
}
.design10-character-callout-bubble {
  background: #fff;
  border: 1px solid rgba(16, 17, 18, 0.16);
  border-radius: 18px;
  box-shadow: 0 8px 20px rgba(20, 20, 20, 0.08);
  font-family: "Noto Sans JP", sans-serif;
  /* declared in design11.css (:root); the fallback is for a page that still
   * holds an older design11.css in its cache */
  font-size: var(--lp-type-callout, 15px);
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.45;
  padding: 12px 18px;
  position: relative;
  /* The bubble itself never shrinks — a fraction of a pixel is enough to push
   * the 「。」 to a line of its own — so the spacer absorbs all of it, and only
   * when the text cannot fit beside the character does the cap below turn the
   * line. Where it turns is decided by the clause wrappers further down. */
  flex-shrink: 0;
  max-width: calc(100% - var(--callout-sprite) - var(--callout-gap));
}
.design10-character-callout--left .design10-character-callout-bubble::after,
.design10-character-callout--right .design10-character-callout-bubble::after {
  border-bottom: 7px solid transparent;
  border-top: 7px solid transparent;
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.design10-character-callout--left .design10-character-callout-bubble::after {
  border-right: 8px solid #fff;
  left: -8px;
}
.design10-character-callout--right .design10-character-callout-bubble::after {
  border-left: 8px solid #fff;
  right: -8px;
}
.design10-character-callout-letter {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.45em) rotate(2deg);
}
.design10-character-callout.is-visible .design10-character-callout-letter {
  animation:
    design10-callout-letter-in 520ms cubic-bezier(0.16, 1, 0.3, 1) forwards,
    design10-callout-letter-talk 3.2s ease-in-out 1.1s infinite;
  animation-delay: calc(var(--design10-letter-index) * 24ms), calc(1.1s + var(--design10-letter-index) * 24ms);
}
#features > .inner-title .design10-character-callout {
  justify-content: flex-start;
  margin: 0 0 24px;
}
.h-latest > .content > .design10-character-callout {
  justify-content: center;
  margin: 0 auto 26px;
  max-width: 1120px;
}
#pricing > .design10-character-callout {
  margin-bottom: 26px;
  padding-top: 18px;
}
.design10-character-callout--h-texts {
  margin: 0 auto 24px;
}
.design10-character-callout--pricing-heading {
  margin-bottom: 18px;
  padding-top: 72px;
}
.h-latest > .content > .design10-character-callout--pricing-heading + .h-top-pricing {
  margin-top: 0;
}
.app-sec .design10-character-callout {
  justify-content: center;
  margin: 0 auto 22px;
}
/* design5 enables several discretionary OpenType features globally. They
 * turn Japanese fallback glyphs such as 「ます」 into a missing-glyph box in
 * Chromium, so the design10 copy uses the plain glyph forms. */
#features .inner-title h2,
#features .inner-title h2 *,
.design10-character-callout,
.design10-character-callout *,
.h-latest,
.h-latest *,
#pricing,
#pricing *,
.h-testis,
.h-testis *,
.app-sec,
.app-sec *,
footer,
footer * {
  font-feature-settings: normal !important;
  font-variant-ligatures: none !important;
}

@media (max-width: 900px) {
  .design10-character-callout {
    --callout-sprite: 38px;
    --callout-gap: 10px;
    margin-bottom: 22px;
    max-width: calc(100% - 36px);
  }
  .design10-character-callout-bubble {
    padding: 10px 14px;
  }
  .h-latest > .content > .design10-character-callout {
    margin-left: auto;
    margin-right: auto;
    max-width: calc(100% - 36px);
  }
  #features > .inner-title .design10-character-callout,
  .app-sec .design10-character-callout {
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 540px) {
  .design10-character-callout {
    --callout-sprite: 32px;
    --callout-gap: 7px;
    max-width: calc(100% - 24px);
    min-height: 48px;
  }
  .design10-character-callout-bubble {
    border-radius: 14px;
    letter-spacing: 0.01em;
    line-height: 1.35;
    padding: 9px 11px;
  }
  .h-latest > .content > .design10-character-callout {
    max-width: calc(100% - 24px);
  }
}


/* design10's own per-section colour overrides (`.h-learn .…-bubble` etc.) are
 * deleted above rather than overridden: at 0,2,0 they beat anything generic,
 * and they exist only to keep a solid white pill legible on a dark ground —
 * the opposite of the outline treatment below.
 * ---------------------------------------------------------------------------
 * design11: outline only.
 *
 * design10's bubble is a solid white pill with dark text, and its dark-section
 * overrides only flipped the *text* to white — which on this page left white
 * text on a white pill. Instead the bubble is transparent everywhere and takes
 * the section's own ink: white border + white text on the dark sections, black
 * border + black text on the white ones. The tail follows the same rule, drawn
 * as a rotated square with two borders so it stays hollow.
 * ------------------------------------------------------------------------- */
.design10-character-callout { color: #fff; }
/* the two callouts that sit on the white section */
/* .h-latest lost its paper panel when its clips went transparent — it is on the
 * universe now, like the sections either side of it. */

.design10-character-callout-bubble {
  background: transparent;
  border: 1.5px solid currentColor;
  box-shadow: none;
  color: inherit;
  padding: 12px 20px;
}

/* Hollow tail.
 *
 * With a transparent bubble there is nothing to hide the bubble's own border
 * where the tail meets it, so the outline read as a closed pill with a loose
 * triangle stuck to its side. The tail is therefore a rotated square filled
 * with the section's own ground: the fill covers the border segment underneath
 * it, and its two outward sides carry the outline on round the point. That
 * needs the ground colour, which is the one thing CSS cannot infer — so it is
 * declared per section, and there are only three. */
.design10-character-callout { --callout-ground: #0a0a0b; }
.app-sec .design10-character-callout { --callout-ground: #232323; }

.design10-character-callout--left .design10-character-callout-bubble::after,
.design10-character-callout--right .design10-character-callout-bubble::after {
  border: 0;
  width: 13px;
  height: 13px;
  background: var(--callout-ground);
  top: 50%;
  margin-top: -6.5px;
  transform: rotate(45deg);
}
.design10-character-callout--left .design10-character-callout-bubble::after {
  border-left: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  left: -7px;
}
.design10-character-callout--right .design10-character-callout-bubble::after {
  border-right: 1.5px solid currentColor;
  border-top: 1.5px solid currentColor;
  right: -7px;
}

/* One distance to the heading below, everywhere ---------------------------
 * Measured at the glyph, not the box: `.h-top-pricing` and `.h-testis` put a
 * 70px padding-top on their headings, so box-to-box they matched the others at
 * 16px while reading 90px apart on screen. The padding goes, and each margin is
 * then set against what its own heading's leading contributes. Target is 14px
 * from the callout to the first line of type; verified in the browser. */
.h-top-pricing .title-l { padding-top: 0; }
.h-testis .wrapper .title-m { padding-top: 0; }

/* Target: 28px from the callout to the first line of the heading, everywhere.
 * Each value is the target minus whatever that section already contributes —
 * a 70px flex gap in .h-learn, the heading's own leading elsewhere — so they
 * differ on paper and match on screen. */
.design10-character-callout { margin-bottom: 34px; }
.h-learn .design10-character-callout { margin-bottom: -49px; }
/* .h-learn cancels a 70px flex gap with a negative margin, and the heading's
 * leading is smaller on a phone — at 375px the same -49px overlapped the
 * heading by 20px instead of clearing it by 28. */
@media (max-width: 768px) {
  .h-learn .design10-character-callout { margin-bottom: -1px; }
}
.h-latest .top .design10-character-callout { margin-bottom: 35px; }
.h-latest .title1 { padding-top: 0; }
.h-top-pricing .design10-character-callout { margin-bottom: 35px; }
.h-testis .design10-character-callout { margin-bottom: 33px; }
.h-faq .design10-character-callout { margin-bottom: 32px; }
.app-sec .design10-character-callout { margin: 0 auto 34px; }

/* The crew chorus in the footer ------------------------------------------
 * One bubble, five speakers. The row is clipped by the footer's own overflow
 * so the members can start well outside it; each carries its own start offset
 * as a custom property, alternating sides, and they land on a stagger. */
.design10-crew-chorus {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin: 0 auto 80px;
  color: #16151a;
  /* the tail is a rotated square filled with the section's own ground, which
   * masks the bubble's border where it crosses. The footer is the hero's grey,
   * not white — a #fff fill left a pale notch under the bubble. */
  --callout-ground: #f3f3f3;
}
.design10-crew-chorus-bubble {
  /* the tail points down at the row instead of sideways at one character */
  padding: 14px 26px;
}
/* hero10-copy-v6.js wraps each clause of a callout (up to a 「、」 or 「。」) and
 * each sentence of the chorus line; a clause stays together and the line turns
 * between clauses. */
.design10-callout-phrase { display: inline-block; max-width: 100%; }
.design10-crew-chorus-bubble::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -8px;
  width: 14px;
  height: 14px;
  margin-left: -7px;
  background: var(--callout-ground);
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
}
.design10-crew-chorus-row {
  display: flex;
  align-items: flex-end;
  gap: clamp(8px, 1.15vw, 17px);
}
.design10-crew-chorus-member {
  display: block;
  transform: translate3d(var(--design10-crew-from), 0, 0);
  opacity: 0;
  transition:
    transform 900ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 420ms ease;
  transition-delay: calc(var(--design10-crew-index) * 70ms);
}
.design10-crew-chorus.is-visible .design10-crew-chorus-member {
  transform: translate3d(0, 0, 0);
  opacity: 1;
}
/* the bubble waits until they have arrived, then everyone speaks at once */
.design10-crew-chorus .design10-character-callout-letter {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.45em) rotate(2deg);
}
.design10-crew-chorus.is-visible .design10-character-callout-letter {
  animation:
    design10-callout-letter-in 520ms cubic-bezier(0.16, 1, 0.3, 1) forwards,
    design10-callout-letter-talk 3.2s ease-in-out infinite;
  animation-delay:
    calc(620ms + var(--design10-letter-index) * 24ms),
    calc(1.7s + var(--design10-letter-index) * 24ms);
}
@media (prefers-reduced-motion: reduce) {
  .design10-crew-chorus-member { transform: none; opacity: 1; transition: none; }
}

/* ===========================================================================
 * KEYFRAMES — keep at the end of the file.
 *
 * Without these the letter reveal names an animation that does not exist, no
 * animation is created at all, and every letter stays at `opacity: 0` — the
 * bubbles come out empty. They were dropped twice already: once by the
 * selector-based port (an @keyframes block has no selector to match) and once
 * by an edit that replaced a slice of this file between two comments. Anchored
 * here so a mid-file edit cannot take them again.
 * ========================================================================= */
@keyframes design10-callout-letter-in {
  0% { opacity: 0; transform: translateY(0.45em) rotate(2deg) scale(0.92); }
  70% { opacity: 1; transform: translateY(-0.08em) rotate(-1deg) scale(1.03); }
  100% { opacity: 1; transform: translateY(0) rotate(0) scale(1); }
}

@keyframes design10-callout-letter-talk {
  0%, 100% { transform: translateY(0) rotate(0); }
  12% { transform: translateY(-1px) rotate(-1deg); }
  24% { transform: translateY(0) rotate(1deg); }
  36% { transform: translateY(-1px) rotate(0); }
}