
/* Atelier Juris / V1 Insights Bookshelf V5 */
.atelier-insights-v5{
    position:relative;
    overflow:hidden;
    padding:74px 82px 86px;
    background:
        radial-gradient(circle at 12% 88%, rgba(191,171,137,.16), transparent 18%),
        radial-gradient(circle at 90% 35%, rgba(191,171,137,.12), transparent 24%),
        linear-gradient(180deg,#fbf8f2 0%,#f3eee5 58%,#efe7db 100%);
    border-top:1px solid rgba(164,138,104,.28);
    border-bottom:1px solid rgba(164,138,104,.22);
    isolation:isolate;
}
.atelier-insights-v5__grain{
    position:absolute;
    inset:0;
    pointer-events:none;
    background:
        linear-gradient(115deg,transparent 0 38%,rgba(176,152,119,.08) 38.2%,transparent 38.6% 100%),
        linear-gradient(90deg,rgba(255,255,255,.55),transparent 26%,rgba(255,255,255,.33) 78%,transparent),
        url('/assets/images/cream-texture.jpg');
    opacity:.42;
    mix-blend-mode:multiply;
    z-index:0;
}
.atelier-insights-v5__shell{
    position:relative;
    z-index:1;
    display:grid;
    grid-template-columns:170px minmax(0,1fr);
    gap:22px;
    align-items:end;
    max-width:1380px;
    margin:0 auto;
}
.atelier-insights-v5__intro{
    min-height:270px;
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    padding-top:12px;
}
.atelier-insights-v5__kicker{
    margin:0 0 34px;
    color:#6f6358;
    font-size:12px;
    line-height:1;
    font-weight:500;
    letter-spacing:.22em;
    text-transform:uppercase;
    display:flex;
    align-items:center;
    gap:14px;
}
.atelier-insights-v5__kicker:after{
    content:"";
    width:72px;
    height:1px;
    background:linear-gradient(90deg,#b99564,transparent);
}
.atelier-insights-v5__all{
    width:max-content;
    color:#7b6b5c;
    font-size:13px;
    font-family:Georgia,"Times New Roman",serif;
    border-bottom:1px solid rgba(185,149,100,.55);
    padding-bottom:7px;
    transition:.25s ease;
}
.atelier-insights-v5__all:hover{color:#171512;border-color:#171512;}
.atelier-insights-v5__all span{padding-left:16px;}
.atelier-insights-v5__miniline{
    margin-top:auto;
    width:1px;
    height:88px;
    background:linear-gradient(180deg,rgba(185,149,100,.55),transparent);
}

/* library area */
.atelier-insights-v5__library{
    position:relative;
    min-height:352px;
    padding:12px 58px 38px;
}
.atelier-insights-v5__rail{
    position:relative;
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:24px;
    align-items:end;
    perspective:1500px;
    z-index:2;
}
.atelier-insights-v5__shelf{
    position:absolute;
    left:30px;
    right:30px;
    bottom:8px;
    height:28px;
    border-radius:50%;
    background:
        radial-gradient(ellipse at center,rgba(84,69,52,.26),transparent 58%),
        linear-gradient(90deg,transparent,rgba(255,255,255,.85),transparent);
    filter:blur(2px);
    transform:scaleY(.36);
    z-index:1;
}
.atelier-insights-v5__stone{
    position:absolute;
    bottom:18px;
    width:112px;
    height:92px;
    z-index:3;
    filter:drop-shadow(0 24px 28px rgba(90,72,48,.16));
}
.atelier-insights-v5__stone:before,
.atelier-insights-v5__stone:after{
    content:"";
    position:absolute;
    background:
        linear-gradient(135deg,rgba(255,255,255,.95),rgba(224,215,201,.72) 45%,rgba(158,139,112,.48));
    border:1px solid rgba(185,149,100,.24);
    clip-path:polygon(48% 0,100% 35%,84% 100%,16% 92%,0 34%);
}
.atelier-insights-v5__stone:before{
    inset:8px 18px 0 12px;
    transform:rotate(-8deg);
}
.atelier-insights-v5__stone:after{
    inset:26px 0 8px 54px;
    transform:rotate(18deg) scale(.72);
    opacity:.72;
}
.atelier-insights-v5__stone--left{left:0;}
.atelier-insights-v5__stone--right{right:0;transform:scaleX(-1);}

/* book object */
.atelier-book{
    min-width:0;
    position:relative;
    transform:translateY(calc(var(--book-index) * 2px));
}
.atelier-book__link{display:block;outline:none;}
.atelier-book__object{
    position:relative;
    height:255px;
    transform-style:preserve-3d;
    transform:rotateY(-9deg) rotateX(1.5deg);
    transition:transform .55s cubic-bezier(.22,1,.36,1), filter .45s ease;
    filter:drop-shadow(0 28px 32px rgba(98,75,50,.16));
}
.atelier-book:hover .atelier-book__object,
.atelier-book__link:focus-visible .atelier-book__object{
    transform:translateY(-13px) rotateY(-3deg) rotateX(0deg);
    filter:drop-shadow(0 38px 44px rgba(98,75,50,.24));
}
.atelier-book__cover{
    position:absolute;
    inset:0 0 0 18px;
    overflow:hidden;
    border:1px solid rgba(112,93,72,.22);
    background:#f7f2e9;
    box-shadow:
        inset 16px 0 24px rgba(70,52,33,.11),
        inset -1px 0 0 rgba(255,255,255,.9),
        0 12px 24px rgba(75,56,38,.12);
    transform:translateZ(16px);
}
.atelier-book__cover:before{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(90deg,rgba(0,0,0,.20) 0,rgba(255,255,255,.18) 16%,transparent 36%),
        linear-gradient(155deg,rgba(255,255,255,.55),transparent 34%,rgba(50,41,34,.22) 100%);
    z-index:2;
    pointer-events:none;
}
.atelier-book__cover img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    filter:grayscale(.2) sepia(.08) contrast(.98) brightness(.92);
    opacity:.84;
    transition:.5s ease;
}
.atelier-book:hover .atelier-book__cover img{filter:grayscale(0) sepia(.03) contrast(1.02) brightness(.96);transform:scale(1.03);}
.atelier-book__veil{
    position:absolute;
    inset:0;
    z-index:1;
    background:
        linear-gradient(180deg,rgba(255,253,248,.68),rgba(255,253,248,.16) 44%,rgba(0,0,0,.42) 100%),
        radial-gradient(circle at 80% 10%,rgba(255,255,255,.5),transparent 32%);
}
.atelier-book__spine{
    position:absolute;
    left:0;
    top:0;
    bottom:0;
    width:28px;
    background:
        linear-gradient(90deg,rgba(70,57,46,.30),rgba(255,255,255,.82) 48%,rgba(126,102,76,.22)),
        linear-gradient(180deg,#eee8de,#d9cbb7);
    border:1px solid rgba(112,93,72,.25);
    transform:rotateY(78deg) translateZ(3px);
    transform-origin:right center;
    z-index:4;
}
.atelier-book__spine small{
    position:absolute;
    left:50%;
    top:22px;
    transform:translateX(-50%) rotate(90deg);
    font-family:Georgia,"Times New Roman",serif;
    color:#8a785f;
    font-size:18px;
    letter-spacing:.08em;
}
.atelier-book__pages{
    position:absolute;
    right:-9px;
    top:8px;
    bottom:8px;
    width:16px;
    background:
        repeating-linear-gradient(180deg,#fefbf5 0 3px,#dfd4c2 3px 4px);
    border:1px solid rgba(112,93,72,.18);
    transform:rotateY(86deg) translateZ(9px);
    transform-origin:left center;
    z-index:1;
}
.atelier-book__shadow{
    position:absolute;
    left:4px;
    right:-4px;
    bottom:-18px;
    height:34px;
    border-radius:50%;
    background:radial-gradient(ellipse at center,rgba(73,55,35,.28),transparent 68%);
    transform:translateZ(-24px) rotateX(80deg);
}
.atelier-book__category{
    position:absolute;
    left:28px;
    top:26px;
    z-index:5;
    color:#5e5147;
    font-size:10px;
    font-weight:600;
    letter-spacing:.18em;
    text-transform:uppercase;
}
.atelier-book h3{
    position:absolute;
    left:28px;
    right:22px;
    bottom:46px;
    z-index:5;
    margin:0;
    color:#2b2520;
    font-family:Georgia,"Times New Roman",serif;
    font-size:18px;
    line-height:1.18;
    font-weight:500;
    letter-spacing:.01em;
    text-wrap:balance;
}
.atelier-book time{
    position:absolute;
    left:28px;
    bottom:24px;
    z-index:5;
    color:#8a785f;
    font-size:11px;
    letter-spacing:.14em;
}

/* CSS 3D mini emblems */
.atelier-book__emblem{
    position:absolute;
    right:20px;
    top:20px;
    z-index:6;
    width:46px;
    height:46px;
    border-radius:14px;
    background:
        linear-gradient(145deg,rgba(255,255,255,.96),rgba(207,190,164,.72));
    border:1px solid rgba(149,122,85,.35);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.9),
        0 12px 20px rgba(91,71,45,.18);
}
.atelier-book__emblem:before,
.atelier-book__emblem:after{
    content:"";
    position:absolute;
    inset:11px;
    border:2px solid #a48658;
    opacity:.92;
}
.atelier-book__emblem--scale:before{border-radius:50% 50% 8px 8px;border-top-color:transparent;transform:rotate(45deg);}
.atelier-book__emblem--scale:after{inset:22px 12px 10px;border-width:0 2px 2px 2px;}
.atelier-book__emblem--pillar:before{inset:10px 15px;border-width:0 3px;border-radius:0;}
.atelier-book__emblem--pillar:after{inset:9px 10px 30px;border-width:2px 0;}
.atelier-book__emblem--diamond:before{inset:13px;transform:rotate(45deg);border-radius:3px;}
.atelier-book__emblem--diamond:after{inset:20px;border-radius:50%;background:#a48658;border:0;}
.atelier-book__emblem--shield:before{inset:10px 14px 9px;border-radius:14px 14px 18px 18px;clip-path:polygon(50% 0,100% 18%,86% 78%,50% 100%,14% 78%,0 18%);}
.atelier-book__emblem--shield:after{inset:18px 21px 16px;border-width:0 2px 0 0;}
.atelier-book__emblem--gavel:before{inset:11px 10px 24px;border-radius:3px;transform:rotate(-28deg);}
.atelier-book__emblem--gavel:after{inset:22px 16px 10px;border-width:0 2px 0 0;transform:rotate(-28deg);}

/* individual book tones */
.atelier-book--0 .atelier-book__cover{background:#f7f1e6;}
.atelier-book--1 .atelier-book__cover{background:#efe4d3;}
.atelier-book--2 .atelier-book__cover{background:#d9d2c5;}
.atelier-book--3 .atelier-book__cover{background:#f5f0e8;}
.atelier-book--4 .atelier-book__cover{background:#1e1c18;}
.atelier-book--4 h3,.atelier-book--4 .atelier-book__category{color:#f8f4ec;}
.atelier-book--4 time{color:#c9b08a;}
.atelier-book--4 .atelier-book__veil{background:linear-gradient(180deg,rgba(20,18,16,.10),rgba(0,0,0,.72));}
.atelier-book--4 .atelier-book__cover:before{background:linear-gradient(90deg,rgba(255,255,255,.12),transparent 35%,rgba(0,0,0,.35));}

/* animation */
.atelier-book{
    animation:atelierBookBreath 7s ease-in-out infinite;
    animation-delay:calc(var(--book-index) * .28s);
}
@keyframes atelierBookBreath{
    0%,100%{transform:translateY(0);}
    50%{transform:translateY(-5px);}
}

@media(max-width:1100px){
    .atelier-insights-v5{padding:62px 34px 72px;}
    .atelier-insights-v5__shell{grid-template-columns:1fr;gap:24px;}
    .atelier-insights-v5__intro{min-height:auto;display:block;}
    .atelier-insights-v5__miniline{display:none;}
    .atelier-insights-v5__library{padding:8px 16px 38px;overflow-x:auto;}
    .atelier-insights-v5__rail{width:max-content;grid-template-columns:repeat(5,190px);gap:20px;padding:0 16px;}
    .atelier-book__object{height:245px;}
    .atelier-insights-v5__stone{display:none;}
}
@media(max-width:640px){
    .atelier-insights-v5{padding:54px 18px 64px;}
    .atelier-insights-v5__kicker{font-size:11px;}
    .atelier-insights-v5__library{margin:0 -18px;padding:8px 18px 42px;}
    .atelier-insights-v5__rail{grid-template-columns:repeat(5,168px);gap:18px;}
    .atelier-book__object{height:226px;transform:rotateY(-6deg);}
    .atelier-book h3{font-size:16px;left:23px;right:18px;bottom:42px;}
    .atelier-book__category{left:23px;top:22px;font-size:9px;}
    .atelier-book time{left:23px;}
    .atelier-book__emblem{width:40px;height:40px;border-radius:12px;}
}
