/* ==========================================================================
   Paper collage, shared by the home and studio pages (Figma frames 1400 px
   wide). On wide screens each section is a stage where everything is placed
   in frame pixels: --u is one frame pixel, so the composition scales with
   the page. Below 1100 px the texts flow and each page gathers its pictures
   into smaller collages.
   ========================================================================== */
.stage {
    position: relative;
    max-width: var(--page-max);
    margin-inline: auto;
    container-type: inline-size;
    --u: calc(100cqi / 1400);
    /* --stage-h: the stage's height in the frame */
    aspect-ratio: 1400 / var(--stage-h);
}

/* x, y and width in frame pixels, and a tilt */
.placed {
    position: absolute;
    left: calc(var(--x) * var(--u));
    top: calc(var(--y) * var(--u));
    width: calc(var(--w) * var(--u));
    max-width: none;
    rotate: var(--r, 0deg);
}

/* ---- Title, text and button ---- */
.intro {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.intro__title {
    font-size: calc(96 * var(--u));
    line-height: 1;
    letter-spacing: 0;
}

.intro__text {
    font-size: max(14px, calc(16 * var(--u)));
    line-height: normal;
}

.intro .intro__text {
    margin-top: calc(16 * var(--u));
}

.intro__text p + p {
    margin-top: 1.2em;
}

/* above everything, as in the frame: just under 1225 px the text no longer shrinks and the
   button may reach the first picture */
.intro__cta {
    position: relative;
    z-index: 1;
    align-self: center;
    margin-top: 12px;
}

/* The dark slope behind the pictures, as drawn or upside down (--r: 180deg).
   It spans the whole screen: the Figma shape (as a mask) gives the slanted part with its
   rounded bends, and two plain bands carry it to the screen edges, hiding its rounded ends.
   A taller slope gives its own drawing (--shape) and height in the frame (--slope-h). */
.slope {
    position: absolute;
    top: calc(var(--y) * var(--u));
    left: calc(50% - 50vw);
    width: 100vw;
    height: calc(var(--slope-h, 940) * var(--u));
    rotate: var(--r, 0deg);
    /* where the drawn shape starts, from the left edge of the screen */
    --shape-x: calc(50vw - 50cqi + var(--x) * var(--u));
    mask:
        var(--shape, url('/images/dark-shape.svg')) var(--shape-x) 0 / calc(1781 * var(--u)) 100% no-repeat,
        linear-gradient(#000 0 0) 0 100% / calc(var(--shape-x) + 200 * var(--u)) calc((var(--slope-h, 940) - 470) * var(--u)) no-repeat,
        linear-gradient(#000 0 0) 100% 0 / calc(100% - var(--shape-x) - 1581 * var(--u)) 100% no-repeat;
    /* dark brown, grainy */
    background: var(--grain-brown);
    pointer-events: none;
}

/* a picture in a cream frame cut to its size, with a glare on the glass: the frame is 8 px on
   a 261 px picture, or --pad frame pixels */
.picture {
    --w: 261;
    padding: calc(var(--pad, 8 / 261 * var(--w)) * var(--u));
    background: var(--color-cream);
    filter: drop-shadow(calc(4px + var(--lift) * 6px) calc(4px + var(--lift) * 8px) calc(3px + var(--lift) * 5px) rgba(0, 0, 0, 0.25));
}

.picture img {
    width: 100%;
}

/* the glare lets clicks through to the picture */
.picture::after {
    content: "";
    position: absolute;
    inset: 0;
    background: url('/images/reflection.webp') center / cover;
    opacity: 0.6;
    scale: 1 -1;
    pointer-events: none;
}

/* post-it with a soft shadow and a handwritten-like note */
.note {
    width: 120px;
    height: 92px;
}

.note__shadow {
    position: absolute;
    left: -6px;
    top: 3px;
    width: 132px;
    height: 94.81px;
    max-width: none;
}

.note__paper {
    position: absolute;
    left: 0;
    top: -0.5px;
    width: 113.61px;
    height: 84.84px;
    max-width: none;
}

.note__text {
    position: absolute;
    left: calc(50% - 6.5px);
    top: calc(50% - 4.5px);
    width: 97px;
    height: 73px;
    translate: -50% -50%;
    rotate: -3.48deg;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    line-height: normal;
    text-align: center;
    color: var(--color-brown);
}

/* ---- Paper pinned on the wall (photos, post-its, cards). It gets stuck to the wall, one
   piece after another, the first time it comes into view (paper.js), then lifts a little
   under the mouse, or for a moment when tapped, with a whoosh (ui-sounds.js). ---- */
[data-paper] {
    --lift: 0;
    translate: 0 calc(var(--lift) * -6px);
    rotate: calc(var(--r, 0deg) + var(--lift) * var(--tilt, 1.5deg));
    scale: calc(1 + var(--lift) * 0.04);
    transition-property: translate, rotate, scale, filter;
    transition-duration: 0.35s;
    transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
}

@media (prefers-reduced-motion: no-preference) {
    [data-paper].is-tapped {
        --lift: 1;
        z-index: 1;
    }

    [data-paper].is-posted {
        animation: post 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) var(--post-delay, 0ms) backwards;
    }
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    [data-paper]:hover {
        --lift: 1;
        z-index: 1;
    }
}

/* out of sight until stuck on the wall, when scripts run and motion is welcome */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
    [data-paper]:not(.is-posted) {
        opacity: 0;
    }
}

@keyframes post {
    from { opacity: 0; transform: translateY(-24px) scale(1.12) rotate(6deg); }
}

/* ---- Badges (TeamBadge): a card in a plastic sleeve, the photo clipped over its dashed slot.
   The page gives each one its place and its colour (--badge-color). ---- */
.badge {
    --w: 635;
    display: flex;
    flex-direction: column;
    gap: calc(8 * var(--u));
    padding: calc(8 * var(--u));
    border: calc(2 * var(--u)) solid #fff;
    border-radius: calc(48 * var(--u));
    background: rgba(255, 255, 255, 0.2);
    box-shadow: calc(4px + var(--lift) * 6px) calc(4px + var(--lift) * 8px) calc(6px + var(--lift) * 4px) rgba(0, 0, 0, 0.25);
    transition-property: translate, rotate, scale, box-shadow;
}

/* the glare of the sleeve, over the card but under the photo */
.badge::before {
    content: "";
    position: absolute;
    inset: calc(-2 * var(--u));
    border-radius: calc(48 * var(--u));
    background: url('/images/reflection.webp') center / cover;
    opacity: 0.6;
    scale: 1 -1;
    pointer-events: none;
}

.badge__top {
    display: block;
    width: 100%;
    height: calc(64 * var(--u));
    max-width: none;
}

.badge__body {
    display: flex;
    align-items: center;
    gap: calc(32 * var(--u));
    padding: calc(16 * var(--u));
    border: calc(8 * var(--u)) solid var(--badge-color);
    border-radius: 0 0 calc(40 * var(--u)) calc(40 * var(--u));
    background: var(--color-tan);
    color: var(--color-brown);
}

.badge__slot {
    flex: none;
    width: calc(264 * var(--u));
    height: calc(264 * var(--u));
    border: calc(4 * var(--u)) dashed var(--color-brown);
    border-radius: calc(32 * var(--u));
}

.badge__info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: calc(48 * var(--u));
}

/* one role per line, in brackets like the menu's chevrons */
.badge__roles {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: calc(40 * var(--u));
    line-height: 1;
    text-transform: uppercase;
}

.badge__roles span {
    display: block;
}

.badge__name {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: calc(24 * var(--u));
    line-height: normal;
    letter-spacing: normal;
    text-transform: none;
}

.badge__links {
    display: flex;
    gap: calc(16 * var(--u));
    margin: 0;
    padding: 0;
    list-style: none;
}

.badge__links a {
    width: calc(48 * var(--u));
    height: calc(48 * var(--u));
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--color-brown);
    color: var(--color-tan);
}

.badge__links a:hover {
    color: var(--color-pumpkin);
}

.badge__links svg {
    width: calc(32 * var(--u));
    height: calc(32 * var(--u));
}

/* a little off its slot; its shadow grows with the badge's lift */
.badge__photo {
    --x: 32;
    --y: 104;
    --w: 248;
    --r: -3.75deg;
    --pad: 8;
    transition: filter 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* the studio's own badge (StudioBadge), yellow, its logo over the slot */
.badge--studio {
    --w: 520;
    height: calc(404 * var(--u));
}

.badge--studio .badge__body {
    position: relative;
    flex: 1;
    border: 0;
    background: var(--color-pumpkin);
}

.badge--studio .badge__slot {
    border-color: rgba(88, 82, 70, 0.2);
}

.badge__logo {
    position: absolute;
    left: 50%;
    top: 50%;
    width: calc(507 * var(--u));
    max-width: none;
    translate: -50% -50%;
}

/* on one line, whatever the language */
.badge__see {
    position: relative;
    align-self: flex-end;
    font-size: calc(24 * var(--u));
    line-height: normal;
    white-space: nowrap;
}

/* ---- Depth: the line drawings scroll at about 70% of the page's speed ---- */
.lineart {
    pointer-events: none;
}

@supports (animation-timeline: view()) {
    .lineart {
        animation: drift linear both;
        animation-timeline: view();
    }
}

@media (prefers-reduced-motion: reduce) {
    .lineart {
        animation: none;
    }
}

@keyframes drift {
    from { transform: translateY(-250px); }
    to { transform: translateY(250px); }
}

/* blue and coral bands between two sections, grainy like the yellow ones: the grain melts into
   the colours as soft light, over colours a little lighter so that they keep their tone on average */
.stripes {
    height: min(96px, 96 / 1400 * 100vw);
    --stripe-blue: color-mix(in srgb, var(--color-blue), #fff 20%);
    --stripe-coral: color-mix(in srgb, var(--color-coral), #fff 20%);
    background: var(--grain), linear-gradient(var(--stripe-blue) 0 66.667%, var(--stripe-coral) 0);
    background-blend-mode: soft-light;
}

/* ---- Lightboxes (<dialog>): a player or a picture shown large over a dark veil, a round
   yellow button to close them ---- */
.lightbox {
    padding: 0;
    border: 0;
    background: none;
    overflow: visible;
}

.lightbox::backdrop {
    background: rgba(43, 39, 33, 0.85);
}

.lightbox__close {
    position: absolute;
    top: -16px;
    right: -16px;
    z-index: 1;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--color-pumpkin);
    color: var(--color-brown);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    cursor: pointer;
}

/* ==========================================================================
   Tablets and phones
   ========================================================================== */
@media (max-width: 1099px) {
    .stage {
        aspect-ratio: auto;
    }

    .slope {
        display: none;
    }

    /* the texts flow */
    .intro {
        position: relative;
        left: auto;
        top: auto;
        width: auto;
        max-width: 600px;
        margin-inline: auto;
        padding-inline: var(--gutter);
    }

    .intro__title { font-size: clamp(56px, 13vw, 96px); }
    .intro__text { font-size: 16px; }
    .intro .intro__text { margin-top: 16px; }
}