/* ==========================================================================
   PERSONA 5 AESTHETIC STYLESHEET - SIN CTF SLIDES
   Colors: Crimson Red (#E60012), Jet Black (#050505), Bone White (#FFFFFF)

   Sizing model: every slide defines --u = 1% of a 16:9 stage width
   (min of 1cqw / 1.7778cqh). All sizes are multiples of --u, so the layout
   scales as one unit on any screen. Tune the unitless tokens on .slide
   (and the portrait / compact blocks at the bottom) instead of single rules.
   ========================================================================== */

:root {
  --p5-red: #E60012;
  --p5-black: #060606;
  --p5-white: #FFFFFF;

  --font-p5-title: 'Anton', 'Bebas Neue', 'Impact', sans-serif;
  --font-p5-body: 'Rubik', system-ui, sans-serif;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  user-select: none;
  -webkit-user-select: none;
}

html, body {
  width: 100%;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background-color: var(--p5-black);
  color: var(--p5-white);
  font-family: var(--font-p5-body);
  overscroll-behavior: none;
  touch-action: manipulation;
  -webkit-text-size-adjust: 100%;
}

#deck-viewport {
  position: relative;
  width: 100%;
  height: 100%;
  background: #000;
  overflow: hidden;
}

.slide-stage {
  position: absolute;
  inset: 0;
  container-type: size;
  overflow: hidden;
  background: #000;
}

/* ==========================================================================
   SLIDE ARCHITECTURE + LAYOUT TOKENS (landscape defaults, 1u = 19.2px @1080p)
   ========================================================================== */
.slide {
  --u: min(1cqw, 1.7778cqh);
  --bw: max(2px, calc(0.16 * var(--u)));       /* border width */
  --sh: max(4px, calc(0.45 * var(--u)));       /* hard shadow offset */

  /* side: 1 = speaker on the right, -1 = speaker on the left */
  --side: 1;
  --scrim-dir: to right;

  /* type sizes (in u) */
  --font-title: 2.7;
  --font-card: 1.6;
  --font-dialog: 1.5;
  --font-name: 1.3;

  /* dialogue box: size (u), distance from speaker-side edge (u), bottom (u) */
  --tb-w: 76;
  --tb-h: 22;
  --tb-offset: 14;
  --tb-bottom: 1;
  --k: 0.579;               /* ribbon slope in box fractions (measured from art) */

  /* cover lockup + contact slide */
  --cover-title: 9;
  --cover-sub: 2.4;
  --cover-logo: 13;
  --qr-size: 26;
  --c-cols: 4;
  --c-card: 21;
  --c-gap: 2.5;
  --font-cname: 1.8;
  --font-cnum: 1.3;

  /* character */
  --char-h: calc(44 * var(--u));
  --char-bottom: 0;

  /* main content area */
  --content-top: 3;
  --content-side: 3;
  --content-w: 64;
  --content-h: calc(38 * var(--u));

  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
              visibility 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
  overflow: hidden;
}

.slide.active {
  opacity: 1;
  visibility: visible;
  z-index: 10;
}

.slide--speaker-left {
  --side: -1;
  --scrim-dir: to left;
}

/* Background layer */
.slide-bg-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.slide--cover .slide-bg-layer {
  background-image: url('elements/cover-bg.png');
}

/* Content slides: push the background back (blur + desaturate + dim) */
.slide--content .slide-bg-layer {
  transform: scale(1.06);
  filter: blur(max(1.5px, calc(0.15 * var(--u)))) saturate(0.9) brightness(1);
}

#slide-briefing .slide-bg-layer { background-image: url('elements/unified-background1.png'); }
#slide-dossier  .slide-bg-layer { background-image: url('elements/unified-background2.png'); }
#slide-contact .slide-bg-layer,
#slide-qr      .slide-bg-layer { background-image: url('elements/last.png'); }

/* Scrim (darkens the content side) + vignette */
.slide--content::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(circle at center, transparent 65%, rgba(0, 0, 0, 0.25) 100%),
    linear-gradient(var(--scrim-dir), rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.3) 45%, rgba(0, 0, 0, 0) 100%);
}

/* Faint halftone */
.slide--content::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0.06;
  background-image: radial-gradient(#ffffff 1px, transparent 1px);
  background-size: 8px 8px;
}

/* ==========================================================================
   RANSOM-NOTE TITLE
   ========================================================================== */
.p5-ransom-title {
  display: flex;
  flex-wrap: wrap;
  gap: calc(0.3 * var(--u)) max(6px, calc(0.8 * var(--u)));
  align-items: center;
  font-family: var(--font-p5-title);
  font-size: calc(var(--font-title) * var(--u));
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 400;
}

.p5-ransom-word {
  display: inline-flex;
  gap: calc(0.15 * var(--u));
}

.p5-ransom-letter {
  display: inline-block;
  padding: calc(0.12 * var(--u)) calc(0.35 * var(--u));
  line-height: 1;
  box-shadow: calc(0.15 * var(--u)) calc(0.15 * var(--u)) 0 #000;
}

.p5-ransom-letter.theme-black  { background: var(--p5-black); color: var(--p5-white); }
.p5-ransom-letter.theme-red    { background: var(--p5-red);   color: var(--p5-white); }
.p5-ransom-letter.theme-white  { background: var(--p5-white); color: var(--p5-black); }
.p5-ransom-letter.theme-accent {
  background: var(--p5-black);
  color: var(--p5-red);
  border: max(1px, calc(0.1 * var(--u))) solid var(--p5-white);
}

/* ==========================================================================
   MAIN CONTENT AREA (sequence 1)
   ========================================================================== */
.main-content-area {
  position: absolute;
  top: calc(var(--content-top) * var(--u));
  width: calc(var(--content-w) * var(--u));
  height: var(--content-h);
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: calc(1.2 * var(--u));
  opacity: 0;
  transform: translateX(calc(var(--side) * -4 * var(--u))) skewX(calc(var(--side) * 2deg));
  transition: opacity 0.5s cubic-bezier(0.2, 0.9, 0.3, 1),
              transform 0.5s cubic-bezier(0.2, 0.9, 0.3, 1);
}

.slide--speaker-right .main-content-area { left: calc(var(--content-side) * var(--u)); }
.slide--speaker-left  .main-content-area { right: calc(var(--content-side) * var(--u)); }

.seq1-active .main-content-area {
  opacity: 1;
  transform: none;
}

.p5-card {
  position: relative;
  flex: 0 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--p5-red) transparent;
  background: rgba(10, 10, 10, 0.92);
  border: var(--bw) solid var(--p5-white);
  padding: calc(1.2 * var(--u)) calc(1.6 * var(--u));
  box-shadow: var(--sh) var(--sh) 0 var(--p5-red);
  transform: skewX(-3deg) rotate(-0.5deg);
  font-family: var(--font-p5-body);
  font-size: calc(var(--font-card) * var(--u));
  font-weight: 500;
  line-height: 1.4;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

@media (hover: hover) {
  .p5-card:hover {
    transform: skewX(-3deg) rotate(-0.5deg) translate(-2px, -2px);
  }
}

.p5-card p + p {
  margin-top: 0.8em;
}

.p5-card b {
  font-weight: 700;
}

.p5-tag {
  display: inline-block;
  margin-right: 0.6em;
  padding: 0.05em 0.5em;
  background: var(--p5-red);
  color: var(--p5-white);
  font-family: var(--font-p5-title);
  font-size: 0.9em;
  letter-spacing: 0.05em;
  transform: skewX(-10deg);
}

/* ==========================================================================
   SPEAKER (sequence 2)
   ========================================================================== */
.speaker {
  position: absolute;
  bottom: calc(var(--char-bottom) * var(--u));
  height: var(--char-h);
  width: calc(var(--char-h) * 2 / 3);
  z-index: 30;
  pointer-events: none;
  opacity: 0;
  transform-origin: bottom center;
}

.slide--speaker-right .speaker { right: calc(-1 * var(--u)); }
.slide--speaker-left  .speaker { left:  calc(-1 * var(--u)); }

.speaker-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom center;
  transform: scaleX(var(--side));
  /* the art is cropped on its inner edge; fade it so no hard seam shows */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 14%);
  mask-image: linear-gradient(to right, transparent 0, #000 14%);
}

.cut-in-flash {
  position: absolute;
  inset: calc(-5 * var(--u));
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  background: linear-gradient(135deg, transparent 40%, rgba(255, 255, 255, 0.9) 50%, var(--p5-red) 55%, transparent 65%);
}

.seq2-active .speaker {
  opacity: 1;
  animation: p5-cut-in-slam 0.55s cubic-bezier(0.1, 0.9, 0.2, 1.25) both,
             p5-char-wiggle 3.2s ease-in-out infinite 0.55s;
}

.seq2-active .cut-in-flash {
  animation: p5-slash-flash 0.5s ease-out forwards;
}

/* ==========================================================================
   DIALOGUE BOX (sequence 3)
   Percentages below are fractions of the box art (textbox1_general.png).
   The art is flipped for a right-hand speaker, so ribbon/text areas are mirrored.
   ========================================================================== */
.dialogue-box {
  position: absolute;
  bottom: calc(var(--tb-bottom) * var(--u));
  width: calc(var(--tb-w) * var(--u));
  height: calc(var(--tb-h) * var(--u));
  z-index: 40;
  opacity: 0;
  transform-origin: bottom center;
}

.slide--speaker-right .dialogue-box { right: calc(var(--tb-offset) * var(--u)); }
.slide--speaker-left  .dialogue-box { left:  calc(var(--tb-offset) * var(--u)); }

.seq3-active .dialogue-box {
  opacity: 1;
  animation: p5-textbox-pop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) both,
             p5-textbox-alive-wiggle 2.8s ease-in-out infinite 0.5s;
}

.dialogue-box-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  transform: scaleX(calc(-1 * var(--side)));
  filter: drop-shadow(calc(0.3 * var(--u)) calc(0.3 * var(--u)) 0 rgba(0, 0, 0, 0.95));
}

.textbox-text-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
}

/* Nameplate: centred on the white ribbon, rotated to the ribbon's on-screen slope */
.textbox-nameplate {
  position: absolute;
  top: 17%;
  width: 17%;
  height: 9%;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-origin: center;
  transform: rotate(calc(var(--side) * 8deg));
}

@supports (transform: rotate(atan(1))) {
  .textbox-nameplate {
    transform: rotate(calc(var(--side) * atan(var(--k) * var(--tb-h) / var(--tb-w))));
  }
}

.slide--speaker-left  .textbox-nameplate { left: 16.5%; }
.slide--speaker-right .textbox-nameplate { left: 66.5%; }

.textbox-nameplate-text {
  font-family: var(--font-p5-title);
  font-size: calc(var(--font-name) * var(--u));
  line-height: 1;
  letter-spacing: 0.05em;
  white-space: nowrap;
  color: var(--p5-black);
}

/* Dialogue text sits inside the black polygon */
.textbox-dialogue-area {
  position: absolute;
  top: 38%;
  width: 64%;
  height: 29%;
  display: flex;
  align-items: center;
  overflow: hidden;
  color: var(--p5-white);
  font-family: var(--font-p5-body);
  font-size: calc(var(--font-dialog) * var(--u));
  font-weight: 700;
  line-height: 1.35;
  text-shadow: calc(0.1 * var(--u)) calc(0.1 * var(--u)) 0 #000;
}

.slide--speaker-left  .textbox-dialogue-area { left: 20%; }
.slide--speaker-right .textbox-dialogue-area { left: 16%; }

.dialogue-text {
  width: 100%;
  overflow-wrap: break-word;
}

.dialogue-prompt-cursor {
  position: absolute;
  right: calc(0.8 * var(--u));
  bottom: calc(0.4 * var(--u));
  width: calc(0.7 * var(--u));
  height: calc(0.7 * var(--u));
  background: var(--p5-red);
  border: max(1px, calc(0.12 * var(--u))) solid var(--p5-white);
  transform: rotate(45deg);
  box-shadow: 2px 2px 0 #000;
  opacity: 0;
}

.typed-done .dialogue-prompt-cursor {
  opacity: 1;
  animation: p5-cursor-blink 0.7s infinite alternate ease-in-out;
}

/* ==========================================================================
   ANIMATIONS
   ========================================================================== */
@keyframes p5-cut-in-slam {
  0% {
    opacity: 0;
    transform: translate(calc(var(--side) * 14 * var(--u)), calc(12 * var(--u))) scale(0.6)
               rotate(calc(var(--side) * 14deg)) skewX(calc(var(--side) * -10deg));
  }
  60% {
    opacity: 1;
    transform: translate(calc(var(--side) * -1 * var(--u)), calc(-0.8 * var(--u))) scale(1.06)
               rotate(calc(var(--side) * -2deg)) skewX(calc(var(--side) * 2deg));
  }
  80% {
    transform: translate(calc(var(--side) * 0.4 * var(--u)), calc(0.3 * var(--u))) scale(0.98)
               rotate(calc(var(--side) * 1deg));
  }
  100% {
    opacity: 1;
    transform: translate(0, 0) scale(1) rotate(0deg);
  }
}

@keyframes p5-slash-flash {
  0%   { opacity: 1; transform: scale(0.8) rotate(-15deg); }
  50%  { opacity: 0.9; }
  100% { opacity: 0; transform: scale(1.3) rotate(-5deg); }
}

@keyframes p5-char-wiggle {
  0%   { transform: translate(0, 0) rotate(0deg) scale(1); }
  25%  { transform: translate(calc(-0.1 * var(--u)), calc(-0.15 * var(--u))) rotate(-0.8deg) scale(1.008); }
  50%  { transform: translate(calc(0.05 * var(--u)), calc(-0.05 * var(--u))) rotate(0.4deg) scale(0.995); }
  75%  { transform: translate(calc(0.15 * var(--u)), calc(-0.1 * var(--u))) rotate(1deg) scale(1.005); }
  100% { transform: translate(0, 0) rotate(0deg) scale(1); }
}

@keyframes p5-textbox-pop {
  0%   { opacity: 0; transform: scale(0) rotate(calc(var(--side) * 12deg)); }
  70%  { opacity: 1; transform: scale(1.06) rotate(calc(var(--side) * -1.5deg)); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

@keyframes p5-textbox-alive-wiggle {
  0%   { transform: translate(0, 0) rotate(0deg) scale(1); }
  20%  { transform: translate(calc(-0.08 * var(--u)), calc(-0.05 * var(--u))) rotate(-0.6deg) scale(1.006); }
  45%  { transform: translate(calc(0.05 * var(--u)), calc(0.08 * var(--u))) rotate(0.4deg) scale(0.996); }
  70%  { transform: translate(calc(0.1 * var(--u)), calc(-0.05 * var(--u))) rotate(0.7deg) scale(1.004); }
  85%  { transform: translate(calc(-0.05 * var(--u)), calc(0.05 * var(--u))) rotate(-0.3deg) scale(0.998); }
  100% { transform: translate(0, 0) rotate(0deg) scale(1); }
}

@keyframes p5-cursor-blink {
  0%   { opacity: 0.2; transform: rotate(45deg) scale(0.8); }
  100% { opacity: 1;   transform: rotate(45deg) scale(1.2); }
}

/* ==========================================================================
   COVER LOCKUP
   ========================================================================== */
.cover-content {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(1.6 * var(--u));
  padding-bottom: calc(6 * var(--u));
  text-align: center;
  text-shadow: 0 calc(0.1 * var(--u)) calc(0.5 * var(--u)) #000;
}

.slide--cover.active .cover-content {
  animation: p5-cover-in 0.9s cubic-bezier(0.2, 0.9, 0.3, 1) both;
}

.cover-presents {
  font-family: var(--font-p5-body);
  font-size: calc(var(--cover-sub) * var(--u));
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.3;
}

.cover-logo {
  display: block;
  height: calc(var(--cover-logo) * var(--u));
  width: auto;
  filter: drop-shadow(0 calc(0.2 * var(--u)) calc(0.6 * var(--u)) rgba(0, 0, 0, 0.8));
}

.cover-title {
  justify-content: center;
  gap: 0 0.35em;
  font-size: calc(var(--cover-title) * var(--u));
  text-shadow: none;
}

.cover-title .p5-ransom-word { gap: 0.04em; }

.cover-title .p5-ransom-letter {
  padding: 0.06em 0.13em;
  box-shadow: 0.06em 0.06em 0 #000;
}

@keyframes p5-cover-in {
  0%   { opacity: 0; transform: translateY(calc(2 * var(--u))); }
  100% { opacity: 1; transform: none; }
}

/* ==========================================================================
   CONTACT SLIDE
   ========================================================================== */
.contact-area {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(4 * var(--u));
  padding: 0 calc(4 * var(--u));
}

.contact-area .p5-ransom-title { justify-content: center; }

.contact-grid {
  display: grid;
  grid-template-columns: repeat(var(--c-cols), calc(var(--c-card) * var(--u)));
  gap: calc(var(--c-gap) * var(--u));
}

.contact-card {
  background: rgba(10, 10, 10, 0.92);
  border: var(--bw) solid var(--p5-white);
  box-shadow: var(--sh) var(--sh) 0 var(--p5-red);
  padding: calc(1.2 * var(--u));
  text-align: center;
  opacity: 0;
  transform: translateY(calc(3 * var(--u))) skewX(-3deg) rotate(-0.5deg);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.2, 0.9, 0.3, 1);
  transition-delay: calc(var(--i) * 0.12s);
}

.seq1-active .contact-card {
  opacity: 1;
  transform: skewX(-3deg) rotate(-0.5deg);
}

.instant .contact-card { transition: none !important; }

.qr-card {
  width: calc(var(--qr-size) * var(--u));
}

.qr-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  background: #fff;
  border: var(--bw) solid var(--p5-red);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-p5-title);
  font-size: calc(var(--qr-size) * 0.3 * var(--u));
  color: #d8d8d8;
}

.qr-frame::before { content: "QR"; }

.qr-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #fff;
}

.avatar-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  border: var(--bw) solid var(--p5-red);
  /* placeholder silhouette, shown until elements/avatarN.png exists */
  background:
    radial-gradient(circle at 50% 38%, #3a0006 0 20%, transparent 21%),
    radial-gradient(ellipse at 50% 100%, #3a0006 0 46%, transparent 47%),
    #111;
}

.avatar-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.contact-name {
  margin-top: calc(1 * var(--u));
  font-family: var(--font-p5-title);
  font-size: calc(var(--font-cname) * var(--u));
  letter-spacing: 0.04em;
  line-height: 1.2;
  text-transform: uppercase;
}

.contact-number {
  margin-top: calc(0.3 * var(--u));
  font-family: var(--font-p5-body);
  font-size: calc(var(--font-cnum) * var(--u));
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #ddd;
}

/* ?instant=true and reduced motion: no transitions or keyframes */
.instant .main-content-area,
.instant .slide {
  transition: none !important;
}

.instant .speaker,
.instant .dialogue-box,
.instant .cut-in-flash,
.instant .cover-content {
  animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .speaker, .dialogue-box, .cover-content { animation: none !important; }
  .main-content-area { transition: none; }
}

/* ==========================================================================
   COMPACT LANDSCAPE (phones on their side): bigger text relative to the stage
   ========================================================================== */
@media (orientation: landscape) and (max-height: 520px) {
  .slide {
    --font-title: 2.6;
    --font-card: 1.65;
    --font-dialog: 1.7;
    --font-name: 1.5;
    --tb-w: 92;
    --tb-h: 26;
    --tb-offset: 8;
    --content-top: 2;
    --content-w: 80;
    --content-h: calc(30 * var(--u));
    --cover-title: 8;
    --cover-sub: 2.4;
    --cover-logo: 11;
    --qr-size: 24;
    --font-cname: 2;
    --font-cnum: 1.55;
  }
}

/* ==========================================================================
   PORTRAIT (phones): stack content, character, full-width dialogue box
   ========================================================================== */
@media (orientation: portrait) {
  .slide {
    --scrim-dir: to bottom;

    --font-title: 7;
    --font-card: 3.7;
    --font-dialog: 3.3;
    --font-name: 3.4;

    --tb-w: 108;
    --tb-h: 62;
    --tb-offset: -4;
    --tb-bottom: 0;

    --char-bottom: calc(var(--tb-h) - 34);
    --char-h: min(calc(84 * var(--u)), 40cqh);

    --cover-title: 18;
    --cover-sub: 4.5;
    --cover-logo: 30;
    --qr-size: 70;
    --c-cols: 2;
    --c-card: 43;
    --c-gap: 4;
    --font-cname: 4.4;
    --font-cnum: 3.3;

    --content-top: 3;
    --content-side: 4;
    --content-w: 92;
    --content-h: max(calc(30 * var(--u)),
                     calc(100cqh - var(--char-bottom) * var(--u) - var(--char-h)
                          - var(--content-top) * var(--u) + 6 * var(--u)));
  }

  .slide--speaker-right,
  .slide--speaker-left {
    --scrim-dir: to bottom;
  }

  .slide--content::before {
    background:
      radial-gradient(circle at center, transparent 65%, rgba(0, 0, 0, 0.25) 100%),
      linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.3) 45%, rgba(0, 0, 0, 0.05) 100%);
  }

  /* cover: lockup in the black upper area, scene stays visible below */
  .cover-content {
    justify-content: flex-start;
    padding: 7cqh 0 0;
  }

  .cover-logo {
    height: min(calc(var(--cover-logo) * var(--u)), 15cqh);
  }

  .slide--cover .slide-bg-layer {
    background-position: 60% center;
  }

  .main-content-area {
    transform: translateY(calc(-4 * var(--u)));
  }

  .seq1-active .main-content-area {
    transform: none;
  }

  .slide--speaker-right .speaker { right: calc(-4 * var(--u)); }
  .slide--speaker-left  .speaker { left:  calc(-4 * var(--u)); }
}