SCP財団

:root{
 --timeScale:1;
 --timeDelay:0s;
}
 
/*Convertingmiddledividerfrombox-shadowto ::beforepseudo-element*/
.anom-bar > .bottom-box{box-shadow:none!important; }.anom-bar > .bottom-box::before{position:absolute;
 content: " ";
 width:100%;
 height:0.5rem;
 background-color: rgb(var(--black-monochrome, 12, 12, 12));
 transform: translateY(-0.74rem);
}
 
/*DIVIDER*/
.anom-bar > .bottom-box::before{animation-name: divider;
 animation-duration: calc(0.74s * var(--timeScale));
 animation-delay: calc(0.1s * var(--timeScale) + var(--timeDelay));
 animation-iteration-count:1;
 animation-timing-function: cubic-bezier(.32,.38,.39,.94);
 animation-fill-mode: backwards;
}
 
/*CLASSIFIEDLEVELBARS*/
div.top-center-box > *{animation-name: bar;
 animation-duration: calc(0.45s * var(--timeScale));
 animation-iteration-count:1;
 animation-timing-function: ease-out;
 animation-fill-mode: backwards;
}div.top-center-box > :nth-child(1) {animation-delay: calc(0.2s * var(--timeScale) + var(--timeDelay)); }div.top-center-box > :nth-child(2) {animation-delay: calc(0.32s * var(--timeScale) + var(--timeDelay)); }div.top-center-box > :nth-child(3) {animation-delay: calc(0.45s * var(--timeScale) + var(--timeDelay)); }div.top-center-box > :nth-child(4) {animation-delay: calc(0.61s * var(--timeScale) + var(--timeDelay)); }div.top-center-box > :nth-child(5) {animation-delay: calc(0.75s * var(--timeScale) + var(--timeDelay)); }div.top-center-box > :nth-child(6) {animation-delay: calc(0.95s * var(--timeScale) + var(--timeDelay)); }
 
/*TOPTEXT*/
div.top-left-box, div.top-right-box{clip-path: polygon( 0% -50%, 150% -50%, 150%100%, 0%100%);
}div.top-left-box > *, div.top-right-box > *{position:relative;
 animation-name: bottomup;
 animation-duration: calc(0.65s * var(--timeScale));
 animation-delay: calc(0.5s * var(--timeScale) + var(--timeDelay));
 animation-iteration-count:1;
 animation-timing-function: ease-out;
 animation-fill-mode: backwards;
}
 
/*-----------------------------------*/
/*-----------------------------------*/
 
/*CONTAINMENT, DISRUPTION, RISKCLASSES*/
div.text-part > *{clip-path: polygon( 0%0%, 100%0%, 100%100%, 0%100%);
 animation-name: expand2;
 animation-duration: calc(0.5s * var(--timeScale));
 animation-iteration-count:1;
 animation-timing-function: cubic-bezier(.12,.41,.27,.99);
 animation-fill-mode: backwards;
}div.text-part > :nth-child(1) {animation-name: expand1;
}div.text-part > :nth-child(1) {animation-delay: calc(0.6s * var(--timeScale) + var(--timeDelay)); }div.text-part > :nth-child(2) {animation-delay: calc(0.75s * var(--timeScale) + var(--timeDelay)); }div.text-part > :nth-child(3) {animation-delay: calc(0.86s * var(--timeScale) + var(--timeDelay)); }div.main-class::before, div.main-class::after{animation-name: iconslide;
 animation-duration: calc(0.45s * var(--timeScale));
 animation-delay: calc(0.8s * var(--timeScale) + var(--timeDelay));
 animation-iteration-count:1;
 animation-timing-function: cubic-bezier(.12,.41,.27,.99);
 animation-fill-mode: backwards;
}
 /*BOTTOMTEXT*/
div.main-class > *, div.disrupt-class > *, div.risk-class > *{white-space:nowrap;
 animation-name: flowIn;
 animation-duration: calc(0.42s * var(--timeScale));
 animation-delay: calc(0.75s * var(--timeScale) + var(--timeDelay));
 animation-iteration-count:1;
 animation-timing-function: ease-out;
 animation-fill-mode: backwards;
}
 
/*-----------------------------------*/
/*-----------------------------------*/
 
/*DIAMOND*/
div.arrows{animation-name: arrowspin;
 animation-duration: calc(0.7s * var(--timeScale));
 animation-delay: calc(0.6s * var(--timeScale) + var(--timeDelay));
 animation-iteration-count:1;
 animation-timing-function: cubic-bezier(.12,.41,.27,.99);
 animation-fill-mode: backwards;
}div.quadrants > *{animation-name: fade;
 animation-duration: calc(0.3s * var(--timeScale));
 animation-delay: calc(1.4s * var(--timeScale) + var(--timeDelay));
 animation-iteration-count:1;
 animation-timing-function: cubic-bezier(.12,.41,.27,.99);
 animation-fill-mode: backwards;
}div.top-icon, div.right-icon, div.left-icon, div.bottom-icon{animation-name: nodegrow;
 animation-duration: calc(0.4s * var(--timeScale));
 animation-delay: calc(1.4s * var(--timeScale) + var(--timeDelay));
 animation-iteration-count:1;
 animation-timing-function: cubic-bezier(.12,.41,.27,.99);
 animation-fill-mode: backwards;
}div.diamond-part{clip-path: polygon( -10%0.37%, 120%0.37%, 120%100%, -10%100%);
 animation-name: diamondBorder;
 animation-duration: calc(0.8s * var(--timeScale));
 animation-delay: calc(0.5s * var(--timeScale) + var(--timeDelay));
 animation-iteration-count:1;
 animation-timing-function: cubic-bezier(.32,.38,.39,.94);
 animation-fill-mode: backwards;
 will-change: box-shadow;
}
 
/*MOBILEQUERY*/
@media (max-width: 480px ) {.anom-bar > .bottom-box::before{display:none;
 }.anom-bar > .bottom-box{box-shadow:0 -0.5rem 00 rgb(var(--black-monochrome, 12, 12, 12))!important;
 }div.top-center-box > *{animation-name: bar-mobile;
 animation-duration: calc(0.9s * var(--timeScale));
 }div.top-center-box > :nth-child(1) {animation-delay: calc(0.1s * var(--timeScale) + var(--timeDelay)); }div.top-center-box > :nth-child(2) {animation-delay: calc(0.2s * var(--timeScale) + var(--timeDelay)); }div.top-center-box > :nth-child(3) {animation-delay: calc(0.3s * var(--timeScale) + var(--timeDelay)); }div.top-center-box > :nth-child(4) {animation-delay: calc(0.4s * var(--timeScale) + var(--timeDelay)); }div.top-center-box > :nth-child(5) {animation-delay: calc(0.5s * var(--timeScale) + var(--timeDelay)); }div.top-center-box > :nth-child(6) {animation-delay: calc(0.6s * var(--timeScale) + var(--timeDelay)); }}
 
/*--- MotionAccessibility ---*/
@mediascreenand (prefers-reduced-motion: reduce) {div.anom-bar-container{ --timeScale:0!important; }}
 
/*-------------------------*/
 
@keyframesdivider{from{max-width:0%; }to{max-width:100%; }}@keyframesbar{from{max-width:0%; }to{max-width:100%; }}@keyframesbar-mobile{from{max-height:0%; }to{max-height:100%; }}@keyframesbottomup{from{top:100px; }to{top:0; }}@keyframesexpand1{from{opacity:0; clip-path:inset(0 calc(100% - 0.75rem) 00); }to{opacity:1; clip-path:inset(0); }}@keyframesiconslide{from{opacity:0; transform: translateX(-5rem); }to{opacity:1; transform: translateX(0); }}@keyframesexpand2{from{opacity:0; width:1%; }to{opacity:1; width: calc(100% - 0.25rem); }}@keyframesfade{from{opacity:0; }to{opacity:1; }}@keyframesflowIn{from{opacity:0; transform: translateY(20px); }to{opacity:1; transform: translateY(0); }}@keyframesarrowspin{from{clip-path:circle(0%); transform: rotate(135deg); }to{clip-path:circle(75%); transform: rotate(0deg); }}@keyframesnodegrow{from{transform: scale(0);}to{transform: scale(1);}}@keyframesdiamondBorder{from{box-shadow: -0.5rem -20rem 00 rgb(var(--black-monochrome, 12, 12, 12)); }to{box-shadow: -0.5rem 000 rgb(var(--black-monochrome, 12, 12, 12)); }}

内部構造