/* ==========================================================================
   Home motion pack (trial). Hidden states apply only once anim.js has put
   .dm-anim on <html>, so content never stays invisible if JS fails.
   ========================================================================== */

/* 2. Hero title: letters rise one by one, then the swash draws */
.dm-anim .dm-h5__title .dm-ch { display: inline-block; opacity: 0; transform: translateY(70%) rotate(6deg); animation: dm-ch-in .75s cubic-bezier(.2, .8, .2, 1) calc(.15s + var(--i) * 45ms) forwards; }
.dm-anim .dm-h5__title .dm-sp { display: inline-block; width: .28em; }
@keyframes dm-ch-in { to { opacity: 1; transform: none; } }
.dm-anim .dm-h5__swash { animation-delay: 1.05s !important; }

/* 1. Hero depth: pieces follow the mouse (JS sets the translate property) */
.dm-h5__models, .dm-h5__panel, .dm-h5__word { transition: translate .6s cubic-bezier(.2, .8, .2, 1); will-change: translate; }

/* 3. Big banner photos zoom as you scroll (JS sets the scale property) */
.dm-men__photo, .dm-wc__photo { will-change: scale; transform-origin: 50% 40%; }

/* 4. Cards arrive one after another */
.dm-anim .dm-rv { opacity: 0; translate: 0 36px; transition: opacity .7s ease, translate .8s cubic-bezier(.2, .8, .2, 1); transition-delay: calc(var(--d, 0) * 90ms); }
.dm-anim .dm-rv.is-in { opacity: 1; translate: 0 0; }

/* 5. "Move Better" writes itself */
.dm-anim .dm-wr { opacity: 0; }
.dm-anim .dm-wr.is-in { opacity: 1; animation: dm-write 1.8s cubic-bezier(.6, .1, .3, 1) .2s both; }
@keyframes dm-write { from { clip-path: inset(-20% 100% -20% -10%); } to { clip-path: inset(-20% -10% -20% -10%); } }

/* 6. Second photo on hover */
.dm-card__alt { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .45s ease, scale .8s ease; scale: 1.04; pointer-events: none; }
.dm-card:hover .dm-card__alt { opacity: 1; scale: 1; }
.dm-card__media { position: relative; }

/* 8. Endless ticker */
.dm-ticker { overflow: hidden; background: var(--lime, #b6fa0e); color: #0d0d0d; border-block: 2px solid #0d0d0d; transform: rotate(-1.2deg) scale(1.02); margin: 26px 0; }
body.home main { overflow-x: clip; }
.dm-ticker__track { display: flex; width: max-content; animation: dm-tick 26s linear infinite; }
.dm-ticker:hover .dm-ticker__track { animation-play-state: paused; }
.dm-ticker__list { display: flex; flex: none; margin: 0; padding: 0; list-style: none; }
.dm-ticker__list li { display: flex; align-items: center; gap: 28px; padding: 14px 0 12px 28px; font-family: "Kanit", var(--f-sans); font-weight: 900; font-style: italic; font-size: clamp(18px, 1.9vw, 30px); line-height: 1; text-transform: uppercase; white-space: nowrap; }
.dm-ticker__list li::after { content: ""; width: 14px; height: 14px; background: #0d0d0d; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
@keyframes dm-tick { to { transform: translateX(-50%); } }

/* 9. Headings wipe up, eyebrow lines draw */
.dm-anim .dm-hd { opacity: 0; }
.dm-anim .dm-hd.is-in { opacity: 1; animation: dm-wipe .9s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes dm-wipe { from { clip-path: inset(0 0 100% 0); translate: 0 26px; } to { clip-path: inset(-10% -5% -20% -5%); translate: 0 0; } }
.dm-anim .dm-eb::before { transform: scaleX(0); transform-origin: left center; transition: transform .8s cubic-bezier(.2, .8, .2, 1) .15s; }
.dm-anim .dm-eb.is-in::before { transform: none; }

/* 10. Stats band */
.dm-numbers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: clamp(30px, 4vw, 60px) var(--gutter); padding: clamp(26px, 3vw, 44px) 0; border-radius: 18px; background: #0d0d0d; color: #fff; }
.dm-numbers__item { padding: 4px clamp(14px, 2vw, 34px); text-align: center; }
.dm-numbers__item + .dm-numbers__item { border-left: 1px solid rgba(255, 255, 255, .14); }
.dm-numbers__num { margin: 0; font-family: "Kanit", var(--f-sans); font-weight: 900; font-style: italic; font-size: clamp(34px, 4vw, 64px); line-height: 1; color: var(--lime, #b6fa0e); font-variant-numeric: tabular-nums; }
.dm-numbers__label { margin: 10px 0 0; font-size: clamp(12px, 1vw, 15px); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #cfcfcf; }
@media (max-width: 700px) {
	.dm-numbers { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 24px; }
	.dm-numbers__item:nth-child(3) { border-left: 0; }
}

/* Respect "reduce motion" */
@media (prefers-reduced-motion: reduce) {
	.dm-anim .dm-h5__title .dm-ch, .dm-anim .dm-rv, .dm-anim .dm-wr, .dm-anim .dm-hd, .dm-anim .dm-eb::before { animation: none !important; transition: none !important; opacity: 1 !important; transform: none !important; translate: none !important; clip-path: none !important; }
	.dm-ticker__track { animation: none; }
}