/* website.amira: hover effects (computer). Transform and opacity only, one ease-out curve. */

/* ---------- buttons: magnetic pull, golden glint, ripple on press ---------- */
.btn{position:relative;overflow:hidden;isolation:isolate;translate:var(--mx,0px) var(--my,0px);
  transition:transform .35s var(--ease-anim),box-shadow .45s var(--ease-anim),background-position .8s var(--ease-anim),background-color .35s,color .35s,border-color .35s,translate .7s var(--ease-anim)}
.btn.mag{transition:transform .35s var(--ease-anim),box-shadow .45s var(--ease-anim),background-position .8s var(--ease-anim),background-color .35s,color .35s,border-color .35s,translate .18s var(--ease-anim)}
.btn.primary::before{content:"";position:absolute;top:0;bottom:0;left:0;width:55%;pointer-events:none;z-index:-1;
  background:linear-gradient(105deg,rgba(255,248,230,0) 0%,rgba(255,248,230,.75) 50%,rgba(255,248,230,0) 100%);
  transform:translateX(-130%) skewX(-12deg);opacity:0}
.btn.primary:hover::before{transform:translateX(260%) skewX(-12deg);opacity:1;transition:transform .9s var(--ease-anim),opacity .2s}
.btn .ripple{position:absolute;border-radius:50%;pointer-events:none;z-index:-1;width:16px;height:16px;margin:-8px 0 0 -8px;
  background:radial-gradient(circle,rgba(255,252,240,.8) 0%,rgba(255,252,240,.4) 45%,rgba(255,240,205,0) 70%);
  transform:scale(0);opacity:1;animation:ripple .75s var(--ease-anim) forwards}
.btn.ghost .ripple{background:radial-gradient(circle,rgba(230,188,92,.5) 0%,rgba(230,188,92,.2) 45%,rgba(230,188,92,0) 70%)}
@keyframes ripple{to{transform:scale(var(--rs,20));opacity:0}}

/* ---------- custom cursor: gold dot and a ring that trails it ---------- */
.cur{display:none}
html.has-cursor .cur{display:block;position:fixed;left:0;top:0;z-index:100;pointer-events:none}
html.has-cursor,html.has-cursor a,html.has-cursor button,html.has-cursor .proj,html.has-cursor label{cursor:none}
html.has-cursor input,html.has-cursor textarea{cursor:text}
.cur-dot,.cur-ring{position:fixed;left:0;top:0;border-radius:50%;will-change:transform}
.cur-dot{width:6px;height:6px;margin:-3px 0 0 -3px;background:var(--accent);box-shadow:0 0 10px rgba(230,188,92,.8)}
.cur-ring{width:38px;height:38px;margin:-19px 0 0 -19px}
.cur-ring::before{content:"";position:absolute;inset:0;border-radius:50%;border:1px solid rgba(230,188,92,.75);
  transform:scale(var(--cs,1));transition:transform .45s var(--ease-anim),background-color .45s,border-color .45s}
.cur.link .cur-ring{--cs:1.7}
.cur.view .cur-ring{--cs:2.5}
.cur.view .cur-ring::before{background-color:rgba(230,188,92,.92);border-color:rgba(230,188,92,0)}
.cur-label{position:absolute;inset:0;display:grid;place-items:center;font:600 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;
  color:#2a0a10;opacity:0;transform:scale(.6);transition:opacity .3s var(--ease-anim),transform .45s var(--ease-anim)}
.cur.view .cur-label{opacity:1;transform:scale(1)}
.cur.dim .cur-dot,.cur.dim .cur-ring{opacity:0}
.cur-dot,.cur-ring{transition:opacity .3s}
.cur.view .cur-dot{opacity:0}

/* ---------- cards: a soft gold glow follows the cursor ---------- */
.lk{position:relative;overflow:hidden}
.tier::before,.lk::before,.proj .cover::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;
  background:radial-gradient(240px circle at var(--gx,50%) var(--gy,50%),rgba(230,188,92,.22),rgba(230,188,92,0) 70%);
  opacity:0;transition:opacity .5s var(--ease-anim)}
.tier:hover::before,.lk:hover::before,.proj:hover .cover::before{opacity:1}
.proj .cover::before{z-index:3;mix-blend-mode:screen}
.tier>*,.lk>*{position:relative;z-index:1}
.tier .badge{position:absolute;z-index:2}

/* ---------- links in the menu and contacts: gold underline draws left to right ---------- */
.drawer-links a{display:inline-block;position:relative}
.drawer-links a::after,.lk dd a::after{content:"";position:absolute;left:0;right:0;bottom:8px;height:1px;background:var(--accent);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .5s var(--ease-anim)}
.lk dd a{position:relative;border-bottom-color:transparent!important}
.lk dd a::before{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--accent-muted)}
.lk dd a::after{bottom:-2px}
.drawer-links a:hover::after,.drawer-links a:focus-visible::after,.lk dd a:hover::after,.lk dd a:focus-visible::after{transform:scaleX(1)}

/* ---------- contact icons: a little jump and a glow ---------- */
.lk dt .ico{position:relative;display:block;width:34px;height:34px;margin-bottom:12px;color:var(--accent)}
.lk dt .ico svg{position:relative;z-index:1;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.lk dt .ico::before{content:"";position:absolute;inset:-6px;border-radius:50%;background:radial-gradient(circle,rgba(230,188,92,.5),rgba(230,188,92,0) 70%);opacity:0;transition:opacity .4s var(--ease-anim)}
.lk:hover .ico{animation:hop .6s var(--ease-anim)}
.lk:hover .ico::before{opacity:1}
@keyframes hop{0%{transform:translateY(0)}35%{transform:translateY(-7px) scale(1.06)}65%{transform:translateY(1px) scale(.98)}100%{transform:translateY(0)}}

@media (prefers-reduced-motion: reduce){
  .btn{translate:none!important}
  .btn .ripple{display:none}
  .lk:hover .ico{animation:none}
}
.cur-dot,.cur-ring{transform:translate3d(-120px,-120px,0)}