/** * Hero title reveal (page Cover H1 + carousel slide headings). * Mirrors the CodePen masked line rise — each is one line. */ /* * Prevent flash of final title before deferred JS wraps/animates. * Only when html.sohk-js is set (inline in ) so no-JS stays visible. */ html.sohk-js .entry-content > .wp-block-cover h1.wp-block-heading:not( .is-title-ready ) mark, html.sohk-js .entry-content > .wp-block-cover h2.wp-block-heading:not( .is-title-ready ) mark, html.sohk-js .wp-block-post-content > .wp-block-cover h1.wp-block-heading:not( .is-title-ready ) mark, html.sohk-js .wp-block-post-content > .wp-block-cover h2.wp-block-heading:not( .is-title-ready ) mark, html.sohk-js .sohk-featured-hero .wp-block-heading:not( .is-title-ready ) mark, html.sohk-js .sohk-hero-slide__content .wp-block-heading:not( .is-title-ready ) mark { opacity: 0; } /* Stack colour bars tight — same idea as carousel / Cover H1 rules. */ .sohk-hero-title { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 0; line-height: 0; } .sohk-hero-title br { display: none !important; } .sohk-hero-title__mask { display: block; overflow: hidden; width: fit-content; max-width: 100%; line-height: 0; } /* Keep colour-bar mark layout inside the mask. */ .sohk-hero-title__mask > mark, .sohk-hero-title__mask > span { display: block; width: fit-content; max-width: 100%; line-height: 1.5; } .sohk-hero-title:not( .is-title-ready ) .sohk-hero-title__mask > mark, .sohk-hero-title:not( .is-title-ready ) .sohk-hero-title__mask > span { opacity: 0; transform: translate3d( 0, 50px, 0 ); } .sohk-hero-title.is-title-ready:not( .is-title-reduced ) .sohk-hero-title__mask > mark, .sohk-hero-title.is-title-ready:not( .is-title-reduced ) .sohk-hero-title__mask > span { animation: sohk-hero-title-in 0.7s cubic-bezier( 0.215, 0.61, 0.355, 1 ) both; animation-delay: calc( var( --sohk-title-i, 0 ) * 0.15s ); } .sohk-hero-title.is-title-reduced .sohk-hero-title__mask > mark, .sohk-hero-title.is-title-reduced .sohk-hero-title__mask > span { opacity: 1; transform: none; } @keyframes sohk-hero-title-in { from { opacity: 0; transform: translate3d( 0, 50px, 0 ); } to { opacity: 1; transform: translate3d( 0, 0, 0 ); } } @media ( prefers-reduced-motion: reduce ) { html.sohk-js .entry-content > .wp-block-cover h1.wp-block-heading mark, html.sohk-js .entry-content > .wp-block-cover h2.wp-block-heading mark, html.sohk-js .wp-block-post-content > .wp-block-cover h1.wp-block-heading mark, html.sohk-js .wp-block-post-content > .wp-block-cover h2.wp-block-heading mark, html.sohk-js .sohk-featured-hero .wp-block-heading mark, html.sohk-js .sohk-hero-slide__content .wp-block-heading mark, .sohk-hero-title .sohk-hero-title__mask > mark, .sohk-hero-title .sohk-hero-title__mask > span { animation: none !important; opacity: 1 !important; transform: none !important; } }