/* Page-specific loaders used to compare Le Cabinet motion directions. */
:root {
    --lc-loader-bg: #ffffff;
    --lc-loader-white: #111214;
    --lc-loader-chrome: #111214;
    --lc-loader-ease: cubic-bezier(.22, .68, 0, 1);
}

html.lc-loader-lock,
html.lc-loader-lock body {
    overflow: hidden;
}

.lc-page-loader {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: grid;
    place-items: center;
    overflow: hidden;
    color: var(--lc-loader-white);
    background: var(--lc-loader-bg);
    opacity: 1;
    visibility: visible;
    transition: opacity .8s var(--lc-loader-ease), visibility .8s linear;
}

.lc-page-loader.is-exiting {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.lc-loader-stage {
    position: relative;
    display: grid;
    place-items: center;
    width: min(42vw, 320px);
    aspect-ratio: 1;
}

.lc-loader-symbol,
.lc-loader-pieces {
    position: relative;
    width: min(22vw, 170px);
    aspect-ratio: 1;
}

.lc-loader-symbol img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.lc-loader-symbol {
    z-index: 2;
    animation: lc-symbol-breathe 2.2s ease-in-out infinite;
    filter: grayscale(1) contrast(1.2)
        drop-shadow(0 0 5px rgba(255, 255, 255, .95))
        drop-shadow(0 0 18px rgba(33, 37, 43, .24));
}

.lc-loader-symbol::before,
.lc-loader-symbol::after {
    position: absolute;
    inset: -16%;
    border-radius: 50%;
    content: "";
    pointer-events: none;
}

.lc-loader-symbol::before {
    border: 1px solid rgba(17, 18, 20, .22);
    opacity: .55;
    animation: lc-loader-ring 2.4s ease-out infinite;
}

.lc-loader-symbol::after {
    background: radial-gradient(circle, rgba(17, 18, 20, .12), transparent 66%);
    filter: blur(13px);
    opacity: .85;
    z-index: -1;
}

.lc-loader-eight {
    position: absolute;
    z-index: 3;
    width: min(36vw, 270px);
    height: auto;
    overflow: visible;
    transform: rotate(-8deg);
    pointer-events: none;
}

.lc-loader-eight path {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.lc-loader-eight__blur {
    stroke: rgba(17, 18, 20, .3);
    stroke-width: 5;
    filter: blur(7px);
    stroke-dasharray: 170 300;
    animation: lc-eight-trace 2.6s linear infinite;
}

.lc-loader-eight__line {
    stroke: rgba(17, 18, 20, .88);
    stroke-width: 1.5;
    stroke-dasharray: 170 300;
    animation: lc-eight-trace 2.6s linear infinite;
}

.lc-loader-wordmark {
    position: absolute;
    bottom: 9vh;
    left: 50%;
    color: rgba(17, 18, 20, .68);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .24em;
    text-transform: uppercase;
    transform: translateX(-50%);
    white-space: nowrap;
}

/* Assembly loader: the four cropped quadrants reunite into the complete mark. */
.lc-page-loader--assembly {
    --lc-loader-bg: #000000;
    --lc-loader-white: #ffffff;
}

.lc-page-loader--assembly .lc-loader-stage {
    width: min(64vw, 500px);
    perspective: 1100px;
    perspective-origin: 50% 42%;
    transform: translateY(min(8vh, 82px));
}

.lc-page-loader--assembly .lc-loader-pieces {
    width: min(52vw, 420px);
    overflow: visible;
    transform-style: preserve-3d;
}

.lc-logo-vector {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.lc-logo-vector .lc-c {
    overflow: visible;
}

.lc-page-loader--assembly .lc-logo-vector {
    transform-style: preserve-3d;
}

.lc-page-loader--assembly .lc-logo-vector .lc-c {
    backface-visibility: hidden;
    transform-box: view-box;
    transform-origin: 100px 100px;
    will-change: transform, opacity, filter;
}

.lc-page-loader--assembly .lc-logo-vector .lc-c image {
    transform-box: fill-box;
    transform-origin: center;
}

.lc-page-loader--assembly .lc-c--tl {
    animation: lc-c-drop-tl 3.6s cubic-bezier(.15, .75, .18, 1) both;
}

.lc-page-loader--assembly .lc-c--tr {
    animation: lc-c-drop-tr 3.6s cubic-bezier(.15, .75, .18, 1) .12s both;
}

.lc-page-loader--assembly .lc-c--bl {
    animation: lc-c-drop-bl 3.6s cubic-bezier(.15, .75, .18, 1) .24s both;
}

.lc-page-loader--assembly .lc-c--br {
    animation: lc-c-drop-br 3.6s cubic-bezier(.15, .75, .18, 1) .36s both;
}

.lc-page-loader--assembly .lc-c--tl {
    --lc-fx: min(8vw, 40px);
    --lc-fy: min(8vw, 40px);
}

.lc-page-loader--assembly .lc-c--tr {
    --lc-fx: max(-8vw, -40px);
    --lc-fy: min(8vw, 40px);
}

.lc-page-loader--assembly .lc-c--bl {
    --lc-fx: min(8vw, 40px);
    --lc-fy: max(-8vw, -40px);
}

.lc-page-loader--assembly .lc-c--br {
    --lc-fx: max(-8vw, -40px);
    --lc-fy: max(-8vw, -40px);
}

.lc-page-loader--assembly .lc-logo-vector .lc-c image {
    filter: brightness(0) invert(1);
}

.lc-page-loader--assembly .lc-logo-vector .lc-logo-chrome {
    opacity: 0;
    pointer-events: none;
    transition: opacity 1.4s cubic-bezier(.2, .8, .2, 1);
}

.lc-page-loader--assembly .lc-c--tl-rotor {
    transform-box: view-box;
    transform-origin: 50px 50px;
    transform-style: preserve-3d;
    transform: rotate(-58deg) scale(1.32);
    transition: transform 1.55s cubic-bezier(.18, .8, .2, 1);
    will-change: transform;
}

.lc-page-loader--assembly .lc-c--tl-float {
    transform-box: view-box;
    transform-origin: 50px 50px;
    transition: transform .68s cubic-bezier(.2, .8, .2, 1);
    will-change: transform;
}

.lc-page-loader--assembly.is-c-seed .lc-c--tl-float {
    animation: lc-c-cloud-float .68s cubic-bezier(.2, .8, .2, 1) both;
}

.lc-page-loader--assembly.is-assembling .lc-c--tl-float {
    animation: none;
    transform: translate(0, 0) rotate(0deg);
}

.lc-page-loader--assembly.is-c-seed .lc-c--tl-rotor {
    animation: lc-c-seed-grow .52s cubic-bezier(.2, .8, .2, 1) both;
}

.lc-page-loader--assembly.is-assembling .lc-c--tl-rotor {
    animation: none;
    transform: rotate(0deg) scale(1);
}

.lc-logo-vector .lc-c__motion {
    transform-box: fill-box;
    transform-origin: center;
}

.lc-page-loader--assembly .lc-loader-pieces::before {
    position: absolute;
    inset: -12%;
    border: 0;
    border-radius: 50%;
    content: "";
    animation: none;
}

.lc-page-loader--assembly .lc-loader-wordmark {
    color: #ffffff;
    opacity: 1;
    bottom: 4vh;
}

@keyframes lc-c-drop-tl {
    0% { opacity: 0; filter: blur(10px); transform: translate3d(-48vw, -78vh, -650px) rotateX(46deg) rotateY(-28deg) rotateZ(-22deg) scale(.32); }
    34% { opacity: .78; filter: blur(4px); transform: translate3d(-18vw, -30vh, -280px) rotateX(24deg) rotateY(-16deg) rotateZ(-10deg) scale(.64); }
    64% { opacity: 1; filter: blur(0); transform: translate3d(var(--lc-fx), var(--lc-fy), 70px) rotateX(5deg) rotateY(-4deg) rotateZ(-2deg) scale(1.08); }
    80% { transform: translate3d(var(--lc-fx), var(--lc-fy), 0) rotateZ(2deg) scale(.98); }
    90% { transform: translate3d(var(--lc-fx), var(--lc-fy), 0) rotateZ(-.7deg) scale(1.02); }
    100% { opacity: 1; filter: blur(0); transform: translate3d(var(--lc-fx), var(--lc-fy), 0) rotateX(0) rotateY(0) rotateZ(0) scale(1); }
}

@keyframes lc-c-drop-tr {
    0% { opacity: 0; filter: blur(10px); transform: translate3d(48vw, -78vh, -650px) rotateX(46deg) rotateY(28deg) rotateZ(22deg) scale(.32); }
    34% { opacity: .78; filter: blur(4px); transform: translate3d(18vw, -30vh, -280px) rotateX(24deg) rotateY(16deg) rotateZ(10deg) scale(.64); }
    64% { opacity: 1; filter: blur(0); transform: translate3d(var(--lc-fx), var(--lc-fy), 70px) rotateX(5deg) rotateY(4deg) rotateZ(2deg) scale(1.08); }
    80% { transform: translate3d(var(--lc-fx), var(--lc-fy), 0) rotateZ(-2deg) scale(.98); }
    90% { transform: translate3d(var(--lc-fx), var(--lc-fy), 0) rotateZ(.7deg) scale(1.02); }
    100% { opacity: 1; filter: blur(0); transform: translate3d(var(--lc-fx), var(--lc-fy), 0) rotateX(0) rotateY(0) rotateZ(0) scale(1); }
}

@keyframes lc-c-drop-bl {
    0% { opacity: 0; filter: blur(10px); transform: translate3d(-48vw, -78vh, -650px) rotateX(46deg) rotateY(-28deg) rotateZ(22deg) scale(.32); }
    34% { opacity: .78; filter: blur(4px); transform: translate3d(-18vw, -30vh, -280px) rotateX(24deg) rotateY(-16deg) rotateZ(10deg) scale(.64); }
    64% { opacity: 1; filter: blur(0); transform: translate3d(var(--lc-fx), var(--lc-fy), 70px) rotateX(-5deg) rotateY(-4deg) rotateZ(2deg) scale(1.08); }
    80% { transform: translate3d(var(--lc-fx), var(--lc-fy), 0) rotateZ(-2deg) scale(.98); }
    90% { transform: translate3d(var(--lc-fx), var(--lc-fy), 0) rotateZ(.7deg) scale(1.02); }
    100% { opacity: 1; filter: blur(0); transform: translate3d(var(--lc-fx), var(--lc-fy), 0) rotateX(0) rotateY(0) rotateZ(0) scale(1); }
}

@keyframes lc-c-drop-br {
    0% { opacity: 0; filter: blur(10px); transform: translate3d(48vw, -78vh, -650px) rotateX(46deg) rotateY(28deg) rotateZ(-22deg) scale(.32); }
    34% { opacity: .78; filter: blur(4px); transform: translate3d(18vw, -30vh, -280px) rotateX(24deg) rotateY(16deg) rotateZ(-10deg) scale(.64); }
    64% { opacity: 1; filter: blur(0); transform: translate3d(var(--lc-fx), var(--lc-fy), 70px) rotateX(-5deg) rotateY(4deg) rotateZ(-2deg) scale(1.08); }
    80% { transform: translate3d(var(--lc-fx), var(--lc-fy), 0) rotateZ(2deg) scale(.98); }
    90% { transform: translate3d(var(--lc-fx), var(--lc-fy), 0) rotateZ(-.7deg) scale(1.02); }
    100% { opacity: 1; filter: blur(0); transform: translate3d(var(--lc-fx), var(--lc-fy), 0) rotateX(0) rotateY(0) rotateZ(0) scale(1); }
}

/* Native SVG movement keeps the four clipped brand pieces exact while the stage adds depth. */
.lc-page-loader--assembly .lc-loader-pieces {
    animation: lc-assembly-depth 1.6s cubic-bezier(.25, .8, .18, 1) both;
}

.lc-page-loader--assembly .lc-logo-vector .lc-c,
.lc-page-loader--assembly .lc-c--tl,
.lc-page-loader--assembly .lc-c--tr,
.lc-page-loader--assembly .lc-c--bl,
.lc-page-loader--assembly .lc-c--br {
    animation: lc-c-fade 1.4s cubic-bezier(.2, .72, .18, 1) both;
}

.lc-page-loader--assembly .lc-c--tr { animation-delay: .04s; }
.lc-page-loader--assembly .lc-c--bl { animation-delay: .08s; }
.lc-page-loader--assembly .lc-c--br { animation-delay: .12s; }

@keyframes lc-assembly-depth {
    0% { opacity: .9; transform: perspective(1100px) translateZ(-260px) rotateX(20deg) scale(.84); }
    58% { opacity: 1; transform: perspective(1100px) translateZ(40px) rotateX(7deg) scale(1.06); }
    82% { transform: perspective(1100px) translateZ(0) rotateX(-2deg) scale(.985); }
    100% { opacity: 1; transform: perspective(1100px) translateZ(0) rotateX(0) scale(1); }
}

@keyframes lc-c-fade {
    0% { opacity: .82; filter: blur(1.5px); }
    35% { opacity: .94; filter: blur(1px); }
    64% { opacity: 1; filter: blur(0); }
    100% { opacity: 1; filter: blur(0); }
}

/* Typewriter-to-mark sequence: the C is the visual bridge into the four-piece symbol. */
.lc-page-loader--assembly .lc-typewriter {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 5;
    color: #ffffff;
    font-family: "Tenor Sans", Georgia, serif;
    font-size: clamp(28px, 4.2vw, 64px);
    font-weight: 400;
    letter-spacing: .12em;
    line-height: 1;
    transform: translate(-50%, -50%) translateY(min(8vh, 82px));
    white-space: nowrap;
    transition: opacity .34s ease, transform .55s cubic-bezier(.2, .8, .2, 1);
}

.lc-page-loader--assembly .lc-typewriter-line {
    display: inline-flex;
}

.lc-page-loader--assembly .lc-typewriter-char {
    display: inline-block;
    opacity: 0;
    transform: translateY(.7em);
    will-change: opacity, transform;
}

.lc-page-loader--assembly.is-typing .lc-typewriter-char {
    animation: lc-type-in .34s cubic-bezier(.2, .8, .2, 1) both;
    animation-delay: calc(220ms + (var(--lc-letter-index) * 70ms));
}

.lc-page-loader--assembly.is-erasing .lc-typewriter-char {
    animation: lc-type-out .22s cubic-bezier(.55, .05, .7, .2) both;
    animation-delay: calc((var(--lc-letter-count) - var(--lc-letter-index)) * 42ms);
}

.lc-page-loader--assembly.is-c-seed .lc-typewriter-char--c {
    animation: none;
    opacity: 0;
    transform: scale(1.45);
    transition: opacity .34s ease, transform .45s cubic-bezier(.2, .8, .2, 1);
}

/* Alignment mode: error.html?align-c=1 keeps the wordmark C and the real symbol C visible together. */
.lc-page-loader--assembly.is-aligning-c .lc-typewriter-char:not(.lc-typewriter-char--c) {
    opacity: 0 !important;
    animation: none !important;
}

.lc-page-loader--assembly.is-aligning-c .lc-typewriter-char--c {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
}

.lc-page-loader--assembly.is-aligning-c .lc-typewriter {
    opacity: 1;
    transform: translate(-50%, -50%) translateY(min(8vh, 82px));
}

.lc-page-loader--assembly.is-aligning-c .lc-loader-pieces,
.lc-page-loader--assembly.is-aligning-c .lc-c--tl {
    opacity: 1;
}

.lc-page-loader--assembly.is-aligning-c .lc-c--tr,
.lc-page-loader--assembly.is-aligning-c .lc-c--bl,
.lc-page-loader--assembly.is-aligning-c .lc-c--br {
    opacity: 0;
}

.lc-page-loader--assembly.is-aligning-c .lc-c--tl-float {
    animation: none;
    transform: translate(0, 0);
}

.lc-page-loader--assembly.is-aligning-c .lc-c--tl-rotor {
    animation: none;
    opacity: .55;
    transform: rotate(0deg) scale(.72);
}

.lc-page-loader--assembly .lc-c--tl {
    transition: opacity .58s ease;
}

.lc-page-loader--assembly.is-assembling .lc-typewriter {
    opacity: 0;
    transform: translate(-50%, -50%) translateY(min(8vh, 82px)) scale(1.18);
}

.lc-page-loader--assembly .lc-loader-pieces {
    opacity: 0;
    animation: none;
}

.lc-page-loader--assembly .lc-logo-vector .lc-c {
    opacity: 0;
    animation: none;
    filter: none;
}

.lc-page-loader--assembly.is-c-seed .lc-loader-pieces,
.lc-page-loader--assembly.is-c-seed .lc-c--tl,
.lc-page-loader--assembly.is-assembling .lc-loader-pieces,
.lc-page-loader--assembly.is-assembling .lc-logo-vector .lc-c {
    opacity: 1;
}

.lc-page-loader--assembly.is-chrome .lc-logo-vector .lc-c {
    opacity: 0;
    transition: opacity 1.4s cubic-bezier(.2, .8, .2, 1);
}

.lc-page-loader--assembly.is-chrome .lc-logo-vector .lc-logo-chrome {
    opacity: 1;
}

@keyframes lc-type-in {
    from { opacity: 0; transform: translateY(.7em); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes lc-type-out {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(-.35em); }
}

@keyframes lc-type-c-hold {
    0%, 100% { opacity: 1; transform: translateY(0); }
}

@keyframes lc-c-seed-grow {
    0% { transform: rotate(-58deg) scale(.68); }
    58% { transform: rotate(-58deg) scale(1.34); }
    100% { transform: rotate(-58deg) scale(1.28); }
}

@keyframes lc-c-cloud-float {
    0% { opacity: .1; transform: translate(-12px, 10px) rotate(-6deg); }
    28% { opacity: .64; transform: translate(9px, -12px) rotate(5deg); }
    62% { opacity: .9; transform: translate(-5px, -6px) rotate(-3deg); }
    100% { opacity: 1; transform: translate(0, 0) rotate(0deg); }
}

/* Final assembly sequence: four white pieces first, then the exact-size chrome mark. */
.lc-page-loader--assembly .lc-logo-vector {
    overflow: visible !important;
}

.lc-page-loader--assembly .lc-loader-pieces,
.lc-page-loader--assembly .lc-logo-white,
.lc-page-loader--assembly .lc-logo-vector .lc-c {
    opacity: 1;
    animation: none;
}

.lc-page-loader--assembly .lc-logo-vector .lc-c {
    filter: none;
}

.lc-page-loader--assembly .lc-logo-vector .lc-logo-chrome {
    opacity: 0;
    animation: none;
    transition: none;
}

.lc-page-loader--assembly.is-blinking .lc-logo-white {
    animation: lc-logo-white-blink 2.8s steps(1, end) forwards;
}

.lc-page-loader--assembly.is-blinking .lc-logo-vector .lc-logo-chrome {
    animation: lc-logo-chrome-blink 2.8s steps(1, end) forwards;
}

@keyframes lc-logo-white-blink {
    0%, 12.5% { opacity: 1; }
    12.51%, 25% { opacity: 0; }
    25.01%, 37.5% { opacity: 1; }
    37.51%, 50% { opacity: 0; }
    50.01%, 62.5% { opacity: 1; }
    62.51%, 75% { opacity: 0; }
    75.01%, 87.5% { opacity: 1; }
    87.51%, 100% { opacity: 0; }
}

@keyframes lc-logo-chrome-blink {
    0%, 12.5% { opacity: 0; }
    12.51%, 25% { opacity: 1; }
    25.01%, 37.5% { opacity: 0; }
    37.51%, 50% { opacity: 1; }
    50.01%, 62.5% { opacity: 0; }
    62.51%, 75% { opacity: 1; }
    75.01%, 87.5% { opacity: 0; }
    87.51%, 100% { opacity: 1; }
}

/* Video loader: the brand film is framed like an introduction, not a counter. */
.lc-page-loader--video {
    --lc-loader-white: #f5f5f2;
    padding: clamp(20px, 5vw, 72px);
    background: #050505;
}

.lc-page-loader--video .lc-loader-wordmark {
    color: rgba(245, 245, 242, .72);
}

.lc-video-loader-frame {
    position: relative;
    width: min(86vw, 1180px);
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #0a0a0a;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 24px 80px rgba(0, 0, 0, .5);
}

.lc-video-loader {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.lc-video-loader-shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, .1), transparent 45%, rgba(0, 0, 0, .35));
    pointer-events: none;
}

.lc-video-loader-skip {
    position: absolute;
    right: clamp(20px, 5vw, 72px);
    bottom: clamp(20px, 5vw, 72px);
    z-index: 2;
    padding: 9px 15px;
    border: 1px solid rgba(255, 255, 255, .55);
    border-radius: 999px;
    color: var(--lc-loader-white);
    background: rgba(0, 0, 0, .28);
    font-size: 10px;
    letter-spacing: .18em;
    text-transform: uppercase;
    transition: background .3s ease, color .3s ease;
}

.lc-video-loader-skip:hover,
.lc-video-loader-skip:focus-visible {
    color: #111;
    background: var(--lc-loader-white);
}

@keyframes lc-symbol-breathe {
    0%, 100% { transform: scale(.94); opacity: .82; }
    50% { transform: scale(1.03); opacity: 1; }
}

@keyframes lc-loader-ring {
    0% { transform: scale(.72); opacity: 0; }
    35% { opacity: .55; }
    100% { transform: scale(1.18); opacity: 0; }
}

@keyframes lc-eight-trace {
    from { stroke-dashoffset: 470; }
    to { stroke-dashoffset: 0; }
}

@media (max-width: 575px) {
    .lc-loader-stage,
    .lc-page-loader--assembly .lc-loader-stage {
        width: min(86vw, 360px);
    }

    .lc-loader-symbol,
    .lc-page-loader--assembly .lc-loader-pieces {
        width: min(80vw, 300px);
    }

    .lc-loader-eight {
        width: min(64vw, 250px);
    }

    .lc-video-loader-frame {
        width: 100%;
        aspect-ratio: 9 / 16;
    }
}

@media (prefers-reduced-motion: reduce) {
    .lc-loader-symbol,
    .lc-loader-eight path,
    .lc-page-loader--assembly .lc-loader-pieces::before {
        animation: none;
    }
}