/* =========================================================
   Maison de Flores Academy × The LifeBeauty Projects
   "The First Expression"
   Scene system + brand. Palette + type stolen from The Line
   and the Workshop to stay on brand.
   ========================================================= */

:root{
  --paper:#ffffff;          /* the ground */
  --ink:#1a1714;            /* warm near-black */
  --ink-2:#161310;
  --soft:rgba(26,23,20,0.55);
  --faint:rgba(26,23,20,0.34);
  --hair:rgba(26,23,20,0.14);
  --brown:#5E4A37;
  --cream:#F6F2E9;
  --red:#8E2F23;
  --tan:#C2A177;
  --serif:'Newsreader',Georgia,'Times New Roman',serif;
  --sans:'Poppins',system-ui,sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
  --scene-fade:1100ms;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--serif);
  overflow:hidden;                 /* NO SCROLLING — this is an exhibition */
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  -webkit-tap-highlight-color:transparent;
}

/* ---------- The stage: one room visible at a time ---------- */
#stage{position:fixed;inset:0;overflow:hidden}

.scene{
  position:absolute;inset:0;
  display:flex;flex-direction:column;
  align-items:center;justify-content:safe center;
  overflow-y:auto;
  padding:clamp(84px,12vh,120px) clamp(24px,6vw,88px) clamp(46px,7vh,78px);
  opacity:0;visibility:hidden;
  transform:translateY(14px) scale(.994);
  transition:opacity var(--scene-fade) var(--ease),
             transform var(--scene-fade) var(--ease),
             visibility 0s linear var(--scene-fade);
  pointer-events:none;
  text-align:center;
}
.scene.active{
  opacity:1;visibility:visible;
  transform:none;pointer-events:auto;
  transition:opacity var(--scene-fade) var(--ease),
             transform var(--scene-fade) var(--ease),
             visibility 0s;
}
/* leaving room drifts the other way, for a "walking through" feel */
.scene.leaving{transform:translateY(-14px) scale(.994)}

/* wider working rooms (atelier, gallery) fill the frame */
.scene--full{padding:0;justify-content:stretch;align-items:stretch}

/* ---------- Shared type ---------- */
.eyebrow{
  font-family:var(--sans);
  font-weight:300;
  letter-spacing:.42em;
  text-transform:uppercase;
  font-size:clamp(9px,1vw,11px);
  color:var(--faint);
  margin-bottom:clamp(14px,2vw,24px);
}
.scene h1{
  font-weight:300;
  font-size:clamp(26px,3.5vw,48px);
  line-height:1.08;
  letter-spacing:-.01em;
  margin-bottom:.45em;
}
.scene .lead{
  font-size:clamp(17px,2.1vw,25px);
  font-weight:300;
  line-height:1.5;
  max-width:22ch;
  color:var(--ink);
}
.helper{
  font-family:var(--sans);
  font-weight:300;
  font-size:clamp(12px,1.35vw,14px);
  line-height:1.7;
  color:var(--soft);
  max-width:40ch;
  margin:1.4em auto 0;
}
.helper em{font-style:italic;color:var(--faint)}
.examples{
  font-family:var(--sans);
  font-weight:300;
  font-size:12px;
  letter-spacing:.06em;
  color:var(--faint);
  margin-top:1em;
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  text-align:center;width:100%;
}
.examples span{white-space:nowrap}
.examples span::after{content:'·';margin:0 .7em;color:var(--hair)}
.examples span:last-child::after{content:''}

/* ---------- Inputs: no corporate forms ---------- */
.field{
  width:min(560px,86vw);
  margin:clamp(16px,3vw,32px) auto 0;
}
.field input,
.field textarea{
  width:100%;
  background:transparent;
  border:none;
  border-bottom:1px solid var(--hair);
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(19px,2.4vw,27px);
  color:var(--ink);
  text-align:center;
  padding:.5em .2em;
  transition:border-color .5s var(--ease);
}
.field textarea{
  resize:none;line-height:1.5;font-size:clamp(16px,1.9vw,20px);
  min-height:4.5em;text-align:center;
}
.field input:focus,
.field textarea:focus{outline:none;border-color:var(--ink)}
.field input::placeholder,
.field textarea::placeholder{color:var(--faint);font-style:italic}

.codes-grid{
  display:flex;flex-direction:column;gap:clamp(8px,1.6vw,16px);
  width:min(520px,86vw);margin:clamp(16px,2.6vw,30px) auto 0;
}
.codes-grid .field{margin:0;width:100%}
.code-num{
  font-family:var(--sans);font-weight:300;font-size:10px;
  letter-spacing:.3em;color:var(--faint);
  display:block;margin-bottom:.4em;
}

/* ---------- Buttons ---------- */
.btn{
  font-family:var(--sans);
  font-weight:300;
  letter-spacing:.24em;
  text-indent:.24em;           /* offset the trailing letter-spacing so text sits centred */
  text-transform:uppercase;
  font-size:12px;
  color:var(--ink);
  background:transparent;
  border:1px solid var(--ink);
  border-radius:2px;
  padding:15px 40px;
  cursor:pointer;
  transition:background .5s var(--ease),color .5s var(--ease),
             opacity .5s var(--ease),transform .5s var(--ease);
  margin-top:clamp(20px,3vw,36px);
}
.btn:hover{background:var(--ink);color:var(--paper)}
.btn:disabled{opacity:.28;cursor:default;pointer-events:none}
.btn--ghost{border-color:var(--hair);color:var(--soft)}
.btn--ghost:hover{border-color:var(--ink);background:transparent;color:var(--ink)}
.btn-row{display:flex;gap:16px;align-items:center;flex-wrap:wrap;justify-content:center}

/* ---------- Corner marks ---------- */
.logo-mark{
  position:fixed;top:clamp(20px,3vw,38px);left:50%;
  transform:translateX(-50%);
  width:min(190px,48vw);height:auto;opacity:0;
  transition:opacity 1.4s var(--ease);z-index:40;
  pointer-events:none;filter:none;
}
body.show-logo .logo-mark{opacity:.9}
.progress{
  position:fixed;bottom:clamp(18px,2.6vw,30px);left:50%;
  transform:translateX(-50%);
  display:flex;gap:9px;z-index:40;opacity:0;
  transition:opacity 1s var(--ease);
}
body.show-progress .progress{opacity:1}
.progress i{
  font-family:var(--serif);font-style:italic;font-weight:300;font-size:11px;
  letter-spacing:.08em;color:var(--hair);
  transition:color .6s var(--ease);
}
.progress i.on{color:var(--faint)}
.progress i.now{color:var(--ink)}

/* ---------- small-screen courtesy note ---------- */
#small-note{
  position:fixed;inset:0;z-index:90;background:var(--paper);
  display:none;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;text-align:center;padding:32px;
}
#small-note .sn-mark{
  font-family:var(--sans);font-weight:300;font-size:10px;
  letter-spacing:.42em;text-transform:uppercase;color:var(--faint);
}
#small-note p{font-family:var(--serif);font-weight:300;font-size:19px;line-height:1.5}
#small-note .btn{margin-top:10px}
@media (max-width:560px){ #small-note:not(.dismissed){display:flex} }

/* ---------- Opening ---------- */
.opening-stroke{
  width:min(420px,72vw);height:auto;color:var(--ink);
  margin-bottom:clamp(26px,4vw,44px);overflow:visible;
}
.opening-stroke path{
  stroke-dasharray:1000;stroke-dashoffset:1000;
  animation:drawLine 2.4s cubic-bezier(.65,0,.35,1) .3s forwards;
}
@keyframes drawLine{to{stroke-dashoffset:0}}

#scene-opening .lead{max-width:26ch;color:var(--soft);margin-bottom:.2em}
#scene-opening .opening-lines p{
  font-size:clamp(18px,2.3vw,26px);font-weight:300;line-height:1.55;
  opacity:0;animation:riseIn 1.6s var(--ease) forwards;
}
#scene-opening .opening-lines p:nth-child(1){animation-delay:1.3s}
#scene-opening .opening-lines p:nth-child(2){animation-delay:2.3s}
#scene-opening .opening-lines p:nth-child(3){animation-delay:3.3s}
#scene-opening .btn{opacity:0;animation:riseIn 1.6s var(--ease) 4.3s forwards}
@keyframes riseIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

.big-statement p{
  font-size:clamp(20px,2.6vw,30px);font-weight:300;line-height:1.5;
  max-width:20ch;margin:0 auto;
}

/* ---------- Curatorial reflection (Scene 8) ---------- */
#scene-reflection .reflect-wrap{width:min(620px,88vw)}
.reflect-q{
  font-size:clamp(20px,2.6vw,30px);font-weight:300;line-height:1.4;
  min-height:2.4em;margin-bottom:.4em;
}
.reflect-caret{opacity:.4;animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.reflect-count{
  font-family:var(--sans);font-size:10px;letter-spacing:.3em;
  text-transform:uppercase;color:var(--faint);margin-top:1.6em;
}

/* ---------- Archive Entry (Scene 9) ---------- */
#scene-entry{
  background:linear-gradient(rgba(255,255,255,.66),rgba(255,255,255,.66)),
             url('../assets/background-mdf.jpg') center/cover no-repeat;
}

.catalogue{
  width:min(560px,92vw);text-align:center;
  border:1px solid var(--hair);
  padding:clamp(30px,4.5vw,52px) clamp(26px,4vw,52px);
  background:rgba(255,255,255,.93);backdrop-filter:blur(3px);
  max-height:88vh;overflow:auto;
  box-shadow:0 34px 80px rgba(94,74,55,.16);
}
.catalogue::-webkit-scrollbar{width:0}
.cat-no{
  font-family:var(--sans);font-weight:300;letter-spacing:.4em;
  text-transform:uppercase;font-size:10.5px;color:var(--red);
  margin-bottom:clamp(18px,2.6vw,28px);
}
.cat-plate{
  width:min(300px,72%);margin:0 auto clamp(18px,2.6vw,26px);
  padding:13px;background:#fff;border:1px solid var(--hair);
  box-shadow:0 22px 50px rgba(94,74,55,.18);
}
.cat-scarf{width:100%;aspect-ratio:1;background:#fafafa center/cover no-repeat}
.cat-title{font-family:var(--serif);font-weight:300;font-size:clamp(23px,3vw,32px);line-height:1.1;letter-spacing:.01em}
.cat-sub{font-family:var(--sans);font-weight:300;letter-spacing:.28em;text-transform:uppercase;
  font-size:9.5px;color:var(--faint);margin:.5em 0 clamp(18px,2.4vw,26px)}
.cat-meta{margin:0 auto;max-width:420px}
.cat-row{
  display:flex;justify-content:space-between;align-items:baseline;gap:20px;
  padding:.72em 0;border-top:1px solid var(--hair);text-align:left;
}
.cat-row dt{
  font-family:var(--sans);font-weight:300;letter-spacing:.2em;
  text-transform:uppercase;font-size:9px;color:var(--faint);flex:none;white-space:nowrap;
}
.cat-row dd{font-family:var(--serif);font-size:clamp(15px,1.8vw,18px);font-weight:300;text-align:right}
.cat-note{
  margin:clamp(20px,2.8vw,30px) auto 0;padding-top:clamp(16px,2vw,22px);border-top:1px solid var(--hair);
  max-width:44ch;font-size:clamp(14px,1.7vw,16px);font-weight:300;line-height:1.75;
  font-style:italic;color:var(--ink);
}
.cat-sign{margin-top:clamp(22px,3vw,32px);display:flex;flex-direction:column;align-items:center;gap:9px}
.cat-sign-label{font-family:var(--sans);font-weight:300;letter-spacing:.24em;text-transform:uppercase;font-size:9px;color:var(--faint)}
.cat-name{
  width:min(280px,70%);text-align:center;background:transparent;border:none;border-bottom:1px solid var(--hair);
  font-family:var(--serif);font-style:italic;font-size:clamp(19px,2.3vw,24px);color:var(--ink);
  padding:.3em .2em;transition:border-color .4s var(--ease);
}
.cat-name:focus{outline:none;border-color:var(--tan)}
.cat-name::placeholder{color:var(--faint);font-style:italic}
.loading-note{
  font-family:var(--sans);font-size:11px;letter-spacing:.28em;
  text-transform:uppercase;color:var(--faint);
}
.loading-note::after{content:'';animation:dots 1.6s steps(4) infinite}
@keyframes dots{0%{content:''}25%{content:'.'}50%{content:'..'}75%{content:'...'}}

/* ---------- Final plaque (email + share) ---------- */
.plaque{
  position:relative;
  width:min(340px,88vw);
  max-height:92vh;overflow-y:auto;scrollbar-width:none;
  background:rgba(255,255,255,.94);
  border:1px solid rgba(194,161,119,.42);
  color:var(--ink);border-radius:2px;
  padding:clamp(20px,2.4vw,30px);
  box-shadow:0 40px 100px rgba(94,74,55,.26);
  backdrop-filter:blur(10px);
  text-align:center;
}
.plaque::-webkit-scrollbar{width:0}
.plaque h2{font-size:clamp(17px,2vw,21px)}
.plaque .checks{font-size:11.5px;line-height:1.8}
.plaque h2{font-family:var(--serif);font-weight:300;font-size:clamp(19px,2.4vw,25px);letter-spacing:.01em;margin-bottom:.9em}
.plaque .checks{
  font-family:var(--sans);font-weight:300;font-size:12.5px;letter-spacing:.04em;
  line-height:2;color:var(--soft);margin:0 0 1.3em;
}
.plaque input,.plaque textarea{
  width:100%;background:#fff;
  border:1px solid var(--hair);border-radius:2px;
  color:var(--ink);font-family:var(--serif);font-size:15px;
  padding:12px 14px;margin-bottom:11px;text-align:center;
}
.plaque input:focus,.plaque textarea:focus{outline:none;border-color:var(--tan)}
.plaque input::placeholder,.plaque textarea::placeholder{color:var(--faint)}
.plaque textarea{text-align:left;resize:none;min-height:4.4em;line-height:1.5}
.plaque .btn{border-color:var(--ink);color:var(--ink);margin-top:6px}
.plaque .btn:hover{background:var(--ink);color:var(--paper)}
.share-block{
  margin-top:clamp(16px,2.2vw,22px);padding-top:clamp(15px,2vw,20px);
  border-top:1px solid var(--hair);
  color:var(--soft);
  font-family:var(--sans);font-weight:300;font-size:12.5px;line-height:1.7;
}
.share-block .sig{font-family:var(--serif);font-style:italic;font-size:15px;color:var(--brown)}
.plaque-x{
  position:absolute;top:8px;right:12px;width:30px;height:30px;border:none;background:none;
  color:var(--soft);font-size:24px;line-height:1;cursor:pointer;font-family:var(--sans);
  transition:color .3s;z-index:3;
}
.plaque-x:hover{color:var(--ink)}
.plaque-reopen{
  position:absolute;top:clamp(18px,2.6vh,34px);left:clamp(16px,3vw,40px);
  background:rgba(255,255,255,.62);border:1px solid rgba(94,74,55,.26);border-radius:2px;
  color:var(--brown);font-family:var(--sans);font-weight:300;font-size:9px;letter-spacing:.2em;
  text-transform:uppercase;padding:8px 14px;cursor:pointer;z-index:36;opacity:0;pointer-events:none;
  transition:opacity .6s ease;backdrop-filter:blur(6px);
}
.plaque-reopen.show{opacity:.8;pointer-events:auto}
.plaque-reopen:hover{opacity:1;background:#fff}

/* ---------- Footer ---------- */
.tiny-footer{
  position:fixed;bottom:14px;left:50%;transform:translateX(-50%);
  font-family:var(--sans);font-weight:300;font-size:9px;
  letter-spacing:.24em;text-transform:uppercase;color:var(--faint);
  text-align:center;z-index:30;opacity:0;transition:opacity 1s;
}
body.show-footer .tiny-footer{opacity:1}

/* ---------- Cinematic black wipe between acts ---------- */
#blackout{
  position:fixed;inset:0;background:var(--cream);z-index:60;
  opacity:0;pointer-events:none;
  transition:opacity 1.4s var(--ease);
}
#blackout.on{opacity:1;pointer-events:auto}

@media (max-width:640px){
  .scene .lead{max-width:20ch}
  .catalogue{padding:26px}
}

/* ========== the finish layer (wow.js companions) ========== */
/* split-word reveals: each word rises from behind an invisible hem */
.scene h1 .w{display:inline-block;overflow:hidden;vertical-align:bottom;margin-right:.22em}
.scene h1 .w:last-child{margin-right:0}
.scene h1 .w i{display:inline-block;font-style:inherit;will-change:transform}

/* buttons fill with ink rising from the hem */
.btn{position:relative;overflow:hidden;z-index:1;transition:color .5s var(--ease),opacity .5s var(--ease)}
.btn::before{
  content:'';position:absolute;inset:0;background:var(--ink);z-index:-1;
  transform:scaleY(0);transform-origin:bottom;
  transition:transform .5s cubic-bezier(.65,0,.35,1);
}
.btn:hover{background:transparent;color:var(--paper)}
.btn:hover::before{transform:none}

/* a slow silk sheen breathes across the scarf */
.scarf-canvas::after{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:8500;
  background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.28) 50%,transparent 65%);
  background-size:300% 100%;background-position:120% 0;
  animation:silkSheen 8.5s ease-in-out infinite;
}
@keyframes silkSheen{
  0%,58%{background-position:120% 0}
  78%{background-position:-60% 0}
  100%{background-position:-60% 0}
}

/* the current numeral gets a hand-drawn underline */
.progress i{position:relative;padding-bottom:3px}
.progress i::after{
  content:'';position:absolute;left:10%;right:10%;bottom:0;height:1px;
  background:var(--ink);transform:scaleX(0);transform-origin:left;
  transition:transform .8s cubic-bezier(.19,1,.22,1);
}
.progress i.now::after{transform:scaleX(1)}