/* FinNLP 2027 motion layer. Everything here is progressive: without JS (no .m on <html>) the page is static. */

/* ---------- fireflies canvas + Kinkaku-ji screen ---------- */
.petal-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
header.hero > *:not(.scene):not(.petal-canvas),
header.page-head > *:not(.scene):not(.petal-canvas) { position: relative; z-index: 1; }
.scene { z-index: 0; }
.m .scene .art { animation: screen-in 2.4s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes screen-in { from { opacity: 0; } }

/* ---------- headline reveal ---------- */
.m .rv-word { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .06em; margin-bottom: -.06em; }
.m .rv-word > span { display: inline-block; transform: translateY(105%); transition: transform 1s cubic-bezier(.16, 1, .3, 1); }
.m .rv-in .rv-word > span { transform: none; }
.m .rv-fade { opacity: 0; transform: translateY(14px); transition: opacity .9s ease, transform 1s cubic-bezier(.16, 1, .3, 1); }
.m .rv-in .rv-fade, .m .rv-fade.rv-in { opacity: 1; transform: none; }

/* ---------- section reveals ---------- */
.m section.block > h2 { position: relative; border-bottom-color: transparent; }
.m section.block > h2::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--text);
  transform-origin: 0 50%; transform: scaleX(0); transition: transform 1s cubic-bezier(.16, 1, .3, 1) .1s; }
.m section.block.rv-in > h2::after { transform: scaleX(1); }
.m .rv-item { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .9s cubic-bezier(.16, 1, .3, 1); transition-delay: calc(var(--i, 0) * 45ms); }
.m .rv-in .rv-item { opacity: 1; transform: none; }

/* ---------- nav ---------- */
.nav-links a { position: relative; }
.nav-links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1.5px; background: var(--accent);
  transform: scaleX(0); transform-origin: 100% 50%; transition: transform .45s cubic-bezier(.16, 1, .3, 1);
}
.nav-links a:hover::after { transform: scaleX(1); transform-origin: 0 50%; }

/* ---------- CTA: magnetic, sheen, arrow ---------- */
.hero-cta { position: relative; overflow: hidden; translate: var(--mx, 0) var(--my, 0); transition: translate .35s cubic-bezier(.16, 1, .3, 1), background .2s, box-shadow .3s; }
.hero-cta::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent); transform: skewX(-18deg);
  transition: left .7s cubic-bezier(.16, 1, .3, 1);
}
.hero-cta:hover::before { left: 120%; }
.hero-cta svg { transition: transform .4s cubic-bezier(.16, 1, .3, 1); }
.hero-cta:hover svg { transform: translate(3px, -3px); }

/* ---------- cards: tilt + spotlight ---------- */
a.org, .cta-card, a.committee {
  transform: perspective(700px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--ty, 0px));
  transition: transform .5s cubic-bezier(.16, 1, .3, 1), border-color .2s, box-shadow .3s, background .2s;
  background-image: radial-gradient(240px circle at var(--sx, 50%) var(--sy, 50%), rgba(217, 169, 59, .14), transparent 60%);
}
a.org:hover, .cta-card:hover, a.committee:hover { --ty: -2px; }
a.org .avatar { transition: transform .5s cubic-bezier(.16, 1, .3, 1), border-color .2s; }
a.org:hover .avatar { transform: scale(1.07) rotate(-2deg); }

/* ---------- small rows ---------- */
.dates-table tr td:first-child, .topics-list li { transition: color .25s, transform .4s cubic-bezier(.16, 1, .3, 1); }
.topics-list li:hover { transform: translateX(4px); color: var(--text); }
.dates-table tr:hover td:first-child { color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  .petal-canvas { display: none; }
  .m .scene .art { animation: none; }
  .scene .pond { display: none; }
  .m .rv-word > span, .m .rv-fade, .m .rv-item { transform: none !important; opacity: 1 !important; transition: none !important; }
  .m section.block > h2::after { transform: none; }
  a.org, .cta-card, a.committee, .hero-cta { transform: none !important; translate: none !important; }
}