/* ==========================================================================
   ANIMATIONS.CSS
   Karleigh Jackson | Executive Editorial Portfolio
   Version: 2.0
   ========================================================================== */


/* ==========================================================================
   TRANSITION DEFAULTS
   ========================================================================== */

   a,
   button,
   input,
   textarea,
   select,
   .card,
   .portfolio-card,
   .thought-card,
   .timeline-item,
   .btn,
   .social-link,
   .nav-link {
   
       transition:
           color var(--transition),
           background-color var(--transition),
           border-color var(--transition),
           opacity var(--transition),
           transform var(--transition),
           box-shadow var(--transition);
   
   }
   
   
   /* ==========================================================================
      FADE UP
      ========================================================================== */
   
   .fade-up {
   
       opacity: 0;
   
       transform: translateY(40px);
   
       transition:
           opacity .8s var(--ease),
           transform .8s var(--ease);
   
   }
   
   .fade-up.is-visible {
   
       opacity: 1;
   
       transform: translateY(0);
   
   }
   
   
   /* ==========================================================================
      FADE IN
      ========================================================================== */
   
   .fade {
   
       opacity: 0;
   
       transition:
           opacity .8s var(--ease);
   
   }
   
   .fade.is-visible {
   
       opacity: 1;
   
   }
   
   
   /* ==========================================================================
      SCALE
      ========================================================================== */
   
   .scale-in {
   
       opacity: 0;
   
       transform: scale(.96);
   
       transition:
   
           opacity .8s var(--ease),
   
           transform .8s var(--ease);
   
   }
   
   .scale-in.is-visible {
   
       opacity: 1;
   
       transform: scale(1);
   
   }
   
   
   /* ==========================================================================
      STAGGER
      ========================================================================== */
   
   .stagger > * {
   
       opacity: 0;
   
       transform: translateY(30px);
   
   }
   
   .stagger.is-visible > * {
   
       opacity: 1;
   
       transform: translateY(0);
   
   }
   
   .stagger.is-visible > *:nth-child(1){
   
       transition:.45s var(--ease);
   
   }
   
   .stagger.is-visible > *:nth-child(2){
   
       transition:.55s var(--ease);
   
   }
   
   .stagger.is-visible > *:nth-child(3){
   
       transition:.65s var(--ease);
   
   }
   
   .stagger.is-visible > *:nth-child(4){
   
       transition:.75s var(--ease);
   
   }
   
   .stagger.is-visible > *:nth-child(5){
   
       transition:.85s var(--ease);
   
   }
   
   .stagger.is-visible > *:nth-child(6){
   
       transition:.95s var(--ease);
   
   }
   
   
   /* ==========================================================================
      HERO INTRO
      ========================================================================== */
   
   .hero-signature{
   
       animation:
   
           heroFade 1.2s var(--ease)
   
           forwards;
   
   }
   
   .hero-kicker{
   
       opacity:0;
   
       animation:
   
           heroFade .9s .2s var(--ease)
   
           forwards;
   
   }
   
   .hero-title{
   
       opacity:0;
   
       animation:
   
           heroFade 1s .35s var(--ease)
   
           forwards;
   
   }
   
   .hero-description{
   
       opacity:0;
   
       animation:
   
           heroFade .9s .55s var(--ease)
   
           forwards;
   
   }
   
   .hero-actions{
   
       opacity:0;
   
       animation:
   
           heroFade .8s .8s var(--ease)
   
           forwards;
   
   }
   
   .hero-dashboard{
   
       opacity:0;
   
       transform:translateY(24px);
   
       animation:
   
           dashboardReveal
   
           1.2s
   
           .7s
   
           var(--ease)
   
           forwards;
   
   }
   
   
   /* ==========================================================================
      HERO KEYFRAMES
      ========================================================================== */
   
   @keyframes heroFade{
   
       from{
   
           opacity:0;
   
           transform:translateY(24px);
   
       }
   
       to{
   
           opacity:1;
   
           transform:translateY(0);
   
       }
   
   }
   
   @keyframes dashboardReveal{
   
       from{
   
           opacity:0;
   
           transform:
   
               translateY(40px)
   
               scale(.98);
   
       }
   
       to{
   
           opacity:1;
   
           transform:
   
               translateY(0)
   
               scale(1);
   
       }
   
   }
   
   
   /* ==========================================================================
      BUTTONS
      ========================================================================== */
   
   .btn{
   
       position:relative;
   
       overflow:hidden;
   
   }
   
   .btn::before{
   
       content:"";
   
       position:absolute;
   
       inset:0;
   
       background:rgba(255,255,255,.12);
   
       transform:translateX(-100%);
   
       transition:
   
           transform
   
           .55s
   
           var(--ease);
   
   }
   
   .btn:hover::before{
   
       transform:translateX(0);
   
   }
   
   .btn:hover{
   
       transform:translateY(-2px);
   
   }
   
   
   /* ==========================================================================
      PORTFOLIO
      ========================================================================== */
   
   .portfolio-card{
   
       transform-origin:center;
   
   }
   
   .portfolio-card:hover{
   
       transform:
   
           translateY(-8px)
   
           scale(1.01);
   
   }
   
   .portfolio-card:hover img{
   
       transform:scale(1.05);
   
   }
   
   .portfolio-card img{
   
       transition:
   
           transform
   
           .8s
   
           var(--ease);
   
   }
   
   
   /* ==========================================================================
      THOUGHT CARD
      ========================================================================== */
   
   .thought-card{
   
       transform-origin:center;
   
   }
   
   .thought-card:hover{
   
       transform:
   
           translateY(-6px);
   
   }
   
   .thought-card::before{
   
       transition:
   
           width
   
           var(--transition);
   
   }
   
   .thought-card:hover::before{
   
       width:12px;
   
   }
   
   
   /* ==========================================================================
      TIMELINE
      ========================================================================== */
   
   .timeline-item{
   
       transition:
   
           transform
   
           var(--transition),
   
           opacity
   
           var(--transition);
   
   }
   
   .timeline-item:hover{
   
       transform:
   
           translateX(6px);
   
   }
   
   
   /* ==========================================================================
      SOCIAL
      ========================================================================== */
   
   .social-link:hover{
   
       transform:
   
           translateY(-4px)
   
           rotate(-4deg);
   
   }
   
   
   /* ==========================================================================
      NAVIGATION
      ========================================================================== */
   
   .nav-link{
   
       position:relative;
   
   }
   
   .nav-link::after{
   
       transition:
   
           width
   
           .35s
   
           var(--ease);
   
   }
   
   
   /* ==========================================================================
      SCROLL INDICATOR
      ========================================================================== */
   
   .scroll-indicator::after{
   
       animation:
   
           scrollPulse
   
           2.2s
   
           infinite;
   
   }
   
   @keyframes scrollPulse{
   
       0%{
   
           opacity:.25;
   
           transform:scaleY(.6);
   
       }
   
       50%{
   
           opacity:1;
   
           transform:scaleY(1);
   
       }
   
       100%{
   
           opacity:.25;
   
           transform:scaleY(.6);
   
       }
   
   }
   
   
   /* ==========================================================================
      IMAGE PARALLAX
      ========================================================================== */
   
   .parallax{
   
       will-change:transform;
   
   }
   
   
   /* ==========================================================================
      GLOBAL HOVER
      ========================================================================== */
   
   img{
   
       transition:
   
           transform
   
           .7s
   
           var(--ease);
   
   }
   
   
   /* ==========================================================================
      REDUCED MOTION
      ========================================================================== */
   
   @media (prefers-reduced-motion: reduce){
   
   *{
   
   animation:none !important;
   
   transition:none !important;
   
   scroll-behavior:auto !important;
   
   transform:none !important;
   
   }
   
   }