/* =========================================================
   LUXOTEL PAGE TITLES & MOTION
   Runtime V1
   ========================================================= */

.lux-motion-title{
  position:relative;
  isolation:isolate;
}

.lux-motion-title.ltm-has-font{
  font-family:var(--ltm-font)!important;
}

.lux-motion-title.ltm-has-desktop-size{
  font-size:var(--ltm-desktop-size)!important;
}

.lux-motion-title.ltm-has-weight{
  font-weight:var(--ltm-weight)!important;
}

.lux-motion-title.ltm-is-italic{
  font-style:italic!important;
}

.lux-motion-title.ltm-uppercase{
  text-transform:uppercase!important;
}

.lux-motion-title.ltm-has-spacing{
  letter-spacing:var(--ltm-letter-spacing)!important;
}

.lux-motion-title.ltm-has-color{
  color:var(--ltm-color)!important;
}

.lux-motion-title.ltm-align-left{
  text-align:left!important;
}

.lux-motion-title.ltm-align-center{
  text-align:center!important;
}

.lux-motion-title.ltm-align-right{
  text-align:right!important;
}


/* ---------------- ART STYLES ---------------- */

.ltm-art-interlocked{
  letter-spacing:-0.06em!important;
}

.ltm-art-tight-luxury{
  letter-spacing:-0.035em!important;
  line-height:.92!important;
}

.ltm-art-wide-editorial{
  letter-spacing:.12em!important;
}

.ltm-art-outline{
  -webkit-text-fill-color:transparent;
  -webkit-text-stroke:1px currentColor;
}

.ltm-art-soft-shadow{
  text-shadow:
    0 1px 0 rgba(255,255,255,.55),
    0 8px 22px rgba(16,45,79,.18);
}

.ltm-art-engraved{
  text-shadow:
    0 1px 0 rgba(255,255,255,.82),
    0 -1px 0 rgba(16,45,79,.16),
    0 8px 18px rgba(16,45,79,.16);
}

.ltm-art-letterpress{
  text-shadow:
    0 1px 0 rgba(255,255,255,.9),
    0 -1px 0 rgba(0,0,0,.14);
}

.ltm-art-offset{
  transform:skewX(-4deg);
}

.ltm-art-luxury-box{
  width:max-content;
  max-width:100%;
  margin-left:auto!important;
  margin-right:auto!important;
  padding:.18em .42em;
  border:1px solid rgba(185,134,47,.55);
}

.ltm-art-deco{
  width:max-content;
  max-width:calc(100% - 50px);
  margin-left:auto!important;
  margin-right:auto!important;
  padding:.16em .7em;
}

.ltm-art-deco::before,
.ltm-art-deco::after{
  content:"";
  position:absolute;
  top:50%;
  width:34px;
  height:1px;
  background:linear-gradient(
    90deg,
    transparent,
    #b9862f
  );
}

.ltm-art-deco::before{
  right:100%;
  margin-right:10px;
}

.ltm-art-deco::after{
  left:100%;
  margin-left:10px;
  transform:scaleX(-1);
}


/* ---------------- DECORATIONS ---------------- */

.ltm-decoration-underline::after{
  content:"";
  display:block;
  width:min(110px,42%);
  height:1px;
  margin:.28em auto 0;
  background:#b9862f;
}

.ltm-decoration-diamond::after{
  content:"◇";
  display:block;
  margin:.18em auto 0;
  color:#b9862f;
  font-size:.32em;
  line-height:1;
  letter-spacing:0;
}

.ltm-decoration-double-line::after{
  content:"";
  display:block;
  width:min(150px,52%);
  height:4px;
  margin:.3em auto 0;
  border-top:1px solid #b9862f;
  border-bottom:1px solid #b9862f;
}

.ltm-decoration-gold-bar::after{
  content:"";
  display:block;
  width:72px;
  height:3px;
  margin:.28em auto 0;
  border-radius:999px;
  background:#b9862f;
}

.ltm-decoration-side-lines{
  display:flex!important;
  align-items:center;
  justify-content:center;
  gap:.35em;
}

.ltm-decoration-side-lines::before,
.ltm-decoration-side-lines::after{
  content:"";
  width:44px;
  max-width:10vw;
  height:1px;
  background:#b9862f;
}


/* ---------------- SPLIT MOTION ELEMENTS ---------------- */

.ltm-char,
.ltm-word-motion{
  display:inline-block;
  will-change:transform,opacity,filter;
}

.ltm-space{
  display:inline-block;
  width:.28em;
}


/* ---------------- ENTRANCE MOTION ---------------- */

@keyframes ltmFade{
  from{opacity:0}
  to{opacity:1}
}

@keyframes ltmFadeUp{
  from{opacity:0;transform:translateY(24px)}
  to{opacity:1;transform:translateY(0)}
}

@keyframes ltmFadeDown{
  from{opacity:0;transform:translateY(-24px)}
  to{opacity:1;transform:translateY(0)}
}

@keyframes ltmSlideLeft{
  from{opacity:0;transform:translateX(34px)}
  to{opacity:1;transform:translateX(0)}
}

@keyframes ltmSlideRight{
  from{opacity:0;transform:translateX(-34px)}
  to{opacity:1;transform:translateX(0)}
}

@keyframes ltmZoom{
  from{opacity:0;transform:scale(.86)}
  to{opacity:1;transform:scale(1)}
}

@keyframes ltmBlur{
  from{opacity:0;filter:blur(12px);transform:scale(.97)}
  to{opacity:1;filter:blur(0);transform:scale(1)}
}

@keyframes ltmDrop{
  from{
    opacity:0;
    transform:translateY(-46px) rotate(-4deg);
  }
  to{
    opacity:1;
    transform:translateY(0) rotate(0);
  }
}

@keyframes ltmRise{
  from{
    opacity:0;
    transform:translateY(42px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

.ltm-motion-fade{
  animation:ltmFade var(--ltm-duration,800ms) ease both;
  animation-delay:var(--ltm-delay,0ms);
}

.ltm-motion-fade-up{
  animation:ltmFadeUp var(--ltm-duration,800ms) cubic-bezier(.2,.7,.2,1) both;
  animation-delay:var(--ltm-delay,0ms);
}

.ltm-motion-fade-down{
  animation:ltmFadeDown var(--ltm-duration,800ms) cubic-bezier(.2,.7,.2,1) both;
  animation-delay:var(--ltm-delay,0ms);
}

.ltm-motion-slide-left{
  animation:ltmSlideLeft var(--ltm-duration,800ms) cubic-bezier(.2,.7,.2,1) both;
  animation-delay:var(--ltm-delay,0ms);
}

.ltm-motion-slide-right{
  animation:ltmSlideRight var(--ltm-duration,800ms) cubic-bezier(.2,.7,.2,1) both;
  animation-delay:var(--ltm-delay,0ms);
}

.ltm-motion-zoom{
  animation:ltmZoom var(--ltm-duration,800ms) cubic-bezier(.2,.7,.2,1) both;
  animation-delay:var(--ltm-delay,0ms);
}

.ltm-motion-blur{
  animation:ltmBlur var(--ltm-duration,900ms) ease both;
  animation-delay:var(--ltm-delay,0ms);
}

.ltm-motion-letters-drop .ltm-char,
.ltm-motion-letters-drop .ltm-word-motion{
  animation:ltmDrop var(--ltm-duration,800ms) cubic-bezier(.18,.76,.27,1.08) both;
  animation-delay:
    calc(
      var(--ltm-delay,0ms) +
      var(--ltm-index,0) * var(--ltm-stagger,55ms)
    );
}

.ltm-motion-letters-rise .ltm-char,
.ltm-motion-letters-rise .ltm-word-motion{
  animation:ltmRise var(--ltm-duration,800ms) cubic-bezier(.2,.72,.25,1) both;
  animation-delay:
    calc(
      var(--ltm-delay,0ms) +
      var(--ltm-index,0) * var(--ltm-stagger,55ms)
    );
}


@media(max-width:650px){
  .lux-motion-title.ltm-has-mobile-size{
    font-size:var(--ltm-mobile-size)!important;
  }
}


@media(prefers-reduced-motion:reduce){
  .lux-motion-title,
  .lux-motion-title *,
  .ltm-char,
  .ltm-word-motion{
    animation:none!important;
    transition:none!important;
    transform:none!important;
    filter:none!important;
    opacity:1!important;
  }
}
