/* ==========================================================================
   HERO — Pattern Warhol plein écran responsive
   ========================================================================== */

.hero {
    position: relative;
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    overflow: hidden;
    background: var(--color-paper);
    isolation: isolate;
}

/* ---- Pattern SVG plein écran ---- */
/* BRIEF-25 : visibility:hidden par défaut — fond crème pur avant tout JS */
.hero__pattern {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    visibility: hidden;
    opacity: 0;
}

.hero__pattern > svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* ---- Contenu hero ---- */
.hero__content {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    padding-block: calc(var(--sp-6) + 44px) var(--sp-5);
    pointer-events: none;
}

.hero__content > * {
    pointer-events: auto;
}

/* === DESKTOP : voile dégradé gauche → transparent droite === */
@media (min-width: 1024px) {
    .hero__content {
        background: linear-gradient(
            to right,
            var(--color-paper) 0%,
            rgba(245, 245, 242, 0.94) 35%,
            rgba(245, 245, 242, 0.5) 60%,
            rgba(245, 245, 242, 0) 90%
        );
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
    }
}

/* === TABLETTE : voile horizontal plus opaque === */
@media (min-width: 640px) and (max-width: 1023px) {
    .hero__content {
        background: linear-gradient(
            to right,
            var(--color-paper) 0%,
            rgba(245, 245, 242, 0.92) 50%,
            rgba(245, 245, 242, 0.3) 100%
        );
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
        padding-block: calc(var(--sp-7) + 56px) var(--sp-6);
    }
}

/* === MOBILE : voile vertical haut → bas === */
@media (max-width: 639px) {
    .hero__content {
        background: linear-gradient(
            to bottom,
            var(--color-paper) 0%,
            rgba(245, 245, 242, 0.95) 40%,
            rgba(245, 245, 242, 0.5) 80%,
            rgba(245, 245, 242, 0.2) 100%
        );
        backdrop-filter: blur(1.5px);
        -webkit-backdrop-filter: blur(1.5px);
    }
}

/* ---- Typographies hero ---- */
.hero__title {
    display: flex;
    flex-wrap: wrap;
    gap: 0 0.25em;
    margin-bottom: var(--sp-3);
    padding-bottom: 0.15em;
}

.hero__word {
    display: inline-block;
    padding-bottom: 0.15em;
}

.hero__word > span {
    display: inline-block;
}

.hero__lead {
    max-width: 22ch;
    margin-bottom: var(--sp-4);
    color: var(--color-ink);
}

.hero__countries {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2);
    color: var(--color-mute);
    text-transform: uppercase;
    letter-spacing: var(--ls-ultra);
    margin-bottom: var(--sp-4);
}

.hero__countries .dot {
    opacity: 0.5;
}

.hero__countries .accent {
    color: var(--color-red);
}

/* ---- Scroll indicator ---- */
.hero__scroll {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin-top: auto;
}

.hero__scroll-line {
    display: block;
    width: 48px;
    height: 1px;
    background: var(--color-ink);
    animation: scroll-pulse 2s infinite;
    transform-origin: left;
}

@keyframes scroll-pulse {
    0%, 100% { transform: scaleX(0.3); opacity: 0.4; }
    50%      { transform: scaleX(1);   opacity: 1; }
}

/* ---- Responsive ---- */
@media (min-width: 768px) {
    .hero__content {
        padding-block: calc(var(--sp-7) + 56px) var(--sp-6);
    }

    .hero__lead {
        max-width: 32ch;
    }

    .hero__countries {
        gap: var(--sp-3);
        font-size: var(--fs-sm);
    }
}

@media (min-width: 1200px) {
    .hero__content {
        padding-block: var(--sp-8);
        justify-content: center;
    }
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
    .hero__scroll-line {
        animation: none;
    }
    .hero__pattern {
        transition: opacity 200ms linear;
    }
}

/* ==========================================================================
   SECTIONS placeholders
   ========================================================================== */

.section--placeholder {
    min-height: 40vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--sp-3);
    padding-block: var(--sp-7);
    border-top: 1px solid var(--color-line);
}

.section__placeholder-note {
    font-family: var(--font-body);
    color: var(--color-mute);
    font-size: var(--fs-sm);
}

/* ==========================================================================
   HERO INTRO ANIMATION — 4 phases premium "patchwork qui se révèle"
   Joue UNE SEULE FOIS au chargement, puis statique pour toujours
   ========================================================================== */

/* ==========================================================================
   PHASE 1 — Loader sceau LH "respiration" 3000ms + transition narrative
   ========================================================================== */

/* === FOND CRÈME PUR — pattern caché tant que le loader est actif === */
.hero[data-phase="init"] .hero__pattern,
.hero[data-phase="loader"] .hero__pattern,
.hero[data-phase="inspiration"] .hero__pattern {
    visibility: hidden;
    opacity: 0;
}

/* Pattern visible à partir de l'explosion */
.hero[data-phase="explosion"] .hero__pattern,
.hero[data-phase="settle"] .hero__pattern,
.hero[data-phase="text"] .hero__pattern,
.hero[data-phase="done"] .hero__pattern {
    visibility: visible;
    opacity: 1;
    transition: opacity 200ms cubic-bezier(0.215, 0.61, 0.355, 1);
}

/* === LOADER WRAPPER (sceau + ligne progression) === */
.hero__loader {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 300ms cubic-bezier(0.215, 0.61, 0.355, 1);
}

/* === SCEAU LH === */
.hero__seal {
    width: 140px;
    height: 172px;
    position: relative;
    transform-origin: center center;
}

.hero__seal svg {
    width: 100%;
    height: 100%;
    color: var(--color-red);
    display: block;
}

/* === LIGNE PROGRESSION === */
.hero__progress {
    width: 200px;
    height: 2px;
    background: rgba(193, 53, 76, 0.12);
    border-radius: 1px;
    overflow: hidden;
    position: relative;
}

.hero__progress-fill {
    position: absolute;
    inset: 0 100% 0 0;
    background: var(--color-red);
    border-radius: 1px;
    transition: inset 2000ms linear; /* BRIEF-25 : 3000 → 2000ms */
}

/* === PHASE LOADER (0 → 2700ms) — respiration normale === */
.hero[data-phase="loader"] .hero__loader {
    opacity: 1;
}

.hero[data-phase="loader"] .hero__seal {
    animation: seal-breath 1600ms cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}

.hero[data-phase="loader"] .hero__progress-fill {
    inset: 0 0 0 0;
}

/* === PHASE INSPIRATION (2700 → 3000ms) — le sceau prend son élan === */
.hero[data-phase="inspiration"] .hero__loader {
    opacity: 1;
}

.hero[data-phase="inspiration"] .hero__seal {
    animation: seal-inspiration 300ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.hero[data-phase="inspiration"] .hero__progress-fill {
    inset: 0 0 0 0;
}

/* === PHASES SUIVANTES — loader caché === */
.hero[data-phase="explosion"] .hero__loader,
.hero[data-phase="settle"] .hero__loader,
.hero[data-phase="text"] .hero__loader,
.hero[data-phase="done"] .hero__loader {
    opacity: 0;
}

.hero[data-phase="skip"] .hero__loader {
    display: none;
}

/* === FLASH RADIAL — moment magique de la transition === */
.hero__flash {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(193, 53, 76, 0.18) 0%,
        rgba(193, 53, 76, 0.08) 40%,
        rgba(193, 53, 76, 0) 70%
    );
    transform: translate(-50%, -50%);
    z-index: 9;
    pointer-events: none;
    opacity: 0;
}

.hero[data-phase="explosion"] .hero__flash {
    animation: flash-radial 600ms cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
}

/* === KEYFRAMES === */
@keyframes seal-breath {
    0%   { transform: scale(1);    opacity: 1; }
    50%  { transform: scale(1.04); opacity: 0.92; }
    100% { transform: scale(1);    opacity: 1; }
}

@keyframes seal-inspiration {
    0%   { transform: scale(1);    opacity: 1; }
    100% { transform: scale(1.15); opacity: 0.7; }
}

@keyframes flash-radial {
    0%   { width: 0;      height: 0;      opacity: 0; }
    30%  { width: 600px;  height: 600px;  opacity: 1; }
    100% { width: 1800px; height: 1800px; opacity: 0; }
}

/* === REDUCED MOTION Phase 1 === */
@media (prefers-reduced-motion: reduce) {
    .hero__seal  { animation: none; }
    .hero__progress { display: none; }
    .hero__flash { display: none; }
}

/* === PATTERN (Phase 2 — explosion radiale) === */

.hero__pattern svg path {
    opacity: 0;
    transform: scale(0);
    transform-origin: center center;
    transform-box: fill-box;
    transition:
        opacity 400ms cubic-bezier(0.215, 0.61, 0.355, 1),
        transform 600ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.hero__pattern svg path.is-revealed {
    opacity: 1;
    transform: scale(1);
}

/* === SETTLEMENT (Phase 3 — blur off) === */
.hero__pattern {
    filter: blur(3px);
    transition: filter 300ms cubic-bezier(0.215, 0.61, 0.355, 1);
}

.hero[data-phase="settle"] .hero__pattern,
.hero[data-phase="text"] .hero__pattern,
.hero[data-phase="done"] .hero__pattern {
    filter: blur(0px);
}

/* === VOILE CRÈME ANIMÉ (Phase 4) === */

@media (min-width: 1024px) {
    .hero__content {
        clip-path: inset(0 100% 0 0);
        transition: clip-path 600ms cubic-bezier(0.215, 0.61, 0.355, 1);
    }
    .hero[data-phase="text"] .hero__content,
    .hero[data-phase="done"] .hero__content {
        clip-path: inset(0 0 0 0);
    }
}

@media (min-width: 640px) and (max-width: 1023px) {
    .hero__content {
        clip-path: inset(0 100% 0 0);
        transition: clip-path 600ms cubic-bezier(0.215, 0.61, 0.355, 1);
    }
    .hero[data-phase="text"] .hero__content,
    .hero[data-phase="done"] .hero__content {
        clip-path: inset(0 0 0 0);
    }
}

@media (max-width: 639px) {
    .hero__content {
        clip-path: inset(100% 0 0 0);
        transition: clip-path 600ms cubic-bezier(0.215, 0.61, 0.355, 1);
    }
    .hero[data-phase="text"] .hero__content,
    .hero[data-phase="done"] .hero__content {
        clip-path: inset(0 0 0 0);
    }
}

/* === ÉLÉMENTS TEXTE — stagger reveal === */
.hero__title,
.hero__lead,
.hero__countries,
.hero__scroll {
    opacity: 0;
    transform: translateY(20px);
    transition:
        opacity 700ms cubic-bezier(0.215, 0.61, 0.355, 1),
        transform 700ms cubic-bezier(0.215, 0.61, 0.355, 1);
}

.hero[data-phase="text"] .hero__title,
.hero[data-phase="done"] .hero__title {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0ms;
}

.hero[data-phase="text"] .hero__lead,
.hero[data-phase="done"] .hero__lead {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 200ms;
}

.hero[data-phase="text"] .hero__countries,
.hero[data-phase="done"] .hero__countries {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 400ms;
}

.hero[data-phase="text"] .hero__scroll,
.hero[data-phase="done"] .hero__scroll {
    opacity: 0.7;
    transform: translateY(0);
    transition-delay: 600ms;
}

/* === SKIP — intro déjà jouée (sessionStorage) === */
.hero[data-phase="skip"] .hero__pattern {
    visibility: visible;
    opacity: 0.85;
    filter: blur(0);
}

@media (max-width: 639px) {
    .hero[data-phase="skip"] .hero__pattern {
        opacity: 0.75;
    }
}
.hero[data-phase="skip"] .hero__pattern svg path {
    opacity: 1;
    transform: scale(1);
    transition: none;
}
.hero[data-phase="skip"] .hero__content {
    clip-path: inset(0 0 0 0);
    transition: none;
}
.hero[data-phase="skip"] .hero__title,
.hero[data-phase="skip"] .hero__lead,
.hero[data-phase="skip"] .hero__countries {
    opacity: 1;
    transform: none;
    transition: none;
}
.hero[data-phase="skip"] .hero__scroll {
    opacity: 0.7;
    transform: none;
    transition: none;
}

/* === REDUCED MOTION — Phases 2-5 === */
@media (prefers-reduced-motion: reduce) {
    .hero__pattern svg path,
    .hero__pattern,
    .hero__content,
    .hero__title,
    .hero__lead,
    .hero__countries,
    .hero__scroll {
        transition: none !important;
        animation: none !important;
    }
    .hero[data-phase] .hero__pattern svg path {
        opacity: 1;
        transform: scale(1);
    }
    .hero[data-phase] .hero__pattern {
        filter: none;
    }
    .hero[data-phase] .hero__content {
        clip-path: inset(0 0 0 0);
    }
    .hero[data-phase] .hero__title,
    .hero[data-phase] .hero__lead,
    .hero[data-phase] .hero__countries {
        opacity: 1;
        transform: none;
    }
    .hero[data-phase] .hero__scroll {
        opacity: 0.7;
    }
    .hero[data-phase] .hero__loader {
        opacity: 0;
    }
}

/* ==========================================================================
   HERO CONTACT BUTTONS — LinkedIn + Téléphone (BRIEF-32)
   Classe mutualisée .hero__contact-btn — rounded square outline rouge
   ========================================================================== */

.hero__contact-buttons {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin-top: var(--sp-4);
    margin-bottom: var(--sp-2);
    opacity: 0;
    transform: translateY(20px);
    transition:
        opacity 700ms cubic-bezier(0.215, 0.61, 0.355, 1),
        transform 700ms cubic-bezier(0.215, 0.61, 0.355, 1);
}

.hero__contact-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    border: 1.5px solid var(--color-red);
    background: transparent;
    color: var(--color-red);
    text-decoration: none;
    transition:
        background-color 200ms cubic-bezier(0.215, 0.61, 0.355, 1),
        color 200ms cubic-bezier(0.215, 0.61, 0.355, 1),
        transform 200ms cubic-bezier(0.215, 0.61, 0.355, 1),
        box-shadow 200ms cubic-bezier(0.215, 0.61, 0.355, 1);
}

.hero__contact-btn svg {
    width: 20px;
    height: 20px;
    display: block;
    fill: currentColor;
}

/* Reveal — stagger après .hero__countries (delay 500ms) */
.hero[data-phase="text"] .hero__contact-buttons,
.hero[data-phase="done"] .hero__contact-buttons {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 500ms;
}

/* Hover : remplit en rouge, icône passe en crème */
@media (hover: hover) and (pointer: fine) {
    .hero__contact-btn:hover {
        background: var(--color-red);
        color: var(--color-paper);
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(193, 53, 76, 0.25);
    }
}

.hero__contact-btn:focus-visible {
    outline: 2px solid var(--color-red);
    outline-offset: 4px;
    background: var(--color-red);
    color: var(--color-paper);
}

/* Skip */
.hero[data-phase="skip"] .hero__contact-buttons {
    opacity: 1;
    transform: none;
    transition: none;
}

@media (max-width: 639px) {
    .hero__contact-btn {
        width: 40px;
        height: 40px;
        border-radius: 7px;
    }
    .hero__contact-btn svg {
        width: 18px;
        height: 18px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero__contact-buttons {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .hero__contact-btn {
        transition:
            background-color 200ms,
            color 200ms;
    }
    .hero__contact-btn:hover {
        transform: none;
    }
}