/* =====================================================================
   CELEBRATION OF LIFE 2026 — Animation Layer
   ・①シアターカーテン開幕 ・②タイトル文字スタッガー ・③ゴールドライン描画
   ・⑥CTAシマー ・⑦パーティクル(既存) ・⑧スクロールパララックス ・⑩in-viewフェード
   prefers-reduced-motion を全面尊重。
   ===================================================================== */


/* -----------------------------------------------------------------
   ① Curtain reveal — シアター幕が両側にスーッと開く
   ----------------------------------------------------------------- */
.col-curtain {
    position: fixed;
    top: 0;
    bottom: 0;
    width: 51vw; /* 中央 1vw 重ねて継ぎ目を消す */
    z-index: 99999;
    pointer-events: none;
    will-change: transform;
}
.col-curtain--left {
    left: 0;
    background:
        linear-gradient(95deg,
            #110424 0%,
            #2a0f55 35%,
            #4a1f7a 75%,
            rgba(74, 31, 122, 0.85) 100%);
}
.col-curtain--right {
    right: 0;
    background:
        linear-gradient(265deg,
            #110424 0%,
            #2a0f55 35%,
            #4a1f7a 75%,
            rgba(74, 31, 122, 0.85) 100%);
}
/* 縦の襞模様（劇場の幕の質感） */
.col-curtain::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.04) 0 2px,
        rgba(0, 0, 0, 0.18) 2px 6px,
        rgba(255, 255, 255, 0.04) 6px 10px,
        rgba(0, 0, 0, 0.10) 10px 18px
    );
    mix-blend-mode: overlay;
    pointer-events: none;
}
/* 中央の金縁（開く時に光って見える） */
.col-curtain__edge {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg,
        transparent 0%,
        #f4d97f 12%,
        #d4af37 50%,
        #f4d97f 88%,
        transparent 100%);
    box-shadow:
        0 0 14px rgba(244, 217, 127, 0.7),
        0 0 28px rgba(212, 175, 55, 0.4);
}
.col-curtain--left .col-curtain__edge { right: 0; }
.col-curtain--right .col-curtain__edge { left: 0; }

.col-curtain--left {
    animation: col-curtain-out-left 1.25s 0.15s cubic-bezier(.7,0,.18,1) forwards;
}
.col-curtain--right {
    animation: col-curtain-out-right 1.25s 0.15s cubic-bezier(.7,0,.18,1) forwards;
}
@keyframes col-curtain-out-left {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-101%); }
}
@keyframes col-curtain-out-right {
    0%   { transform: translateX(0); }
    100% { transform: translateX(101%); }
}


/* -----------------------------------------------------------------
   ② Title stagger — 文字が順番にふわっと立ち上がる
   ----------------------------------------------------------------- */
[data-stagger] > span {
    display: inline-block;
    opacity: 0;
    transform: translateY(0.55em);
    animation: col-stagger-in 0.7s cubic-bezier(.2,.8,.2,1) forwards;
    animation-delay: calc(var(--i, 0) * 0.045s + var(--stagger-start, 1.25s));
}
/* 親が background-clip:text のグラデ文字色の場合、子spanは自前で塗りを再現する必要あり */
.col-hero__title [data-stagger] > span {
    background: linear-gradient(180deg, #f4d97f 0%, #d4af37 55%, #a07a18 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
@keyframes col-stagger-in {
    to { opacity: 1; transform: translateY(0); }
}


/* -----------------------------------------------------------------
   汎用：ヒーロー要素のフェードアップ（スタッガーにならない部品用）
   ----------------------------------------------------------------- */
.col-hero__brand,
.col-encore,
.col-hero__title small,
.col-hero__sub,
.col-hero__date,
.col-hero__venue,
.col-hero__cta {
    opacity: 0;
    transform: translateY(22px);
    animation: col-fade-up 0.95s cubic-bezier(.2,.8,.2,1) forwards;
}
.col-hero__brand       { animation-delay: 1.30s; }
.col-encore            { animation-delay: 1.45s; }
.col-hero__title small { animation-delay: 2.10s; }
.col-hero__sub         { animation-delay: 2.20s; }
.col-hero__date        { animation-delay: 2.40s; }
.col-hero__venue       { animation-delay: 2.60s; }
.col-hero__cta         { animation-delay: 2.80s; }

@keyframes col-fade-up {
    to { opacity: 1; transform: translateY(0); }
}

/* メインの２人 — 主役らしく登場（少しスケール込み）／デスクトップのみ */
@media (min-width: 821px) {
    .col-hero__side {
        opacity: 0;
        transform: translateY(38px) scale(0.96);
        animation: col-fade-up-scale 1.1s cubic-bezier(.2,.8,.2,1) forwards;
        animation-delay: 1.55s;
    }
    .col-hero__side--right { animation-delay: 1.70s; }
}
@keyframes col-fade-up-scale {
    to { opacity: 1; transform: translateY(0) scale(1); }
}
/* モバイルでは背景アンビエント扱いなので、テーマ側の opacity:0.22 をそのまま尊重し
   ふわっと出現するだけにする */
@media (max-width: 950px) {
    .col-hero__side {
        /* デフォルトは最終状態（0.6）。アニメーションが実行されない環境でも
           フェイルセーフで表示される */
        opacity: 0.6;
        animation: col-fade-side-mobile 1.4s ease-out 1.0s both;
    }
    @keyframes col-fade-side-mobile {
        from { opacity: 0; }
        to   { opacity: 0.6; }
    }
}

/* ヒーロー背景写真 — 透明度0からじんわり */
.col-hero__photo {
    opacity: 0;
    animation: col-fade-photo 1.6s ease-out forwards;
    animation-delay: 1.10s;
}
@keyframes col-fade-photo {
    to { opacity: 0.32; }
}


/* -----------------------------------------------------------------
   ③ Gold rule draw — 上下の金線が中央から左右に伸びる
   ----------------------------------------------------------------- */
.col-hero__rule {
    transform: scaleX(0);
    transform-origin: center;
    animation: col-rule-draw 1.0s cubic-bezier(.2,.8,.2,1) forwards;
    animation-delay: 1.85s;
}
.col-hero__rule:nth-of-type(2) {
    animation-delay: 2.05s;
}
@keyframes col-rule-draw {
    to { transform: scaleX(1); }
}


/* -----------------------------------------------------------------
   ⑥ CTA shimmer — プライマリーボタン上を金色の光が流れる
   ----------------------------------------------------------------- */
.col-btn--primary {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.col-btn--primary::after {
    content: "";
    position: absolute;
    top: 0;
    left: -130%;
    width: 60%;
    height: 100%;
    background: linear-gradient(110deg,
        transparent 0%,
        rgba(255, 255, 255, 0.10) 38%,
        rgba(255, 255, 255, 0.55) 50%,
        rgba(244, 217, 127, 0.45) 55%,
        rgba(255, 255, 255, 0.10) 62%,
        transparent 100%);
    transform: skewX(-22deg);
    pointer-events: none;
    animation: col-cta-shimmer 4.2s ease-in-out 3.2s infinite;
    z-index: -1;
}
@keyframes col-cta-shimmer {
    0%   { left: -130%; }
    40%  { left: 140%; }
    100% { left: 140%; }
}


/* -----------------------------------------------------------------
   ⑩ In-view fade-up — スクロールで視界に入った時のフェード
   ----------------------------------------------------------------- */
.col-reveal {
    opacity: 0;
    transform: translateY(38px);
    transition:
        opacity 0.95s cubic-bezier(.2,.8,.2,1),
        transform 0.95s cubic-bezier(.2,.8,.2,1);
    will-change: opacity, transform;
}
.col-reveal.is-revealed {
    opacity: 1;
    transform: translateY(0);
}
/* 連続要素の段差 — 上から順にちょっとずつ遅らせる */
.col-reveal[data-reveal-delay="1"] { transition-delay: 0.10s; }
.col-reveal[data-reveal-delay="2"] { transition-delay: 0.20s; }
.col-reveal[data-reveal-delay="3"] { transition-delay: 0.30s; }


/* -----------------------------------------------------------------
   ⑧ Parallax — JS から transform を直接書き込むため
   ここではwill-changeのみ予約
   ----------------------------------------------------------------- */
[data-parallax] {
    will-change: transform;
}


/* -----------------------------------------------------------------
   prefers-reduced-motion: reduce — 一切の動きを止める
   ----------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .col-curtain { display: none !important; }

    [data-stagger] > span,
    .col-hero__brand,
    .col-encore,
    .col-hero__title small,
    .col-hero__sub,
    .col-hero__date,
    .col-hero__venue,
    .col-hero__cta,
    .col-hero__side,
    .col-hero__rule {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }
    .col-hero__photo {
        opacity: 0.32 !important;
        animation: none !important;
    }
    .col-btn--primary::after { display: none !important; }
    .col-reveal {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    [data-parallax] {
        transform: none !important;
    }
}

/* -----------------------------------------------------------------
   低スペック端末 — JS で <html class="is-low-spec"> が付与されたら、
   reduced-motion と同等の抑制ルールを適用してパフォーマンスを確保
   ----------------------------------------------------------------- */
html.is-low-spec .col-curtain { display: none !important; }

html.is-low-spec [data-stagger] > span,
html.is-low-spec .col-hero__brand,
html.is-low-spec .col-encore,
html.is-low-spec .col-hero__title small,
html.is-low-spec .col-hero__sub,
html.is-low-spec .col-hero__date,
html.is-low-spec .col-hero__venue,
html.is-low-spec .col-hero__cta,
html.is-low-spec .col-hero__rule {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
}
/* ローレンス・プリシラの側面写真は、デスクトップでは 100% 表示、
   モバイル（≤950px）では背景アンビエント 0.6 を維持してテキスト可読性を確保 */
html.is-low-spec .col-hero__side {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
}
@media (max-width: 950px) {
    html.is-low-spec .col-hero__side {
        opacity: 0.6 !important;
    }
}
html.is-low-spec .col-hero__photo {
    opacity: 0.32 !important;
    animation: none !important;
}
html.is-low-spec .col-btn--primary::after { display: none !important; }
html.is-low-spec .col-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}
html.is-low-spec [data-parallax] {
    transform: none !important;
}
/* 装飾キャラの float アニメも停止（CPU 節約） */
html.is-low-spec .col-decor {
    animation: none !important;
}
/* particlesJS の canvas は JS で初期化スキップ済み。残骸 div は非表示に */
html.is-low-spec .qt-particles {
    display: none !important;
}