/* The three-pillars triangle (template-parts/pillars-triangle.php). Moved here unchanged from svc2-blocks.css
   (2026-09-28) so /organic-seo/'s SEO Copywriting tab can reuse it; enqueued by inc/service-v2.php on pages with
   config "blocks" and on /organic-seo/.
   Full size = the deck's slide-1 triangle (560 x 480, labels at the deck's offsets: 38px on 1920 = ~27px at 1440, 600
   weight). ANIMATED like the deck: each side pulses in turn on a 6 s loop (glow, stroke, halo, dot). Approved exception
   to the <= 200 ms motion rule (Mike, 2026-09-28); static under prefers-reduced-motion. */
.svb-tri{position:relative;width:min(560px,56%);margin:48px auto 72px}
.svb-tri__svg{width:100%;height:auto;display:block;overflow:visible}
.svb-tri__l{position:absolute;font-size:clamp(18px,1.9vw,28px);font-weight:600;line-height:1.2;letter-spacing:-.01em;white-space:nowrap}
.svb-tri__l--base{left:-40%;right:-40%;top:101.25%;text-align:center;color:#6fb0e8}
.svb-tri__l--left{right:83.93%;top:43.75%;text-align:right;color:#fff}
.svb-tri__l--right{left:83.93%;top:43.75%;color:var(--gold)}
.svb-t-halo,.svb-t-dot{transform-box:fill-box;transform-origin:center}
@media (prefers-reduced-motion:no-preference){
  .svb-t-glow{animation:svb-glow 6s linear infinite}
  .svb-t-side{animation:svb-side 6s linear infinite}
  .svb-t-halo{animation:svb-halo 6s linear infinite}
  .svb-t-dot{animation:svb-dot 6s linear infinite}
  .svb-t--left{animation-delay:2s}
  .svb-t--right{animation-delay:4s}
}
@keyframes svb-glow{0%{stroke-opacity:0}16.5%{stroke-opacity:.32}33%,100%{stroke-opacity:0}}
@keyframes svb-side{0%{stroke-width:18px}16.5%{stroke-width:27px}33%,100%{stroke-width:18px}}
@keyframes svb-halo{0%{transform:scale(1);fill-opacity:.18}16.5%{transform:scale(1.71);fill-opacity:.4}33%,100%{transform:scale(1);fill-opacity:.18}}
@keyframes svb-dot{0%{transform:scale(1)}16.5%{transform:scale(1.36)}33%,100%{transform:scale(1)}}
@media (max-width:640px){
  .svb-tri{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 8px;width:100%;margin:28px 0 36px}
  .svb-tri__svg{grid-column:1/-1;width:min(260px,72%);justify-self:center}
  .svb-tri__l{position:static;text-align:center;white-space:normal;font-size:15px}
  .svb-tri__l--left{order:1}.svb-tri__l--base{order:2}.svb-tri__l--right{order:3}
}

/* ---------- compact: the SEO Copywriting tab visual on /organic-seo/ (svc2-tabs.css panel, ~380-480 wide) ----------
   Labels beside the sides at every width (smaller, may wrap), triangle ~56% of the stage. Each time the panel is shown
   (hidden -> shown restarts CSS animations) the sides draw in (500 ms, staggered 100 ms: done by 700 ms) and the dots
   pop in; then the same 6 s pulse loop. Static under prefers-reduced-motion. */
.svc2-wt__panel .svc2-wt__fig--tri{background:var(--navy);background-image:var(--ss-glow-gold-soft,none);justify-content:center;align-items:center;padding:20px 16px 44px}
.svb-tri.svb-tri--compact{display:block;width:56%;max-width:300px;margin:0 auto}
.svb-tri.svb-tri--compact .svb-tri__svg{width:100%}
.svb-tri--compact .svb-tri__l{position:absolute;font-size:15px;line-height:1.2;white-space:normal;width:8.5em}
.svb-tri--compact .svb-tri__l--base{left:-40%;right:-40%;width:auto;top:calc(100% + 10px);text-align:center}
.svb-tri--compact .svb-tri__l--left{right:calc(83.93% + 4px);top:40%;text-align:right}
.svb-tri--compact .svb-tri__l--right{left:calc(83.93% + 4px);top:40%;text-align:left}
@media (prefers-reduced-motion:no-preference){
  .svb-tri--compact .svb-t-side{stroke-dasharray:1 1;animation:svb-draw .5s cubic-bezier(.3,.7,.4,1) both,svb-side 6s linear infinite;animation-delay:0s,.7s}
  .svb-tri--compact .svb-t-side.svb-t--left{animation-delay:.1s,2.7s}
  .svb-tri--compact .svb-t-side.svb-t--right{animation-delay:.2s,4.7s}
  .svb-tri--compact .svb-t-glow{animation-delay:.7s}
  .svb-tri--compact .svb-t-glow.svb-t--left{animation-delay:2.7s}
  .svb-tri--compact .svb-t-glow.svb-t--right{animation-delay:4.7s}
  .svb-tri--compact .svb-t-halo{animation:svb-pop .2s ease-out .45s both,svb-halo 6s linear .7s infinite}
  .svb-tri--compact .svb-t-dot{animation:svb-pop .2s ease-out .45s both,svb-dot 6s linear .7s infinite}
  .svb-tri--compact .svb-t-halo.svb-t--left,.svb-tri--compact .svb-t-dot.svb-t--left{animation-delay:.5s,2.7s}
  .svb-tri--compact .svb-t-halo.svb-t--right,.svb-tri--compact .svb-t-dot.svb-t--right{animation-delay:.55s,4.7s}
}
@keyframes svb-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes svb-pop{from{opacity:0}to{opacity:1}}
@media (max-width:999.98px){
  .svc2-wt__panel .svc2-wt__fig--tri{padding:14px 12px 36px}
  .svb-tri--compact .svb-tri__l{font-size:13px}
}