/* =====================================================
   Animation Base
===================================================== */

/* 初期状態 */
header.topnav,
h1, .breadcrumb,
.featured,
.latest, .news, .schedule, .works, .more-works,
.newsCover, .scheduleCover, .worksCover,
.ig, .xpost, .tiktok, .models,
.profile_ig, .profile_x, .profile_tk{
  opacity: 0;
}


/* =====================================================
   Header Animation
===================================================== */

header.topnav, h1, .breadcrumb{
  transform: translateY(-12px);
  transition: opacity .8s ease, transform .8s ease;
}

header.topnav.is-visible,
h1.is-visible, 
.breadcrumb.is-visible{
  opacity: 1;
  transform: translateY(0);
}


/* =====================================================
   Featured Animation
===================================================== */

.featured{
  opacity: 0;
  transform: scale(.96);
  transition: opacity 1s ease, transform 1.3s ease;
}

.featured.is-visible{
  opacity: 1;
  transform: scale(1);
}

@media (max-width: 767px){

  .featured{
    transform: scale(.98);
  }

  .featured.is-visible{
    opacity: 1;
    transform: scale(1);
  }

}

@media (max-width: 767px){

  .featured{
    transform: translateY(24px);
  }

  .featured.is-visible{
    opacity: 1;
    transform: translateY(0);
  }

}


/* =====================================================
   Section Fade Up
===================================================== */

.latest, .news, .schedule, .works, .more-works,
.newsCover, .scheduleCover, .worksCover{
  transform: translateY(24px);
  transition: opacity .6s ease, transform .6s ease;
}

.latest.is-visible,
.news.is-visible,
.schedule.is-visible,
.works.is-visible,
.more-works.is-visible,
.newsCover.is-visible,
.scheduleCover.is-visible,
.worksCover.is-visible{
  opacity: 1;
  transform: translateY(0);
}


/* =====================================================
   SNS / Models Animation
===================================================== */

.ig, .xpost, .tiktok, .models{
  transform: translateY(48px);
  transition: opacity .6s ease, transform .6s ease;
}

.ig.is-visible,
.xpost.is-visible,
.tiktok.is-visible,
.models.is-visible{
  opacity: 1;
  transform: translateY(0);
}


/* =====================================================
   Profile SNS Animation
===================================================== */

.profile_ig,
.profile_x,
.profile_tk{
  transition: opacity .6s ease, transform .6s ease;
}

.profile_ig{
  transform: translateY(60px);
}

.profile_x{
  transform: translateY(72px);
}

.profile_tk{
  transform: translateY(84px);
}

.profile_ig.is-visible,
.profile_x.is-visible,
.profile_tk.is-visible{
  opacity: 1;
  transform: translateY(0);
}


/* =====================================================
   Toggle
===================================================== */