/* =========================================================
   Creatte Motion — 全体のアニメーション・スクロールアクション
   既存のポップデザインはそのままに「動き」だけを足す
   ========================================================= */

html { scroll-behavior: smooth; }
html, body { overflow-x: clip; } /* 回転した帯・浮遊アイコンで横スクロールが出ないように */
[id] { scroll-margin-top: 96px; } /* 固定ヘッダーに見出しが隠れないように */

/* ---------- スクロール進捗バー ---------- */
.cr-progress {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 5px;
    z-index: 100;
    background: linear-gradient(90deg, #3B82F6, #EC4899, #F97316, #FFD93D);
    transform-origin: 0 50%;
    transform: scaleX(0);
    pointer-events: none;
}

/* ---------- ヘッダー：スクロールで影＆コンパクト ---------- */
header.sticky { transition: padding .3s ease, box-shadow .3s ease, background-color .3s ease; }
header.sticky.is-scrolled {
    padding-top: .4rem;
    padding-bottom: .4rem;
    box-shadow: 0 6px 0 rgba(0, 0, 0, .9);
}
header.sticky.is-scrolled .custom-logo-link img { max-height: 40px; transition: max-height .3s ease; }

/* ---------- スクロールで出現 ---------- */
@keyframes cr-up    { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }
@keyframes cr-left  { from { opacity: 0; transform: translateX(-50px); } to { opacity: 1; transform: none; } }
@keyframes cr-right { from { opacity: 0; transform: translateX(50px); } to { opacity: 1; transform: none; } }
@keyframes cr-zoom  { from { opacity: 0; transform: scale(.88); } to { opacity: 1; transform: none; } }
@keyframes cr-pop {
    0%   { opacity: 0; transform: translateY(36px) scale(.9) rotate(-2deg); }
    60%  { opacity: 1; transform: translateY(-6px) scale(1.02) rotate(.5deg); }
    100% { opacity: 1; transform: none; }
}

.cr-reveal { opacity: 0; }
.cr-reveal.is-in {
    animation: var(--cr-anim, cr-up) .8s cubic-bezier(.2, .8, .2, 1) var(--cr-delay, 0ms) both;
}

/* ---------- ヒーローの登場 ---------- */
.cr-hero > * { animation: cr-pop .9s cubic-bezier(.2, .8, .2, 1) both; }
.cr-hero > *:nth-child(1) { animation-delay: .05s; }
.cr-hero > *:nth-child(2) { animation-delay: .2s; }
.cr-hero > *:nth-child(3) { animation-delay: .38s; }
.cr-hero > *:nth-child(4) { animation-delay: .55s; }
.cr-hero > *:nth-child(5) { animation-delay: .7s; }

/* ヒーロー周りに浮かぶアイコン */
.cr-floaters { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.cr-floater {
    position: absolute;
    font-size: clamp(1.6rem, 3.5vw, 3rem);
    filter: drop-shadow(3px 3px 0 rgba(0, 0, 0, .85));
    will-change: transform;
}
.cr-floater > span { display: inline-block; animation: cr-bob 4.5s ease-in-out infinite; }
.cr-floater:nth-child(2) > span { animation-duration: 5.2s; animation-delay: -1s; }
.cr-floater:nth-child(3) > span { animation-duration: 3.8s; animation-delay: -2s; }
.cr-floater:nth-child(4) > span { animation-duration: 6s;   animation-delay: -.5s; }
.cr-floater:nth-child(5) > span { animation-duration: 4.2s; animation-delay: -3s; }
.cr-floater:nth-child(6) > span { animation-duration: 5.6s; animation-delay: -1.5s; }
@keyframes cr-bob {
    0%, 100% { transform: translateY(0) rotate(-6deg); }
    50%      { transform: translateY(-14px) rotate(6deg); }
}

/* ---------- 流れるテキスト帯 ---------- */
.cr-marquee {
    overflow: hidden;
    border-top: 4px solid #000;
    border-bottom: 4px solid #000;
    background: #FFD93D;
    transform: rotate(-1.5deg);
    width: calc(100vw + 40px);
    margin: 0 0 5rem calc(50% - 50vw - 20px);
    box-shadow: 0 6px 0 #000;
}
.cr-marquee-track {
    display: flex;
    width: max-content;
    animation: cr-marquee 28s linear infinite;
}
.cr-marquee-track span {
    padding: .7rem 1.5rem;
    font-weight: 900;
    font-size: clamp(1rem, 2.4vw, 1.5rem);
    white-space: nowrap;
}
.cr-marquee:hover .cr-marquee-track { animation-play-state: paused; }
@keyframes cr-marquee { to { transform: translateX(-50%); } }

/* ---------- 画像・カードのちょっとした動き ---------- */
.pop-card img,
.pop-card-custom img { transition: transform .4s cubic-bezier(.175, .885, .32, 1.275); }
.pop-card:hover img:not(.object-cover) { transform: scale(1.06) rotate(-2deg); }

.btn-pop { position: relative; overflow: hidden; }
.btn-pop::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, .55) 50%, transparent 70%);
    transform: translateX(-120%);
    pointer-events: none;
}
.btn-pop:hover::after { transform: translateX(120%); transition: transform .6s ease; }

/* ---------- トップへ戻るボタン ---------- */
.cr-totop {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 60;
    width: 56px;
    height: 56px;
    border-radius: 999px;
    border: 3px solid #000;
    background: #fff;
    box-shadow: 4px 4px 0 #000;
    font-size: 1.4rem;
    font-weight: 900;
    cursor: pointer;
    opacity: 0;
    transform: translateY(20px) scale(.8);
    pointer-events: none;
    transition: opacity .3s ease, transform .3s cubic-bezier(.175, .885, .32, 1.275), box-shadow .15s ease;
}
.cr-totop.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.cr-totop:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 #000; }
.cr-totop:focus-visible { outline: 3px solid #3B82F6; outline-offset: 3px; }

/* ---------- 共通ポップアップ（実績・ゲーム） ---------- */
.cr-modal {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    visibility: hidden;
    opacity: 0;
    transition: opacity .25s ease, visibility 0s linear .25s;
}
.cr-modal.is-open { visibility: visible; opacity: 1; transition: opacity .25s ease; }
.cr-modal-backdrop { position: absolute; inset: 0; background: rgba(17, 17, 17, .65); backdrop-filter: blur(3px); }
.cr-modal-dialog {
    position: relative;
    width: min(760px, 100%);
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    background: #fff;
    border: 4px solid #000;
    border-radius: 32px;
    box-shadow: 10px 10px 0 #000;
    transform: translateY(40px) scale(.94);
    transition: transform .35s cubic-bezier(.175, .885, .32, 1.275);
}
.cr-modal.is-open .cr-modal-dialog { transform: none; }
.cr-modal-close {
    position: sticky;
    top: 12px;
    float: right;
    margin: 12px 12px 0 0;
    z-index: 2;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    border: 3px solid #000;
    background: #FFD93D;
    font-size: 1.3rem;
    font-weight: 900;
    line-height: 1;
    cursor: pointer;
    box-shadow: 3px 3px 0 #000;
    transition: transform .2s ease;
}
.cr-modal-close:hover { transform: rotate(90deg); }
.cr-modal-close:focus-visible { outline: 3px solid #3B82F6; outline-offset: 2px; }
body.cr-modal-open { overflow: hidden; }

/* ---------- 動きを減らす設定の方には止める ---------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .cr-reveal { opacity: 1 !important; }
    .cr-reveal.is-in,
    .cr-hero > *,
    .cr-floater > span,
    .cr-marquee-track { animation: none !important; }
    .cr-modal-dialog,
    .btn-pop::after { transition: none !important; }
}