/* ================================================================
   IdolWatch Loader — オープニング演出
   タイムライン（--iwl-dur = 2200ms 基準）
     0.00x  タイルがランダムな遅延でポップイン
     0.00x  グリッド全体がゆっくりズーム（後半でぼかし）
     0.35x  スクリムが濃くなる
     0.42x  ロゴがぼけ→シャープ＋グロー、光沢が横切る
     1.00x  全体をワイプアウトして本体を表示
   ================================================================ */

.iwl-root {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    background: var(--iwl-bg, #0b0b12);
    overflow: hidden;
    display: block;
    contain: strict;
    cursor: pointer;
}

/* ---------- タイルグリッド ---------- */
.iwl-grid {
    position: absolute;
    inset: -4%;                     /* ズーム時に端が見えないよう少し外側へ */
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: calc(100% / 4);
    gap: 4px;
    transform-origin: 50% 50%;
    will-change: transform;
}

.iwl-tile {
    position: relative;
    overflow: hidden;
    border-radius: 4px;
    opacity: 0;
    background: #16161f;
    will-change: transform, opacity;
}

.iwl-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    /* 彩度を落として背景に沈める */
    filter: saturate(0.75) contrast(1.05);
}

/* ---------- スクリム（暗幕＋ビネット） ---------- */
.iwl-scrim {
    position: absolute;
    inset: 0;
    opacity: 0;
    background:
        radial-gradient(ellipse at 50% 50%,
            rgba(0, 0, 0, 0.35) 0%,
            rgba(0, 0, 0, 0.72) 45%,
            rgba(0, 0, 0, 0.92) 100%);
}

/* ---------- 中央（ロゴ・タグライン・バー） ---------- */
.iwl-center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 22px;
    padding: 24px;
    text-align: center;
}

/* ロゴ本体には filter を一切かけない。
   iOS の WebKit は will-change:filter で昇格したレイヤーの filter を
   毎フレームアニメーションさせると再ラスタライズが間に合わず、
   未初期化の白いテクスチャ（＝レイヤーと同じ大きさの白い矩形）を
   そのまま表示することがある。合成だけで完結する opacity と
   transform のみを動かす。 */
.iwl-logo {
    position: relative;
    width: min(var(--iwl-logo-w, 460px), 78vw);
    opacity: 0;
    will-change: transform, opacity;
}

.iwl-logo > img,
.iwl-logo > svg {
    position: relative;
    z-index: 1;
    width: 100%;
    height: auto;
    display: block;
}

/* グロー: filter: drop-shadow ではなく放射グラデーションで表現する。
   ラスタライズが要らないので白飛びしない。 */
.iwl-halo {
    position: absolute;
    inset: -130% -14%;
    z-index: 0;
    opacity: 0;
    pointer-events: none;
    background: radial-gradient(ellipse at center,
        var(--iwl-glow1, rgba(239, 188, 214, 0.75)) 0%,
        var(--iwl-glow2-soft, rgba(150, 136, 191, 0.35)) 32%,
        transparent 68%);
}

.iwl-logo .iwl-fallback {
    display: block;
    font-size: clamp(28px, 6vw, 54px);
    font-weight: 800;
    letter-spacing: 0.08em;
    color: #fff;
    white-space: nowrap;
}

/* ロゴを横切る光沢
   ロゴの字形でマスクした要素の中を、白いグラデーションが流れていく。
   mix-blend-mode は使わない（iOS Safari で filter レイヤーと衝突し、
   ロゴのボックス全体が不透明な白で塗り潰される事故があるため）。
   マスクが効かない環境では白い帯が矩形で見えてしまうので、
   @supports でマスク対応時のみ表示する。 */
.iwl-shine {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 2;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
}

/* 光る帯そのもの。マスクした親の中を transform で移動するだけなので、
   再ラスタライズが発生しない。 */
.iwl-shine i {
    position: absolute;
    top: -20%;
    bottom: -20%;
    left: 0;
    width: 55%;
    transform: translateX(-130%);
    background: linear-gradient(100deg,
        transparent 0%,
        rgba(255, 255, 255, 0.5) 42%,
        rgba(255, 255, 255, 0.92) 50%,
        rgba(255, 255, 255, 0.5) 58%,
        transparent 100%);
}

@supports ((-webkit-mask-image: url("")) or (mask-image: url(""))) {
    .iwl-shine {
        display: block;
        -webkit-mask-image: var(--iwl-logo-mask);
                mask-image: var(--iwl-logo-mask);
        -webkit-mask-size: 100% 100%;
                mask-size: 100% 100%;
        -webkit-mask-repeat: no-repeat;
                mask-repeat: no-repeat;
        -webkit-mask-position: center;
                mask-position: center;
    }
}

.iwl-tagline {
    margin: 0;
    opacity: 0;
    color: rgba(255, 255, 255, 0.82);
    font-size: clamp(11px, 1.4vw, 14px);
    letter-spacing: 0.28em;
    text-indent: 0.28em;
    font-weight: 600;
}

.iwl-bar {
    width: min(200px, 42vw);
    height: 2px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.14);
    overflow: hidden;
    opacity: 0;
}

.iwl-bar span {
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
        transparent,
        var(--iwl-accent2, #9688bf),
        var(--iwl-accent, #efbcd6));
    transform: scaleX(0);
    transform-origin: 0 50%;
}

/* ================================================================
   再生
   ================================================================ */
.iwl-play .iwl-tile {
    animation: iwl-tile-in 780ms cubic-bezier(0.16, 0.84, 0.44, 1) both var(--d, 0ms);
}

.iwl-play .iwl-grid {
    animation: iwl-grid-push var(--iwl-dur, 2200ms) cubic-bezier(0.33, 0, 0.2, 1) both;
}

.iwl-play .iwl-scrim {
    animation: iwl-fade-to 900ms ease both calc(var(--iwl-dur, 2200ms) * 0.3);
}

.iwl-play .iwl-logo {
    animation: iwl-logo-in 900ms cubic-bezier(0.16, 0.84, 0.32, 1) both calc(var(--iwl-dur, 2200ms) * 0.4);
}

.iwl-play .iwl-halo {
    animation: iwl-halo-in 1100ms cubic-bezier(0.16, 0.84, 0.32, 1) both calc(var(--iwl-dur, 2200ms) * 0.4);
}

.iwl-play .iwl-shine {
    animation: iwl-fade-pulse 900ms linear both calc(var(--iwl-dur, 2200ms) * 0.4 + 320ms);
}

.iwl-play .iwl-shine i {
    animation: iwl-shine 900ms cubic-bezier(0.4, 0, 0.3, 1) both calc(var(--iwl-dur, 2200ms) * 0.4 + 320ms);
}

.iwl-play .iwl-tagline {
    animation: iwl-rise 700ms ease-out both calc(var(--iwl-dur, 2200ms) * 0.4 + 260ms);
}

.iwl-play .iwl-bar {
    animation: iwl-fade-to 400ms ease both calc(var(--iwl-dur, 2200ms) * 0.4 + 200ms);
}

.iwl-play .iwl-bar span {
    animation: iwl-bar var(--iwl-dur, 2200ms) cubic-bezier(0.4, 0, 0.1, 1) both;
}

@keyframes iwl-tile-in {
    0%   { opacity: 0; transform: scale(1.28) rotate(var(--r, 0deg)); }
    100% { opacity: 1; transform: scale(1)    rotate(0deg); }
}

@keyframes iwl-grid-push {
    0%   { transform: scale(1);    filter: blur(0px) brightness(1); }
    55%  { transform: scale(1.06); filter: blur(0px) brightness(0.95); }
    100% { transform: scale(1.14); filter: blur(var(--iwl-blur, 5px)) brightness(0.75); }
}

@keyframes iwl-fade-to {
    0%   { opacity: 0; }
    100% { opacity: 1; }
}

/* opacity と transform だけ。filter は使わない（iOS の白飛び対策） */
@keyframes iwl-logo-in {
    0%   { opacity: 0; transform: scale(1.12); }
    100% { opacity: 1; transform: scale(1); }
}

/* グローは一度強く光ってから落ち着く */
@keyframes iwl-halo-in {
    0%   { opacity: 0;    transform: scale(0.72); }
    55%  { opacity: 1;    transform: scale(1.04); }
    100% { opacity: 0.62; transform: scale(1); }
}

@keyframes iwl-fade-pulse {
    0%   { opacity: 0; }
    15%  { opacity: 1; }
    85%  { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes iwl-shine {
    0%   { transform: translateX(-130%); }
    100% { transform: translateX(285%); }
}

@keyframes iwl-rise {
    0%   { opacity: 0; transform: translateY(10px); }
    100% { opacity: 1; transform: translateY(0); }
}

@keyframes iwl-bar {
    0%   { transform: scaleX(0); }
    70%  { transform: scaleX(0.72); }
    100% { transform: scaleX(1); }
}

/* ================================================================
   退場
   ================================================================ */
.iwl-done {
    animation: iwl-out 620ms cubic-bezier(0.5, 0, 0.75, 0) both;
    pointer-events: none;
}

.iwl-done .iwl-center {
    animation: iwl-center-out 520ms cubic-bezier(0.5, 0, 0.75, 0) both;
}

@keyframes iwl-out {
    0%   { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(1.06); }
}

@keyframes iwl-center-out {
    0%   { opacity: 1; transform: translateY(0)     scale(1); }
    100% { opacity: 0; transform: translateY(-14px) scale(1.04); }
}

/* ================================================================
   レスポンシブ
   ================================================================ */
@media (max-width: 900px) {
    .iwl-grid {
        grid-template-columns: repeat(4, 1fr);
        grid-auto-rows: calc(100% / 6);
    }
    /* モバイルでは全画面レイヤーの filter アニメーションを使わない。
       毎フレームの再ラスタライズが重いうえ、iOS では白飛びの原因にもなる。
       暗転はスクリムだけで表現する。 */
    .iwl-play .iwl-grid { animation-name: iwl-grid-push-lite; }
    .iwl-scrim {
        background:
            radial-gradient(ellipse at 50% 50%,
                rgba(0, 0, 0, 0.45) 0%,
                rgba(0, 0, 0, 0.8) 45%,
                rgba(0, 0, 0, 0.95) 100%);
    }
}

@keyframes iwl-grid-push-lite {
    0%   { transform: scale(1); }
    100% { transform: scale(1.14); }
}

@media (max-width: 540px) {
    .iwl-grid {
        grid-template-columns: repeat(3, 1fr);
        grid-auto-rows: calc(100% / 8);
        gap: 3px;
    }
    .iwl-center { gap: 16px; }
    /* 横長ワードマークが小さくなりすぎないよう画面幅いっぱいまで使う */
    .iwl-logo   { width: min(var(--iwl-logo-w, 460px), 86vw); }
    .iwl-tagline { letter-spacing: 0.2em; text-indent: 0.2em; }
}

/* ================================================================
   モーション低減設定：演出せず静かにフェードするだけ
   ================================================================ */
@media (prefers-reduced-motion: reduce) {
    .iwl-play .iwl-tile,
    .iwl-play .iwl-grid,
    .iwl-play .iwl-scrim,
    .iwl-play .iwl-logo,
    .iwl-play .iwl-halo,
    .iwl-play .iwl-shine,
    .iwl-play .iwl-shine i,
    .iwl-play .iwl-tagline,
    .iwl-play .iwl-bar,
    .iwl-play .iwl-bar span {
        animation: none !important;
    }
    .iwl-play .iwl-tile,
    .iwl-play .iwl-scrim,
    .iwl-play .iwl-logo,
    .iwl-play .iwl-tagline { opacity: 1; }
    .iwl-play .iwl-logo    { transform: none; }
    .iwl-play .iwl-halo    { opacity: 0.6; transform: none; }
    .iwl-done { animation: iwl-fade-out 300ms linear both; }
    .iwl-done .iwl-center  { animation: none; }
}

@keyframes iwl-fade-out {
    0%   { opacity: 1; }
    100% { opacity: 0; }
}