/* mascot.css: Inko the ink spirit and the manga style speech bubble in the home hero */

/* hero switches to three columns when Inko is in it: text, Inko, cover */
.hero.has_mascot { grid-template-columns: minmax(0, 1.15fr) minmax(220px, 0.62fr) minmax(0, 0.6fr); gap: var(--space_6); }

/* Inko's column stacks the bubble over the figure */
.hero_mascot { display: flex; flex-direction: column; align-items: center; gap: var(--space_2); align-self: center; min-width: 0; position: relative; z-index: var(--layer_content); }

/* ===== speech bubble ===== */

/* paper colored balloon like a manga panel speech bubble */
.mascot_bubble { position: relative; width: min(100%, 268px); padding: var(--space_4); background: var(--color_paper); color: var(--color_ink); border-radius: var(--radius_xl); box-shadow: var(--shadow_md); transform-origin: 50% 100%; }

/* tail under the bubble pointing down at Inko */
.mascot_bubble::after { content: ""; position: absolute; left: 50%; bottom: -11px; width: 22px; height: 22px; background: var(--color_paper); border-radius: 0 0 var(--radius_xs) 0; transform: translateX(-50%) rotate(45deg); }

/* hidden bubble disappears completely */
.mascot_bubble[hidden] { display: none; }

/* pop in with a small overshoot, like a balloon appearing in a panel */
.mascot_bubble.is_popping { animation: mascot_bubble_pop 320ms cubic-bezier(0.34, 1.4, 0.64, 1) both; }

/* the pop keyframes: start a bit small and low, settle in place */
@keyframes mascot_bubble_pop { from { opacity: 0; transform: translateY(8px) scale(0.92); } to { opacity: 1; transform: translateY(0) scale(1); } }

/* small tally line when several chapters wait, ink on paper at AA contrast */
.mascot_tally { margin: 0 0 var(--space_1); font-size: var(--text_sm); font-weight: 700; color: var(--color_panel_high); }

/* text keeps clear of the close button in the top corner at every width */
.mascot_tally, .mascot_line { padding-right: var(--space_6); }

/* hidden tally collapses */
.mascot_tally[hidden] { display: none; }

/* the main line Inko says */
.mascot_line { margin: 0; font-size: var(--text_md); font-weight: 700; line-height: var(--leading_snug); text-wrap: pretty; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }

/* buttons under the line */
.mascot_controls { display: flex; align-items: center; justify-content: space-between; gap: var(--space_2); margin-top: var(--space_3); flex-wrap: wrap; }

/* hidden button row collapses */
.mascot_controls[hidden] { display: none; }

/* the read or sign in button keeps the rose pill but sits on paper */
.mascot_action { box-shadow: none; }

/* page arrows and count for several releases */
.mascot_pager { display: inline-flex; align-items: center; gap: var(--space_1); font-size: var(--text_sm); color: var(--color_panel_high); font-variant-numeric: tabular-nums; }

/* round arrow buttons in ink on paper */
.mascot_page_btn { width: 32px; height: 32px; border-radius: 50%; border: 0; background: var(--tint_ink); color: var(--color_ink); font-size: var(--text_lg); line-height: 1; cursor: pointer; position: relative; transition: background-color var(--duration_fast) var(--ease_hover); }

/* invisible padding so the arrow is easy to tap */
.mascot_page_btn::before { content: ""; position: absolute; inset: -6px; }

/* hover darkens the arrow background on mouse devices */
@media (hover: hover) and (pointer: fine) { .mascot_page_btn:not(:disabled):hover { background: var(--tint_ink_strong); } }

/* turned off arrow fades */
.mascot_page_btn:disabled { opacity: 0.35; cursor: default; }

/* close button tucked in the bubble corner */
.mascot_close { position: absolute; top: 6px; right: 6px; width: 28px; height: 28px; border: 0; border-radius: 50%; background: transparent; color: var(--color_panel_high); font-size: var(--text_lg); line-height: 1; cursor: pointer; transition: background-color var(--duration_fast) var(--ease_hover); }

/* bigger invisible hit area for the close button */
.mascot_close::before { content: ""; position: absolute; inset: -8px; }

/* hover tint on mouse devices */
@media (hover: hover) and (pointer: fine) { .mascot_close:hover { background: var(--tint_ink); } }

/* focus rings inside the paper bubble use ink so they stay visible on the light background */
.mascot_bubble button:focus-visible { outline: 3px solid var(--color_ink); outline-offset: 2px; }

/* ===== Inko ===== */

/* Inko is a button so tapping brings the bubble back */
.mascot_figure { width: 148px; padding: 0; border: 0; background: none; cursor: pointer; border-radius: var(--radius_lg); transition: transform var(--duration_fast) var(--ease_out); }

/* tiny press feedback */
.mascot_figure:active { transform: scale(0.97); }

/* the drawing fills the button */
.inko, .inko svg { display: block; width: 100%; height: auto; }

/* hop when a chapter drops: up, a small squash on landing, then rest */
.mascot_figure.is_hopping .inko { animation: mascot_hop 560ms var(--ease_out) both; transform-origin: 50% 100%; }

/* the hop keyframes */
@keyframes mascot_hop { 0% { transform: translateY(0) scale(1, 1); } 35% { transform: translateY(-18px) scale(0.96, 1.05); } 70% { transform: translateY(0) scale(1.06, 0.94); } 100% { transform: translateY(0) scale(1, 1); } }

/* expression parts start hidden, each look shows its own */
.inko .inko_arms_up, .inko .inko_eyes_excited, .inko .inko_eyes_sleepy, .inko .inko_eyes_blink, .inko .inko_mouth_excited, .inko .inko_mouth_sleepy, .inko .inko_zzz { display: none; }

/* idle look: arms down, open eyes, small smile */
.inko.is_idle .inko_arms_down, .inko.is_idle .inko_eyes_open, .inko.is_idle .inko_mouth_idle { display: inline; }

/* excited look: arms up, sparkly eyes, open mouth */
.inko.is_excited .inko_arms_down, .inko.is_excited .inko_eyes_open, .inko.is_excited .inko_mouth_idle { display: none; }

/* show the excited parts */
.inko.is_excited .inko_arms_up, .inko.is_excited .inko_eyes_excited, .inko.is_excited .inko_mouth_excited { display: inline; }

/* sleepy look: closed eyes, tiny mouth, floating z letters */
.inko.is_sleepy .inko_eyes_open, .inko.is_sleepy .inko_mouth_idle { display: none; }

/* show the sleepy parts */
.inko.is_sleepy .inko_eyes_sleepy, .inko.is_sleepy .inko_mouth_sleepy, .inko.is_sleepy .inko_zzz { display: inline; }

/* a blink swaps open eyes for closed ones for a moment, only in the idle look */
.inko.is_idle.is_blinking .inko_eyes_open { display: none; }

/* show the closed eye lines during a blink */
.inko.is_idle.is_blinking .inko_eyes_blink { display: inline; }

/* headband tails flutter gently while excited */
.inko.is_excited .inko_tail_one, .inko.is_excited .inko_tail_two { animation: mascot_flutter 900ms var(--ease_in_out) 2 alternate; transform-box: fill-box; transform-origin: 0% 50%; }

/* the flutter keyframes */
@keyframes mascot_flutter { from { transform: rotate(0deg); } to { transform: rotate(-12deg); } }

/* ===== smaller screens ===== */

/* narrower desktops: smaller Inko and bubble so the text keeps its room */
@media (max-width: 1180px) {
  /* tighter middle column */
  .hero.has_mascot { grid-template-columns: minmax(0, 1.1fr) minmax(190px, 0.55fr) minmax(0, 0.55fr); gap: var(--space_5); }
  /* smaller Inko */
  .mascot_figure { width: 116px; }
  /* smaller bubble */
  .mascot_bubble { width: min(100%, 230px); }
}

/* tablets and phones: the hero stacks, Inko sits under the buttons with the bubble to the right */
@media (max-width: 900px) {
  /* one column again */
  .hero.has_mascot { grid-template-columns: 1fr; }
  /* row layout, Inko first on the left */
  .hero_mascot { flex-direction: row-reverse; justify-content: flex-end; align-items: flex-end; align-self: stretch; gap: var(--space_4); }
  /* small Inko */
  .mascot_figure { width: 84px; flex-shrink: 0; }
  /* bubble takes the rest of the row */
  .mascot_bubble { width: auto; flex: 1; max-width: 360px; transform-origin: 0% 100%; margin-bottom: var(--space_3); }
  /* tail points left at Inko */
  .mascot_bubble::after { left: -9px; bottom: 18px; transform: rotate(135deg); }
  /* bigger tap targets on touch screens */
  .mascot_page_btn { width: 36px; height: 36px; }
}

/* touch screens get full size targets for the close button */
@media (pointer: coarse) {
  /* larger close button */
  .mascot_close { width: 36px; height: 36px; }
}

/* reduced motion: no pop, hop, flutter or press scale */
@media (prefers-reduced-motion: reduce) {
  /* turn off every mascot animation and transition */
  .mascot_bubble.is_popping, .mascot_figure.is_hopping .inko, .inko .inko_tail_one, .inko .inko_tail_two { animation: none; }
  /* no press scale */
  .mascot_figure, .mascot_figure:active { transition: none; transform: none; }
}