/* Block: showreel */
.showreel {
    padding: calc(34 * var(--tgc-u)) 0 calc(70 * var(--tgc-u));
}

.showreel__frame {
    max-width: calc(1344 * var(--tgc-u));
    margin: 0 auto;
    padding: 0 var(--tgc-gutter);
}

/*
 * Grows with the scroll, per the note on the homepage artboard. The width is
 * interpolated by scripts/tgc-motion.js rather than scaled, so the video stays
 * sharp; the fallback keeps it full size if the script never runs.
 */
.showreel--grows .showreel__frame {
    width: var(--reel-width, 100%);
    max-width: calc(1344 * var(--tgc-u));
    transition: width 0.12s linear;
}

.showreel--grows .showreel__video,
.showreel--grows .showreel__placeholder,
.showreel--grows .showreel__embed {
    border-radius: var(--reel-radius, 0);
    overflow: hidden;
}

.showreel__video,
.showreel__placeholder,
.showreel__embed {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    background-color: var(--tgc-placeholder);
    object-fit: cover;
}

.showreel__placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--theme-white);
    font-size: var(--tgc-text-body);
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.showreel__embed iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

@media (max-width: 768px) {
    .showreel {
        padding: 16px 0 48px;
    }

    .showreel__frame {
        padding: 0 calc(20 * var(--tgc-u));
    }
}