@charset "UTF-8";

/* ----------------------------------------
   ローディング
---------------------------------------- */
.loading {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* 上下パネル（背景を担当） */
.loading::before,
.loading::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 50%;
    background: repeating-linear-gradient(
        0deg,
        #000,
        #000 8px,
        #111 8px,
        #111 16px
    );
    transition: transform 0.7s cubic-bezier(0.7, 0, 0.3, 1) 0.2s;
    z-index: 0;
}

.loading::before { top: 0; }
.loading::after  { bottom: 0; }

.loading--done {
    pointer-events: none;
}

.loading--done .loading__arrows,
.loading--done .loading__meter {
    opacity: 0;
    transition: opacity 0.7s cubic-bezier(0.7, 0, 0.3, 1);
}

.loading--done::before {
    transform: translateY(-100%);
}

.loading--done::after {
    transform: translateY(100%);
}

/* ----------------------------------------
   メーター
---------------------------------------- */
.loading__meter {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    color: #fff;
    font-size: 48px;
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.loading__meter-value {
    display: inline-block;
    min-width: 3ch;
    text-align: right;
}

.loading__meter-unit {
    font-size: 0.6em;
    vertical-align: baseline;
}

.loading__arrows {
    position: absolute;
    inset: 0;
    z-index: 1;
    opacity: 0.9;
}

/* 青・赤それぞれの絶対配置コンテナ */
.loading__arrow--top {
    position: absolute;
    bottom: calc(50% + 8px);
    left: 0;
    right: 0;
    height: 216px;
}

.loading__arrow--bottom {
    position: absolute;
    top: calc(50% + 8px);
    left: 0;
    right: 0;
    height: 216px;
}

/* 青の矢じり: 画面right:0（右端）からtranslateXで左へ移動 */
.loading__arrow-head--left {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 216px;
    height: 216px;
    background: #00b4dc;
    clip-path: polygon(0% 100%, 100% 0%, 100% 100%);
    animation: headLeft 2.4s linear 0.3s forwards;
}

/* 赤の矢じり: 画面left:0（左端）からtranslateXで右へ移動 */
.loading__arrow-head--right {
    position: absolute;
    top: 0;
    left: 0;
    width: 216px;
    height: 216px;
    background: #e6007e;
    clip-path: polygon(100% 0%, 0% 100%, 0% 0%);
    animation: headRight 2.4s linear 0.3s forwards;
}

/* 青の直線: 矢じり左隣(right:216px)からwidthが左へ伸びる */
.loading__arrow--top .loading__arrow-line {
    position: absolute;
    bottom: 0;
    right: 0;
    height: 72px;
    width: 0;
    background: #00b4dc;
    animation: lineLeft 2.4s linear 0.3s forwards;
}

/* 赤の直線: 矢じり右隣(left:216px)からwidthが右へ伸びる */
.loading__arrow--bottom .loading__arrow-line {
    position: absolute;
    top: 0;
    left: 0;
    height: 72px;
    width: 0;
    background: #e6007e;
    animation: lineRight 2.4s linear 0.3s forwards;
}

/* 矢じりの移動量 = 直線の伸び量 = 100vw - 216px → 完全同期
   0→40%(1.2s): 位置20%までゆっくり移動
   40→60%(0.6s): 位置20%で静止（タメ）
   60→100%(1.2s): 位置100%まで爆速 / 総時間3s */
@keyframes headLeft {
    0%   { transform: translateX(0); animation-timing-function: ease-out; }
    40%  { transform: translateX(calc(-20vw + 43.2px)); }
    60%  { transform: translateX(calc(-20vw + 43.2px)); animation-timing-function: cubic-bezier(0.8, 0, 1, 1); }
    100% { transform: translateX(calc(-100vw + 216px)); }
}

@keyframes lineLeft {
    0%   { width: 0; animation-timing-function: ease-out; }
    40%  { width: calc(20vw - 43.2px); }
    60%  { width: calc(20vw - 43.2px); animation-timing-function: cubic-bezier(0.8, 0, 1, 1); }
    100% { width: calc(100vw - 216px); }
}

@keyframes headRight {
    0%   { transform: translateX(0); animation-timing-function: ease-out; }
    40%  { transform: translateX(calc(20vw - 43.2px)); }
    60%  { transform: translateX(calc(20vw - 43.2px)); animation-timing-function: cubic-bezier(0.8, 0, 1, 1); }
    100% { transform: translateX(calc(100vw - 216px)); }
}

@keyframes lineRight {
    0%   { width: 0; animation-timing-function: ease-out; }
    40%  { width: calc(20vw - 43.2px); }
    60%  { width: calc(20vw - 43.2px); animation-timing-function: cubic-bezier(0.8, 0, 1, 1); }
    100% { width: calc(100vw - 216px); }
}



/* ----------------------------------------
   見出しグリッチRGB
---------------------------------------- */
.char {
    display: inline-block;
    white-space: pre;
}

@keyframes glitchRGB {
    0%   { text-shadow:  2px 0 0 #00b4dc, -2px 0 0 #00b4dc; opacity: 0; }
    20%  { text-shadow: -2px 0 0 #00b4dc,  2px 0 0 #00b4dc; opacity: 1; }
    40%  { text-shadow:  2px 0 0 #00b4dc, -2px 0 0 #00b4dc; }
    60%  { text-shadow: -2px 0 0 #00b4dc,  2px 0 0 #00b4dc; }
    80%  { text-shadow:  1px 0 0 #00b4dc, -1px 0 0 #00b4dc; }
    100% { text-shadow: 0 0 0 transparent; opacity: 1; }
}

@keyframes glitchRGB-red {
    0%   { text-shadow:  2px 0 0 #e6007e, -2px 0 0 #e6007e; opacity: 0; }
    20%  { text-shadow: -2px 0 0 #e6007e,  2px 0 0 #e6007e; opacity: 1; }
    40%  { text-shadow:  2px 0 0 #e6007e, -2px 0 0 #e6007e; }
    60%  { text-shadow: -2px 0 0 #e6007e,  2px 0 0 #e6007e; }
    80%  { text-shadow:  1px 0 0 #e6007e, -1px 0 0 #e6007e; }
    100% { text-shadow: 0 0 0 transparent; opacity: 1; }
}


/* ----------------------------------------
   ヒーローオーバーレイ（叩きつけ）
---------------------------------------- */
@keyframes overlayDrop {
    from { transform: translate(calc(-50% + 1%), calc(-50% - 1%)) scale(1.1); opacity: 0; }
    to   { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}


/* ----------------------------------------
   マーキー（実績バーの無限横スクロール）
---------------------------------------- */
@keyframes scaMarquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}


/* ----------------------------------------
   パルス（LIVEドットの明滅）
---------------------------------------- */
@keyframes scaPulse {
    0%,
    100% {
        opacity: .5;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.25);
    }
}


/* ----------------------------------------
   フリッカーイン（画像エリア）
---------------------------------------- */
@keyframes flicker-in-1 {
    0%    { opacity: 0; }
    30%   { opacity: 0; }
    30.1% { opacity: 1; }
    30.5% { opacity: 1; }
    30.6% { opacity: 0; }
    45%   { opacity: 0; }
    45.1% { opacity: 1; }
    50%   { opacity: 1; }
    55%   { opacity: 1; }
    55.1% { opacity: 0; }
    57%   { opacity: 0; }
    57.1% { opacity: 1; }
    60%   { opacity: 1; }
    60.1% { opacity: 0; }
    65%   { opacity: 0; }
    65.1% { opacity: 1; }
    100%  { opacity: 1; }
}

/* ----------------------------------------
   フリッカーイン・ショート（グリッドタイル）
---------------------------------------- */
@keyframes flicker-in-short {
    0%    { opacity: 0; }
    20%   { opacity: 0; }
    20.1% { opacity: 1; }
    20.6% { opacity: 0; }
    40%   { opacity: 0; }
    40.1% { opacity: 1; }
    45%   { opacity: 1; }
    45.1% { opacity: 0; }
    50%   { opacity: 0; }
    50.1% { opacity: 1; }
    55%   { opacity: 1; }
    55.1% { opacity: 0; }
    65%   { opacity: 0; }
    65.1% { opacity: 1; }
    100%  { opacity: 1; }
}

/* ----------------------------------------
   引き戸リビール（イベントカード）
---------------------------------------- */
@keyframes slide-reveal {
    from { clip-path: inset(0 100% 0 0); }
    to   { clip-path: inset(0 0% 0 0); }
}

/* ----------------------------------------
   レーザースキャン（イベントカード右辺）
---------------------------------------- */
@keyframes laser-scan {
    0%   { opacity: 1; left: 0%; }
    90%  { opacity: 1; left: calc(100% - 3px); }
    100% { opacity: 0; left: calc(100% - 3px); }
}