/*
  イントロアニメーション
  data-style="1": 白背景・黒文字
  data-style="2": 黒背景・白文字
  タイミングは intro.js が data属性から読み取って制御
*/

.intro {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition-property: opacity;
    transition-timing-function: ease-out;
}

.intro[data-style="1"] {
    background: #fff;
    color: #1a1a1a;
}

.intro[data-style="2"] {
    background: #1a1a1a;
    color: #fff;
}

.intro-title {
    font-size: 32px;
    font-weight: 700;
    margin: 0;
    opacity: 0;
    transition-property: opacity;
    transition-timing-function: ease-in;
}

.intro-sub {
    font-size: 18px;
    margin: 12px 0 0;
    opacity: 0;
    transition-property: opacity;
    transition-timing-function: ease-in;
}

.intro.is-hidden {
    pointer-events: none;
}