/* =========================================================
   PETROCI — animations globales
   ========================================================= */

html {
    scroll-behavior: smooth;
}

/* ---------- Écran de chargement ---------- */

body.is-loading {
    overflow: hidden;
}

.page-loader {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    transition:
        opacity 0.45s ease,
        visibility 0.45s ease;
}

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

.page-loader__logo {
    display: block;
    width: min(170px, 42vw);
    height: auto;
    object-fit: contain;
    animation: page-loader-pulse 1.15s ease-in-out infinite;
}

@keyframes page-loader-pulse {
    0%,
    100% {
        opacity: 0.82;
        transform: scale(1);
    }

    50% {
        opacity: 1;
        transform: scale(1.05);
    }
}

@media (prefers-reduced-motion: reduce) {
    .page-loader__logo {
        animation: none;
    }

    .page-loader {
        transition-duration: 0.15s;
    }
}

.page-anchor {
    scroll-margin-top: 120px;
}

/* ---------- Ken Burns — uniquement dans la carte hero ---------- */

html.js-anim .petroci-header {
    background: #ffffff;
}

html.js-anim .petroci-hero-shell::before {
    content: "";
    position: absolute;
    inset: -8%;
    z-index: 0;
    background-image: var(--hero-bg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

html.js-anim .petroci-hero-shell {
    background-color: #0f2a36;
    background-image: none;
}

html.js-anim .petroci-hero-shell .petroci-overlay {
    z-index: 1;
}

@media (min-width: 769px) {
    html.js-anim .petroci-hero-shell::before {
        animation: petroci-kenburns 22s ease-in-out infinite alternate;
    }
}

@keyframes petroci-kenburns {
    from { transform: scale(1); }
    to { transform: scale(1.08); }
}

@keyframes petroci-fade-up {
    from {
        opacity: 0;
        translate: 0 28px;
    }
    to {
        opacity: 1;
        translate: 0 0;
    }
}

@keyframes petroci-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes petroci-line {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

/* ---------- Hero : entrée au chargement ---------- */

html.js-anim .petroci-topbar,
html.js-anim .petroci-hero h1,
html.js-anim .petroci-hero p,
html.js-anim .petroci-hero .petroci-buttons,
html.js-anim .desktop-partners .partners-list {
    animation: petroci-fade-up 0.85s cubic-bezier(0.22, 1, 0.36, 1) both;
}

html.js-anim .petroci-topbar { animation-delay: 0.05s; }
html.js-anim .petroci-hero h1 { animation-delay: 0.28s; }
html.js-anim .petroci-hero p { animation-delay: 0.42s; }
html.js-anim .petroci-hero .petroci-buttons { animation-delay: 0.56s; }


html.js-anim .desktop-partners .partners-list { animation-delay: 0.7s; }

/* ---------- Révélation au scroll ---------- */

html.js-anim :is(
    .about-text,
    .about-image-container,
    .activity-intro,
    .activity-card,
    .africa-map-wrapper,
    .west-africa-card,
    .vision-image-wrapper,
    .vision-content,
    .leadership-header,
    .leadership-main,
    .leader-item,
    .news-header,
    .news-card,
    .values-header,
    .value-card,
    .vision-mission-header,
    .vision-card,
    .growth-left,
    .growth-header,
    .growth-axis,
    .metier-card,
    .contact-header,
    .country-list,
    .company-info,
    .contact-form-box,
    .location-box,
    .activity-detail-image,
    .activity-detail-content,
    .footer-brand,
    .footer-column,
    .pre-footer-cta__content
) {
    opacity: 0;
    translate: 0 36px;
    transition:
        opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1),
        translate 0.75s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: var(--anim-delay, 0ms);
}

html.js-anim .about-text,
html.js-anim .africa-map-wrapper,
html.js-anim .leadership-main,
html.js-anim .growth-left,
html.js-anim .activity-detail-image,
html.js-anim .contact-form-box {
    translate: -40px 0;
}

html.js-anim .about-image-container,
html.js-anim .west-africa-card,
html.js-anim .activity-detail-content,
html.js-anim .location-box {
    translate: 40px 0;
}

html.js-anim :is(
    .about-text,
    .about-image-container,
    .activity-intro,
    .activity-card,
    .africa-map-wrapper,
    .west-africa-card,
    .vision-image-wrapper,
    .vision-content,
    .leadership-header,
    .leadership-main,
    .leader-item,
    .news-header,
    .news-card,
    .values-header,
    .value-card,
    .vision-mission-header,
    .vision-card,
    .growth-left,
    .growth-header,
    .growth-axis,
    .metier-card,
    .contact-header,
    .country-list,
    .company-info,
    .contact-form-box,
    .location-box,
    .activity-detail-image,
    .activity-detail-content,
    .footer-brand,
    .footer-column,
    .pre-footer-cta__content
).is-inview {
    opacity: 1;
    translate: 0 0;
}

/* ---------- Traits orange ---------- */

html.js-anim :is(
    .about-orange-line,
    .activity-orange-line-span,
    .vision-label-line,
    .leadership-label-line,
    .news-label-line,
    .values-label-line,
    .growth-label-line,
    .activity-detail-orange-line,
    .metiers-title-line
) {
    transform: scaleX(0);
    transform-origin: left center;
}

html.js-anim .is-inview :is(
    .about-orange-line,
    .activity-orange-line-span,
    .vision-label-line,
    .leadership-label-line,
    .news-label-line,
    .values-label-line,
    .growth-label-line,
    .activity-detail-orange-line,
    .metiers-title-line
),
html.js-anim :is(
    .about-text,
    .activity-intro,
    .vision-content,
    .leadership-header,
    .news-header,
    .values-header,
    .growth-header,
    .activity-detail-content,
    .metier-card
).is-inview :is(
    .about-orange-line,
    .activity-orange-line-span,
    .vision-label-line,
    .leadership-label-line,
    .news-label-line,
    .values-label-line,
    .growth-label-line,
    .activity-detail-orange-line,
    .metiers-title-line
) {
    animation: petroci-line 0.55s ease 0.25s forwards;
}

/* ---------- Survols ---------- */

.activity-card:hover {
    transform: translateY(-6px);
}

.news-card:hover {
    transform: translateY(-6px);
}

.metier-card:hover {
    transform: translateY(-4px);
}

.leader-item {
    transition: transform 0.3s ease;
}

.leader-item:hover {
    transform: translateY(-4px);
}

.footer-logo img {
    transition: transform 0.35s ease;
}

.footer-logo:hover img {
    transform: scale(1.06);
}

.petroci-btn:hover {
    transform: translateY(-2px);
}

/* ---------- Accessibilité ---------- */

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    html.js-anim .petroci-hero-shell::before,
    html.js-anim .petroci-topbar,
    html.js-anim .petroci-hero h1,
    html.js-anim .petroci-hero p,
    html.js-anim .petroci-hero .petroci-buttons,
    html.js-anim .desktop-partners .partners-list {
        animation: none;
    }

    html.js-anim :is(
        .about-text,
        .about-image-container,
        .activity-intro,
        .activity-card,
        .africa-map-wrapper,
        .west-africa-card,
        .vision-image-wrapper,
        .vision-content,
        .leadership-header,
        .leadership-main,
        .leader-item,
        .news-header,
        .news-card,
        .values-header,
        .value-card,
        .vision-mission-header,
        .vision-card,
        .growth-left,
        .growth-header,
        .growth-axis,
        .metier-card,
        .contact-header,
        .country-list,
        .company-info,
        .contact-form-box,
        .location-box,
        .activity-detail-image,
        .activity-detail-content,
        .footer-brand,
        .footer-column
    ) {
        opacity: 1;
        translate: 0 0;
        transition: none;
    }
}