/* ==========================================================
   WHALE OS Motion System v1.0
   ========================================================== */

:root{

  /* Duration */
  --motion-instant:75ms;
  --motion-fast:150ms;
  --motion-normal:250ms;
  --motion-slow:400ms;
  --motion-slower:600ms;

  /* Easings */
  --ease-standard:cubic-bezier(.2,0,0,1);
  --ease-emphasized:cubic-bezier(.16,1,.3,1);
  --ease-decelerate:cubic-bezier(0,0,.2,1);
  --ease-accelerate:cubic-bezier(.4,0,1,1);

  /* Standard transitions */
  --transition-color:
      color var(--motion-fast) var(--ease-standard),
      background-color var(--motion-fast) var(--ease-standard),
      border-color var(--motion-fast) var(--ease-standard);

  --transition-transform:
      transform var(--motion-normal) var(--ease-emphasized);

  --transition-shadow:
      box-shadow var(--motion-normal) var(--ease-emphasized);

  --transition-all:
      all var(--motion-normal) var(--ease-emphasized);
}

/* Motion Utilities */

.transition{
    transition:var(--transition-all);
}

.transition-color{
    transition:var(--transition-color);
}

.transition-transform{
    transition:var(--transition-transform);
}

.transition-shadow{
    transition:var(--transition-shadow);
}

/* Hover Effects */

.hover-lift{
    transition:var(--transition-all);
}

.hover-lift:hover{
    transform:translateY(-4px);
}

.hover-scale{
    transition:var(--transition-transform);
}

.hover-scale:hover{
    transform:scale(1.02);
}

.hover-press:active{
    transform:scale(.98);
}

/* Fade */

@keyframes whale-fade-in{
    from{
        opacity:0;
    }
    to{
        opacity:1;
    }
}

@keyframes whale-fade-up{
    from{
        opacity:0;
        transform:translateY(12px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

@keyframes whale-fade-down{
    from{
        opacity:0;
        transform:translateY(-12px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

@keyframes whale-scale-in{
    from{
        opacity:0;
        transform:scale(.96);
    }
    to{
        opacity:1;
        transform:scale(1);
    }
}

/* Classes */

.animate-fade{
    animation:whale-fade-in var(--motion-normal) var(--ease-standard);
}

.animate-up{
    animation:whale-fade-up var(--motion-normal) var(--ease-emphasized);
}

.animate-down{
    animation:whale-fade-down var(--motion-normal) var(--ease-emphasized);
}

.animate-scale{
    animation:whale-scale-in var(--motion-normal) var(--ease-emphasized);
}