/*****************************************************************/
/*************** P O L I S H  —  couche d'animation **************/
/*****************************************************************/
/*
 * Chargée après style.css : enrichit le thème sans le réécrire.
 * Palette et typographie d'origine conservées ; toutes les animations
 * sont désactivées si le visiteur a demandé à réduire les mouvements.
 */

:root {
    --bao-indigo: #383882;
    --bao-brick: #c4605b;
    --bao-rose: #e6c0b4;
    --bao-sage: #88b1ae;
    --bao-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --bao-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

::selection {
    background: var(--bao-rose);
    color: var(--bao-indigo);
}

:focus-visible {
    outline: 2px dashed var(--bao-brick);
    outline-offset: 4px;
    border-radius: 4px;
}

/*****************************************/
/******** N A V I G A T I O N ***********/
/****************************************/

/* Le surlignage rose du lien actif se dessine aussi au survol */
.header__link,
.header-home__link {
    box-shadow: none;
    background: linear-gradient(var(--bao-rose), var(--bao-rose)) no-repeat left bottom / 0% 9px;
    transition: background-size 0.45s var(--bao-ease-out);
}
.header-home__nav .header-home__link {
    background-image: linear-gradient(var(--bao-brick), var(--bao-brick));
}
.header__link:hover,
.header-home__link:hover,
.header__link--active,
.header-home__link--active {
    background-size: 100% 9px;
    box-shadow: none;
}
.mobile-menu-nav .header-home__link {
    background-size: 0% 20px;
}
.mobile-menu-nav .header-home__link:hover,
.mobile-menu-nav .header-home-mobile__link--active {
    background-size: 100% 20px;
    box-shadow: none;
}

.header__logo img,
.header-home__logo img,
.footer-logo img {
    transition: transform 0.6s var(--bao-ease-spring);
}
.header__logo a:hover img,
.header-home__logo a:hover img,
.footer-logo:hover img {
    transform: rotate(-8deg) scale(1.04);
}

/*****************************************/
/************* É T O I L E S ************/
/****************************************/

/* Étoiles à quatre branches, reprises du logo */
.sparkle {
    position: absolute;
    width: var(--size, 18px);
    height: var(--size, 18px);
    color: var(--color, var(--bao-rose));
    pointer-events: none;
    z-index: 1;
}
.sparkle svg {
    display: block;
    width: 100%;
    height: 100%;
}
/* Couleur portée par la variable : la règle globale « * { color } » du thème s'applique aussi au SVG */
.sparkle path {
    fill: var(--color, var(--bao-rose));
}

/*****************************************/
/*************** A C C U E I L **********/
/****************************************/

.home-header__wrapper {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}
/* Calque d'image séparé : permet le zoom lent sans bouger le texte */
.home-header__wrapper::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: inherit;
    background-size: cover;
    background-position: center;
}
.header-home__text .col-12 {
    position: relative;
}
/* Mobile : voile indigo léger pour la lisibilité du titre sur la photo */
@media screen and (max-width: 768px) {
    .home-header__wrapper::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        background: linear-gradient(180deg, rgba(56, 56, 130, 0) 25%, rgba(56, 56, 130, 0.38) 50%, rgba(56, 56, 130, 0.1) 80%);
    }
}

/* Soulignement dessiné à la main sous « d'amour » */
.love {
    position: relative;
    display: inline-block;
    white-space: nowrap;
}
.love__doodle {
    position: absolute;
    left: -4%;
    bottom: -0.32em;
    width: 108%;
    height: 0.5em;
    overflow: visible;
    pointer-events: none;
}
.love__doodle path {
    fill: none;
    stroke: var(--bao-rose);
    stroke-width: 5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.presentation__illu {
    position: relative;
}
.presentation__illu video,
.bao-video {
    width: 100%;
    max-width: 400px;
    height: auto;
    /* Fond blanc de la vidéo fondu dans la page */
    mix-blend-mode: multiply;
}
.presentation__text p {
    hyphens: auto;
}

/* Tuiles : l'image de survol se pose en douceur */
#homepage-masonry .img-masonry,
#projects-masonry .img-masonry {
    overflow: hidden;
}
#homepage-masonry .img-masonry img,
#projects-masonry .img-masonry img {
    transform: scale(1.06);
    transition: opacity 0.5s ease, transform 0.9s var(--bao-ease-out);
}
#homepage-masonry .img-masonry img:hover,
#projects-masonry .img-masonry img:hover {
    transform: scale(1);
}

/* Pastille « Voir le projet » qui suit le pointeur sur les tuiles */
.cursor-pill {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 50;
    padding: 10px 22px;
    border-radius: 3rem;
    background: var(--bao-brick);
    color: #fff;
    font: normal normal 600 13px/20px Poppins;
    letter-spacing: 0.97px;
    text-transform: uppercase;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transform: translate3d(var(--x, 0), var(--y, 0), 0) translate(-50%, -50%) scale(0.6);
    transition: opacity 0.25s ease, transform 0.35s var(--bao-ease-spring);
}
.cursor-pill.is-visible {
    opacity: 1;
    transform: translate3d(var(--x, 0), var(--y, 0), 0) translate(-50%, -50%) scale(1);
}

/*****************************************/
/************ P O R T F O L I O *********/
/****************************************/

#project-categories span {
    background: linear-gradient(var(--bao-rose), var(--bao-rose)) no-repeat left bottom / 0% 9px;
    transition: background-size 0.45s var(--bao-ease-out), color 0.3s ease;
}
#project-categories span:hover,
#project-categories span.selected {
    background-size: 100% 9px;
    box-shadow: none;
}

/*****************************************/
/************** P R O J E T *************/
/****************************************/

.single-project hgroup {
    position: relative;
    display: inline-block;
}
.customer-link span {
    background: linear-gradient(var(--bao-rose), var(--bao-rose)) no-repeat left bottom / 100% 1px;
    transition: background-size 0.4s var(--bao-ease-out);
}
.customer-link:hover span {
    background-size: 100% 8px;
    color: var(--bao-indigo);
}
.single-project .video a {
    overflow: hidden;
}
.single-project .video a > img:first-child {
    transition: transform 0.9s var(--bao-ease-out);
}
.single-project .video a:hover > img:first-child {
    transform: scale(1.03);
}

/*****************************************/
/************* À  P R O P O S ***********/
/****************************************/

.about-page .skills-section {
    position: relative;
}
.about-page .skills-section img {
    transition: transform 0.5s var(--bao-ease-spring);
}
.about-page .skills-section .col-12:hover img {
    transform: translateY(-8px) rotate(-4deg);
}

/*****************************************/
/************** C O N T A C T ***********/
/****************************************/

/* Le trait des champs se colore de gauche à droite à la saisie */
.contact-page form input:not([type="submit"]),
.contact-page form textarea {
    background: linear-gradient(var(--bao-brick), var(--bao-brick)) no-repeat left bottom / 0% 2px;
    transition: background-size 0.5s var(--bao-ease-out);
}
.contact-page form input:not([type="submit"]):focus,
.contact-page form textarea:focus {
    background-size: 100% 2px;
}
.contact-page form input[type="submit"] {
    transition: background-color 0.3s ease, transform 0.3s var(--bao-ease-spring);
}
.contact-page form input[type="submit"]:hover {
    background-color: var(--bao-brick);
    transform: translateY(-2px);
}

.burst {
    position: fixed;
    z-index: 60;
    pointer-events: none;
}

/*****************************************/
/************** F O O T E R *************/
/****************************************/

#sn-list li a {
    display: inline-block;
    transition: transform 0.4s var(--bao-ease-spring);
}
#sn-list li a:hover {
    transform: translateY(-4px) rotate(-6deg);
}
#menu-footer a,
#footer-infos a {
    background: linear-gradient(var(--bao-rose), var(--bao-rose)) no-repeat left bottom / 0% 1px;
    transition: background-size 0.4s var(--bao-ease-out);
}
#menu-footer a:hover,
#footer-infos a:hover {
    background-size: 100% 1px;
}

/*****************************************/
/********** M O U V E M E N T S *********/
/****************************************/

@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }

    /* Transitions entre pages (navigateurs compatibles) */
    @view-transition {
        navigation: auto;
    }
    ::view-transition-old(root) {
        animation: bao-page-out 0.3s ease both;
    }
    ::view-transition-new(root) {
        animation: bao-page-in 0.45s var(--bao-ease-out) both;
    }
    footer {
        view-transition-name: site-footer;
    }

    /* Apparition au défilement (activée par polish.js) */
    .js [data-reveal] {
        opacity: 0;
        transform: translateY(28px);
        transition: opacity 0.9s var(--bao-ease-out), transform 0.9s var(--bao-ease-out);
        transition-delay: calc(var(--i, 0) * 90ms);
    }
    /* Rideau : un voile blanc se retire (un clip-path sur la cible bloquerait l'IntersectionObserver) */
    .js [data-reveal^="wipe"] {
        opacity: 1;
        transform: none;
        position: relative;
    }
    .js [data-reveal^="wipe"]::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 2;
        background: #fff;
        pointer-events: none;
        transform-origin: bottom;
        transition: transform 1.1s var(--bao-ease-out);
        transition-delay: calc(var(--i, 0) * 110ms);
    }
    .js [data-reveal="wipe-left"]::after {
        transform-origin: right;
    }
    .js [data-reveal="wipe-right"]::after {
        transform-origin: left;
    }
    .js [data-reveal="wipe"].is-revealed::after {
        transform: scaleY(0);
    }
    .js [data-reveal="wipe-left"].is-revealed::after,
    .js [data-reveal="wipe-right"].is-revealed::after {
        transform: scaleX(0);
    }
    .js [data-reveal="pop"] {
        transform: translateY(20px) scale(0.92);
        transition-timing-function: var(--bao-ease-spring);
    }
    .js [data-reveal="ride"] {
        transform: translateX(-60px);
    }
    .js [data-reveal].is-revealed {
        opacity: 1;
        transform: none;
    }

    /* Accueil : arrivée du bandeau */
    .home-header__wrapper::before {
        animation: bao-kenburns 2.4s var(--bao-ease-out) both;
    }
    .header-home__logo img {
        animation: bao-logo-in 1.1s var(--bao-ease-spring) 0.15s backwards;
    }
    .header-home__nav-left span,
    .header-home__nav-right span {
        animation: bao-fade-down 0.8s var(--bao-ease-out) both;
    }
    .header-home__nav-left span:nth-child(1) { animation-delay: 0.3s; }
    .header-home__nav-left span:nth-child(2) { animation-delay: 0.4s; }
    .header-home__nav-right span:nth-child(1) { animation-delay: 0.5s; }
    .header-home__nav-right span:nth-child(2) { animation-delay: 0.6s; }
    .header-home__text h1,
    .header-home__text p,
    .header-home__text .link--pan {
        animation: bao-fade-up 1s var(--bao-ease-out) both;
    }
    .header-home__text h1 { animation-delay: 0.5s; }
    .header-home__text p { animation-delay: 0.7s; }
    .header-home__text .link--pan { animation-delay: 0.9s; }
    .love__doodle path {
        stroke-dasharray: 1;
        stroke-dashoffset: 1;
        animation: bao-draw 0.9s ease-in-out 1.5s forwards;
    }

    /* Pages intérieures : arrivée du titre */
    .single-project hgroup h1,
    .single-project hgroup h2 {
        animation: bao-fade-up 0.9s var(--bao-ease-out) both;
    }
    .single-project hgroup h2 { animation-delay: 0.15s; }

    /* Étoiles qui scintillent */
    .sparkle {
        animation: bao-twinkle var(--duration, 2.8s) ease-in-out var(--delay, 0s) infinite;
    }

    /* Bouton lecture des vidéos : respiration plus douce */
    .btn-play {
        animation: bao-breathe 1.6s ease-in-out infinite;
    }

    /* 404 : les sapins se balancent */
    .p404-illu #freepik--Trees--inject-25 > g {
        transform-box: fill-box;
        transform-origin: 50% 100%;
        animation: bao-sway 3.5s ease-in-out infinite alternate;
    }
    .p404-illu #freepik--Trees--inject-25 > g:nth-child(2n) {
        animation-duration: 4.2s;
        animation-delay: -1s;
    }
}

@keyframes bao-page-out {
    to { opacity: 0; transform: translateY(-12px); }
}
@keyframes bao-page-in {
    from { opacity: 0; transform: translateY(16px); }
}
@keyframes bao-kenburns {
    from { transform: scale(1.12); }
    to { transform: scale(1); }
}
@keyframes bao-logo-in {
    from { opacity: 0; transform: scale(0.7) rotate(-25deg); }
}
@keyframes bao-fade-up {
    from { opacity: 0; transform: translateY(24px); }
}
@keyframes bao-fade-down {
    from { opacity: 0; transform: translateY(-14px); }
}
@keyframes bao-draw {
    to { stroke-dashoffset: 0; }
}
@keyframes bao-twinkle {
    0%, 100% { opacity: 0.25; transform: scale(0.6) rotate(0deg); }
    50% { opacity: 1; transform: scale(1) rotate(45deg); }
}
@keyframes bao-breathe {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.12); }
}
@keyframes bao-sway {
    from { transform: rotate(-2.5deg); }
    to { transform: rotate(2.5deg); }
}