/**
 * Landing Page Showreel Styles
 *
 * @package MM_Theme
 */

/* ============================================
   LANDING SHOWREEL CONTAINER
   ============================================ */

.landing-showreel {
    position: relative;
    width: 100%;
    min-height: 100vh;
    overflow: hidden;
}

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

.landing-page {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    display: none;
    opacity: 0;
    transition: opacity 500ms ease-out, filter 500ms ease-out;
    overflow: visible;
}

/* Transition fade pour les pages */
.landing-page[data-transition-style="fade"] {
    transition: opacity 500ms ease-out, filter 500ms ease-out;
}

/* Transition cut pour les pages (instantané) */
.landing-page[data-transition-style="cut"] {
    transition: opacity 0ms, filter 0ms;
}

/* Transition fade pour les images individuelles */
.landing-image-item[data-transition="fade"] {
    transition: opacity 500ms ease-out, visibility 0ms 500ms;
}

/* Transition cut pour les images individuelles (instantané) */
.landing-image-item[data-transition="cut"] {
    transition: opacity 0ms, visibility 0ms;
}

.landing-page-content {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 1;
    overflow: visible;
}

/* ============================================
   LANDING FIRST PAGE LOGO
   ============================================ */

.landing-first-page-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 500; /* Entre navigation (z-index 1000) et contenu (z-index 1) */
    pointer-events: none;
    --logo-offset-x: 0%;
    --logo-offset-y: 0%;
    left: calc(50% + var(--logo-offset-x));
    top: calc(50% + var(--logo-offset-y));
}

.landing-first-page-logo img {
    display: block;
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

/* Mobile : masquer le logo */
@media (max-width: 768px) {
    .landing-first-page-logo {
        display: none;
    }
}

/* ============================================
   LANDING IMAGES GRID
   ============================================ */

.landing-images-grid {
    display: grid;
    width: 100%;
    height: 100vh;
    position: relative;
}

/* 1 colonne - Pleine page */
.landing-cols-1 {
    grid-template-columns: 1fr;
}

/* 2 colonnes - 50%/50% */
.landing-cols-2 {
    grid-template-columns: 1fr 1fr;
}

/* 3 colonnes - 33%/34%/33% */
.landing-cols-3 {
    grid-template-columns: 1fr 1fr 1fr;
}

/* ============================================
   LANDING IMAGE ITEM
   ============================================ */

.landing-image-item {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Z-index personnalisable depuis le backend */
/* Le z-index est appliqué via l'attribut style inline depuis le template */

/* Permettre le débordement des images hors de leur colonne */
.landing-image-item.image-bleed-out {
    overflow: visible;
}

.landing-image-item.image-bleed-out .landing-media-wrapper {
    position: absolute;
    /* Déborder dans les colonnes adjacentes : largeur de colonne + gutter de chaque côté */
    /* Pour 2 colonnes : chaque colonne = 50%, donc débordement = 50% + gutter */
    /* Pour 3 colonnes : chaque colonne = 33.33%, donc débordement = 33.33% + gutter */
    left: calc(-50% - var(--grid-gutter));
    right: calc(-50% - var(--grid-gutter));
    width: calc(200% + (var(--grid-gutter) * 2));
    z-index: inherit;
}

/* Ajustement pour les grilles de 3 colonnes */
.landing-cols-3 .landing-image-item.image-bleed-out .landing-media-wrapper {
    left: calc(-33.333% - var(--grid-gutter));
    right: calc(-33.333% - var(--grid-gutter));
    width: calc(166.666% + (var(--grid-gutter) * 2));
}

/* Sur mobile aussi */
@media (max-width: 768px) {
    .landing-image-item.image-bleed-out .landing-media-wrapper {
        left: calc(-50% - var(--grid-gutter));
        right: calc(-50% - var(--grid-gutter));
        width: calc(200% + (var(--grid-gutter) * 2));
    }
    
    .landing-cols-3 .landing-image-item.image-bleed-out .landing-media-wrapper {
        left: calc(-33.333% - var(--grid-gutter));
        right: calc(-33.333% - var(--grid-gutter));
        width: calc(166.666% + (var(--grid-gutter) * 2));
    }
}



/* Colonnes spécifiques */
.landing-col-1 {
    grid-column: span 1;
}

.landing-col-2 {
    grid-column: span 2;
}

.landing-col-3 {
    grid-column: span 3;
}

/* Dans une grille de 2 colonnes */
.landing-cols-2 .landing-col-1 {
    grid-column: span 1;
}

.landing-cols-2 .landing-col-2 {
    grid-column: span 2;
}

/* Dans une grille de 3 colonnes */
.landing-cols-3 .landing-col-1 {
    grid-column: span 1;
}

.landing-cols-3 .landing-col-2 {
    grid-column: span 2;
}

.landing-cols-3 .landing-col-3 {
    grid-column: span 3;
}

/* ============================================
   MEDIA WRAPPER
   ============================================ */

.landing-media-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}


/* ============================================
   IMAGES & VIDEOS
   ============================================ */

.landing-image,
.landing-video {
    display: block;
    object-fit: cover;
    object-position: center;
}

/* Hauteur Fill */
.landing-image-item[data-height-type="fill"] .landing-image,
.landing-image-item[data-height-type="fill"] .landing-video {
    width: 100%;
    height: 100%;
}

/* Hauteur en % */
.landing-image-item[data-height-type="percent"] .landing-image,
.landing-image-item[data-height-type="percent"] .landing-video {
    width: auto;
    height: var(--height-percent, 100%);
    max-width: 100%;
}

/* Hauteur en vw */
.landing-image-item[data-height-type="vw"] .landing-image,
.landing-image-item[data-height-type="vw"] .landing-video {
    width: auto;
    height: var(--height-vw, 100vw);
    max-width: 100%;
}

/* Position personnalisée */
.landing-image-item[data-position-x] .landing-image,
.landing-image-item[data-position-x] .landing-video {
    position: absolute;
    left: calc(50% + var(--position-x, 0%));
    top: calc(50% + var(--position-y, 0%));
    transform: translate(-50%, -50%);
}

.landing-image-item[data-height-type="fill"][data-position-x] .landing-image,
.landing-image-item[data-height-type="fill"][data-position-x] .landing-video {
    position: static;
    transform: none;
}

/* Z-index pour overlap */
.landing-image-item {
    z-index: 1;
}

.landing-image-item:hover {
    z-index: 10;
}

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

.landing-image-caption {
    position: absolute;
    text-align: left;
    width: auto;
    max-width: 100%;
    pointer-events: none;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 500ms ease-out, visibility 0s;
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 12px;
    line-height: 150%;
    letter-spacing: 6%;
    display: block;
    padding: 0;
    margin-top: 0;
}

/* Transition cut pour les captions */
.landing-image-item[data-transition="cut"] .landing-image-caption {
    transition: opacity 0s, visibility 0s;
}

/* Désactiver la caption pour les images en mode fill */
.landing-image-item[data-height-type="fill"] .landing-image-caption {
    display: none !important;
}

/* Désactiver sur mobile */
@media (max-width: 768px) {
    .landing-image-caption {
        display: none;
    }
}

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

@media (max-width: 768px) {
    .landing-showreel {
        min-height: 100vh;
        overflow: hidden;
        position: relative;
        background: #fff;
    }

    .landing-page {
        display: none;
    }

    /* Mobile slides generated by JS */
    .mobile-slide {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        display: none;
        opacity: 0;
        transition: opacity 500ms ease-out, filter 500ms ease-out;
        background: #fff;
        z-index: 1;
    }

    .mobile-slide.active {
        display: block;
        opacity: 1;
        filter: none;
        z-index: 10;
        pointer-events: auto;
    }

    .mobile-slide.past-image-i {
        display: block;
        opacity: 0.08 !important;
        filter: blur(3px) !important;
        pointer-events: none;
        z-index: 3;
    }

    .mobile-slide.past-image-i::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200"><filter id="noise"><feTurbulence type="fractalNoise" baseFrequency="1.2" numOctaves="3" stitchTiles="stitch"/><feColorMatrix type="saturate" values="0"/></filter><rect width="200" height="200" filter="url(%23noise)" opacity="1"/></svg>');
        background-size: 200px 200px;
        background-repeat: repeat;
        opacity: 0.25;
        pointer-events: none;
        mix-blend-mode: overlay;
        z-index: 10;
    }

    .mobile-slide.past-image-ii {
        display: block;
        opacity: 0.05 !important;
        filter: blur(3px) !important;
        pointer-events: none;
        z-index: 2;
    }

    .mobile-slide.past-image-ii::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200"><filter id="noise"><feTurbulence type="fractalNoise" baseFrequency="1.2" numOctaves="3" stitchTiles="stitch"/><feColorMatrix type="saturate" values="0"/></filter><rect width="200" height="200" filter="url(%23noise)" opacity="1"/></svg>');
        background-size: 200px 200px;
        background-repeat: repeat;
        opacity: 0.25;
        pointer-events: none;
        mix-blend-mode: overlay;
        z-index: 10;
    }

    .mobile-slide.past-image-iii {
        display: block;
        opacity: 0.02 !important;
        filter: blur(3px) !important;
        pointer-events: none;
        z-index: 1;
    }

    .mobile-slide.past-image-iii::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200"><filter id="noise"><feTurbulence type="fractalNoise" baseFrequency="1.2" numOctaves="3" stitchTiles="stitch"/><feColorMatrix type="saturate" values="0"/></filter><rect width="200" height="200" filter="url(%23noise)" opacity="1"/></svg>');
        background-size: 200px 200px;
        background-repeat: repeat;
        opacity: 0.25;
        pointer-events: none;
        mix-blend-mode: overlay;
        z-index: 10;
    }

    .mobile-slide-media {
        position: absolute;
        top: 15px;
        left: 15px;
        right: 15px;
        bottom: 15px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .mobile-slide-media img,
    .mobile-slide-media video {
        max-width: 100%;
        max-height: 100%;
        width: auto;
        height: auto;
        object-fit: contain;
        display: block;
    }
}

/* ============================================
   TRANSITIONS
   ============================================ */

.landing-page {
    transition: opacity 100ms ease-out;
}

.landing-image-item {
    transition: opacity 100ms ease-out;
}

/* ============================================
   UTILITAIRES
   ============================================ */

.landing-image-item.hidden {
    opacity: 0;
    visibility: hidden;
}

.landing-image-item.visible {
    opacity: 1;
    visibility: visible;
}

/* ============================================
   PAST IMAGE EFFECTS FOR LANDING PAGES
   ============================================ */

/* Past Image I - 8% opacity */
.landing-page.past-image-i,
.landing-page.project-page.past-image-i {
    opacity: 0.08 !important;
    filter: blur(3px) !important;
    pointer-events: none;
    z-index: 3;
    display: block !important;
}

.landing-page.past-image-i::before,
.landing-page.project-page.past-image-i::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200"><filter id="noise"><feTurbulence type="fractalNoise" baseFrequency="1.2" numOctaves="3" stitchTiles="stitch"/><feColorMatrix type="saturate" values="0"/></filter><rect width="200" height="200" filter="url(%23noise)" opacity="1"/></svg>');
    background-size: 200px 200px;
    background-repeat: repeat;
    opacity: 0.25;
    pointer-events: none;
    mix-blend-mode: overlay;
    z-index: 10;
}

/* Past Image II - 5% opacity */
.landing-page.past-image-ii,
.landing-page.project-page.past-image-ii {
    opacity: 0.05 !important;
    filter: blur(3px) !important;
    pointer-events: none;
    z-index: 2;
    display: block !important;
}

.landing-page.past-image-ii::before,
.landing-page.project-page.past-image-ii::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200"><filter id="noise"><feTurbulence type="fractalNoise" baseFrequency="1.2" numOctaves="3" stitchTiles="stitch"/><feColorMatrix type="saturate" values="0"/></filter><rect width="200" height="200" filter="url(%23noise)" opacity="1"/></svg>');
    background-size: 200px 200px;
    background-repeat: repeat;
    opacity: 0.25;
    pointer-events: none;
    mix-blend-mode: overlay;
    z-index: 10;
}

/* Past Image III - 2% opacity */
.landing-page.past-image-iii,
.landing-page.project-page.past-image-iii {
    opacity: 0.02 !important;
    filter: blur(3px) !important;
    pointer-events: none;
    z-index: 1;
    display: block !important;
}

.landing-page.past-image-iii::before,
.landing-page.project-page.past-image-iii::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200"><filter id="noise"><feTurbulence type="fractalNoise" baseFrequency="1.2" numOctaves="3" stitchTiles="stitch"/><feColorMatrix type="saturate" values="0"/></filter><rect width="200" height="200" filter="url(%23noise)" opacity="1"/></svg>');
    background-size: 200px 200px;
    background-repeat: repeat;
    opacity: 0.25;
    pointer-events: none;
    mix-blend-mode: overlay;
    z-index: 10;
}

/* Page active - normale */
.landing-page.active {
    opacity: 1;
    filter: none;
    pointer-events: auto;
    z-index: 10;
}

/* ============================================
   LANDING COPYRIGHT
   ============================================ */

.landing-copyright {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0 32px 20px 32px;
    z-index: 999;
    pointer-events: auto;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    gap: 16px;
}

.landing-copyright-link {
    text-decoration: none;
    color: var(--mm-black);
    font-weight: 400;
    transition: opacity 0.2s, color 0.2s;
    white-space: nowrap;
}

.landing-copyright-link.nav-white {
    color: var(--mm-white);
}

.landing-copyright-link:hover {
    opacity: 0.6;
}

/* Caption globale pour les pages 1 colonne + image full — même couleur que le ©2026 */
.landing-caption-global {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 12px;
    line-height: 150%;
    letter-spacing: 6%;
    white-space: nowrap;
    color: var(--mm-black);
    display: none;
}

.landing-caption-global.nav-white {
    color: var(--mm-white);
}

/* Quand une caption globale est présente : caption à gauche, © à droite */
.landing-copyright.landing-has-caption {
    justify-content: space-between;
}

/* Masquer sur mobile */
@media (max-width: 768px) {
    .landing-copyright {
        display: none;
    }
}

/* ============================================
   PROJECT ANNOUNCEMENT PAGE
   ============================================ */

.project-announcement-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100vh;
    padding: 0;
    gap: 0;
}

.project-announcement-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 40px;
}

.project-announcement-logo img {
    height: 40px;
    width: auto;
    object-fit: contain;
}

.project-announcement-text {
    text-align: center;
    color: var(--mm-black);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    margin-top: 0;
}

.announcement-next {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: 0.02em;
    margin-bottom: 0;
}

.announcement-project-name {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: 14px;
    line-height: 1.5;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin: 0;
}

.announcement-image-count {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: 0.02em;
    margin-top: 0;
}

/* Masquer la page d'annonce sur mobile */
@media (max-width: 768px) {
    .project-announcement-page {
        display: none !important;
    }
}