/* =========================================================
   GIANMARCO SPINA
   THE LAST TAKE
   INTERACTIVE CINEMA
========================================================= */


:root {

    --lt-bg: #090909;
    --lt-surface: #111110;
    --lt-surface-2: #171614;

    --lt-white: #f5f2eb;
    --lt-muted: #898680;
    --lt-gold: #d8b879;

    --lt-line:
        rgba(216, 184, 121, .30);

    --lt-line-soft:
        rgba(255, 255, 255, .09);

}


/* =========================================================
   PAGE
========================================================= */

body.last-take-page {

    margin: 0;

    min-width: 320px;

    background:
        var(--lt-bg);

    color:
        var(--lt-white);

    font-family:
        Helvetica,
        Arial,
        sans-serif;

    overflow-x:
        hidden;

    -webkit-font-smoothing:
        antialiased;

}


.last-take-page *,
.last-take-page *::before,
.last-take-page *::after {

    box-sizing:
        border-box;

}


.last-take-page button {

    font:
        inherit;

}


.last-take-page button,
.last-take-page a {

    -webkit-tap-highlight-color:
        transparent;

}


.last-take-page button:focus-visible,
.last-take-page a:focus-visible {

    outline:
        1px solid
        var(--lt-gold);

    outline-offset:
        4px;

}


[hidden] {

    display:
        none !important;

}


/* =========================================================
   LANGUAGE GATEWAY
========================================================= */

.lt-gateway {

    position:
        fixed;

    inset:
        0;

    z-index:
        10000;

    display:
        grid;

    place-items:
        center;

    padding:
        30px;

    background:
        #090909;

}


.lt-gateway::before {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    pointer-events:
        none;

    background:

        radial-gradient(
            circle at 65% 45%,
            rgba(216, 184, 121, .055),
            transparent 35%
        );

}


.lt-gateway-inner {

    position:
        relative;

    z-index:
        2;

    width:
        min(620px, 100%);

}


.lt-gateway-top {

    display:
        flex;

    justify-content:
        space-between;

    gap:
        20px;

    padding-bottom:
        18px;

    border-bottom:
        1px solid
        var(--lt-line);

    color:
        var(--lt-muted);

    font-size:
        9px;

    letter-spacing:
        .17em;

}


.lt-gateway-top span:first-child {

    color:
        var(--lt-gold);

}


.lt-gateway h1 {

    margin:
        70px 0 40px;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(68px, 11vw, 130px);

    font-weight:
        400;

    line-height:
        .79;

    letter-spacing:
        -.075em;

}


.lt-gateway h1 em {

    color:
        var(--lt-gold);

    font-weight:
        400;

}


.lt-gateway-copy {

    width:
        min(460px, 100%);

    margin-bottom:
        39px;

}


.lt-gateway-copy strong {

    display:
        block;

    margin-bottom:
        10px;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        23px;

    font-weight:
        400;

    line-height:
        1.25;

}


.lt-gateway-copy span {

    display:
        block;

    color:
        var(--lt-muted);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        15px;

    line-height:
        1.55;

}


.lt-language-buttons {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        10px;

}


.lt-language-buttons button {

    min-height:
        68px;

    padding:
        17px;

    border:
        1px solid
        var(--lt-line);

    background:
        transparent;

    color:
        var(--lt-white);

    font-size:
        10px;

    letter-spacing:
        .16em;

    cursor:
        pointer;

    transition:
        background 250ms ease,
        color 250ms ease,
        border-color 250ms ease,
        transform 250ms ease;

}


.lt-language-buttons button:hover {

    border-color:
        var(--lt-gold);

    background:
        var(--lt-gold);

    color:
        #090909;

    transform:
        translateY(-2px);

}


.lt-gateway-bottom {

    display:
        flex;

    justify-content:
        space-between;

    gap:
        20px;

    margin-top:
        54px;

    color:
        var(--lt-muted);

    font-size:
        8px;

    letter-spacing:
        .15em;

}


.lt-gateway.is-leaving {

    animation:
        ltGatewayLeave
        850ms
        cubic-bezier(.76, 0, .24, 1)
        forwards;

    pointer-events:
        none;

}


/* =========================================================
   HERO
========================================================= */

.lt-hero {

    position:
        relative;

    min-height:
        100svh;

    display:
        flex;

    align-items:
        center;

    padding:
        145px 5% 70px;

    overflow:
        hidden;

}


.lt-hero::after {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    pointer-events:
        none;

    background:

        radial-gradient(
            circle at 72% 48%,
            rgba(216, 184, 121, .05),
            transparent 37%
        );

}


.lt-hero-meta {

    position:
        absolute;

    top:
        125px;

    left:
        5%;

    right:
        5%;

    z-index:
        2;

    display:
        flex;

    justify-content:
        space-between;

    gap:
        20px;

    color:
        var(--lt-muted);

    font-size:
        9px;

    letter-spacing:
        .16em;

}


.lt-hero-meta span:first-child {

    color:
        var(--lt-gold);

}


.lt-hero-center {

    position:
        relative;

    z-index:
        2;

    width:
        min(1180px, 100%);

    margin:
        auto;

}


.lt-kicker {

    display:
        block;

    margin-bottom:
        32px;

    color:
        var(--lt-gold);

    font-size:
        10px;

    letter-spacing:
        .22em;

}


.lt-hero h1 {

    margin:
        0;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(82px, 13vw, 190px);

    font-weight:
        400;

    line-height:
        .72;

    letter-spacing:
        -.085em;

}


.lt-hero h1 em {

    color:
        transparent;

    -webkit-text-stroke:
        1px var(--lt-gold);

    font-weight:
        400;

}


.lt-hero-description {

    width:
        min(480px, 100%);

    margin:
        48px 0 0 auto;

    color:
        #cbc6bc;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(16px, 1.45vw, 21px);

    line-height:
        1.55;

}


.lt-start-row {

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    gap:
        25px;

    margin-top:
        52px;

    padding-top:
        19px;

    border-top:
        1px solid
        var(--lt-line);

}


.lt-start-row span {

    color:
        var(--lt-muted);

    font-size:
        8px;

    letter-spacing:
        .16em;

}


.lt-start {

    padding:
        0;

    border:
        0;

    background:
        transparent;

    color:
        var(--lt-white);

    font-size:
        10px;

    letter-spacing:
        .17em;

    cursor:
        pointer;

    transition:
        color 220ms ease,
        transform 250ms ease;

}


.lt-start:hover {

    color:
        var(--lt-gold);

    transform:
        translateY(-2px);

}


/* =========================================================
   GAME
========================================================= */

.lt-game {

    position:
        relative;

    min-height:
        100svh;

    padding:
        130px 5% 90px;

    border-top:
        1px solid
        var(--lt-line-soft);

}


.lt-game-layout {

    width:
        min(1500px, 100%);

    margin:
        auto;

    display:
        grid;

    grid-template-columns:
        minmax(0, 1.5fr)
        minmax(320px, .5fr);

    gap:
        clamp(35px, 5vw, 80px);

    align-items:
        start;

}


/* =========================================================
   MONITOR META
========================================================= */

.lt-monitor-top,
.lt-monitor-bottom {

    display:
        flex;

    justify-content:
        space-between;

    gap:
        20px;

    color:
        var(--lt-muted);

    font-size:
        8px;

    letter-spacing:
        .15em;

}


.lt-monitor-top {

    margin-bottom:
        12px;

}


.lt-monitor-bottom {

    margin-top:
        13px;

}


#monitorStatus {

    color:
        var(--lt-gold);

}


/* =========================================================
   MONITOR
========================================================= */

.lt-monitor {

    position:
        relative;

    width:
        100%;

    aspect-ratio:
        16 / 9;

    overflow:
        hidden;

    background:
        #151515;

    border:
        1px solid
        rgba(216, 184, 121, .28);

    isolation:
        isolate;

    box-shadow:
        0 25px 80px
        rgba(0, 0, 0, .22);

}


.lt-world {

    position:
        absolute;

    inset:
        0;

    overflow:
        hidden;

    transform-origin:
        50% 45%;

    transition:
        transform
        900ms
        cubic-bezier(.2, .8, .2, 1),
        filter
        800ms ease;

}


/* =========================================================
   CAMERA
========================================================= */

.camera-wide
.lt-world {

    transform:
        scale(1);

}


.camera-medium
.lt-world {

    transform:
        scale(1.38)
        translate(-3%, 3%);

}


.camera-close
.lt-world {

    transform:
        scale(2.22)
        translate(-4%, 11%);

}


/* =========================================================
   ROOM
========================================================= */

.lt-wall {

    position:
        absolute;

    inset:
        0 0 27%;

    background:
        var(--room, #595551);

    transition:
        background
        700ms ease;

}


.lt-wall::after {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    background:

        linear-gradient(
            90deg,
            rgba(0, 0, 0, .15),
            transparent 25%,
            transparent 68%,
            rgba(0, 0, 0, .18)
        );

    pointer-events:
        none;

}


.lt-floor {

    position:
        absolute;

    left:
        -8%;

    right:
        -8%;

    bottom:
        -19%;

    height:
        53%;

    background:

        linear-gradient(
            #292723,
            #111
        );

    transform:
        perspective(420px)
        rotateX(58deg);

    transform-origin:
        top;

    transition:
        background
        700ms ease;

}


.lt-floor::after {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    opacity:
        .18;

    background:

        repeating-linear-gradient(
            90deg,
            transparent 0,
            transparent 13%,
            rgba(255,255,255,.08) 13.4%
        );

}


/* =========================================================
   WINDOW
========================================================= */

.lt-window {

    position:
        absolute;

    left:
        9%;

    top:
        13%;

    width:
        25%;

    height:
        43%;

    border:
        7px solid
        #252322;

    background:
        var(--window, #80766e);

    box-shadow:
        inset 0 0 0 2px
        rgba(255,255,255,.05);

    transition:
        background
        700ms ease,
        box-shadow
        700ms ease;

}


.lt-window::before,
.lt-window::after {

    content:
        "";

    position:
        absolute;

    background:
        #252322;

}


.lt-window::before {

    left:
        50%;

    top:
        0;

    bottom:
        0;

    width:
        4px;

    transform:
        translateX(-50%);

}


.lt-window::after {

    left:
        0;

    right:
        0;

    top:
        52%;

    height:
        4px;

}


/* =========================================================
   WINDOW LIGHT
========================================================= */

.lt-window-light {

    position:
        absolute;

    left:
        23%;

    top:
        17%;

    width:
        52%;

    height:
        79%;

    pointer-events:
        none;

    opacity:
        .68;

    clip-path:
        polygon(
            0 0,
            31% 0,
            100% 100%,
            32% 100%
        );

    background:

        linear-gradient(
            101deg,
            var(
                --light,
                rgba(255,230,200,.2)
            ),
            transparent
        );

    mix-blend-mode:
        screen;

    transition:
        background
        700ms ease,
        opacity
        700ms ease;

}


/* =========================================================
   TABLE
========================================================= */

.lt-table {

    position:
        absolute;

    right:
        9%;

    bottom:
        17%;

    width:
        31%;

    height:
        10%;

    z-index:
        4;

    background:
        #302a24;

    box-shadow:
        0 9px 12px
        rgba(0,0,0,.42);

}


.lt-table::before,
.lt-table::after {

    content:
        "";

    position:
        absolute;

    top:
        100%;

    width:
        7%;

    height:
        190%;

    background:
        #211d1a;

}


.lt-table::before {

    left:
        8%;

}


.lt-table::after {

    right:
        8%;

}


/* =========================================================
   LETTER
========================================================= */

.lt-letter {

    position:
        absolute;

    z-index:
        6;

    right:
        17%;

    bottom:
        29%;

    width:
        11%;

    aspect-ratio:
        1.48;

    background:
        #d9d2c4;

    box-shadow:
        0 4px 9px
        rgba(0,0,0,.28);

    transform:
        rotate(-12deg);

    transition:
        transform
        650ms
        cubic-bezier(.2,.8,.2,1),
        background
        600ms ease,
        box-shadow
        600ms ease;

}


.lt-letter::before {

    content:
        "";

    position:
        absolute;

    left:
        0;

    top:
        0;

    width:
        100%;

    height:
        52%;

    clip-path:
        polygon(
            0 0,
            50% 100%,
            100% 0
        );

    border:
        1px solid
        rgba(0,0,0,.14);

}


.lt-letter::after {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    border:
        1px solid
        rgba(0,0,0,.15);

}


/* =========================================================
   ACTOR
========================================================= */

.lt-actor {

    position:
        absolute;

    z-index:
        5;

    left:
        39%;

    bottom:
        8%;

    width:
        24%;

    height:
        70%;

    overflow:
        visible;

    filter:
        drop-shadow(
            9px 11px 8px
            rgba(0,0,0,.42)
        );

    transition:
        transform
        700ms
        cubic-bezier(.2,.8,.2,1),
        filter
        700ms ease;

}


.lt-actor-body {

    fill:
        #27282a;

    transition:
        fill
        600ms ease;

}


.lt-actor-neck,
.lt-actor-face {

    fill:
        #b68e73;

    transition:
        fill
        600ms ease;

}


.lt-hair {

    fill:
        #211d1a;

}


.hair-ada,
.hair-noah {

    display:
        none;

}


.actor-ada
.hair-leo,

.actor-noah
.hair-leo {

    display:
        none;

}


.actor-ada
.hair-ada {

    display:
        block;

}


.actor-noah
.hair-noah {

    display:
        block;

}


.actor-ada
.lt-actor-body {

    fill:
        #533934;

}


.actor-ada
.lt-actor-face,

.actor-ada
.lt-actor-neck {

    fill:
        #c48c6d;

}


.actor-noah
.lt-actor-body {

    fill:
        #33453e;

}


.actor-noah
.lt-actor-face,

.actor-noah
.lt-actor-neck {

    fill:
        #9e7762;

}


/* =========================================================
   GENRES
========================================================= */

.genre-horror {

    --room:
        #303339;

    --window:
        #651d2a;

    --light:
        rgba(156,18,39,.38);

}


.genre-horror
.lt-floor {

    background:

        linear-gradient(
            #17191b,
            #040405
        );

}


.genre-horror
.lt-letter {

    background:
        #c5b5a8;

    box-shadow:
        0 0 25px
        rgba(158,23,51,.46);

}


.genre-horror
.lt-world {

    filter:
        saturate(.82)
        contrast(1.08);

}



.genre-drama {

    --room:
        #8d7b65;

    --window:
        #e4b489;

    --light:
        rgba(255,217,155,.43);

}


.genre-drama
.lt-floor {

    background:

        linear-gradient(
            #514438,
            #241f1b
        );

}



.genre-fantasy {

    --room:
        #413551;

    --window:
        #786aab;

    --light:
        rgba(173,120,255,.44);

}


.genre-fantasy
.lt-floor {

    background:

        linear-gradient(
            #29213c,
            #0c0911
        );

}


.genre-fantasy
.lt-letter {

    background:
        #ded0f4;

    box-shadow:
        0 0 30px
        rgba(172,126,255,.55);

}


/* =========================================================
   AMBIENT
========================================================= */

.lt-ambient {

    position:
        absolute;

    inset:
        0;

    z-index:
        3;

    pointer-events:
        none;

    mix-blend-mode:
        screen;

    transition:
        background
        700ms ease,
        opacity
        700ms ease;

}


.genre-horror
.lt-ambient {

    background:

        radial-gradient(
            circle at 82% 41%,
            rgba(155,19,46,.33),
            transparent 42%
        );

}


.genre-drama
.lt-ambient {

    background:

        linear-gradient(
            110deg,
            rgba(255,215,160,.25),
            transparent 60%
        );

}


.genre-fantasy
.lt-ambient {

    background:

        radial-gradient(
            circle at 72% 40%,
            rgba(170,125,246,.48),
            transparent 48%
        );

}


/* =========================================================
   OMEN
========================================================= */

.lt-omen {

    position:
        absolute;

    z-index:
        7;

    opacity:
        0;

    pointer-events:
        none;

    transition:
        all
        650ms
        cubic-bezier(.2,.8,.2,1);

}


.story-active
.lt-omen {

    opacity:
        .7;

}


/* HORROR */

.genre-horror
.lt-omen {

    right:
        8%;

    top:
        21%;

    width:
        8%;

    height:
        48%;

    border-radius:
        50% 50% 5% 5%;

    background:

        linear-gradient(
            #040405,
            #010102,
            transparent
        );

    filter:
        blur(4px);

}


/* DRAMA */

.genre-drama
.lt-omen {

    right:
        18%;

    top:
        40%;

    width:
        13%;

    aspect-ratio:
        1.3;

    border:
        4px solid
        #ded3bd;

    background:

        linear-gradient(
            140deg,
            #776754,
            #28231f
        );

    transform:
        rotate(-13deg);

    box-shadow:
        0 5px 12px
        rgba(0,0,0,.45);

}


/* FANTASY */

.genre-fantasy
.lt-omen {

    right:
        9%;

    top:
        22%;

    width:
        18%;

    aspect-ratio:
        1;

    border-radius:
        50%;

    border:
        2px solid
        #ddcaff;

    background:

        radial-gradient(
            circle,
            rgba(195,163,255,.8),
            rgba(118,77,185,.35) 55%,
            transparent 72%
        );

    box-shadow:

        0 0 22px
        #9473eb,

        0 0 55px
        rgba(153,115,222,.55);

}


/* =========================================================
   PREVIEW STATES
========================================================= */

.preview-choice-0
.lt-letter {

    transform:
        rotate(-22deg)
        translateY(-14px)
        scale(1.08);

}


.preview-choice-1
.lt-omen {

    opacity:
        1;

    transform:
        scale(1.14);

}


.preview-choice-2
.lt-window-light {

    opacity:
        .18;

}


.preview-choice-2
.lt-actor {

    transform:
        translateX(-6%);

}


/* =========================================================
   STORY SCENE STATES
========================================================= */

.story-scene-1
.lt-letter {

    transform:
        rotate(-17deg)
        translateY(-7px);

}


.story-scene-2
.lt-actor {

    transform:
        translateX(6%);

}


.story-scene-3
.lt-actor {

    transform:
        translateX(11%);

}


/* =========================================================
   MONITOR UI
========================================================= */

.lt-frame-guides {

    position:
        absolute;

    inset:
        5%;

    z-index:
        20;

    pointer-events:
        none;

    border:
        1px solid
        rgba(255,255,255,.16);

}


.lt-frame-guides::before {

    content:
        "";

    position:
        absolute;

    left:
        33.333%;

    top:
        0;

    bottom:
        0;

    width:
        1px;

    background:
        rgba(255,255,255,.08);

    box-shadow:
        calc(33.333vw) 0
        transparent;

}


.lt-scene-label {

    position:
        absolute;

    z-index:
        30;

    left:
        20px;

    top:
        17px;

    padding:
        7px 9px;

    background:
        rgba(8,8,8,.62);

    backdrop-filter:
        blur(8px);

    color:
        var(--lt-white);

    font-size:
        7px;

    letter-spacing:
        .15em;

}


.lt-frame-label {

    position:
        absolute;

    z-index:
        30;

    right:
        20px;

    bottom:
        17px;

    color:
        rgba(245,242,235,.7);

    font-size:
        7px;

    letter-spacing:
        .14em;

}


.lt-rec {

    position:
        absolute;

    right:
        20px;

    top:
        18px;

    z-index:
        30;

    color:
        #bd3546;

    font-size:
        7px;

    letter-spacing:
        .16em;

}


.lt-rec::before {

    content:
        "";

    display:
        inline-block;

    width:
        6px;

    height:
        6px;

    margin-right:
        6px;

    border-radius:
        50%;

    background:
        currentColor;

    animation:
        ltRecBlink
        1.25s infinite;

}


/* =========================================================
   MONITOR CAPTION
========================================================= */

.lt-monitor-caption {

    min-height:
        48px;

    margin:
        18px 0 0;

    color:
        #c8c3b8;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(14px, 1.2vw, 18px);

    line-height:
        1.5;

}


/* =========================================================
   PANEL
========================================================= */

.lt-panel {

    position:
        sticky;

    top:
        120px;

}


.lt-progress-head {

    display:
        flex;

    justify-content:
        space-between;

    gap:
        20px;

    color:
        var(--lt-muted);

    font-size:
        8px;

    letter-spacing:
        .16em;

}


.lt-progress-bar {

    width:
        100%;

    height:
        1px;

    margin:
        15px 0 44px;

    overflow:
        hidden;

    background:
        rgba(255,255,255,.12);

}


#progressFill {

    display:
        block;

    width:
        0;

    height:
        100%;

    background:
        var(--lt-gold);

    transition:
        width
        500ms
        cubic-bezier(.2,.8,.2,1);

}


.lt-panel h2 {

    margin:
        0;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(38px, 4.4vw, 70px);

    font-weight:
        400;

    line-height:
        .98;

    letter-spacing:
        -.05em;

}


.lt-panel h2 em {

    color:
        var(--lt-gold);

    font-weight:
        400;

}


.lt-question {

    margin:
        21px 0 35px;

    max-width:
        410px;

    color:
        var(--lt-muted);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        14px;

    line-height:
        1.55;

}


/* =========================================================
   CHOICES
========================================================= */

.lt-options {

    display:
        flex;

    flex-direction:
        column;

    border-top:
        1px solid
        rgba(255,255,255,.12);

}


.lt-choice {

    position:
        relative;

    width:
        100%;

    display:
        grid;

    grid-template-columns:
        29px 1fr auto;

    gap:
        13px;

    align-items:
        start;

    padding:
        20px 0;

    border:
        0;

    border-bottom:
        1px solid
        rgba(255,255,255,.12);

    background:
        transparent;

    color:
        var(--lt-white);

    text-align:
        left;

    cursor:
        pointer;

    transition:
        color
        220ms ease,
        padding
        300ms
        cubic-bezier(.2,.8,.2,1),
        background
        250ms ease;

}


.lt-choice:hover,
.lt-choice:focus-visible {

    color:
        var(--lt-gold);

    padding-left:
        8px;

    background:
        rgba(216,184,121,.025);

}


.lt-choice-index {

    padding-top:
        3px;

    color:
        var(--lt-muted);

    font-size:
        8px;

    letter-spacing:
        .13em;

}


.lt-choice-title {

    display:
        block;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        18px;

    font-weight:
        400;

    line-height:
        1.2;

}


.lt-choice-description {

    display:
        block;

    max-width:
        330px;

    margin-top:
        7px;

    color:
        var(--lt-muted);

    font-size:
        9px;

    line-height:
        1.5;

    letter-spacing:
        .035em;

}


.lt-choice-arrow {

    padding-top:
        2px;

    font-size:
        14px;

    transition:
        transform
        280ms ease;

}


.lt-choice:hover
.lt-choice-arrow {

    transform:
        translate(4px,-4px);

}


/* =========================================================
   PANEL NOTE
========================================================= */

.lt-panel-note {

    margin:
        21px 0 0;

    color:
        var(--lt-muted);

    font-size:
        7px;

    line-height:
        1.6;

    letter-spacing:
        .13em;

}


/* =========================================================
   QUICK CUT
========================================================= */

.lt-cut {

    position:
        fixed;

    inset:
        0;

    z-index:
        8000;

    display:
        grid;

    place-items:
        center;

    background:
        #050505;

    opacity:
        0;

    pointer-events:
        none;

}


.lt-cut span {

    color:
        var(--lt-gold);

    font-size:
        9px;

    letter-spacing:
        .2em;

}


.lt-cut.is-active {

    animation:
        ltQuickCut
        620ms
        cubic-bezier(.76,0,.24,1);

}


/* =========================================================
   FINAL SEQUENCE
========================================================= */

.lt-final-sequence {

    position:
        fixed;

    inset:
        0;

    z-index:
        7000;

    background:
        #050505;

}


.lt-final-inner {

    position:
        absolute;

    inset:
        0;

    display:
        flex;

    flex-direction:
        column;

    padding:
        5%;

}


.lt-final-top {

    display:
        flex;

    justify-content:
        space-between;

    gap:
        20px;

    color:
        var(--lt-muted);

    font-size:
        8px;

    letter-spacing:
        .16em;

}


.lt-final-frame {

    position:
        relative;

    flex:
        1;

    display:
        grid;

    place-items:
        center;

    margin:
        40px 0;

    overflow:
        hidden;

    border:
        1px solid
        rgba(216,184,121,.22);

    background:
        #090909;

}


.lt-final-frame::before {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    background:

        radial-gradient(
            circle at center,
            rgba(216,184,121,.07),
            transparent 40%
        );

}


.lt-final-visual {

    position:
        absolute;

    inset:
        0;

    display:
        grid;

    place-items:
        center;

    opacity:
        0;

    transform:
        scale(1.06);

}


.lt-final-visual::before {

    content:
        "";

    width:
        clamp(80px,13vw,190px);

    aspect-ratio:
        1;

    border:
        1px solid
        var(--lt-gold);

    transform:
        rotate(45deg);

    opacity:
        .32;

}


.lt-final-visual span {

    position:
        absolute;

    width:
        min(550px,80%);

    text-align:
        center;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(24px,4vw,60px);

    line-height:
        1.1;

}


.lt-final-visual.is-visible {

    animation:
        ltFinalShot
        2600ms
        ease
        forwards;

}


.lt-final-actions {

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    gap:
        20px;

    color:
        var(--lt-muted);

    font-size:
        8px;

    letter-spacing:
        .14em;

}


.lt-final-actions button {

    padding:
        0;

    border:
        0;

    background:
        transparent;

    color:
        var(--lt-white);

    font-size:
        8px;

    letter-spacing:
        .14em;

    cursor:
        pointer;

}


.lt-final-actions button:hover {

    color:
        var(--lt-gold);

}


/* =========================================================
   ENDING
========================================================= */

.lt-ending {

    position:
        relative;

    min-height:
        100svh;

    padding:
        130px 5% 90px;

    background:
        var(--lt-bg);

}


.lt-ending-inner {

    width:
        min(1200px,100%);

    margin:
        auto;

}


.lt-ending-label {

    color:
        var(--lt-gold);

    font-size:
        9px;

    letter-spacing:
        .18em;

}


.lt-ending h2 {

    margin:
        38px 0 55px;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(78px,12vw,170px);

    font-weight:
        400;

    line-height:
        .75;

    letter-spacing:
        -.07em;

}


.lt-ending h2 em {

    color:
        var(--lt-gold);

    font-weight:
        400;

}


.lt-ending-story {

    width:
        min(700px,100%);

    margin:
        0 0 80px auto;

    color:
        #cbc6bb;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(18px,2vw,27px);

    line-height:
        1.56;

}


/* =========================================================
   FINAL MONITOR
========================================================= */

.lt-final-monitor {

    padding:
        18px;

    border:
        1px solid
        var(--lt-line);

    background:
        var(--lt-surface);

}


.lt-final-monitor-head {

    display:
        flex;

    justify-content:
        space-between;

    gap:
        20px;

    margin-bottom:
        15px;

    color:
        var(--lt-muted);

    font-size:
        8px;

    letter-spacing:
        .15em;

}


.lt-final-image {

    position:
        relative;

    aspect-ratio:
        16 / 7;

    display:
        grid;

    place-items:
        center;

    overflow:
        hidden;

    background:

        radial-gradient(
            circle at 50% 50%,
            rgba(216,184,121,.13),
            transparent 45%
        ),

        #050505;

}


.lt-final-image::before {

    content:
        "";

    width:
        min(150px,24vw);

    aspect-ratio:
        1;

    border-radius:
        50%;

    border:
        1px solid
        var(--lt-gold);

    opacity:
        .36;

    box-shadow:
        0 0 90px
        rgba(216,184,121,.12);

}


.lt-final-image span {

    position:
        absolute;

    width:
        80%;

    text-align:
        center;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(18px,2.5vw,34px);

}


.lt-final-caption {

    margin:
        14px 0 0;

    color:
        var(--lt-muted);

    font-size:
        8px;

    letter-spacing:
        .13em;

}


/* =========================================================
   THANKS
========================================================= */

.lt-thanks {

    display:
        grid;

    grid-template-columns:
        1fr 1px 1fr;

    gap:
        clamp(30px,6vw,80px);

    margin-top:
        95px;

    padding-top:
        55px;

    border-top:
        1px solid
        rgba(255,255,255,.10);

}


.lt-thanks-divider {

    width:
        1px;

    background:
        rgba(255,255,255,.10);

}


.lt-thanks h3 {

    margin:
        0 0 25px;

    color:
        var(--lt-gold);

    font-size:
        9px;

    font-weight:
        400;

    letter-spacing:
        .17em;

}


.lt-thanks p {

    margin:
        0;

    color:
        #aaa59c;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        14px;

    line-height:
        1.65;

}


.lt-signature {

    margin-top:
        30px !important;

    color:
        var(--lt-white) !important;

}


/* =========================================================
   END ACTIONS
========================================================= */

.lt-ending-actions {

    display:
        grid;

    grid-template-columns:
        repeat(3,1fr);

    margin-top:
        80px;

    border-top:
        1px solid
        var(--lt-line);

    border-bottom:
        1px solid
        var(--lt-line);

}


.lt-ending-actions button,
.lt-ending-actions a {

    min-height:
        72px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        15px;

    padding:
        0 19px;

    border:
        0;

    border-right:
        1px solid
        var(--lt-line);

    background:
        transparent;

    color:
        var(--lt-white);

    text-decoration:
        none;

    font-size:
        8px;

    letter-spacing:
        .13em;

    cursor:
        pointer;

    transition:
        color
        220ms ease,
        background
        220ms ease;

}


.lt-ending-actions > *:last-child {

    border-right:
        0;

}


.lt-ending-actions button:hover,
.lt-ending-actions a:hover {

    background:
        rgba(216,184,121,.06);

    color:
        var(--lt-gold);

}


/* =========================================================
   FOOTER
========================================================= */

.lt-footer {

    display:
        flex;

    justify-content:
        space-between;

    gap:
        20px;

    padding:
        30px 5%;

    border-top:
        1px solid
        rgba(255,255,255,.08);

    color:
        var(--lt-muted);

    font-size:
        8px;

    letter-spacing:
        .14em;

}


/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes ltGatewayLeave {

    from {

        transform:
            translateY(0);

    }

    to {

        transform:
            translateY(-101%);

    }

}


@keyframes ltRecBlink {

    0%,
    45% {

        opacity:
            1;

    }

    46%,
    100% {

        opacity:
            .25;

    }

}


@keyframes ltQuickCut {

    0% {

        opacity:
            0;

    }

    25%,
    65% {

        opacity:
            1;

    }

    100% {

        opacity:
            0;

    }

}


@keyframes ltFinalShot {

    0% {

        opacity:
            0;

        transform:
            scale(1.06);

    }

    18% {

        opacity:
            1;

    }

    82% {

        opacity:
            1;

    }

    100% {

        opacity:
            0;

        transform:
            scale(1);

    }

}


/* =========================================================
   RESPONSIVE
========================================================= */

@media
(max-width: 900px) {

    .lt-game {

        padding-top:
            115px;

    }


    .lt-game-layout {

        grid-template-columns:
            1fr;

    }


    .lt-panel {

        position:
            relative;

        top:
            auto;

    }


    .lt-monitor-caption {

        min-height:
            auto;

        margin-bottom:
            40px;

    }


    .lt-thanks {

        grid-template-columns:
            1fr;

    }


    .lt-thanks-divider {

        width:
            100%;

        height:
            1px;

    }


    .lt-ending-actions {

        grid-template-columns:
            1fr;

    }


    .lt-ending-actions button,
    .lt-ending-actions a {

        border-right:
            0;

        border-bottom:
            1px solid
            var(--lt-line);

    }

}


@media
(max-width: 600px) {

    .lt-language-buttons {

        grid-template-columns:
            1fr;

    }


    .lt-gateway-bottom {

        flex-direction:
            column;

    }


    .lt-hero {

        padding-top:
            125px;

    }


    .lt-hero-meta {

        top:
            100px;

    }


    .lt-hero-meta span:last-child {

        display:
            none;

    }


    .lt-hero h1 {

        font-size:
            clamp(
                67px,
                24vw,
                105px
            );

    }


    .lt-start-row {

        align-items:
            flex-end;

    }


    .lt-start-row span {

        max-width:
            180px;

    }


    .lt-monitor-top,
    .lt-monitor-bottom {

        font-size:
            6px;

    }


    .lt-frame-guides {

        inset:
            4%;

    }


    .lt-panel h2 {

        font-size:
            41px;

    }


    .lt-choice-title {

        font-size:
            16px;

    }


    .lt-ending {

        padding-top:
            110px;

    }


    .lt-footer {

        flex-direction:
            column;

    }

}


@media
(prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {

        scroll-behavior:
            auto !important;

        animation-duration:
            .01ms !important;

        transition-duration:
            .01ms !important;

    }

}/* =========================================================
   THE LAST TAKE — VISUAL REFINEMENT
   START CTA + DIRECTOR'S CUT ENDING
========================================================= */


/* =========================================================
   HERO — MORE BREATHING ROOM BEFORE ENTER MONITOR
========================================================= */

.lt-hero-description {

    margin-top:
        56px;

}


.lt-start-row {

    position:
        relative;

    margin-top:
        82px;

    padding-top:
        28px;

    min-height:
        80px;

    border-top:
        1px solid
        rgba(216, 184, 121, .34);

}


/*
   Small editorial marker above the line.
*/

.lt-start-row::before {

    content:
        "DIRECTOR'S ENTRY";

    position:
        absolute;

    left:
        0;

    top:
        -20px;

    color:
        var(--lt-gold);

    font-size:
        7px;

    letter-spacing:
        .18em;

}


/*
   Information on the left.
*/

.lt-start-row > span {

    max-width:
        330px;

    line-height:
        1.55;

    color:
        #77736c;

}


/*
   Main CTA.
*/

.lt-start {

    position:
        relative;

    flex-shrink:
        0;

    padding:
        15px 0 15px 30px;

    color:
        var(--lt-white);

    font-size:
        10px;

    letter-spacing:
        .18em;

    text-align:
        right;

}


/*
   Small gold circle makes the CTA feel
   like entering / recording rather than another line of text.
*/

.lt-start::before {

    content:
        "";

    position:
        absolute;

    left:
        0;

    top:
        50%;

    width:
        8px;

    height:
        8px;

    border:
        1px solid
        var(--lt-gold);

    border-radius:
        50%;

    transform:
        translateY(-50%);

    transition:
        background
        250ms ease,
        box-shadow
        250ms ease,
        transform
        250ms ease;

}


.lt-start:hover::before {

    background:
        var(--lt-gold);

    box-shadow:
        0 0 18px
        rgba(216, 184, 121, .45);

    transform:
        translateY(-50%)
        scale(1.15);

}


.lt-start:hover {

    transform:
        translateX(5px);

}



/* =========================================================
   ENDING — EDITORIAL STRUCTURE
========================================================= */

.lt-ending {

    padding-top:
        155px;

}


/*
   Less gigantic END.
   Still cinematic but gives room to the content.
*/

.lt-ending h2 {

    margin:
        42px 0 80px;

    font-size:
        clamp(
            72px,
            10vw,
            145px
        );

}


/* =========================================================
   ENDING STORY — TURN INTO A FILM SYNOPSIS BLOCK
========================================================= */

.lt-ending-story {

    position:
        relative;

    width:
        min(
            720px,
            88%
        );

    margin:
        0 0 100px auto;

    padding:
        0 0 0 34px;

    border-left:
        1px solid
        var(--lt-gold);

    color:
        #c9c3b8;

}


.lt-ending-story::before {

    content:
        "FINAL NARRATIVE";

    position:
        absolute;

    left:
        34px;

    top:
        -30px;

    color:
        var(--lt-muted);

    font-family:
        Helvetica,
        Arial,
        sans-serif;

    font-size:
        7px;

    letter-spacing:
        .18em;

}



/* =========================================================
   DIRECTOR CARD
   Injected through JavaScript
========================================================= */

.lt-director-card {

    display:
        grid;

    grid-template-columns:
        1.2fr
        repeat(3, 1fr);

    margin:
        0 0 32px;

    border:
        1px solid
        rgba(216, 184, 121, .25);

    background:
        #0d0d0c;

}


.lt-director-card-cell {

    position:
        relative;

    min-height:
        116px;

    padding:
        18px;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        space-between;

    border-right:
        1px solid
        rgba(255, 255, 255, .08);

}


.lt-director-card-cell:last-child {

    border-right:
        0;

}


.lt-director-card-label {

    color:
        var(--lt-muted);

    font-size:
        7px;

    letter-spacing:
        .16em;

}


.lt-director-card-value {

    margin-top:
        27px;

    color:
        var(--lt-white);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(
            18px,
            1.7vw,
            25px
        );

    line-height:
        1.05;

}


.lt-director-card-cell:first-child
.lt-director-card-value {

    color:
        var(--lt-gold);

}



/* =========================================================
   VISUAL STORY PATH
========================================================= */

.lt-story-path {

    margin:
        28px 0 75px;

}


.lt-story-path-head {

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    gap:
        20px;

    margin-bottom:
        14px;

    color:
        var(--lt-muted);

    font-size:
        7px;

    letter-spacing:
        .16em;

}


.lt-story-path-line {

    display:
        grid;

    grid-template-columns:
        repeat(3, 1fr);

    border-top:
        1px solid
        rgba(216, 184, 121, .28);

    border-bottom:
        1px solid
        rgba(216, 184, 121, .28);

}


.lt-story-beat {

    position:
        relative;

    min-height:
        135px;

    padding:
        24px 25px;

    border-right:
        1px solid
        rgba(216, 184, 121, .18);

}


.lt-story-beat:last-child {

    border-right:
        0;

}


.lt-story-beat-number {

    display:
        block;

    margin-bottom:
        29px;

    color:
        var(--lt-gold);

    font-size:
        7px;

    letter-spacing:
        .15em;

}


.lt-story-beat-text {

    max-width:
        260px;

    color:
        #d4cfc5;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        15px;

    line-height:
        1.35;

}


/*
   Small visual node connecting the three decisions.
*/

.lt-story-beat::before {

    content:
        "";

    position:
        absolute;

    top:
        -4px;

    left:
        24px;

    width:
        7px;

    height:
        7px;

    border-radius:
        50%;

    background:
        var(--lt-bg);

    border:
        1px solid
        var(--lt-gold);

}


.lt-story-beat:last-child::before {

    background:
        var(--lt-gold);

}



/* =========================================================
   FINAL MONITOR — MORE LIKE A FILM FRAME
========================================================= */

.lt-final-monitor {

    position:
        relative;

    margin-top:
        0;

    padding:
        14px;

    background:
        #080808;

    border:
        1px solid
        rgba(216, 184, 121, .32);

    box-shadow:
        0 30px 90px
        rgba(0, 0, 0, .35);

}


.lt-final-monitor::before {

    content:
        "FINAL OUTPUT";

    position:
        absolute;

    left:
        14px;

    top:
        -25px;

    color:
        var(--lt-muted);

    font-size:
        7px;

    letter-spacing:
        .17em;

}


.lt-final-image {

    min-height:
        360px;

    background:
        #050505;

}


/*
   Cinema frame lines
*/

.lt-final-image::after {

    content:
        "";

    position:
        absolute;

    inset:
        5%;

    border:
        1px solid
        rgba(255, 255, 255, .12);

    pointer-events:
        none;

}


.lt-final-image span {

    z-index:
        2;

    width:
        min(
            620px,
            72%
        );

    color:
        var(--lt-white);

    font-size:
        clamp(
            21px,
            3vw,
            42px
        );

    line-height:
        1.08;

}


.lt-final-caption {

    display:
        flex;

    justify-content:
        space-between;

    gap:
        20px;

    padding:
        2px 2px 0;

}



/* =========================================================
   ENDING VISUAL MARK
========================================================= */

.lt-ending-visual-mark {

    position:
        absolute;

    right:
        5%;

    top:
        210px;

    width:
        clamp(
            75px,
            9vw,
            130px
        );

    aspect-ratio:
        1;

    border:
        1px solid
        rgba(216, 184, 121, .32);

    border-radius:
        50%;

    pointer-events:
        none;

}


.lt-ending-visual-mark::before,
.lt-ending-visual-mark::after {

    content:
        "";

    position:
        absolute;

    left:
        50%;

    top:
        50%;

    background:
        var(--lt-gold);

    opacity:
        .38;

}


.lt-ending-visual-mark::before {

    width:
        140%;

    height:
        1px;

    transform:
        translate(-50%, -50%);

}


.lt-ending-visual-mark::after {

    width:
        1px;

    height:
        140%;

    transform:
        translate(-50%, -50%);

}



/* =========================================================
   THANK YOU — LESS LIKE TWO LARGE TEXT COLUMNS
========================================================= */

.lt-thanks {

    margin-top:
        115px;

}


.lt-thanks p {

    max-width:
        430px;

}


.lt-thanks h3 {

    padding-bottom:
        14px;

    border-bottom:
        1px solid
        rgba(216, 184, 121, .22);

}



/* =========================================================
   MOBILE
========================================================= */

@media
(max-width: 900px) {

    .lt-start-row {

        margin-top:
            65px;

    }


    .lt-director-card {

        grid-template-columns:
            repeat(2, 1fr);

    }


    .lt-director-card-cell:nth-child(2) {

        border-right:
            0;

    }


    .lt-director-card-cell:nth-child(-n+2) {

        border-bottom:
            1px solid
            rgba(255, 255, 255, .08);

    }


    .lt-story-path-line {

        grid-template-columns:
            1fr;

    }


    .lt-story-beat {

        border-right:
            0;

        border-bottom:
            1px solid
            rgba(216, 184, 121, .18);

    }


    .lt-story-beat:last-child {

        border-bottom:
            0;

    }


    .lt-ending-visual-mark {

        display:
            none;

    }

}


@media
(max-width: 600px) {

    .lt-start-row {

        flex-direction:
            column;

        align-items:
            flex-start;

        gap:
            24px;

    }


    .lt-start {

        padding-left:
            27px;

        text-align:
            left;

    }


    .lt-director-card {

        grid-template-columns:
            1fr;

    }


    .lt-director-card-cell {

        min-height:
            95px;

        border-right:
            0;

        border-bottom:
            1px solid
            rgba(255,255,255,.08);

    }


    .lt-director-card-cell:last-child {

        border-bottom:
            0;

    }


    .lt-ending-story {

        width:
            100%;

        margin-left:
            0;

    }


    .lt-final-image {

        min-height:
            260px;

    }

}