/* ==========================================================
   Œuvres à la une — galerie « musée » (accueil)
   Activée par hw-lux.js (.hwx sur .hw-list) : sans JS, la
   galerie reste exactement celle de home.css.
   - lever de rideau de chaque œuvre à l'entrée dans l'écran
   - parallaxe de l'image et des cartes au défilement (--p)
   - grand numéro fantôme doré, sceau « Pièce unique » rotatif
   - inclinaison 3D + reflet de lumière qui suit la souris
   ========================================================== */
.hwx .hw-item{position:relative;--p:0}
.hwx .hw-card{position:relative;z-index:1}

/* numéro fantôme : chiffre romain-éditorial, contour or, qui glisse au défilement */
.hwx-num{position:absolute;z-index:0;top:-.42em;right:-.08em;font-family:var(--serif);font-weight:300;
  font-size:clamp(110px,13vw,230px);line-height:1;letter-spacing:-.04em;color:transparent;
  -webkit-text-stroke:1px rgba(165,122,69,.42);pointer-events:none;user-select:none;
  translate:0 calc(var(--p) * 70px);opacity:0;transition:opacity 1.4s var(--ease-reveal)}
.hwx .hw-item:nth-child(even) .hwx-num{right:auto;left:-.08em}
.hwx-in .hwx-num{opacity:1}

/* l'œuvre : rideau qui se lève, ombre de galerie, inclinaison 3D */
.hwx .hw-media{clip-path:inset(100% 0 0 0);
  transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  box-shadow:0 30px 60px -42px rgba(41,33,27,.55);
  transition:clip-path 1.5s cubic-bezier(.77,0,.18,1),transform .7s var(--ease-out),box-shadow .7s var(--ease-out)}
.hwx-in .hw-media{clip-path:inset(0 0 0 0)}
.hwx .hw-media.hwx-hover{transition:clip-path 1.5s cubic-bezier(.77,0,.18,1),transform .12s linear,box-shadow .7s var(--ease-out);
  box-shadow:0 60px 90px -45px rgba(41,33,27,.6),0 0 0 1px rgba(196,162,114,.25)}

/* l'image recule doucement pendant le lever de rideau, puis suit le défilement */
.hwx .hw-img{scale:1.28;translate:0 calc(var(--p) * -5%);
  transition:transform 500ms var(--ease-reveal),opacity 450ms var(--ease-micro),scale 2.2s var(--ease-reveal)}
.hwx-in .hw-img{scale:1.12}

/* passe-partout doré qui apparaît, puis se resserre au survol */
.hwx-frame{position:absolute;inset:14px;z-index:2;pointer-events:none;border:1px solid rgba(233,211,174,0);
  transition:border-color 1.2s 1s var(--ease-reveal),inset .7s var(--ease-out)}
.hwx-in .hwx-frame{border-color:rgba(233,211,174,.55)}
.hwx .hw-media.hwx-hover .hwx-frame{inset:22px;border-color:rgba(255,241,214,.9);transition-delay:0s}

/* reflet de lumière qui suit la souris */
.hwx-glare{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;mix-blend-mode:soft-light;
  background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(255,240,215,.75),rgba(255,240,215,0) 48%);
  transition:opacity .45s var(--ease-micro)}
.hwx-hover .hwx-glare{opacity:1}

/* sceau « Pièce unique » : tourne lentement, et avec le défilement */
.hwx-seal{position:absolute;right:16px;top:16px;z-index:3;width:88px;height:88px;border-radius:50%;
  background:rgba(23,20,17,.58);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  box-shadow:0 0 0 1px rgba(196,162,114,.45);color:#E9D3AE;pointer-events:none;
  opacity:0;scale:.5;rotate:calc(var(--p) * 140deg);
  transition:opacity .9s 1.1s var(--ease-reveal),scale .9s 1.1s var(--ease-out)}
.hwx-in .hwx-seal{opacity:1;scale:1}
.hwx-seal svg{display:block;width:100%;height:100%;fill:currentColor;animation:hwx-spin 22s linear infinite}
.hwx-seal text{font-family:var(--sans);font-size:8.2px;font-weight:500;letter-spacing:.18em}
.hwx-seal .hwx-seal__pc{font-family:var(--serif);font-size:19px;letter-spacing:0;fill:#C4A272}
@keyframes hwx-spin{to{transform:rotate(360deg)}}

/* cartouche : filet d'or qui se dessine, informations qui montent une à une */
.hwx .hw-meta{position:relative}
.hwx .hw-meta::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;
  background:linear-gradient(90deg,#8A6337,#C4A272 50%,rgba(196,162,114,0));
  transform:scaleX(0);transform-origin:left;transition:transform 1.6s .6s var(--ease-reveal)}
.hwx-in .hw-meta::before{transform:scaleX(1)}
.hwx .hw-no,.hwx .hw-title,.hwx .hw-dims,.hwx .hw-price{opacity:0;translate:0 14px;
  transition:opacity .9s var(--ease-reveal),translate .9s var(--ease-reveal),color var(--t-micro) var(--ease-micro)}
.hwx-in .hw-no{opacity:1;translate:0 0;transition-delay:.75s}
.hwx-in .hw-title{opacity:1;translate:0 0;transition-delay:.85s}
.hwx-in .hw-dims{opacity:1;translate:0 0;transition-delay:.95s}
.hwx-in .hw-price{opacity:1;translate:0 0;transition-delay:1.05s}
.hwx .hw-dims::after{content:" · Pièce unique, signée";color:var(--gold-deep)}
.hwx .hw-card:hover .hw-price{color:var(--gold-deep)}

/* desktop : chaque œuvre flotte à sa propre vitesse */
@media (min-width:960px){
  .hwx .hw-item--2 .hw-card{translate:0 calc(var(--p) * 46px)}
  .hwx .hw-item--3 .hw-card{translate:0 calc(var(--p) * -28px)}
  .hwx .hw-item--4 .hw-card{translate:0 calc(var(--p) * 36px)}
  .hwx .hw-item--6 .hw-card{translate:0 calc(var(--p) * -40px)}
}
@media (max-width:600px){
  .hwx-seal{width:68px;height:68px;right:12px;top:12px}
  .hwx-num{font-size:120px;top:-.36em}
  .hwx-frame{inset:10px}
}
@media (prefers-reduced-motion:reduce){
  .hwx .hw-media,.hwx .hw-img,.hwx-frame,.hwx-seal,.hwx-num,.hwx .hw-meta::before,
  .hwx .hw-no,.hwx .hw-title,.hwx .hw-dims,.hwx .hw-price{transition:none!important}
  .hwx .hw-media{clip-path:none;transform:none}
  .hwx .hw-img{scale:1;translate:none}
  .hwx .hw-card,.hwx-num{translate:none!important}
  .hwx-seal{rotate:none}
  .hwx-seal svg{animation:none}
}