/*
 * Scroll-reveal motion layer for canvas invitations (studied from the "reveal on scroll"
 * style: slow 1.5s ease-out fades with a small travel, side slides, rotate-in ornaments,
 * springy pop for buttons). Only elements without a designer animation get a variant
 * (motion.js sets data-mo). Switch off in Customizer-free way: see inc/invitation-motion.php.
 */
html.mo-on #iv-content .cv-el[data-mo] {
	opacity: 0;
	transition-property: opacity, translate, scale, rotate;
	transition-duration: var(--mo-t, 1.5s);
	transition-timing-function: cubic-bezier(0, 0, .58, 1); /* Framer Motion "easeOut" */
	transition-delay: var(--mo-d, 0s);
}
html.mo-on #iv-content .cv-el[data-mo="up"]    { translate: 0 30px; }
html.mo-on #iv-content .cv-el[data-mo="zoom"]  { translate: 0 20px; scale: .95; }
html.mo-on #iv-content .cv-el[data-mo="left"]  { translate: -50px 0; }
html.mo-on #iv-content .cv-el[data-mo="right"] { translate: 50px 0; }
html.mo-on #iv-content .cv-el[data-mo="rot"]   { rotate: -15deg; scale: .9; }
/* Spring stiffness 60 / damping 20 is over-damped: no bounce, settles in ~1.4s. */
html.mo-on #iv-content .cv-el[data-mo="pop"]   { scale: .5; transition-timing-function: cubic-bezier(.2, .8, .3, 1); --mo-t: 1.4s; }
html.mo-on #iv-content .cv-el[data-mo="fade"]  { --mo-t: 1.2s; }

html.mo-on #iv-content .cv-el[data-mo].mo-in {
	opacity: 1;
	translate: 0 0;
	scale: 1;
	rotate: 0deg;
}

/* Designer entrance animations (data-cva="in") were 0.2-0.7s: slow them to the same 1.5s ease-out pace. */
html.mo-on #iv-content .cv-el[data-cva="in"].cv-on {
	animation-duration: max(var(--ad, 1s), 1.5s);
	animation-timing-function: cubic-bezier(0, 0, .58, 1);
}

/* Opening screen ------------------------------------------------------------ */
/* Hold the cover while the seal pops and the photo lifts, then fade out (0.7s after 1.1s). */
html.mo-on.iv-opening .cv-intro { transform: translateX(-50%); transition: opacity .7s ease-in-out 1.1s; }

/* Wax seal breathes until tapped, then pops. */
@keyframes moBreath { 0%, 100% { scale: 1; } 50% { scale: 1.05; } }
@keyframes moSealPop { 0% { scale: 1; } 50% { scale: 1.15; } 100% { scale: .9; } }
html.mo-on .mo-seal > .cv-i { animation: moBreath 2s ease-in-out infinite; }
html.mo-on.iv-opening .mo-seal > .cv-i { animation: moSealPop .4s ease-in-out forwards; }

/* Tap hint: pulsing hand next to the seal. */
@keyframes moTap { 0%, 100% { scale: 1; opacity: .85; } 50% { scale: 1.12; opacity: 1; } }
.mo-hand { position: absolute; right: -18px; bottom: -16px; width: 46px; height: 46px; pointer-events: none; z-index: 3; animation: moTap 1.2s ease-in-out infinite; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .35)); transition: opacity .3s ease; }
.mo-hand svg { width: 100%; height: 100%; display: block; }
.mo-hand--free { position: absolute; left: 50%; right: auto; bottom: 86px; translate: -50% 0; }
html.iv-opening .mo-hand { opacity: 0; animation: none; }

/* "Chạm để mở" text gently pulses. */
@keyframes moHint { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
html.mo-on .mo-hint > .cv-i { animation: moHint 1.6s ease-in-out infinite; }
html.mo-on.iv-opening .mo-hint > .cv-i { animation: none; opacity: 0; transition: opacity .3s ease; }

/* Cover photo lifts out of the envelope when opened. */
html.mo-on #iv-intro .mo-lift { transition: translate 1.1s cubic-bezier(.16, 1, .3, 1), scale 1.1s cubic-bezier(.16, 1, .3, 1); }
html.mo-on.iv-opening #iv-intro .mo-lift { translate: 0 -80px; scale: 1.05; }
html.mo-on.iv-opening #iv-intro .mo-lift--full { translate: none; scale: 1.05; }

/*
 * ?motion=full on a reduced-motion device: invitation.css caps every animation to .01ms and every
 * transition to .2s (!important). Restore the real timings so the owner can preview true speed.
 */
@media (prefers-reduced-motion: reduce) {
	html.mo-full #iv-content .cv-el[data-mo] { transition-duration: var(--mo-t, 1.5s) !important; }
	html.mo-full .cv-el[data-cva] { animation-duration: max(var(--ad, 1s), 1.5s) !important; animation-iteration-count: var(--ac, 1) !important; }
	html.mo-full .cv-el[data-cva="in"].cv-on, html.mo-full .cv-el[data-cva="loop"] { animation-name: var(--an) !important; }
	html.mo-full.iv-opening .cv-intro { transition-duration: .7s !important; }
	html.mo-full .mo-seal > .cv-i { animation-duration: 2s !important; animation-iteration-count: infinite !important; }
	html.mo-full.iv-opening .mo-seal > .cv-i { animation-duration: .4s !important; animation-iteration-count: 1 !important; }
	html.mo-full .mo-hand { animation-duration: 1.2s !important; animation-iteration-count: infinite !important; }
	html.mo-full .mo-hint > .cv-i { animation-duration: 1.6s !important; animation-iteration-count: infinite !important; }
	html.mo-full #iv-intro .mo-lift { transition-duration: 1.1s !important; }
}

/* Reduced motion (OS setting): fade only, no travel / scale / rotate. */
html.mo-on.mo-reduce #iv-content .cv-el[data-mo] { translate: none; scale: none; rotate: none; transition-property: opacity; --mo-t: .9s; }
html.mo-on.mo-reduce .mo-seal > .cv-i, html.mo-on.mo-reduce .mo-hint > .cv-i, html.mo-reduce .mo-hand { animation: none; }
html.mo-on.mo-reduce.iv-opening #iv-intro .mo-lift { translate: none; scale: none; }