/* (C)2019 Endis Ltd.
No permission is given to use this code, except on an Endis/ChurchInsight website. */

/* CI animations library */

/* 
Make cards fade in as user scrolls down page.
We use a generic class name here called FadingCards, which should be applied to any slice that needs the animation on.
This code is designed to run on 3 and 4 card sets, not anything bigger.
*/
@keyframes CIA_OpacityRise {
	0% {opacity:0;}
	100% {opacity:1;}
}
/* code needed to prepare the cards for animation */
section.FadingCards div.article_cards > div,
section.FadingCards div.article_cards div.articleListImage a {background-color:transparent;}
section.FadingCards div.article_cards div.articleListLink {background-color:#fff;}

section.FadingCards div.article_cards div.articleListImage img,
section.FadingCards div.article_cards div.articleListSummary,
section.FadingCards div.article_cards div.articleListTitle,
section.FadingCards div.article_cards div.articleListLink,
section.FadingCards div.article_cards div.articleListLink a {opacity:0;} /* set to 0 initially, also when the class "RunAnimation" is removed, they will go back to this. */

body.ArticleEditor section.FadingCards.BeaconWhiteTable table,
body.ArticleEditor section.FadingCards.BeaconLogo img,
body.ArticleEditor section.FadingCards.BeaconWeb {opacity:1;} /* set to 0 initially, also when the class "RunAnimation" is removed, they will go back to this. */

/* JS will add the class "RunAnimation" to start the animation going */
section.FadingCards.RunAnimation div.article_cards div.articleListImage img,
section.FadingCards.RunAnimation div.article_cards div.articleListSummary,
section.FadingCards.RunAnimation div.article_cards div.articleListTitle,
section.FadingCards.RunAnimation div.article_cards div.articleListLink,
section.FadingCards.RunAnimation div.article_cards div.articleListLink a {
    animation-name: CIA_OpacityRise;
	animation-iteration-count: 1;
	animation-duration: 1s;
	animation-delay:0s; /* initial delay, will be zero if scroll-position activated. */
	animation-timing-function: linear;
	animation-fill-mode:forwards; /* keep opacity on at the end */
}

@media(min-width:768px){
  section.FadingCards.BeaconWhiteTable table,
  section.FadingCards.BeaconLogo img,
  section.FadingCards.BeaconWeb {opacity:0;} /* set to 0 initially, also when the class "RunAnimation" is removed, they will go back to this. */

  section.FadingCards.RunAnimation.BeaconWhiteTable table,
  section.FadingCards.RunAnimation.BeaconLogo img,
  section.FadingCards.BeaconWeb {
    animation-name: CIA_OpacityRise;
    animation-iteration-count: 1;
    animation-duration: 1s;
    animation-delay:0s; /* initial delay, will be zero if scroll-position activated. */
    animation-timing-function: linear;
    animation-fill-mode:forwards; /* keep opacity on at the end */
  }
}

/* Set up the staggered timing - The image will show right away */
section.FadingCards.RunAnimation div.article_cards > div:first-of-type div.articleListTitle,
section.FadingCards.RunAnimation div.article_cards > div:first-of-type div.articleListSummary,
section.FadingCards.RunAnimation div.article_cards > div:first-of-type div.articleListLink
{
	animation-delay:333ms; /* bring in the rest of the card */
}
section.FadingCards.RunAnimation div.article_cards > div:first-of-type div.articleListLink a
{
	animation-delay:calc(2*333ms) /* finally bring in the button. Use calc to make things easier to understand */
}

/* 2nd card: off-set delay compared to the 1st */
section.FadingCards.RunAnimation div.article_cards > div:nth-of-type(2) div.articleListImage img {
	animation-delay:333ms;
}
section.FadingCards.RunAnimation div.article_cards > div:nth-of-type(2) div.articleListTitle,
section.FadingCards.RunAnimation div.article_cards > div:nth-of-type(2) div.articleListSummary,
section.FadingCards.RunAnimation div.article_cards > div:nth-of-type(2) div.articleListLink
{
	animation-delay:calc(2*333ms);
}
section.FadingCards.RunAnimation div.article_cards > div:nth-of-type(2) div.articleListLink a
{
	animation-delay:calc(3*333ms)
}

/* 3rd card: off-set delay compared to the 2nd */
section.FadingCards.RunAnimation div.article_cards > div:nth-of-type(3) div.articleListImage img {
	animation-delay:calc(2*333ms);
}
section.FadingCards.RunAnimation div.article_cards > div:nth-of-type(3) div.articleListTitle,
section.FadingCards.RunAnimation div.article_cards > div:nth-of-type(3) div.articleListSummary,
section.FadingCards.RunAnimation div.article_cards > div:nth-of-type(3) div.articleListLink
{
	animation-delay:calc(3*333ms);
}
section.FadingCards.RunAnimation div.article_cards > div:nth-of-type(3) div.articleListLink a
{
	animation-delay:calc(4*333ms)
}
/* 4th card: off-set delay compared to the 3rd */
section.FadingCards.RunAnimation div.article_cards > div:nth-of-type(4) div.articleListImage img {
	animation-delay:calc(3*333ms);
}
section.FadingCards.RunAnimation div.article_cards > div:nth-of-type(4) div.articleListTitle,
section.FadingCards.RunAnimation div.article_cards > div:nth-of-type(4) div.articleListSummary,
section.FadingCards.RunAnimation div.article_cards > div:nth-of-type(4) div.articleListLink
{
	animation-delay:calc(4*333ms);
}
section.FadingCards.RunAnimation div.article_cards > div:nth-of-type(4) div.articleListLink a
{
	animation-delay:calc(5*333ms)
}

/* 
Mobile card fading, JS will add the class "RunAnimation" onto card <div> to start the animation going 
*/
section.FadingCards div.article_cards div.RunAnimation div.articleListImage img,
section.FadingCards div.article_cards div.RunAnimation div.articleListSummary,
section.FadingCards div.article_cards div.RunAnimation div.articleListTitle,
section.FadingCards div.article_cards div.RunAnimation div.articleListLink,
section.FadingCards div.article_cards div.RunAnimation div.articleListLink a {
    animation-name: CIA_OpacityRise;
	animation-iteration-count: 1;
	animation-duration: 1s;
	animation-delay:0s; /* initial delay, will be zero if scroll-position activated. */
	animation-timing-function: linear;
	animation-fill-mode:forwards; /* keep opacity on at the end */
}
/* Set up the staggered timing - The image will show right away */
section.FadingCards div.article_cards div.RunAnimation div.articleListTitle,
section.FadingCards div.article_cards div.RunAnimation div.articleListSummary,
section.FadingCards div.article_cards div.RunAnimation div.articleListLink
{
	animation-delay:333ms; /* bring in the rest of the card */
}
section.FadingCards div.article_cards div.RunAnimation div.articleListLink a
{
	animation-delay:calc(2*333ms) /* finally bring in the button. Use calc to make things easier to understand */
}

/* Content page Banner Images and captions - no JS trigger needed here */

section.slice_BannerImage {
    animation-name: CIA_OpacityRise;
	animation-iteration-count: 1;
	animation-duration: 500ms;
	animation-delay:200ms; /* initial delay, give a small amount of time for the page to load etc. */
	animation-timing-function: linear;
	animation-fill-mode:both;
}
section.slice_BannerImage h1 {
    animation-name: CIA_OpacityRise;
	animation-iteration-count: 1;
	animation-duration: 500ms;
	animation-delay:700ms; /* initial delay, wait for image fade to finish */
	animation-timing-function: linear;
	animation-fill-mode:both; 
}

/* Slide show captions - no JS trigger here */

section div.bx-viewport div.caption a.slideButton {position:relative;} /* prep */

section div.bx-viewport div.caption div.slideTitle { /* fade in the title */
	animation-name: CIA_OpacityRise;
	animation-iteration-count: 1;
	animation-duration: 650ms;
	animation-delay:200ms; /* initial delay */
	animation-timing-function: linear;
	animation-fill-mode:both; 
}
/* Move the SlideShow button up, and fade in, at the same time */
@keyframes CIA_MoveUpPercent {
	0% {top:5%;opacity:0;}
	50% {top:0;opacity:0.4;} /* finished moving but opacity only at 40% */
	100% {top:0;opacity:1;} /* bring in the rest of the opacity */
}
section div.bx-viewport div.caption a.slideButton {  /* Move the SlideShow button up, and fade in, at the same time */
	animation-name: CIA_MoveUpPercent;
	animation-iteration-count: 1;
	animation-duration: 650ms;
	animation-delay:1100ms; /* initial delay */
	animation-timing-function: linear;
	animation-fill-mode:both; 
}
section div.bx-viewport div.caption div.slideText { /* finally fade in the caption text */
    animation-name: CIA_OpacityRise;
	animation-iteration-count: 1;
	animation-duration: 500ms;
	animation-delay:600ms; /* wait for others to finish. */
	animation-timing-function: linear;
	animation-fill-mode:both; 
}

/* code needed to prepare the Image Blocks for animation */
section.FadingCards div.image_blocks li,
section.FadingCards div.image_blocks li a {background-color:#fff;}

section.FadingCards div.image_blocks li a {opacity:0;} /* set to 0 initially, also when the class "RunAnimation" is removed, they will go back to this. */

/* JS will add the class "RunAnimation" to start the animation going */
section.FadingCards.RunAnimation div.image_blocks li a {
    animation-name: CIA_OpacityRise;
	animation-iteration-count: 1;
	animation-duration: 1s;
	animation-delay:0s; /* initial delay, will be zero if scroll-position activated. */
	animation-timing-function: linear;
	animation-fill-mode:forwards; /* keep opacity on at the end */
}

/* 2nd card: off-set delay compared to the 1st */
section.FadingCards.RunAnimation div.image_blocks li:nth-child(2) a {
	animation-delay:333ms;
}
/* 3rd card: off-set delay compared to the 2nd */
section.FadingCards.RunAnimation div.image_blocks li:nth-child(3) a {
	animation-delay:calc(2*333ms);
}

/* 
Mobile card fading, JS will add the class "RunAnimation" onto card <div> to start the animation going 
*/
section.FadingCards div.image_blocks li a.RunAnimation {
    animation-name: CIA_OpacityRise;
	animation-iteration-count: 1;
	animation-duration: 1s;
	animation-delay:0s; /* initial delay, will be zero if scroll-position activated. */
	animation-timing-function: linear;
	animation-fill-mode:forwards; /* keep opacity on at the end */
}