/* ————————————————————————————————————————————————————————
   Maison de Flores · The Dressing Room
   A dressing-room game on the white of maisondeflores.com:
   the closet on the left, her in the middle, the look card
   on the right. The Seasons + Poppins, hairlines, play.
   CONTENT NEVER LIVES HERE — everything shown or sold comes
   from data/garments.json. See README.md.
———————————————————————————————————————————————————————— */

/* Site typography: Newsreader (serif) + Poppins (sans), black letters — like maisondeflores.com.
   (The Seasons stays in fonts/ for the logo artwork and future use.) */
:root{
  --white:#FFFFFF;
  --ink:#000000;
  --grey:#4A4744;
  --grey-soft:#8C8880;
  --hairline:#E6E2DA;
  --hairline-soft:#F1EEE8;
  --brass:#C2A177;
  --red:#8E2F23;
  --display:'Newsreader',Georgia,serif;
  --serif:'Newsreader',Georgia,serif;
  --sans:'Poppins','Helvetica Neue',sans-serif;
  --silk:cubic-bezier(.19,1,.22,1);
  --spring:cubic-bezier(.34,1.56,.64,1);
  --curtain:cubic-bezier(.65,0,.35,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{overflow:hidden;overflow:clip}
body{
  background:var(--white);color:var(--ink);
  font-family:var(--sans);font-weight:300;
  overflow:hidden;overflow:clip;
  -webkit-font-smoothing:antialiased;
  opacity:0;animation:pageIn 1s .1s var(--silk) forwards;
}
@keyframes pageIn{to{opacity:1}}
::selection{background:var(--ink);color:var(--white)}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}

/* ————— masthead ————— */
.masthead{
  height:92px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  border-bottom:1px solid var(--hairline-soft);
}
.masthead__logo img{height:52px;width:auto;display:block;transition:opacity .4s}
.masthead__logo:hover img{opacity:.55}
.masthead__room{
  font-size:9px;letter-spacing:.52em;text-indent:.52em;text-transform:uppercase;color:var(--grey-soft);
}

/* ————— the room ————— */
.room{
  height:calc(100dvh - 92px);
  display:grid;grid-template-columns:minmax(280px,340px) minmax(0,1fr) minmax(280px,340px);
}

/* ————— closet ————— */
.closet{
  border-right:1px solid var(--hairline-soft);
  padding:26px 26px 20px;
  display:flex;flex-direction:column;min-height:0;
}
.closet__cats{
  display:flex;flex-wrap:wrap;gap:8px;padding-bottom:18px;
}
.cat{
  font-size:9px;letter-spacing:.2em;text-indent:.2em;text-transform:uppercase;
  color:var(--ink);white-space:nowrap;
  border:1px solid var(--hairline);border-radius:999px;padding:8px 15px;
  transition:border-color .4s,background .4s,color .4s,transform .4s var(--spring);
}
.cat:hover{border-color:var(--ink);transform:translateY(-1px)}
.cat.on{background:var(--ink);border-color:var(--ink);color:var(--white)}

.closet__rails{
  flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  scrollbar-width:none;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));
  align-content:start;column-gap:10px;
}
.closet__rails::-webkit-scrollbar{display:none}

/* each hanger hangs from its row's rod (the cell's top border) */
.hanger{
  position:relative;padding-top:10px;height:158px;
  border-top:2px solid var(--hairline);          /* the rod */
  display:flex;flex-direction:column;align-items:center;
  -webkit-tap-highlight-color:transparent;
}
.hanger__swing{
  transform-origin:50% 4px;                      /* swings from the hook */
  animation:sway 6.5s ease-in-out infinite alternate;
  transition:transform .7s var(--spring);
  display:flex;flex-direction:column;align-items:center;
}
.hanger:nth-child(2n) .hanger__swing{animation-delay:-2.2s;animation-duration:7.4s}
.hanger:nth-child(3n) .hanger__swing{animation-delay:-4.1s;animation-duration:5.8s}
@keyframes sway{from{transform:rotate(-1deg)}to{transform:rotate(1.15deg)}}
.hanger:hover .hanger__swing{animation-play-state:paused;transform:rotate(3.4deg) scale(1.05)}
.hanger:active .hanger__swing{transform:rotate(-2deg) scale(.98)}
.hanger__wire{display:block;width:64px;height:26px;color:var(--grey-soft);transition:color .5s}
.hanger:hover .hanger__wire{color:var(--brass)}
.hanger.worn .hanger__wire{color:var(--ink)}
.hanger__thumb{
  width:78px;height:88px;overflow:hidden;position:relative;margin-top:-7px;
}
.hanger__thumb img{
  position:absolute;width:240%;left:-70%;pointer-events:none;
  filter:drop-shadow(0 3px 4px rgba(28,25,23,.10));
}
.hanger__thumb img.t-top{top:-59%}
.hanger__thumb img.t-full{top:-94%}
.hanger__thumb img.t-bottom{top:-133%}
.hanger__thumb img.t-scarf{top:-32%}
/* real product-on-hanger photography: no drawn wire, the photo IS the hanger */
.hanger--photo .hanger__wire{display:none}
.hanger--photo .hanger__thumb{margin-top:0;height:112px}
.hanger--photo .hanger__thumb img{
  position:static;width:100%;height:100%;object-fit:contain;filter:none;
}

.hanger__name{
  margin-top:6px;font-family:var(--display);font-style:italic;font-size:13.5px;color:var(--grey);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:96px;
  transition:color .4s;
}
.hanger:hover .hanger__name,.hanger.worn .hanger__name{color:var(--ink)}
.hanger.worn::after{
  content:'';position:absolute;top:16px;right:8px;width:5px;height:5px;border-radius:50%;
  background:var(--red);
}

/* the flying garment (hanger → her) */
.fly{
  position:fixed;z-index:80;pointer-events:none;object-fit:contain;
  transition:all .75s cubic-bezier(.5,.05,.3,1);
  filter:drop-shadow(0 10px 18px rgba(28,25,23,.18));
}

/* ————— fitting ————— */
.fitting{position:relative;display:flex;flex-direction:column;align-items:center;min-width:0}
.stage{
  position:relative;flex:1;min-height:0;aspect-ratio:2/3;max-width:100%;
  user-select:none;-webkit-user-select:none;touch-action:pan-y;margin-top:1vh;
}
/* she breathes: the whole stack (model + garments) moves as one, so layers never separate */
.stage__breath{
  position:absolute;inset:0;
  transform-origin:50% 26%;
  animation:breath 4.8s ease-in-out infinite alternate;
}
@keyframes breath{from{transform:scale(1) translateY(0)}to{transform:scale(1.017) translateY(-0.4%)}}
.stage__breath.settle{animation:settle .5s var(--silk)}
@keyframes settle{from{transform:scale(1.008)}to{transform:scale(1)}}

.stage__model,.slot{position:absolute;inset:0;width:100%;height:100%}
/* the model is a true cut-out (tools/cutout) — no masks needed */
.stage__model{object-fit:contain;transition:opacity .8s var(--silk)}
.slot{pointer-events:none}
.stage__floor{
  position:absolute;left:50%;bottom:2.6%;transform:translateX(-50%);
  width:34%;height:2.6%;border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(28,25,23,.13),rgba(28,25,23,0) 70%);
}
.stage.drop-ready::before{
  content:'';position:absolute;inset:4% 18%;border:1px dashed var(--brass);border-radius:200px;
  opacity:.6;
}

.piece{
  position:absolute;inset:0;
  transition:opacity 1.15s var(--silk),filter 1.15s var(--silk),transform 1.15s var(--silk);
}
.piece img{width:100%;height:100%;object-fit:contain;display:block}
.piece--entering{opacity:0;filter:blur(6px);transform:scale(1.015)}
.piece--shown{opacity:1;filter:blur(0);transform:none}
.piece--leaving{opacity:0;filter:blur(5px)}
.piece--instant{transition:none}
/* the editorial turn: quicker dissolves between her angles */
.piece--fast{transition-duration:.5s}
.piece--fast.piece--entering{filter:blur(3px);transform:scale(1.004)}

.fitting__caption{
  height:44px;display:flex;align-items:center;
  font-family:var(--display);font-style:italic;font-size:22px;color:var(--ink);
  opacity:0;transform:translateY(6px);transition:opacity .9s var(--silk),transform .9s var(--silk);
}
.fitting__caption.on{opacity:1;transform:none}
.fitting__hint{
  padding-bottom:14px;font-size:9px;letter-spacing:.42em;text-indent:.42em;text-transform:uppercase;
  color:var(--grey-soft);transition:opacity 1s;
}
.fitting__hint.gone{opacity:0}

/* the turn — a quiet but discoverable button under the caption */
.turn{
  display:flex;align-items:center;gap:9px;margin:2px 0 10px;
  font-size:9px;letter-spacing:.26em;text-indent:.26em;text-transform:uppercase;color:var(--ink);
  border:1px solid var(--hairline);border-radius:999px;padding:9px 18px;
  transition:border-color .4s,transform .4s var(--spring),opacity .6s;
  animation:turnIn 1s var(--silk);
}
@keyframes turnIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.turn:hover{border-color:var(--ink);transform:translateY(-1px)}
.turn i{
  font-style:normal;font-size:14px;line-height:1;color:var(--brass);
  transition:transform .8s var(--spring);
}
.turn:hover i{transform:rotate(-180deg)}
.turn:disabled{opacity:.4;cursor:default}

/* ————— her look ————— */
.look{
  border-left:1px solid var(--hairline-soft);
  padding:26px 28px;display:flex;flex-direction:column;min-height:0;overflow-y:auto;
  scrollbar-width:none;
}
.look::-webkit-scrollbar{display:none}
.look__head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.look__title{font-family:var(--display);font-weight:400;font-style:italic;font-size:30px;margin-right:auto}
/* ————— her hello : played in the stage, in place, then settles —————
   The video has a near-white background (H.264 can't carry alpha), so we
   feather its edges — a soft-edged white fill on the white stage shows no
   rectangle. She fades to her identical still when the hello ends. */
.stage__intro{
  position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  z-index:6;pointer-events:none;opacity:0;   /* invisible until it truly plays */
  /* MEASURED against the base still (tools/frame + body-bbox): her body is
     92.27% of the video frame vs 93.27% in the base → scale 1.011, and feet
     land on the base floor line with a 0.72% drop. Re-measure per new video. */
  transform:translateY(0.72%) scale(var(--intro-scale,1.011));
  transform-origin:50% 95%;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 8%,#000 92%,transparent 100%),
                     linear-gradient(to bottom,transparent 0,#000 5%,#000 95%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,transparent 0,#000 8%,#000 92%,transparent 100%),
             linear-gradient(to bottom,transparent 0,#000 5%,#000 95%,transparent 100%);
  mask-composite:intersect;
  transition:opacity 1s var(--silk);
}
.stage__intro[hidden]{display:none}
.stage__intro.playing{opacity:1}

/* the model picker — collapsed to a quiet button; opens the three choices */
.model-picker{margin-bottom:20px}
.model-picker__toggle{
  display:flex;align-items:baseline;gap:10px;width:100%;text-align:left;padding:4px 0;
}
.model-picker__cue{
  font-size:9px;letter-spacing:.36em;text-transform:uppercase;color:var(--grey-soft);
}
.model-picker__current{
  font-family:var(--display);font-style:italic;font-size:19px;color:var(--ink);margin-right:auto;
}
.model-picker__chevron{
  font-size:11px;color:var(--grey-soft);transition:transform .5s var(--silk);
}
.model-picker__toggle[aria-expanded="true"] .model-picker__chevron{transform:rotate(180deg)}

.model-picker__menu{
  overflow:hidden;
  animation:menuOpen .5s var(--silk);
}
@keyframes menuOpen{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.model-picker__label{
  font-size:9px;letter-spacing:.32em;text-transform:uppercase;color:var(--grey-soft);
  margin:14px 0 10px;
}
.model-picker__row{display:flex;gap:14px;align-items:center}
.model-opt{
  display:flex;flex-direction:column;align-items:center;gap:7px;padding:0;
  transition:transform .45s var(--spring);
}
.model-opt img{
  width:52px;height:52px;border-radius:50%;object-fit:cover;object-position:50% 10%;
  border:1px solid var(--hairline);display:block;filter:grayscale(.15);transition:filter .4s;
}
.model-opt span{font-size:10px;letter-spacing:.14em;color:var(--grey-soft);transition:color .4s}
.model-opt:hover{transform:translateY(-2px)}
.model-opt:hover img,.model-opt.on img{filter:none}
.model-opt:hover span,.model-opt.on span{color:var(--ink)}
.model-opt{position:relative}
.model-opt.on img{border-color:var(--brass);box-shadow:0 0 0 3px var(--white),0 0 0 4px var(--brass)}
/* ————— the page-turn : her back, as a lookbook page ————— */
.stage__page{position:absolute;inset:0;transition:transform .8s var(--curtain),opacity .8s var(--curtain)}
.stage__page img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.stage__page--enter{transform:translateX(26%);opacity:0}
.stage__page--enter-l{transform:translateX(-26%);opacity:0}
.stage__page--in{transform:none;opacity:1}
.stage__page--exit-l{transform:translateX(-22%);opacity:0}
.stage__page--exit-r{transform:translateX(22%);opacity:0}
.look__reset{
  font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--grey-soft);
  border-bottom:1px solid transparent;transition:color .4s,border-color .4s;padding-bottom:2px;
}
.look__reset:hover{color:var(--ink);border-color:var(--ink)}

.look__items{margin-top:10px}
.look-item{
  padding:16px 0 14px;border-bottom:1px solid var(--hairline-soft);
  animation:itemIn .8s var(--silk);
}
@keyframes itemIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.look-item__row{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.look-item__name{
  font-family:var(--display);font-style:italic;font-size:19px;text-align:left;
  border-bottom:1px solid transparent;transition:border-color .4s;
}
.look-item__name:hover{border-color:var(--brass)}
.look-item__price{font-size:12.5px;color:var(--grey);white-space:nowrap}
.look-item__kind{
  font-size:8.5px;letter-spacing:.3em;text-indent:.3em;text-transform:uppercase;color:var(--grey-soft);
  margin-bottom:3px;
}
.look-item__opts{display:flex;flex-direction:column;gap:6px;margin-top:9px}
.opt-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.opt-row__label{
  font-size:8.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--grey-soft);min-width:64px;
}
.dot{
  width:17px;height:17px;border-radius:50%;border:1px solid var(--hairline);padding:0;
  position:relative;transition:transform .45s var(--spring);
}
.dot:hover{transform:scale(1.2)}
.dot.on::after{content:'';position:absolute;inset:-5px;border:1px solid var(--ink);border-radius:50%}
.opt{
  font-size:12px;color:var(--grey-soft);padding:1px 2px;position:relative;transition:color .4s;
  font-family:var(--serif);
}
.opt+.opt{margin-left:8px}
.opt.on{color:var(--ink)}
.opt.on::after{content:'';position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--brass)}
.opt:hover{color:var(--ink)}
.look-item__off{
  font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--grey-soft);
  transition:color .4s;
}
.look-item__off:hover{color:var(--red)}

.look__total{
  display:flex;justify-content:space-between;align-items:baseline;
  padding:18px 0 4px;font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--grey);
}
.look__total strong{
  font-family:var(--display);font-weight:400;font-size:26px;letter-spacing:.02em;color:var(--ink);
}

.btn{
  display:block;width:100%;text-align:center;
  font-size:10.5px;letter-spacing:.32em;text-indent:.32em;text-transform:uppercase;
  padding:16px 18px;position:relative;overflow:hidden;z-index:1;
  border:1px solid var(--ink);border-radius:2px;transition:color .5s;
}
.btn::before{
  content:'';position:absolute;inset:0;background:var(--ink);
  transform:scaleY(0);transform-origin:bottom;transition:transform .5s cubic-bezier(.65,0,.35,1);z-index:-1;
}
.btn:hover{color:var(--white)}
.btn:hover::before{transform:none}
.btn:disabled{opacity:.35;cursor:default}
.btn:disabled:hover{color:var(--ink)}
.btn:disabled::before{display:none}
.btn--primary{margin-top:14px}

.look__note{
  margin-top:10px;font-size:10.5px;letter-spacing:.05em;line-height:1.7;color:var(--grey-soft);
  text-align:center;min-height:1em;
}

.look__surprise{
  margin-top:auto;padding-top:18px;
  font-size:10px;letter-spacing:.3em;text-indent:.3em;text-transform:uppercase;color:var(--grey);
  display:flex;align-items:center;justify-content:center;gap:10px;transition:color .4s;
}
.look__surprise i{
  font-style:normal;color:var(--brass);display:inline-block;
  transition:transform .8s var(--spring);
}
.look__surprise:hover{color:var(--ink)}
.look__surprise:hover i{transform:rotate(180deg) scale(1.35)}

/* mobile pill */
.look-pill{display:none}

/* ————— details ————— */
.scrim{
  position:fixed;inset:0;z-index:140;background:rgba(28,25,23,.26);backdrop-filter:blur(2px);
  opacity:0;pointer-events:none;transition:opacity .8s var(--silk);
}
.scrim.on{opacity:1;pointer-events:auto}
.details{
  position:fixed;top:0;right:0;bottom:0;z-index:160;width:min(420px,94vw);
  background:var(--white);border-left:1px solid var(--hairline);
  transform:translateX(103%);transition:transform .9s cubic-bezier(.65,0,.35,1);
  overflow-y:auto;overscroll-behavior:contain;
}
.details.open{transform:none}
.details__close{
  position:absolute;top:14px;right:20px;font-size:28px;font-weight:200;opacity:.55;
  transition:opacity .4s,transform .5s var(--silk);
}
.details__close:hover{opacity:1;transform:rotate(90deg)}
.details__inner{padding:70px 42px 60px}
.details__eyebrow{font-size:9px;letter-spacing:.44em;text-transform:uppercase;color:var(--grey-soft)}
.details__name{font-family:var(--display);font-weight:400;font-style:italic;font-size:40px;line-height:1.05;margin-top:10px}
.details__story{margin-top:18px;font-size:14px;line-height:1.85;color:var(--grey)}
.details__price{margin-top:18px;font-family:var(--display);font-size:20px}
.details__group{margin-top:30px}
.details__label{font-size:9px;letter-spacing:.4em;text-transform:uppercase;color:var(--grey-soft);margin-bottom:12px}
.details__swatches{display:flex;gap:13px}
.swatch{
  width:26px;height:26px;border-radius:50%;border:1px solid var(--hairline);padding:0;
  position:relative;transition:transform .45s var(--spring);
}
.swatch:hover{transform:scale(1.14)}
.swatch.on::after{content:'';position:absolute;inset:-6px;border:1px solid var(--ink);border-radius:50%}
.details__variant{margin-top:10px;font-size:12px;color:var(--grey)}
.details__sizes{display:flex;flex-wrap:wrap;gap:8px 20px}
.size{
  font-size:14px;letter-spacing:.08em;color:var(--grey-soft);padding:2px 0;position:relative;
  transition:color .4s;
}
.size.on{color:var(--ink)}
.size.on::after{content:'';position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--brass)}
.size:hover{color:var(--ink)}
.details__buy{margin-top:38px}
.details__note{
  margin-top:14px;font-size:10.5px;letter-spacing:.05em;line-height:1.7;color:var(--grey-soft);
  text-align:center;min-height:1em;
}

/* ————— mobile ————— */
@media (max-width:920px){
  .masthead{height:80px}
  .masthead__logo img{height:34px}

  .room{
    height:calc(100dvh - 80px);
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:minmax(0,1fr) auto;
  }

  .fitting{order:1;min-height:0;min-width:0}
  .stage{margin-top:0}
  .fitting__caption{height:34px;font-size:18px}
  .fitting__hint{display:none}

  .closet{
    order:2;border-right:none;border-top:1px solid var(--hairline-soft);
    padding:10px 16px 12px;min-width:0;
  }
  .closet__cats{
    flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:10px;gap:0 18px;
  }
  .closet__cats::-webkit-scrollbar{display:none}
  .closet__rails{
    display:flex;overflow-x:auto;overflow-y:hidden;column-gap:4px;
    border-top:0;
  }
  .hanger{flex:0 0 84px;height:142px;border-top:2px solid var(--hairline)}
  .hanger__thumb{width:72px;height:80px}
  .hanger__name{font-size:12px;max-width:82px}

  .look{
    position:fixed;left:0;right:0;bottom:0;z-index:150;order:3;
    max-height:78dvh;background:var(--white);
    border-left:none;border-top:1px solid var(--hairline);border-radius:16px 16px 0 0;
    transform:translateY(105%);transition:transform .85s cubic-bezier(.65,0,.35,1);
    padding:22px 7vw 30px;
  }
  .look.open{transform:none}
  .look__surprise{margin-top:16px}

  .look-pill{
    display:flex;align-items:baseline;gap:10px;
    position:fixed;right:14px;bottom:calc(256px + env(safe-area-inset-bottom));z-index:130;
    background:var(--white);border:1px solid var(--hairline);border-radius:999px;
    padding:10px 18px;box-shadow:0 8px 24px rgba(28,25,23,.12);
    font-size:9px;letter-spacing:.24em;text-transform:uppercase;color:var(--grey);
  }
  .look-pill strong{font-family:var(--display);font-weight:400;font-size:16px;color:var(--ink)}

  .details{
    top:auto;left:0;right:0;bottom:0;width:100%;max-height:86dvh;
    border-left:none;border-top:1px solid var(--hairline);border-radius:16px 16px 0 0;
    transform:translateY(105%);
  }
  .details.open{transform:none}
  .details__inner{padding:52px 8vw 48px}
  .details__name{font-size:34px}
}

/* NOTE: no prefers-reduced-motion kill-switch — it silently disabled the
   breathing/greeting on machines with Reduce Motion on (Silvia's included).
   All motion here is gentle; if a11y demands return, scope it narrowly. */