/* The logos of the portfolio (/creations/logos/): a square grid, a logo
   seen bigger on click, then the way to ask for one's own */

.logo-grid{
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
    margin-top: 30px;
}

.logo-tile{
    position: relative;
    aspect-ratio: 1;
    padding: 0;
    overflow: hidden;
    border: 1px solid #1d2329;
    border-radius: 10px;
    background: #111315;
    cursor: zoom-in;
    transition: border-color .2s ease, transform .25s ease, box-shadow .25s ease;
}

.logo-tile img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s ease;
}

.logo-tile:hover{
    border-color: color-mix(in srgb, var(--c) 70%, #1d2329);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .45), 0 0 18px color-mix(in srgb, var(--c) 25%, transparent);
    transform: translateY(-2px);
}

.logo-tile:hover img{
    transform: scale(1.04);
}

/* What it is and its year, shown on hover */
.logo-cap{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 8px;
    padding: 28px 10px 8px;
    background: linear-gradient(transparent, rgba(8, 9, 11, .92));
    color: #c4cad0;
    font-size: 11.5px;
    line-height: 15px;
    text-align: left;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .2s ease, transform .2s ease;
}

.logo-cap b{
    color: #fff;
    font-weight: 600;
}

.logo-cap span{
    flex: none;
    margin-left: auto;
    color: #8a97a3;
}

.logo-tile:hover .logo-cap,
.logo-tile:focus-visible .logo-cap{
    opacity: 1;
    transform: none;
}

/* Banners: wide pictures, two a row */
.is-wide .logo-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.is-wide .logo-tile{
    aspect-ratio: 3 / 1;
}

.is-wide .logo-order-avatars i{
    width: 84px;
    height: 28px;
    border-radius: 6px;
}

.logo-view.is-wide{
    width: min(1100px, calc(100vw - 32px));
}

/* Want your own logo? */
.logo-order{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px 22px;
    margin-top: 28px;
    padding: 22px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: linear-gradient(#111315, #111315) padding-box, linear-gradient(90deg, #8f6bff, #d052d8, #ff7a6b) border-box;
}

.logo-order-avatars{
    display: flex;
    flex: none;
}

.logo-order-avatars i{
    width: 46px;
    height: 46px;
    margin-left: -12px;
    border-radius: 50%;
    background: #23282d center/cover no-repeat;
    box-shadow: 0 0 0 3px #111315;
}

.logo-order-avatars i:first-child{
    margin-left: 0;
}

.logo-order-text{
    flex: 1 1 280px;
}

.logo-order h2{
    margin: 0 0 4px;
    font-size: 18px;
    font-weight: 600;
}

.logo-order p{
    margin: 0;
    font-size: 14px;
    color: #b8c0c8;
}

.logo-order-btn{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 20px;
    background: #7b48fc;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    transition: background .18s ease;
}

.logo-order-btn:hover{
    background: #8a5dfc;
    color: #fff;
}

/* A logo seen bigger */
.logo-view{
    width: min(640px, calc(100vw - 32px));
    max-width: none;
    max-height: none;
    padding: 0;
    overflow: visible;
    border: 0;
    background: transparent;
    color: #fff;
}

.logo-view::backdrop{
    background: rgba(5, 6, 8, .88);
    backdrop-filter: blur(4px);
}

.logo-view[open]{
    animation: logo-view-in .25s ease-out;
}

.logo-view figure{
    margin: 0;
}

.logo-view img{
    display: block;
    width: 100%;
    max-height: calc(100vh - 140px);
    object-fit: contain;
    border-radius: 12px;
    background: #111315;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .6);
}

.logo-view figcaption{
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 12px;
    font-size: 14px;
    color: #8a97a3;
}

.logo-view figcaption b{
    color: #fff;
    font-weight: 600;
}

.logo-view-close,
.logo-view-nav{
    position: absolute;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid #2a323a;
    border-radius: 50%;
    background: #111315;
    color: #e6e6e6;
    cursor: pointer;
    transition: border-color .18s ease;
}

.logo-view-close:hover,
.logo-view-nav:hover{
    border-color: var(--c, #a961ef);
    color: #fff;
}

.logo-view-close{
    top: -14px;
    right: -14px;
    z-index: 2;
}

.logo-view-nav{
    top: calc(50% - 36px);
}

.logo-view-prev{
    left: -60px;
}

.logo-view-next{
    right: -60px;
}

@keyframes logo-view-in{
    from{ opacity: 0; transform: scale(.96); }
    to{ opacity: 1; transform: none; }
}

@container packs (max-width: 1010px){
    .logo-grid{
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@container packs (max-width: 700px){
    .logo-grid{
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
    }

    .is-wide .logo-grid{
        grid-template-columns: 1fr;
    }
}

@container packs (max-width: 420px){
    .logo-grid{
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .logo-order{
        flex-direction: column;
        align-items: flex-start;
    }

    .logo-order-text{
        flex: none;
    }
}

/* No room on the sides: the arrows go under the logo */
@media (max-width: 780px){
    .logo-view-nav{
        top: auto;
        bottom: -56px;
    }

    .logo-view-prev{
        left: calc(50% - 48px);
    }

    .logo-view-next{
        right: calc(50% - 48px);
    }

    .logo-view-close{
        top: -50px;
        right: 0;
    }
}

/* Touch screens: the caption is only in the bigger view */
@media (hover: none){
    .logo-cap{
        display: none;
    }
}

@media (prefers-reduced-motion: reduce){
    .logo-tile,
    .logo-tile img,
    .logo-cap{
        transition: none;
    }

    .logo-view[open]{
        animation: none;
    }
}

/* Client projects (/creations/custom/): one card per project, its pictures
   and videos seen bigger on click */
.project-card{
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
    border: 1px solid #1d2329;
    border-radius: 10px;
    background: #111315;
    color: #fff;
    font-family: inherit;
    text-align: left;
    cursor: zoom-in;
    transition: border-color .2s ease, transform .25s ease, box-shadow .25s ease;
}

.project-card:hover{
    border-color: color-mix(in srgb, var(--c) 70%, #1d2329);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .45), 0 0 18px color-mix(in srgb, var(--c) 22%, transparent);
    transform: translateY(-2px);
}

/* A widget currently being created: an empty, hatched card */
.project-card.is-wip{
    cursor: default;
    border-style: dashed;
    background: #0d0f11;
}

.project-card.is-wip:hover{
    border-color: #1d2329;
    box-shadow: none;
    transform: none;
}

.project-card.is-wip .project-cover{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: repeating-linear-gradient(135deg, #0b0d0f 0 9px, #0d1013 9px 18px);
    color: #4f5a64;
    font-size: 11px;
    letter-spacing: .8px;
    text-transform: uppercase;
}

/* Longer in French: wraps on narrow cards, centred and in even lines */
.project-card.is-wip .project-cover span{
    max-width: 100%;
    box-sizing: border-box;
    padding: 0 16px;
    text-align: center;
    line-height: 1.5;
    text-wrap: balance;
}

.project-cover{
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #0b0d0f;
}

.project-cover img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s ease;
}

.project-card:hover .project-cover img{
    transform: scale(1.04);
}

/* A project with videos: said on its card */
.project-video{
    position: absolute;
    left: 10px;
    top: 10px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px 4px 8px;
    border-radius: 12px;
    background: linear-gradient(90deg, #8f6bff, #d052d8, #ff7a6b);
    color: #fff;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .3px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .45);
}

/* A video among the small ones: a big play button in the middle */
.project-play{
    position: absolute;
    left: 50%;
    top: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding-left: 3px;
    box-sizing: border-box;
    border: 2px solid rgba(255, 255, 255, .9);
    border-radius: 50%;
    background: rgba(8, 9, 11, .55);
    color: #fff;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 14px rgba(0, 0, 0, .6);
}

.project-body{
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px 14px 16px;
}

.project-meta{
    font-size: 11.5px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #8a97a3;
}

.project-title{
    font-size: 15px;
    font-weight: 600;
    line-height: 21px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Your channel next? (sized like the vote box of the packs pages) */
.project-order .suggest-main p{
    font-size: 13px;
    line-height: 19px;
}

.project-order-covers{
    display: flex;
    margin: auto 0;
}

.project-order-covers i{
    width: 34%;
    max-width: 170px;
    aspect-ratio: 16 / 9;
    margin-left: -6%;
    border-radius: 8px;
    background: #23282d center/cover no-repeat;
    box-shadow: 0 0 0 3px #08090b;
    transform: rotate(-4deg);
}

.project-order-covers i:first-child{
    margin-left: 0;
}

/* Alone on its row: a band, the pictures beside the text */
.category-grid > .project-order:nth-child(3n+1) .project-order-covers{
    margin: 10px 0 14px;
}

.project-order-covers i:nth-child(2){
    transform: translateY(-4px);
    z-index: 1;
}

.project-order-covers i:nth-child(3){
    transform: rotate(4deg);
}

.project-order .other{
    flex-direction: row;
    align-items: center;
}

/* A project seen bigger: a picture or a video, 16:9 */
/* As wide as the picture can be with its title and the small ones below */
.project-view{
    width: min(1000px, calc(100vw - 32px), calc((100vh - 250px) * 16 / 9));
}

.project-view-media{
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 12px;
    background: #111315;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .6);
}

.project-view-media img,
.project-view-media iframe{
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    object-fit: contain;
}

/* All the project's pictures and videos in small: the one shown is lit */
.project-view-thumbs{
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-top: 14px;
}

.project-view-thumbs[hidden]{
    display: none;
}

.project-view-thumbs button{
    position: relative;
    aspect-ratio: 16 / 9;
    padding: 0;
    overflow: hidden;
    border: 2px solid transparent;
    border-radius: 8px;
    background: #111315;
    opacity: .55;
    cursor: pointer;
    transition: opacity .2s ease, box-shadow .2s ease;
}

.project-view-thumbs button:hover{
    opacity: .85;
}

.project-view-thumbs button.on{
    opacity: 1;
    background: linear-gradient(90deg, #8f6bff, #d052d8, #ff7a6b) border-box;
    box-shadow: 0 0 16px rgba(208, 82, 216, .35);
}

.project-view-thumbs img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
}

.project-view-thumbs .project-play{
    width: 34px;
    height: 34px;
}

/* Over the video while YouTube loads */
.project-view-media{
    position: relative;
}

.project-view-waiting{
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    background: #111315 center/cover no-repeat;
    box-shadow: inset 0 0 0 100vmax rgba(8, 9, 11, .78);
    color: #fff;
    font-size: 16px;
    font-weight: 600;
}

.project-view-spinner{
    width: 52px;
    height: 52px;
    box-sizing: border-box;
    border: 5px solid rgba(255, 255, 255, .25);
    border-top-color: #fff;
    border-right-color: #d052d8;
    border-radius: 50%;
    animation: project-spin .8s linear infinite;
}

@keyframes project-spin{
    to{ transform: rotate(360deg); }
}

@media (max-width: 780px){
    .project-view .logo-view-close{
        top: -50px;
        right: 0;
    }
}

@media (prefers-reduced-motion: reduce){
    .project-card,
    .project-cover img{
        transition: none;
    }
}

.logo-view-nav[hidden]{
    display: none;
}

.logo-view figcaption span{
    flex: none;
    white-space: nowrap;
}

/* Previews playing in their cards (game starting screens): the picture
   stays until the video plays */
/* Nothing to click there: no hover effect either */
.project-card.is-inline{
    cursor: default;
}

.project-card.is-inline:hover{
    border-color: #1d2329;
    box-shadow: none;
    transform: none;
}

.project-card.is-inline:hover .project-cover img{
    transform: none;
}

.project-inline-video{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    object-fit: cover;
    opacity: 0;
    pointer-events: none;
    transition: opacity .4s ease;
}

.project-card.is-playing .project-inline-video{
    opacity: 1;
}

/* Playback line: tells the card is a video, quietly */
.project-inline-bar{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    height: 2px;
    background: rgba(255, 255, 255, .05);
    opacity: 0;
    transition: opacity .4s ease;
}

.project-inline-bar i{
    display: block;
    height: 100%;
    background: rgba(200, 208, 216, .38);
    transform: scaleX(0);
    transform-origin: left;
}

.project-card.is-playing .project-inline-bar{
    opacity: 1;
}

/* The ephemeral startings on sale, a quiet reminder under the intro: a
   still picture (its preview on click), no animation, nothing bright, so
   the visitor enjoys the scenes (cards driven by packs-startings.js) */
/* Each starting as wide as a scene card of the grid below */
.eph-strip{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 22px;
}

/* Still hourglasses: the sand stays up */
.eph-strip .hgf,
.eph-strip .hs1,
.eph-strip .hs2{
    animation: none;
}

.eph-strip .hs2{
    transform: translateY(9px);
}

.eph-item{
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 8px 6px 6px;
    border: 1px solid #1d2329;
    border-radius: 10px;
    background: #111315;
}

.eph-thumb{
    position: relative;
    flex: none;
    width: 96px;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 6px;
    background: #0b0d0f;
}

.eph-thumb img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.eph-info{
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.eph-name{
    overflow: hidden;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Under the name, on one line: the time left, the price, the button */
.eph-row{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
}

/* The price and its button stay together, on the right */
.eph-buy{
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}

.eph-row .pk-left-t{
    white-space: nowrap;
}



/* The time left under the name, plain (not over the video as on the big
   cards) */
.eph-item.pk-starting .pk-left{
    position: relative;
    inset: auto;
    padding: 0;
    background: none;
}

.eph-item .pk-left-t{
    gap: 5px;
    font-size: 11px;
    font-weight: 600;
    color: #8a97a3;
}

.eph-price{
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    color: #e6e6e6;
}

/* A quiet button: outlined, filled on hover */
.eph-item .pk-buy{
    min-height: 30px;
    margin-left: 0;
    padding: 0 14px;
    border: 1px solid #7b48fc;
    background: transparent;
    color: #c9b6ff;
    font-size: 13px;
}

.eph-item .pk-buy:hover{
    background: #7b48fc;
    color: #fff;
}

@container packs (max-width: 1010px){
    .eph-strip{
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@container packs (max-width: 520px){
    .eph-strip{
        grid-template-columns: 1fr;
    }
}

/* Phones: the name can wrap, the line under it too */
@media (max-width: 560px){
    .eph-thumb{
        width: 96px;
    }

    .eph-info{
        flex: 1;
    }

    .eph-name{
        font-size: 13px;
        white-space: normal;
    }

    .eph-row{
        flex-wrap: wrap;
        gap: 4px 10px;
    }

    .eph-row .pk-left{
        flex-basis: 100%;
    }
}

/* A wide banner leaves no room on the sides: the arrows go under it */
@media (max-width: 1240px){
    .logo-view.is-wide .logo-view-nav{
        top: auto;
        bottom: -56px;
    }

    .logo-view.is-wide .logo-view-prev{
        left: calc(50% - 48px);
    }

    .logo-view.is-wide .logo-view-next{
        right: calc(50% - 48px);
    }

    .logo-view.is-wide .logo-view-close{
        top: -50px;
        right: 0;
    }
}

/* Reviews (/reviews/): the clients' screenshots in columns, by language */
.review-langs{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 6px;
}

.review-langs a{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border: 1px solid #2a323a;
    border-radius: 16px;
    font-size: 13px;
    color: #c4cad0;
    transition: border-color .18s ease;
}

.review-langs a span{
    color: #8a97a3;
    font-size: 12px;
}

.review-langs a:hover{
    border-color: var(--c);
    color: #fff;
}

.review-langs a.now{
    border-color: var(--c);
    background: color-mix(in srgb, var(--c) 12%, transparent);
    color: #fff;
}

.review-wall{
    columns: 3 280px;
    column-gap: 14px;
    margin-top: 30px;
}

.review-tile{
    display: block;
    width: 100%;
    aspect-ratio: auto;
    margin: 0 0 14px;
    break-inside: avoid;
}

.review-tile img{
    height: auto;
}

.review-tile:hover img{
    transform: none;
}

.review-empty{
    margin-top: 30px;
    color: #8a97a3;
}

.review-view{
    width: min(900px, calc(100vw - 32px));
}

/* About me (/about/): the photo beside the intro, the questions as cards */
.about-hero{
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 28px;
    align-items: center;
}

.about-photo{
    width: 220px;
    height: 220px;
    border: 1px solid #1d2329;
    border-radius: 14px;
    object-fit: cover;
}

.about-networks{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 6px;
}

.about-networks a{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px 6px 10px;
    border: 1px solid #2a323a;
    border-radius: 16px;
    font-size: 13px;
    color: #c4cad0;
    transition: border-color .18s ease;
}

.about-networks a:hover{
    border-color: var(--c);
    color: #fff;
}

.about-networks img{
    border-radius: 4px;
}

.about-faq{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 34px;
}

.about-faq article{
    padding: 22px 24px;
    border: 1px solid #181e23;
    border-radius: 10px;
    background: #111315;
}

.about-faq h2{
    margin: 0 0 10px;
    font-size: 17px;
    font-weight: 600;
    color: #fff;
}

.about-faq .paragraph{
    margin: 0;
    font-size: 14px;
    line-height: 22px;
    color: #b8c0c8;
}

.about-faq .paragraph b{
    color: #fff;
    font-weight: 600;
}

.about-faq .paragraph a{
    color: var(--c);
    word-break: break-word;
}

.about-ctas{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.about-cta-ghost{
    display: inline-flex;
    align-items: center;
    padding: 10px 18px;
    border: 1px solid #2a323a;
    border-radius: 20px;
    color: #e6e6e6;
    font-size: 14px;
    font-weight: 600;
    transition: border-color .18s ease;
}

.about-cta-ghost:hover{
    border-color: var(--c);
    color: #fff;
}

@container packs (max-width: 820px){
    .about-faq{
        grid-template-columns: 1fr;
    }
}

@container packs (max-width: 560px){
    .about-hero{
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .about-photo{
        width: 140px;
        height: 140px;
    }
}

/* Legal pages (terms, privacy): the text in one comfortable column, in a card */
.legal-body{
    max-width: 820px;
    margin-top: 28px;
    padding: 30px 34px;
    border: 1px solid #181e23;
    border-radius: 12px;
    background: #111315;
}

.legal-body > br{
    display: none;
}

.legal-body h3{
    margin: 30px 0 10px;
    padding-top: 22px;
    border-top: 1px solid #1d2329;
    font-size: 17px;
    font-weight: 600;
    color: #fff;
}

.legal-body h3:first-of-type{
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.legal-body .paragraph{
    margin: 0;
    font-size: 14.5px;
    line-height: 24px;
    color: #c4cad0;
}

.legal-body .paragraph + .paragraph{
    margin-top: 10px;
}

.legal-body strong{
    color: #fff;
    font-weight: 600;
}

.legal-body a{
    color: var(--c);
}

@media screen and (max-width: 600px){
    .legal-body{
        padding: 22px 20px;
    }
}

/* "Last updated" before the first section */
.legal-body > .paragraph:first-child{
    margin-bottom: 22px;
    font-size: 13px;
    color: #8a97a3;
}