/* An open, full-width field of gold particles behind the opening. */
::selection{background:#d9bf87;color:#29251e;text-shadow:none}
::-moz-selection{background:#d9bf87;color:#29251e;text-shadow:none}
input,select,textarea,progress{accent-color:#9b783b}
a,button{-webkit-tap-highlight-color:#d9bf8740}
.hero{isolation:isolate;position:relative;overflow:visible}
.hero .shader-background{display:none}
.hero-motion-art{position:absolute;left:50%;top:0;width:100%;height:100%;transform:translateX(-50%);z-index:-1;pointer-events:none;opacity:1;transition:opacity 1.6s ease;mask-image:linear-gradient(to bottom,#000 0%,#000 82%,transparent 100%)}
.hero-particles{display:block;width:100%;height:100%}
.hero h1 .tech-letter{animation:none;translate:none;transform:none!important;text-shadow:none!important}
.hero-motion-ready .hero-copy,.hero-motion-ready .hero-visual .camera-window{translate:none}
html:not(.hero-motion-ready) .hero-motion-art{opacity:0}
@media(prefers-reduced-motion:reduce){.hero-motion-art{transition:none}}

/* The whole phrase breathes gently; letters stay together. */
.hero-motion-ready .hero h1 .gold{animation:hero-word-drift 8s ease-in-out infinite}
@keyframes hero-word-drift{0%,100%{translate:0 0}50%{translate:0 -2.5px}}
.hero-motion-paused .hero h1 .gold,.hero:has(.hero-visual.is-paused) h1 .gold{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.hero-motion-ready .hero h1 .gold{animation:none;translate:none}}

/* Cursor proximity adds a visible, smooth wave to the moving phrase. */
.hero h1 .gold .tech-letter{transform:translate(var(--hover-x,0px),var(--hover-y,0px))!important;text-shadow:0 5px 24px rgba(173,130,58,var(--hover-glow,0))!important;transition:transform .9s cubic-bezier(.18,.7,.25,1),text-shadow .8s ease}
.hero h1.is-pointer-active .gold .tech-letter{transition:transform .45s cubic-bezier(.18,.7,.25,1),text-shadow .5s ease}
@media(prefers-reduced-motion:reduce){.hero h1 .gold .tech-letter{transform:none!important;text-shadow:none!important}}

/* Page scrollbar follows the paper and gold palette. */
html { scrollbar-width: thin; scrollbar-color: #94713d #f6f0e5; }
html::-webkit-scrollbar { width: 10px; height: 10px; }
html::-webkit-scrollbar-track { background: #f6f0e5; }
html::-webkit-scrollbar-thumb { background: #94713d; border: 2px solid #f6f0e5; border-radius: 10px; }
html::-webkit-scrollbar-thumb:hover { background: #76582d; }
html::-webkit-scrollbar-corner { background: #f6f0e5; }
@media (forced-colors: active) {
  html { scrollbar-width: auto; scrollbar-color: auto; }
  html::-webkit-scrollbar-thumb { background: ButtonText; border-color: Canvas; }
  html::-webkit-scrollbar-track, html::-webkit-scrollbar-corner { background: Canvas; }
}