:root {
    --timeScale: 1;
    --timeDelay: 0s;
}
 
/* Converting middle divider from box-shadow to ::before pseudo-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;
}
 
/* CLASSIFIED LEVEL BARS */
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)); }
 
/* TOP TEXT */
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, RISK CLASSES */
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;
}
 /* BOTTOM TEXT */
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;
}
 
/* MOBILE QUERY */
@media (max-width: 480px ) {
    .anom-bar > .bottom-box::before {
        display:none;
    }
    .anom-bar > .bottom-box {
        box-shadow: 0 -0.5rem 0 0 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)); }
 
}
 
/*--- Motion Accessibility ---*/
@media screen and (prefers-reduced-motion: reduce) { 
    div.anom-bar-container { --timeScale: 0!important; }
}
 
/*-------------------------*/
 
@keyframes divider {
    from { max-width: 0%;  }
    to { max-width: 100%; }
}
 
@keyframes bar {
    from { max-width: 0%; }
    to { max-width: 100%; }
}
@keyframes bar-mobile {
    from { max-height: 0%; }
    to { max-height: 100%; }
}
 
@keyframes bottomup {
    from { top: 100px; }
    to { top: 0; }
}
 
@keyframes expand1 {
    from { opacity: 0; clip-path: inset(0 calc(100% - 0.75rem) 0 0); }
    to { opacity: 1; clip-path: inset(0); }
}
@keyframes iconslide {
    from { opacity: 0; transform: translateX(-5rem); }
    to { opacity: 1; transform: translateX(0); }
}
 
@keyframes expand2 {
    from { opacity: 0; width: 1%; }
    to { opacity: 1; width: calc(100% - 0.25rem); }
}
@keyframes fade {
    from { opacity: 0; }
    to { opacity: 1; }
}
 
@keyframes flowIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
 
@keyframes arrowspin {
    from { clip-path: circle(0%); transform: rotate(135deg); }
    to { clip-path: circle(75%); transform: rotate(0deg); }
}
@keyframes nodegrow {
    from { transform: scale(0);}
    to {  transform: scale(1);}
}
@keyframes diamondBorder {
    from { box-shadow: -0.5rem -20rem 0 0 rgb(var(--black-monochrome, 12, 12, 12)); }
    to { box-shadow: -0.5rem 0 0 0 rgb(var(--black-monochrome, 12, 12, 12)); }
}




一周前, 大地在我们脚下震动。

我告诉妈妈不要担心—这些事情总有时候会发生。

他们说当山脉在水下相碰撞时,大地就会移动

但我们知道真相。

地球为了过冬而运动

比如翻身睡觉。



五天前,一个男人跌跌撞撞地来到我们镇

他的脸被煤灰熏得黑黑的

而且他说不出话来

只是咕哝。

他盯着我们的后面,好像我们根本不在那。

他看着我,我从他的眼睛里什么也看不见。

他说“火”,

和“死”,

还有“烟”。

我提出让他住在我们家

(虽然妈妈对他的卫生状况大发雷霆!)

但是他早上就走了。

他们说他往南走了。



三天前,大地又震动了

一群从山上来的矿工说,他们看到了有东西在燃烧

越过群山,向北。

“森林在燃烧吗?”我们问道

尽管他们这么做时已经在季末了。

他们说没有。

他们说那不是在烧木头

而是别的东西。

他们说在山上时他们能听到声音

机器的声音和金属的嘎吱声

微弱,但越来越近。

他们还说看见了烟

又厚又黑又密

不是来自燃烧的树木

而是别的东西。


两天前,一群从南方来的人到了我们的小镇。

他们坐着汽车,戴着头盔

就像是士兵。

夜里大地又震动了,

现在我们每隔几个小时就能感觉到小震动。

妈妈越来越着急了。

她想让我们去山上

蒂娅·伊莱娜和堂兄弟们住的地方。

我告诉她那太蠢了,总有人要照看农场

和房子。

我跟她说我会问士兵们地震的事

还有烟。

我向他们说话时,他们很少开口。

他们看着我,就像一个成年人看着一个迷路的孩子

他们说,还有许多人正往南走

去拉巴斯。

我提到了农场和房子

士兵却只是摇了摇头

说其他人在往南走

去拉巴斯,

然后他们开车走了。



昨天,太阳没有升起。

我把妈妈和小费利西亚送到山上去了

到蒂娅·伊莱娜和堂兄弟们住的地方。

我说我要留下来来照看农场

和房子

他们可以等大火熄灭之后再回来。

一层薄烟笼罩着我们镇

有时它像海浪一样翻滚

窒息了整个农村。

它弥漫在空气里。

我甚至无法看着妈妈、费利西亚和其他人离开镇上

因为烟实在太浓了。

更多的人从北方过来

他们的脸被煤灰熏黑,眼睛上布满血迹。

他们说不了。

他们看不见。

他们听不见。

他们几乎没有呼吸。

他们缓慢地向南方走去。

他们悲惶地张嘴但不说话,并在烟里窒息。

我不认为他们在乎的是烟。

有时候我觉得他们是由烟组成的。

但火终将会熄灭

妈妈和费利西亚也会下山。



昨晚我听到了枪声

和炮响

远处传来人们的尖叫声。

我醒了,走到外面,外面浓烟滚滚

感觉就像是在水里游泳。

我看到一个之前的士兵

但只有他浑身是油,少了一只胳膊。

他从北方步行来到镇上

看起来是要去广场附近的井。

我问他需不需要水

但他什么都没对我说

只是悲惶地张嘴并但不说话。

等我回来的时候

他已经死了。

他的制服被血浸透了

并被煤烟弄脏

枪声持续了一整夜

但过了一会儿,我唯一能听到的声音是

铁的摩擦声

和钢的尖啸。

我透过烟雾,看到远处,

山上已经充斥着火和机械。

你时常能看到爆炸

当一枚炮弹在上面爆炸时

另一块会将破碎的取而代之。

山畅通无阻地继续前进。

我看到一个像手臂一样的东西伸出来

抓住一辆载满士兵的车

他们除了盯着看并且紧紧抓住车架之外什么都做不了

他们被举到一英里高的空中

掉进了火里。

我想去帮忙—

现在有那么多人正爬向大海,

向水。

但烟很浓,我无法呼吸,

我被黑暗笼罩。



今天,我醒于静寂之中。

我的一个邻居玛丽亚,在街上发现了我

并把我拉进她家。

阴霾已逝

他们说是风将它吹向了南方

伴着一山的火焰

去拉巴斯。

我在走,但是看不见

我也听不见

我也不能说话。

蒂亚·伊莱娜和堂兄弟们住的山

已一去不返。

山碾过它们

只留下来了火

和烟

现在没有人向大海里爬了。

所有的尸体都停止了移动。

玛丽亚告诉我,也许妈妈和费利西亚已经逃走了

他们可能在到达伊莱娜家的时候迟到了。

她说他们可能现在正在回家的路上。

但她没有看见漫山的火海。

她看不见那该死的机器。

她没有直视死神的眼睛

并感受到那尖啸的机械的热度。



我知道妈妈和费利西亚不会回家了。

我知道他们是如何度过最后时刻的—

祈祷

燃烧

窒息

死亡。

他们没有逃出漫山火海

因为没人能逃出那漫山火海。




至于我吗?




我将照看农场

和房子。

除非特别注明,本页内容采用以下授权方式: Creative Commons Attribution-ShareAlike 3.0 License