/* ══════════════════════════════════════════════════════
   ESCO BRAND STUDIO — Coverflow 3D + Splash animé
   Complète main.css — utilise les variables ESCO
   ✅ Ombre PLATE au sol (ligne horizontale sous l'image)
   ✅ Réflexion miroir visible
   ✅ 3 images visibles
══════════════════════════════════════════════════════ */

/* ── SPLASH SCREEN ── */
#splash{
  position:fixed;inset:0;z-index:9999;
  background:var(--dark);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:44px;text-align:center;padding:40px;
  transition:opacity .8s ease,transform .8s ease;
}
#splash.hide{opacity:0;transform:scale(1.04);pointer-events:none}
#splash.gone{display:none}

#splash::before{
  content:'';position:absolute;top:50%;left:50%;
  width:520px;height:520px;transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(192,88,40,.18) 0%,transparent 65%);
  pointer-events:none;
  animation:splashHalo 4s ease-in-out infinite;
}

.splash-logo{
  position:relative;z-index:2;
  opacity:0;transform:scale(.6);
  animation:splashLogoIn 1.2s .1s cubic-bezier(.16,1,.3,1) forwards;
}
.splash-logo img{
  height:140px;width:auto;
  filter:drop-shadow(0 0 50px rgba(192,88,40,.6));
  animation:splashBreath 3s 1.4s ease-in-out infinite;
}

.splash-text{
  position:relative;z-index:2;
  font-family:var(--fd);
  font-size:clamp(1.5rem,3.6vw,2.6rem);
  font-weight:300;line-height:1.3;color:var(--cream);
  opacity:0;transform:translateY(24px);
  animation:splashTextIn 1.1s .55s cubic-bezier(.22,1,.36,1) forwards;
}
.splash-text em{
  color:var(--rust);font-style:normal;
  display:inline-block;
  opacity:0;transform:translateY(12px);
  animation:splashEmIn .9s .95s cubic-bezier(.22,1,.36,1) forwards;
}
.splash-text::after{
  content:'';display:block;
  width:0;height:1px;margin:28px auto 0;
  background:linear-gradient(to right,transparent,var(--rust),transparent);
  animation:splashLine 1.2s 1.2s cubic-bezier(.22,1,.36,1) forwards;
}

@keyframes splashLogoIn{
  0%   {opacity:0;transform:scale(.6) rotate(-3deg)}
  60%  {opacity:1;transform:scale(1.04) rotate(0deg)}
  100% {opacity:1;transform:scale(1)}
}
@keyframes splashBreath{
  0%,100%{transform:scale(1)}
  50%    {transform:scale(1.03)}
}
@keyframes splashTextIn{
  from{opacity:0;transform:translateY(24px)}
  to  {opacity:1;transform:translateY(0)}
}
@keyframes splashEmIn{
  from{opacity:0;transform:translateY(12px)}
  to  {opacity:1;transform:translateY(0)}
}
@keyframes splashLine{
  from{width:0}
  to  {width:120px}
}
@keyframes splashHalo{
  0%,100%{opacity:.7;transform:translate(-50%,-50%) scale(1)}
  50%    {opacity:1;transform:translate(-50%,-50%) scale(1.12)}
}

/* ── NAVBAR ── */
#mainNav{justify-content:space-between}
.nav-logo{display:flex;align-items:center;gap:16px}
.nav-brand-text{
  font-family:var(--fb);font-size:.62rem;font-weight:400;
  letter-spacing:.26em;text-transform:uppercase;
  color:rgba(240,232,212,.65);
  padding-left:16px;border-left:1px solid var(--border);
  white-space:nowrap;
}
@media(max-width:860px){.nav-brand-text{display:none}}

/* ── SECTION COVERFLOW ── */
.coverflow-section{
  position:relative;width:100%;min-height:100svh;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  padding:100px 40px 140px;
  background:var(--dark);overflow:hidden;
}
.coverflow-info{
  text-align:center;
  margin-bottom:24px;
  max-width:820px;
  position:relative;z-index:5;
}
.coverflow-kicker{
  font-family:var(--fb);font-size:.58rem;letter-spacing:.3em;
  text-transform:uppercase;color:var(--rust);
  margin-bottom:14px;display:inline-flex;align-items:center;gap:14px;
}
.coverflow-kicker::before,.coverflow-kicker::after{
  content:'';display:block;width:24px;height:1px;background:var(--rust);
}

.coverflow-title{
  font-family:var(--fd);
  font-size:clamp(1.6rem,3.6vw,2.9rem);
  font-weight:300;line-height:1.05;color:var(--cream);
  margin-bottom:12px;letter-spacing:-.01em;
  transition:opacity .45s ease;
  white-space:nowrap;
}
.coverflow-desc{
  font-family:var(--fb);font-size:clamp(.82rem,1.3vw,.95rem);
  font-weight:300;color:var(--tan2);line-height:1.7;
  max-width:620px;margin:0 auto;
  transition:opacity .45s ease;
}
.coverflow-title.is-swapping,.coverflow-desc.is-swapping{opacity:0}

@media(max-width:700px){
  .coverflow-title{white-space:normal;font-size:clamp(1.3rem,6vw,1.9rem)}
}

/* ── COVERFLOW WRAPPER ── */
.coverflow-wrapper{
  position:relative;width:100%;max-width:1300px;
  height:min(42vh,400px);
  display:flex;align-items:center;justify-content:center;
  outline:none;perspective:1400px;perspective-origin:50% 45%;
}
.coverflow{
  position:relative;width:100%;height:100%;
  transform-style:preserve-3d;
  transition:transform .8s cubic-bezier(.22,1,.36,1);
}

/* ── ITEM ── */
.coverflow-item{
  position:absolute;top:50%;left:50%;
  width:clamp(160px,22vw,280px);
  aspect-ratio:1 / 1;
  transform-style:preserve-3d;
  transition:transform .8s cubic-bezier(.22,1,.36,1),opacity .6s ease,filter .6s ease;
  will-change:transform,opacity;
  cursor:pointer;
}

/* ── IMAGE ── */
.coverflow-item .cover{
  position:relative;width:100%;height:100%;
  overflow:hidden;border-radius:12px;
  box-shadow:
    0 30px 50px -25px rgba(0,0,0,.9),
    0 15px 25px -15px rgba(0,0,0,.7),
    0 0 0 1px rgba(240,232,212,.06);
  background:var(--dark3);
}
.coverflow-item .cover img{
  width:100%;height:100%;object-fit:cover;
  display:block;pointer-events:none;user-select:none;
}

/* ══════════════════════════════════════════════════════
   ── OMBRE PLATE AU SOL ──
   Une ligne horizontale aplatie juste à la base de l'image
   → effet "image posée sur un sol plat"
══════════════════════════════════════════════════════ */
.coverflow-item::after{
  content:'';
  position:absolute;
  left:-4%;
  right:-4%;
  bottom:-6px;                     /* juste à la base de l'image */
  height:6px;                      /* TRÈS plate — juste une bande */
  background:radial-gradient(ellipse 100% 50% at center,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,.85) 40%,
    rgba(0,0,0,.5) 65%,
    rgba(0,0,0,.2) 85%,
    transparent 100%);
  filter:blur(6px);
  pointer-events:none;
  z-index:4;
  border-radius:50%;
  opacity:.9;
}

/* ── RÉFLEXION MIROIR ── */
.coverflow-item .reflection{
  position:absolute;
  top:calc(100% + 4px);
  left:0;
  width:100%;
  height:55%;
  overflow:hidden;
  pointer-events:none;
  transform:scaleY(-1);
  opacity:.45;
  background-size:cover;
  background-position:center bottom;
  background-repeat:no-repeat;
  border-radius:0 0 12px 12px;
  -webkit-mask-image:linear-gradient(to top,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,0.8) 15%,
    rgba(0,0,0,0.45) 40%,
    rgba(0,0,0,0) 85%);
          mask-image:linear-gradient(to top,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,0.8) 15%,
    rgba(0,0,0,0.45) 40%,
    rgba(0,0,0,0) 85%);
}

/* ── ÉTATS ── */
.coverflow-item[data-state="active"]  {z-index:10;filter:brightness(1)}
.coverflow-item[data-state="prev"],
.coverflow-item[data-state="next"]    {z-index:6;filter:brightness(.55) saturate(.7)}
.coverflow-item[data-state="far"]     {z-index:3;filter:brightness(.3) saturate(.5)}
.coverflow-item[data-state="hidden"]  {z-index:1;opacity:0;pointer-events:none}

/* ── NAV BUTTONS ── */
.nav-button{
  position:absolute;top:50%;transform:translateY(-50%);
  z-index:20;width:52px;height:52px;border-radius:50%;
  background:rgba(9,7,10,.55);border:1px solid rgba(240,232,212,.12);
  color:var(--cream);font-size:1.5rem;line-height:1;
  display:flex;align-items:center;justify-content:center;
  backdrop-filter:blur(12px);
  transition:all .3s;cursor:pointer;
}
.nav-button:hover{background:var(--rust);border-color:var(--rust);transform:translateY(-50%) scale(1.08)}
.nav-button.prev{left:24px}
.nav-button.next{right:24px}

/* ── DOTS ── */
.dots-container{
  position:absolute;bottom:-100px;left:50%;transform:translateX(-50%);
  display:flex;gap:10px;z-index:20;
}
.dots-container .dot{
  width:8px;height:8px;border-radius:50%;
  background:rgba(240,232,212,.18);cursor:pointer;
  transition:all .3s;border:none;
}
.dots-container .dot:hover{background:rgba(240,232,212,.4)}
.dots-container .dot.active{background:var(--rust);width:26px;border-radius:4px}

/* ── FOOTER ── */
.footer-top{grid-template-columns:1.5fr 1fr 1fr}

/* ── RESPONSIVE ── */
@media(max-width:1100px){
  .footer-top{grid-template-columns:1fr 1fr}
}
@media(max-width:860px){
  .coverflow-section{padding:88px 20px 130px}
  .coverflow-wrapper{height:min(40vh,340px)}
  .coverflow-item{width:clamp(130px,42vw,200px)}
  .nav-button{width:44px;height:44px;font-size:1.2rem}
  .nav-button.prev{left:8px}
  .nav-button.next{right:8px}
  .coverflow-info{margin-bottom:20px}
  .footer-top{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
  .coverflow-section{padding:80px 16px 120px}
  .coverflow-wrapper{height:min(36vh,280px)}
  .coverflow-item{width:clamp(120px,55vw,180px)}
  .coverflow-item::after{
    bottom:-4px;
    height:5px;
    filter:blur(4px);
  }
  .dots-container{bottom:-80px}
  .footer-top{grid-template-columns:1fr}
}