/** * DailyTechWire — Display / scroll animations. * * Loaded by dailytechwire_enqueue_assets() in functions.php. * Paired with assets/dtw-animations.js, which adds the .dtw-anim-ready flag * to and toggles .is-visible on elements as they enter the viewport. * * All motion is gated behind .dtw-anim-ready so that, if JS is disabled or * fails, every element stays fully visible (progressive enhancement). * prefers-reduced-motion users get the final state with no transitions. */ /* ---------------------------------------------------------------------------- * 1. Base reveal — fade + slide up * The JS tags target elements with .dtw-reveal. Until JS marks ready, * nothing is hidden, so no-JS visitors see full content. * -------------------------------------------------------------------------- */ .dtw-anim-ready .dtw-reveal { opacity: 0; transform: translateY(26px); will-change: opacity, transform; transition: opacity 3.05s cubic-bezier(0.16, 1, 0.3, 1), transform 3.05s cubic-bezier(0.16, 1, 0.3, 1); } .dtw-anim-ready .dtw-reveal.is-visible { opacity: 1; transform: none; } /* Directional variants (set by JS via data-anim) */ .dtw-anim-ready .dtw-reveal[data-anim="left"] { transform: translateX(-28px); } .dtw-anim-ready .dtw-reveal[data-anim="right"] { transform: translateX(28px); } .dtw-anim-ready .dtw-reveal[data-anim="zoom"] { transform: scale(0.96); } .dtw-anim-ready .dtw-reveal[data-anim="left"].is-visible, .dtw-anim-ready .dtw-reveal[data-anim="right"].is-visible, .dtw-anim-ready .dtw-reveal[data-anim="zoom"].is-visible { transform: none; } /* ---------------------------------------------------------------------------- * 2. Hover lift — gives cards a tactile feel * -------------------------------------------------------------------------- */ .dtw-anim-ready .hero-side .card, .dtw-anim-ready .wire-item, .dtw-anim-ready .pcol, .dtw-anim-ready .review, .dtw-anim-ready .pod-card, .dtw-anim-ready .dash-card, .dtw-anim-ready .nl-item, .dtw-anim-ready .sponsored-grid .card { transition: transform 1.28s ease, box-shadow 0.28s ease; } .dtw-anim-ready .hero-side .card:hover, .dtw-anim-ready .wire-item:hover, .dtw-anim-ready .pcol:hover, .dtw-anim-ready .review:hover, .dtw-anim-ready .pod-card:hover, .dtw-anim-ready .dash-card:hover, .dtw-anim-ready .nl-item:hover, .dtw-anim-ready .sponsored-grid .card:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(15, 23, 42, 0.12); } /* Image zoom-on-hover inside any framed thumbnail */ .dtw-anim-ready .hero-img, .dtw-anim-ready .ph.has-img, .dtw-anim-ready .review .ph { overflow: hidden; } .dtw-anim-ready .hero-img img, .dtw-anim-ready .ph.has-img img, .dtw-anim-ready .review .ph img { transition: transform 1.75s cubic-bezier(0.16, 1, 0.3, 1); } .dtw-anim-ready .hero-img:hover img, .dtw-anim-ready .ph.has-img:hover img, .dtw-anim-ready .review .ph:hover img { transform: scale(1.05); } /* ---------------------------------------------------------------------------- * 3. Leaderboard bars — grow from 0 to their inline width when revealed * The original inline `style="width:94%"` is preserved; JS stashes it in * --dtw-bar-w and zeroes the live width until the row is visible. * -------------------------------------------------------------------------- */ .dtw-anim-ready .dash-card .bar i, .dtw-anim-ready .dash .bar i { transition: width 2.4s cubic-bezier(0.16, 1, 0.3, 1); } /* ---------------------------------------------------------------------------- * 4. Live "pulse" dot — soft breathing ring (used by .pulse markers) * -------------------------------------------------------------------------- */ .dtw-anim-ready .pulse { position: relative; } .dtw-anim-ready .pulse::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 0 currentColor; animation: dtw-pulse-ring 1.8s ease-out infinite; opacity: 0.55; } @keyframes dtw-pulse-ring { 0% { box-shadow: 0 0 0 0 currentColor; opacity: 0.55; } 70% { box-shadow: 0 0 0 9px currentColor; opacity: 0; } 100% { box-shadow: 0 0 0 0 currentColor; opacity: 0; } } /* ---------------------------------------------------------------------------- * 5. Breaking-news wire item — subtle attention sweep on first reveal * -------------------------------------------------------------------------- */ .dtw-anim-ready .wire-item.breaking.is-visible { animation: dtw-breaking-flash 1.4s ease-out 1; } @keyframes dtw-breaking-flash { 0% { box-shadow: 0 0 0 0 rgba(225, 29, 72, 0.35); } 60% { box-shadow: 0 0 0 6px rgba(225, 29, 72, 0); } 100% { box-shadow: 0 0 0 0 rgba(225, 29, 72, 0); } } /* ---------------------------------------------------------------------------- * 6. Reduced motion — honour the OS setting; show final state, no animation * -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .dtw-anim-ready .dtw-reveal, .dtw-anim-ready .dtw-reveal[data-anim] { opacity: 1 !important; transform: none !important; transition: none !important; } .dtw-anim-ready .pulse::after, .dtw-anim-ready .wire-item.breaking.is-visible { animation: none !important; } .dtw-anim-ready .dash-card .bar i, .dtw-anim-ready .dash .bar i { transition: none !important; } }