/**
 * decorations.css — Illustrations décoratives section présentation
 *
 * 1. Branche de vigne — chevauche la bordure héro/présentation
 * 2. Bulles de champagne — côté gauche
 */


/* ================================================================
   CONTEXTE
================================================================ */

.section-presentation {
    position: relative;
    /* overflow:visible permet à la branche de dépasser vers le haut
       (dans la zone du héro) sans être clippée */
    overflow: visible;
}

/* Texte au-dessus de la branche, image en dessous */
.section-presentation > .container {
    position: relative;
    z-index: 1;
}

.section-presentation .presentation-text {
    position: relative;
    z-index: 3;
}

.section-presentation .presentation-image {
    position: relative;
    z-index: 0;
}


/* ================================================================
   1. BRANCHE DE VIGNE
   Positionnée avec top négatif : les pics (y≈68-70 dans le SVG)
   remontent dans la section héro. Les feuilles pointent vers le haut
   et apparaissent dans l'espace entre les deux sections.
================================================================ */

.deco-branche-wrapper {
    position: absolute;
    top: -95px;      /* quantité qui remonte dans le héro */
    left: 0;
    width: 100%;
    z-index: 3;      /* au-dessus de la colonne image de droite */
    pointer-events: none;
}

/* SVG inline — remplace l'ancien <img class="deco-branche-vigne"> */
.branche-vigne-svg {
    display: block;
    width: 100%;
    height: auto;
    opacity: 0.85;
    overflow: visible;
}


/* ================================================================
   ANIMATION BRANCHE DE VIGNE — "la vigne se dessine"

   1. Le tronc se trace de gauche à droite (stroke-dashoffset).
   2. Chaque élément décoratif apparaît avec un éclat doré au moment
      où le tronc passe à sa position (délai calé sur l'avancement x).

   Déclenchement : la classe .is-visible est ajoutée par l'
   IntersectionObserver de main.js quand le SVG entre dans le viewport.
================================================================ */

/* État initial — tronc invisible (dashoffset = longueur totale) */
.bv-trunk {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
}

/* Déco (vrilles, branches, feuilles) — cachées au départ */
.bv-d {
    opacity: 0;
}

/* ── Tronc : dessin de gauche à droite ── */
.branche-vigne-svg.is-visible .bv-trunk {
    animation: bv-draw-trunk 2.8s cubic-bezier(.4, 0, .2, 1) forwards;
}

@keyframes bv-draw-trunk {
    to { stroke-dashoffset: 0; }
}

/* ── Décorations : apparition avec éclat doré ── */
.branche-vigne-svg.is-visible .bv-d {
    animation: bv-appear .6s ease-out forwards;
    animation-delay: var(--d, 0s);
}

@keyframes bv-appear {
    0%   { opacity: 0; filter: drop-shadow(0 0 8px #C4A35A) brightness(1.8); }
    55%  { opacity: 1; filter: drop-shadow(0 0 3px #C4A35A) brightness(1.2); }
    100% { opacity: 1; filter: none; }
}

/* Accessibilité : respecte la préférence "moins de mouvement" */
@media (prefers-reduced-motion: reduce) {
    .bv-trunk { stroke-dashoffset: 0; }
    .bv-d     { opacity: 1; }
    .branche-vigne-svg.is-visible .bv-trunk,
    .branche-vigne-svg.is-visible .bv-d { animation: none; }
}


/* ================================================================
   2. BULLES DE CHAMPAGNE — côté gauche
   overflow:hidden sur ce seul container : les bulles restent
   dans les limites de la section même si section a overflow:visible
================================================================ */

.deco-bulles {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
}

.bulle {
    position: absolute;
    bottom: -20px;
    border-radius: 50%;
    background: radial-gradient(
        circle at 32% 28%,
        rgba(196, 163, 90, 0.22),
        rgba(196, 163, 90, 0.04)
    );
    border: 1px solid rgba(196, 163, 90, 0.32);
    animation: bulle-monte linear infinite;
    opacity: 0;
}

@keyframes bulle-monte {
    0%   { transform: translateY(0);      opacity: 0;   }
    8%   { opacity: 0.65; }
    80%  { opacity: 0.35; }
    100% { transform: translateY(-95vh);  opacity: 0;   }
}

/* 20 bulles réparties sur toute la largeur (left 3%–96%), tailles 7–22px */
.bulle:nth-child(1)  { width: 10px; height: 10px; left:  4%; animation-duration:  9s; animation-delay:  0.0s; }
.bulle:nth-child(2)  { width: 14px; height: 14px; left: 14%; animation-duration: 12s; animation-delay:  2.0s; }
.bulle:nth-child(3)  { width:  8px; height:  8px; left: 24%; animation-duration:  8s; animation-delay:  4.5s; }
.bulle:nth-child(4)  { width: 18px; height: 18px; left: 34%; animation-duration: 15s; animation-delay:  1.0s; }
.bulle:nth-child(5)  { width: 12px; height: 12px; left: 44%; animation-duration: 11s; animation-delay:  6.0s; }
.bulle:nth-child(6)  { width:  9px; height:  9px; left: 54%; animation-duration:  7s; animation-delay:  8.5s; }
.bulle:nth-child(7)  { width: 16px; height: 16px; left: 63%; animation-duration: 13s; animation-delay:  3.2s; }
.bulle:nth-child(8)  { width: 11px; height: 11px; left: 72%; animation-duration: 10s; animation-delay:  7.0s; }
.bulle:nth-child(9)  { width: 20px; height: 20px; left: 81%; animation-duration: 17s; animation-delay:  5.0s; }
.bulle:nth-child(10) { width: 13px; height: 13px; left: 91%; animation-duration: 11s; animation-delay:  9.5s; }
.bulle:nth-child(11) { width:  7px; height:  7px; left:  9%; animation-duration:  6s; animation-delay: 11.0s; }
.bulle:nth-child(12) { width: 22px; height: 22px; left: 19%; animation-duration: 19s; animation-delay:  0.8s; }
.bulle:nth-child(13) { width: 15px; height: 15px; left: 29%; animation-duration: 14s; animation-delay:  3.8s; }
.bulle:nth-child(14) { width: 10px; height: 10px; left: 39%; animation-duration:  9s; animation-delay: 12.0s; }
.bulle:nth-child(15) { width:  8px; height:  8px; left: 49%; animation-duration:  7s; animation-delay:  1.5s; }
.bulle:nth-child(16) { width: 13px; height: 13px; left: 58%; animation-duration: 10s; animation-delay: 14.0s; }
.bulle:nth-child(17) { width: 11px; height: 11px; left: 68%; animation-duration:  9s; animation-delay:  6.8s; }
.bulle:nth-child(18) { width: 17px; height: 17px; left: 77%; animation-duration: 16s; animation-delay: 10.5s; }
.bulle:nth-child(19) { width:  9px; height:  9px; left: 86%; animation-duration:  8s; animation-delay: 13.5s; }
.bulle:nth-child(20) { width: 14px; height: 14px; left: 96%; animation-duration: 12s; animation-delay:  7.5s; }


/* ================================================================
   RESPONSIVE
================================================================ */

@media (max-width: 768px) {
    .deco-branche-wrapper { top: -55px; }
    .bulle:nth-child(n+9) { display: none; }
    /* Redistribue les 8 bulles visibles sur toute la largeur */
    .bulle:nth-child(1) { left:  5%; }
    .bulle:nth-child(2) { left: 17%; }
    .bulle:nth-child(3) { left: 30%; }
    .bulle:nth-child(4) { left: 43%; }
    .bulle:nth-child(5) { left: 56%; }
    .bulle:nth-child(6) { left: 68%; }
    .bulle:nth-child(7) { left: 80%; }
    .bulle:nth-child(8) { left: 93%; }
}

@media (max-width: 480px) {
    .deco-branche-wrapper {
        top: -40px;
        overflow: hidden; /* clip la largeur excédentaire du SVG */
    }
    /* Le SVG (viewBox 1400×185) est trop plat à 100% sur mobile.
       On lui donne une largeur fixe plus grande (≈ 72px de haut) et on le centre
       pour montrer la portion centrale avec les 2e et 3e pics. */
    .branche-vigne-svg {
        width: 550px;
        height: auto;
        position: relative;
        left: 50%;
        transform: translateX(-50%);
    }
    .bulle:nth-child(n+6) { display: none; }
    /* Redistribue les 5 bulles visibles sur toute la largeur */
    .bulle:nth-child(1) { left:  6%; }
    .bulle:nth-child(2) { left: 26%; }
    .bulle:nth-child(3) { left: 50%; }
    .bulle:nth-child(4) { left: 72%; }
    .bulle:nth-child(5) { left: 91%; }
}