/* Preloader, scroll reveals, page transitions, micro-interactions */
#preloader { position:fixed; inset:0; z-index:100; display:grid; place-items:center; color:#FBF5EF; }
.pl-curtain { position:absolute; left:0; right:0; height:50.5%; background:#3E2C25; transition:transform 1s var(--ease) .25s; }
.pl-top { top:0; } .pl-bot { bottom:0; }
.pl-core { position:relative; text-align:center; transition:opacity .4s, transform .7s var(--ease); }
.pl-logo { display:flex; justify-content:center; font:500 clamp(46px,13vw,76px)/1 var(--serif); letter-spacing:.24em; margin-right:-.24em; }
.pl-logo span { display:inline-block; opacity:0; transform:translateY(45%) rotate(4deg); animation:plRise 1s var(--ease) forwards; animation-delay:calc(var(--i) * .13s + .1s); }
.pl-core p { margin-top:10px; font-size:10px; letter-spacing:.32em; text-transform:uppercase; color:#C9B6A8; opacity:0; animation:fadeIn .9s .8s forwards; }
.pl-bar { width:150px; height:1px; margin:24px auto 0; background:rgba(255,255,255,.18); overflow:hidden; }
.pl-bar i { display:block; height:100%; background:#F0CFC4; transform:scaleX(0); transform-origin:left; animation:plBar 1.7s var(--ease) .2s forwards; }
#preloader.done { pointer-events:none; }
#preloader.done .pl-core { opacity:0; transform:translateY(-14px); }
#preloader.done .pl-top { transform:translateY(-101%); } #preloader.done .pl-bot { transform:translateY(101%); }
@keyframes plRise { to { opacity:1; transform:none; } }
@keyframes plBar { to { transform:scaleX(1); } }
@keyframes fadeIn { to { opacity:1; } }

/* Scroll reveal: elements opt in with data-reveal ("up" default, "fade", "zoom") */
[data-reveal] { opacity:0; transform:translateY(26px); transition:opacity .9s var(--ease), transform .9s var(--ease); transition-delay:var(--d,0ms); }
[data-reveal="fade"] { transform:none; } [data-reveal="zoom"] { transform:scale(.94); }
[data-reveal].in { opacity:1; transform:none; }

/* Page transitions */
#outlet { outline:none; transition:opacity .22s ease, transform .22s ease; }
#outlet.leaving { opacity:0; transform:translateY(10px); }
#outlet.entering { animation:pageIn .6s var(--ease) both; }
@keyframes pageIn { from { opacity:0; transform:translateY(14px); } }

/* Hero entrance (starts once the preloader lifts) */
[data-hero] { opacity:0; }
body.ready [data-hero] { animation:riseIn 1s var(--ease) both; animation-delay:calc(var(--h,0) * 120ms + 100ms); }
body.ready .hero-art { animation:floaty 7s ease-in-out infinite; }
@keyframes riseIn { from { opacity:0; transform:translateY(30px); } to { opacity:1; transform:none; } }
@keyframes floaty { 50% { transform:translateY(-10px) rotate(1deg); } }

/* Micro-interactions */
#drawer.on .dr-panel a { animation:slideIn .5s var(--ease) both; animation-delay:calc(var(--i) * 45ms + 150ms); }
@keyframes slideIn { from { opacity:0; transform:translateX(-16px); } }
.pop { animation:pop .45s var(--ease); } @keyframes pop { 40% { transform:scale(1.3); } }
.swap svg { animation:swap .5s var(--ease); } @keyframes swap { from { opacity:.2; transform:scale(.9); } }
.grid.refresh > * { animation:riseIn .5s var(--ease) both; }
.removing { opacity:0; transform:scale(.95); transition:.25s; }

@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:.01ms !important; animation-delay:0s !important; transition-duration:.01ms !important; transition-delay:0s !important; }
  [data-reveal],[data-hero] { opacity:1; transform:none; }
}