/* Tohar Brands — the moving hero. Everything is scoped under .tb-sl, so nothing else
   on the page is touched. Delete this file, tohar-slider.js and the
   <section class="tb-sl"> block in index.html to undo. */

@font-face {
  font-family: "Tohar Display";
  src: url("wp-content/uploads/fonts/PlayfairDisplay.ttf") format("truetype-variations");
  font-weight: 400 700;
  font-display: swap;
}

.tb-sl {
  --tb-sl-dwell: 5600ms;
  --tb-sl-glide: 800ms;
  direction: ltr;               /* the page is RTL; the rail is not */
  position: relative;
  width: 100%;
  overflow: hidden;
  /* the stone the lookbook was shot against, so a picture that is still coming in
     does not flash black */
  background: #e6e2db;
  isolation: isolate;
  touch-action: pan-y;
}

.tb-sl__viewport {
  position: relative;
  width: 100%;
  height: min(88vh, 880px);
  overflow: hidden;
}

.tb-sl__track {
  display: flex;
  width: 100%;
  height: 100%;
  transform: translate3d(0, 0, 0);
  transition: transform var(--tb-sl-glide) cubic-bezier(.62, .02, .28, 1);
  will-change: transform;
}

.tb-sl__slide {
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* the theme carries a blanket `img{width:100%!important;height:auto!important}`,
   so the slide picture has to insist */
.tb-sl__img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover;
  object-position: center top;
  display: block;
  transform: scale(1.06);
  transition: transform 7s cubic-bezier(.22, .61, .36, 1);
}

/* the picture eases out of its crop while the slide is up — the drift the reference has */
.tb-sl__slide.is-active .tb-sl__img { transform: scale(1) }

/* a film fills its slide the way a picture does. It carries its own movement, so it
   gets none of the drift, and it is framed from the middle rather than the top -
   these were shot on a phone with the garment in the centre of the frame. */
.tb-sl__film {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover;
  object-position: center;
  display: block;
  position: relative;
  z-index: 1;
  background: transparent;
}

/* On a phone the frame is upright and the film fills it. A desktop band is far
   wider than a phone clip is, and filling it would mean cropping away everything
   but a strip through the middle - a lace, a sleeve. So from tablet width up the
   film is shown whole, standing in the middle at full height, and the space beside
   it is its own first frame blown up and blurred out. */
@media (min-width: 700px) {
  .tb-sl__slide--film .tb-sl__film { object-fit: contain }

  .tb-sl__slide--film::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--tb-poster) center / cover no-repeat;
    filter: blur(42px) saturate(.8) brightness(.68);
    transform: scale(1.18);
    z-index: 0;
  }
}

.tb-sl__shade {
  position: absolute;
  inset: 0;
  /* a film is a positioned layer of its own, so the wash has to be told to sit on
     top of it - without this the heading stands on bare picture */
  z-index: 2;
  background: linear-gradient(180deg,
      rgba(6, 6, 6, .28) 0%,
      rgba(6, 6, 6, 0) 26%,
      rgba(6, 6, 6, .06) 52%,
      rgba(6, 6, 6, .52) 84%,
      rgba(6, 6, 6, .72) 100%);
  pointer-events: none;
}

/* ---------- the copy ---------- */

.tb-sl__copy {
  position: absolute;
  left: 50%;
  bottom: 78px;
  transform: translateX(-50%);
  width: min(92%, 760px);
  text-align: center;
  color: #fff;
  z-index: 3;
}

.tb-sl__title,
.tb-sl__btn {
  opacity: 0;
  transform: translateY(16px);
}

.tb-sl__slide.is-active .tb-sl__title,
.tb-sl__slide.is-active .tb-sl__btn {
  animation: tb-sl-rise .9s cubic-bezier(.22, .61, .36, 1) forwards;
}
.tb-sl__slide.is-active .tb-sl__title { animation-delay: .12s }
.tb-sl__slide.is-active .tb-sl__btn { animation-delay: .28s }

@keyframes tb-sl-rise {
  to { opacity: 1; transform: translateY(0) }
}

.tb-sl__title {
  margin: 0;
  font-family: "Tohar Display", "Playfair Display", Georgia, serif;
  font-weight: 500;
  font-size: clamp(34px, 5.4vw, 68px);
  line-height: 1.06;
  letter-spacing: .01em;
  color: #fff;
  text-shadow: 0 2px 26px rgba(0, 0, 0, .38);
}

.tb-sl__btn {
  display: inline-block;
  margin-top: 26px;
  padding: 13px 34px;
  border: 1px solid rgba(255, 255, 255, .85);
  border-radius: 0;
  background: transparent;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background .28s ease, color .28s ease, border-color .28s ease;
}

.tb-sl__btn:hover,
.tb-sl__btn:focus-visible {
  background: #fff;
  border-color: #fff;
  color: #101010;
}

/* ---------- the segments at the foot ---------- */

.tb-sl__dots {
  position: absolute;
  left: 50%;
  bottom: 30px;
  transform: translateX(-50%);
  display: flex;
  gap: 7px;
  z-index: 4;
}

.tb-sl__seg {
  width: 34px;
  height: 12px;
  padding: 5px 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  line-height: 0;
}

.tb-sl__seg i {
  display: block;
  width: 100%;
  height: 2px;
  background: rgba(255, 255, 255, .34);
  position: relative;
  overflow: hidden;
}

.tb-sl__seg i::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 0;
  background: #fff;
}

.tb-sl__seg.is-active i::after { width: 100% }

.tb-sl.is-playing .tb-sl__seg.is-active i::after {
  width: 0;
  animation: tb-sl-fill var(--tb-sl-dwell) linear forwards;
}

/* a hand on the picture, or the pause key, holds the fill where it stands */
.tb-sl.is-held .tb-sl__seg.is-active i::after,
.tb-sl.is-hover .tb-sl__seg.is-active i::after { animation-play-state: paused }

@keyframes tb-sl-fill {
  from { width: 0 }
  to { width: 100% }
}

/* ---------- arrows and the pause key ---------- */

.tb-sl__nav {
  position: absolute;
  top: 50%;
  width: 46px;
  height: 46px;
  margin-top: -23px;
  border: 0;
  background: transparent;
  cursor: pointer;
  opacity: 0;
  transition: opacity .3s ease;
  z-index: 5;
}

.tb-sl:hover .tb-sl__nav,
.tb-sl__nav:focus-visible { opacity: 1 }

.tb-sl__nav::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 13px;
  height: 13px;
  margin: -7px 0 0 -7px;
  border-left: 1.6px solid #fff;
  border-bottom: 1.6px solid #fff;
  filter: drop-shadow(0 1px 6px rgba(0, 0, 0, .5));
}

.tb-sl__nav--prev { left: 12px }
.tb-sl__nav--prev::before { transform: rotate(45deg) }
.tb-sl__nav--next { right: 12px }
.tb-sl__nav--next::before { transform: rotate(-135deg) }

.tb-sl__pause {
  position: absolute;
  right: 14px;
  top: 50%;
  width: 30px;
  height: 30px;
  margin-top: -15px;
  border: 0;
  background: transparent;
  cursor: pointer;
  opacity: .72;
  transition: opacity .25s ease;
  z-index: 5;
}

.tb-sl__pause:hover { opacity: 1 }

/* two bars, and one triangle once it is pressed */
.tb-sl__pause::before,
.tb-sl__pause::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 2px;
  height: 14px;
  margin-top: -7px;
  background: #fff;
  filter: drop-shadow(0 1px 5px rgba(0, 0, 0, .5));
}
.tb-sl__pause::before { left: 11px }
.tb-sl__pause::after { left: 17px }

.tb-sl__pause[aria-pressed="true"]::before {
  left: 11px;
  width: 0;
  height: 0;
  margin-top: -7px;
  background: transparent;
  border-left: 11px solid #fff;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
}
.tb-sl__pause[aria-pressed="true"]::after { display: none }

/* ---------- phones ---------- */

@media (max-width: 900px) {
  .tb-sl__viewport { height: min(86vh, 720px) }
  .tb-sl__nav { display: none }
  /* on a phone the finger is the control: a swipe moves the rail and holding it
     still stops it. The pause key only ever got hit by accident, and once it was
     pressed a play triangle sat over the picture. */
  .tb-sl__pause { display: none }
  .tb-sl__copy { bottom: 66px; width: 88% }
  .tb-sl__btn { margin-top: 20px; padding: 12px 28px; font-size: 11px }
  .tb-sl__dots { bottom: 24px; gap: 6px }
  .tb-sl__seg { width: 26px }
}

@media (prefers-reduced-motion: reduce) {
  .tb-sl__track { transition: none }
  .tb-sl__img { transition: none; transform: none }
  /* a film that is never played shows its poster, which is what this asks for */
  .tb-sl__slide.is-active .tb-sl__title,
  .tb-sl__slide.is-active .tb-sl__btn { animation: none; opacity: 1; transform: none }
  .tb-sl.is-playing .tb-sl__seg.is-active i::after { animation: none; width: 100% }
}


/* the accessibility panel's "stop animations" holds the rail where it is */
html.tb-a11y-still .tb-sl__track,
html.tb-a11y-still .tb-sl__img { transition: none }
html.tb-a11y-still .tb-sl__img { transform: none }
html.tb-a11y-still .tb-sl.is-playing .tb-sl__seg.is-active i::after { animation: none; width: 100% }
html.tb-a11y-still .tb-sl__slide.is-active .tb-sl__title,
html.tb-a11y-still .tb-sl__slide.is-active .tb-sl__btn { animation: none; opacity: 1; transform: none }

/* ---------- what came over from the old hero ---------- */

/* the marquee used to be pinned to the bottom of the hero; the band below keeps it
   in exactly the same arrangement - a relative box with the strip laid over it - so
   the running animation composites the way it did before */
.tb-strip {
  position: relative;
  width: 100%;
  height: 58px;
  background: #0c0c0c;
}
.tb-strip .tb-hero__brands {
  border-top: 0;
  padding: 17px 0;
}

/* the headline the hero carried, kept for search engines only */
.tb-sl__seo {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}