:root { --motion-gold: #cfb477; }
.experience-tools { position:fixed; bottom:20px; left:24px; z-index:90; display:flex; align-items:center; gap:4px; padding:5px; background:#151713f2; border:1px solid #76684b; border-radius:30px; color:#f7f2e8; box-shadow:0 8px 24px #0004; font-family:inherit; }
.experience-tools button { display:flex; align-items:center; gap:7px; border:0; border-radius:22px; padding:10px 13px; min-height:42px; color:inherit; background:transparent; font:inherit; font-size:12px; cursor:pointer; transition:background .18s; }
.experience-tools button:hover { background:#34362c; }
.experience-tools svg { width:17px; height:17px; fill:none; stroke:var(--motion-gold); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.experience-tools button:focus-visible,.intro-skip:focus-visible { outline:2px solid #e9ce90; outline-offset:3px; }
.intro-shell { position:fixed; inset:0; z-index:150; pointer-events:none; overflow:hidden; }
.intro-shell[hidden] { display:none; }
.intro-curtain { position:absolute; inset:0; background:#10110f; animation:lyq-curtain 2.1s both; }
.intro-aperture { position:absolute; left:50%; top:50%; width:150vmax; height:150vmax; translate:-50% -50%; animation:lyq-aperture 2.1s cubic-bezier(.65,0,.2,1) both; }
.intro-aperture polygon { fill:#141612; stroke:#bd9b57; stroke-width:.16; }
.intro-name { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; color:#f9f3e6; animation:lyq-name 2.1s both; text-align:center; }
.intro-name strong { font-family:inherit; font-size:clamp(38px,6vw,76px); font-weight:500; letter-spacing:.13em; padding-left:.13em; }
.intro-name span { margin-top:18px; font-size:11px; letter-spacing:.33em; color:#d3b97e; }
.intro-skip { position:absolute; right:28px; bottom:28px; pointer-events:auto; background:#10110fcc; color:#e8ddc6; border:1px solid #8a7954; border-radius:24px; padding:10px 20px; font:inherit; font-size:12px; cursor:pointer; }
@keyframes lyq-curtain { 0%,35%{opacity:1} 75%,100%{opacity:0} }
@keyframes lyq-aperture { 0%,18%{transform:scale(.78) rotate(-13deg);opacity:1} 62%{opacity:1} 100%{transform:scale(9) rotate(27deg);opacity:0} }
@keyframes lyq-name { 0%{opacity:0;transform:translateY(8px)} 15%,46%{opacity:1;transform:translateY(0)} 70%,100%{opacity:0;transform:translateY(-8px)} }
.focus-cursor { position:fixed; top:0; left:0; width:34px; height:34px; margin:-17px 0 0 -17px; pointer-events:none; z-index:180; opacity:0; color:var(--motion-gold); transition:opacity .15s; }
.focus-cursor.visible { opacity:1; }
.focus-cursor svg { width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.4; transition:transform .16s,color .16s; }
.focus-cursor.locked svg { transform:scale(.73); color:#f6ddb0; }
.focus-cursor circle { fill:currentColor; stroke:none; }
.focus-pulse { position:fixed; left:var(--click-x); top:var(--click-y); width:38px; height:38px; margin:-19px; pointer-events:none; z-index:181; border:1px solid #eed39a; border-radius:50%; animation:lyq-pulse .42s ease-out both; }
@keyframes lyq-pulse { from{opacity:.85;transform:scale(.5)} to{opacity:0;transform:scale(1.8)} }
@media (pointer:coarse) { .focus-cursor { display:none; } }
@media (max-width:600px) { .experience-tools { left:12px; bottom:max(12px,env(safe-area-inset-bottom)); } .experience-tools button{padding:9px 11px;} .intro-skip{right:16px;bottom:22px;} }
@media (prefers-reduced-motion:reduce) { .intro-aperture { display:none; } .intro-curtain{animation:lyq-reduced .4s both;} .intro-name{animation:lyq-reduced .4s both;} .focus-cursor{display:none;} .focus-pulse{animation:lyq-reduced .18s both;} }
@keyframes lyq-reduced { from{opacity:1} to{opacity:0} }