/* ==========================================================================
   TDSH Giallo 1.1.0-dev8: ink splatters (pulp / evidence-room effects)
   Red ink on the sliding header strip and four small touches:
     1. header strip (inc/masthead.php full menu): spatters burst behind items as they slide in and
        out at the strip's edges (scroll-driven: a view-timeline per item on the inline axis; browsers without scroll-driven
        animations simply get none), a splat stamp pops behind a label on hover / focus / tap, and
        the current section keeps a dried-ink splat
     2. GO TO TOP: a blood drop drips from the button on hover / focus
     3. status / filing stamps: a short offset jitter on hover (translate only, keeps each rotation)
     4. OPEN FILE links on cards: an ink smear underline on hover / focus
     5. 404: FILE NOT FOUND gets one splatter as the page loads
   Never on body copy, never on the Evidence Locker (no locker file or selector is touched). Layout
   is unchanged (position:relative on the OPEN FILE link and the 404 title wrapper, no offsets). transform / translate / opacity
   only; no blur, filters or blend modes; no script. Splat art: assets/img/ink-*.svg.
   Fully off under prefers-reduced-motion: reduce and in print.
   Off switch: add_filter( 'tdsh_giallo_ink_fx', '__return_false' ) (inc/finish.php).
   ========================================================================== */
@media screen and (prefers-reduced-motion:no-preference){
  /* ---------- 1. header strip ---------- */
  body.tdsh-giallo .mainnav ul.tdsh-mast-nav.tdsh-mast-nav--full>li.menu-item:not(.tdsh-mast-ctl,.tg-nav-evid)>a::before{content:"";display:block;position:absolute;left:50%;top:50%;width:78px;height:78px;margin:-39px 0 0 -39px;background:url(../img/ink-splat-2.svg) center/contain no-repeat;opacity:0;transform:scale(.6);pointer-events:none;z-index:0}
  body.tdsh-giallo .mainnav ul.tdsh-mast-nav.tdsh-mast-nav--full>li.menu-item:not(.tdsh-mast-ctl,.tg-nav-evid)>a:is(:hover,:focus-visible,:active)::before{animation:tdsh-ink-pop .2s cubic-bezier(.3,1.7,.5,1) both}
  body.tdsh-giallo .mainnav ul.tdsh-mast-nav.tdsh-mast-nav--full>li.menu-item:is(.current-menu-item,.current-menu-parent,.current-post-ancestor,.current-menu-ancestor)>a::before{background-image:url(../img/ink-splat-dried.svg);opacity:.32;transform:rotate(-8deg)}
  /* spatters: each item is its own view timeline on the strip's inline axis; ::before bursts as the
     item slides in (its last 60px of travel), ::after as it slides out. A second timeline (the
     strip's own scroll position) keeps every splat at scale 0 while the strip rests at either end,
     so nothing shows on load until the strip is moved. */
  @supports (animation-timeline:view()){
    body.tdsh-giallo .mainnav ul.tdsh-mast-nav.tdsh-mast-nav--full>li.menu-item:not(.tdsh-mast-ctl,.tg-nav-evid){view-timeline:--tdsh-ink inline;view-timeline-inset:-70px -70px}
    body.tdsh-giallo .mainnav ul.tdsh-mast-nav.tdsh-mast-nav--full>li.menu-item:not(.tdsh-mast-ctl,.tg-nav-evid)::before,body.tdsh-giallo .mainnav ul.tdsh-mast-nav.tdsh-mast-nav--full>li.menu-item:not(.tdsh-mast-ctl,.tg-nav-evid)::after{content:"";display:block;position:absolute;left:50%;top:50%;width:72px;height:72px;margin:-36px 0 0 -36px;background:url(../img/ink-splat-1.svg) center/contain no-repeat;opacity:0;pointer-events:none;z-index:0}
    body.tdsh-giallo .mainnav ul.tdsh-mast-nav.tdsh-mast-nav--full>li.menu-item:not(.tdsh-mast-ctl,.tg-nav-evid)::before{animation:tdsh-ink-in linear both,tdsh-ink-gate linear both;animation-timeline:--tdsh-ink,scroll(nearest inline);animation-range:entry 50% contain 60px,normal}
    body.tdsh-giallo .mainnav ul.tdsh-mast-nav.tdsh-mast-nav--full>li.menu-item:not(.tdsh-mast-ctl,.tg-nav-evid)::after{animation:tdsh-ink-out linear both,tdsh-ink-gate linear both;animation-timeline:--tdsh-ink,scroll(nearest inline);animation-range:contain calc(100% - 60px) exit 50%,normal;background-image:url(../img/ink-splat-3.svg)}
    body.tdsh-giallo .mainnav ul.tdsh-mast-nav.tdsh-mast-nav--full>li.menu-item:not(.tdsh-mast-ctl,.tg-nav-evid):nth-child(3n+2)::before{background-image:url(../img/ink-splat-3.svg)}
    body.tdsh-giallo .mainnav ul.tdsh-mast-nav.tdsh-mast-nav--full>li.menu-item:not(.tdsh-mast-ctl,.tg-nav-evid):nth-child(3n+2)::after{background-image:url(../img/ink-splat-2.svg)}
    body.tdsh-giallo .mainnav ul.tdsh-mast-nav.tdsh-mast-nav--full>li.menu-item:not(.tdsh-mast-ctl,.tg-nav-evid):nth-child(3n)::before{background-image:url(../img/ink-splat-2.svg)}
    body.tdsh-giallo .mainnav ul.tdsh-mast-nav.tdsh-mast-nav--full>li.menu-item:not(.tdsh-mast-ctl,.tg-nav-evid):nth-child(3n)::after{background-image:url(../img/ink-splat-1.svg)}
  }

  /* ---------- 2. GO TO TOP: blood drop ---------- */
  body.tdsh-giallo .scrollup56::after{content:"";position:absolute;left:50%;top:100%;width:12px;height:17px;margin:-7px 0 0 -6px;background:url(../img/ink-drop.svg) center/contain no-repeat;opacity:0;pointer-events:none}
  body.tdsh-giallo .scrollup56:is(:hover,:focus-visible)::after{animation:tdsh-ink-drip .9s cubic-bezier(.55,0,.85,.45) both}

  /* ---------- 3. stamps: offset jitter (translate composes with each stamp's own rotation) ---------- */
  body.tdsh-giallo :is(.tg-stamp,.tdsh-casemast__stamp,.dsh-404__stamp):hover{animation:tdsh-ink-jitter .3s steps(1,end) 1}

  /* ---------- 4. OPEN FILE: ink smear underline ---------- */
  body.tdsh-giallo .tdsh-open-file:not(.tg-btn){position:relative}
  body.tdsh-giallo .tdsh-open-file:not(.tg-btn)::after{content:"";position:absolute;left:-2px;right:-2px;bottom:-6px;height:7px;background:url(../img/ink-smear.svg) 0 0/100% 100% no-repeat;transform:scaleX(0);transform-origin:0 50%;pointer-events:none}
  body.tdsh-giallo .tdsh-open-file:not(.tg-btn):is(:hover,:focus-visible)::after,body.tdsh-giallo .tg-card:hover .tdsh-open-file:not(.tg-btn)::after{animation:tdsh-ink-smear .3s cubic-bezier(.2,.8,.3,1) both}

  /* ---------- 5. 404: one splatter on load, behind the title ---------- */
  /* on the title's wrapper: the title itself carries an ink-texture mask that would cut the splat */
  body.tdsh-giallo.error404 .titlebar56__main{position:relative;z-index:0}
  body.tdsh-giallo.error404 .titlebar56__main::after{content:"";position:absolute;left:0;bottom:0;width:clamp(120px,20vw,260px);height:clamp(120px,20vw,260px);margin:0 0 clamp(-78px,-6vw,-36px) -24px;background:url(../img/ink-splat-1.svg) center/contain no-repeat;opacity:0;pointer-events:none;z-index:-1;animation:tdsh-ink-burst .5s cubic-bezier(.2,1.5,.4,1) .35s both}

  @keyframes tdsh-ink-pop{from{opacity:0;transform:scale(.6) rotate(-14deg)}to{opacity:.5;transform:scale(1) rotate(0)}}
  @keyframes tdsh-ink-in{0%{opacity:0;transform:scale(.35) rotate(-30deg)}55%{opacity:.85;transform:scale(1.05) rotate(0)}100%{opacity:0;transform:scale(1.25) rotate(10deg)}}
  @keyframes tdsh-ink-out{0%{opacity:0;transform:scale(1.25) rotate(-10deg)}45%{opacity:.8;transform:scale(1) rotate(0)}100%{opacity:0;transform:scale(.35) rotate(25deg)}}
  @keyframes tdsh-ink-gate{0%{scale:0}1.5%{scale:1}98.5%{scale:1}100%{scale:0}}
  @keyframes tdsh-ink-drip{
    0%{opacity:0;transform:translateY(-8px) scale(.5)}
    22%{opacity:1;transform:translateY(-2px) scale(.9,1.1)}
    100%{opacity:0;transform:translateY(30px) scale(.75,1.35)}
  }
  @keyframes tdsh-ink-jitter{0%{translate:2px -1px}25%{translate:-2px 1px}50%{translate:1px 2px}75%{translate:-1px -1px}100%{translate:0 0}}
  @keyframes tdsh-ink-smear{from{transform:scaleX(0)}to{transform:scaleX(1)}}
  @keyframes tdsh-ink-burst{from{opacity:0;transform:scale(.2) rotate(-25deg)}to{opacity:.9;transform:scale(1) rotate(0)}}
}
/* dev10: nothing is pinned over the strip any more (search and EVIDENCE sit beside it), so the
   timeline uses the strip's own edges at every width */
@media screen and (prefers-reduced-motion:no-preference) and (max-width:840px){
  @supports (animation-timeline:view()){
    /* phones: smaller splats, kept inside the one nav row */
    body.tdsh-giallo .mainnav ul.tdsh-mast-nav.tdsh-mast-nav--full>li.menu-item:not(.tdsh-mast-ctl,.tg-nav-evid)::before,body.tdsh-giallo .mainnav ul.tdsh-mast-nav.tdsh-mast-nav--full>li.menu-item:not(.tdsh-mast-ctl,.tg-nav-evid)::after{width:48px;height:48px;margin:-24px 0 0 -24px}
  }
  body.tdsh-giallo .mainnav ul.tdsh-mast-nav.tdsh-mast-nav--full>li.menu-item:not(.tdsh-mast-ctl,.tg-nav-evid)>a::before{width:54px;height:54px;margin:-27px 0 0 -27px}
}