/* Intro, pinned sequences, cursor. Switches off with reduced motion. */

.pre {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: #08080E;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 18px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .45s ease, visibility .45s ease;
}
html.is-loading .pre {
  opacity: 1;
  visibility: visible;
}
.pre__c { width: min(180px, 40vw); height: auto; }
.pre__w { width: min(200px, 54vw); height: auto; opacity: 0; }
html.is-loading .pre__needle { transform-origin: 100px 100px; animation: preNeedle 1.3s ease both; }
html.is-loading .pre__w { animation: preWord 0.7s ease 0.7s both; }
@keyframes preNeedle { from { transform: rotate(-80deg); opacity: 0; } to { transform: rotate(0); opacity: 1; } }
@keyframes preWord { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.cur, .cglow { display: none; }

html.has-exp .hero { height: 220vh; }
html.has-exp .hero__pin {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  min-height: 0;
}
html.has-exp .hero__reveal {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: center;
  justify-items: center;
  padding: 0 24px;
  opacity: 0;
  z-index: 2;
}
html.has-exp .hero__reveal.is-in { opacity: 1; }
html.has-exp .hero__in { transition: opacity .4s ease, transform .5s ease; }
html.has-exp .hero.is-revealed .hero__in { opacity: 0; transform: scale(0.98); }
html.has-exp .hero.is-revealed .hero__cue { opacity: 0; }
html.has-exp .hero__big span { display: block; }

html.has-exp .hz { height: 260vh; }
html.has-exp .hz__pin {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  padding-top: var(--nav);
}
html.has-exp .steps {
  overflow: visible;
  width: max-content;
  padding-left: max(20px, calc((100vw - var(--wrap)) / 2));
  padding-right: 12vw;
  transform: translateX(calc(var(--hx, 0) * -1px));
  scroll-snap-type: none;
}

html.has-exp .cur {
  display: block;
  position: fixed;
  z-index: 90;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  border: 1px solid rgba(200, 168, 72, 0.85);
  border-radius: 50%;
  pointer-events: none;
  mix-blend-mode: difference;
  transition: width .2s ease, height .2s ease, margin .2s ease;
}
html.has-exp .cglow {
  display: block;
  position: fixed;
  z-index: 1;
  width: 280px;
  height: 280px;
  margin: -140px 0 0 -140px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(200, 168, 72, 0.16), transparent 68%);
}
html.has-exp .frame, html.has-exp .onereport, html.has-exp .phone {
  transform: perspective(900px) rotateX(var(--ty, 0deg)) rotateY(var(--tx, 0deg));
  transition: transform .2s ease;
}

@media (max-width: 1099px), (max-height: 699px), (prefers-reduced-motion: reduce) {
  html.has-exp .hero { height: auto; }
  html.has-exp .hero__pin { position: relative; height: auto; overflow: visible; }
  html.has-exp .hz { height: auto; }
  html.has-exp .hz__pin { position: relative; height: auto; }
  html.has-exp .cur, html.has-exp .cglow { display: none; }
}