/* Living characters, speech bubble, side social buttons, accessibility menu + its modes */

/* ---- living character: still image until the canvas has frames ---- */
.char { position: relative; }
.char img, .char canvas { width: 100%; height: auto; display: block; }
.char canvas { position: absolute; inset: 0; opacity: 0; transition: opacity .5s; }
.char.is-live canvas { opacity: 1; }
.char.is-live img { opacity: 0; }
/* soft edges so video crops never show as hard lines */

.char--about canvas, .char--about img { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 7%, #000 84%, transparent 100%), linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(to bottom, transparent 0, #000 7%, #000 84%, transparent 100%), linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%); mask-composite: intersect; }

/* ---- speech bubble next to the hero head ---- */
.speech {
  position: absolute; z-index: 4; top: 52%; inset-inline-end: 88%;
  display: flex; align-items: center; gap: 8px;
  background: #fff; color: #0b0b0c; font-weight: 800; font-size: .92rem;
  padding: 10px 14px 10px 10px; border-radius: 22px 6px 22px 22px;
  box-shadow: 0 16px 40px -14px rgba(124, 77, 255, .7);
  opacity: 0; transform: scale(.6) translateY(10px); transform-origin: top right;
  animation: bubbleIn .7s var(--ease-spring) 1.9s forwards;
  pointer-events: auto; white-space: nowrap;
}
@keyframes bubbleIn { to { opacity: 1; transform: none; } }
@media (max-width: 900px) {
  .speech { top: auto; bottom: 2%; left: 50%; right: auto; translate: -50% 0; transform-origin: center bottom; font-size: .85rem; width: max-content; max-width: 90vw; }
}
.speech__text--talk { display: none; }
.speech.is-talking .speech__text--talk { display: inline; }
.speech.is-talking .speech__text--idle { display: none; }
.speech__btn {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  background: var(--grad); color: #fff; display: grid; place-items: center;
}
.speech__btn svg { width: 18px; height: 18px; }
.speech.is-talking .speech__btn { animation: pulse 1s ease-in-out infinite; }
@keyframes pulse { 50% { transform: scale(1.12); } }

/* ---- side social buttons ---- */
.social {
  position: fixed; z-index: 45; inset-inline-end: 14px; top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 10px;
}
.social a {
  width: 48px; height: 48px; border-radius: 16px; display: grid; place-items: center; color: #fff;
  /* clay / glossy look to match the 3D icons */
  box-shadow: inset 0 3px 6px rgba(255, 255, 255, .45), inset 0 -4px 8px rgba(0, 0, 0, .25), 0 10px 22px -8px rgba(0, 0, 0, .7);
  transition: transform .35s var(--ease-spring);
}
.social a:hover, .social a:focus-visible { transform: translateX(-4px) scale(1.08) rotate(-6deg); }
.social svg { width: 24px; height: 24px; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .25)); }
.social .s-wa { background: linear-gradient(145deg, #5cf08a, #12a150); }
.social .s-ig { background: radial-gradient(circle at 30% 110%, #ffd95a 0%, #ff7a3d 30%, #ff2d8a 58%, #8b3dff 100%); }
.social .s-ph { background: linear-gradient(145deg, #a685ff, #6a3df5); }
.social .s-ml { background: linear-gradient(145deg, #ffb26b, #ff6a2b); }
@media (max-width: 760px) {
  .social { top: auto; bottom: 14px; transform: none; inset-inline-end: 10px; gap: 8px; }
  .social a { width: 44px; height: 44px; border-radius: 14px; }
  .social .s-ph, .social .s-ml { display: none; }
}

/* ---- accessibility menu ---- */
.a11y { position: fixed; z-index: 60; inset-inline-start: 14px; bottom: 14px; }
.a11y__toggle {
  width: 48px; height: 48px; border-radius: 50%; background: #1d4ed8; color: #fff; display: grid; place-items: center;
  box-shadow: 0 10px 24px -8px rgba(0, 0, 0, .7), inset 0 2px 4px rgba(255, 255, 255, .35);
}
.a11y__toggle svg { width: 28px; height: 28px; }
.a11y__panel {
  position: absolute; bottom: 60px; inset-inline-start: 0; width: min(290px, calc(100vw - 28px));
  background: #fff; color: #111; border-radius: 18px; padding: 14px; box-shadow: 0 20px 50px rgba(0, 0, 0, .5);
}
.a11y__panel h2 { font-size: 1rem; font-weight: 900; margin-bottom: 10px; }
.a11y__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.a11y__panel button {
  border: 1.5px solid #d4d4d8; border-radius: 12px; padding: 10px 8px; font-size: .85rem; font-weight: 700; color: #111; background: #fafafa; text-align: center;
}
.a11y__panel button[aria-pressed="true"] { background: #1d4ed8; color: #fff; border-color: #1d4ed8; }
.a11y__panel a { display: block; margin-top: 10px; font-size: .85rem; font-weight: 700; color: #1d4ed8; text-decoration: underline; }

/* modes */
.a11y-still *, .a11y-still *::before, .a11y-still *::after { animation: none !important; transition: none !important; }
.a11y-still .reveal, .a11y-still .hero__title .word, .a11y-still .hero__side, .a11y-still .speech { opacity: 1 !important; transform: none !important; filter: none !important; }
.a11y-contrast { --bg: #000; --ink: #fff; --ink-dim: #fff; --line: #fff; --paper: #fff; --paper-ink: #000; }
.a11y-contrast body { background: #000; }
.a11y-contrast .fill-title { color: currentColor; -webkit-text-stroke: 0; background: none; }
.a11y-contrast .mega--grad { color: #ffe600; background: none; -webkit-text-fill-color: #ffe600; }
.a11y-contrast p, .a11y-contrast li, .a11y-contrast summary { color: inherit !important; }
.a11y-links a { text-decoration: underline !important; text-underline-offset: 3px; outline: 2px dashed #ffe600; outline-offset: 2px; }
.a11y-readable { --f-display: Arial, "Heebo", sans-serif; }
.a11y-readable body { letter-spacing: .02em; line-height: 1.85; }