/* Árdh — homepage hero x-ray lens. Own code. */
.hero{
  --lens-r:140px;
}
@media (max-width:767px){
  .hero{--lens-r:110px}
}
.hero-lines{
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  opacity:0;
  -webkit-mask-image:radial-gradient(
    circle var(--lens-r) at var(--mx,50%) var(--my,50%),
    #000 0%,
    #000 62%,
    transparent 100%
  );
  mask-image:radial-gradient(
    circle var(--lens-r) at var(--mx,50%) var(--my,50%),
    #000 0%,
    #000 62%,
    transparent 100%
  );
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-size:100% 100%;
  mask-size:100% 100%;
  transition:opacity .35s var(--ease-2);
}
.hero-lines.is-on{opacity:1}
.hero[data-show] .hero-lines,
.hero-lines:not(.is-ready){opacity:0}
.hero-lines .hero-lines-inner{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}
.hero-lines img{
  pointer-events:none;
  user-select:none;
  -webkit-user-drag:none;
}
.hero.is-lens{cursor:pointer}
@media (prefers-reduced-motion:reduce){
  .hero-lines{transition:none}
}

/* Double-click / double-tap cue */
.hero{
  --tower-cx:51%;
  --tower-cy:43%;
  --tower-rx:16%;
  --tower-ry:24%;
  --cue-tip-x:54.8%;
  --cue-tip-y:36.8%;
  touch-action:manipulation;
}
@media (max-width:767px){
  .hero{
    --tower-cx:50%;
    --tower-cy:42%;
    --tower-rx:32%;
    --tower-ry:26%;
    --cue-tip-x:51.2%;
    --cue-tip-y:28.8%;
  }
}
.hero-cue{
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;
  opacity:0;
}
.hero-cue.is-on{opacity:1;transition:opacity .8s var(--ease-2) .15s}
.hero-cue.is-gone{
  opacity:0 !important;
  visibility:hidden;
  transition:opacity .6s var(--ease-2),visibility 0s .6s;
}
.hero-cue-label{
  position:absolute;
  left:var(--cue-tip-x);
  top:var(--cue-tip-y);
  width:23.5rem;
  transform:translate(-5.32%,-93.85%);
  line-height:0;
}
.hero-cue-label svg{width:100%;height:auto;overflow:visible}
.hero-cue-svg-desktop{display:block}
.hero-cue-svg-mobile{display:none}
.hero-cue-tap{display:none}
@media (hover:none) and (pointer:coarse){
  .hero-cue-click{display:none}
  .hero-cue-tap{display:block}
}
@media (max-width:767px){
  .hero-cue-svg-desktop{display:none}
  .hero-cue-svg-mobile{display:block}
  .hero-cue-label{
    width:11rem;
    transform:translate(-7%,-90.8%);
  }
}
@media (prefers-reduced-motion:reduce){
  .hero-cue{transition:none}
  .hero-cue.is-on{transition:none}
}