@media(prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
.rola{display:flex;flex-direction:column;align-items:center;gap:12px;width:max-content;max-width:92%;text-decoration:none;opacity:0;animation:rola-in 1.2s cubic-bezier(.19,1,.22,1) 1.7s forwards}
.rola-t{font-family:'Newsreader',Georgia,serif;font-style:italic;font-weight:400;font-size:clamp(1rem,1.4vw,1.25rem);line-height:1.35;text-align:center;color:rgba(243,238,228,.92);letter-spacing:.01em;text-shadow:0 1px 16px rgba(0,0,0,.65);transition:color .4s}
.rola-l{position:relative;display:block;width:8px;height:58px;background:rgba(240,222,190,.66);clip-path:polygon(0 0,100% 0,calc(50% + .5px) 100%,calc(50% - .5px) 100%);overflow:hidden}
.rola-l::after{content:"";position:absolute;left:0;top:0;width:100%;height:46%;background:linear-gradient(transparent,#E0B87A);animation:rola-d 2.6s cubic-bezier(.6,0,.3,1) infinite}
.rola:hover .rola-t,.rola:focus-visible .rola-t{color:#C9A06B}
.rola:focus-visible{outline:1px solid #C9A06B;outline-offset:8px}
@keyframes rola-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes rola-d{0%{transform:translateY(-100%)}70%,100%{transform:translateY(220%)}}
 
.hero .rola{position:relative;z-index:3;margin:clamp(26px,4vw,44px) auto 0}
 
.hero-art::before{content:"";position:absolute;left:0;right:0;bottom:0;height:60%;background:linear-gradient(transparent,rgba(13,36,56,.62));pointer-events:none;z-index:1}
.hero-art .rola{position:absolute;left:0;right:0;bottom:clamp(12px,2vw,22px);margin:0 auto;z-index:3;gap:8px}
.hero-art .rola-l{height:44px}
@media(prefers-reduced-motion:reduce){.rola{animation:none;opacity:1}.rola-l::after{animation:none;transform:translateY(60%)}}