/* Museum page (/portfolio/): numbers widget, then one section per kind of work */

.museum{
    padding-bottom: 112px;
}

.museum-inner{
    max-width: 1490px;
    container: museum / inline-size;
}

/* The fixed bar at the bottom must not hide the footer */
footer{
    margin-bottom: 44px;
}

.museum a:focus-visible,
.museum button:focus-visible{
    outline: 2px solid #55f5ff;
    outline-offset: 2px;
}

.museum-head{
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.museum-head #title-description{
    margin: 0;
}

/* Numbers widget */
.museum-numbers{
    margin-top: 30px;
}

.fx{
    position: relative;
    max-width: 1040px;
    height: 132px;
    border-radius: 16px;
    background: #08090b;
    border: 1px solid #1d2329;
}

.fx canvas{
    position: absolute;
    inset: -13px;
    width: calc(100% + 26px);
    height: calc(100% + 26px);
    pointer-events: none;
}

.fx .row{
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    padding: 0 12px;
    pointer-events: none;
}

.fx .st{
    flex: 1 1 0;
    min-width: 0;
    text-align: center;
    position: relative;
}

.fx .st b{
    position: relative;
    z-index: 1;
    display: block;
    width: fit-content;
    margin: 0 auto;
    font-size: 26px;
    line-height: 32px;
    font-weight: 300;
    color: #8d97a1;
    letter-spacing: -.3px;
    white-space: nowrap;
    will-change: transform;
}

.fx .st span{
    position: relative;
    z-index: 1;
    display: block;
    width: fit-content;
    margin: 4px auto 0;
    font-size: 12px;
    color: #5f6a74;
    line-height: 16px;
    white-space: nowrap;
}

.fx .st.bc b{
    font-size: 16px;
    font-weight: 500;
    letter-spacing: .2px;
}

.fx .st.bc .lr{
    position: absolute;
    top: calc(50% + 3px);
    width: 19px;
    height: 33px;
    transform: translateY(-50%);
    opacity: .5;
    z-index: 0;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.fx .st.bc .lr.l{
    right: 100%;
    margin-right: 12px;
    background: linear-gradient(170deg, #8f6bff, #c357e0);
    -webkit-mask-image: url("../museum/laurel-l.5d9527b1ec3a.png");
    mask-image: url("../museum/laurel-l.5d9527b1ec3a.png");
}

.fx .st.bc .lr.r{
    left: 100%;
    margin-left: 12px;
    background: linear-gradient(190deg, #d95ac2, #ff7a6b);
    -webkit-mask-image: url("../museum/laurel-r.e716823ee538.png");
    mask-image: url("../museum/laurel-r.e716823ee538.png");
}

/* On the page width, not the screen's: the left menu takes room up to 840px.
   Narrower: 3 per row, then 2 with the best customer on its own row */
@container museum (max-width: 680px){
    .fx{
        height: auto;
    }
    .fx .row{
        position: relative;
        flex-wrap: wrap;
        gap: 18px 12px;
        padding: 20px;
    }
    .fx .st{
        flex: 1 1 28%;
    }
}

@container museum (max-width: 440px){
    .fx .st{
        flex: 1 1 38%;
    }
    .fx .st.bc{
        flex: 1 1 100%;
        padding: 14px 0;
    }
}

/* The coloured line: hovering it lights the whole numbers widget */
.fxcr{
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 500;
    background: linear-gradient(90deg, #8f6bff, #c357e0, #ff7a6b);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    cursor: default;
    transition: filter .6s ease, letter-spacing .6s ease;
}

.fxcr.in{
    display: inline-block;
    max-width: 100%;
    letter-spacing: .1em;
}

.fxcr:hover{
    filter: drop-shadow(0 0 10px rgba(195, 87, 224, .55)) brightness(1.3);
}

.fxcr.in:hover{
    letter-spacing: .12em;
}

/* Sections */
.msec{
    margin-top: 56px;
    scroll-margin-top: 16px;
}

.duo{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 28px;
    align-items: stretch;
    margin-top: 67.6px;
}

.duo .msec{
    display: flex;
    flex-direction: column;
    margin-top: 0;
}

.duo .sep{
    flex: 1;
    display: flex;
    align-items: flex-end;
    min-height: 0;
}

.duo .sep:after{
    content: "";
    width: 100%;
    height: 2px;
    background: radial-gradient(circle at 1px 1px, #2a323a .9px, transparent 1.2px) 0 0/8px 2px;
}

.ph{
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px 28px;
    margin-bottom: 14px;
}

.ph-text{
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-width: 640px;
}

.ph-meta{
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #8a97a3;
}

.ph-dot{
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex: none;
}

.ph h2{
    margin: 0;
    font-size: 22px;
    line-height: 1.25;
    font-weight: 600;
    letter-spacing: 0.3px;
}

.ph p{
    margin: 0;
    font-size: 14px;
    line-height: 22px;
    color: #b8c0c8;
}

.museum .seeall{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 44px;
    padding: 0 20px;
    border: 1px solid color-mix(in srgb, var(--c, #8f6bff) 55%, #1d2329);
    border-radius: 25px;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.4px;
    white-space: nowrap;
    text-decoration: none;
    transition: border-color .18s ease, background .18s ease;
}

.museum .seeall svg{
    color: var(--c, #8f6bff);
}

.museum .seeall:hover{
    background: color-mix(in srgb, var(--c, #8f6bff) 14%, transparent);
    border-color: var(--c, #8f6bff);
}

/* Hourglass of the startings for sale */
.hgrow{
    display: flex;
    align-items: center;
    gap: 8px;
}

.hg{
    flex: none;
    overflow: visible;
}

.hgf{
    transform-origin: 12px 12px;
    animation: hgr 6s ease-in-out infinite;
}

.hs1{ animation: hgt 6s ease-in-out infinite; }
.hs2{ animation: hgb 6s ease-in-out infinite; }
.hst{ animation: hgd 6s linear infinite; }

@keyframes hgt{ 0%{ transform: translateY(0); } 84%, 100%{ transform: translateY(9px); } }
@keyframes hgb{ 0%{ transform: translateY(9px); } 84%, 100%{ transform: translateY(0); } }
@keyframes hgr{ 0%, 87%{ transform: rotate(0); } 100%{ transform: rotate(180deg); } }
@keyframes hgd{ 0%{ stroke-dashoffset: 0; opacity: 1; } 83%{ stroke-dashoffset: -12; opacity: 1; } 85%, 100%{ stroke-dashoffset: -12; opacity: 0; } }

/* Tiles */
.t{
    position: relative;
    display: block;
    background: #2b3036;
    overflow: hidden;
    border-radius: 4px;
    color: #fff;
    text-decoration: none;
}

.t img{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.t .cap{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 34px 14px 12px;
    background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .78));
    opacity: 0;
    transition: opacity .18s ease;
}

.t:hover .cap,
.t:focus-visible .cap{
    opacity: 1;
}

.t:hover,
.t:focus-visible{
    outline: 1px solid rgba(255, 255, 255, .22);
    outline-offset: -1px;
}

@media (hover: none){
    .t .cap{
        opacity: 1;
    }
}

.cap-t{
    display: block;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.t.big .cap-t,
.t.hl .cap-t{
    font-size: 16px;
}

.t-play{
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(12, 12, 13, .7);
    display: flex;
    align-items: center;
    justify-content: center;
}

.t-play svg{
    width: 12px;
    height: 12px;
}

.mz5 .t-play,
.mzs .t:not(.hl) .t-play{
    top: 6px;
    right: 6px;
    width: 22px;
    height: 22px;
}

.mz5 .t-play svg,
.mzs .t:not(.hl) .t-play svg{
    width: 10px;
    height: 10px;
}

.t-sale{
    position: absolute;
    top: 8px;
    left: 8px;
    padding: 3px 9px;
    border-radius: 10px;
    background: rgba(12, 12, 13, .78);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
}

/* A starting on sale: plays like on the packs page; its name, then its
   time left and the buy button, at the bottom */
.t.pk-starting .t-sale{
    z-index: 2;
}

.t-st-name{
    display: block;
    margin-bottom: 6px;
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.t-st-row{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 12px;
}

.t.pk-starting .pk-left-t{
    font-size: 13px;
}

.t.pk-starting .pk-buy{
    margin-left: 0;
    min-height: 34px;
    padding: 0 16px;
    font-size: 13px;
    pointer-events: auto;
}

/* Widget frames still in the works */
.t.cs{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 1px dashed #1e252b;
    box-sizing: border-box;
    background: repeating-linear-gradient(135deg, #0b0d0f 0 9px, #0d1013 9px 18px);
    color: #454f58;
    font-size: 11px;
    letter-spacing: .8px;
    text-transform: uppercase;
    cursor: default;
}

.t.cs:hover{
    outline: none;
}

/* Longer in French: wraps in the small tiles, centred and in even lines */
.t.cs span{
    max-width: 100%;
    box-sizing: border-box;
    padding: 0 10px;
    text-align: center;
    line-height: 1.45;
    letter-spacing: .5px;
    text-wrap: balance;
}

/* Client projects: one line always written on the picture */
.t.lc .cap{
    opacity: 1;
    padding: 26px 10px 8px;
}

.t.lc .ln1{
    display: block;
    font-size: 12px;
    line-height: 1.35;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Grids */
.mz3, .mz4{
    display: grid;
    gap: 8px;
    align-content: start;
}

.mz3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mz3 .t{ aspect-ratio: 16/9; }
.mz4{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mz4 .t{ aspect-ratio: 1; }

.mz5{
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
}
.mz5 .t{ aspect-ratio: 16/9; }

.mzs{
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
}
.mzs .t{ aspect-ratio: 16/9; }
.mzs .t.hl{
    grid-column: span 2;
    grid-row: span 2;
    aspect-ratio: auto;
}

.mzw{
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
}
.mzw .t{ aspect-ratio: 16/9; }
.mzw .t.big{
    grid-column: 4/7;
    grid-row: 1/4;
    aspect-ratio: auto;
}

.mz{
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}
.mz .t{ aspect-ratio: 16/9; }
.mz .t.big{
    grid-column: span 2;
    grid-row: span 2;
    aspect-ratio: auto;
}

/* Banners: justified rows, each banner at its own ratio */
.jr{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.jr .t{
    --a: 3;
    flex: var(--a) 1 calc(var(--a) * 60px);
    aspect-ratio: var(--a);
}
.jr:after{
    content: '';
    flex-grow: 999;
}

@container museum (max-width: 790px){
    .duo{
        grid-template-columns: 1fr;
        gap: 56px 0;
    }
    .duo .sep{
        display: none;
    }
    .mz5{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@container museum (max-width: 640px){
    .mzs{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
    /* The 2 big places alone would fill rows with no height */
    .mzs .t.hl{
        grid-column: 1 / -1;
        grid-row: span 1;
        aspect-ratio: 16/9;
    }
    .mz5{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mzw{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .mzw .t.big{
        grid-column: span 3;
        grid-row: span 1;
        aspect-ratio: 16/9;
        order: -1;
    }
    .mz{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mz .t.big{
        grid-column: span 2;
        grid-row: span 1;
        aspect-ratio: 16/9;
    }
}

/* Phones: client projects one per row (their titles stay readable),
   fewer widget frames and logos per row */
@container museum (max-width: 440px){
    .mz3{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mz4{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .mz5{ grid-template-columns: minmax(0, 1fr); }
}

/* End card */
.museum-end{
    margin-top: 72px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px 28px;
    padding: 24px;
    border: 1px solid #2a323a;
    border-radius: 10px;
    background: #111315;
}

.museum-end > div{
    flex: 1 1 320px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.museum-end h2{
    margin: 0;
    font-size: 18px;
    font-weight: 600;
}

.museum-end p{
    margin: 0;
    font-size: 14px;
    line-height: 22px;
    color: #b8c0c8;
}

.museum-end .cta{
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0 26px;
    border-radius: 25px;
    background: #7b48fc;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-decoration: none;
}

.museum-end .cta:hover{
    filter: brightness(1.12);
}

/* Fixed bar at the bottom, centred on the main column */
.pbar{
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    box-sizing: border-box;
    height: 44px;
    border-top: 1px solid #1d2329;
    overflow: hidden;
    color: #fff;
    font-size: 14px;
    text-decoration: none;
    background: radial-gradient(circle at 7.5px 7.5px, rgba(120, 135, 150, .2) .9px, transparent 1.3px) 0 0/15px 15px, #08090b;
    box-shadow: 0 -10px 30px rgba(0, 0, 0, .5);
    transition: border-color .3s ease;
}

.pbar .pin{
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--pl, 0px);
    width: var(--pw, 560px);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.pbar:before{
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity .4s ease;
    background: radial-gradient(circle at 7.5px 7.5px, var(--pc, #c357e0) 1.4px, transparent 1.9px) 0 0/15px 15px;
    -webkit-mask-image: radial-gradient(circle 110px at var(--mx, 50%) var(--my, 50%), #000, transparent);
    mask-image: radial-gradient(circle 110px at var(--mx, 50%) var(--my, 50%), #000, transparent);
}

.pbar:hover{
    border-color: #2d3640;
}

.pbar:hover:before{
    opacity: 1;
}

.pbar .pt{
    position: relative;
    color: #8d97a1;
    font-size: 13px;
    padding: 8px 22px;
    background: radial-gradient(ellipse closest-side, #08090b 58%, rgba(8, 9, 11, 0));
}

.pbar .pg{
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 28px;
    min-width: 178px;
    box-sizing: border-box;
    justify-content: space-between;
    padding: 0 6px 0 20px;
    border: 1px solid #1f262d;
    border-radius: 8px;
    background: #0b0d0f;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: .3px;
    transition: border-color .3s ease, box-shadow .3s ease;
}

.pbar:hover .pg{
    border-color: #33295c;
    box-shadow: 0 0 16px rgba(195, 87, 224, .2);
}

.pbar .gar{
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(90deg, #8f6bff, #d052d8, #ff7a6b);
    transition: transform .3s ease;
}

.pbar:hover .gar{
    transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce){
    .t .cap, .fxcr, .museum .seeall, .pbar, .pbar .pg, .pbar .gar{
        transition: none;
    }
    .hgf, .hs1, .hs2, .hst{
        animation: none;
    }
    .hs1{ transform: translateY(4px); }
    .hs2{ transform: translateY(5px); }
}