/* Moving light on mineral paper. Only transforms animate; text remains static. */
.hero { isolation: isolate; }
.hero-environment { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: #eae8e1; }
.hero-environment::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, #eae8e1b3, #eae8e166 45%, transparent 75%); }
.hero h1>span { color: #c33e1f; }
.environment-light { position: absolute; width: 220%; height: 220%; top: -60%; left: -60%; transform-origin: center; }
.light-warm {
  background: radial-gradient(ellipse at 70% 58%, #f6b08d 0%, #edc7b145 35%, transparent 65%);
  animation: light-drift 24s ease-in-out infinite alternate;
}
.light-mineral {
  background: radial-gradient(ellipse at 60% 25%, #c2ccaeaa, #d4d6c245 35%, transparent 65%);
  animation: mineral-drift 31s ease-in-out infinite alternate;
}
.environment-contours {
  position: absolute; width: 130%; height: 140%; left: 5%; top: -12%;
  stroke: #898f73; stroke-width: .8; opacity: .32;
  mask-image: linear-gradient(100deg, transparent 15%, #000 55%, #000);
  animation: contour-drift 28s ease-in-out infinite alternate;
}
.contour-echo { stroke: #c76e44; opacity: .55; }
.environment-grain {
  position: absolute; inset: 0; opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23000' filter='url(%23n)' opacity='.8' d='M0 0h180v180H0z'/%3E%3C/svg%3E");
}
.hero-art .orbit-line { display: none; }
.motion-toggle { display: inline-flex; align-items: center; gap: 8px; padding: 7px 0; font-size: 11px; line-height: 1.4; background: transparent; }
.motion-toggle:hover { text-decoration: underline; text-underline-offset: 4px; }
.motion-icon { font-size: 13px; min-width: 12px; text-align: center; }
.motion-toggle:disabled { opacity: .65; text-decoration: none; }
.hero.motion-paused *,.hero.scene-sleep *,.menu-open .hero * { animation-play-state: paused !important; }
.study { position: relative; isolation: isolate; }
.study::before {
  content: ''; pointer-events: none; position: absolute; z-index: -1;
  width: 120%; height: 140%; left: 0; top: -20%; opacity: .6;
  background: radial-gradient(ellipse at 80% 45%, #62745733, transparent 60%), repeating-radial-gradient(ellipse at 95% 10%, transparent 0 44px, #a9b49a0a 45px 46px, transparent 47px 65px);
  animation: study-drift 30s ease-in-out infinite alternate;
}
.study.motion-paused::before,.study.scene-sleep::before { animation-play-state: paused; }
@keyframes light-drift { from { transform: translate(-5%, -3%) rotate(-6deg); } to { transform: translate(8%, 9%) rotate(9deg); } }
@keyframes mineral-drift { from { transform: translate(4%, 0) rotate(5deg); } to { transform: translate(-9%, 5%) rotate(-7deg); } }
@keyframes contour-drift { from { transform: translate(0, 3%) rotate(-4deg); } to { transform: translate(-7%, -5%) rotate(3deg); } }
@keyframes study-drift { from { transform: translate(-3%, 0) rotate(-2deg); } to { transform: translate(3%, -4%) rotate(4deg); } }
@media (max-width: 960px) {
  .environment-contours { width: 210%; height: 100%; left: -25%; top: 8%; opacity: .25; mask-image: linear-gradient(180deg, transparent 15%, #000 55%); }
  .light-warm { background: radial-gradient(ellipse at 55% 60%, #f5b79a88, transparent 60%); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-environment *,.study::before { animation: none !important; }
}