/* ELARA — styles motion partagés. Variables attendues : --em-cursor (couleur), --em-accent (barre) */
:root{ --em-cursor:#ffffff; --em-accent:#888; }

/* curseur custom */
@media(pointer:fine){
  *{cursor:none!important;}
  .em-cursor,.em-ring{position:fixed;top:0;left:0;z-index:9999;pointer-events:none;border-radius:50%;mix-blend-mode:difference;}
  .em-cursor{width:7px;height:7px;margin:-3.5px;background:var(--em-cursor);transition:opacity .3s;}
  .em-ring{width:34px;height:34px;margin:-17px;border:1px solid var(--em-cursor);transition:width .35s cubic-bezier(.16,1,.3,1),height .35s cubic-bezier(.16,1,.3,1),margin .35s cubic-bezier(.16,1,.3,1),opacity .3s,background .3s;}
  body.em-hot .em-ring{width:62px;height:62px;margin:-31px;background:rgba(255,255,255,.12);}
  body.em-down .em-ring{width:24px;height:24px;margin:-12px;}
}

/* reveal cinétique par mots */
.em-wd{display:inline-block;overflow:hidden;vertical-align:top;line-height:inherit;padding:.14em .04em;margin:-.14em -.04em;}
.em-wd__i{display:inline-block;transform:translateY(115%) rotate(3deg);opacity:0;transition:transform 1s cubic-bezier(.16,1,.3,1),opacity 1s cubic-bezier(.16,1,.3,1);will-change:transform;}
.em-in .em-wd__i{transform:none;opacity:1;}

/* label de curseur */
@media(pointer:fine){
  .em-label{position:fixed;top:0;left:0;z-index:9999;pointer-events:none;background:var(--em-cursor);color:var(--em-cursor-fg,#111);
    font-family:'Archivo',sans-serif;font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;padding:7px 12px;border-radius:30px;
    transform:translate(-50%,-50%);margin-top:0;opacity:0;scale:.5;transition:opacity .3s,scale .3s;white-space:nowrap;}
  body.em-labeled .em-label{opacity:1;scale:1;}
  body.em-labeled .em-ring{opacity:0;}
}

/* barre de progression */
.em-progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:9998;background:var(--em-accent);transform:scaleX(0);transform-origin:left;}
@keyframes em-float{0%,100%{transform:translateY(0);}50%{transform:translateY(-14px);}}

/* reflet de survol (container glare) */
.em-glare{position:absolute;inset:0;pointer-events:none;border-radius:inherit;opacity:0;z-index:4;
  transition:opacity .35s;mix-blend-mode:screen;
  background:radial-gradient(circle at var(--gx,50%) var(--gy,50%), rgba(255,255,255,.22), rgba(255,255,255,0) 45%);}
.em-glare.on{opacity:1;}

/* ---- Moment "boule" partagé ---- */
.em-scoop{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;
  min-height:clamp(440px,60vw,720px);padding:clamp(30px,6vw,80px);text-align:center;}
.em-scoop__bg{position:absolute;inset:0;z-index:0;
  background:radial-gradient(120% 90% at 50% 18%, #6f8f4e 0%, #4f6f38 42%, #2f4622 100%);}
.em-scoop__bg::after{content:"";position:absolute;inset:0;opacity:.5;
  background:radial-gradient(60% 50% at 50% 100%, rgba(0,0,0,.4), transparent 70%);}
.em-scoop__img{position:relative;z-index:2;width:clamp(280px,42vw,560px);height:auto;
  filter:drop-shadow(0 50px 60px rgba(0,0,0,.45));}
.em-scoop--zoom{min-height:clamp(420px,52vw,640px);}
.em-scoop--zoom .em-scoop__img{width:clamp(420px,68vw,860px);}
.em-scoop__cap{position:absolute;z-index:3;left:0;right:0;bottom:clamp(26px,5vw,56px);color:#f4efe1;
  text-shadow:0 2px 26px rgba(0,0,0,.45);}
.em-scoop__cap .k{display:block;font-size:11px;letter-spacing:.32em;text-transform:uppercase;opacity:.82;margin-bottom:10px;}
.em-scoop__cap .t{font-size:clamp(24px,3.4vw,46px);line-height:1.05;font-weight:inherit;}
.em-scoop__tag{position:absolute;z-index:3;top:clamp(24px,4vw,46px);left:50%;transform:translateX(-50%);
  font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;color:rgba(244,239,225,.8);}

/* rideau d'intro — platine vinyle "glace" */
.em-curtain{position:fixed;inset:0;z-index:10000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(26px,4vw,40px);
  background:radial-gradient(120% 90% at 50% 32%, #f7f2e8, #ece5d6 68%, #ddd5c4);
  transition:transform 1s cubic-bezier(.76,0,.24,1);}
.em-curtain.up{transform:translateY(-110%);}
.em-tt{position:relative;width:min(72vw,330px);height:min(72vw,330px);filter:drop-shadow(0 40px 50px rgba(40,30,15,.28));}
.em-tt__platter{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 42% 38%,#26272a,#0d0d0f 72%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),inset 0 0 40px rgba(0,0,0,.6);}
.em-tt__disc{position:absolute;inset:6%;border-radius:50%;overflow:hidden;transform:rotate(0deg);animation:em-spin 2.4s linear 1.5s infinite;
  box-shadow:0 0 0 4px #121214,0 0 0 5px rgba(255,255,255,.06),0 8px 18px rgba(0,0,0,.4);}
.em-tt__disc img{width:100%;height:100%;object-fit:cover;}
.em-tt__disc::after{content:"";position:absolute;inset:0;border-radius:50%;mix-blend-mode:multiply;opacity:.22;
  background:repeating-radial-gradient(circle at 50% 50%, rgba(0,0,0,.16) 0 2px, rgba(0,0,0,0) 2px 9px);}
.em-tt__hole{position:absolute;left:50%;top:50%;width:15px;height:15px;border-radius:50%;transform:translate(-50%,-50%);z-index:3;
  background:radial-gradient(circle at 38% 32%, #f6f8fa, #cfd3d8 42%, #868c92 72%, #e2e5e8);
  box-shadow:0 0 0 3px rgba(0,0,0,.45), inset 0 1px 1px rgba(255,255,255,.8), inset 0 -1px 2px rgba(0,0,0,.35);}
.em-tt__arm{position:absolute;top:-4%;right:-5%;width:56%;height:7px;border-radius:7px;transform-origin:right center;transform:rotate(14deg);z-index:4;
  background:linear-gradient(90deg,#d4d7db,#9a9ea3);box-shadow:0 4px 10px rgba(0,0,0,.28);animation:em-arm 1s cubic-bezier(.5,0,.2,1) .5s forwards;}
.em-tt__arm::before{content:"";position:absolute;right:-9px;top:-7px;width:20px;height:20px;border-radius:50%;background:#b9bdc1;box-shadow:0 2px 6px rgba(0,0,0,.3);}
.em-tt__arm::after{content:"";position:absolute;left:-5px;top:1px;width:11px;height:15px;border-radius:2px;background:#83868a;}
@keyframes em-spin{to{transform:rotate(360deg);}}
@keyframes em-arm{0%{transform:rotate(14deg);}60%{transform:rotate(-20deg);}75%{transform:rotate(-16deg);}100%{transform:rotate(-19deg);}}
.em-curtain__brand{display:inline-block;font-family:var(--em-curtain-font,'Bodoni Moda',serif);color:#1c1812;
  font-size:clamp(30px,6.5vw,72px);letter-spacing:.46em;padding-left:.46em;opacity:0;transform:translateY(14px);
  animation:em-rise .9s cubic-bezier(.16,1,.3,1) .3s forwards;}
.em-curtain__cue{font-family:'Jost',sans-serif;font-size:10px;letter-spacing:.34em;text-transform:uppercase;color:#9a8f79;opacity:0;animation:em-rise .9s ease .55s forwards;}
@keyframes em-rise{to{transform:none;opacity:1;}}