/* === INTRO ANIMATION === */



#intro-checkbox {
    display: none;
}

#intro-checkbox:checked ~ #intro-box {
    display: none;
}

#intro-checkbox:checked ~ #intro-link-text {
    display: none;
}

/* This entire box is a label for 
    a checkbox that, when checked, 
    will make the box instantly 
    invisible and transparent. */
#intro-box {
    position: absolute;
    width: 100%;
    height: 100vh;
    background-image: radial-gradient(ellipse farthest-corner, 
    #4082d4, #0d223a );
    background-color: #0d223a;
    z-index: 3000;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
}

#intro-animation {
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translateX(-50%);
    width: 70%;
    max-width: 400px;
    pointer-events: none;
}

/* This text (that looks like a hyperlink) 
    will be make instantly invisible and 
    transparent when #intro-checkbox is checked. */
#intro-link-text {
    position: absolute;
    left: 50%;
    bottom: 20%;
    transform: translateX(-50%);
    color: #fceae3;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-size: 16px;
    text-decoration: underline;
    z-index: 3500;
    cursor: pointer;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
}

.intro-appearance {
    /* animation: name duration timing-function delay iteration-count direction fill-mode; */
    /* Timing based on the last item to animate: #mask rect */
    animation: showHide 5s forwards;
    /* Show the intro and then hide in on page load */
}

@keyframes showHide {
    0% {
        opacity: 1;
        visibility: visible;
    }
    80% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        visibility: hidden;
    }
}

/* Delay the appearance of the carousel but add this class only when the intro is playing. */
.intro-carousel-delay {
    animation: fadeIn 5s 5s backwards;
}
/* 'backwards' = The animation will apply the values defined in the first relevant keyframe as soon as it is applied to the target, and retain this during the animation-delay period. */

.intro-colour {
    fill: #fceae3; /* --color-a-light */
}



/* !!! COPY THIS INTO THE SVG DEFS !!!
<filter id="glowEffect" x="-50%" y="-50%" width="200%" height="200%" filterUnits="userSpaceOnUse">
  <feOffset dx="0" dy="0" in="SourceGraphic" result="offOut" ></feOffset>
  <feGaussianBlur stdDeviation="4" in="offOut" result="blurOut"></feGaussianBlur>
  <feBlend in="SourceGraphic" in2="blurOut" mode="normal"></feBlend>
</filter>
*/

/* the following may be necessary to 
* override styles in elements within svg canvas 
* but no affect on defs */
/* svg rect {
    fill: inherit;
    display: inherit;
    transform: inherit;
        beware that effects can be compounded on children
} */

/* ### ANIMATIONS ### */

@keyframes flicker {
    0%    { opacity: 0; }
    50%   { opacity: 0.1; }
    65%   { opacity: 0.3; }
    70%   { opacity: 1.0; }
    100%  { opacity: 0; }
}

/* for chaining, it is necessary 
    to duplicate this animation
    to prevent strange fill-mode
    effects in Safari 13.0.3 (Mojave 10.14.6) */
@keyframes flickerAgain {
    0%    { opacity: 0; }
    50%   { opacity: 0.1; }
    65%   { opacity: 0.3; }
    70%   { opacity: 1.0; }
    100%  { opacity: 0; }
}

@keyframes flickerEnd {
    0%    { opacity: 0; }
    90%   { opacity: 0; }
    100%  { opacity: 1; }
}

/* for chaining, it is necessary 
    to duplicate this animation
    to prevent strange fill-mode
    effects in Safari 13.0.3 (Mojave 10.14.6) */
@keyframes flickerEndAgain {
    0%    { opacity: 0; }
    90%   { opacity: 0; }
    100%  { opacity: 1; }
}

@keyframes slideRight {
from {
    transform: translateX(0);
    }
to {
    transform: translateX(24px);
    }
}

@keyframes slideLeft {
from {
    transform: translateX(0);
    }
to {
    transform: translateX(-3px);
    }
}

@keyframes shrinkCentre {
from {
    transform: scaleX(1);
    }
to {
    transform: scaleX(0.1666);
    }
}

@keyframes dropDown {
from {
    transform: translateY(-32px);
    }   
to {
    transform: translateY(0);
    } 
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}



/* ### ANIMATION ASSIGNMENTS ### */
/* See logo_jpw-2020_wo.html for other timings. */


/* ### ANIMATION ASSIGNMENTS ### */
/* glowing and flickering */

#pencil-1-glow,
#pencil-2-glow {
    filter: url(#glowEffect);
    animation: flicker 0.15s 0.0s 1 both, flickerAgain 0.25s 0.4s 1 forwards; 
}
/* for reasons unknown, had to insert 
    a delay of 0s to get Firefox 70 (on Mojave)
    to show second animation */

#pencil-1,
#pencil-2 {
    animation: flickerEnd 0.15s 0.0s steps(1) 1 both, flickerEndAgain 0.25s steps(1) 0.4s 1 forwards;
}

#pencil-3-glow,
#pencil-4-glow {
    filter: url(#glowEffect);
    animation: flicker 0.15s 1 both;  
}

#pencil-3,
#pencil-4 {
    animation: flickerEnd 0.15s steps(1) 1 both;
}

#pencil-5-glow,
#pencil-6-glow,
#pencil-7-glow,
#pencil-8-glow,
#pencil-9-glow,
#pencil-10-glow,
#pencil-11-glow,
#pencil-12-glow,
#pencil-13-glow,
#pencil-14-glow {
    filter: url(#glowEffect);
    animation: flicker 0.15s 0.1s 1 both;
}

#pencil-5,
#pencil-6,
#pencil-7,
#pencil-8,
#pencil-9,
#pencil-10,
#pencil-11,
#pencil-12,
#pencil-13,
#pencil-14 {
    animation: flickerEnd 0.15s steps(1) 0.1s 1 both;
}

#pencil-15-glow,
#pencil-16-glow {
    filter: url(#glowEffect);
    animation: flicker 0.15s 0.1s 1 both, flickerAgain 0.15s 0.2s 1 forwards;
}

#pencil-15,
#pencil-16 {
    animation: flickerEnd 0.15s steps(1) 0.1s 1 both, flickerEndAgain 0.15s steps(1) 0.2s 1;
}         


/* ### ANIMATION ASSIGNMENTS ### */
/* clipping */

#pencil-1-clip {
    animation: slideRight .5s linear 0.6s 1 forwards;  
}

#pencil-2-clip {
    animation: slideRight .5s linear 0.6s 1 forwards; 
}

/* For SVG elements the origin is at the 0 0 point of the SVG canvas. */
/* Therefore, explicit transform-origin must be used. */
/* Safari 13.0.3 on Mojave has a bug – origin not correct if page zoomed */
#pencil-15-clip {
    animation: shrinkCentre 0.4s linear .4s 1 forwards;
    transform-origin: 195px 52px;
}

#pencil-16-clip {
    animation: slideLeft 0.4s linear 0.4s 1 forwards; 
}

/* ### ANIMATION ASSIGNMENTS ### */
/* position */    
/* not working on IE11 and not worth trying */
/* https://stackoverflow.com/questions/23047098/css-translate-not-working-in-ie11-on-svg-g */
/* just give users a message */

#pencil,
#pencil-glow,
#Pencil-mark-mask {
    transform: translateY(-32px);
    animation: dropDown 1s cubic-bezier(.18,1.05,.73,1.33) 1.5s 1 forwards;
}

#mask rect {
    transform: translateX(-32px);
    animation: dropDown 1.8s linear 1.5s 1 forwards;
}

/* ### ANIMATION ASSIGNMENTS ### */
/* opacity */

#Text {
    animation: fadeIn 1.6s ease-in 2s 1 both, dropDown 1s cubic-bezier(.18,1.05,.44,1.14) 2s 1 forwards;
}

#pencil-fused {
    transform: translateY(-32px);
    animation: fadeIn 0.5s ease-out 1.2s 1 both, dropDown 1s cubic-bezier(.18,1.05,.73,1.33) 1.5s 1 forwards;
}

/* animation: name duration timing-function delay iteration-count direction fill-mode; */