/* ========================================================== TEXAS · MOTION UTILITY FRAMEWORK - Pure CSS3 + Intersection Observer - Prototype.js safe (no $ globals) - 60fps on mobile, premium hover effects on desktop ========================================================== */ /* ---------- TOKENS ---------- */ :root{ --motion-ease:cubic-bezier(.2,.8,.2,1); --motion-ease-soft:cubic-bezier(.25,.46,.45,.94); --motion-fast:.35s; --motion-base:.6s; --motion-slow:.9s; --motion-shadow-lift:0 18px 40px rgba(15,30,20,.12), 0 6px 14px rgba(15,30,20,.06); } /* ========================================================== 1. SCROLL REVEALS Base = visible (so non-JS / search engines see content) .js-motion-ready on opts in to hidden-then-reveal. ========================================================== */ /* Master gate: only animate once the JS confirms it loaded */ .js-motion-ready .reveal{ opacity:0; transition: opacity var(--motion-base) var(--motion-ease), transform var(--motion-base) var(--motion-ease), clip-path var(--motion-slow) var(--motion-ease), filter var(--motion-base) var(--motion-ease); will-change:opacity, transform; } .js-motion-ready .reveal.is-in{opacity:1; transform:none; filter:none; clip-path:inset(0 0 0 0)} /* Direction variants */ .js-motion-ready .reveal-up {transform:translate3d(0, 40px, 0)} .js-motion-ready .reveal-down {transform:translate3d(0, -40px, 0)} .js-motion-ready .reveal-right {transform:translate3d(48px, 0, 0)} .js-motion-ready .reveal-left {transform:translate3d(-48px, 0, 0)} .js-motion-ready .reveal-zoom {transform:scale(.92)} .js-motion-ready .reveal-blur {filter:blur(12px); transform:translate3d(0,16px,0)} /* Clip-path reveals (premium "curtain pull") */ .js-motion-ready .reveal-clip-up {clip-path:inset(100% 0 0 0)} .js-motion-ready .reveal-clip-down {clip-path:inset(0 0 100% 0)} .js-motion-ready .reveal-clip-x {clip-path:inset(0 50% 0 50%)} /* Staggered reveals — children pop sequentially. Add .reveal-stagger to a parent; each direct child gets its own delay. */ .js-motion-ready .reveal-stagger > *{ opacity:0; transform:translate3d(0, 30px, 0); transition: opacity var(--motion-base) var(--motion-ease), transform var(--motion-base) var(--motion-ease); will-change:opacity, transform; } .js-motion-ready .reveal-stagger.is-in > *{opacity:1; transform:none} .js-motion-ready .reveal-stagger.is-in > *:nth-child(1){transition-delay:.04s} .js-motion-ready .reveal-stagger.is-in > *:nth-child(2){transition-delay:.12s} .js-motion-ready .reveal-stagger.is-in > *:nth-child(3){transition-delay:.20s} .js-motion-ready .reveal-stagger.is-in > *:nth-child(4){transition-delay:.28s} .js-motion-ready .reveal-stagger.is-in > *:nth-child(5){transition-delay:.36s} .js-motion-ready .reveal-stagger.is-in > *:nth-child(6){transition-delay:.44s} .js-motion-ready .reveal-stagger.is-in > *:nth-child(7){transition-delay:.52s} .js-motion-ready .reveal-stagger.is-in > *:nth-child(8){transition-delay:.60s} .js-motion-ready .reveal-stagger.is-in > *:nth-child(n+9){transition-delay:.68s} /* Manual delay helpers (use sparingly) */ .js-motion-ready .reveal-d-1{transition-delay:.08s} .js-motion-ready .reveal-d-2{transition-delay:.16s} .js-motion-ready .reveal-d-3{transition-delay:.24s} .js-motion-ready .reveal-d-4{transition-delay:.32s} /* ========================================================== 2. MICRO-INTERACTIONS Desktop hover only — kept off touch / small screens. ========================================================== */ /* Premium card — soft lift + subtle Ken Burns on inner image */ .premium-card{ position:relative; border-radius:16px; overflow:hidden; background:#fff; box-shadow:0 1px 2px rgba(15,30,20,.04), 0 1px 1px rgba(15,30,20,.03); transform:translateZ(0); } .premium-card .premium-card__media{ overflow:hidden; } .premium-card .premium-card__media img{ display:block; width:100%; height:100%; object-fit:cover; } @media (hover:hover) and (min-width:768px){ .premium-card{ transition: transform var(--motion-fast) var(--motion-ease), box-shadow var(--motion-fast) var(--motion-ease); } .premium-card .premium-card__media img{ transition:transform 1.2s var(--motion-ease-soft); } .premium-card:hover{ transform:translate3d(0, -6px, 0); box-shadow:var(--motion-shadow-lift); } .premium-card:hover .premium-card__media img{ transform:scale(1.06); } } /* Hover-lift — generic, lighter version (no inner image) */ @media (hover:hover) and (min-width:768px){ .hover-lift{ transition: transform var(--motion-fast) var(--motion-ease), box-shadow var(--motion-fast) var(--motion-ease); } .hover-lift:hover{ transform:translate3d(0, -4px, 0); box-shadow:var(--motion-shadow-lift); } } /* Shine button — sweeping highlight across the surface on hover */ .btn-shine{ position:relative; overflow:hidden; isolation:isolate; } .btn-shine::after{ content:""; position:absolute; top:0; bottom:0; left:-120%; width:80%; background:linear-gradient( 100deg, transparent 20%, rgba(255,255,255,.45) 50%, transparent 80% ); transform:skewX(-18deg); pointer-events:none; transition:none; } @media (hover:hover) and (min-width:768px){ .btn-shine:hover::after{ animation:btnShine .9s var(--motion-ease) forwards; } } @keyframes btnShine{ from{left:-120%} to {left:120%} } /* Magnetic hover — lifts and tilts toward cursor; JS provides --mx/--my (-1..1) */ @media (hover:hover) and (min-width:768px){ .magnetic{ transition:transform .35s var(--motion-ease); will-change:transform; } .magnetic.is-magnetic{ transform:translate3d( calc(var(--mx, 0) * 6px), calc(var(--my, 0) * 6px), 0 ); transition:transform .12s linear; } } /* ========================================================== 3. ACCESSIBILITY ========================================================== */ @media (prefers-reduced-motion: reduce){ .js-motion-ready .reveal, .js-motion-ready .reveal-stagger > *, .premium-card, .premium-card .premium-card__media img, .hover-lift, .magnetic{ transition:none !important; animation:none !important; transform:none !important; opacity:1 !important; filter:none !important; clip-path:none !important; } }