/*!
 * Themeasy — Image Trail
 *
 * Hero-style section where moving the pointer scatters a trail of images that
 * pop in along the cursor path, tilt toward the movement direction and fade
 * away. A content block (eyebrow, title, description, CTA) anchors the section.
 *
 * Layering:
 * - Structure (content block, button) is pure CSS and always present, so the
 *   section is fully usable with no JavaScript.
 * - The trail items are hidden by default; the optional --collage modifier
 *   shows the first ones as a pure-CSS scattered collage wherever the trail
 *   cannot run (no JS, touch, reduced motion, editor --static).
 * - GSAP upgrades the canvas to the pointer-driven trail behind the JS-applied
 *   --enhanced class (fine pointer + hover, no reduced motion), which also
 *   turns the collage rules off; reverting restores the collage automatically.
 *
 * Tokens consumed: --tms-primary-color, --tms-heading-color, --tms-body-color,
 * --tms-heading-font, --tms-h2-font-size, --tms-font-size-sm,
 * --tms-body-line-height, --tms-bold-font-weight, --tms-button-bg-color,
 * --tms-button-text-color, --tms-semibold-font-weight, --tms-radius-pill,
 * --tms-transition-base (public --tms-* design API).
 *
 * @author Themeasy
 * @link https://themeasy.co
 * @since 1.0.0
 */
.tms-image-trail{--tms-image-trail-img-w:220px;--tms-image-trail-img-ratio:3 / 4;--tms-image-trail-collage-opacity:.6;--tms-image-trail-accent:var(--tms-primary-color,#5b6cff);--tms-image-trail-ease:cubic-bezier(.22, 1, .36, 1);isolation:isolate;flex-direction:column;justify-content:center;width:100%;min-height:70vh;padding:clamp(3rem,9vh,6rem) clamp(1.25rem,5vw,4rem);display:flex;position:relative;overflow:hidden}.tms-image-trail__canvas{z-index:1;pointer-events:none;position:absolute;top:0;bottom:0;left:0;right:0}.tms-image-trail--above.tms-image-trail--enhanced .tms-image-trail__canvas{z-index:3}.tms-image-trail__item{width:var(--tms-image-trail-img-w,220px);aspect-ratio:var(--tms-image-trail-img-ratio,3 / 4);opacity:0;visibility:hidden;border-radius:14px;position:absolute;top:0;left:0;overflow:hidden;box-shadow:0 24px 48px -16px #00000059}.tms-image-trail--enhanced .tms-image-trail__item{will-change:transform, opacity}.tms-image-trail__item .tms-image-trail__img{object-fit:cover;width:100%;height:100%;display:block}.tms-image-trail--collage:not(.tms-image-trail--enhanced) .tms-image-trail__item:nth-child(-n+7){opacity:var(--tms-image-trail-collage-opacity,.6);visibility:visible}.tms-image-trail--collage:not(.tms-image-trail--enhanced) .tms-image-trail__item:first-child{top:14%;left:6%;transform:translate(-50%,-50%)rotate(-7deg)}.tms-image-trail--collage:not(.tms-image-trail--enhanced) .tms-image-trail__item:nth-child(2){top:10%;left:76%;transform:translate(-50%,-50%)rotate(6deg)}.tms-image-trail--collage:not(.tms-image-trail--enhanced) .tms-image-trail__item:nth-child(3){top:76%;left:12%;transform:translate(-50%,-50%)rotate(5deg)}.tms-image-trail--collage:not(.tms-image-trail--enhanced) .tms-image-trail__item:nth-child(4){top:80%;left:84%;transform:translate(-50%,-50%)rotate(-5deg)}.tms-image-trail--collage:not(.tms-image-trail--enhanced) .tms-image-trail__item:nth-child(5){top:42%;left:92%;transform:translate(-50%,-50%)rotate(8deg)}.tms-image-trail--collage:not(.tms-image-trail--enhanced) .tms-image-trail__item:nth-child(6){top:46%;left:6%;transform:translate(-50%,-50%)rotate(-9deg)}.tms-image-trail--collage:not(.tms-image-trail--enhanced) .tms-image-trail__item:nth-child(7){top:90%;left:48%;transform:translate(-50%,-50%)rotate(3deg)}.tms-image-trail__content{z-index:2;text-align:center;flex-direction:column;align-items:center;width:100%;max-width:720px;margin-inline-start:auto;margin-inline-end:auto;display:flex;position:relative}.tms-image-trail__eyebrow{font-family:var(--tms-accent-font);font-size:var(--tms-font-size-sm,.875rem);font-weight:var(--tms-bold-font-weight,700);letter-spacing:.16em;text-transform:uppercase;color:var(--tms-image-trail-accent);margin-bottom:1rem;display:block}.tms-image-trail__title{font-size:var(--tms-h2-font-size,clamp(2.25rem, 5.5vw, 3.75rem));font-family:var(--tms-heading-font);font-weight:var(--tms-heading-font-weight,600);color:var(--tms-heading-color,#f5f6fa);margin:0 0 1.25rem;line-height:1.08}.tms-image-trail__description{line-height:var(--tms-body-line-height,1.6);color:var(--tms-body-color,#f5f6fa9e);margin:0 0 2rem}.tms-image-trail__actions{display:flex}.tms-image-trail__button{border-radius:var(--tms-radius-pill,999px);min-height:44px;font-weight:var(--tms-semibold-font-weight,600);color:var(--tms-button-text-color,#fff);background-color:var(--tms-button-bg-color,var(--tms-primary-color,#5b6cff));transition:color var(--tms-transition-base,.3s ease), background-color var(--tms-transition-base,.3s ease), border-color var(--tms-transition-base,.3s ease), box-shadow var(--tms-transition-base,.3s ease), transform var(--tms-transition-base,.3s ease);border:1px solid #0000;justify-content:center;align-items:center;padding:14px 32px;line-height:1.2;text-decoration:none;display:inline-flex}a.tms-image-trail__button:hover{box-shadow:0 14px 32px -12px var(--tms-image-trail-accent);transform:translateY(-2px)}a.tms-image-trail__button:focus-visible{outline:2px solid var(--tms-image-trail-accent);outline-offset:4px}a.tms-image-trail__button:active{transform:translateY(0)}.tms-image-trail__button--static{cursor:default}@media (max-width:767px){.tms-image-trail--collage:not(.tms-image-trail--enhanced) .tms-image-trail__item:nth-child(n+5){opacity:0;visibility:hidden}}@media (prefers-reduced-motion:reduce){.tms-image-trail__button{transition:none}a.tms-image-trail__button:hover{transform:none}}