/* ==========================================================================
   TEND — V13 "Publishing Fights Back"
   Full-bleed WAR PANELS between sections: torn-paper reveal + parallax
   neon-poster animals + one-word emotional bursts.
   Layered on top of styles.css + v12.css.
   ========================================================================== */

.war-panel {
  position: relative;
  min-height: 100vh;
  width: 100%;
  overflow: hidden;
  display: grid;
  align-items: center;
  isolation: isolate;
  /* poster paper base shows at edges behind the image while parallaxing */
  background: #0d1622;
}

/* ---- Parallax image layer (oversized so it can drift) ---- */
.wp-bg {
  position: absolute;
  left: 0; right: 0;
  top: -12%;
  height: 124%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  will-change: transform;
  z-index: 0;
}
.wp-shark   .wp-bg { background-position: center 42%; }
.wp-gator   .wp-bg { background-position: 30% center; }
.wp-cat     .wp-bg { background-position: center 30%; }

/* ---- Grain + halftone texture ---- */
.wp-grain {
  position: absolute; inset: 0; z-index: 1;
  pointer-events: none;
  mix-blend-mode: overlay;
  opacity: .5;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' seed='8'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/></svg>");
}
.wp-grain::after {
  content: ""; position: absolute; inset: 0;
  opacity: .12; mix-blend-mode: multiply;
  background-image: radial-gradient(rgba(0,0,0,.9) 1px, transparent 1.4px);
  background-size: 5px 5px;
}

/* ---- Directional scrim so the type always reads ---- */
.wp-scrim {
  position: absolute; inset: 0; z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(8,14,26,.78) 0%, rgba(8,14,26,.34) 42%, rgba(8,14,26,0) 70%),
    linear-gradient(0deg, rgba(8,14,26,.55) 0%, rgba(8,14,26,0) 30%, rgba(8,14,26,0) 70%, rgba(8,14,26,.45) 100%);
}
.war-panel.wp-right .wp-scrim {
  background:
    linear-gradient(270deg, rgba(8,14,26,.78) 0%, rgba(8,14,26,.34) 42%, rgba(8,14,26,0) 70%),
    linear-gradient(0deg, rgba(8,14,26,.55) 0%, rgba(8,14,26,0) 30%, rgba(8,14,26,0) 70%, rgba(8,14,26,.45) 100%);
}

/* ---- Torn paper edges (top + bottom) ---- */
.wp-tear {
  position: absolute; left: -1px; right: -1px;
  height: clamp(46px, 6vh, 84px);
  z-index: 4;
  background:
    linear-gradient(180deg, #efe6d4 0%, #e6dbc4 100%);
  /* subtle paper speckle */
  background-blend-mode: multiply;
  filter: drop-shadow(0 5px 7px rgba(0,0,0,.34));
  pointer-events: none;
}
.wp-tear::after {
  content: ""; position: absolute; inset: 0;
  opacity: .25; mix-blend-mode: multiply;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='p'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23p)'/></svg>");
}
.wp-tear-top {
  top: -1px;
  /* jagged bottom edge — JS may replace with a randomized polygon */
  clip-path: polygon(
    0 0, 100% 0,
    100% 60%, 96% 86%, 92% 52%, 88% 80%, 84% 58%, 80% 90%,
    76% 54%, 72% 84%, 68% 48%, 64% 86%, 60% 62%, 56% 90%,
    52% 54%, 48% 82%, 44% 58%, 40% 92%, 36% 52%, 32% 84%,
    28% 60%, 24% 88%, 20% 54%, 16% 86%, 12% 58%, 8% 90%, 4% 56%, 0 80%
  );
}
.wp-tear-bottom {
  bottom: -1px;
  background: linear-gradient(0deg, #efe6d4 0%, #e6dbc4 100%);
  filter: drop-shadow(0 -5px 7px rgba(0,0,0,.34));
  clip-path: polygon(
    0 100%, 100% 100%,
    100% 40%, 96% 14%, 92% 48%, 88% 20%, 84% 42%, 80% 10%,
    76% 46%, 72% 16%, 68% 52%, 64% 14%, 60% 38%, 56% 10%,
    52% 46%, 48% 18%, 44% 42%, 40% 8%, 36% 48%, 32% 16%,
    28% 40%, 24% 12%, 20% 46%, 16% 14%, 12% 42%, 8% 10%, 4% 44%, 0 20%
  );
}

/* ---- Content / emotional burst ---- */
.wp-content {
  position: relative;
  z-index: 5;
  padding: 0 clamp(28px, 7vw, 120px);
  max-width: 1500px;
  margin: 0 auto;
  width: 100%;
  display: grid;
  gap: 22px;
  justify-items: start;
}
.war-panel.wp-right .wp-content { justify-items: end; text-align: right; }

.wp-kicker {
  font-family: 'JetBrains Mono', monospace;
  font-size: clamp(11px, 1vw, 13px);
  letter-spacing: 3px;
  text-transform: uppercase;
  white-space: nowrap;
  color: #0d1622;
  background: #ff2e8b;
  padding: 7px 14px;
  border-radius: 4px;
  font-weight: 700;
  box-shadow: 4px 4px 0 rgba(0,0,0,.35);
  transform: rotate(-1.4deg);
}

.wp-word {
  font-family: 'League Spartan', sans-serif;
  font-weight: 800;
  font-size: clamp(76px, 17vw, 280px);
  line-height: .82;
  letter-spacing: -.04em;
  color: #fff;
  text-transform: uppercase;
  text-shadow:
    0 4px 0 rgba(0,0,0,.28),
    0 18px 50px rgba(0,0,0,.55);
  -webkit-text-stroke: 1.5px rgba(0,0,0,.18);
  max-width: 16ch;
  /* Default VISIBLE — so the word can never get stuck hidden (no-JS,
     reduced motion, or a frozen transition). The hidden pre-burst state is
     applied only once JS sets body.is-ready, and removed by .burst-in. */
  opacity: 1;
  transform: none;
  transition:
    opacity .7s cubic-bezier(.16,1,.3,1),
    transform .8s cubic-bezier(.16,1,.3,1);
}
body.is-ready .war-panel .wp-word {
  opacity: 0;
  transform: translateY(28px) scale(1.14) skewX(-5deg);
}
body.is-ready .war-panel .wp-word.burst-in {
  opacity: 1;
  transform: translateY(0) scale(1) skewX(0deg);
}

.wp-sub {
  font-family: 'Inter Tight', sans-serif;
  font-weight: 500;
  font-size: clamp(17px, 1.7vw, 24px);
  line-height: 1.4;
  color: rgba(255,255,255,.92);
  max-width: 30ch;
  text-shadow: 0 2px 14px rgba(0,0,0,.5);
}

/* ---- Gorilla placeholder ---- */
.wp-placeholder .wp-bg {
  background:
    radial-gradient(ellipse 80% 70% at 30% 40%, rgba(255,46,139,.55), transparent 60%),
    radial-gradient(ellipse 70% 80% at 75% 70%, rgba(40,180,200,.6), transparent 60%),
    linear-gradient(135deg, #15303a 0%, #2a1330 55%, #3a1020 100%);
}
.wp-ph-note {
  position: absolute;
  z-index: 3;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) rotate(-2deg);
  font-family: 'JetBrains Mono', monospace;
  font-size: clamp(11px, 1.2vw, 14px);
  letter-spacing: 1.5px;
  line-height: 1.7;
  text-align: center;
  color: rgba(255,255,255,.5);
  border: 2px dashed rgba(255,255,255,.35);
  padding: 18px 26px;
  border-radius: 10px;
  background: rgba(0,0,0,.25);
  pointer-events: none;
  text-transform: uppercase;
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .wp-word { opacity: 1; transform: none; transition: none; }
  .wp-bg { transform: none !important; }
}

@media (max-width: 700px) {
  .wp-content { justify-items: start !important; text-align: left !important; }
  .wp-word { font-size: clamp(64px, 22vw, 120px); }
}