.main_container {
    box-sizing: border-box;
    height: var(--viewport-block);
    width: var(--viewport-inline);
    min-height: 100vh;
    /* fallback */
    min-width: 100vw;
    /* fallback */
    display: flex;
    flex-direction: column;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    /* Prevent scroll chaining/bounce vertically to ancestor */
    overscroll-behavior-y: contain;
    /* scroll-behavior: smooth; */
}

.project_container {
    position: relative;
    flex: 0 0 var(--viewport-block);
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    background-color: black;
    /* Avoid horizontal overscroll chaining and rubber-band effects */
    overscroll-behavior-x: contain;
}

.slide {
    height: var(--viewport-block);
    width: var(--viewport-inline);
    min-height: 100vh;
    /* fallback */
    min-width: 100vw;
    /* fallback */
    display: flex;
    flex-direction: row;
    flex-shrink: 0;
    scroll-snap-type: x mandatory;
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

/* Axis lock helper class injected by JS when a vertical gesture is detected.
   Temporarily disable horizontal scrolling to avoid diagonal jitter. */
.project_container.no-x-scroll {
    overflow-x: hidden !important;
}

/* On touch devices, relax horizontal snap to avoid accidental side jumps
   when the user scrolls vertically. Keeps vertical snap mandatory. */
@media (pointer: coarse) {
    .project_container {
        scroll-snap-type: x proximity;
    }
}

img {
    height: 100%;
    width: auto;
    flex-shrink: 0;
    object-fit: cover;
    /* facultatif mais plus strict */
}

/* --- fullcover : occupe tout l’écran --- */
.wrapper--fullcover {
    width: var(--viewport-inline);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* --- contenu fullcover (img, video) --- */
.wrapper--halfwidth img,
.wrapper--fullcover img,
.wrapper--fullcover video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --- halfwidth --- */
.wrapper--halfwidth {
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* --- centered --- */
.wrapper--centered {
    height: var(--viewport-block);
    width: var(--viewport-inline);
    padding: 50px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: black;
}

.wrapper--centered img,
.wrapper--centered video {
    object-fit: contain;
}

/* --- wrapper diaporama --- */
.wrapper--diaporama {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.diapo-frame {
    position: relative;
    width: 100%;
    height: 100%;
    padding: calc(var(--viewport-block) * 0.10) calc(var(--viewport-inline) * 0.05);
    box-sizing: border-box;
}

.diapo-frame img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0;
    transition: opacity 120ms linear;
    will-change: opacity;
}

.diapo-frame img.active {
    opacity: 1;
    z-index: 1;
}


/* --- images par défaut --- */
img,
video {
    flex-shrink: 0;
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
}

video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    flex-shrink: 0;
    pointer-events: none;
    /* désactive l'interaction avec les contrôles */
    user-select: none;
    background: black;
}

/* Utility classes for media fit */
video.media-cover,
.media-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

video.media-contain,
.media-contain {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* --- Project-specific adjustments --- */
/* Relay: scale diaporama images to 80% of container */
.project_container[data-project-key="Relay"] .diapo-frame img {
    width: 80%;
    height: 80%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.project_container[data-project-key="RLSH"] .diapo-frame img {
    width: 95%;
    height: 95%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Hidden by tag filter */
.project_container.is-filtered {
    display: none;
}

/* --- Clickable video projects: enable interaction + hover scale --- */
.project_container[data-project-key="CamilleLeprinceWEB"] video,
.project_container[data-project-key="GRIME_INDEX"] video,
.project_container[data-project-key="LAMANT"] .slide:nth-of-type(2) .wrapper--centered img {
    pointer-events: auto;
    /* allow click */
    transition: transform 200ms ease-in-out;
    will-change: transform;
    cursor: pointer;
}

.project_container[data-project-key="CamilleLeprinceWEB"] video:hover,
.project_container[data-project-key="GRIME_INDEX"] video:hover,
.project_container[data-project-key="LAMANT"] .slide:nth-of-type(2) .wrapper--centered img:hover {
    transform: scale(1.015);
    /* +1.5% on hover */
}

/* For Camille: shrink-wrap the video box to its rendered content
   so hover only triggers on the visible video, not the padded area */
.project_container[data-project-key="CamilleLeprinceWEB"] .wrapper--centered video.media-contain,
.project_container[data-project-key="GRIME_INDEX"] .wrapper--centered video.media-contain {
    width: auto;
    height: auto;
    max-width: calc(var(--viewport-inline) - 100px);
    /* wrapper has 50px padding on each side */
    max-height: calc(var(--viewport-block) - 100px);
    object-fit: contain;
    background: transparent;
    /* avoid letterbox inside the element */
}

/* Grime Index: white backdrop */
.project_container[data-project-key="GRIME_INDEX"] .wrapper--centered {
    background-color: #ffffff;
}

/* L'amant: full black background */
.project_container[data-project-key="LAMANT"] .wrapper--centered {
    background-color: #000000;
}

.project_container[data-project-key="LAMANT"] .wrapper--centered img {
    max-width: 90%;
    max-height: 90%;
}

/* COSMA: inherit default wrapper background (no override) */

/* COSMA: embedded tester styles (scoped) */
.project_container[data-project-key="COSMA"] .wrapper--centered {
    background-color: #ffffff;
    /* project background: white */
}

.project_container[data-project-key="COSMA"] .cosma-tester {
    position: relative;
    width: 90%;
    /* leave 5% margin on each side */
    margin: 0 5%;
    height: 93%;
    /* trim 7% of the wrapper height for breathing room */
    display: grid;
    /* center content above controls */
    grid-template-rows: 1fr auto;
    align-items: center;
    justify-items: center;
    background-color: #ffffff;
    /* inner container: white */
    border-radius: 16px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
    color: #000000;
    /* readable on white */
    overflow: hidden;
    /* clip content to rounded corners */
}

/* COSMA: top bar to host the mode toggle at the top center */
.project_container[data-project-key="COSMA"] .cosma-topbar {
    position: absolute;
    top: 8px;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    /* top-left placement */
    padding: 0 12px;
    z-index: 2;
    pointer-events: none;
    /* container ignores, button re-enables */
}

.project_container[data-project-key="COSMA"] .cosma-stage {
    align-self: stretch;
    justify-self: stretch;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    /* keep text centered */
}

.project_container[data-project-key="COSMA"] .cosma-letter {
    font-family: 'Cosma', system-ui, sans-serif;
    font-size: 25vh;
    /* default; JS treats this as the max cap */
    line-height: 1.3;
    /* +7% line spacing for readability */
    outline: none;
    cursor: text;
    text-align: center;
    white-space: normal;
    /* wrap multiple lines */
    overflow-wrap: anywhere;
    /* ensure long tokens can break */
    padding: 0;
    /* avoid padding interfering with fit calculations */
    letter-spacing: 0.02em;
    /* +2% spacing */
    /* Remove transform-based baseline shift to avoid hairline artifacts */
    /* Rendering hygiene to mitigate 1px hairlines during rapid updates */
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
    text-rendering: geometricPrecision;
    contain: paint;
    transform: none;
    /* keep perfectly centered in stage */
    position: relative;
    top: 20px;
    /* drop baseline significantly */
    /* Smoother axis and size transitions for interactive adjustments */
    transition:
        font-variation-settings 320ms cubic-bezier(0.2, 0, 0, 1),
        font-size 260ms cubic-bezier(0.2, 0, 0, 1),
        text-shadow 180ms ease;
    will-change: font-variation-settings, font-size;
    -webkit-user-modify: read-write;
    -webkit-user-select: text;
    user-select: text;
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    .project_container[data-project-key="COSMA"] .cosma-letter {
        transition: none;
    }
}

.project_container[data-project-key="COSMA"] .cosma-footer {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    pointer-events: none;
}

.project_container[data-project-key="COSMA"] .cosma-footer-column {
    flex: 1;
    text-align: center;
    font-family: 'Cosma', system-ui, sans-serif;
    font-size: 1.2rem;
}

/* Bottom sliders (do not break layout) */
.project_container[data-project-key="COSMA"] .cosma-controls {
    position: static;
    /* flow as second grid row */
    box-sizing: border-box;
    width: 100%;
    padding: 0 20px 12px;
    /* 20px side margins, 12px bottom */
    display: flex;
    flex-direction: column;
    /* stacked vertically */
    gap: 2.5px;
    /* reduced again by 50% */
    align-items: stretch;
    background: transparent;
    /* no overlay background */
    opacity: 0.4;
    /* 40% when not hovered */
    transition: opacity 160ms ease;
}

/* COSMA: mode toggle (Manual/Auto) */
.project_container[data-project-key="COSMA"] .cosma-mode-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 2px;
}

.project_container[data-project-key="COSMA"] .cosma-mode-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    /* reduce space between dot and text by 2px */
    background: transparent;
    border: none;
    padding: 4px 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    color: #000;
    /* text is always black */
    opacity: 0.5;
    /* manual state look */
}

.project_container[data-project-key="COSMA"] .cosma-mode-toggle .dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.5);
    /* 50% black */
    transition: width 200ms cubic-bezier(0.2, 0, 0, 1), height 200ms cubic-bezier(0.2, 0, 0, 1), background-color 200ms ease;
}

.project_container[data-project-key="COSMA"] .cosma-mode-toggle.is-auto .dot {
    width: 11px;
    /* big circle 1px smaller */
    height: 11px;
    /* big circle 1px smaller */
    background: #000;
    /* solid black in AUTO */
}

/* AUTO state: full opacity for the whole control */
.project_container[data-project-key="COSMA"] .cosma-mode-toggle.is-auto {
    opacity: 1;
}

.project_container[data-project-key="COSMA"] .cosma-mode-toggle .label {
    font-family: 'Cosma', system-ui, sans-serif;
    font-size: 12px;
    font-weight: 400;
    font-variation-settings: 'wght' 400, 'wdth' 50, 'opsz' 0;
    line-height: 1.3;
    user-select: none;
    text-transform: uppercase;
    /* FULL CAP */
    letter-spacing: 0.02em;
    /* +2% spacing */
    transition: color 160ms ease, opacity 160ms ease;
    transform: translateY(3px);
    /* drop DEMO baseline by another pixel */
}

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

    .project_container[data-project-key="COSMA"] .cosma-mode-toggle .dot,
    .project_container[data-project-key="COSMA"] .cosma-mode-toggle .label {
        transition: none;
    }
}

.project_container[data-project-key="COSMA"] .cosma-controls:hover {
    opacity: 1;
}

/* In AUTO mode: make container and all rows fully opaque */
.project_container[data-project-key="COSMA"] .cosma-tester[data-mode="auto"] .cosma-controls {
    opacity: 1;
}

.project_container[data-project-key="COSMA"] .cosma-tester[data-mode="auto"] .cosma-row {
    opacity: 1;
}

.project_container[data-project-key="COSMA"] .cosma-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.project_container[data-project-key="COSMA"] .cosma-label {
    width: 48px;
    text-transform: uppercase;
    font-family: 'Cosma', system-ui, sans-serif;
    font-size: 12px;
    /* +2px */
    color: #000;
    user-select: none;
    font-weight: 400;
    font-variation-settings: 'wght' 400, 'wdth' 50, 'opsz' 0;
    letter-spacing: 0.02em;
    /* +2% spacing */
    transform: translateY(2px);
    /* drop baseline an extra pixel */
}

.project_container[data-project-key="COSMA"] .cosma-val {
    width: 48px;
    text-align: right;
    font-family: 'Cosma', system-ui, sans-serif;
    font-size: 12px;
    /* +2px */
    color: #000;
    user-select: none;
    font-weight: 400;
    font-variation-settings: 'wght' 400, 'wdth' 50, 'opsz' 0;
    letter-spacing: 0.02em;
    /* +2% spacing */
    transform: translateY(2px);
    /* drop baseline an extra pixel */
}

.project_container[data-project-key="COSMA"] .cosma-controls .cosma-slider {
    width: 100%;
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    /* track styled via pseudo-elements */
    height: 10px;
    /* fallback height */
    flex: 1;
}

/* WebKit track + thumb */
.project_container[data-project-key="COSMA"] .cosma-controls .cosma-slider::-webkit-slider-runnable-track {
    height: 10px;
    background:
        linear-gradient(#000, #000) left/var(--p, 50%) 100% no-repeat,
        linear-gradient(#d0d0d0, #d0d0d0) left/100% 100% no-repeat;
    border-radius: 0;
    /* squared */
    transition: background-size 300ms ease;
}

.project_container[data-project-key="COSMA"] .cosma-controls .cosma-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    background: transparent;
    border: none;
    border-radius: 50%;
    box-shadow: none;
    margin-top: -2px;
    /* center on 10px track */
    opacity: 0;
    /* invisible thumb => looks like a line */
}

/* Firefox track + thumb */
.project_container[data-project-key="COSMA"] .cosma-controls .cosma-slider::-moz-range-track {
    height: 10px;
    background:
        linear-gradient(#000, #000) left/var(--p, 50%) 100% no-repeat,
        linear-gradient(#d0d0d0, #d0d0d0) left/100% 100% no-repeat;
    border-radius: 0;
    /* squared */
    transition: background-size 300ms ease;
}

/* AUTO mode: slower, longer track fill to feel animated */
.project_container[data-project-key="COSMA"] .cosma-tester[data-mode="auto"] .cosma-controls .cosma-slider::-webkit-slider-runnable-track {
    transition: background-size 880ms ease;
}

.project_container[data-project-key="COSMA"] .cosma-tester[data-mode="auto"] .cosma-controls .cosma-slider::-moz-range-track {
    transition: background-size 880ms ease;
}

/* While dragging, disable transitions for immediate feedback */
.project_container[data-project-key="COSMA"] .cosma-tester.is-dragging .cosma-controls .cosma-slider::-webkit-slider-runnable-track,
.project_container[data-project-key="COSMA"] .cosma-tester.is-dragging .cosma-controls .cosma-slider::-moz-range-track {
    transition: none !important;
}

.project_container[data-project-key="COSMA"] .cosma-tester.is-dragging .cosma-letter {
    transition: none !important;
}

/* While auto typing/erasing, minimize visual artifacts */
.project_container[data-project-key="COSMA"] .cosma-tester.is-typing .cosma-letter {
    transition: none !important;
}

.project_container[data-project-key="COSMA"] .cosma-controls .cosma-slider::-moz-range-thumb {
    width: 14px;
    height: 14px;
    background: transparent;
    border: none;
    border-radius: 50%;
    box-shadow: none;
    opacity: 0;
    /* invisible */
}

/* Scoped selection styling per theme */
.project_container[data-project-key="COSMA"] .cosma-tester ::selection {
    background-color: #0080FF;
    color: #000000;
}

.project_container[data-project-key="COSMA"] .cosma-tester[data-theme="monochrome-mix"] ::selection {
    background-color: #000000;
    color: #FFFFFF;
}

.project_container[data-project-key="COSMA"] .cosma-tester[data-theme="pop-peak"] ::selection {
    background-color: #FF0B0B;
    color: #FFFFFF;
}

.project_container[data-project-key="COSMA"] .cosma-tester[data-theme="studio-depth"] ::selection {
    background-color: #000000;
    color: #848C76;
}

.project_container[data-project-key="COSMA"] .cosma-tester[data-theme="mp3-shell"] ::selection {
    background-color: #E0E0E0;
    color: #000000;
}