/* Film mode.

   js/film.js adds .film to <html> and keeps two numbers up to date on every element
   that has data-in / data-out:

     --in   goes from 0 to 1 while the element enters
     --out  goes from 0 to 1 while the element leaves

   The data-fx tokens below decide what entering and leaving look like, for example
   data-fx="rise out-left" rises in from below and slides out to the left.
   Everything sits inside @media screen, so printing falls back to the long page. */

@property --in {
    syntax: "<number>";
    inherits: false;
    initial-value: 1;
}

@property --out {
    syntax: "<number>";
    inherits: false;
    initial-value: 0;
}

.backdrop {
    display: none;
}

@media screen {

    /* Stage */

    html.film-boot {
        scrollbar-width: none;
    }

    html.film-boot::-webkit-scrollbar {
        display: none;
    }

    .film {
        --frame-top: calc(var(--header-height) + clamp(0.25rem, 2.2vh, 1.75rem));
        --frame-bottom: calc(var(--player-height) + clamp(0.5rem, 2.6vh, 1.9rem));
    }

    .film-boot .stage {
        position: fixed;
        z-index: 0;
        inset: 0;
        overflow: hidden;
    }

    .film-boot:not(.film) .stage {
        opacity: 0;
    }

    .film-boot .stage::after {
        position: absolute;
        z-index: 30;
        inset: 0;
        background: var(--ink);
        content: "";
        opacity: 0;
        pointer-events: none;
        transition: opacity 170ms ease;
    }

    .film-boot .stage.is-cutting::after {
        opacity: 1;
    }

    /* Scenes off the timeline are transparent (not hidden), so screen readers can
       still read the whole page in order. Tabbing into one plays the film to it. */
    .film-boot .scene {
        position: absolute;
        z-index: 1;
        inset: 0;
        opacity: 0;
        pointer-events: none;
    }

    .film .scene.is-live {
        opacity: 1;
        pointer-events: auto;
    }

    /* Elements that have not entered yet, or have already left, can't be clicked. */
    .film .is-gone {
        pointer-events: none;
    }

    /* Full width with side padding, so content that slides out sideways is only
       cut off at the edge of the screen. */
    .film-boot .scene__frame,
    .film-boot .scene--hero .scene__frame {
        position: absolute;
        top: var(--frame-top);
        right: 0;
        bottom: var(--frame-bottom);
        left: 0;
        display: flex;
        min-height: 0;
        flex-direction: column;
        padding: 0 var(--gutter);
    }

    .film-boot .scene__inner {
        margin-block: auto;
        translate: 0 var(--pan, 0px);
    }

    .film .scene__frame.is-panning {
        overflow: clip;
        -webkit-mask-image: linear-gradient(to bottom, transparent, #000 1.25rem, #000 calc(100% - 1.25rem), transparent);
        mask-image: linear-gradient(to bottom, transparent, #000 1.25rem, #000 calc(100% - 1.25rem), transparent);
    }

    /* Room for the soft edges, so the first and last lines are never faded. */
    .film .scene__frame.is-panning > .scene__inner {
        padding-block: 1.25rem;
    }

    .film .beat {
        grid-area: 1 / 1;
    }

    /* film.js measures layout positions with all motion switched off for a moment. */
    .film-measuring [data-fx] {
        rotate: none !important;
        scale: none !important;
        transform: none !important;
        translate: none !important;
    }

    .film-measuring .scene__inner {
        translate: none !important;
    }

    /* Backdrop: dot grid, vignette and the year counter */

    .film-boot .backdrop {
        position: absolute;
        inset: 0;
        display: block;
        overflow: hidden;
        pointer-events: none;
    }

    .film-boot .backdrop::before,
    .film-boot .backdrop::after {
        position: absolute;
        inset: 0;
        content: "";
    }

    .film-boot .backdrop::before {
        background-image: radial-gradient(rgba(171, 198, 229, 0.08) 0.7px, transparent 0.7px);
        background-size: 24px 24px;
        -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 45%, #000 20%, transparent 90%);
        mask-image: radial-gradient(ellipse 80% 70% at 50% 45%, #000 20%, transparent 90%);
    }

    /* Vignette plus a faint static grain, which also hides banding in the dark glows. */
    .film-boot .backdrop::after {
        background:
            radial-gradient(ellipse 85% 80% at 50% 50%, transparent 55%, rgba(2, 6, 12, 0.6) 100%),
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    }

    .year {
        position: absolute;
        right: -0.04em;
        bottom: -0.24em;
        display: flex;
        color: transparent;
        font-size: clamp(7rem, min(22vw, 40vh), 21rem);
        font-stretch: 125%;
        font-weight: 800;
        line-height: 1;
        -webkit-text-stroke: 1.5px rgba(166, 194, 226, 0.1);
        user-select: none;
    }

    .year__digit {
        display: block;
        height: 1em;
        overflow: hidden;
    }

    .year__digit + .year__digit {
        margin-left: -0.05em;
    }

    .year__strip {
        display: block;
        width: min-content;
        text-align: center;
        translate: 0 calc(var(--digit, 0) * -1em);
    }

    /* Player */

    .film .player {
        position: fixed;
        z-index: 40;
        right: 0;
        bottom: 0;
        left: 0;
        display: grid;
        height: calc(var(--player-height) + env(safe-area-inset-bottom, 0px));
        grid-template-columns: auto minmax(9rem, 15rem) minmax(0, 1fr);
        align-items: center;
        gap: 1rem;
        padding: 0 var(--gutter) env(safe-area-inset-bottom, 0px);
        background: linear-gradient(to top, rgba(7, 17, 31, 0.96), rgba(7, 17, 31, 0.7) 60%, transparent);
    }

    .player__toggle {
        display: grid;
        width: 2.5rem;
        height: 2.5rem;
        place-items: center;
        border: 1px solid var(--line-strong);
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.04);
        cursor: pointer;
        transition: border-color 160ms ease, background-color 160ms ease;
    }

    .player__toggle:hover {
        border-color: rgba(110, 231, 216, 0.6);
        background: rgba(110, 231, 216, 0.08);
    }

    .player__toggle .icon {
        width: 1.15rem;
        height: 1.15rem;
    }

    .player__toggle .icon--pause,
    .player.is-playing .player__toggle .icon--play {
        display: none;
    }

    .player.is-playing .player__toggle .icon--pause {
        display: block;
    }

    .player__now {
        display: flex;
        min-width: 0;
        align-items: baseline;
        gap: 0.6rem;
        overflow: hidden;
        font-size: 0.9rem;
        line-height: 1.2;
        white-space: nowrap;
    }

    .player__index {
        color: var(--mist);
        font-size: 0.8rem;
    }

    .player__title {
        overflow: hidden;
        font-weight: 650;
        text-overflow: ellipsis;
    }

    .player__hint {
        color: var(--mist);
        transition: opacity 240ms ease;
    }

    .player.is-moving .player__hint {
        opacity: 0;
    }

    .player__hint {
        display: inline-flex;
        align-items: center;
        gap: 0.2rem;
    }

    .player__cue {
        width: 1rem;
        height: 1rem;
        animation: cue 1.8s ease-in-out infinite;
    }

    @keyframes cue {
        50% {
            translate: 0 0.2rem;
        }
    }

    .player__chapters {
        display: flex;
        height: 100%;
        align-items: center;
        gap: 4px;
        cursor: pointer;
        touch-action: none;
    }

    .player__chapters li {
        min-width: 0;
        flex: 1 1 0;
    }

    .player__chapter {
        position: relative;
        display: block;
        width: 100%;
        height: 2rem;
        padding: 0;
        border: 0;
        background: none;
        cursor: pointer;
    }

    .player__chapter::before,
    .player__fill {
        position: absolute;
        top: calc(50% - 1.5px);
        left: 0;
        width: 100%;
        height: 3px;
        border-radius: 999px;
        transition: height 140ms ease, top 140ms ease;
    }

    .player__chapter::before {
        background: rgba(166, 194, 226, 0.22);
        content: "";
    }

    .player__fill {
        background: var(--paper);
        scale: var(--fill, 0) 1;
        transform-origin: left center;
    }

    .player__chapter[aria-current] .player__fill {
        background: var(--aqua);
    }

    .player__chapter:hover::before,
    .player__chapter:hover .player__fill,
    .player__chapter:focus-visible::before,
    .player__chapter:focus-visible .player__fill {
        top: calc(50% - 3px);
        height: 6px;
    }

    .player__label {
        position: absolute;
        bottom: calc(100% + 0.2rem);
        left: 50%;
        padding: 0.25rem 0.55rem;
        border: 1px solid var(--line);
        border-radius: 0.45rem;
        background: var(--ink-raised);
        color: var(--paper);
        font-size: 0.76rem;
        font-weight: 600;
        opacity: 0;
        pointer-events: none;
        transition: opacity 140ms ease;
        translate: -50% 0;
        white-space: nowrap;
    }

    .player__chapter:hover .player__label,
    .player__chapter:focus-visible .player__label {
        opacity: 1;
    }

    .player__chapters li:first-child .player__label {
        left: 0;
        translate: 0 0;
    }

    .player__chapters li:last-child .player__label {
        right: 0;
        left: auto;
        translate: 0 0;
    }

    .player__chapter:focus-visible {
        outline-offset: -2px;
    }

    /* Motion vocabulary. Every animated element starts from these neutral values. */

    .film [data-fx] {
        --x-in: 0px;
        --y-in: 0px;
        --s-in: 1;
        --r-in: 0deg;
        --b-in: 0px;
        --skew-in: 0deg;
        --x-out: 0px;
        --y-out: 0px;
        --s-out: 1;
        --r-out: 0deg;
        --b-out: 0px;
        --skew-out: 0deg;
        opacity: calc(var(--in) * (1 - var(--out)));
        translate: calc(var(--x-in) + var(--x-out)) calc(var(--y-in) + var(--y-out));
        scale: calc(var(--s-in) * var(--s-out));
        rotate: calc(var(--r-base, 0deg) + var(--r-in) + var(--r-out));
    }

    .film .scene.is-live [data-fx] {
        will-change: transform, opacity;
    }

    /* Entrances */

    .film [data-fx~="rise"] {
        --y-in: calc((1 - var(--in)) * 2.25rem);
    }

    .film [data-fx~="rise-far"] {
        --y-in: calc((1 - var(--in)) * 34vh);
        --s-in: calc(0.9 + 0.1 * var(--in));
    }

    .film [data-fx~="from-left"] {
        --x-in: calc((var(--in) - 1) * 5rem);
    }

    .film [data-fx~="from-right"] {
        --x-in: calc((1 - var(--in)) * 5rem);
    }

    .film [data-fx~="from-below"] {
        --y-in: calc((1 - var(--in)) * 3.5rem);
    }

    .film [data-fx~="pop"] {
        --s-in: calc(0.5 + 0.5 * var(--in));
        transform-box: fill-box;
        transform-origin: center;
    }

    .film [data-fx~="stamp"] {
        --s-in: calc(1 + 1.2 * (1 - var(--in)));
        --r-in: calc((1 - var(--in)) * -18deg);
    }

    /* Titles are revealed left to right behind a soft edge, like a film title card. */
    .film [data-fx~="wipe"] {
        --edge: calc(var(--in) * 135% - 15%);
        --x-in: calc((1 - var(--in)) * -0.35em);
        opacity: calc(1 - var(--out));
        -webkit-mask-image: linear-gradient(90deg, #000 calc(var(--edge) - 20%), transparent var(--edge));
        mask-image: linear-gradient(90deg, #000 calc(var(--edge) - 20%), transparent var(--edge));
    }

    .film [data-fx~="focus"] {
        --b-in: calc((1 - var(--in)) * 16px);
        --s-in: calc(1.06 - 0.06 * var(--in));
    }

    .film [data-fx~="tilt-in"] {
        --x-in: calc((1 - var(--in)) * 9vw);
        transform: perspective(1600px) rotateY(calc((1 - var(--in)) * -26deg)) rotateX(calc((1 - var(--in)) * 7deg));
        transform-origin: 100% 50%;
    }

    .film [data-fx~="rewind-in"] {
        --x-in: calc((var(--in) - 1) * 12vw);
        --skew-in: calc((1 - var(--in)) * 12deg);
    }

    .film [data-fx~="ff-in"] {
        --x-in: calc((1 - var(--in)) * 16vw);
        --skew-in: calc((1 - var(--in)) * -16deg);
    }

    .film [data-fx~="grow-x"],
    .film [data-fx~="grow-x-back"] {
        opacity: calc(1 - var(--out));
    }

    .film [data-fx~="grow-x"] {
        clip-path: inset(0 calc((1 - var(--in)) * 100%) 0 0 round 999px);
    }

    .film [data-fx~="grow-x-back"] {
        clip-path: inset(0 0 0 calc((1 - var(--in)) * 100%) round 0.65rem);
    }

    .film [data-fx~="draw"] {
        opacity: calc(min(1, var(--in) * 40) * (1 - var(--out)));
        stroke-dasharray: 1;
        stroke-dashoffset: calc(1 - var(--in));
    }

    .film [data-fx~="deal"] {
        --x-in: calc(var(--dx, 0px) * (1 - var(--in)));
        --y-in: calc(var(--dy, 0px) * (1 - var(--in)));
        --r-in: calc(var(--tilt, 0deg) * (1 - var(--in)));
        --s-in: calc(1 + 0.08 * sin(var(--in) * 180deg));
        opacity: calc(1 - var(--out));
    }

    .film [data-fx~="sunrise"] {
        --y-in: calc((1 - var(--in)) * 45%);
    }

    .film [data-fx~="travel"] {
        opacity: sin(var(--in) * 180deg);
    }

    /* Lights up and goes out again within its window, like an agent at work. */
    .film [data-fx~="flash"] {
        opacity: sin(var(--in) * 180deg);
    }

    /* Visible before one window and after another: the MS initials in the header. */
    .film [data-fx~="swap"] {
        opacity: max(calc(1 - var(--out)), var(--in));
    }

    /* The portrait flies into the header and turns into the avatar. */
    .film [data-fx~="morph"] {
        --k: var(--out);
        opacity: 1;
        translate: calc(var(--mx, 0px) * var(--k)) calc(var(--my, 0px) * var(--k));
        scale: calc(1 + (var(--ms, 1) - 1) * var(--k));
        rotate: calc(var(--r-base, 0deg) * (1 - var(--k)));
        clip-path: inset(calc(var(--k) * var(--crop, 0px)) 0 round calc(var(--photo-radius, 0px) + var(--k) * (var(--mw, 0px) / 2 - var(--photo-radius, 0px))));
    }

    /* ...and comes back out of the header for the end card. */
    .film [data-fx~="morph-in"] {
        --k: calc(1 - var(--in));
        opacity: min(1, calc(var(--in) * 1000));
        translate: calc(var(--mx, 0px) * var(--k)) calc(var(--my, 0px) * var(--k));
        scale: calc(1 + (var(--ms, 1) - 1) * var(--k));
    }

    /* Exits */

    .film [data-fx~="out-left"] {
        --x-out: calc(var(--out) * -10vw);
    }

    .film [data-fx~="out-right"] {
        --x-out: calc(var(--out) * 6rem);
    }

    .film [data-fx~="out-float"] {
        --y-out: calc(var(--out) * -0.55em);
        --b-out: calc(var(--out) * 9px);
    }

    .film [data-fx~="out-lift"] {
        --y-out: calc(var(--out) * -2.5rem);
    }

    .film [data-fx~="out-sink"] {
        --y-out: calc(var(--out) * 1.75rem);
    }

    .film [data-fx~="out-push"] {
        --s-out: calc(1 + var(--out) * 0.5);
        --b-out: calc(var(--out) * 10px);
    }

    .film [data-fx~="out-spin"] {
        --r-out: calc(var(--out) * 30deg);
        --s-out: calc(1 - var(--out) * 0.12);
    }

    .film [data-fx~="out-drop"] {
        --y-out: calc(var(--out) * 45vh);
        --r-out: calc(var(--out) * 5deg);
    }

    .film [data-fx~="out-rewind"] {
        --x-out: calc(var(--out) * 12vw);
        --skew-out: calc(var(--out) * 10deg);
    }

    .film [data-fx~="out-ff"] {
        --x-out: calc(var(--out) * -16vw);
        --skew-out: calc(var(--out) * 14deg);
    }

    /* Shared filters and skews, so elements without them keep filter: none. */

    .film [data-fx~="focus"],
    .film [data-fx~="out-push"],
    .film [data-fx~="out-float"] {
        filter: blur(calc(var(--b-in) + var(--b-out)));
    }

    .film [data-fx~="rewind-in"],
    .film [data-fx~="ff-in"],
    .film [data-fx~="out-rewind"],
    .film [data-fx~="out-ff"] {
        transform: skewX(calc(var(--skew-in) + var(--skew-out)));
    }

    /* The accent line of each strength grows down as the item comes in.
       --in does not inherit, so it is handed to the line through --grow. */
    .film .strength {
        --grow: var(--in);
    }

    .film .strength::before {
        scale: 1 var(--grow);
        transform-origin: top;
    }

    /* The plus after a counter pops in once the number has landed. Inline boxes
       ignore scale, so it gets a box of its own. */
    .film .count-plus {
        display: inline-block;
    }

    /* Text that streams in word by word, like a model writing its answer. */

    .film [data-stream] {
        opacity: calc(1 - var(--out));
    }

    .film [data-stream] .word {
        --age: clamp(0, calc(var(--stream, 1) * (var(--n, 1) + 4) - var(--i, 0)), 1);
        opacity: var(--age);
        color: color-mix(in srgb, var(--aqua) calc((1 - var(--age)) * 80%), currentColor);
    }

    /* Hero words and the opening sequence */

    .film .split-word,
    .film .split-word .intro {
        display: inline-block;
    }

    .film .hero__intro .intro {
        display: block;
    }

    .film-intro .intro {
        animation: intro-rise 1.05s cubic-bezier(0.2, 0.75, 0.2, 1) backwards;
        animation-delay: calc(140ms + var(--d, 0) * 75ms);
    }

    .film-intro .portrait__card.intro {
        animation-name: intro-card;
    }

    .film-intro .orbit-node {
        animation: intro-fade 1.2s ease 0.9s backwards;
    }

    .film-intro .portrait__photo .intro {
        animation-name: intro-photo;
        animation-duration: 1.4s;
    }

    .film-intro .orbit-ring:not(.orbit-ring--dashed),
    .film-intro .orbit-arc {
        animation: orbit-draw 1.9s cubic-bezier(0.3, 0.6, 0.2, 1) 0.3s backwards;
        stroke-dasharray: 1;
    }

    @keyframes intro-rise {
        from {
            opacity: 0;
            translate: 0 0.9em;
        }
    }

    @keyframes intro-fade {
        from {
            opacity: 0;
        }
    }

    @keyframes intro-card {
        from {
            opacity: 0;
            scale: 0.94;
        }
    }

    @keyframes intro-photo {
        from {
            opacity: 0;
            scale: 1.12;
        }
    }

    @keyframes orbit-draw {
        from {
            stroke-dashoffset: 1;
        }
    }

    /* Small screens */

    .player__year {
        display: none;
    }

    @media (max-width: 52rem) {
        .year {
            font-size: min(30vw, 24vh);
            -webkit-text-stroke-width: 1.2px;
        }

        .film-boot .scene--hero .scene__frame {
            top: calc(var(--header-height) + 0.25rem);
        }
    }

    /* Single-column screens (phones, tablets, narrow windows): the intro text keeps
       its size and the portrait takes whatever height is left, so the first screen
       always fits. Phones held sideways keep their two columns. Very short phones
       skip the portrait; the header avatar still appears when the film starts. */
    @media (max-width: 52rem) and (min-height: 501px), (max-width: 52rem) and (max-aspect-ratio: 4 / 3) {
        .film-boot .scene--hero .scene__inner {
            height: 100%;
            margin-block: 0;
        }

        .film .hero {
            display: flex;
            height: 100%;
            flex-direction: column;
            justify-content: center;
        }

        .film .hero__copy {
            flex: none;
        }

        .film .hero__visual {
            display: flex;
            min-height: 0;
            max-height: 34rem;
            flex: 1 1 0;
            align-items: center;
            justify-content: center;
            padding-block: 0.25rem 0;
        }

        .film .portrait {
            width: auto;
            height: 100%;
            max-height: 30rem;
        }
    }

    /* E-mergo can't pan (its two beats crossfade), so its diagrams scale down to
       the height the text leaves instead. */
    @media (max-width: 52rem) and (min-height: 501px), (max-width: 52rem) and (max-aspect-ratio: 4 / 3) {
        .film-boot .scene--emergo .scene__inner {
            display: flex;
            height: 100%;
            flex-direction: column;
            margin-block: 0;
        }

        .film .emergo__head {
            flex: none;
        }

        .film .beats {
            min-height: 0;
            flex: 1 1 0;
            grid-template-rows: minmax(0, 1fr);
        }

        .film .beat {
            display: flex;
            min-height: 0;
            flex-direction: column;
            justify-content: center;
        }

        .film .beat__copy {
            flex: none;
        }

        .film .beat__figure {
            display: flex;
            min-height: 0;
            max-height: 18rem;
            flex: 1 1 0;
            justify-content: center;
        }

        .film .beat__figure svg {
            width: auto;
            max-width: 100%;
            height: 100%;
        }
    }

    @media (max-width: 40rem) {
        .film .hero__visual {
            max-height: 19rem;
        }

        .film .portrait {
            max-height: 17rem;
        }
    }

    @media (max-width: 40rem) and (max-height: 600px) {
        .film .hero__visual {
            display: none;
        }
    }

    @media (max-width: 22rem) {
        .film .hero__actions .intro {
            gap: 0.5rem;
        }

        .film .hero__actions .button {
            padding-inline: 0.85rem;
        }
    }

    /* Phones, and short screens: the year moves from the background into the player bar. */
    @media (max-height: 500px) and (min-aspect-ratio: 4 / 3) {
        .year {
            display: none;
        }

        .player__year {
            display: flex;
            align-items: center;
            color: var(--paper-soft);
            font-size: 0.95rem;
            font-stretch: 125%;
            font-weight: 700;
            line-height: 1;
        }

        .film .player {
            grid-template-columns: auto minmax(9rem, 15rem) minmax(0, 1fr) auto;
        }

        .player__chapters {
            grid-row: 1;
            grid-column: 3;
        }

        .player__year {
            grid-row: 1;
            grid-column: 4;
        }

        .player__label {
            display: none;
        }
    }

    @media (max-width: 40rem) {
        .film {
            --player-height: 4.25rem;
        }

        .year {
            display: none;
        }

        .film .player {
            grid-template-columns: auto minmax(0, 1fr) auto;
            grid-template-rows: minmax(0, 1fr) auto;
            gap: 0.25rem 0.75rem;
            padding-top: 0.35rem;
        }

        .player__year {
            display: flex;
            align-items: center;
            color: var(--paper-soft);
            font-size: 0.95rem;
            font-stretch: 125%;
            font-weight: 700;
            line-height: 1;
        }

        .player__chapters {
            height: 1rem;
            grid-column: 1 / -1;
            gap: 2px;
        }

        .player__chapter {
            height: 1rem;
        }

        .player__label {
            display: none;
        }
    }
}

@media screen and (prefers-reduced-motion: reduce) {
    .film [data-fx] {
        filter: none !important;
        rotate: none !important;
        scale: none !important;
        transform: none !important;
        translate: none !important;
    }

    .film [data-fx~="wipe"] {
        -webkit-mask-image: none;
        mask-image: none;
        opacity: calc(var(--in) * (1 - var(--out)));
    }

    .film [data-fx~="morph"] {
        clip-path: none;
        opacity: calc(1 - var(--out));
    }

    .film [data-fx~="morph-in"],
    .film [data-fx~="deal"],
    .film [data-fx~="grow-x"],
    .film [data-fx~="grow-x-back"],
    .film [data-fx~="draw"],
    .film [data-stream] {
        clip-path: none;
        opacity: calc(var(--in) * (1 - var(--out)));
        stroke-dashoffset: 0;
    }

    .film [data-stream] .word {
        color: inherit;
        opacity: 1;
    }

    .film .strength::before {
        scale: none;
    }

    .film-intro .intro,
    .film-intro .orbit-ring,
    .film-intro .orbit-arc,
    .film-intro .orbit-node,
    .player__cue,
    .pulse {
        animation: none !important;
    }

    .film .diagram__packet,
    .film .diagram__glow {
        display: none;
    }

    .film-boot .stage::after {
        transition: none;
    }
}

@media print {
    .topbar,
    .player,
    .film-track,
    .watch,
    .hero__visual,
    .keytakes__media .watch-button {
        display: none !important;
    }
}