/* ==========================================================================
   ETUYA guide in the home hero: the ETUYA mark, small, with a speech bubble beside it.
   It sits in the hero's right column, aligned with the subtitle and the buttons, below the
   headline. guide.js draws the mark (traced from the 2026 logo) with an eye in each letter
   and types five lines into the bubble. The bubble's corners echo the 'a' of the mark:
   round on three corners, sharp on the one that points at the character.
   ========================================================================== */

/* The hero becomes a two-column grid: headline across, subtitle and buttons left, guide right. */
.hero__wrap--guide {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: clamp(32px, 5vw, 96px);
}
.hero__wrap--guide .hero__title { grid-column: 1 / -1; }
.hero__wrap--guide .hero__sub,
.hero__wrap--guide .hero__ctas { grid-column: 1; }

.guide {
  grid-column: 2;
  grid-row: 2 / span 2;
  align-self: end;
  display: grid;
  grid-template-columns: clamp(96px, 8.4vw, 128px) minmax(0, 1fr);
  column-gap: 14px;
  align-items: end;
  width: min(470px, 36vw);
}
.guide__char { position: relative; padding-bottom: 6px; }
.guide__char svg, .guide__char img { display: block; width: 100%; height: auto; overflow: visible; }
.guide__char .guide__mark { width: 100%; }   /* without JavaScript */
.guide__char[data-ready] { cursor: pointer; -webkit-tap-highlight-color: transparent; }

/* The bubble: three round corners and a sharp one toward the character, like the 'a'. */
.guide__bubble,
.guide__script {
  position: relative;
  padding: 14px 18px 15px;
  background: #fff;
  border-radius: 22px 22px 22px 3px;
  box-shadow: 0 1px 0 rgba(14, 23, 38, .04), 0 18px 36px -26px rgba(14, 23, 38, .45);
}
.guide__line {
  position: relative;
  margin: 0;
  font: 400 clamp(1.02rem, 1.12vw, 1.18rem)/1.36 var(--serif);
  letter-spacing: -.005em;
  color: var(--ink);
  text-wrap: pretty;
}
/* The longest line, invisible, keeps the bubble the same size while lines type in. */
.guide__ghost { visibility: hidden; }
.guide__typed { position: absolute; inset: 0; }
.guide__caret {
  display: inline-block;
  width: 2px;
  height: .9em;
  margin-left: 2px;
  vertical-align: -.1em;
  background: var(--cobalt);
  opacity: 0;
}
.guide.is-talk .guide__caret { opacity: 1; animation: guide-caret .9s steps(1) infinite; }
@keyframes guide-caret { 50% { opacity: 0; } }

/* The full script: always in the DOM for screen readers; the bubble itself without JavaScript. */
.guide__script { list-style: none; margin: 0; }
.guide__script li { font: 400 1rem/1.36 var(--serif); color: var(--ink); text-wrap: pretty; }
.guide__script li + li { margin-top: .45em; }
.guide.is-live .guide__script {
  position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; box-shadow: none;
}
.guide__bubble { display: none; }
.guide.is-live .guide__bubble { display: block; cursor: pointer; }

.guide__controls { display: flex; align-items: center; gap: 6px; margin-top: 10px; }
.guide__controls[hidden] { display: none; }
.guide__ctl {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--rule-strong);
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  font-size: 14px;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, transform .16s var(--ease-out);
}
.guide__ctl[hidden] { display: none; }
.guide__ctl:active { transform: scale(.94); }
.guide__ctl:disabled { opacity: .35; cursor: default; }
@media (hover: hover) and (pointer: fine) { .guide__ctl:not(:disabled):hover { border-color: var(--ink); background: rgba(14, 23, 38, .04); } }
.guide__dots { display: flex; gap: 5px; padding-inline: 4px; }
.guide__dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--rule-strong); transition: background-color .25s ease, transform .25s var(--ease-out); }
.guide__dots i.is-on { background: var(--cobalt); transform: scale(1.25); }

/* ---------- The character (SVG from guide.js) ---------- */
.etu__shadow { fill: rgba(14, 23, 38, .09); transform-box: fill-box; transform-origin: center; }
.etu__body { transform-box: view-box; transform-origin: 53px 60px; }
.etu__a { transform-box: view-box; transform-origin: 60px 54px; }
.etu__iris { transform-box: fill-box; transform-origin: center; transition: transform 80ms ease-out; }
.etu.is-blink .etu__iris { transform: scaleY(.08); }
.etu.is-happy .etu__iris { transform: scaleY(.38) translateY(-1px); transition-duration: 160ms; }
html.motion-ok .etu__body { animation: etu-breathe 3.6s ease-in-out infinite; }
html.motion-ok .guide.is-talk .etu__body { animation: etu-talk .36s ease-in-out infinite alternate; }
@keyframes etu-breathe { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-.7px); } }
@keyframes etu-talk { from { transform: translateY(0) rotate(0); } to { transform: translateY(-1.1px) rotate(-.7deg); } }

/* ---------- Narrow screens: the guide follows the buttons, still side by side ---------- */
@media (max-width: 1023px) {
  .hero__wrap--guide { grid-template-columns: minmax(0, 1fr); }
  .guide {
    grid-column: 1;
    grid-row: auto;
    justify-self: start;
    width: min(460px, 100%);
    margin-top: clamp(28px, 5vh, 44px);
    grid-template-columns: 84px minmax(0, 1fr);
    column-gap: 12px;
  }
}