/* Lovely Trip — motion styles. Paired with js/motion.js.
   Elements stay hidden only when JS is active (html.js), so no-JS users
   still see everything. */

:root { --ease-out: cubic-bezier(.16, .84, .44, 1); }

/* Page fade-in */
html.js body { opacity: 0; }
html.js body.motion-ready { opacity: 1; transition: opacity .5s ease; }

/* Scroll-reveal base + variants */
html.js [data-reveal] {
  opacity: 0;
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out), filter .8s ease;
  transition-delay: var(--d, 0ms);
  will-change: opacity, transform;
}
html.js [data-reveal="up"]    { transform: translateY(42px); }
html.js [data-reveal="down"]  { transform: translateY(-42px); }
html.js [data-reveal="left"]  { transform: translateX(-52px); }
html.js [data-reveal="right"] { transform: translateX(52px); }
html.js [data-reveal="zoom"]  { transform: scale(.88); }
html.js [data-reveal="blur"]  { transform: translateY(26px); filter: blur(16px); }
html.js [data-reveal].is-in   { opacity: 1; transform: none; filter: none; }

/* Hero content entrance (in-view reveals fire on load) */
.hero [data-reveal] { transition-duration: 1s; }

/* Interactive helpers */
[data-magnetic] { transition: transform .3s var(--ease-out); }
[data-tilt] { transition: transform .3s var(--ease-out), box-shadow .3s; transform-style: preserve-3d; }

/* Floating decorative blobs */
.floaty { animation: floaty 6s ease-in-out infinite; }
.floaty.d1 { animation-delay: -2s; }
.floaty.d2 { animation-delay: -4s; }
@keyframes floaty {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-16px) rotate(4deg); }
}


/* Shimmer underline used on section headings */
.section-head h2::after,
.about-text h2::after { transition: width .6s var(--ease-out) .2s; }
html.js [data-reveal] .section-head h2::after { width: 0; }

@media (prefers-reduced-motion: reduce) {
  html.js body { opacity: 1 !important; }
  html.js [data-reveal] { opacity: 1 !important; transform: none !important; filter: none !important; }
  .hero-bg, .floaty { animation: none !important; }
}