/* Motion layer: reveals, tilt, stacking cards, marquee, app-card animations */

/* Home hero: soft painted paper instead of the full scene */
.hero-visual.hero-home {
  background:
    url("assets/img/wash-peach.webp") right -120px top -80px / 760px auto no-repeat,
    url("assets/img/wash-lav.webp") left -260px bottom -240px / 720px auto no-repeat,
    #FFF8F2;
}
.hero-vignette { width: min(100%, 520px); filter: drop-shadow(0 30px 50px rgba(46, 16, 101, 0.16)); }
.hero-home .stage { min-height: 0; padding: 0; }
.hero-home .fc-1 { top: 24%; left: -6px; }
.hero-home .fc-2 { top: 46%; right: -14px; }
.hero-home .fc-3 { bottom: 12%; left: -18px; }

/* Scroll reveal (only when JS is on) */
.js .reveal { opacity: 0; transform: translateY(32px) scale(0.98); transition: opacity 700ms ease, transform 700ms cubic-bezier(0.2, 0.7, 0.2, 1); transition-delay: var(--d, 0ms); }
.js .reveal.in { opacity: 1; transform: none; }

/* Tilt */
[data-tilt] { transform-style: preserve-3d; will-change: transform; }
.tilting { transition: transform 120ms ease-out !important; }
.tilt-reset { transition: transform 500ms cubic-bezier(0.2, 0.7, 0.2, 1) !important; }

/* Hover lift */
.tile, .art-card, .spot-card { transition: transform 300ms cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 300ms ease; }
.tile:hover, .art-card:hover, .spot-card:hover { box-shadow: 0 24px 50px rgba(46, 16, 101, 0.12); }
.tile-art img { transition: transform 500ms cubic-bezier(0.2, 0.7, 0.2, 1); }
.tile:hover .tile-art img { transform: translateY(-8px) rotate(-2deg) scale(1.03); }

/* Spot illustration cards */
.spot-card .spot { width: 100%; max-width: 260px; height: auto; margin: -8px auto 4px; display: block; }
.section-white .spot-card { background: #FCFAFF; }

/* Sticky stacking cards */
.stack { display: flex; flex-direction: column; gap: 40px; }
.stack-card { position: sticky; background: #fff; border: 1px solid var(--border); border-radius: 40px; padding: 48px; box-shadow: 0 -10px 40px rgba(46, 16, 101, 0.06); }
.stack-card .feature-row + .feature-row { margin-top: 0; }
.sc-1 { top: 96px; }
.sc-2 { top: 120px; background: #FFFBF8; }
.sc-3 { top: 144px; background: #FBFFFC; }
@media (max-width: 900px) {
  .stack-card { position: relative; top: auto; padding: 24px; border-radius: 28px; }
}

/* Marquee strip */
.marquee { overflow: hidden; background: var(--ink); color: #fff; padding: 18px 0; transform: rotate(-1deg); margin: 8px -10px 0; position: relative; z-index: 2; }
.marquee-track { display: flex; width: max-content; animation: marquee 32s linear infinite; }
.marquee span { font-family: var(--font-head); font-size: 22px; padding: 0 28px; white-space: nowrap; display: inline-flex; align-items: center; gap: 28px; }
.marquee span::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: #F9A8D4; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* App card animations: steps tick in, bar fills, tags pop */
.js .app-card .vstep .done { transform: scale(0); transition: transform 400ms cubic-bezier(0.3, 1.6, 0.5, 1); }
.js .app-card.play .vstep .done { transform: scale(1); }
.js .app-card.play .vstep:nth-of-type(2) .done { transition-delay: 300ms; }
.js .app-card.play .vstep:nth-of-type(3) .done { transition-delay: 700ms; }
.js .app-card.play .vstep:nth-of-type(4) .done { transition-delay: 1100ms; }
.js .app-card.play .vstep:nth-of-type(5) .done { transition-delay: 1500ms; }
.js .app-card .vstep { opacity: 0.45; transition: opacity 400ms ease; }
.js .app-card.play .vstep { opacity: 1; }
.js .app-card.play .vstep:nth-of-type(3) { transition-delay: 400ms; }
.js .app-card.play .vstep:nth-of-type(4) { transition-delay: 800ms; }
.js .app-card.play .vstep:nth-of-type(5) { transition-delay: 1200ms; }
.js .app-card .progress span { width: 0; transition: width 1700ms cubic-bezier(0.4, 0, 0.2, 1); }
.js .app-card.play .progress span { width: 100%; }
.js .app-card > .badge-ok { opacity: 0; transform: translateY(10px); transition: opacity 400ms ease 1700ms, transform 400ms ease 1700ms; }
.js .app-card.play > .badge-ok { opacity: 1; transform: none; }
.js .app-card .tagset span { transform: scale(0.6); opacity: 0; transition: transform 350ms cubic-bezier(0.3, 1.6, 0.5, 1), opacity 300ms ease; }
.js .app-card.play .tagset span { transform: scale(1); opacity: 1; }
.js .app-card.play .tagset span:nth-child(2) { transition-delay: 120ms; }
.js .app-card.play .tagset span:nth-child(3) { transition-delay: 240ms; }
.js .app-card.play .tagset span:nth-child(4) { transition-delay: 360ms; }
.js .app-card .mini-check span { opacity: 0; transform: translateX(-8px); transition: opacity 300ms ease, transform 300ms ease; }
.js .app-card.play .mini-check span { opacity: 1; transform: none; }
.js .app-card.play .mini-check span:nth-child(2) { transition-delay: 120ms; }
.js .app-card.play .mini-check span:nth-child(3) { transition-delay: 240ms; }
.js .app-card.play .mini-check span:nth-child(4) { transition-delay: 360ms; }
.js .app-card.play .mini-check span:nth-child(5) { transition-delay: 480ms; }
.js .app-card.play .mini-check span:nth-child(6) { transition-delay: 600ms; }

/* Floating painted art */
.hero-vignette { animation: drift 9s ease-in-out infinite; }
@keyframes drift { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* Button shine on primary CTAs */
.btn { position: relative; overflow: hidden; }
.btn::after { content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.35), transparent); transform: skewX(-20deg); transition: left 600ms ease; }
.btn:hover::after { left: 120%; }

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .marquee-track, .hero-vignette { animation: none; }
  .js .app-card .vstep .done, .js .app-card .tagset span, .js .app-card .mini-check span, .js .app-card > .badge-ok { transform: none; opacity: 1; transition: none; }
  .js .app-card .vstep { opacity: 1; }
  .js .app-card .progress span { width: 100%; transition: none; }
  .btn::after { display: none; }
  .stack-card { position: relative; top: auto; }
}