@layer properties {
@property --elh {
/* eye left height   */
  syntax: '<number>';
  inherits: true;
  initial-value: 1;
}

@property --erx {
/* eye right x pos   */
  syntax: '<percentage>';
  inherits: true;
  initial-value: 0%;
}
@property --fx {
/* face x pos   */
  syntax: '<percentage>';
  inherits: true;
  initial-value: 0%;
}
@property --ealw {
/* ear left w    */
  syntax: '<number>';
  inherits: true;
  initial-value: 1;
}@property --earw {
/* ear right w    */
  syntax: '<number>';
  inherits: true;
  initial-value: 1;
}


@property --erh {
/* eye right height   */
  syntax: '<number>';
  inherits: true;
  initial-value: 1;
}
@property --mh {
/* mouth height   */
  syntax: '<number>';
  inherits: true;
  initial-value: 1;
}
@property --mw {
/* mouth width   */
  syntax: '<number>';
  inherits: true;
  initial-value: 1;
}
  }

:root {
  --surface: #111;
    --c: white;
  --c2: #9ae3dc;
  --c3: magenta;
}

.ai-bot {
  scale: 4.2;
  width: 34px;
  aspect-ratio: 1;
  position: relative;
  display: grid;
  place-items: center;
  -webkit-animation: blink 2.4s ease infinite, move-head 4.2s linear(0 0%, 0 2.27%, 0.02 4.53%, 0.04 6.8%, 0.06 9.07%, 0.1 11.33%, 0.14 13.6%, 0.25 18.15%, 0.39 22.7%, 0.56 27.25%, 0.77 31.8%, 1 36.35%, 0.89 40.9%, 0.85 43.18%, 0.81 45.45%, 0.79 47.72%, 0.77 50%, 0.75 52.27%, 0.75 54.55%, 0.75 56.82%, 0.77 59.1%, 0.79 61.38%, 0.81 63.65%, 0.85 65.93%, 0.89 68.2%, 1 72.7%, 0.97 74.98%, 0.95 77.25%, 0.94 79.53%, 0.94 81.8%, 0.94 84.08%, 0.95 86.35%, 0.97 88.63%, 1 90.9%, 0.99 93.18%, 0.98 95.45%, 0.99 97.73%, 1 100%)  infinite, mouth 1.2s ease-in infinite;
          animation: blink 2.4s ease infinite, move-head 4.2s linear(0 0%, 0 2.27%, 0.02 4.53%, 0.04 6.8%, 0.06 9.07%, 0.1 11.33%, 0.14 13.6%, 0.25 18.15%, 0.39 22.7%, 0.56 27.25%, 0.77 31.8%, 1 36.35%, 0.89 40.9%, 0.85 43.18%, 0.81 45.45%, 0.79 47.72%, 0.77 50%, 0.75 52.27%, 0.75 54.55%, 0.75 56.82%, 0.77 59.1%, 0.79 61.38%, 0.81 63.65%, 0.85 65.93%, 0.89 68.2%, 1 72.7%, 0.97 74.98%, 0.95 77.25%, 0.94 79.53%, 0.94 81.8%, 0.94 84.08%, 0.95 86.35%, 0.97 88.63%, 1 90.9%, 0.99 93.18%, 0.98 95.45%, 0.99 97.73%, 1 100%)  infinite, mouth 1.2s ease-in infinite;
  
  .head {
    background: linear-gradient(var(--c) 80%,color-mix(in srgb, var(--c), black 30%), var(--c) );
    border-radius: .375rem;
    position: absolute;
    width: 28px;
    height: 20px;
    
    
    &:before, &:after {
      content: '';
      position: absolute;
      left: -4px;
      top: 6px;
      width: 2px;
      height: 8px;
      background: var(--c,1);
      border-radius: 2px 0 0 2px;
      scale: var(--ealw, 1) 1;
    }
    &:after {
      right: -4px;
      left: unset;
       border-radius: 0 2px 2px 0;
      scale: var(--earw, 1) 1;
    }
    
    .face {
      display: flex;
      flex-direction: column;
      align-items: center;
      position: absolute;
      inset: 0 3px;
      background: var(--surface);
      translate: var(--fx) 0;
      border-radius: 4px;
      padding: 4px 4px 2px 4px;
      gap: 3px;
      
      &:before {
        content: '';
        background: var(--c);
        position: absolute;
        height: 1px;
        width: 10px;
        top: -2px;
        border-radius: 2px 2px 0 0;
-webkit-mask:        radial-gradient(circle at 50% 100%, transparent 45%, black 45%);
        mask:        radial-gradient(circle at 50% 100%, transparent 45%, black 45%)
      }
     
      
      .eyes {
        display: flex;
        height: 8px;
        gap: 6px;
        &:before, &:after {
          content: '';
          width: 5px;
          height:  8px;
          scale: 1 var(--elh);
          filter: drop-shadow( 0 0 2px var(--c2));
          background: repeating-linear-gradient(to bottom, var(--c), var(--c) .25px, transparent .25px, transparent .6px), linear-gradient(to bottom, var(--c3), transparent 60%), var(--c2);
          border-radius: 1px;
          translate: var(--erx) 0;
        }
        
        &:after {
           scale: 1 var(--erh);
                translate: var(--erx) 0;
        }
      }
      
      .mouth  {
          width: 10px;
        height: 2px;
        background: var(--c2);
        border-radius: 0 0 1px 1px;
        filter: drop-shadow( 0 0 2px var(--c2));
        scale: var(--mw, 1) var(--mh, 1);
      }
    }
  }
}

@layer animations {
  
@-webkit-keyframes blink {
  from,10%, to { 
    --elh: 1;
    --erh: 1;
  }
  
  2% {
    --elh: .2;
  }
  
  8% {
    --erh: .1;
  }
}
  
@keyframes blink {
  from,10%, to { 
    --elh: 1;
    --erh: 1;
  }
  
  2% {
    --elh: .2;
  }
  
  8% {
    --erh: .1;
  }
}

@-webkit-keyframes mouth {
  from, 30%,70%, to { 
  --mh: 1;
    --mw: 1;
  }
  
  20% {
    --mh: .5;
  }
  
  60%{ 
      --mw: .7;
  }
}

@keyframes mouth {
  from, 30%,70%, to { 
  --mh: 1;
    --mw: 1;
  }
  
  20% {
    --mh: .5;
  }
  
  60%{ 
      --mw: .7;
  }
}

@-webkit-keyframes move-head {
  from, 20%, 40% to{ 
    --erx: 0%
      --fx: 0%;
    --ealw: 1;
        --earw: 1;
  }
  
  10% {
    --erx: 20%;
          --fx: 10%;
    --ealw: 1.5;
        --earw: .5;
  }
  
  30% {
    --erx: -20%;
          --fx: -10%;
  --ealw: .5;
        --earw: 1.5;
  }
  
}

@keyframes move-head {
  from, 20%, 40% to{ 
    --erx: 0%
      --fx: 0%;
    --ealw: 1;
        --earw: 1;
  }
  
  10% {
    --erx: 20%;
          --fx: 10%;
    --ealw: 1.5;
        --earw: .5;
  }
  
  30% {
    --erx: -20%;
          --fx: -10%;
  --ealw: .5;
        --earw: 1.5;
  }
  
}
}


* {
  box-sizing: border-box;
}

body {
  display: grid;
  place-items: center;
  height: 100dvh;
  background: var(--surface);
}