/* 1層目：ホバー判定用親ラッパー */
.cab-hover-base {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
}

/* 2層目：スクロール登場アニメーション専用の枠 */
.cab-animated-box {
    display: block;
    width: 100%;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    --cab-distance: 40px;
}

/* 3層目：ホバーのぬるぬる変形専用のインナーラッパー */
.cab-hover-target {
    display: block;
    width: 100%;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.4s ease;
}

/* 初期状態の非表示クラス */
.cab-preload {
    opacity: 0 !important;
}

/* エディタ（管理画面）専用スタイル */
.cab-editor-wrapper {
    position: relative;
    border: 1px dashed #ff4d4d;
    padding: 25px 15px 15px 15px;
    margin: 10px 0;
    background-color: transparent;
    border-radius: 4px;
}

.cab-editor-label {
    position: absolute;
    top: 0;
    right: 0;
    background-color: #ff4d4d;
    color: #ffffff;
    font-size: 11px;
    font-weight: bold;
    padding: 3px 8px;
    border-bottom-left-radius: 4px;
    border-top-right-radius: 2px;
    z-index: 10;
    line-height: 1;
    pointer-events: none;
}

/* ==========================================================================
   ホバー（Hover）アニメーションの挙動定義
   ========================================================================== */
.cab-hover-lift:hover .cab-hover-target,
.cab-hover-lift:hover.cab-editor-wrapper .cab-hover-target {
    transform: translateY(-8px) !important;
}
.cab-hover-scale-up:hover .cab-hover-target,
.cab-hover-scale-up:hover.cab-editor-wrapper .cab-hover-target {
    transform: scale(1.05) !important;
}
.cab-hover-scale-down:hover .cab-hover-target,
.cab-hover-scale-down:hover.cab-editor-wrapper .cab-hover-target {
    transform: scale(0.95) !important;
}
.cab-hover-fade:hover .cab-hover-target,
.cab-hover-fade:hover.cab-editor-wrapper .cab-hover-target {
    opacity: 0.65 !important;
}
.cab-hover-shift-right:hover .cab-hover-target,
.cab-hover-shift-right:hover.cab-editor-wrapper .cab-hover-target {
    transform: translateX(8px) !important;
}

/* ==========================================================================
   アニメーション用 Keyframes 定義
   ========================================================================== */
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes slide-up { from { opacity: 0; transform: translateY(var(--cab-distance)); } to { opacity: 1; transform: translateY(0); } }
@keyframes slide-left { from { opacity: 0; transform: translateX(calc(var(--cab-distance) * -1)); } to { opacity: 1; transform: translateX(0); } }
@keyframes slide-right { from { opacity: 0; transform: translateX(var(--cab-distance)); } to { opacity: 1; transform: translateX(0); } }
@keyframes zoom-in { from { opacity: 0; transform: scale(0.7); } to { opacity: 1; transform: scale(1); } }
@keyframes zoom-out { from { opacity: 0; transform: scale(1.3); } to { opacity: 1; transform: scale(1); } }
@keyframes bounce-in { 0% { opacity: 0; transform: scale(0.3); } 50% { opacity: 1; transform: scale(1.05); } 70% { transform: scale(0.9); } 100% { transform: scale(1); } }
@keyframes pop-in { 0% { opacity: 0; transform: scale(0.8); } 40% { transform: scale(1.1); } 100% { opacity: 1; transform: scale(1); } }
@keyframes rotate-in { from { opacity: 0; transform: rotate(-180deg) scale(0.5); } to { opacity: 1; transform: rotate(0deg) scale(1); } }
@keyframes flip-x { from { opacity: 0; transform: rotateX(90deg); } to { opacity: 1; transform: rotateX(0deg); } }
@keyframes flip-y { from { opacity: 0; transform: rotateY(90deg); } to { opacity: 1; transform: rotateY(0deg); } }
@keyframes blur-in { from { opacity: 0; filter: blur(10px); transform: scale(0.95); } to { opacity: 1; filter: blur(0); transform: scale(1); } }
@keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.04); } 100% { transform: scale(1); } }
@keyframes floating { 0% { transform: translateY(0); } 50% { transform: translateY(calc(var(--cab-distance) * -1)); } 100% { transform: translateY(0); } }
@keyframes flash { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
@keyframes shake { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-4px); } 40%, 80% { transform: translateX(4px); } }