/* Van Peptides, motion styles.
 * All effects fall back gracefully with prefers-reduced-motion.
 */

/* ============ scroll reveals ============ */
.reveal,
[data-reveal] {
 opacity: 0;
 transform: translate3d(0, 24px, 0);
 transition:
 opacity 900ms cubic-bezier(0.2, 0.8, 0.2, 1),
 transform 900ms cubic-bezier(0.2, 0.8, 0.2, 1);
 will-change: opacity, transform;
}
.reveal.is-in,
[data-reveal].is-in {
 opacity: 1;
 transform: translate3d(0, 0, 0);
}

[data-reveal-stagger] .reveal-child {
 opacity: 0;
 transform: translate3d(0, 22px, 0);
 transition:
 opacity 800ms cubic-bezier(0.2, 0.8, 0.2, 1),
 transform 800ms cubic-bezier(0.2, 0.8, 0.2, 1);
 will-change: opacity, transform;
}
[data-reveal-stagger].is-in .reveal-child {
 opacity: 1;
 transform: translate3d(0, 0, 0);
}

[data-reveal-mask] {
 opacity: 0;
 clip-path: inset(0 100% 0 0);
 transition:
 opacity 700ms cubic-bezier(0.2, 0.8, 0.2, 1),
 clip-path 1200ms cubic-bezier(0.65, 0.05, 0.36, 1);
 will-change: opacity, clip-path;
}
[data-reveal-mask].is-in {
 opacity: 1;
 clip-path: inset(0 0% 0 0);
}

/* ============ split headline reveal ============ */
[data-split] .split-word {
 display: inline-block;
 opacity: 0;
 transform: translate3d(0, 0.6em, 0) rotate(2deg);
 transition:
 opacity 700ms cubic-bezier(0.2, 0.8, 0.2, 1),
 transform 900ms cubic-bezier(0.2, 0.8, 0.2, 1);
 transition-delay: calc(var(--i, 0) * 55ms + 100ms);
 will-change: opacity, transform;
}
[data-split].is-in .split-word {
 opacity: 1;
 transform: translate3d(0, 0, 0) rotate(0deg);
}

/* ============ magnetic + tilt cleanup ============ */
[data-magnetic] {
 transition: transform 400ms cubic-bezier(0.2, 0.8, 0.2, 1);
 will-change: transform;
}
[data-tilt] {
 will-change: transform;
}

/* ============ custom cursor ============ */
.v-cursor.v-cursor-ring {
 position: fixed;
 top: 0; left: 0;
 pointer-events: none;
 z-index: 9999;
 mix-blend-mode: multiply;
}
.v-cursor {
 width: 6px; height: 6px;
 border-radius: 50%;
 background: #4E5A3E;
 transform: translate3d(-999px, -999px, 0);
 margin: -3px 0 0 -3px;
 transition: opacity 200ms;
}
.v-cursor-ring {
 width: 34px; height: 34px;
 border-radius: 50%;
 border: 1px solid rgba(78, 90, 62, 0.42);
 transform: translate3d(-999px, -999px, 0) translate(-50%, -50%);
 transition:
 width 240ms cubic-bezier(0.2, 0.8, 0.2, 1),
 height 240ms cubic-bezier(0.2, 0.8, 0.2, 1),
 background 240ms,
 border-color 240ms,
 opacity 220ms;
}
.v-cursor-ring.is-active {
 width: 62px; height: 62px;
 background: rgba(124, 138, 107, 0.10);
 border-color: rgba(124, 138, 107, 0.55);
}
@media (pointer: coarse), (prefers-reduced-motion: reduce) {
 .v-cursor.v-cursor-ring { display: none !important; }
}

/* ============ marquee ============ */
[data-marquee] {
 display: flex;
 gap: 4rem;
 align-items: center;
 width: max-content;
 animation: v-marquee linear infinite;
 animation-play-state: paused;
}
[data-marquee].is-running { animation-play-state: running; }
[data-marquee] > * { flex: 0 0 auto; }
.marquee-wrap {
 overflow: hidden;
 mask-image: linear-gradient(90deg, transparent 0, black 8%, black 92%, transparent 100%);
 -webkit-mask-image: linear-gradient(90deg, transparent 0, black 8%, black 92%, transparent 100%);
}
@keyframes v-marquee {
 from { transform: translate3d(0, 0, 0); }
 to { transform: translate3d(-50%, 0, 0); }
}

/* ============ sticky mobile CTA ============ */
[data-sticky-cta] {
 position: fixed;
 left: 16px; right: 16px; bottom: 16px;
 z-index: 40;
 opacity: 0;
 transform: translate3d(0, 24px, 0);
 transition:
 opacity 350ms cubic-bezier(0.2, 0.8, 0.2, 1),
 transform 350ms cubic-bezier(0.2, 0.8, 0.2, 1);
 pointer-events: none;
}
[data-sticky-cta].is-visible {
 opacity: 1;
 transform: translate3d(0, 0, 0);
 pointer-events: auto;
}
@media (min-width: 901px) {
 [data-sticky-cta] { display: none; }
}

/* ============ image hover lift ============ */
.lift {
 transition:
 transform 500ms cubic-bezier(0.2, 0.8, 0.2, 1),
 box-shadow 500ms cubic-bezier(0.2, 0.8, 0.2, 1);
 will-change: transform;
}
.lift:hover {
 transform: translate3d(0, -4px, 0);
 box-shadow: 0 30px 60px -30px rgba(48, 41, 31, 0.28);
}

/* ============ reduced motion honors ============ */
@media (prefers-reduced-motion: reduce) {
 .reveal,
 [data-reveal],
 [data-reveal-stagger] .reveal-child,
 [data-reveal-mask],
 [data-split] .split-word {
 opacity: 1 !important;
 transform: none !important;
 clip-path: none !important;
 transition: none !important;
 }
 [data-marquee] { animation: none !important; }
 .lift:hover { transform: none !important; box-shadow: none !important; }
}