.tt-stage{
  position:relative;
  aspect-ratio:4 / 3;
  min-height:320px;
  padding:0 0 62px;

  touch-action:pan-y;
}
.tt-stage canvas{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;

}

.tt-stage .shot-card{
  right:-10px;
  bottom:26px;
  z-index:2;
}

.page-hero{ position:relative; overflow:hidden; }
.page-hero > .container{ position:relative; z-index:1; }
.tt-band{
  position:absolute;
  inset:0;
  z-index:0;
  display:block;
  width:100%;
  height:100%;
  pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 46%,#000 92%,transparent 100%),
                     linear-gradient(to bottom,transparent 0,#000 22%,#000 84%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 46%,#000 92%,transparent 100%),
             linear-gradient(to bottom,transparent 0,#000 22%,#000 84%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-composite:intersect;
}
@media (max-width:900px){
  .tt-band{ opacity:.5; }
  .tt-stage{ min-height:260px; padding-bottom:54px; }
}

html.tt-pointer,
html.tt-pointer body{ cursor:none; }

html.tt-pointer input,
html.tt-pointer textarea,
html.tt-pointer select,
html.tt-pointer [contenteditable]{ cursor:auto; }
html.tt-pointer :disabled{ cursor:not-allowed; }

.tt-dot,
.tt-ring{
  position:fixed;
  top:0; left:0;
  z-index:400;
  pointer-events:none;
  opacity:0;
  transition:opacity 220ms var(--ease, ease);
}
html.tt-pointer .tt-dot,
html.tt-pointer .tt-ring{ opacity:1; }
html.tt-pointer.tt-away .tt-dot,
html.tt-pointer.tt-away .tt-ring{ opacity:0; }

.tt-dot{
  width:7px; height:7px;
  margin:-3.5px 0 0 -3.5px;
  border-radius:50%;
  background:var(--blue);
}
.tt-ring{
  width:30px; height:30px;
  margin:-15px 0 0 -15px;
  border:1.5px solid var(--blue);
  border-radius:999px;
  transition:width 260ms var(--ease-snap, ease), height 260ms var(--ease-snap, ease),
             margin 260ms var(--ease-snap, ease), border-radius 260ms var(--ease-snap, ease),
             background 200ms linear, border-color 200ms linear, opacity 220ms linear;
}

html.tt-pointer.tt-snap .tt-ring{
  background:var(--blue-tint);
  border-color:var(--blue-dim);
}
html.tt-pointer.tt-snap .tt-dot{ opacity:.35; }

html.tt-pointer.tt-snap-solid .tt-ring{
  background:transparent;
  border-color:var(--bg-elev);
}
html.tt-pointer.tt-snap-solid .tt-dot{ background:var(--bg-elev); }
html.tt-pointer.tt-down .tt-ring{ transform-origin:center; }

.tt-tilt{
  position:relative;
  transform-style:preserve-3d;
  background-image:radial-gradient(260px circle at var(--mx,50%) var(--my,0%),
    var(--blue-tint-2), transparent 68%);
  background-repeat:no-repeat;
  transition:transform var(--t-base) var(--ease-snap),
             border-color var(--t-fast) linear,
             background-color var(--t-fast) linear;
}
.tt-tilt:hover{
  background-image:radial-gradient(260px circle at var(--mx,50%) var(--my,0%),
    var(--blue-tint-2), transparent 68%);
}

.tt-tilt > *{
  position:relative;
  transform:translateZ(var(--lift,0px));
}
.tt-tilt > .icon,
.tt-tilt > .step-num,
.tt-tilt > .stars,
.tt-tilt > .amount{ --lift:26px; }
.tt-tilt > h3,
.tt-tilt > h4,
.tt-tilt > .price,
.tt-tilt > .amount-note,
.tt-tilt > .quote{ --lift:13px; }

.tt-pull{
  transform:perspective(560px)
            translate3d(var(--pull-x,0),var(--pull-y,0),var(--pull-z,0))
            rotateX(var(--pull-rx,0deg))
            rotateY(var(--pull-ry,0deg));
}

@media (prefers-reduced-motion:reduce){
  .tt-tilt{ transition:none; }
  .tt-dot,.tt-ring{ display:none; }
}
@media print{
  .tt-stage,.tt-band,.tt-dot,.tt-ring{ display:none !important; }
}

.tt-back{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
  contain:layout paint style;
}
.tt-field{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
}

.tt-halo,
.tt-core{
  position:absolute;
  top:0; left:0;
  border-radius:50%;
  opacity:0;
  transition:opacity 700ms linear;
  will-change:transform;
}
.tt-halo{
  width:960px; height:960px;
  background:radial-gradient(circle at 50% 50%, var(--glow-1), transparent 62%);
}
.tt-core{
  width:400px; height:400px;
  background:radial-gradient(circle at 50% 50%, var(--blue-tint-2), transparent 66%);
}
html.tt-glow .tt-halo,
html.tt-glow .tt-core{ opacity:1; }
html.tt-away .tt-halo,
html.tt-away .tt-core{ opacity:0; }

.tt-scene{ transform-style:preserve-3d; }
.tt-scene.tt-live{ will-change:transform; }

.js .reveal.tt-scene{ transition-property:opacity; }

.tt-deck{
  transform-style:preserve-3d;
  will-change:transform;
}
.tt-deck > *{
  transform:translateZ(var(--z,0px));
  transform-style:preserve-3d;
}
.tt-deck > h1{ --z:40px; }
.tt-deck > .lead{ --z:18px; }
.tt-deck > .hero-actions{ --z:30px; }
.tt-deck > .hero-proof{ --z:10px; }
.tt-deck > .pill{ --z:6px; }

.tt-w{
  display:inline-block;
  overflow:hidden;

  vertical-align:top;
  padding:.10em .06em .14em;
  margin:-.10em -.06em -.14em;
  perspective:700px;
  transform:translateZ(var(--wz,0px));
}
.tt-wi{

  display:block;
  transform:translateY(112%) rotateX(-56deg);
  opacity:0;
  transition:transform 880ms var(--ease-out), opacity 560ms linear;
  transition-delay:calc(var(--i,0) * 44ms);
}
.tt-split.tt-in .tt-wi{
  transform:none;
  opacity:1;
}

@media (max-width:760px){
  .tt-deck > *{ transform:none; }
  .tt-w{ transform:none; }
}

.hero h1 em .tt-wi,
.page-hero h1 em .tt-wi{
  background:linear-gradient(90deg,var(--blue-bright),var(--blue));
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}

@property --lx{ syntax:'<length-percentage>'; inherits:true; initial-value:50%; }
@property --ly{ syntax:'<length-percentage>'; inherits:true; initial-value:50%; }

.tt-lit{
  position:relative;
  --lit-r:300px;
}

.shot-card.tt-lit{ position:absolute; }

.section.tt-lit,
.footer.tt-lit,
.page-hero.tt-lit,
.cta-band.tt-lit{ --lit-r:640px; }

.tt-lit::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  border-radius:inherit;
  background:radial-gradient(var(--lit-r) circle at var(--lx) var(--ly),
    var(--blue-tint-2), transparent 62%);
  opacity:0;
  transition:opacity 320ms var(--ease);
}
.tt-lit.is-lit::after{ opacity:1; }

.footer-col.tt-lit{
  perspective:640px;
  transform-style:preserve-3d;
}
.footer-col.tt-lit a{

  transform-origin:left center;
  transition:transform var(--t-base) var(--ease-snap), color var(--t-fast) linear;
}
.footer-col.tt-lit a:hover{ transform:translate3d(3px,0,18px); }

@media (prefers-reduced-motion:reduce){
  .tt-back{ display:none; }
  .tt-scene,.tt-deck,.tt-deck > *{ transform:none !important; }
  .tt-wi{ transform:none; opacity:1; transition:none; }
  .tt-lit::after{ display:none; }
  .footer-col.tt-lit a{ transition:none; }
}
@media print{
  .tt-back{ display:none !important; }
  .tt-scene,.tt-deck,.tt-deck > *{ transform:none !important; }
  .tt-wi{ transform:none !important; opacity:1 !important; }
  .tt-lit::after{ display:none !important; }
}