@charset "utf-8";


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/*                                                        */
/* ● delighter.css                                       */
/*    付加装飾                                            */
/*                                                        */
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* delighter 用 
--------------------------------------------------- */
@media screen{

  /* 基本のスタイル */
  .delighter{
    opacity: 0;
    transition: all 0.5s ease-out;
    

    /* 初期値 */
    &{

      &.top    { transform: translatey(-15%); }
      &.right  { transform: translate(-10%);  }
      &.left   { transform: translate(10%);   }
      &.bottom { transform: translatey(15%);  }
      &.clip-path{
        clip-path: inset(0% 100% 0% 0%);
        img{
          filter: brightness(10);
          transition: filter 0.5s ease-out;
        }
      }

    }


    /* スタート時のスタイル */
    &.started { 
      opacity: 1;
      transform: none;
      &.clip-path{
        clip-path: inset(0% 0% 0% 0%);
        img{
          filter: brightness(1);
        }
      }
      
    }
    /* エンド時のスタイル */
    &.ended { 
      &.clip-path{
        clip-path: none;
      }

    }

  }

}