/* One film component; spacing and typography come from the shared responsive tokens. */
.motion{position:relative;height:240vh;background:#000}
.motion-stage{
  position:sticky;top:var(--admin-offset);height:calc(100svh - var(--admin-offset));
  display:grid;grid-template-rows:minmax(0,1fr) auto auto;gap:var(--space-3);
  padding:calc(var(--header-h) + var(--space-3)) max(var(--page-gutter),calc((100% - var(--content-max))/2)) calc(var(--dock-clearance) + var(--space-3));
  overflow:hidden;background:#000;isolation:isolate
}
.motion-poster,.motion-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000}
.motion-video{opacity:0}
.motion.is-ready .motion-video{opacity:1}
.motion-shade{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(90deg,rgba(0,0,0,.64),rgba(0,0,0,.15) 46%,rgba(0,0,0,.08) 72%,rgba(0,0,0,.42)),linear-gradient(180deg,rgba(0,0,0,.08),transparent 48%,rgba(0,0,0,.8))
}
.motion-copy{position:relative;z-index:4;grid-row:2;display:grid;min-width:0;max-width:100%}
.motion-chapter{
  position:relative;grid-area:1/1;align-self:end;min-width:0;isolation:isolate;
  opacity:0;visibility:hidden;transform:translateY(var(--space-2));
  transition:opacity .28s,transform .42s var(--ease),visibility .28s;pointer-events:none
}
.motion-chapter.active{opacity:1;visibility:visible;transform:none}
.motion-chapter small{display:block;max-width:100%;margin-bottom:var(--space-2);color:#b8b8b8;font-size:var(--micro-size);font-weight:750;letter-spacing:.16em;line-height:1.5;text-transform:uppercase}
.motion-chapter h2{max-width:18ch;margin:0;font-size:var(--title-size);line-height:.94;letter-spacing:-.055em;word-break:normal;overflow-wrap:normal;hyphens:none;text-wrap:balance}
.motion-chapter p{max-width:60ch;margin:var(--space-2) 0 0;color:#b8b8b8;font-size:var(--body-size);line-height:1.6}
.motion-chapter-actions{margin-top:var(--space-3)}
.motion-chapter.active .motion-chapter-actions{pointer-events:auto}
.motion-chapter-actions .btn,.motion-end-actions .btn{max-width:100%;min-height:var(--space-6);padding-block:var(--space-2);white-space:normal;word-break:normal;overflow-wrap:normal}
.motion-rail{
  position:absolute;z-index:4;top:calc(var(--header-h) + var(--space-3));right:var(--page-gutter);
  display:grid;grid-template-columns:auto 1px;gap:var(--space-1);padding:var(--space-1)
}
.motion-nums{display:flex;flex-direction:column;justify-content:space-between;color:#b8b8b8;font-size:var(--micro-size);line-height:1.5;text-align:right}
.motion-nums span.active{color:#fff}
.rail-track{position:relative;width:1px;height:var(--space-16);background:#454545}
.rail-fill{position:absolute;left:0;top:0;width:1px;height:0;background:var(--red)}
.motion-end-actions{
  position:relative;z-index:5;grid-row:3;display:flex;flex-direction:column;gap:var(--space-1);min-width:0;
  opacity:0;visibility:hidden;transform:translateY(var(--space-2));transition:opacity .35s,transform .35s var(--ease),visibility .35s;pointer-events:none
}
/* Keep the final action row measured while hidden, so its arrival cannot cover a chapter. */
.motion-end-actions[hidden]{display:flex!important;visibility:hidden}
.motion-end-actions.show{opacity:1;visibility:visible;transform:none;pointer-events:auto}

@media(min-width:480px){
  .motion-stage{gap:var(--space-4)}
  .motion-end-actions{flex-direction:row;flex-wrap:wrap}
  .motion-end-actions .btn{flex:0 1 auto}
}
@media(min-width:768px){
  .motion-stage{padding-bottom:calc(var(--dock-clearance) + var(--space-4))}
  .motion-copy{max-width:60ch}
  .rail-track{height:calc(var(--space-16) + var(--space-4))}
}
@media(min-width:1024px){
  .motion{height:320vh}
  .motion-stage{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);grid-template-rows:minmax(0,1fr) auto;padding-bottom:var(--space-6)}
  .motion-copy{grid-column:1;max-width:none}
  .motion-end-actions{grid-column:2;grid-row:2;align-self:end;justify-self:end;justify-content:flex-end}
  .motion-rail{top:50%;transform:translateY(-50%)}
  .rail-track{height:calc(var(--space-16) + var(--space-8))}
}
@media(min-width:1440px){
  .motion-stage{padding-bottom:var(--space-8)}
  .motion-rail{right:max(var(--page-gutter),calc((100% - var(--content-max))/2 - var(--space-8)))}
}

/* Without the engine, an error, or reduced motion: one viewport of poster, no scroll runway. */
[data-ls-motion]:not(.motion-enhanced),.motion-static{height:auto}
[data-ls-motion]:not(.motion-enhanced) .motion-stage,.motion-static .motion-stage{position:relative;top:0}
[data-ls-motion]:not(.motion-enhanced) .motion-rail,.motion-static .motion-video,.motion-static .motion-rail{display:none}
.motion-static .motion-chapter{display:none}
.motion-static .motion-chapter.active{display:block;opacity:1;visibility:visible;transform:none}
@media(prefers-reduced-motion:reduce){
  .motion{height:auto}
  .motion-stage{position:relative;top:0}
  .motion-video,.motion-rail{display:none}
  .motion-chapter{display:none;transition:none}
  .motion-chapter.active{display:block;opacity:1;visibility:visible;transform:none}
  .motion-end-actions{transition:none}
}

/* Entry film: one scroll clock, a quiet final quarter for the mirror content. */
.motion-intro.hero{--motion-media-progress:0;display:block;padding:0;background:#050505}
.motion-intro .motion-stage{display:block;padding:0;outline:none}
.motion-intro .motion-poster,.motion-intro .motion-video{
  top:calc((var(--header-h) + var(--space-1)) * (1 - var(--motion-media-progress)));
  height:calc(52svh + (100% - 52svh) * var(--motion-media-progress));
  object-fit:cover;object-position:calc(65% - 16% * var(--motion-media-progress)) 50%
}
.motion-intro .motion-shade{background:linear-gradient(180deg,rgba(0,0,0,.24),transparent 24%,transparent 52%,rgba(0,0,0,.56))}
.motion-intro .motion-intro-heading{
  position:absolute;z-index:4;inset:auto var(--page-gutter) var(--space-3);
  width:auto;max-width:var(--content-max);margin-inline:auto;grid-area:auto
}
.motion-intro .motion-intro-heading h1{margin:0;max-width:100%;text-wrap:balance}
.motion-intro .hero-actions{max-width:none}
.motion-intro .motion-mirror{
  position:absolute;z-index:4;top:50%;left:49%;width:calc(100% - var(--page-gutter) * 2);
  max-width:var(--reading-width);text-align:center;transform:translate(-50%,-50%);grid-area:auto
}
.motion-intro .motion-mirror.active{transform:translate(-50%,-50%)}
.motion-mirror-surface{padding:var(--space-4) var(--space-2);background:radial-gradient(ellipse,rgba(5,5,5,.88) 0%,rgba(5,5,5,.74) 50%,rgba(5,5,5,0) 73%)}
.motion-intro .motion-mirror h2{max-width:18ch;margin-inline:auto;font-size:var(--type-3);line-height:var(--heading-leading);letter-spacing:-.04em;text-wrap:balance}
.motion-intro .motion-mirror p{max-width:28ch;margin:var(--space-2) auto 0;color:#fff;font-size:var(--body-size);line-height:var(--body-leading)}
.motion-intro .motion-mirror .motion-chapter-actions{margin-top:var(--space-3)}
.motion-intro .motion-mirror .btn{max-width:100%;width:auto}

@media(min-width:480px){
  .motion-intro .motion-intro-heading{bottom:var(--space-4)}
  .motion-intro .motion-mirror{width:min(76%,calc(var(--space-16) * 4))}
  .motion-intro .motion-mirror h2{font-size:var(--type-4)}
}
@media(min-width:768px){
  .motion-intro .motion-intro-heading{bottom:var(--space-5)}
  .motion-intro .motion-mirror{width:min(50%,calc(var(--space-16) * 3))}
}
@media(min-width:1024px){
  .motion-intro .motion-poster,.motion-intro .motion-video{top:0;height:100%;object-position:49% 50%}
  .motion-intro .motion-intro-heading{bottom:var(--space-6);left:max(var(--page-gutter),calc((100% - var(--content-max))/2));right:max(var(--page-gutter),calc((100% - var(--content-max))/2))}
  .motion-intro .motion-intro-heading h1{max-width:55%}
  .motion-intro .motion-mirror{width:28%;max-width:calc(var(--space-16) * 4)}
  .motion-intro .motion-mirror h2{font-size:clamp(var(--type-3),2.6vw,var(--type-5))}
}
@media(min-width:1440px){
  .motion-intro .motion-intro-heading{bottom:var(--space-8)}
}

/* A poster and normal document flow remain useful without JavaScript or motion. */
.motion-intro:not(.motion-enhanced),.motion-intro.motion-static{height:auto}
.motion-intro:not(.motion-enhanced) .motion-stage,.motion-intro.motion-static .motion-stage{min-height:calc(100svh - var(--admin-offset));height:auto;padding:calc(var(--header-h) + var(--space-4)) var(--page-gutter) var(--space-4)}
.motion-intro:not(.motion-enhanced) .motion-intro-heading,.motion-intro.motion-static .motion-intro-heading{position:relative;inset:auto;margin:0 auto;display:block;opacity:1;visibility:visible;transform:none}
.motion-intro.motion-static .motion-poster{inset:0;height:100%;opacity:.7}
.motion-intro.motion-static .motion-mirror{position:relative;top:auto;left:auto;width:100%;max-width:calc(var(--space-16) * 4);margin:var(--space-8) auto 0;display:block;opacity:1;visibility:visible;transform:none}
.motion-intro.motion-static .motion-intro-heading h1{max-width:100%}
.motion-intro.motion-static .motion-chapter-actions{pointer-events:auto}
@media(prefers-reduced-motion:reduce){
  .motion-intro .motion-chapter{transition:none}
}

/* 1.5.2 — mirror text: no dark halo behind the text, no darkening of the frame, no entry animation. */
.motion-mirror-surface{background:none;padding:var(--space-4) var(--space-2)}
.motion-intro .motion-mirror-surface::before{content:"";display:block;width:56px;height:2px;margin:0 auto var(--space-3);background:#ED172D}
.motion-intro .motion-mirror,.motion-intro .motion-mirror.active{transition:none}
/* 1.5.2 — light drop shadow on the mirror letters for contrast (solid black, 100 % opacity). */
.motion-intro .motion-mirror h2,.motion-intro .motion-mirror p{text-shadow:0 1px 2px #000,0 2px 10px #000}
/* 1.5.2 — phones & tablets (< 1024 px): the entry film starts framed further right so the vertical
   « COIFFURE » sign stays in frame, then rejoins the original camera path from ~37 % of the move onward
   (identical framing afterwards). Size unchanged; desktop (>= 1024 px) unchanged. */
@media (max-width:1023.98px){
  /* Original size kept. At the start the storefront (x 592–1804 of 1920, centre 62.4 %) is centred on screen,
     computed in lengths (image width at start = 52svh × 16/9); on phones too narrow for the whole storefront the
     « COIFFURE » sign keeps priority (its right edge stays 2 px inside the screen). Clamped so the image always covers.
     The framing then blends into the original camera path by 37 % of the move and ends on the mirror centre (48.6 %). */
  .motion-intro .motion-poster,.motion-intro .motion-video{
    object-position:calc(
      clamp(calc(100vw - 92.4444svh), min(calc(50vw - 57.6853svh), calc(100vw - 2px - 86.858svh)), 0px) * (1 - clamp(0, var(--motion-media-progress) / 0.368, 1))
      + (64.6% - 16% * var(--motion-media-progress)) * clamp(0, var(--motion-media-progress) / 0.368, 1)
    ) 50%}
}