/* =====================================================
   PAGE-LOAD ANIMATION
===================================================== */
#loader {
  position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center; place-content: center; justify-items: center;
  background: var(--bg); border-radius: 0 0 50% 50% / 0 0 9vw 9vw;
  transition: transform 1.05s var(--ease-wipe);
}

html:not(.js) #loader { display: none; }

.loaded #loader { transform: translateY(-101%); }

#loader svg { width: 54px; height: 54px; animation: markIn .8s var(--ease-out) both; }

#loader .bar { width: 150px; height: 2px; margin-top: 26px; background: rgba(255,255,255,.12); overflow: hidden; border-radius: 2px; }

#loader .bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold), #fff); transform: scaleX(0); transform-origin: left; animation: barFill .95s var(--ease-wipe) forwards; }

@keyframes markIn { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: none; } }
@keyframes barFill { to { transform: scaleX(1); } }

/* hidden start states (only when JS runs, removed once .loaded is set) */
.js:not(.loaded) .nav,.js:not(.loaded) .role,.js:not(.loaded) .title-in,.js:not(.loaded) .photo img,.js:not(.loaded) .photo::before,.js:not(.loaded) .copy > *,.js:not(.loaded) .skills,.js:not(.loaded) .hero::before { opacity: 0; }


/* 1. nav slides down */
.loaded .nav { animation: navIn 1.1s .45s var(--ease-out) backwards; }

@keyframes navIn { from { opacity: 0; transform: translateY(-110%); } to { opacity: 1; transform: none; } }

/* 2. name wipes in left → right */
.loaded .title-in { animation: wipe 1.35s .6s var(--ease-wipe) backwards; }

@keyframes wipe {
  from { opacity: 1; clip-path: inset(-8% 100% -8% 0); transform: translateX(-4%); }
  to   { opacity: 1; clip-path: inset(-8% -2% -8% -2%); transform: none; }
}

/* 3. tag fades in, in place */
.loaded .role { animation: fade 1.1s 1s ease backwards; }

@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

/* 4. photo rises bottom → top */
.loaded .photo img { animation: rise 1.6s .7s var(--ease-wipe) backwards; }

@keyframes rise {
  from { opacity: 1; clip-path: inset(100% -10% 0 -10%); transform: translateY(70px) scale(1.04); }
  to   { opacity: 1; clip-path: inset(-5% -10% 0 -10%);  transform: none; }
}
.loaded .photo::before { animation: fade 1.8s 1.1s ease backwards; }

.loaded .hero::before { animation: fade 2.2s .3s ease backwards, breathe 7s 2.5s ease-in-out infinite alternate; }

@keyframes breathe { from { filter: brightness(.9); } to { filter: brightness(1.12); } }

/* copy + skills follow */
.loaded .copy > * { animation: fadeUp 1s var(--ease-out) backwards; }

.loaded .copy > :nth-child(1) { animation-delay: 1.35s; }

.loaded .copy > :nth-child(2) { animation-delay: 1.5s; }

.loaded .copy > :nth-child(3) { animation-delay: 1.65s; }

.loaded .skills { animation: fadeUp 1s 1.8s var(--ease-out) backwards; }

@keyframes fadeUp { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }

.reduced *,.reduced *::before,.reduced *::after { animation: none !important; transition: none !important; }

.reduced #loader { display: none; }