/* AI Head Mascot — Adapted from Uiverse.io by Cobp */
.mascot-wrapper {
    position: fixed;
    top: clamp(6px, 1vw, 12px);
    left: clamp(10px, 2vw, 24px);
    width: 200px;
    height: 200px;
    z-index: 55;
    transform: scale(0.27);
    transform-origin: top left;
    pointer-events: auto;
  }
  .container-ai-input {
    --perspective: 1000px;
    --translateY: 45px;
    position: absolute;
    left: 0; right: 0; top: -2.5rem; bottom: -2.5rem;
    transform-style: preserve-3d;
  }
  .container-wrap {
    display: flex; align-items: center; justify-items: center;
    position: absolute; left: 50%; top: 50%;
    transform: translateX(-50%) translateY(-50%);
    z-index: 9; transform-style: preserve-3d;
    cursor: pointer; padding: 4px; transition: all 0.3s ease;
  }
  .container-wrap:hover { padding: 0; }
  .container-wrap:active { transform: translateX(-50%) translateY(-50%) scale(0.95); }
  .container-wrap:after {
    content: ""; position: absolute; left: 50%; top: 50%;
    transform: translateX(-50%) translateY(-55%);
    width: 12rem; height: 11rem;
    background-color: #dedfe0; border-radius: 3.2rem;
    border: 0.5px solid rgba(140, 140, 150, 0.3);
    transition: all 0.3s ease;
  }
  .container-wrap:hover:after {
    transform: translateX(-50%) translateY(-50%); height: 12rem;
  }
  .container-wrap input { opacity: 0; width: 0; height: 0; position: absolute; }
  .card {
    width: 100%; height: 100%; transform-style: preserve-3d;
    will-change: transform; transition: transform 0.15s ease-out;
    border-radius: 3rem; display: flex; align-items: center;
    transform: translateZ(50px); justify-content: center;
  }
  .card:hover {
    box-shadow: 0 10px 40px rgba(0,0,60,0.25), inset 0 0 10px rgba(255,255,255,0.5);
  }
  .background-blur-balls {
    position: absolute; left: 50%; top: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 100%; height: 100%; z-index: -10;
    border-radius: 3rem; transition: all 0.3s ease;
    background-color: rgba(255,255,255,0.8); overflow: hidden;
  }
  .balls {
    position: absolute; left: 50%; top: 50%;
    width: 100%; height: 100%;
    transform: translateX(-50%) translateY(-50%);
  }
  .mball {
    position: absolute; width: 5.5rem; height: 5.5rem;
    left: 50%; top: 50%; background-color: var(--c);
    border-radius: 50%; filter: blur(45px);
    mix-blend-mode: hard-light;
    animation: mball-orbit var(--d) linear infinite;
    transform-origin: center;
    --start-x: var(--x); --start-y: var(--y);
  }
  .mball:nth-child(even) { animation-direction: reverse; }
  @keyframes mball-orbit {
    0% { transform: translate(var(--start-x), var(--start-y)) rotate(0deg) translateX(2.5rem); }
    100% { transform: translate(var(--start-x), var(--start-y)) rotate(360deg) translateX(2.5rem); }
  }
  .content-card {
    width: 12rem; height: 12rem; display: flex;
    border-radius: 3rem; transition: all 0.3s ease; overflow: hidden;
    border: 0.5px solid rgba(140, 140, 150, 0.3);
  }
  .background-blur-card {
    width: 100%; height: 100%; backdrop-filter: blur(80px);
  }
  .eyes {
    position: absolute; left: 50%; bottom: 50%;
    transform: translateX(-50%); display: flex;
    align-items: center; justify-content: center;
    height: 52px; gap: 2rem; transition: opacity 0.25s ease;
  }
  .eyes .eye {
    width: 26px; height: 52px; background-color: #fff;
    border-radius: 16px; transition: height 0.08s ease;
    border: 0.5px solid rgba(140, 140, 150, 0.25);
  }
  .eyes .eye.blink { height: 20px; }
  .eyes.happy { display: none; color: #fff; gap: 0; opacity: 0; transition: opacity 0.25s ease; }
  .eyes.happy svg { width: 60px; stroke: rgba(140, 140, 150, 0.25); stroke-width: 0.3px; }
  .eyes.happy.show { display: flex; opacity: 1; }
  .eyes.normal.hide { opacity: 0; }