/* Revenue Operator: interactive teardown ("demolition order"), drop-in layer.
   Load AFTER ro.css + teardown-v2.css. Reproduces the package prototype site/teardown.html:
   bigshake, crk (SVG cracks), canvas shatter + dust, rise2 rebuild, meter, done banner.
   Additions (marked [+]): a wrecking ball that swings into each crack, a CONDEMNED stamp slammed on the
   crack (style + slam from site/teardowns.html .stamp), a stamp left on each finding card, the hub's slamIn
   on the h1. Hooks are data-attributes only (see MAPPING.md, "Interactive markup contract"). */

/* scrollable overflow from the shake transform must never create a sideways scroll (390px) */
html.td-js body{overflow-x:clip}
#td-shards{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:60}

/* shake: whole page, prototype values */
[data-td-world].td-shake{animation:td-bigshake .5s}
@keyframes td-bigshake{10%{transform:translate(-14px,6px) rotate(-.5deg)}25%{transform:translate(12px,-8px) rotate(.4deg)}40%{transform:translate(-9px,5px)}55%{transform:translate(7px,-4px)}70%{transform:translate(-4px,2px)}85%{transform:translate(2px,-1px)}}

/* blocks */
[data-td-block]{position:relative}
[data-td-block].td-gone{visibility:hidden}
[data-td-block].fixed{background:var(--klein);color:#fff;animation:td-rise2 .55s cubic-bezier(.2,1.5,.4,1)}
@keyframes td-rise2{0%{transform:translateY(60px) scale(.92);opacity:0}100%{transform:none;opacity:1}}
.td-crk{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:2}
.td-crk path{fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-dasharray:400;stroke-dashoffset:400;animation:td-crk .22s forwards}
.td-crk path+path{animation-delay:.04s}
@keyframes td-crk{to{stroke-dashoffset:0}}

/* [+] CONDEMNED stamp (hub .stamp: -12deg, scale 3 -> 1, 4px flash border) */
.td-stamp{position:absolute;z-index:3;pointer-events:none;border:4px solid var(--flash);color:var(--flash);background:#140C09cc;
  font:900 22px/1 var(--display);letter-spacing:.06em;padding:8px 12px;border-radius:8px;text-transform:uppercase;white-space:nowrap;
  transform:rotate(-12deg)}
[data-td-block] .td-stamp{left:50%;top:50%;transform:translate(-50%,-50%) rotate(-12deg);animation:td-stampblk .28s cubic-bezier(.2,1.5,.4,1) both}
@keyframes td-stampblk{0%{transform:translate(-50%,-50%) rotate(-12deg) scale(3);opacity:0}40%{opacity:1}100%{transform:translate(-50%,-50%) rotate(-12deg) scale(1);opacity:1}}
/* the stamp left on the finding card */
[data-td-hit]{position:relative;overflow:hidden}
[data-td-hit] .td-stamp{right:14px;bottom:14px;font-size:15px;padding:5px 9px;border-width:3px;opacity:.9;animation:td-stamp .28s cubic-bezier(.2,1.5,.4,1) both}
@keyframes td-stamp{0%{transform:rotate(-12deg) scale(3);opacity:0}100%{transform:rotate(-12deg) scale(1);opacity:.9}}
[data-td-hit].done{padding-bottom:56px}

/* [+] wrecking ball layer: clipped to the mock, never wider than the page */
/* The mock must be a positioning context for the ball yard (absolute, inset:0) and the block stamps. position:sticky already is one,
   so desktop keeps the prototype's sticky sketch (top:92px, as in brand-package/site/teardown.html); phones and print get relative. */
[data-td-mock]{position:relative}
@media (min-width:981px){[data-td-mock]{position:sticky;top:92px}}
@media print{[data-td-mock]{position:relative;top:0}}
.td-ballyard{position:absolute;inset:0;overflow:hidden;border-radius:inherit;pointer-events:none;z-index:4}
.td-ballyard svg{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible}
.td-ballyard .chain{stroke:#6b6b75;stroke-width:3;stroke-dasharray:7 4;fill:none}

/* reveal: findings closed until hit (JS only; without JS everything is open) */
html.td-js [data-td-hit]:not(.done) [data-td-reveal]{display:none}
html:not(.td-js) [data-td-smash],html:not(.td-js) [data-td-all]{display:none}
[data-td-hit].done .x[data-td-reveal]{display:flex}

/* meter + banner */
[data-td-bar]{transition:width .5s cubic-bezier(.2,.8,.2,1)}
[data-td-done]{display:none}
[data-td-done].on{display:block;animation:td-rise2 .5s}

/* [+] h1 slam on load (hub .slam span) */
html.td-js [data-td-slam]>*{display:block;width:max-content;max-width:100%;animation:td-slamIn .5s cubic-bezier(.2,1.6,.4,1) both}
html.td-js [data-td-slam]>*:nth-child(1){animation-delay:.15s}
html.td-js [data-td-slam]>*:nth-child(2){animation-delay:.45s}
@keyframes td-slamIn{0%{transform:scale(2.6) translateY(-20px);opacity:0;filter:blur(8px)}60%{opacity:1;filter:none}100%{transform:none;opacity:1}}

@media (max-width:640px){[data-td-block] .td-stamp{font-size:18px;padding:6px 10px}}

/* reduced motion: static end states only */
@media (prefers-reduced-motion:reduce){
  [data-td-world].td-shake,[data-td-block].fixed,[data-td-done].on,.td-crk path,
  [data-td-block] .td-stamp,[data-td-hit] .td-stamp,html.td-js [data-td-slam]>*{animation:none!important}
  .td-crk path{stroke-dashoffset:0}
  [data-td-bar]{transition:none}
}
/* print / PDF: rebuilt state, everything open */
@media print{
  #td-shards,.td-ballyard,[data-td-smash],[data-td-all]{display:none!important}
  [data-td-reveal]{display:block!important}.x[data-td-reveal]{display:flex!important}
  [data-td-block].fixed,[data-td-done].on,.td-stamp,[data-td-slam]>*{animation:none!important}
}
/* the slam h1 wraps the name in its own span; only the second line is saffron (as in teardown.html) */
.head h1[data-td-slam]>span:first-child{color:inherit}
/* no-JS fallback only: with JS, fitSlam() shrinks the h1 so whole words fit; never break inside a word when JS is on */
html:not(.td-js) .head h1[data-td-slam]>span{overflow-wrap:break-word}
html.td-js .head h1[data-td-slam]>span{overflow-wrap:normal}