/* =========================================================
   SL OPTICS V102 — PRIMARY FOCUS
   Based on supplied sticky convergence scene.
========================================================= */
.slo-focus,.slo-focus *{box-sizing:border-box}
.slo-focus{
  --focus-ink:#FFD700;
  --focus-orange:#FFD700;
  --focus-muted:rgba(255,255,255,.48);
  position:relative;
  width:100%;
  height:350vh;
  overflow:clip;
  isolation:isolate;
  background:#010101;
  color:#fff;
}
.slo-focus__sticky{
  position:sticky;
  top:0;
  width:100%;
  height:100vh;
  min-height:650px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  overflow:hidden;
  background:#010101;
}
.slo-focus__title{
  position:relative;
  margin:0;
  padding:0;
  color:#fff;
  font:400 15.6vw/.78 "PPNeueMachina",Arial,sans-serif;
  letter-spacing:-.065em;
  text-transform:uppercase;
  white-space:nowrap;
  transform-style:preserve-3d;
  will-change:transform;
  pointer-events:none;
}
.slo-focus__title--a{z-index:3;transform:translate3d(-80%,0,0)}
.slo-focus__title--b{z-index:0;transform:translate3d(31%,0,0)}
.slo-focus__title--c{z-index:3;transform:translate3d(174%,0,0)}

.slo-focus__reticle{
  position:absolute;
  left:50%;
  top:50%;
  width:27.78vw;
  height:27.78vw;
  max-width:none;
  color:var(--focus-orange);
  opacity:0;
  transform:translate3d(-50%,-50%,0) scale3d(.72,.72,1) rotateZ(0deg);
  transform-origin:center;
  will-change:transform,opacity;
  pointer-events:none;
  z-index:1;
}
.slo-focus__reticle circle,
.slo-focus__reticle line{vector-effect:non-scaling-stroke}

.slo-focus__label{
  position:absolute;
  z-index:5;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;
  opacity:0;
  pointer-events:none;
  will-change:opacity;
  font-family:"VelaSans",Arial,sans-serif;
  text-transform:uppercase;
}
.slo-focus__label--top{
  top:31%;
  color:var(--focus-muted);
  font-size:11px;
  line-height:.9;
  letter-spacing:.08em;
}
.slo-focus__label--bottom{
  bottom:25.5%;
  color:#fff;
  text-align:center;
  font-size:13px;
  font-weight:500;
  line-height:1.2;
  letter-spacing:.035em;
}
.slo-focus__square{
  display:block;
  width:6px;
  height:6px;
  flex:0 0 6px;
  background:var(--focus-orange);
}

/* bracket CTA — same geometry as supplied block, SL Optics colors/fonts */
.slo-focus__button{
  position:absolute!important;
  left:50%!important;
  bottom:2.2%!important;
  z-index:100!important;
  min-height:48px;
  margin:0!important;
  padding:8px 18px!important;
  display:inline-flex!important;
  justify-content:center;
  align-items:center;
  gap:15px;
  opacity:0;
  transform:translate3d(-50%,40px,0);
  color:#fff!important;
  background:transparent!important;
  border:0!important;
  text-decoration:none!important;
  text-transform:uppercase;
  font:500 12px/1 "VelaSans",Arial,sans-serif!important;
  letter-spacing:.07em;
  white-space:nowrap;
  pointer-events:none;
  will-change:opacity,transform;
}
.slo-focus__button-text{position:relative;z-index:2;padding:0 2px}
.slo-focus__bracket{
  position:relative;
  display:block;
  width:10px;
  height:34px;
  flex:0 0 10px;
}
.slo-focus__bracket::before,
.slo-focus__bracket::after{
  content:"";
  position:absolute;
  width:10px;
  height:1px;
  background:var(--focus-ink);
  transition:width .3s ease,background-color .3s ease;
}
.slo-focus__bracket--left{border-left:1px solid var(--focus-ink)}
.slo-focus__bracket--left::before{left:0;top:0}
.slo-focus__bracket--left::after{left:0;bottom:0}
.slo-focus__bracket--right{border-right:1px solid var(--focus-ink)}
.slo-focus__bracket--right::before{right:0;top:0}
.slo-focus__bracket--right::after{right:0;bottom:0}
.slo-focus__button:hover,
.slo-focus__button:focus-visible{color:var(--focus-orange)!important;outline:none}
.slo-focus__button:hover .slo-focus__bracket--left,
.slo-focus__button:focus-visible .slo-focus__bracket--left{border-left-color:var(--focus-orange)}
.slo-focus__button:hover .slo-focus__bracket--right,
.slo-focus__button:focus-visible .slo-focus__bracket--right{border-right-color:var(--focus-orange)}
.slo-focus__button:hover .slo-focus__bracket::before,
.slo-focus__button:hover .slo-focus__bracket::after,
.slo-focus__button:focus-visible .slo-focus__bracket::before,
.slo-focus__button:focus-visible .slo-focus__bracket::after{
  width:18px;
  background:var(--focus-orange);
}

.slo-focus__mobile{display:none}

@media(max-width:991px) and (min-width:480px){
  .slo-focus__title{font-size:16.4vw}
  .slo-focus__reticle{width:34vw;height:34vw}
  .slo-focus__button{bottom:3%!important}
  .slo-focus__label--bottom{bottom:24%}
}

@media(max-width:479px){
  .slo-focus{height:auto;overflow:hidden}
  .slo-focus__sticky{display:none}
  .slo-focus__mobile{
    width:100%;
    min-height:84vh;
    padding:88px 15px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    background:#010101;
    color:#fff;
    opacity:0;
    transform:translateY(24px);
    transition:opacity .65s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1);
  }
  .slo-focus__mobile.is-visible{opacity:1;transform:none}
  .slo-focus__mobile-label{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    color:var(--focus-muted);
    font:500 11px/1 "VelaSans",Arial,sans-serif;
    letter-spacing:.08em;
    text-transform:uppercase;
    opacity:0;
    transform:translateY(12px);
  }
  .slo-focus__mobile-title{
    margin:40px 0 48px;
    width:100%;
    max-width:100%;
    color:#fff;
    text-align:center;
    font:400 clamp(68px,19.5vw,84px)/.84 "PPNeueMachina",Arial,sans-serif;
    letter-spacing:-.065em;
    text-transform:uppercase;
    opacity:0;
    transform:translateY(18px);
  }
  .slo-focus__mobile-copy{
    color:#fff;
    text-align:center;
    font:500 12px/1.3 "VelaSans",Arial,sans-serif;
    letter-spacing:.035em;
    text-transform:uppercase;
    opacity:0;
    transform:translateY(16px);
  }
  .slo-focus__mobile-button{
    margin-top:45px;
    min-height:48px;
    padding:0 26px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:1px solid var(--focus-ink);
    border-radius:4px;
    color:#fff!important;
    background:#010101;
    text-decoration:none!important;
    font:500 12px/1 "VelaSans",Arial,sans-serif;
    letter-spacing:.06em;
    text-transform:uppercase;
    opacity:0;
    transform:translateY(16px);
  }
  .slo-focus__mobile.is-visible .slo-focus__mobile-label,
  .slo-focus__mobile.is-visible .slo-focus__mobile-title,
  .slo-focus__mobile.is-visible .slo-focus__mobile-copy,
  .slo-focus__mobile.is-visible .slo-focus__mobile-button{
    opacity:1;
    transform:none;
    transition:opacity .55s ease,transform .75s cubic-bezier(.16,1,.3,1);
  }
  .slo-focus__mobile.is-visible .slo-focus__mobile-label{transition-delay:.06s}
  .slo-focus__mobile.is-visible .slo-focus__mobile-title{transition-delay:.14s}
  .slo-focus__mobile.is-visible .slo-focus__mobile-copy{transition-delay:.24s}
  .slo-focus__mobile.is-visible .slo-focus__mobile-button{transition-delay:.34s}
}

@media(prefers-reduced-motion:reduce){
  .slo-focus__title,
  .slo-focus__reticle,
  .slo-focus__button,
  .slo-focus__mobile,
  .slo-focus__mobile *{
    transition:none!important;
    animation:none!important;
  }
}


/* OIL66 1.0.4.2 — focus CTA lines are always brand red */
.slo-focus__bracket::before,
.slo-focus__bracket::after{
  background:#FFD700!important;
}
.slo-focus__bracket--left{
  border-left-color:#FFD700!important;
}
.slo-focus__bracket--right{
  border-right-color:#FFD700!important;
}
.slo-focus__mobile-button{
  border-color:#FFD700!important;
}