/* ---------------------------------------------------------------------------
 * Dot mascot — nature range idle companion for the C360 shell.
 * Lifecycle: modules/mascot/js/dot_mascot.js (window.DotMascot).
 * Artwork: modules/mascot/js/dot_sprite.js (window.DOT_NATURE_SPRITE).
 * Spec: docs/Dot-Mascots.md
 * ------------------------------------------------------------------------ */
:root {
  --dot-teal: #4CC2B8;
  --dot-teal-light: #6FE0D2;
  --dot-teal-pale: #BFF0E9;
  --dot-teal-dark: #2E8C82;
  --dot-teal-deep: #1B8B7C;
  --dot-petrol: #12505F;
  --dot-petrol-deep: #0C3945;
  --dot-ink: #0D1217;
  --dot-eye: #08343B;
  --dot-spark: #EAFFFB;
  --dot-blush: #BFF3EC;
  --dot-swatch: radial-gradient(120% 100% at 50% 42%, #103038, #0A1B20);
  --dot-surface-light: #EAF7F5;
}

/* Full-viewport, click-through overlay. z-index 900 sits above app chrome
 * but below interactive overlays (dropdowns 1000, modals 1050+, claim wizard 10888+). */
.dot-layer {
  position: fixed;
  inset: 0;
  z-index: 900;
  overflow: hidden;
  pointer-events: none;
}

.dot-layer * {
  pointer-events: none;
}

.dot-layer.dot-preview {
  z-index: 2000;
}

.dot-mascot {
  position: absolute;
  width: 120px;
  height: 120px;
  opacity: 0;
  will-change: transform, opacity;
  transform: translate3d(var(--dot-from-x, 0), var(--dot-from-y, 0), 0);
}

.dot-mascot svg {
  width: 100%;
  height: 100%;
  display: block;
}

.dot-mascot.dot-float-in {
  animation: dotFloatIn 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.dot-mascot.dot-drift-out {
  animation: dotDriftOut 0.8s cubic-bezier(0.55, 0, 0.55, 0.2) forwards;
}

/* Seedling: traverse across the viewport while visible. */
.dot-mascot.dot-traverse {
  animation: dotTraverse 5.2s cubic-bezier(0.33, 0, 0.2, 1) forwards;
}

/* Bloom: float to viewport center. */
.dot-mascot.dot-to-center {
  animation: dotToCenter 1.1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.dot-mascot.dot-flee {
  animation: none !important;
  opacity: 0;
  transition: opacity 0.24s ease-out;
}

.dot-mascot.dot-flee .dot-anim,
.dot-mascot.dot-flee .dot-bloom-halo {
  animation: none !important;
}

.dot-interact {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  will-change: transform;
  transform: translate3d(var(--dot-ix, 0px), var(--dot-iy, 0px), 0)
             rotate(var(--dot-lean, 0deg));
}

/* Nested idle loops (compose with outer position transforms). */
.dot-anim {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  will-change: transform;
}

.dot-anim--bob { animation: bob 4.2s ease-in-out infinite; }
.dot-anim--bob-small { animation: bobSmall 3.4s ease-in-out infinite; }
.dot-anim--sway { animation: sway 5.5s ease-in-out infinite; transform-origin: 50% 30%; }
.dot-anim--sway-stem { animation: sway 4s ease-in-out infinite; transform-origin: 50% 85%; }
.dot-anim--breathe { animation: breathe 3.6s ease-in-out infinite; }
.dot-anim--breathe-aloe { animation: breathe 3.8s ease-in-out infinite; }
.dot-anim--spin { animation: spinSlow 26s linear infinite; }
.dot-anim--spin-aloe { animation: spinSlow 30s linear infinite reverse; }
.dot-anim--spin-bloom { animation: spinSlow 34s linear infinite; }
.dot-anim--wobble { animation: wobble 3s ease-in-out infinite; transform-origin: 50% 30%; }

.dot-bloom-halo {
  position: absolute;
  inset: -18%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(76, 194, 184, 0.45) 0%, rgba(76, 194, 184, 0) 70%);
  animation: glowPulse 4s ease-in-out infinite;
  z-index: 0;
}

.dot-mascot .dot-anim,
.dot-mascot svg {
  position: relative;
  z-index: 1;
}

/* Drift particles (seedling / bloom). */
.dot-particle {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #8FE6DA;
  box-shadow: 0 0 8px #4CC2B8;
  opacity: 0;
  animation: drift 6s linear infinite;
  --dx: 40px;
}

.dot-particle--petal {
  width: 5px;
  height: 9px;
  border-radius: 50% 50% 40% 40%;
  background: #4CC2B8;
  box-shadow: none;
  animation-duration: 4.5s;
}

/* Face overlays for assistant expression states. */
.dot-face {
  opacity: 0;
  transition: opacity 0.15s linear;
  pointer-events: none;
}
.dot-face.dot-face-on {
  opacity: 1;
}

.dot-think-1 { animation: dotThink 1.2s ease-in-out infinite; }
.dot-think-2 { animation: dotThink 1.2s ease-in-out 0.2s infinite; }
.dot-think-3 { animation: dotThink 1.2s ease-in-out 0.4s infinite; }

@keyframes dotFloatIn {
  from { opacity: 0; transform: translate3d(var(--dot-from-x, 0), var(--dot-from-y, 0), 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes dotDriftOut {
  from { opacity: 1; transform: translate3d(0, 0, 0); }
  to   { opacity: 0; transform: translate3d(var(--dot-from-x, 0), var(--dot-from-y, 0), 0); }
}

@keyframes dotTraverse {
  0%   { opacity: 0; transform: translate3d(var(--dot-from-x, -140px), var(--dot-from-y, 40px), 0); }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { opacity: 0; transform: translate3d(var(--dot-to-x, 140px), var(--dot-to-y, -80px), 0); }
}

@keyframes dotToCenter {
  from { opacity: 0; transform: translate3d(var(--dot-from-x, 0), var(--dot-from-y, 0), 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-9px); }
}

@keyframes bobSmall {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

@keyframes sway {
  0%, 100% { transform: rotate(-3.2deg); }
  50% { transform: rotate(3.2deg); }
}

@keyframes breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.055); }
}

@keyframes spinSlow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes wobble {
  0%, 100% { transform: scale(1, 1); }
  30% { transform: scale(1.06, 0.94); }
  60% { transform: scale(0.95, 1.05); }
}

@keyframes glowPulse {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50% { opacity: 0.9; transform: scale(1.12); }
}

@keyframes drift {
  0% { transform: translate(0, 0) scale(0.9); opacity: 0; }
  15% { opacity: 0.9; }
  100% { transform: translate(var(--dx, 40px), -120px) scale(1.05); opacity: 0; }
}

@keyframes dotThink {
  0%, 100% { opacity: 0.35; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-2px); }
}

/* Chat / launcher avatar — static SVG, no float layer. */
.dot-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 0;
}
.dot-avatar svg {
  width: 100%;
  height: 100%;
  display: block;
}
.dot-avatar.is-thinking .dot-think-1,
.dot-avatar.is-thinking .dot-think-2,
.dot-avatar.is-thinking .dot-think-3 {
  animation: dotThink 1s ease-in-out infinite;
}
.dot-avatar.is-thinking .dot-think-2 { animation-delay: 0.15s; }
.dot-avatar.is-thinking .dot-think-3 { animation-delay: 0.3s; }

/* Settings picker cards */
.dot-picker-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 1rem;
}
.dot-picker-card {
  position: relative;
  border: 1px solid #E4E8E8;
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  background: #fff;
  padding: 0;
  text-align: left;
  width: 100%;
}
.dot-picker-card.is-selected {
  border: 2.5px solid #4CC2B8;
}
.dot-picker-stage {
  background: var(--dot-swatch);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 14px;
  min-height: 110px;
}
.dot-picker-meta {
  padding: 10px 12px;
}
.dot-picker-name {
  font-weight: 700;
  color: #0D1217;
  font-size: 0.9rem;
}
.dot-picker-tag {
  font-size: 12px;
  color: #8A9092;
}
.dot-picker-check {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #4CC2B8;
  color: #0D1217;
  display: none;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 12px;
}
.dot-picker-card.is-selected .dot-picker-check {
  display: flex;
}

@media (max-width: 640px) {
  .dot-picker-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .dot-layer { display: none !important; }
  .dot-anim { animation: none !important; }
  .dot-bloom-halo { animation: none !important; }
  .dot-particle { animation: none !important; display: none !important; }
  .dot-interact {
    transform: none !important;
  }
  .dot-avatar.is-thinking .dot-think-1,
  .dot-avatar.is-thinking .dot-think-2,
  .dot-avatar.is-thinking .dot-think-3 {
    animation: none;
    opacity: 0.7;
  }
}