/* ============================================================
 *  06-calling-card.css — Persona 5 Calling Card with Joker
 * ============================================================ */

.p5-bg {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, var(--p5-red) 0%, var(--p5-red) 50%, var(--p5-black) 50%);
  z-index: 0;
}
.p5-bg::before {
  /* 45deg pinstripe overlay */
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(45deg, transparent, transparent 12px,
      rgba(0, 0, 0, 0.13) 12px, rgba(0, 0, 0, 0.13) 13px);
}
.p5-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(-45deg, transparent, transparent 5px,
      rgba(255, 255, 255, 0.04) 5px, rgba(255, 255, 255, 0.04) 6px);
  opacity: 0.6;
}

.p5-flash {
  position: absolute;
  inset: 0;
  background: var(--p5-white);
  z-index: 50;
  pointer-events: none;
  opacity: 0;
}

.p5-slash {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.7) 31%,
      transparent 32%, transparent 60%, rgba(255, 0, 0, 0.6) 61%, transparent 62%);
  pointer-events: none;
  z-index: 4;
  opacity: 0;
}

.cc-stage {
  position: relative;
  z-index: 10;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ============================================================
 *  Bold P5 layout accents — diagonal slab, watermark, corners,
 *  scanlines, bottom status bar, TARGET FILE side panel
 * ============================================================ */

/* Big red diagonal slab — angular clip-path */
.cc-slab {
  position: absolute;
  inset: 0;
  background: var(--p5-red);
  clip-path: polygon(54% 0, 100% 0, 100% 100%, 70% 100%);
  opacity: 0.92;
  z-index: 1;
}
.cc-slab::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    -55deg,
    transparent, transparent 14px,
    rgba(0, 0, 0, 0.12) 14px, rgba(0, 0, 0, 0.15) 15px
  );
}

/* Scanline overlay — CRT feel */
.cc-scanlines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 40;
  background: repeating-linear-gradient(
    0deg,
    transparent, transparent 2px,
    rgba(0, 0, 0, 0.14) 2px, rgba(0, 0, 0, 0.14) 3px
  );
}

/* Gigantic faded watermark text */
.cc-wm {
  position: absolute;
  right: -4%;
  bottom: -10%;
  font-family: var(--font-p5-display);
  font-size: 34vw;
  line-height: 1;
  color: rgba(255, 255, 255, 0.03);
  letter-spacing: -14px;
  pointer-events: none;
  user-select: none;
  z-index: 2;
}

/* Corner brackets (top-left, bottom-right) */
.c-tl, .c-br {
  position: absolute;
  width: 52px;
  height: 52px;
  pointer-events: none;
  z-index: 45;
}
.c-tl {
  top: 1.8rem;
  left: 1.8rem;
  border-top: 2px solid rgba(255, 255, 255, 0.14);
  border-left: 2px solid rgba(255, 255, 255, 0.14);
}
.c-br {
  bottom: 3rem;
  right: 1.8rem;
  border-bottom: 2px solid rgba(255, 255, 255, 0.14);
  border-right: 2px solid rgba(255, 255, 255, 0.14);
}

/* ============================================================
 *  TARGET FILE — the right-side P5 info panel (replaces Joker art)
 * ============================================================ */
.cc-file {
  position: absolute;
  right: 3%;
  top: 50%;
  transform: translateY(-50%);
  width: 340px;
  z-index: 12;
  /* top-left angle requires extra left padding so text clears the slant */
  padding: 2rem 1.8rem 2rem 3.4rem;
  background: linear-gradient(
    to left,
    rgba(0, 0, 0, 0.92),
    rgba(0, 0, 0, 0.70)
  );
  clip-path: polygon(12% 0, 100% 0, 100% 100%, 0 100%);
  font-family: var(--font-p5-body);
  color: var(--p5-white);
  border-right: 2px solid var(--p5-red);
}
.cc-file-tag {
  font-family: var(--font-p5-mono);
  font-size: 0.65rem;
  letter-spacing: 6px;
  color: var(--p5-red);
  margin-bottom: 0.75rem;
}
.cc-file-name {
  font-family: var(--font-p5-display);
  font-size: 3.4rem;
  line-height: 0.88;
  color: var(--p5-white);
  text-shadow: 4px 4px 0 rgba(0, 0, 0, 0.55);
  letter-spacing: 1px;
}
.cc-file-sub {
  font-family: var(--font-p5-mono);
  font-size: 0.7rem;
  letter-spacing: 3px;
  color: var(--p5-yellow);
  margin: 0.6rem 0 1.2rem;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}
.cc-file-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-p5-mono);
  font-size: 0.62rem;
  letter-spacing: 2px;
  padding: 0.35rem 0;
}
.cc-file-lbl { color: rgba(255, 255, 255, 0.38); }
.cc-file-val { color: var(--p5-white); }
.cc-file-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.10);
  margin: 0.9rem 0 0.8rem;
}
.cc-file-rank-title {
  font-family: var(--font-p5-mono);
  font-size: 0.58rem;
  letter-spacing: 4px;
  color: var(--p5-yellow);
  margin-bottom: 0.5rem;
}
.cc-file-pips {
  display: flex;
  gap: 0.4rem;
}
.cc-pip {
  width: 16px;
  height: 16px;
  clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
  background: rgba(255, 255, 255, 0.12);
  transition: background 0.25s;
}
.cc-pip.lit { background: var(--p5-yellow); }

/* ============================================================
 *  BOTTOM STATUS BAR
 * ============================================================ */
.cc-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 38px;
  background: rgba(0, 0, 0, 0.82);
  border-top: 2px solid var(--p5-red);
  display: flex;
  align-items: center;
  padding: 0 2rem;
  gap: 3rem;
  z-index: 45;
}
.cc-bar-item {
  font-family: var(--font-p5-mono);
  font-size: 0.62rem;
  letter-spacing: 3px;
  color: rgba(255, 255, 255, 0.35);
}
.cc-bar-item span {
  color: var(--p5-yellow);
  margin-left: 0.4rem;
}

.calling-card {
  position: absolute;
  left: 5%;
  top: 50%;
  transform: translateY(-50%) rotate(-3deg);
  width: 480px;
  z-index: 12;
}
.calling-card-inner {
  position: relative;
  background: var(--p5-white);
  padding: 32px 28px;
  border: 3px solid var(--p5-black);
  box-shadow:
    8px 8px 0 var(--p5-black),
    14px 14px 0 var(--p5-red);
  font-family: var(--font-impact);
  color: var(--p5-black);
  text-align: center;
  line-height: 1.2;
}
.calling-card-inner::before,
.calling-card-inner::after {
  content: '';
  position: absolute;
  width: 32px;
  height: 32px;
  background: var(--p5-red);
}
.calling-card-inner::before { top: -10px; left: -10px; transform: rotate(-12deg); }
.calling-card-inner::after  { bottom: -10px; right: -10px; transform: rotate(20deg); }

.calling-card-salutation {
  font-size: 1.3rem;
  letter-spacing: 3px;
  background: var(--p5-black);
  color: var(--p5-white);
  display: inline-block;
  padding: 4px 12px;
  transform: skew(var(--p5-skew));
  margin-bottom: 16px;
}
.calling-card-body {
  font-size: 2.6rem;
  letter-spacing: 2px;
  margin: 12px 0;
}
.calling-card-body .word {
  display: inline-block;
  margin: 0 4px;
  opacity: 0;
}
.calling-card-body .red { color: var(--p5-red); }
.calling-card-body .skew {
  display: inline-block;
  background: var(--p5-black);
  color: var(--p5-white);
  padding: 0 8px;
  transform: skew(var(--p5-skew));
}
.calling-card-signature {
  margin-top: 18px;
  font-size: 1rem;
  letter-spacing: 2px;
  color: var(--p5-red);
}

/* ============================================================
 *  Joker pre-card cut-in
 * ============================================================ */
.cc-cutin {
  position: absolute;
  inset: 0;
  z-index: 40;
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
}

/* Red streaks radiating from where Joker stands */
.cc-cutin-streaks {
  position: absolute;
  top: 0;
  right: -10%;
  width: 80%;
  height: 100%;
  background:
    repeating-linear-gradient(
      -70deg,
      transparent 0px,
      transparent 40px,
      rgba(232, 0, 29, 0.35) 40px,
      rgba(232, 0, 29, 0.35) 48px,
      transparent 48px,
      transparent 110px,
      rgba(0, 0, 0, 0.55) 110px,
      rgba(0, 0, 0, 0.55) 124px
    );
  mix-blend-mode: screen;
  transform: translateX(20%);
  opacity: 0;
}

/* Joker portrait */
.cc-cutin-joker {
  position: absolute;
  right: -6%;
  bottom: -2%;
  height: 108%;
  width: auto;
  max-width: none;
  filter:
    drop-shadow(-12px 0 22px rgba(232, 0, 29, 0.55))
    drop-shadow(0 20px 30px rgba(0, 0, 0, 0.6));
  transform: translateX(40%);
  opacity: 0;
}

/* Small "// PHANTOM THIEF //" tag floating above Joker */
.cc-cutin-tag {
  position: absolute;
  right: 8%;
  top: 10%;
  font-family: var(--font-p5-mono, 'Share Tech Mono', monospace);
  font-size: 0.9rem;
  letter-spacing: 6px;
  color: var(--p5-white, #f5f3ec);
  text-shadow:
    2px 2px 0 #000,
    -1px -1px 0 rgba(232, 0, 29, 0.9);
  transform: translateY(-30px);
  opacity: 0;
}

/* Skewed red speech slab */
.cc-cutin-slab {
  position: absolute;
  left: 6%;
  top: 52%;
  padding: 22px 34px;
  background: #e8001d;
  color: #fff;
  font-family: var(--font-p5-display, 'Anton', 'Impact', sans-serif);
  font-size: clamp(1.4rem, 3.4vw, 2.2rem);
  letter-spacing: 2px;
  line-height: 1.1;
  text-transform: uppercase;
  border: 3px solid #fff;
  outline: 3px solid #000;
  transform: skewX(-10deg) translateX(-60px);
  opacity: 0;
  box-shadow:
    10px 10px 0 rgba(0, 0, 0, 0.85),
    0 0 0 1px rgba(0, 0, 0, 0.8) inset;
  max-width: 52%;
  display: flex;
  align-items: center;
  gap: 18px;
}
.cc-cutin-slab > * { transform: skewX(10deg); }
.cc-cutin-text b {
  color: #ffe055;
  text-shadow: 3px 3px 0 #000;
}
.cc-cutin-mark {
  font-size: 0.7em;
  color: #ffe055;
  text-shadow: 2px 2px 0 #000;
}

/* Mobile scaling */
@media (max-width: 720px) {
  .cc-cutin-joker {
    height: auto;
    width: 150%;
    right: -25%;
    bottom: auto;
    top: 8%;
  }
  .cc-cutin-tag {
    right: 6%;
    top: 8%;
    font-size: 0.7rem;
    letter-spacing: 3px;
  }
  .cc-cutin-slab {
    left: 4%;
    top: 46%;
    padding: 14px 20px;
    font-size: 1.1rem;
    max-width: 74%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cc-cutin,
  .cc-cutin-streaks,
  .cc-cutin-joker,
  .cc-cutin-tag,
  .cc-cutin-slab {
    transition: none !important;
    animation: none !important;
  }
}