/* CHROMATIC PORTAL V3 — HOLOGRAPHIC COLLECTION INDEX */

/* Preserve the approved right-hand sculpture and V2 layout. */
.chromatic-portal .chromatic-index {
    gap:11px;
    padding:28px 17px 23px 25px;
}
.chromatic-portal .chromatic-index-caption {
    padding:0 12px 12px 3px;
}
.chromatic-portal .chromatic-index-bottom {
    padding:13px 12px 0 3px;
}

/* Sculpted panel geometry */
.chromatic-portal .chromatic-holo-card {
    --holo-glow:var(--cp-accent);
    position:relative;
    isolation:isolate;
    flex:1 1 0;
    min-height:82px;
    display:grid;
    grid-template-columns:36px minmax(0,1fr) 68px 21px;
    align-items:center;
    gap:10px;
    padding:10px 17px 10px 14px;
    overflow:hidden;
    border:0;
    background:
        linear-gradient(125deg,rgba(188,168,220,.095),transparent 42%),
        linear-gradient(105deg,rgba(26,31,57,.94),rgba(11,17,37,.88));
    clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,22px 100%,0 calc(100% - 22px));
    color:#e7dfec;
    box-shadow:none;
    transform:translateX(0);
    transition:transform .35s ease,background .35s ease,color .35s ease;
}
.chromatic-portal .chromatic-holo-card::before {
    content:"";
    position:absolute;
    z-index:-1;
    inset:0;
    padding:1px;
    background:linear-gradient(120deg,rgba(225,196,153,.62),rgba(137,129,207,.13) 42%,rgba(117,223,224,.42) 80%,rgba(225,196,153,.28));
    clip-path:inherit;
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;
    mask-composite:exclude;
    pointer-events:none;
}
.chromatic-portal .chromatic-holo-card::after {
    content:"";
    position:absolute;
    z-index:-1;
    inset:0;
    background:linear-gradient(100deg,color-mix(in srgb,var(--holo-glow) 24%,transparent),transparent 70%);
    opacity:0;
    transition:opacity .35s;
}
.chromatic-portal .chromatic-holo-card:hover,
.chromatic-portal .chromatic-holo-card:focus-visible,
.chromatic-portal .chromatic-holo-card.is-active {
    padding:10px 17px 10px 14px;
    transform:translateX(7px);
    color:#fff0df;
    background:
        linear-gradient(115deg,color-mix(in srgb,var(--holo-glow) 15%,#22213e),rgba(12,16,34,.95));
    outline:none;
}
.chromatic-portal .chromatic-holo-card:hover::after,
.chromatic-portal .chromatic-holo-card:focus-visible::after,
.chromatic-portal .chromatic-holo-card.is-active::after {
    opacity:1;
}
.chromatic-holo-serial {
    display:flex;
    flex-direction:column;
    gap:8px;
    color:#c5a987;
    font-size:11px;
    letter-spacing:.1em;
    font-weight:700;
}
.chromatic-holo-serial-line {
    width:16px;
    height:1px;
    background:rgba(215,181,140,.5);
}
.chromatic-holo-content {
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:6px;
}
.chromatic-portal .chromatic-holo-content>strong {
    display:block;
    font:400 clamp(30px,2.6vw,43px)/1 "Cormorant Garamond",Georgia,serif;
    letter-spacing:-.035em;
    overflow-wrap:anywhere;
}
.chromatic-holo-subtitle {
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:8px;
    font-size:8px;
    letter-spacing:.14em;
    color:#979db6;
}
.chromatic-holo-subtitle>span {
    color:#c6a57d;
    font-size:8px;
}
.chromatic-holo-count {
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:3px;
    color:#e6c49a;
    white-space:nowrap;
}
.chromatic-holo-count>strong {
    font:400 clamp(25px,2.3vw,35px)/1 "Cormorant Garamond",Georgia,serif;
    font-variant-numeric:tabular-nums;
}
.chromatic-holo-count>small {
    font-size:8px;
    letter-spacing:.12em;
    color:#a5abc1;
}
.chromatic-holo-arrow {
    align-self:center;
    color:#c6a17c;
    font-size:21px;
    opacity:.6;
    transform:translate(-4px,4px);
    transition:transform .3s,opacity .3s;
}
.chromatic-holo-card:hover .chromatic-holo-arrow,
.chromatic-holo-card:focus-visible .chromatic-holo-arrow,
.chromatic-holo-card.is-active .chromatic-holo-arrow {
    color:var(--cp-accent);
    opacity:1;
    transform:translate(0,0);
}
.chromatic-holo-sheen {
    position:absolute;
    z-index:0;
    top:-60%;
    left:-35%;
    width:22%;
    height:220%;
    transform:rotate(25deg) translateX(-500%);
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.14),transparent);
    pointer-events:none;
}
.chromatic-holo-card:hover .chromatic-holo-sheen,
.chromatic-holo-card:focus-visible .chromatic-holo-sheen {
    animation:chromatic-holo-sweep .85s ease-out both;
}
@keyframes chromatic-holo-sweep {
    from {transform:rotate(25deg) translateX(-500%)}
    to {transform:rotate(25deg) translateX(900%)}
}

/* Distinct accent identity for each collection */
.chromatic-holo-card:nth-of-type(1) {--holo-glow:#ba96f2}
.chromatic-holo-card:nth-of-type(2) {--holo-glow:#e2b67b}
.chromatic-holo-card:nth-of-type(3) {--holo-glow:#7bd9e1}
.chromatic-holo-card:nth-of-type(4) {--holo-glow:#e99ab3}
.chromatic-holo-card:nth-of-type(5) {--holo-glow:#a9d6ac}
.chromatic-holo-card:nth-of-type(6) {--holo-glow:#d8a3ee}

/* Mobile / tablet */
@media(max-width:1150px) {
    .chromatic-portal .chromatic-holo-card {
        grid-template-columns:30px minmax(0,1fr) 60px 20px;
    }
    .chromatic-portal .chromatic-holo-content>strong {
        font-size:clamp(28px,3vw,39px);
    }
}
@media(max-width:650px) {
    .chromatic-portal .chromatic-index {
        gap:9px;
        padding:20px 12px;
    }
    .chromatic-portal .chromatic-holo-card {
        min-height:88px;
        grid-template-columns:24px minmax(0,1fr) 50px 17px;
        gap:7px;
        padding:11px 12px 11px 10px;
    }
    .chromatic-portal .chromatic-holo-card:hover,
    .chromatic-portal .chromatic-holo-card:focus-visible,
    .chromatic-portal .chromatic-holo-card.is-active {
        padding:11px 12px 11px 10px;
        transform:translateX(3px);
    }
    .chromatic-portal .chromatic-holo-content>strong {
        font-size:clamp(26px,7vw,37px);
    }
    .chromatic-holo-subtitle {
        font-size:7px;
        letter-spacing:.05em;
        gap:4px;
    }
    .chromatic-holo-count>strong {font-size:26px}
    .chromatic-holo-count>small {font-size:7px}
    .chromatic-holo-arrow {font-size:17px}
}
@media(prefers-reduced-motion:reduce) {
    .chromatic-holo-card,
    .chromatic-holo-card::after,
    .chromatic-holo-arrow {
        transition:none!important;
    }
    .chromatic-holo-sheen {animation:none!important}
}


/* V3.1 — Mobile touch activation */
.chromatic-holo-card.is-touch-animating .chromatic-holo-sheen {
    animation:chromatic-holo-sweep .85s ease-out both;
}
@media(hover:none), (pointer:coarse) {
    .chromatic-holo-card.is-active {
        transform:translateX(3px);
    }
    .chromatic-holo-card.is-active .chromatic-holo-sheen {
        animation:chromatic-holo-sweep .85s ease-out both;
    }
}
@media(prefers-reduced-motion:reduce) {
    .chromatic-holo-card.is-touch-animating .chromatic-holo-sheen,
    .chromatic-holo-card.is-active .chromatic-holo-sheen {
        animation:none!important;
    }
}