/* Physical hair material. All scenery, type and booking layout remain owned by the page. */
.hair-stage{position:relative;isolation:isolate;width:100%;max-width:760px;aspect-ratio:700/650;pointer-events:none}
.hair-stage .hair-art{display:block;width:100%;height:100%;overflow:visible;--ha-base:#71495e;--ha-crown:#765469;--ha-side:#613b52;--ha-fibre:#edcfdf;--ha-shade:#3f2237;--ha-edge:#bca2b5;--ha-deep:#392235;--ha-lit:#b388a2;--ha-high:#f1d7e5;--ha-paper:var(--hair-paper,#f7f4f1)}
.hair-stage .hair-art[data-hair-mode="farbe"]{--ha-base:#a56a62;--ha-crown:#b88172;--ha-side:#713e55;--ha-fibre:#f7d3bd;--ha-shade:#663744;--ha-edge:#d3a6a0;--ha-deep:#4f2d40;--ha-lit:#d2a08b;--ha-high:#ffe1c5}
.hair-stage .hair-art[data-hair-mode="pflege"]{--ha-base:#81667a;--ha-crown:#a1879d;--ha-side:#735367;--ha-fibre:#ecdbed;--ha-shade:#594255;--ha-edge:#ceb9ce;--ha-deep:#493648;--ha-lit:#bba4b9;--ha-high:#f0dfee}
.hair-stage .ha-crown-tone{fill:var(--ha-crown)}
.hair-stage .ha-colour-panel{fill:var(--ha-side)}
.hair-stage .ha-fibre{stroke:var(--ha-fibre)}
.hair-stage .ha-shadow-fibre{stroke:var(--ha-shade)}
.hair-stage .ha-hair-edge{stroke:var(--ha-edge)}
.hair-stage .ha-faint-line,.hair-stage .ha-form-loose{stroke:var(--ha-base)}
.hair-stage .ha-parting{stroke:var(--ha-paper)}
.hair-stage .ha-stop-deep{stop-color:var(--ha-deep)}
.hair-stage .ha-stop-base{stop-color:var(--ha-base)}
.hair-stage .ha-stop-side{stop-color:var(--ha-side)}
.hair-stage .ha-stop-lit{stop-color:var(--ha-lit)}
.hair-stage .ha-micro-fibres,.hair-stage .ha-cut-contour{stroke:var(--ha-high)}
.hair-stage .ha-crown-tone,.hair-stage .ha-colour-panel{transition:fill .6s ease}
.hair-stage .ha-strand-left{transform-origin:340px 140px}
.hair-stage .ha-strand-right{transform-origin:380px 115px}
.hair-stage .ha-strand-centre{transform-origin:375px 90px}
.hair-stage .ha-strand-left,.hair-stage .ha-strand-right{transition:transform 1.1s cubic-bezier(.22,.68,.2,1)}
.hair-stage .hair-art[data-hair-mode="pflege"] .ha-strand-left{transform:rotate(1.8deg) translate(-4px,3px)}
.hair-stage .hair-art[data-hair-mode="pflege"] .ha-strand-right{transform:rotate(-1.6deg) translate(4px,3px)}
.hair-stage .ha-sheen,.hair-stage .ha-form-loose,.hair-stage .ha-cut-contour,.hair-stage .ha-colour-sequence{opacity:0;pointer-events:none}

/* FORM: loose fibres gather, masses find their place, the cut is drawn last. */
.hair-stage.is-playing[data-hair-mode="form"] .ha-strand-left{animation:ha-form-left 3.8s cubic-bezier(.2,.7,.25,1) both}
.hair-stage.is-playing[data-hair-mode="form"] .ha-strand-right{animation:ha-form-right 4.1s cubic-bezier(.2,.7,.25,1) both}
.hair-stage.is-playing[data-hair-mode="form"] .ha-strand-centre{animation:ha-crown-arrive 3.2s cubic-bezier(.2,.7,.25,1) both}
.hair-stage.is-playing[data-hair-mode="form"] .ha-form-loose{opacity:1}
.hair-stage.is-playing[data-hair-mode="form"] .ha-loose-a{animation:ha-gather-left 3.8s ease both;transform-origin:360px 76px}
.hair-stage.is-playing[data-hair-mode="form"] .ha-loose-b{animation:ha-gather-right 4.1s .15s ease both;transform-origin:372px 78px}
.hair-stage.is-playing[data-hair-mode="form"] .ha-loose-c{animation:ha-gather-inner 3.6s .25s ease both;transform-origin:352px 99px}
.hair-stage.is-playing[data-hair-mode="form"] .ha-cut-contour{opacity:1}
.hair-stage.is-playing[data-hair-mode="form"] .ha-cut-contour path{stroke-dasharray:100;animation:ha-precise-cut 2.6s 1.7s cubic-bezier(.4,0,.2,1) both}
.hair-stage.is-playing[data-hair-mode="form"] .ha-micro-fibres{animation:ha-find-detail 3.4s .4s ease both}

/* FARBE: pigment travels from the parting along the actual strand paths. */
.hair-stage.is-playing[data-hair-mode="farbe"] .ha-colour-sequence{animation:ha-colour-sequence 4.6s linear both}
.hair-stage.is-playing[data-hair-mode="farbe"] .ha-colour-underpaint{animation:ha-underpaint 4.1s ease both}
.hair-stage.is-playing[data-hair-mode="farbe"] .ha-colour-flow{animation:ha-pigment-flow 3.5s cubic-bezier(.43,.04,.3,.97) both}
.hair-stage.is-playing[data-hair-mode="farbe"] .ha-colour-flow-right{animation-delay:.25s}
.hair-stage.is-playing[data-hair-mode="farbe"] .ha-sheen{animation:ha-colour-light 3.9s .3s ease both}

/* PFLEGE: a slow opening gesture, followed by one quiet comb of light. */
.hair-stage.is-playing[data-hair-mode="pflege"] .ha-strand-left{animation:ha-care-left 4.5s ease-in-out both}
.hair-stage.is-playing[data-hair-mode="pflege"] .ha-strand-right{animation:ha-care-right 4.5s ease-in-out both}
.hair-stage.is-playing[data-hair-mode="pflege"] .ha-sheen{animation:ha-care-light 4.3s .15s ease-in-out both}
.hair-stage.is-playing[data-hair-mode="pflege"] .ha-strand-right .ha-sheen{animation-delay:.4s}
.hair-stage.is-paused *{animation-play-state:paused!important;transition:none!important}
.hair-stage.is-reduced *{animation:none!important;transition:none!important}
.hair-stage.is-reduced .ha-sheen,.hair-stage.is-reduced .ha-form-loose,.hair-stage.is-reduced .ha-cut-contour,.hair-stage.is-reduced .ha-colour-sequence{opacity:0!important}
.hair-stage--small{max-width:340px}
.hair-stage--small .ha-shadow-fibre{opacity:.18}
.hair-stage--small .ha-fibre{stroke-width:1.05}
.hair-stage button,.hair-stage a{pointer-events:auto}
@keyframes ha-form-left{from{translate:-16px 9px;rotate:-4deg}to{translate:0 0;rotate:0deg}}
@keyframes ha-form-right{from{translate:20px 12px;rotate:4.5deg}to{translate:0 0;rotate:0deg}}
@keyframes ha-crown-arrive{from{translate:0 6px;opacity:.72}to{translate:0 0;opacity:1}}
@keyframes ha-gather-left{0%{transform:translate(-31px,11px) rotate(-6deg);opacity:0}12%{opacity:.8}65%{opacity:.55}90%,100%{transform:none;opacity:0}}
@keyframes ha-gather-right{0%{transform:translate(35px,14px) rotate(6deg);opacity:0}12%{opacity:.75}65%{opacity:.5}90%,100%{transform:none;opacity:0}}
@keyframes ha-gather-inner{0%{transform:translate(-23px,6px) rotate(-5deg);opacity:0}16%{opacity:.7}72%{opacity:.4}100%{transform:none;opacity:0}}
@keyframes ha-precise-cut{0%{stroke-dashoffset:100;opacity:0}15%{opacity:.9}74%{stroke-dashoffset:0;opacity:.85}100%{stroke-dashoffset:0;opacity:0}}
@keyframes ha-find-detail{from{opacity:0}to{opacity:1}}
@keyframes ha-colour-sequence{0%,72%{opacity:1}100%{opacity:0}}
@keyframes ha-underpaint{0%,24%{opacity:1}77%,100%{opacity:0}}
@keyframes ha-pigment-flow{0%,8%{stroke-dashoffset:100}100%{stroke-dashoffset:0}}
@keyframes ha-colour-light{0%,100%{opacity:0;translate:0 0}35%{opacity:.2}80%{opacity:.06;translate:0 210px}}
@keyframes ha-care-left{0%{translate:0 0;rotate:-1.5deg}46%{translate:-7px 5px;rotate:-2.3deg}100%{translate:0 0;rotate:0deg}}
@keyframes ha-care-right{0%{translate:0 0;rotate:1.2deg}46%{translate:8px 5px;rotate:2.1deg}100%{translate:0 0;rotate:0deg}}
@keyframes ha-care-light{0%,100%{opacity:0;translate:0 -70px}26%{opacity:.23}70%{opacity:.12;translate:0 205px}95%{opacity:0;translate:0 260px}}
@media(max-width:700px){
  .hair-stage{max-width:530px}
  .hair-stage--small{max-width:260px}
  .hair-stage .ha-micro-fibres path:nth-child(even){display:none}
  .hair-stage.is-playing .ha-strand-left,.hair-stage.is-playing .ha-strand-right{animation-duration:3s}
  .hair-stage.is-playing .ha-strand-centre{animation-duration:2.6s}
  .hair-stage.is-playing .ha-form-loose path{animation-duration:2.8s;animation-delay:0s}
  .hair-stage.is-playing .ha-cut-contour path{animation-duration:1.7s;animation-delay:1.3s}
  .hair-stage.is-playing .ha-micro-fibres{animation-duration:2.4s;animation-delay:.2s}
  .hair-stage.is-playing .ha-colour-sequence{animation-duration:3.2s}
  .hair-stage.is-playing .ha-colour-underpaint{animation-duration:3s}
  .hair-stage.is-playing .ha-colour-flow{animation-duration:2.7s;animation-delay:0s}
  .hair-stage.is-playing .ha-sheen{animation-duration:3s;animation-delay:.1s}
}
@media(prefers-reduced-motion:reduce){
  .hair-stage *{animation:none!important;transition:none!important}
  .hair-stage .ha-sheen,.hair-stage .ha-form-loose,.hair-stage .ha-cut-contour,.hair-stage .ha-colour-sequence{opacity:0!important}
}