/* Opt-in hero motion. The photograph remains in its original accessible markup. */
.hero[data-gl-hero-motion] { position:relative; isolation:isolate; }
.hero[data-gl-hero-motion] .hero-photo { transform-origin:50% 55%; }
.hero[data-gl-hero-motion="depth"] .hero-photo {
  animation:gl-hero-depth 11s ease-in-out infinite alternate;
  box-shadow:14px 22px 0 -5px color-mix(in srgb,var(--accent) 12%,transparent),0 30px 55px -30px color-mix(in srgb,var(--fg) 35%,transparent);
}
.hero[data-gl-hero-motion="float"] .hero-photo { animation:gl-hero-float 8s ease-in-out infinite alternate; }
.hero[data-gl-hero-motion="pan"] .hero-photo { overflow:hidden; }
.hero[data-gl-hero-motion="pan"] .hero-photo img { animation:gl-hero-pan 16s ease-in-out infinite alternate; }
.hero[data-gl-hero-motion="type"] h1 { transform-origin:0 70%; animation:gl-hero-type 9s ease-in-out infinite alternate; }
.gl-hero-orbit { position:absolute; width:clamp(220px,35vw,500px); aspect-ratio:1; right:-7%; top:24%; pointer-events:none; z-index:-1; perspective:900px; color:var(--accent); }
.gl-hero-orbit-space { position:absolute; inset:0; transform-style:preserve-3d; animation:gl-hero-orbit 24s linear infinite; }
.gl-hero-orbit-ring { position:absolute; inset:10%; border:clamp(4px,1.2vw,16px) solid currentColor; border-radius:50%; opacity:.32; transform:rotateY(var(--orbit-angle)); }
.gl-hero-orbit-ring:nth-child(2) { --orbit-angle:60deg; opacity:.2; }
.gl-hero-orbit-ring:nth-child(3) { --orbit-angle:120deg; opacity:.14; }
.gl-hero-orbit-ring:first-child { --orbit-angle:0deg; }
@keyframes gl-hero-depth { from { transform:perspective(1400px) rotateY(-6deg) rotateX(2deg) translateY(4px); } to { transform:perspective(1400px) rotateY(5deg) rotateX(-2deg) translateY(-8px); } }
@keyframes gl-hero-float { from { transform:perspective(1200px) rotateY(-3deg) rotateZ(-1deg) translateY(4px); } to { transform:perspective(1200px) rotateY(3deg) rotateZ(1deg) translateY(-12px); } }
@keyframes gl-hero-pan { from { transform:scale(1.025) translateX(-.4%); } to { transform:scale(1.1) translateX(.8%); } }
@keyframes gl-hero-type { from { transform:perspective(1400px) rotateY(-2deg) translateY(2px); } to { transform:perspective(1400px) rotateY(2deg) translateY(-6px); } }
@keyframes gl-hero-orbit { from { transform:rotateX(62deg) rotateY(-15deg) rotateZ(0deg); } to { transform:rotateX(62deg) rotateY(-15deg) rotateZ(360deg); } }
.hero[data-gl-hero-motion]:not(.is-hero-motion-running) :is(.hero-photo,.hero-photo img,h1,.gl-hero-orbit-space),
html[data-gl-motion-paused] .hero[data-gl-hero-motion] :is(.hero-photo,.hero-photo img,h1,.gl-hero-orbit-space) { animation-play-state:paused; }
@media(max-width:760px) {
  .hero[data-gl-hero-motion="depth"] .hero-photo { animation-name:gl-hero-float; box-shadow:6px 12px 0 -3px color-mix(in srgb,var(--accent) 12%,transparent); }
  .gl-hero-orbit { width:240px; right:-100px; top:auto; bottom:10%; }
}
@media(prefers-reduced-motion:reduce) {
  .hero[data-gl-hero-motion] :is(.hero-photo,.hero-photo img,h1,.gl-hero-orbit-space) { animation:none!important; }
  .gl-hero-orbit-space { transform:rotateX(62deg) rotateY(-15deg); }
}