/** PunisherTN 5.9 — quiet chromatic targeting marks. */
:root {
  --ptn-chroma-cyan: #25e3df;
  --ptn-chroma-red: #ff315f;
  --ptn-chroma-ink: #d9d5c4;
}
.ptn-chroma-field {
  position: absolute;
  z-index: 6;
  display: block;
  overflow: hidden;
  pointer-events: none;
}
.ptn-chroma-field > i { position: absolute; display: block; color: var(--ptn-chroma-ink); }
.ptn-chroma-corner {
  width: 42px;
  height: 42px;
  border-right: 1px solid rgba(217,213,196,.62);
  border-bottom: 1px solid rgba(217,213,196,.62);
}
.ptn-chroma-corner::before,
.ptn-chroma-corner::after {
  content: "";
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 100%;
  height: 100%;
  border-right: 1px solid;
  border-bottom: 1px solid;
  opacity: .38;
}
.ptn-chroma-corner::before { border-color: var(--ptn-chroma-cyan); transform: translate(3px,-2px); }
.ptn-chroma-corner::after { border-color: var(--ptn-chroma-red); transform: translate(-3px,3px); }
.ptn-chroma-crosshair {
  width: 38px;
  height: 38px;
  border: 1px solid rgba(222,219,207,.5);
  border-radius: 50%;
  filter: drop-shadow(2px 0 0 rgba(37,227,223,.5)) drop-shadow(-2px 1px 0 rgba(255,49,95,.46));
  animation: ptn-crosshair-drift 13s linear infinite;
}
.ptn-chroma-crosshair::before,
.ptn-chroma-crosshair::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: rgba(222,219,207,.72);
  transform: translate(-50%,-50%);
}
.ptn-chroma-crosshair::before { width: calc(100% + 14px); height: 1px; }
.ptn-chroma-crosshair::after { width: 1px; height: calc(100% + 14px); }
.ptn-chroma-plus,
.ptn-chroma-x { width: 18px; height: 18px; }
.ptn-chroma-plus::before,
.ptn-chroma-plus::after,
.ptn-chroma-x::before,
.ptn-chroma-x::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: currentColor;
  box-shadow: 2px 0 0 rgba(37,227,223,.68), -2px 1px 0 rgba(255,49,95,.62);
  transform: translate(-50%,-50%);
}
.ptn-chroma-plus::before,
.ptn-chroma-x::before { width: 100%; height: 1px; }
.ptn-chroma-plus::after,
.ptn-chroma-x::after { width: 1px; height: 100%; }
.ptn-chroma-x { transform: rotate(45deg); animation: ptn-chroma-pulse 4.8s ease-in-out infinite; }
.ptn-chroma-plus { animation: ptn-chroma-float 5.6s ease-in-out infinite; }

/* Header telemetry sits on the lower rule without fighting the navigation. */
.site-header { isolation: isolate; }
.ptn-chroma-field--header { inset: 0; opacity: .58; }
.ptn-chroma-field--header::before {
  content: "";
  position: absolute;
  right: 2.4%;
  bottom: 5px;
  width: min(31vw,430px);
  height: 1px;
  background: linear-gradient(90deg,transparent,rgba(217,213,196,.32) 32%,rgba(217,213,196,.1));
}
.ptn-chroma-field--header .ptn-chroma-corner { right: 14px; bottom: 7px; width: 22px; height: 22px; }
.ptn-chroma-field--header .ptn-chroma-crosshair { left: 58%; bottom: -8px; width: 16px; height: 16px; opacity: .55; }
.ptn-chroma-field--header .ptn-chroma-plus { left: 35%; bottom: 8px; width: 9px; height: 9px; opacity: .5; }
.ptn-chroma-field--header .ptn-chroma-x { left: 73%; bottom: 9px; width: 8px; height: 8px; opacity: .55; }

/* Banner decoration leaves the copy and focal artwork readable. */
.ptn-home-banner { isolation: isolate; }
.ptn-chroma-field--banner { inset: 0; z-index: 3; opacity: .62; }
.ptn-chroma-field--banner .ptn-chroma-corner { right: 26px; bottom: 24px; width: clamp(46px,5vw,72px); height: clamp(46px,5vw,72px); }
.ptn-chroma-field--banner .ptn-chroma-crosshair { right: 8%; top: 18%; width: clamp(34px,4vw,58px); height: clamp(34px,4vw,58px); }
.ptn-chroma-field--banner .ptn-chroma-plus { right: 28%; top: 13%; width: 16px; height: 16px; }
.ptn-chroma-field--banner .ptn-chroma-x { right: 4%; bottom: 34%; width: 14px; height: 14px; }

/* Contact page gets the same signature without changing its clean layout. */
.ptn-contact-hero { position: relative; }
.ptn-chroma-field--contact { inset: -18px -80px -28px 44%; z-index: 0; opacity: .45; }
.ptn-contact-hero > *:not(.ptn-chroma-field) { position: relative; z-index: 1; }
.ptn-chroma-field--contact .ptn-chroma-corner { right: 4px; bottom: 4px; width: 44px; height: 44px; }
.ptn-chroma-field--contact .ptn-chroma-crosshair { right: 19%; top: 20%; width: 36px; height: 36px; }
.ptn-chroma-field--contact .ptn-chroma-plus { left: 13%; top: 22%; width: 12px; height: 12px; }
.ptn-chroma-field--contact .ptn-chroma-x { right: 4%; top: 18%; width: 10px; height: 10px; }

/* Give the original product-card bracket the same restrained color split. */
.product-card-corner::before,
.product-card-corner::after {
  content: "";
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 100%;
  height: 100%;
  border-right: 1px solid;
  border-bottom: 1px solid;
  opacity: 0;
  transition: opacity .3s ease,transform .35s ease;
}
.product-card-corner::before { border-color: var(--ptn-chroma-cyan); transform: translate(2px,-2px); }
.product-card-corner::after { border-color: var(--ptn-chroma-red); transform: translate(-2px,2px); }
.woocommerce ul.products li.product:hover .product-card-corner::before,
.woocommerce ul.products li.product:hover .product-card-corner::after,
.woocommerce-page ul.products li.product:hover .product-card-corner::before,
.woocommerce-page ul.products li.product:hover .product-card-corner::after { opacity: .5; }

@keyframes ptn-crosshair-drift {
  to { transform: rotate(360deg); }
}
@keyframes ptn-chroma-float {
  0%,100% { opacity: .38; transform: translateY(0) scale(.92); }
  50% { opacity: .85; transform: translateY(-4px) scale(1.04); }
}
@keyframes ptn-chroma-pulse {
  0%,100% { opacity: .35; }
  45%,60% { opacity: .88; }
}

@media (max-width: 760px) {
  .ptn-chroma-field--header .ptn-chroma-crosshair,
  .ptn-chroma-field--header .ptn-chroma-plus { display: none; }
  .ptn-chroma-field--banner { opacity: .48; }
  .ptn-chroma-field--banner .ptn-chroma-crosshair { right: 8%; top: 15%; width: 28px; height: 28px; }
  .ptn-chroma-field--banner .ptn-chroma-plus { display: none; }
  .ptn-chroma-field--banner .ptn-chroma-corner { right: 14px; bottom: 13px; width: 38px; height: 38px; }
	.ptn-chroma-field--contact { inset: -10px -12px -18px 52%; }
	.ptn-chroma-field--contact .ptn-chroma-plus { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ptn-chroma-crosshair,
  .ptn-chroma-plus,
  .ptn-chroma-x { animation: none !important; }
}