/* Dimensional crew rollout.
   Retain the legacy SVG DOM for existing animation timing, moods and click targets.
   Artwork is transparent and inherits the page surface rather than appearing in a video frame. */
.hero-visual .mascot > :not(.crew3d-art):not(.crew3d-flash):not(.crew3d-print) {
  opacity: 0 !important;
  pointer-events: none;
}
.hero-visual .mascot .crew3d-art { opacity: 1; }
.hero-visual .mascot .crew3d-flash,
.hero-visual .mascot .crew3d-print { opacity: 0; pointer-events: none; }
.hero-visual .mascot { overflow: visible; }
.hero-visual .mascot .crew3d-art { transform-box: fill-box; transform-origin: 50% 80%; }
.hero-visual .mascot .crew3d-print { transform-box: view-box; transform-origin: 75% 78%; }
@media (prefers-reduced-motion: no-preference) {
  .hero-visual .mascot.is-posing .crew3d-art {
    animation: crew3d-photo-pose 11s ease-in-out both;
  }
  .hero-visual .mascot.is-posing .crew3d-flash {
    animation: crew3d-camera-flash 11s linear both;
  }
  .hero-visual .mascot.is-posing .crew3d-print {
    animation: crew3d-photo-print 11s ease-in-out both;
  }
  @keyframes crew3d-photo-pose {
    0%, 13%, 100% { transform: none; }
    19%, 34% { transform: translateY(-5px) rotate(-2deg); }
    40%, 58% { transform: translateY(1px) rotate(2deg); }
    63%, 77% { transform: translateY(-2px) scale(1.035); }
    83%, 96% { transform: none; }
  }
  @keyframes crew3d-camera-flash {
    0%, 69%, 73%, 100% { opacity: 0; }
    70%, 70.6% { opacity: .93; }
    71.2%, 71.8% { opacity: .08; }
  }
  @keyframes crew3d-photo-print {
    0%, 71% { opacity: 0; transform: translate(0, 16px) rotate(10deg) scale(.55); }
    80%, 95% { opacity: 1; transform: translate(-12px, -7px) rotate(-7deg) scale(1); }
    100% { opacity: 0; transform: translate(-12px, -12px) rotate(-7deg) scale(.95); }
  }
}
.a-chat {
  background: var(--surface);
  border-color: var(--line);
}
.a-chat .panel-h {
  background: linear-gradient(120deg, var(--teal-soft), var(--surface) 76%);
  border-bottom: 1px solid var(--line);
}
.a-chat .dino-wrap {
  background: radial-gradient(ellipse at 50% 100%, var(--teal-soft), var(--surface) 72%);
}
.a-chat .dino-scene > :not(.crew3d-desk):not(.crew3d-scene):not(.crew3d-miso-hit):not(.crew3d-toula-hit) {
  opacity: 0 !important;
  pointer-events: none;
}
.a-chat .dino-scene .crew3d-scene { pointer-events: none; transform-box: fill-box; transform-origin: 50% 65%; }
.a-chat .dino-scene .crew3d-miso-hit,
.a-chat .dino-scene .crew3d-toula-hit { fill: transparent; cursor: pointer; }
.a-chat .dino-pet { max-width: 354px; }
.a-chat .dino-pet:has(.dino-scene[data-mood="happy"]) .crew3d-scene,
.a-chat .dino-pet:has(.dino-scene[data-mood="pat"]) .crew3d-scene { transform: translateY(-2px); }
.a-chat .dino-pet:has(.dino-scene[data-mood="thinking"]) .crew3d-scene { transform: rotate(-2deg); }
.a-chat .dino-pet:has(.dino-scene[data-mood="talking"]) .crew3d-scene { transform: translateY(1px); }
.a-chat .dino-pet:has(.dino-scene.miso) .crew3d-scene { transform: rotate(-2deg); }
.a-chat .dino-pet:has(.dino-scene.toula) .crew3d-scene { transform: translateY(-3px); }
.a-chat .crew3d-scene { transition: transform .26s ease-out; }
.a-chat .composer {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 17px;
  padding: 10px;
  box-shadow: 0 8px 24px rgba(20, 58, 53, .06);
}
.a-chat .composer textarea { border-radius: 12px; }
.a-chat .composer textarea:focus-visible { outline-offset: 1px; }
.botrow .crew-avatar-photo, .crew-faces .crew-avatar-photo {
  width: 32px;
  height: 32px;
  object-fit: cover;
  border-radius: 50%;
  background: var(--teal-soft);
  display: block;
  flex: none;
  box-shadow: 0 0 0 1px var(--line);
}
.botrow:has(.crew-avatar-photo) > .dino-ava,
.botrow:has(.crew-avatar-photo) > .crew-ava { display: none; }
.crew-faces:has(.crew-avatar-photo) > svg { display: none; }
.crew-faces .crew-avatar-photo + .crew-avatar-photo { margin-left: -9px; box-shadow: 0 0 0 2px var(--ink); }
@media (max-width: 640px) {
  /* The mobile crew keeps its existing overlay and keyboard behavior. */
  .a-chat .composer { box-shadow: none; }
  .crew-faces .crew-avatar-photo { box-shadow: 0 0 0 2px var(--ink); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-visual .mascot .crew3d-art,
  .a-chat .crew3d-scene,
  .crew-faces .crew-avatar-photo { animation: none !important; transition: none !important; }
}
@media print { .hero-visual .mascot .crew3d-art { display: none; } }