/* Workshop motion: photograph, focus, then the next useful action. */
:root {
  --motion-ease:cubic-bezier(.2,.75,.25,1);
}
.hero-photo-frame {
  position:relative;
  isolation:isolate;
}
.hero-photo-frame::after {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:1;
  opacity:0;
  background:radial-gradient(ellipse at var(--shine-x,50%) var(--shine-y,40%),#fff3 0%,#fff1 28%,transparent 65%);
}
.focus-corners {
  position:absolute;
  inset:19px;
  z-index:2;
  pointer-events:none;
  color:var(--blue);
}
.focus-corners i {
  position:absolute;
  width:22px;
  height:22px;
  border:solid currentColor;
  border-width:0;
  opacity:.8;
}
.focus-corners i:nth-child(1) { top:0;left:0;border-top-width:2px;border-left-width:2px; }
.focus-corners i:nth-child(2) { top:0;right:0;border-top-width:2px;border-right-width:2px; }
.focus-corners i:nth-child(3) { bottom:0;right:0;border-bottom-width:2px;border-right-width:2px; }
.focus-corners i:nth-child(4) { bottom:0;left:0;border-bottom-width:2px;border-left-width:2px; }
.hero-portrait.is-entering {
  transition:none;
}
.site-nav>a:not(.nav-cta),.text-link {
  position:relative;
}
.site-nav>a:not(.nav-cta)::after,.text-link::after {
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:2px;
  background:var(--blue);
  transform:scaleX(0);
  transform-origin:left;
  pointer-events:none;
}
.site-nav>a[aria-current]::after,.text-link:focus-visible::after {
  transform:scaleX(1);
}
@media (hover:hover) and (pointer:fine) {
  .hero-portrait {
    transform:perspective(1100px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));
    transform-origin:50% 45%;
    transition:transform .38s var(--motion-ease),box-shadow .38s var(--motion-ease);
  }
  .hero-portrait:hover {
    box-shadow:0 22px 45px -30px #20282855;
  }
  .hero-photo-frame::after { transition:opacity .35s ease; }
  .hero-portrait:hover .hero-photo-frame::after { opacity:1; }
  .button-primary,.sf-cta,.sf-tab,.sf-choice,.hero-portrait figcaption a {
    transition:transform .2s var(--motion-ease),background-color .2s,color .2s,border-color .2s,box-shadow .2s;
  }
  .button-primary:hover,.sf-cta:hover {
    transform:translateY(-3px);
    box-shadow:0 9px 20px -12px #244fd788;
  }
  .button-primary:active,.sf-cta:active,.sf-tab:active,.sf-choice:active {
    transform:translateY(1px) scale(.98);
    box-shadow:none;
  }
  .site-nav>a:not(.nav-cta)::after,.text-link::after {
    transition:transform .3s var(--motion-ease);
  }
  .site-nav>a:not(.nav-cta):hover::after,.text-link:hover::after { transform:scaleX(1); }
  .hero-portrait figcaption a:hover { color:var(--blue); }
  .device-glyph img,.martin-rednote-media img,.ig-embed-shell>img {
    transition:transform .65s var(--motion-ease),filter .5s ease;
  }
  .device-card:hover .device-glyph img { transform:scale(1.065); }
  .martin-rednote-tile:hover .martin-rednote-media img { transform:scale(1.045);filter:contrast(1.035); }
  .ig-embed-shell:hover>img { transform:translateY(-4px);filter:contrast(1.035); }
}
@media (pointer:coarse) {
  .button-primary:active,.sf-cta:active,.mobile-contact:active { background:var(--blue-deep); }
  .sf-tab:not(.active):active,.sf-choice:active { background:#dde6ff; }
  .device-card:hover .device-glyph img { transform:none; }
}
@media (max-width:720px) {
  .focus-corners { inset:14px; }
  .focus-corners i { width:18px;height:18px; }
}
@media (prefers-reduced-motion:reduce) {
  .hero-portrait,.hero-portrait:hover,.button-primary:hover,.button-primary:active,
  .sf-cta:hover,.sf-cta:active,.sf-tab:hover,.sf-tab:active,
  .sf-choice:hover,.sf-choice:active,
  .device-card:hover .device-glyph img,.martin-rednote-tile:hover .martin-rednote-media img,
  .ig-embed-shell:hover>img {
    transform:none!important;
    filter:none!important;
    transition:none!important;
  }
  .hero-photo-frame::after { display:none; }
  .hero-portrait:hover,.button-primary:hover,.sf-cta:hover { box-shadow:none; }
  .site-nav>a::after,.text-link::after { transition:none; }
}