/* NSM motion layer, 2026-09-24 (source: drip-ops/clients/newsocietymedia-wp/mu-plugins/nsm-motion/).
   1. tokens               5. header on scroll
   2. hero load motion     6. logo marquee
   3. scroll entrances     7. reviews: clamp + Read more
   4. hover                8. reduced motion
   9. header menu (2026-10-01): title underline, chevron turn, panel entrance, row cascade
   10. sliding text bands (2026-10-01)
   Elementor pages get CSS here only where Elementor has no control: below-the-fold-only entrances
   with a cascade and the hero load motion (native entrance animations keep content invisible until
   Elementor's JS runs, which delays the largest paint), the header
   hide-on-scroll, the marquee pause and the review clamp. Hovers with a native control (review card
   border, logo lift) are set in Elementor by scripts/apply-reviews-0924.mjs.
   Nothing here hides content unless html.nsm-js (head gate) is set AND nsm-motion.js tagged the
   element .nsm-wait; the hero animations always end fully visible. */

/* 1. tokens ------------------------------------------------------------------------- */
:root{
  --nsm-ease:cubic-bezier(.2,.7,.2,1);
  --nsm-spring:cubic-bezier(.22,1.2,.36,1);
  --nsm-spring-soft:cubic-bezier(.16,1,.3,1);
}

/* 2. hero load motion (above the fold, CSS only, so it runs before any script) --------- */
@keyframes nsmRise{from{opacity:.001;translate:0 22px}to{opacity:1;translate:none}}
@keyframes nsmSettle{from{opacity:.001;scale:1.06}to{opacity:1;scale:1}}
html.nsm-js .nsm-hero .elementor-widget:not(.elementor-widget-image){animation:nsmRise .9s var(--nsm-spring-soft) both}
html.nsm-js .nsm-hero .elementor-widget-image{animation:nsmSettle 1.3s var(--nsm-ease) both .15s}
html.nsm-js .nsm-hero .elementor-widget:nth-child(2){animation-delay:.08s}
html.nsm-js .nsm-hero .elementor-widget:nth-child(3){animation-delay:.16s}
html.nsm-js .nsm-hero .elementor-widget:nth-child(4){animation-delay:.24s}
html.nsm-js .nsm-hero .elementor-widget:nth-child(n+5){animation-delay:.32s}
html.nsm-js .nsm-page .nsm-hero .nsm-grid2>div:first-child>*{animation:nsmRise .9s var(--nsm-spring-soft) both}
html.nsm-js .nsm-page .nsm-hero .nsm-grid2>div:first-child>:nth-child(2){animation-delay:.08s}
html.nsm-js .nsm-page .nsm-hero .nsm-grid2>div:first-child>:nth-child(3){animation-delay:.16s}
html.nsm-js .nsm-page .nsm-hero .nsm-grid2>div:first-child>:nth-child(n+4){animation-delay:.24s}
html.nsm-js .nsm-page .nsm-hero .nsm-figure{animation:nsmRise 1s var(--nsm-spring-soft) both .12s}
html.nsm-js .nsm-page .nsm-hero .nsm-figure img{animation:nsmSettle 1.4s var(--nsm-ease) both .12s}

/* 2b. calm mode (touch screens, and anything narrower than the desktop header): the hero only fades
       in, nothing rises or scales. nsm-motion.js also skips the scroll entrances and the header's
       hide-on-scroll there, so on a phone the only things that move are the sliding text bands. */
@keyframes nsmFade{from{opacity:.001}to{opacity:1}}
@media (hover:none),(pointer:coarse),(max-width:1024px){
  html.nsm-js .nsm-hero .elementor-widget,html.nsm-js .nsm-hero .elementor-widget-image,
  html.nsm-js .nsm-page .nsm-hero .nsm-grid2>div:first-child>*,
  html.nsm-js .nsm-page .nsm-hero .nsm-figure,html.nsm-js .nsm-page .nsm-hero .nsm-figure img{
    animation-name:nsmFade!important;animation-duration:.5s!important;animation-delay:0s!important}
  /* 2026-10-02: Elementor turns on smooth scrolling for the whole page. On a touch screen that also
     animates the jumps the browser makes by itself (back to where you were after Back or a reload, a
     link to a spot further down a 10,000px page), which reads as the page running away under the
     thumb. A finger scroll is already smooth; jumps on these screens are instant. */
  html{scroll-behavior:auto!important}
  /* the review row scrolls sideways: a sideways swipe that reaches its end must not drag the page */
  .nsm-rev-track{overscroll-behavior-x:contain}
}

/* 3. scroll entrances (nsm-motion.js tags below-the-fold elements .nsm-wait, then .nsm-go) */
html.nsm-js .nsm-wait{opacity:0;translate:0 26px;transition:none!important}
html.nsm-js .nsm-wait.nsm-card-in{translate:0 36px;scale:.96}
html.nsm-js .nsm-wait.nsm-go{opacity:1;translate:none;scale:none;
  transition:opacity .6s var(--nsm-ease) var(--nsm-d,0ms),translate .95s var(--nsm-spring-soft) var(--nsm-d,0ms),scale .95s var(--nsm-spring-soft) var(--nsm-d,0ms)!important}
html.nsm-js .nsm-wait.nsm-go.nsm-fast{transition-duration:.3s!important;transition-delay:0s!important}
@media (max-width:767px){
  html.nsm-js .nsm-wait{translate:0 18px}
  html.nsm-js .nsm-wait.nsm-card-in{translate:0 28px;scale:.98}
}

/* 4. hover ------------------------------------------------------------------------- */
@media (hover:hover) and (pointer:fine){
  .nsm-page .nsm-figure{overflow:hidden}
  .nsm-page .nsm-figure img{transition:scale .9s var(--nsm-ease)}
  .nsm-page .nsm-figure:hover img{scale:1.045}
  .nsm-page .nsm-card{transition:translate .45s var(--nsm-spring),box-shadow .45s var(--nsm-ease),border-color .3s ease}
  .nsm-page .nsm-card:hover{translate:0 -4px;box-shadow:0 18px 40px rgba(3,7,18,.28);border-color:rgba(143,180,208,.32)}
  .nsm-page .nsm-list.nsm-faq>li{transition:background-color .3s ease}
}

/* 5. header on scroll: the sticky <header> slides away while scrolling down and comes back
      the moment you scroll up (desktop and phones alike) ------------------------------- */
.elementor-location-header{transition:translate .4s var(--nsm-ease)}
body.nsm-dir-down .elementor-location-header{translate:0 -110%}

/* 6. logo marquee: pauses on hover and while off screen. Hover only where there is a real pointer:
      on a touch screen :hover sticks to whatever the thumb last touched, so a band touched while
      scrolling froze until something else was tapped (2026-10-02). -------------------------------- */
.nsm-logomarquee.nsm-off .nsm-logotrack{animation-play-state:paused}
@media (hover:hover) and (pointer:fine){.nsm-logomarquee:hover .nsm-logotrack{animation-play-state:paused}}

/* 7. reviews: long reviews clamp to eight lines with a Read more toggle; an open card
      grows on its own instead of stretching the whole row ------------------------------ */
.nsm-rev-q p{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:8;line-clamp:8;overflow:hidden}
.nsm-rev-card.nsm-open .nsm-rev-q p{display:block;-webkit-line-clamp:unset;line-clamp:none;overflow:visible}
.nsm-rev-track.nsm-has-open{align-items:flex-start!important}
.nsm-rev-more{appearance:none;background:none;border:0;padding:0;margin:0 0 14px;cursor:pointer;align-self:flex-start;
  font:600 14px/1.4 Outfit,sans-serif;color:#8FB4D0;display:inline-flex;align-items:center;gap:6px}
.nsm-rev-more::after{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  rotate:45deg;translate:0 -2px;transition:rotate .35s var(--nsm-spring),translate .35s var(--nsm-spring)}
.nsm-open .nsm-rev-more::after{rotate:225deg;translate:0 2px}
.nsm-rev-more:hover{color:#FFFFFF}
/* 2026-10-01: the Read more row (20px + 14px) used to appear when the script ran, which made the whole
   review band 34px taller after the page was already on screen (Safari then jumps whatever is below).
   Its space is now reserved under every quote from the first paint and the button sits in it. */
.nsm-rev-card .nsm-rev-q{margin-bottom:46px!important}
.nsm-rev-card .nsm-rev-more{margin:-34px 0 14px}
.nsm-rev-more:focus-visible{outline:2px solid #8FB4D0;outline-offset:3px;border-radius:4px}
@media (max-width:767px){.nsm-rev-more{align-self:center}}

/* 9. header menu (Elementor Menu widget .nsm-nav, built by scripts/apply-header-1001.mjs).
      The widget's only open animation is a plain fade, so the panel entrance, the row cascade,
      the title underline and the chevron turn live here. Colours and spacing are widget settings. */
.nsm-nav .e-n-menu-title-text{position:relative}
.nsm-nav .e-n-menu-title-text::after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:2px;border-radius:2px;
  background:#56788F;scale:0 1;transform-origin:0 50%;transition:scale .4s var(--nsm-ease)}
.nsm-nav .e-n-menu-title:hover .e-n-menu-title-text::after,
.nsm-nav .e-n-menu-title:focus-within .e-n-menu-title-text::after,
.nsm-nav .e-n-menu-title.e-current .e-n-menu-title-text::after,
.nsm-nav .e-n-menu-item:has(.e-n-menu-dropdown-icon[aria-expanded=true]) .e-n-menu-title-text::after{scale:1 1}
/* one chevron that turns, instead of the widget swapping two icons */
.nsm-nav .e-n-menu-dropdown-icon .e-n-menu-dropdown-icon-opened{display:none!important}
.nsm-nav .e-n-menu-dropdown-icon .e-n-menu-dropdown-icon-closed{display:flex!important}
.nsm-nav .e-n-menu-dropdown-icon svg{transition:rotate .45s var(--nsm-spring)}
.nsm-nav .e-n-menu-dropdown-icon[aria-expanded=true] svg{rotate:180deg}
/* panel drops in, its rows follow one after another */
@keyframes nsmDrop{from{opacity:.001;translate:0 12px;scale:.985}to{opacity:1;translate:none;scale:1}}
@keyframes nsmRow{from{opacity:.001;translate:0 10px}to{opacity:1;translate:none}}
.nsm-nav .e-n-menu-content>.e-active{animation:nsmDrop .38s var(--nsm-spring-soft) both;transform-origin:50% 0}
.nsm-nav .e-n-menu-content>.e-active :is(.nsm-dd__a,.nsm-dd__all){animation:nsmRow .5s var(--nsm-spring-soft) both .06s}
.nsm-nav .e-n-menu-content>.e-active .e-con:nth-child(2)>.nsm-dd__a:nth-child(1){animation-delay:.1s}
.nsm-nav .e-n-menu-content>.e-active .nsm-dd__a:nth-child(2){animation-delay:.14s}
.nsm-nav .e-n-menu-content>.e-active .e-con:nth-child(2)>.nsm-dd__a:nth-child(2){animation-delay:.18s}
.nsm-nav .e-n-menu-content>.e-active .nsm-dd__a:nth-child(3){animation-delay:.18s}
.nsm-nav .e-n-menu-content>.e-active .nsm-dd__all{animation-delay:.24s}
.nsm-dd__a,.nsm-dd__all{text-decoration:none!important}
.nsm-dd__a .nsm-dd__t .elementor-heading-title{transition:color .25s ease}
.nsm-dd__a:is(:hover,:focus-visible) .nsm-dd__t .elementor-heading-title{color:#56788F}
.nsm-dd__all .nsm-dd__arr{transition:translate .4s var(--nsm-spring)}
.nsm-dd__all:is(:hover,:focus-visible) .nsm-dd__arr{translate:5px 0}
.nsm-dd__a:focus-visible,.nsm-dd__all:focus-visible{outline:2px solid #56788F;outline-offset:2px}

/* 9b. phone + tablet menu (nav-menu widget .nsm-mobile-nav): rows follow one after another when
       the burger opens, the sub-menu arrow turns when its group is open */
.nsm-mobile-nav .elementor-menu-toggle.elementor-active~.elementor-nav-menu--dropdown .elementor-nav-menu>li{animation:nsmRow .45s var(--nsm-spring-soft) both}
.nsm-mobile-nav .elementor-menu-toggle.elementor-active~.elementor-nav-menu--dropdown .elementor-nav-menu>li:nth-child(2){animation-delay:.04s}
.nsm-mobile-nav .elementor-menu-toggle.elementor-active~.elementor-nav-menu--dropdown .elementor-nav-menu>li:nth-child(3){animation-delay:.08s}
.nsm-mobile-nav .elementor-menu-toggle.elementor-active~.elementor-nav-menu--dropdown .elementor-nav-menu>li:nth-child(4){animation-delay:.12s}
.nsm-mobile-nav .elementor-menu-toggle.elementor-active~.elementor-nav-menu--dropdown .elementor-nav-menu>li:nth-child(n+5){animation-delay:.16s}
.nsm-mobile-nav .elementor-nav-menu--dropdown .sub-arrow{transition:rotate .4s var(--nsm-spring)}
.nsm-mobile-nav .elementor-nav-menu--dropdown a.highlighted .sub-arrow{rotate:180deg}

/* 10. sliding text bands. The page holds ONE word group per band; nsm-motion.js clones it to cover
       the screen, sets --nsm-tick-w (one group's width) and --nsm-tick-t (duration at ~46px a second)
       and adds .nsm-tick-on. No script or reduced motion = a still, centred line of words.
       Home: Elementor containers (.nsm-ticker > .nsm-tickertrack > group), scripts/apply-home-revamp-1001.mjs.
       Interior pages: build.py's {{ticker ...}} inside the hero (.nsm-ticker--html).
       Pauses on hover and while off screen (.nsm-off). */
.nsm-ticker{overflow:hidden}
.nsm-ticker .nsm-tickertrack{display:flex;flex-direction:row!important;flex-wrap:nowrap!important;
  width:max-content!important;max-width:none!important;flex:none!important}
.nsm-ticker .nsm-tickertrack:not(.nsm-tick-on){margin:0 auto}
.nsm-ticker .nsm-tickertrack>*{width:max-content!important;max-width:none!important;flex:none!important;
  flex-wrap:nowrap!important;flex-direction:row!important}
.nsm-ticker .nsm-tick__w{flex:none!important;width:auto!important;max-width:none!important}
.nsm-ticker .nsm-tick__w .elementor-heading-title{white-space:nowrap}
.nsm-ticker .nsm-tickertrack.nsm-tick-on{animation:nsmTicker var(--nsm-tick-t,36s) linear infinite;will-change:translate}
.nsm-ticker--rev .nsm-tickertrack.nsm-tick-on{animation-direction:reverse}
.nsm-ticker.nsm-off .nsm-tickertrack{animation-play-state:paused}
@media (hover:hover) and (pointer:fine){.nsm-ticker:hover .nsm-tickertrack{animation-play-state:paused}}
@keyframes nsmTicker{to{translate:calc(-1 * var(--nsm-tick-w,0px)) 0}}
/* interior pages: the band is the last thing in the hero, flush with its bottom edge, edge to edge.
   (Inside the hero, not after it: the bands below alternate colour by :nth-child.) */
.nsm-page .nsm-hero:has(>.nsm-ticker--html){padding-bottom:0}
.nsm-page .nsm-hero>.nsm-ticker--html{width:100vw;max-width:100vw;margin:56px 0 0 calc(50% - 50vw);padding:18px 0;
  background:#050B18;border-top:1px solid rgba(255,255,255,.08)}
.nsm-ticker--html .nsm-tickgroup{display:flex;align-items:center;gap:34px;padding:0 17px}
.nsm-ticker--html .nsm-tickgroup span{font:600 22px/1 Outfit,sans-serif;letter-spacing:.01em;color:#F5F7FB;white-space:nowrap}
.nsm-ticker--html .nsm-tickgroup i{font:normal 600 22px/1 Outfit,sans-serif;color:#5A7D9A}
@media (max-width:1024px){.nsm-ticker--html .nsm-tickgroup span,.nsm-ticker--html .nsm-tickgroup i{font-size:19px}}
@media (max-width:767px){
  .nsm-page .nsm-hero>.nsm-ticker--html{margin-top:32px;padding:13px 0}
  .nsm-ticker--html .nsm-tickgroup{gap:22px;padding:0 11px}
  .nsm-ticker--html .nsm-tickgroup span,.nsm-ticker--html .nsm-tickgroup i{font-size:15px}
}

/* 8. reduced motion -------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .nsm-page .nsm-figure img,.nsm-page .nsm-card,.nsm-rev-more::after,
  .elementor-location-header{transition:none!important}
  body.nsm-dir-down .elementor-location-header{translate:none}
  .nsm-nav .e-n-menu-content>.e-active,.nsm-nav .e-n-menu-content>.e-active :is(.nsm-dd__a,.nsm-dd__all){animation:none!important}
  .nsm-nav .e-n-menu-title-text::after,.nsm-nav .e-n-menu-dropdown-icon svg,.nsm-dd__all .nsm-dd__arr{transition:none!important}
  .nsm-ticker .nsm-tickertrack{animation:none!important}
  .nsm-mobile-nav .elementor-nav-menu--dropdown .elementor-nav-menu>li{animation:none!important}
  .nsm-mobile-nav .elementor-nav-menu--dropdown .sub-arrow{transition:none!important}
}