/* Chuyển động nhẹ, chậm, tạo cảm giác thư thả. Muốn tắt: bỏ dòng link motion.css trong index.html. */
body::before,body::after{content:"";position:fixed;z-index:-1;width:60vmax;height:60vmax;border-radius:50%;filter:blur(90px);opacity:.16;pointer-events:none;transition:opacity 1.2s}
body::before{background:var(--acc);top:-28vmax;left:-22vmax;animation:drift1 45s ease-in-out infinite alternate}
body::after{background:#6fa8a0;bottom:-32vmax;right:-22vmax;animation:drift2 55s ease-in-out infinite alternate}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]) body::before,:root:not([data-theme=light]) body::after{opacity:.1}}
:root[data-theme=dark] body::before,:root[data-theme=dark] body::after{opacity:.1}
body.reading::before,body.reading::after{opacity:.06!important}
@keyframes drift1{to{transform:translate(12vmax,8vmax) scale(1.12)}}
@keyframes drift2{to{transform:translate(-10vmax,-6vmax) scale(1.15)}}

@keyframes soft{from{opacity:0;filter:blur(6px);transform:translateY(10px)}to{opacity:1;filter:none;transform:none}}
.hero h1{animation:soft 1.3s cubic-bezier(.2,.7,.2,1) both}
.hero p{animation:soft 1.5s .3s cubic-bezier(.2,.7,.2,1) both}

.reveal{animation:none!important;opacity:0;transform:translateY(14px);transition:opacity .9s ease,transform .9s ease}
.reveal.in{opacity:1;transform:none}

.card{position:relative;overflow:hidden}
.card::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .5s;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),color-mix(in srgb,var(--acc) 15%,transparent),transparent 70%)}
.card:hover::before{opacity:1}

.prose a,.item h3 a{border-bottom:0;background:linear-gradient(var(--acc),var(--acc)) 0 100%/0 1px no-repeat;transition:background-size .45s ease,color .2s}
.prose a{background-size:100% 1px;opacity:.95}
.item h3 a:hover{background-size:100% 1px;text-decoration:none}

@media(prefers-reduced-motion:reduce){
  body::before,body::after,.hero h1,.hero p{animation:none}
  .reveal{opacity:1;transform:none;transition:none}
}