@keyframes goldShift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.anim-gold{background:linear-gradient(120deg,#0D0D0D,#3a2a05,#B8860B,#0D0D0D);background-size:300% 300%;animation:goldShift 14s ease infinite}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.floaty{animation:floaty 6s ease-in-out infinite}
.reveal{opacity:0;transform:translateY(30px);transition:opacity .8s ease,transform .8s ease}
.reveal.visible{opacity:1;transform:translateY(0)}
.hero-slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity 1.4s ease}
.hero-slide.active{opacity:.45}
.faq-body{max-height:0;overflow:hidden;transition:max-height .45s ease}
.faq-item.open .faq-body{max-height:400px}
.faq-item.open .faq-ic{transform:rotate(45deg)}
.faq-ic{transition:transform .4s ease}
.float-field{position:relative}
.float-field input,.float-field textarea{width:100%;background:transparent;border:none;border-bottom:1px solid #B8860B;color:#F5F5DC;padding:18px 0 8px;outline:none}
.float-field label{position:absolute;left:0;top:18px;color:#9a9277;pointer-events:none;transition:.25s ease}
.float-field input:focus + label,.float-field input:not(:placeholder-shown) + label,.float-field textarea:focus + label,.float-field textarea:not(:placeholder-shown) + label{top:0;font-size:.7rem;color:#FFD700;letter-spacing:.15em;text-transform:uppercase}
.drawer{transform:translateX(100%);transition:transform .4s ease}
.drawer.open{transform:translateX(0)}
.cat-btn.active{background:#FFD700;color:#0D0D0D}
.proj-card .after{opacity:0;transition:opacity .5s ease}
.proj-card:hover .after{opacity:1}
::selection{background:#FFD700;color:#0D0D0D}
html{scroll-behavior:smooth}
body{background:#0D0D0D;color:#F5F5DC}