/* Global Reset & Base Styles */
*, *:before, *:after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background: #1f1f1f;
    font-family: 'Open Sans', Helvetica, Arial, sans-serif;
    overflow: hidden; /* Prevent body scroll */
    color: #ccc;
}

/* Container */
:root { /* Define CSS variables */
     --expanded-width: 100%;
     --card-margin-percent: 1;
     --el-width: 19%; /* Default, calculated by JS */
     --el-translate-x: 0%;
     --el-origin-x: 50%;
     --el-inner-delay: 0s;
     --el-bg-translate-x: 0%;
     --el-bg-image: none;
}
.cont {
    position: relative;
    overflow: hidden;
    height: 100vh;
    padding: 80px 70px; /* $vertPad $sidePad */
}
.cont__inner {
    position: relative;
    height: 100%;
}


/* Element Base */
.el {
    position: absolute;
    top: 0;
    height: 100%;
    background: #252525;
    box-shadow: 0 10px 35px rgba(0,0,0,0.4);
    border-radius: 8px;
    overflow: visible; /* Allow index to overflow visually */
    will-change: left, transform, width, opacity;

    /* CSS Variable Driven */
    left: var(--el-translate-x, 0%);
    width: var(--el-width, 19%);
    transform: translate3d(0, 0, 0);
    transform-origin: var(--el-origin-x, 50%) 50%;

    /* Transitions (Returning to inactive state) */
    transition: left 0.6s 0.7s,
                width 0.7s,
                opacity 0.6s 0.7s,
                transform 0.6s 0.7s,
                z-index 0s 1.3s;
}
/* Add cursor only when card is interactable */
.el:not(.s--active) {
    cursor: pointer;
}


/* Element Inner structure */
.el__overflow {
    overflow: hidden;
    position: relative;
    height: 100%;
    border-radius: 8px; /* Clip inner content to card bounds */
}
.el__inner {
    overflow: hidden;
    position: relative;
    height: 100%;
    background: #252525;
    /* Initial slide-up animation */
    transition: transform 1s var(--el-inner-delay, 0s);
}
.cont.s--inactive .el__inner {
     transform: translate3d(0, 100%, 0); /* Start below viewport */
}

/* Background Image & Overlay */
.el__bg {
    position: relative; /* For counter-transform */
    width: 100vw; /* Use viewport width for seamless background pan */
    height: 100%;
    will-change: transform;
    /* Initial position set by variable */
    transform: translate3d(var(--el-bg-translate-x, 0%), 0, 0);
    /* Transition for returning FROM active state */
    transition: transform 0.6s 0.7s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.el__bg:before { /* The image itself */
    content: "";
    position: absolute;
    left: 0;
    top: -5%; /* Slightly larger to avoid edge gaps on scale */
    width: 100%;
    height: 110%;
    background-size: cover;
    background-position: center center;
    background-image: var(--el-bg-image, none);
    z-index: 0;
    /* Transition for initial slide-up */
    transition: transform 1s var(--el-inner-delay, 0s);
    transform: translate3d(0, 0, 0) scale(1);
}
.cont.s--inactive .el__bg:before {
     transform: translate3d(0, -100%, 0) scale(1.2); /* Start above and scaled */
}
.el.s--active .el__bg:before {
    /* Scale up when active, delayed */
    transform: scale(1.1);
    transition: transform 0.8s 0.6s ease; /* Match animation timing */
    will-change: transform;
}
.el__bg:after { /* Dimming overlay on hover (inactive cards) */
    content: "";
    z-index: 1;
    position: absolute; left: 0; top: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    will-change: opacity;
}
/* Show overlay on inactive cards when hovering container, hide on the hovered card */
.cont__inner:hover .el:not(.s--active) .el__bg:after {
    opacity: 1;
}
.cont__inner:hover .el:not(.s--active):hover .el__bg:after {
    opacity: 0;
}
/* Ensure overlay is hidden on active card */
.el.s--active .el__bg:after {
    opacity: 0 !important;
    transition: none;
}


/* Preview Content (Heading) */
.el__preview-cont {
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: 0; top: 0; width: 100%; height: 100%;
    transition: opacity 0.5s, transform 0.5s;
    text-align: center;
    padding: 15px;
    will-change: opacity, transform;
    pointer-events: none; /* Doesn't block clicks on card */
}
/* Initial slide-up state */
.cont.s--inactive .el__preview-cont {
    opacity: 0;
    transform: translateY(10px);
}
/* Fade out when a card is active or hovering over another card */
.cont.s--el-active .el__preview-cont,
.cont__inner:hover .el:not(:hover):not(.s--active) .el__preview-cont {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.el__heading {
    color: #fff;
    text-transform: uppercase;
    font-size: 18px;
    font-weight: bold;
    line-height: 1.4;
    word-break: break-word;
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.8);
}


/* Detail Content Area (el__content) */
.el__content {
    z-index: -1; /* Below preview initially */
    position: absolute; /* Needed for absolute positioning of page-nav */
    left: 0; top: 0; width: 100%; height: 100%;
    /* Padding: top left/right bottom(for nav) */
    padding: 40px 60px 80px 60px; /* Ensure bottom padding accommodates fixed nav */
    opacity: 0;
    pointer-events: none; /* Initially not interactive */
    transition: opacity 0.5s; /* Fade out transition when closing */

    /* Enable scrolling for the entire content area */
    overflow-y: auto;
    overflow-x: hidden;

    color: #eee;
    background: rgba(30, 30, 30, 0.92); /* Semi-transparent background */
    backdrop-filter: blur(10px) saturate(120%); /* Glass effect */
    will-change: opacity;

    /* --- HIDE SCROLLBAR for el__content --- */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge (Older) */
}
/* Webkit scrollbar hiding */
.el__content::-webkit-scrollbar {
    display: none;
}
/* Make content visible and interactive when card is active */
.el.s--active .el__content {
    z-index: 4; /* Above index/preview */
    opacity: 1;
    pointer-events: auto;
    /* Delayed fade-in to match animation */
    transition: opacity 0.5s 1.4s;
}



/* Page Display Area within el__content */
.page-display-area {
    /* Holds the blocks for the *current* page */
    min-height: 100px; /* Minimum height */
    /* Removed height: 100% as .el__content is the main scroll container */
    overflow-y: visible; /* Content flows naturally; scrolling handled by parent .el__content */
    overflow-x: hidden;
    /* Add padding at the bottom of the content itself, before the nav */
    padding-bottom: 20px; /* Space between last block and potential nav area start */

    /* --- SCROLLBAR hiding rules (might be redundant if parent handles it) --- */
    /* scrollbar-width: none; */
    /* -ms-overflow-style: none; */
}
/* .page-display-area::-webkit-scrollbar {
    display: none;
} */


/* --- FIXED PAGINATION STYLES --- */
.page-nav {
    position: absolute;   /* 关键：绝对定位 */
    bottom: 15px;         /* 距离父元素底部距离 */
    left: 0;
    width: 100%;
    padding: 10px 60px; /* 调整内边距以匹配内容区域 */
    z-index: 10;
    background: linear-gradient(to top, rgba(30, 30, 30, 0.95) 10%, rgba(30, 30, 30, 0.8) 60%, transparent); /* 背景渐变 */
    pointer-events: none; /* 容器穿透 */
    opacity: 1; /* 默认隐藏 */
    transition: opacity 0.3s ease-in-out; /* 添加渐变效果 */
    display: flex;              /* 启用 Flexbox 布局 */
    justify-content: space-between; /* 水平分布：两端对齐，中间元素均分空间 */
    align-items: center;         /* 垂直居中对齐 */
}



.page-button {
    pointer-events: auto; /* Buttons are clickable */
    background-color: rgba(255, 255, 255, 0.15);
    color: #fff;
    border: none;
    padding: 10px 20px;
    font-size: 1em;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    position: relative; /* Needed for potential pseudo-elements or effects */
    overflow: hidden;    /* Clip potential effects */
    z-index: 1;          /* Above background gradient */
}
.page-button:hover:not(:disabled) {
    transform: translateY(-3px);
    box-shadow: 0 7px 18px rgba(0, 0, 0, 0.3);
    background-color: rgba(255, 255, 255, 0.2);
}
.page-button:active:not(:disabled) {
    transform: scale(0.95) translateY(0);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
}
.page-button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
    background-color: rgba(255, 255, 255, 0.1);
}
.page-info {
    color: #ddd;
    font-size: 0.95em;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
    pointer-events: none; /* Text not clickable */
    z-index: 1;           /* Above background gradient */
}
/* --- End Pagination Styles --- */


/* --- Styles for CONTENT BLOCKS within .page-display-area --- */
.content-block {
    margin-bottom: 2.2em; /* Consistent spacing between blocks */
}
.content-block:last-child {
    margin-bottom: 0; /* No extra space at the very end */
}

/* Basic Typography 调整字体-调整基础font-size,然后调整h1-4的大小*/  
.page-display-area p, .page-display-area ul, .page-display-area ol {
    line-height: 1.85;
    font-size: 1.25em;
    color: #e0e0e0;
}
.page-display-area h1, .page-display-area h2, .page-display-area h3, .page-display-area h4 {
    color: #ffffff;
    font-weight: bold;
    margin-top: 1.6em;
    margin-bottom: 0.8em;
    line-height: 1.3;
    border-bottom: 1px solid #555;
    padding-bottom: 0.4em;
}
.page-display-area h1 { font-size: 2.1em; }
.page-display-area h2 { font-size: 1.7em; }
.page-display-area h3 { font-size: 1.4em; }
.page-display-area h4 { font-size: 1.15em; }
/* Remove top margin if heading is the very first block element */
.content-block:first-child > h1,
.content-block:first-child > h2,
.content-block:first-child > h3,
.content-block:first-child > h4 {
    margin-top: 0;
 }

/* Lists */
.page-display-area ul, .page-display-area ol {
    margin-left: 25px;
    padding-left: 5px;
}
.page-display-area ul li, .page-display-area ol li {
    margin-bottom: 0.6em;
}

/* Blockquotes */
.page-display-area blockquote {
    border-left: 4px solid #00bcd4; /* Cyan */
    margin-left: 0px;
    margin-right: 0px;
    padding: 15px 25px;
    background-color: rgba(0, 188, 212, 0.08); /* Light cyan bg */
    color: #b2ebf2; /* Lighter cyan text */
    font-style: italic;
    border-radius: 0 4px 4px 0;
}
.page-display-area blockquote p:last-child { margin-bottom: 0; }

.page-display-area blockquote {
    border-left: 4px solid #00bcd4; /* Cyan */
    margin-left: 0px;
    margin-right: 0px;
    padding: 15px 25px;
    background-color: rgba(0, 188, 212, 0.08); /* Light cyan bg */
    color: #b2ebf2; /* Lighter cyan text */
    font-style: italic;
    border-radius: 0 4px 4px 0;
}
.page-display-area blockquote p:last-child { margin-bottom: 0; }
/* === 新增：居中 Markdown 表格 === */
.markdown-content table {
  margin-left: auto;  /* 关键 */
  margin-right: auto; /* 关键 */
  /* 可选：给表格添加一些上下外边距，使其与其他块分开 */
  margin-top: 1.5em;
  margin-bottom: 1.5em;
  /* 可选：给表格添加边框或其他样式 */
  border-collapse: collapse; /* 推荐，让单元格边框合并 */
  border: 1px solid #555; /* 示例边框 */
  /* 可选：设置一个最大宽度，防止表格在宽屏上过宽 */
  /* max-width: 90%; */
}
/* 可选：为表头和单元格添加一些内边距和边框 */
.markdown-content th,
.markdown-content td {
  border: 1px solid #444;
  padding: 8px 12px;
  text-align: left; /* 默认左对齐，Markdown表头语法 (|:---| / |:--:| / |---:|) 可覆盖 */
}
.markdown-content th {
  background-color: rgba(255, 255, 255, 0.1); /* 给表头加点背景色 */
  font-weight: bold;
}
.markdown-content p {
  text-align: inherit;
}
/* 专门为 text-right 的情况强制设置 p 为 right */
.markdown-content.text-right p {
  text-align: right; /* 直接指定 right，不再用 inherit */
}

/* Links */
.page-display-area a {
    color: #80deea; /* Light cyan */
    text-decoration: none;
    transition: color 0.3s ease, text-decoration 0.3s ease;
}
.page-display-area a:hover {
    color: #00bcd4; /* Darker cyan */
    text-decoration: underline;
}

/* Inline Code */
.page-display-area :not(pre) > code {
    background-color: rgba(255, 255, 255, 0.1);
    color: #f06292; /* Pinkish */
    padding: 0.2em 0.5em;
    border-radius: 4px;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
    font-size: 0.92em;
}

/* Code Blocks (Prism.js styling applies here) */
.code-container { /* Optional container adjustments */
    /* No specific styles needed unless overriding Prism */
}
.page-display-area pre[class*="language-"] {
    padding: 1.5em;
    margin: 0; /* Remove default margin */
    overflow: auto; /* Enable horizontal scroll WITHIN code block */
    border-radius: 8px;
    background: #2d2d2d; /* Default Prism background */
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    font-size: 0.95em;
    line-height: 1.6;
}
.page-display-area code[class*="language-"],
.page-display-area pre[class*="language-"] {
    color: #ccc; /* Base code color */
    text-shadow: none;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
    /* Allow line wrapping within code blocks if desired */
    /* white-space: pre-wrap; */
    /* word-break: break-all; */
}



.figure-container {
    /* margin: 0; */  /* 替换为上下外边距，并允许左右自动以支持居中类 */
    margin-top: 1.5em;
    margin-bottom: 1.5em;
    margin-left: auto; /* 允许通过 align 类或 auto 居中 */
    margin-right: auto;/* 允许通过 align 类或 auto 居中 */
    background-color: rgba(0, 0, 0, 0.05); /* 保持: 浅灰背景 */
    border-radius: 8px;                  /* 保持: 圆角 */
    overflow: hidden;                    /* 保持: 裁剪溢出 (对圆角有用) */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1); /* 保持: 阴影 */
    transition: transform 0.3s ease-out, box-shadow 0.3s ease-out; /* 改进过渡 */
    max-width: 100%; /* 确保容器本身不会超出父元素 */
    /* text-align: center; */ /* 移除 - 图片居中由 .figure-image 的 margin:auto 实现 */
    clear: both; /* 清除可能存在的浮动 */
}

.figure-container:hover {
    transform: translateY(-4px);             /* 保持: 悬浮效果 - 轻微上移 */
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.2); /* 保持: 悬浮效果 - 阴影加深 */
}

/* 图片本身 <img> */
.figure-image {
    display: block;       /* 保持: 消除底部空隙，使其成为块级 */
    max-width: 100%;    /* 保持: 图片宽度不超过容器 */
    height: auto;       /* 保持: 保持图片纵横比 */
    margin-left: auto;  /* 保持: 若容器比图片宽，则图片水平居中 */
    margin-right: auto; /* 保持: 若容器比图片宽，则图片水平居中 */
    /* border-radius: 8px 8px 0 0; */ /* 可选: 只给图片上半部分加圆角，如果需要的话 */
}

/* 图片标题 <figcaption> */
.caption {
    font-size: 0.9em;   /* 保持: 字号 */
    color: #aaa;       /* 保持: 颜色 */
    font-style: italic; /* 保持: 斜体 */
    padding: 10px 15px 12px 15px; /* 保持: 内边距 */
    background-color: rgba(0,0,0,0.1); /* 保持: 标题背景色 */
    text-align: center; /* 确保标题文字居中 */
    line-height: 1.4;
}

.image-align-default {
    width: 35%;
    margin-left: auto;
    margin-right: auto;
} 

/* 居中对齐 (容器宽度 70%) */
.image-align-center {
    width: 70%;         /* 可以比默认宽一些 */
    margin-left: auto;    /* 水平居中 */
    margin-right: auto;   /* 水平居中 */
}

/* 全宽对齐 */
.image-align-full {
    width: 100%;        /* 容器宽度 100% */
    max-width: 100vw;   /* 可选: 如果希望它突破内容宽度限制 */
    border-radius: 0;     /* 全宽时通常不需要圆角 */
}
.image-align-full .figure-image {
    border-radius: 0;     /* 全宽时通常不需要圆角 */
}


/* 左浮动 (容器宽度 45%) */
.image-align-left {
    float: left;
    width: 45%;
    margin-right: 1.5em; /* 与右侧元素的间距 */
    margin-left: 0;      /* 靠左 */
    margin-bottom: 0.5em;/* 减少下方间距 */
}

/* 右浮动 (容器宽度 45%) */
.image-align-right {
    float: right;
    width: 45%;
    margin-left: 1.5em; /* 与左侧元素的间距 */
    margin-right: 0;     /* 靠右 */
    margin-bottom: 0.5em;/* 减少下方间距 */
}

/* 清除浮动 - 确保浮动容器正确计算高度 */
.figure-container.image-align-left::after,
.figure-container.image-align-right::after {
    content: "";
    display: table;
    clear: both;
}

/* == 响应式调整 (新增/整合) == */
@media (max-width: 768px) {
    /* 在小屏幕上，取消浮动，让所有图片堆叠 */
    .image-align-left,
    .image-align-right {
        float: none;
        width: 100%; /* 默认占满宽度 */
        max-width: 500px; /* 但可以设置一个最大宽度，避免在小屏上过大 */
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 1.5em; /* 恢复标准下边距 */
    }

    /* 小屏幕上，默认和居中图片可以适当加宽 */
    .image-align-default,
    .image-align-center {
        width: 90%; /* 比如改为 90% */
        max-width: 500px; /* 同样设置最大宽度 */
        margin-left: auto;
        margin-right: auto;
    }

    /* 全宽在小屏上保持全宽 */
    .image-align-full {
        width: 100%;
        max-width: 100%; /* 确保不超过屏幕 */
    }
}

/* Bilibili Video Container */
.bilibili-container {
    margin: 0;
    border-radius: 8px;
    overflow: hidden; /* Clip the iframe wrapper */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}
.bilibili-iframe-wrapper { /* Aspect ratio wrapper */
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
    overflow: hidden;
    max-width: 100%;
    background: #000; /* Black background while loading */
}
.bilibili-iframe { /* The iframe itself */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
.video-title { /* Optional title below video */
    font-size: 0.9em;
    color: #aaa;
    text-align: center;
    padding: 10px 15px;
    background-color: rgba(0,0,0,0.1);
}

/* Helper classes */
.error-message {
    color: #ff8a80; /* Light red */
    background-color: rgba(255, 138, 128, 0.1);
    border: 1px dashed #ff8a80;
    padding: 10px 15px;
    border-radius: 4px;
    font-weight: bold;
}
.empty-chapter-message, .empty-page-message {
    text-align: center;
    color: #aaa;
    padding: 60px 20px;
    font-style: italic;
}
/* --- End of Content Block Styles --- */


/* Close Button */
.el__close-btn {
    z-index: -1; /* Initially hidden */
    position: absolute;
    right: 15px; top: 15px;
    width: 40px; height: 40px;
    opacity: 0; pointer-events: none;
    transition: all 0s 0.45s; /* Delay hiding/showing */
    cursor: pointer;
}
.el.s--active .el__close-btn {
    z-index: 15; /* Above fixed nav and content */
    opacity: 1;
    pointer-events: auto;
    transition: opacity 0.3s 1.4s; /* Delayed fade-in */
}
.el__close-btn:before, .el__close-btn:after {
    content: "";
    position: absolute;
    left: 0; top: 50%;
    width: 100%;
    height: 4px;
    margin-top: -2px;
    background: #fff;
    opacity: 0; /* Hidden initially */
    transition: transform 0.3s;
}
/* Show lines when active */
.el.s--active .el__close-btn:before, .el.s--active .el__close-btn:after {
    opacity: 1;
}
/* Animate lines into X shape */
.el__close-btn:before {
    transform: rotate(45deg) translateX(100%);
}
.el.s--active .el__close-btn:before {
    transition: all 0.3s 1.4s cubic-bezier(.72, .09, .32, 1.57); /* Springy animation */
    transform: rotate(45deg) translateX(0);
}
.el__close-btn:after {
    transform: rotate(-45deg) translateX(100%);
}
.el.s--active .el__close-btn:after {
    transition: all 0.3s calc(1.4s + 0.15s) cubic-bezier(.72, .09, .32, 1.57); /* Slightly delayed springy */
    transform: rotate(-45deg) translateX(0);
}


/* Index Number */
.el__index {
    position: absolute;
    left: 0; bottom: -20px; /* Position below the card */
    width: 100%; height: 100%; min-height: 250px; /* Ensure height */
    text-align: center;
    /* Responsive font size */
    font-size: clamp(60px, 18vw, 200px);
    line-height: 0.85;
    font-weight: bold;
    /* Transition for hiding/showing and hover effect */
    transition: transform 0.5s, opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    /* Slightly offset initially */
    transform: translate3d(0, 1vw, 0);
    pointer-events: none; /* Doesn't block hover on card */
    z-index: 3; /* Above card bg, below active content */
}
/* Allow hover interaction on the index number itself when card is inactive */
.el:not(.s--active) .el__index {
    pointer-events: auto;
}
/* Lift index number on hover */
.el:not(.s--active):hover .el__index {
    transform: translate3d(0, 0, 0);
}
/* Hide index when a card is active or hovering another inactive card */
.cont.s--el-active .el__index,
.cont__inner:hover .el:not(:hover):not(.s--active) .el__index {
    opacity: 0;
    transition: transform 0.5s, opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.el__index-back, .el__index-front {
    position: absolute;
    left: 0; bottom: 0; width: 100%;
}
.el__index-back { /* Faded number revealed on hover */
    color: #2f3840;
    opacity: 0;
    transition: opacity 0.25s 0.25s; /* Delayed fade in */
}
.el:not(.s--active):hover .el__index-back {
    transition: opacity 0.25s; /* Quick fade in on hover */
    opacity: 1;
}
.el__index-front { /* Container for the overlay effect */
    /* No specific styles needed here */
}
.el__index-overlay { /* Clipping mask for the reveal effect */
    overflow: hidden;
    position: relative;
    /* Starts slid down, hiding the white text */
    transform: translate3d(0, 100%, 0);
    transition: transform 0.5s 0.1s cubic-bezier(0.6, 0.01, 0, 1); /* Smooth ease-out */
    color: transparent; /* Hide original text */
    user-select: none;
}
.el__index-overlay:before { /* The white text to be revealed */
    content: attr(data-index); /* Get number from data attribute */
    position: absolute;
    left: 0; bottom: 0; width: 100%; height: 100%;
    color: #fff;
    /* Starts slid down (relative to parent) */
    transform: translate3d(0, -100%, 0);
    transition: inherit; /* Use the same transition as the parent overlay */
}
/* Reveal effect on hover */
.el:not(.s--active):hover .el__index-overlay {
    transform: translate3d(0, 0, 0); /* Slide overlay (mask) up */
}
.el:not(.s--active):hover .el__index-overlay:before {
    transform: translate3d(0, 0, 0); /* Slide inner text up simultaneously */
}
/* --- End of Index Number Styles --- */


/* === Dynamic Positioning and Active State === */
/* Fade and scale down inactive cards when one is active */
.cont.s--el-active .el:not(.s--active) {
    transform: scale(0.5);
    opacity: 0;
    transition: transform 0.95s, opacity 0.95s;
    will-change: transform, opacity;
    pointer-events: none; /* Disable interaction */
}
/* Expand the active card */
.el.s--active {
    z-index: 1; /* Bring active card slightly forward (can adjust) */
    left: 0% !important; /* Override inline style */
    width: var(--expanded-width, 100%) !important; /* Override inline style */
    transform: translate3d(0, 0, 0);
    /* Animate IN transitions */
    transition: left 0.6s cubic-bezier(0.645, 0.045, 0.355, 1),
                width 0.7s 0.7s cubic-bezier(0.645, 0.045, 0.355, 1), /* Width animates after left */
                transform 0.6s, /* Transform animates with left */
                z-index 0s; /* Z-index changes instantly */
    will-change: left, width;
    pointer-events: auto; /* Enable interaction */
}
/* Counter-transform background when card expands */
.el.s--active .el__bg {
    transform: translate3d(0%, 0, 0); /* Move background to origin */
    /* Animate IN transition */
    transition: transform 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
}