/* Public homepage motion layer. The admin UI intentionally does not use these hooks. */

/* ---- Scroll reveal: sections fade/slide in once, the first time they enter the viewport ---- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s cubic-bezier(.22, 1, .36, 1), transform .8s cubic-bezier(.22, 1, .36, 1); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ---- Hero ---- */
.home-hero { isolation: isolate; }
.home-copy { animation: home-copy-in .8s cubic-bezier(.22, 1, .36, 1) both; }
.home-hero-grid { opacity: .5; background-image: linear-gradient(rgb(24 24 27 / .05) 1px, transparent 1px), linear-gradient(90deg, rgb(24 24 27 / .05) 1px, transparent 1px); background-size: 42px 42px; -webkit-mask-image: radial-gradient(circle at 50% 0%, black, transparent 70%); mask-image: radial-gradient(circle at 50% 0%, black, transparent 70%); }
.home-hero-spotlight { background: radial-gradient(620px circle at var(--spot-x, 50%) var(--spot-y, 12%), rgb(20 184 166 / .08), transparent 62%); }

.home-aurora-blob { position: absolute; border-radius: 9999px; filter: blur(70px); opacity: .32; }
.home-aurora-a { top: 6%; left: 6%; width: 20rem; height: 20rem; background: radial-gradient(circle, #2dd4bf, transparent 45%); animation: home-aurora-a 20s ease-in-out infinite; }
.home-aurora-b { bottom: 6%; right: 6%; width: 20rem; height: 20rem; background: radial-gradient(circle, #6366f1, transparent 45%); animation: home-aurora-b 24s ease-in-out infinite; }
.home-aurora-c { top: 32%; right: 26%; width: 13rem; height: 13rem; background: radial-gradient(circle, #22d3ee, transparent 45%); animation: home-aurora-c 28s ease-in-out infinite; }
@keyframes home-aurora-a { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(3%, 4%) scale(1.06); } }
@keyframes home-aurora-b { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-3%, -4%) scale(1.08); } }
@keyframes home-aurora-c { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-4%, 4%) scale(.94); } }

.home-avatar { position: relative; animation: home-avatar-float 6s ease-in-out infinite; }
.home-avatar::before { content: ''; position: absolute; inset: -6px; border-radius: 9999px; background: conic-gradient(from 0deg, #2dd4bf, #6366f1, #22d3ee, #2dd4bf); animation: home-avatar-spin 6s linear infinite; filter: blur(1.5px); }
.home-avatar img { position: relative; z-index: 1; }
@keyframes home-avatar-spin { to { transform: rotate(360deg); } }
@keyframes home-avatar-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

.home-magnetic { transition: transform .25s cubic-bezier(.22, 1, .36, 1); will-change: transform; }
.home-shine { position: relative; overflow: hidden; }
.home-shine::after { content: ''; position: absolute; inset-block: 0; left: -60%; width: 40%; background: linear-gradient(120deg, transparent, rgb(255 255 255 / .35), transparent); transform: skewX(-20deg); transition: left .7s ease; }
.home-shine:hover::after { left: 120%; }

.home-marquee { -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent); mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent); }
.home-marquee-track { animation: home-marquee-scroll 34s linear infinite; }
.home-marquee:hover .home-marquee-track { animation-play-state: paused; }
@keyframes home-marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

@keyframes home-copy-in { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }

/* ---- About / Resume cards ---- */
.home-bio, .home-focus { transition: border-color .3s ease, box-shadow .3s ease; }
.home-bio:hover, .home-focus:hover { border-color: rgb(212 212 216); box-shadow: 0 24px 48px -32px rgb(24 24 27 / .18); }

.home-skill { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.home-skill:hover { transform: translateY(-2px); border-color: rgb(161 161 170); box-shadow: 0 10px 24px -16px rgb(24 24 27 / .25); }
.reveal.is-visible .home-skill { animation: home-skill-in .5s ease both; }
.reveal.is-visible .home-skill:nth-child(2) { animation-delay: .06s; }
.reveal.is-visible .home-skill:nth-child(3) { animation-delay: .12s; }
.reveal.is-visible .home-skill:nth-child(4) { animation-delay: .18s; }
.reveal.is-visible .home-skill:nth-child(5) { animation-delay: .24s; }

.home-post { transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
.home-post:hover { transform: translateY(-4px); box-shadow: 0 28px 48px -30px rgb(24 24 27 / .22); }
.reveal.is-visible .home-post { animation: home-focus-in .7s cubic-bezier(.22, 1, .36, 1) both; }
.reveal.is-visible .home-post:nth-child(2) { animation-delay: .08s; }
.reveal.is-visible .home-post:nth-child(3) { animation-delay: .16s; }
.reveal.is-visible .home-post:nth-child(4) { animation-delay: .24s; }

@keyframes home-skill-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes home-focus-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }

.home-bio-content > img { display: block; max-width: 100%; height: auto; margin: 1.5rem 0; }
.home-bio-content table { display: block; max-width: 100%; overflow-x: auto; white-space: nowrap; }
.home-bio-content pre { max-width: 100%; overflow-x: auto; border-radius: .75rem; background: #27272a; color: #f4f4f5; padding: 1rem; }
.home-bio-content iframe, .home-bio-content video { max-width: 100%; border-radius: .75rem; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .home-copy, .home-avatar, .home-avatar::before, .home-aurora-blob, .home-marquee-track, .home-skill, .home-focus, .home-post { animation: none; }
  .home-magnetic, .home-shine::after, .home-post, .home-skill { transition: none; }
}