/* VERMEERSCH COMPANY — intro « Godet » et hero vivant.
   Mécanique du rideau Nemelec conservée : 1,45 s, passage au clic/toucher/touche, retrait CSS
   à 2,6 s, absence sans script ou avec mouvement réduit. Le dessin métier est adapté au brief :
   un godet creuse de gauche à droite, soulève une terre rouge et révèle le logo dans la tranchée. */

:root{
  --vci-night:#0a2b42;
  --vci-night-2:#123d59;
  --vci-earth:#c8102e;
  --vci-earth-light:#ff6b82;
  --vci-earth-dark:#87091f;
  --vci-machine:#aeb8c2;
  --vci-machine-dark:#596774;
  --vci-ease:cubic-bezier(.2,.8,.2,1);
}

@property --vci-progress{
  syntax:'<number>';
  inherits:true;
  initial-value:0;
}

/* Rideau immédiat avant exécution du script. */
@media (prefers-reduced-motion:no-preference){
  html.vci-pre::after{
    content:'';position:fixed;inset:0;z-index:99998;background:var(--vci-night);
    pointer-events:none;animation:vciCover .01s linear 2.6s forwards
  }
}
@media (scripting:none){html.vci-pre::after{display:none}}
@keyframes vciCover{to{opacity:0;visibility:hidden}}

/* Intro : deux moitiés portent chacune la scène complète, puis s'écartent. */
#vci-intro{
  position:fixed;inset:0;z-index:99999;overflow:hidden;cursor:pointer;
  background:var(--vci-night);contain:strict;
  animation:vciOverlayGuard .01s linear 2.6s forwards
}
@keyframes vciOverlayGuard{to{opacity:0;visibility:hidden;pointer-events:none}}
#vci-intro.vci-open{background:transparent}
.vci-half{
  position:absolute;left:0;right:0;height:50%;overflow:hidden;background:var(--vci-night);
  will-change:transform;transition:transform .45s cubic-bezier(.7,0,.2,1)
}
.vci-top{top:0}
.vci-bottom{bottom:0}
.vci-open .vci-top{transform:translateY(-101%)}
.vci-open .vci-bottom{transform:translateY(101%)}
.vci-fast .vci-half{transition-duration:.3s}
.vci-scene{
  position:absolute;left:0;right:0;height:200%;
  background:
    radial-gradient(circle at 50% 46%,rgba(255,255,255,.055),transparent 34%),
    linear-gradient(145deg,var(--vci-night-2),var(--vci-night) 54%,#061a28);
  --vci-arm:clamp(200px,32vw,420px);
  --vci-plate:clamp(178px,30vw,310px);
  animation:vciDig .78s cubic-bezier(.5,.05,.25,1) .06s both
}
.vci-top .vci-scene{top:0}
.vci-bottom .vci-scene{bottom:0}
@keyframes vciDig{from{--vci-progress:0}to{--vci-progress:1}}

.vci-half::after{
  content:'';position:absolute;left:0;right:0;height:2px;background:var(--vci-earth-light);
  box-shadow:0 0 14px 2px rgba(255,107,130,.72);opacity:0;transition:opacity .15s
}
.vci-top::after{bottom:0}
.vci-bottom::after{top:0}
.vci-open .vci-half::after{opacity:1}

.vci-column{
  position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;align-items:stretch
}
.vci-reveal{
  display:flex;justify-content:center;
  clip-path:inset(0 max(0px,calc(100% - var(--vci-progress) * (100% + var(--vci-arm)))) 0 0)
}
.vci-plate{
  display:none;box-sizing:border-box;width:var(--vci-plate);background:#fff;border-radius:24px;
  padding:clamp(11px,1.8vw,17px);
  box-shadow:
    0 20px 60px rgba(0,0,0,.46),
    0 0 0 1px rgba(255,255,255,.65),
    0 0 48px rgba(200,16,46,.34)
}
.vci-ready .vci-plate{display:block}
.vci-plate img{display:block;width:100%;height:auto;border-radius:15px}

.vci-dig-zone{
  position:relative;height:calc(var(--vci-arm) * .43);margin-top:clamp(5px,1vw,10px)
}
.vci-arm{
  position:absolute;bottom:-3px;width:var(--vci-arm);height:auto;display:block;overflow:visible;
  left:calc(var(--vci-progress) * (100% + var(--vci-arm)) - var(--vci-arm));
  filter:drop-shadow(0 7px 11px rgba(0,0,0,.44))
}
.vci-arm .vci-bucket{
  transform-box:view-box;transform-origin:196px 78px;
  animation:vciCurl .78s ease-in-out .06s both
}
@keyframes vciCurl{
  0%{transform:rotate(-8deg)}
  38%{transform:rotate(4deg)}
  72%{transform:rotate(-2deg)}
  100%{transform:rotate(0)}
}
.vci-trench{
  height:12px;width:calc(var(--vci-progress) * (100% + var(--vci-arm)));
  border-radius:0 7px 7px 0;
  background:linear-gradient(180deg,var(--vci-earth-light) 0 34%,var(--vci-earth) 34% 70%,var(--vci-earth-dark) 70%);
  box-shadow:0 0 20px rgba(200,16,46,.48)
}
.vci-soil{
  position:absolute;bottom:1px;width:7px;height:7px;border-radius:58% 42% 54% 46%;
  background:var(--vci-earth-light);opacity:0;
  left:calc(var(--vci-progress) * (100% + var(--vci-arm)) - var(--vci-arm) - 7px)
}
.vci-soil-1{animation:vciSoil .5s ease-out .18s both;width:5px;height:5px}
.vci-soil-2{animation:vciSoil .52s ease-out .32s both;background:var(--vci-earth)}
.vci-soil-3{animation:vciSoil .48s ease-out .46s both;width:4px;height:4px}
.vci-soil-4{animation:vciSoilFar .5s ease-out .58s both;background:var(--vci-earth-dark);width:5px;height:5px}
@keyframes vciSoil{
  0%{opacity:0;transform:translate(0,0) rotate(0)}
  20%{opacity:.95}
  100%{opacity:0;transform:translate(-28px,-34px) rotate(120deg)}
}
@keyframes vciSoilFar{
  0%{opacity:0;transform:translate(0,0)}
  20%{opacity:.9}
  100%{opacity:0;transform:translate(-42px,-24px)}
}

/* Hero : mots, parallaxe et particules de terre discrètes. */
.vci-word{display:inline-block;white-space:nowrap}
.vci-word>i{
  display:inline-block;font-style:normal;
  transition:opacity .7s var(--vci-ease),transform .85s var(--vci-ease),filter .7s ease;
  transition-delay:calc(var(--i,0)*70ms)
}
html.vci-hide-title .vci-word>i{
  opacity:0;transform:translateY(.55em);filter:blur(6px);
  animation:vciShow .01s linear 3.6s forwards
}
@keyframes vciShow{to{opacity:1;transform:none;filter:none}}
.vci-parallax{scale:1.06;will-change:translate}
.vci-particles{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;display:block}

@media (max-width:767px){
  [data-hero-slide]{background-position:65% center!important}
}

/* Pastilles de garanties existantes, à icônes SVG. */
.vci-guarantees{
  display:flex;flex-wrap:wrap;gap:10px;margin:6px 0 0;padding:0;list-style:none
}
.vci-guarantees li{
  display:inline-flex;align-items:center;gap:10px;padding:7px 18px 7px 8px;border-radius:40px;
  font-size:14px;font-weight:600;line-height:1.2;color:#fff;
  background:linear-gradient(160deg,rgba(255,255,255,.2),rgba(255,255,255,.08));
  border:1px solid rgba(255,255,255,.3);
  -webkit-backdrop-filter:blur(10px) saturate(1.2);backdrop-filter:blur(10px) saturate(1.2);
  box-shadow:0 10px 24px -12px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.22);
  text-shadow:0 1px 2px rgba(0,0,0,.35);
  transition:opacity .7s var(--vci-ease),transform .85s var(--vci-ease),filter .7s ease,background .3s,border-color .3s;
  transition-delay:
    calc(.75s + var(--i,0)*.14s),
    calc(.75s + var(--i,0)*.14s),
    calc(.75s + var(--i,0)*.14s),0s,0s
}
.vci-guarantee-icon{
  display:flex;flex:none;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;
  background:rgba(255,159,177,.2);border:1px solid rgba(255,159,177,.62);color:#ffd7de
}
.vci-guarantee-icon svg{display:block}
.vci-guarantees li:hover{
  background:linear-gradient(160deg,rgba(255,255,255,.28),rgba(255,255,255,.12));
  border-color:rgba(255,159,177,.75)
}
html.vci-hide-title .vci-guarantees li{
  opacity:0;transform:translateY(16px) scale(.96);filter:blur(5px);transition:none;
  animation:vciShow .01s linear 3.9s forwards
}

@media (max-width:480px){
  .vci-guarantees{gap:8px}
  .vci-guarantees li{font-size:13px;padding:6px 13px 6px 6px;gap:8px}
  .vci-guarantee-icon{width:26px;height:26px}
  .vci-guarantee-icon svg{width:16px;height:16px}
}

@media (prefers-reduced-motion:reduce){
  html.vci-pre::after{display:none!important}
  #vci-intro{display:none!important}
  .vci-word>i{transition:none!important}
  html.vci-hide-title .vci-word>i{
    opacity:1!important;transform:none!important;filter:none!important;animation:none!important
  }
  .vci-particles{display:none!important}
  html.vci-hide-title .vci-guarantees li{
    opacity:1!important;transform:none!important;filter:none!important;animation:none!important
  }
  .vci-guarantees li{transition:none!important}
  .vci-parallax{scale:1;translate:none!important}
}