/**
 * Pertuade — Scroll Split Hero
 * Overlay cream + emblème du logo (clipped) qui se sépare en 2 + wordmark HTML qui descend.
 * Le hero accueil reste TEL QUEL en arrière-plan ; on superpose un voile cream, l'emblème split, le wordmark HTML et le hint.
 */

.pp-split-overlay {
    position: fixed;
    inset: 0;
    z-index: 80; /* au-dessus du contenu, sous le header nav (z-index 100) */
    pointer-events: none;
    --progress: 0;
    transition: opacity 0.2s linear;
    opacity: calc(max(0, 1 - var(--progress) * 1.05));
}
/* Click anywhere sur l'overlay = équivalent click hint (28/05).
   Captures uniquement avant le 1er scroll → reste discret après. */
body:not(.pp-has-scrolled) .pp-split-overlay {
    pointer-events: auto;
    cursor: pointer;
}

/* Voile cream OPAQUE au load (cache complètement le hero) puis fade.
   min(1, ...) → reste à 1.0 jusqu'à progress=0.5, puis fade linéaire 0.5→1. */
.pp-split-veil {
    position: absolute;
    inset: 0;
    background: var(--cream, #F5F1EA);
    opacity: min(1, calc((1 - var(--progress)) * 2));
    transition: opacity 0.05s linear;
    z-index: 1;
}

/* ====================================================
   Halves split : full viewport height, overflow hidden, translate horizontal.
   Chaque half affiche sa moitié du logo via overflow. Le logo est centré pixel-perfect sur
   la jointure entre les 2 halves grâce à right:0/left:0 + translate(50%/-50%).
   ==================================================== */
.pp-split-half {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 50%;
    overflow: hidden;
    z-index: 2;
    will-change: transform;
}
.pp-split-left {
    left: 0;
    transform: translateX(calc(var(--progress) * -150%));
}
.pp-split-right {
    right: 0;
    transform: translateX(calc(var(--progress) * 150%));
}

/* Tease : petite animation cyclique qui suggère que les halves peuvent s'écarter.
   Active uniquement avant le premier scroll, s'éteint au premier mouvement. */
@keyframes pp-split-tease-left {
    0%, 15%, 70%, 100% { transform: translateX(0); }
    35%, 50%           { transform: translateX(-22px); }
}
@keyframes pp-split-tease-right {
    0%, 15%, 70%, 100% { transform: translateX(0); }
    35%, 50%           { transform: translateX(22px); }
}
body:not(.pp-has-scrolled) .pp-split-left {
    animation: pp-split-tease-left 2.8s cubic-bezier(0.4, 0, 0.2, 1) 1.8s infinite;
}
body:not(.pp-has-scrolled) .pp-split-right {
    animation: pp-split-tease-right 2.8s cubic-bezier(0.4, 0, 0.2, 1) 1.8s infinite;
}

/* Logo : cropped à l'emblème via clip-path (garde 49% supérieur du PNG).
   Centré sur la jointure (le bord intérieur du half). */
.pp-split-logo {
    position: absolute;
    top: 50%;
    width: clamp(320px, 38vw, 620px);
    height: auto;
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
    filter: brightness(0);
    clip-path: inset(0 0 51% 0);
}
.pp-split-left .pp-split-logo {
    right: 0;
    transform: translate(50%, -50%);
}
.pp-split-right .pp-split-logo {
    left: 0;
    transform: translate(-50%, -50%);
}

/* ====================================================
   Wordmark "La Pertuade" + tagline "Côtes de Provence" en HTML.
   Position absolute centré, juste sous l'emblème clippé.
   Descend en bloc (translateY) pendant le scroll, sans coupure verticale.
   ==================================================== */
.pp-split-wordmark {
    position: absolute;
    top: 50%;          /* le HAUT du bloc wordmark s'aligne au centre du viewport (juste sous l'emblème clippé) */
    left: 50%;
    z-index: 2;
    width: clamp(320px, 38vw, 620px);
    text-align: center;
    color: var(--text, #1A1A1A);
    pointer-events: none;
    will-change: transform, opacity;
    transform: translate(-50%, calc(var(--progress) * 140px));
    opacity: calc(max(0, 1 - var(--progress) * 3));
    transition: none;
    margin-top: clamp(0.5rem, 1.4vw, 1.25rem);
}

.pp-split-name {
    font-family: var(--font-serif, 'Cormorant Garamond', serif);
    font-weight: 500;
    font-size: clamp(2.5rem, 6.4vw, 5.5rem);
    line-height: 1;
    letter-spacing: -0.01em;
    color: var(--text, #1A1A1A);
}

.pp-split-tagline {
    font-family: var(--font-body, 'Archivo', sans-serif);
    font-weight: 400;
    font-size: clamp(0.75rem, 1.3vw, 1.0625rem);
    line-height: 1;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--text-muted, #5C5345);
    margin-top: clamp(0.75rem, 1.4vw, 1.25rem);
}

/* ====================================================
   Indication scroll (button cliquable).
   ==================================================== */
.pp-split-hint {
    position: absolute;
    bottom: clamp(1.5rem, 4vh, 3rem);
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;

    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0.75rem 1.25rem;

    font-family: var(--font-body, 'Archivo', sans-serif);
    color: var(--text, #1A1A1A);

    /* État par défaut : invisible et non interactif. JS révèle après 0.6s
       via la classe body.pp-hint-revealed, et la transition CSS fait le fade. */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.55s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s ease;
}
/* Hint visible : pas encore scrollé + révélé par JS */
body.pp-hint-revealed:not(.pp-has-scrolled) .pp-split-hint {
    opacity: 1;
    pointer-events: auto;
}
/* Hint masqué dès qu'on scrolle au-delà du seuil (réversible : revient si on retourne en haut) */
body.pp-has-scrolled .pp-split-hint {
    opacity: 0;
    pointer-events: none;
}
.pp-split-hint:hover {
    transform: translateX(-50%) translateY(-3px);
}
.pp-split-hint:focus-visible {
    outline: 2px solid var(--text, #1A1A1A);
    outline-offset: 4px;
    border-radius: 2px;
}

.pp-split-hint-text {
    font-size: 0.6875rem;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--text-muted, #5C5345);
    transition: color 0.3s;
}
.pp-split-hint:hover .pp-split-hint-text { color: var(--text, #1A1A1A); }

.pp-split-hint-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    animation: pp-split-hint-bounce 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.pp-split-hint-arrow svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
}

@keyframes pp-split-hint-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(6px); }
}

/* ====================================================
   Responsive
   ==================================================== */
@media (max-width: 1024px) {
    .pp-split-logo { width: clamp(380px, 62vw, 560px); }
    .pp-split-wordmark { width: clamp(380px, 62vw, 560px); }
}
@media (max-width: 768px) {
    .pp-split-logo { width: clamp(300px, 78vw, 460px); }
    .pp-split-wordmark { width: clamp(300px, 78vw, 460px); }
    .pp-split-hint { bottom: 2rem; gap: 0.5rem; }
    .pp-split-hint-text { font-size: 0.625rem; letter-spacing: 0.28em; }
    .pp-split-hint-arrow { width: 24px; height: 24px; }
    .pp-split-hint-arrow svg { width: 18px; height: 18px; }
    .pp-split-name { font-size: clamp(2.25rem, 9vw, 4rem); }
    .pp-split-tagline { font-size: clamp(0.6875rem, 2.4vw, 0.875rem); letter-spacing: 0.28em; }
}
@media (max-width: 480px) {
    .pp-split-logo { width: clamp(280px, 84vw, 380px); }
    .pp-split-wordmark { width: clamp(280px, 84vw, 380px); }
}

@media (prefers-reduced-motion: reduce) {
    .pp-split-hint-arrow { animation: none; }
    .pp-split-hint { transition: opacity 0.2s linear; }
    body:not(.pp-has-scrolled) .pp-split-left,
    body:not(.pp-has-scrolled) .pp-split-right { animation: none; }
}