/* ============================================================
   Cursor Tilt Cards — 光标追踪的 3D 倾斜卡牌
   纯 CSS 实现：光标位置由一张 7x7 的透明感应格反推出来，
   :has() 把格子序号写进 --i / --j，卡片按这两个值算倾斜角。
   卡面用的是根目录那六张卡图，点下面的缩略图换卡。
   ============================================================ */

html, body, div { display: grid }
html { min-height: 100% }

body {
    margin: 0;
    min-height: 100dvh;
    background: #151312;
}

.page {
    min-height: 100dvh;
    grid-template-rows: 1fr auto;
}

.scene {
    /* a bunch of variables you can change */
    --ma: 25deg;   /* maximum tilt angle */
    --oz: 4em;     /* pivot point position along z-axis */
    --dz: 3em;     /* text offset along z-axis */
    --fn: cubic-bezier(.175, .885, .32, 1.275); /* easing */

    /* 卡面：换成真实卡图（--over 是压在图上的渐层，末尾的逗号不能少）。
       只压底部一小段给卡名留出可读性，压太狠会把立绘闷掉。 */
    --back: linear-gradient(135deg, #222, #111);
    --over: linear-gradient(to top,
        rgb(0 0 0 / .78), rgb(0 0 0 / .34) 20%, rgb(0 0 0 / 0) 40%) ,;

    --g: 1.25em;   /* card background grid size */
    --l: 1px;      /* card background grid line thickness */
    overflow: hidden;
    perspective: 65em;
    color: #eee;
}

.scene, .text { place-content: center }
.scene > *, .card::before, .text { grid-area: 1 / 1 }

.grid {
    grid-template-columns: repeat(var(--n), 1fr);
    z-index: 1;
}

.trap { min-width: 0; min-height: 0 }

.card {
    /* 注意要写成 calc()：自定义属性的值里不能出现"光秃秃的括号"，
       CSS 只在 calc() 这类函数内部才接受括号（浏览器凑合能算，但语法不合法） */
    --di: calc(2*var(--i)/(var(--n) - 1) - 1);
    --dj: calc(1 - 2*(var(--j))/(var(--n) - 1));
    container-type: size;
    border: solid 1px rgb(from currentcolor r g b / 8%);
    width: clamp(12.5em, 35vmin, 35em);
    aspect-ratio: 2 / 3;
    border-radius: 1.25em;
    transform-origin: 50% 50% var(--oz);
    transform-style: preserve-3d;
    transform:
        rotatex(calc(var(--dj)*var(--ma)))
        rotatey(calc(var(--di)*var(--ma)));
    box-shadow: 0 30px 60px -12px rgb(0 0 0 / .6);
    background:
        conic-gradient(from 90deg at var(--l) var(--l),
                #0000 25%, rgb(from currentcolor r g b/ 8%) 0%)
            0/ var(--g) var(--g),
        var(--over) var(--back);
    transition: transform .4s var(--fn);
}

/* 卡面上的反光已经去掉：试了两版（跟着光标的镜面光斑、Steam 那种斜向亮带）
   都不够自然，索性只留"卡片朝光标倾斜"这一个本体效果。
   底图上的那层 --over 是压暗底部给卡名留可读性的，不是光效，保留。 */

.text {
    align-content: end;
    padding-bottom: 7cqh;
    translate: 0 0 var(--dz);
    font: 6cqw sans-serif;
    text-align: center;
    text-shadow: 0 2px 12px rgb(0 0 0 / .8);
}

.text h2 {
    margin: 0;
    font-size: 1em;
    letter-spacing: .04em;
}

.text p {
    margin: .35em 0 0;
    font-size: .42em;
    letter-spacing: .16em;
    opacity: .82;
}

/* --- 缩略图：点一下换卡面 --- */
.picker {
    /* 全局 div { display: grid } 会波及到这里，所以显式声明成一行 */
    grid-auto-flow: column;
    justify-content: center;
    align-content: center;
    gap: 10px;
    padding: 0 0 28px;
}

.pick {
    width: 46px;
    height: 64px;
    padding: 0;
    border: 1px solid rgb(238 238 238 / 22%);
    border-radius: 7px;
    background-image: inherit;
    background-size: cover;
    background-position: center;
    opacity: .5;
    cursor: pointer;
    transition: opacity .2s, transform .2s, border-color .2s;
}

.pick:hover { opacity: .85; transform: translateY(-3px) }
.pick.is-active { opacity: 1; border-color: #eee; transform: translateY(-3px) }

/* =========================
   光标位置 → --i / --j
   （7x7 张感应格，格子序号反推出行列）
========================= */
.scene:has(.trap:nth-child(7n + 1):hover) { --i: 0 }
.scene:has(.trap:nth-child(7n + 2):hover) { --i: 1 }
.scene:has(.trap:nth-child(7n + 3):hover) { --i: 2 }
.scene:has(.trap:nth-child(7n + 4):hover) { --i: 3 }
.scene:has(.trap:nth-child(7n + 5):hover) { --i: 4 }
.scene:has(.trap:nth-child(7n + 6):hover) { --i: 5 }
.scene:has(.trap:nth-child(7n + 7):hover) { --i: 6 }
.scene:has(.trap:nth-child(n + 1):hover) { --j: 0 }
.scene:has(.trap:nth-child(n + 8):hover) { --j: 1 }
.scene:has(.trap:nth-child(n + 15):hover) { --j: 2 }
.scene:has(.trap:nth-child(n + 22):hover) { --j: 3 }
.scene:has(.trap:nth-child(n + 29):hover) { --j: 4 }
.scene:has(.trap:nth-child(n + 36):hover) { --j: 5 }
.scene:has(.trap:nth-child(n + 43):hover) { --j: 6 }

@media (max-width: 620px) {
    .scene { --oz: 3em; --dz: 2.2em }
    .pick { width: 38px; height: 54px }
}