/* Karapop popup skin. Layout lives in project-dialog.css. */

.visual-karapop {
  display: block;
  padding: 0;
  border: 0;
  background: #241535;
  cursor: pointer;
}

.visual-karapop img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  transition: transform .65s cubic-bezier(.2,.85,.2,1), filter .25s ease;
}

.visual-karapop::after {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: inset 0 -48px 80px rgba(36,21,53,.18);
  content: '';
  pointer-events: none;
}

.karapop-visual-prompt {
  position: absolute;
  z-index: 2;
  right: 10px;
  bottom: 10px;
  padding: 8px 9px;
  border: 2px solid #281742;
  border-radius: 999px;
  color: #281742;
  background: #ffe55c;
  box-shadow: 2px 3px 0 #281742;
  font: 800 9px/1 Arial, sans-serif;
  letter-spacing: .09em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(5px);
  transition: opacity .18s ease, transform .18s ease;
}

.visual-karapop:hover img,
.visual-karapop:focus-visible img {
  transform: scale(1.025);
  filter: saturate(1.08) brightness(1.04);
}

.visual-karapop:hover .karapop-visual-prompt,
.visual-karapop:focus-visible .karapop-visual-prompt {
  opacity: 1;
  transform: none;
}

.visual-karapop:focus-visible {
  z-index: 2;
  outline: 3px solid #161411;
  outline-offset: 3px;
}

body.karapop-open { overflow: hidden; }

.karapop-dialog {
  --kp-ink: #281742;
  --kp-pink: #ff4fb5;
  --kp-purple: #a348ed;
  --kp-purple-dark: #8f2fd6;
  --kp-yellow: #ffe55c;
  --kp-aqua: #75f2e2;
  --kp-paper: #fffafd;
  --kp-room: .72;
  color: var(--kp-ink);
  opacity: 0;
  transform: translateY(22px) rotate(-.35deg) scale(.98);
  transition: opacity .22s ease, transform .38s cubic-bezier(.18,.9,.28,1.15), overlay .38s allow-discrete, display .38s allow-discrete;
}

.karapop-dialog[open] { opacity: 1; transform: none; }
.karapop-dialog.is-closing { opacity: 0; transform: translateY(18px) rotate(.25deg) scale(.985); }

@starting-style {
  .karapop-dialog[open] { opacity: 0; transform: translateY(22px) rotate(-.35deg) scale(.98); }
}

.karapop-dialog::backdrop {
  background: rgba(24,11,35,.72);
  opacity: 0;
  backdrop-filter: blur(9px) saturate(.75);
  transition: opacity .22s ease, overlay .38s allow-discrete, display .38s allow-discrete;
}

.karapop-dialog[open]::backdrop { opacity: 1; }
.karapop-dialog.is-closing::backdrop { opacity: 0; }

@starting-style {
  .karapop-dialog[open]::backdrop { opacity: 0; }
}

.karapop-console {
  border: 3px solid var(--kp-ink);
  border-radius: 31px;
  background: linear-gradient(145deg, #f4dfff, #ffeaf6 48%, #d9f8ff);
  box-shadow: 10px 12px 0 var(--kp-ink), 0 24px 80px rgba(14,5,24,.42);
}

.karapop-console-bar {
  border-bottom: 3px solid var(--kp-ink);
  background: var(--kp-yellow);
}

.karapop-console-bar > p {
  font: 800 9px/1.3 Arial, sans-serif;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.karapop-wordmark {
  display: flex;
  align-items: baseline;
  color: var(--kp-ink);
  font: 900 clamp(24px, 2.6vw, 39px)/.8 "Arial Rounded MT Bold", "Trebuchet MS", Arial, sans-serif;
  letter-spacing: -.075em;
  transform: rotate(-2deg);
}

.karapop-wordmark b { color: var(--kp-purple-dark); font-weight: inherit; }

.karapop-close {
  border: 2px solid var(--kp-ink);
  border-radius: 14px;
  color: var(--kp-ink);
  background: var(--kp-paper);
  box-shadow: 3px 4px 0 var(--kp-ink);
  font: 900 10px/1 Arial, sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.karapop-close span { margin-left: 8px; color: var(--kp-pink); font-size: 20px; vertical-align: -2px; }
.karapop-close:hover, .karapop-close:focus-visible { background: var(--kp-aqua); outline: 0; transform: translate(1px, 1px); box-shadow: 2px 3px 0 var(--kp-ink); }
.karapop-close:focus-visible { outline: 3px solid var(--kp-ink); outline-offset: 3px; }

.karapop-stage {
  border-right: 3px solid var(--kp-ink);
  background: #130c19;
}

.karapop-stage > img {
  filter: brightness(calc(.68 + var(--kp-room) * .44)) saturate(calc(.78 + var(--kp-room) * .36));
  transform: scale(calc(1.018 - var(--kp-room) * .018));
  transition: filter .25s ease, transform .35s cubic-bezier(.2,.75,.2,1);
}

.karapop-stage-wash {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 49% 35%, rgba(255,229,92,calc(var(--kp-room) * .23)), transparent 29%),
    linear-gradient(120deg, rgba(255,79,181,calc(var(--kp-room) * .12)), transparent 44%, rgba(117,242,226,calc(var(--kp-room) * .12)));
  mix-blend-mode: screen;
  pointer-events: none;
}

.karapop-stage::after {
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 110px rgba(20,9,27,.38);
  content: '';
  pointer-events: none;
}

.karapop-stage figcaption {
  border-top: 1px solid rgba(255,255,255,.68);
  color: white;
  font: 700 8px/1.3 Arial, sans-serif;
  letter-spacing: .1em;
  text-shadow: 0 1px 8px #000;
  text-transform: uppercase;
}

.karapop-copy {
  background: var(--kp-paper);
  scrollbar-color: var(--kp-purple) transparent;
}

.karapop-copy > h2 {
  font: 900 clamp(40px, 4.3vw, 68px)/.88 "Arial Rounded MT Bold", "Trebuchet MS", Arial, sans-serif;
  letter-spacing: -.075em;
}

.karapop-summary p { color: #4f3d5e; font: 500 clamp(14px, 1.1vw, 17px)/1.55 Arial, sans-serif; }

.karapop-facts {
  border: 2px solid var(--kp-ink);
  border-radius: 15px;
  background: var(--kp-ink);
}

.karapop-facts div { background: #fff; }
.karapop-facts dt { color: var(--kp-purple-dark); font: 900 8px/1.2 Arial, sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.karapop-facts dd { font: 700 10px/1.35 Arial, sans-serif; }

.karapop-dock { border-top: 2px solid var(--kp-ink); background: var(--kp-paper); }

.karapop-cta {
  border: 2px solid var(--kp-ink);
  border-radius: 15px;
  color: var(--kp-ink);
  background: var(--kp-yellow);
  box-shadow: 4px 5px 0 var(--kp-ink);
  font: 900 12px/1 Arial, sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.karapop-cta span { color: var(--kp-purple-dark); font-size: 19px; }
.karapop-cta:hover, .karapop-cta:focus-visible { background: var(--kp-aqua); outline: 0; transform: translate(1px, 1px); box-shadow: 3px 4px 0 var(--kp-ink); }
.karapop-cta:focus-visible { outline: 3px solid var(--kp-ink); outline-offset: 3px; }

.karapop-related { border-top: 2px solid var(--kp-ink); }
.karapop-related > span { color: var(--kp-purple-dark); font: 900 8px/1.3 Arial, sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.karapop-related a { font: 700 11px/1.4 Arial, sans-serif; text-underline-offset: 4px; }

@media (max-width: 900px) {
  .karapop-stage { border-right: 0; border-bottom: 3px solid var(--kp-ink); }
  .karapop-stage > img { object-position: 50% 51%; }
  .karapop-copy > h2 { font-size: clamp(46px, 8.6vw, 68px); }
}

@media (max-width: 560px) {
  .karapop-visual-prompt { display: none; }
  .karapop-console { border: 0; border-radius: 0; box-shadow: none; }
  .karapop-console-bar { border-bottom-width: 2px; }
  .karapop-wordmark { font-size: 27px; }
  .karapop-close { box-shadow: 2px 3px 0 var(--kp-ink); }
  .karapop-close span { margin: 0; font-size: 25px; }
  .karapop-stage { border-bottom-width: 2px; }
  .karapop-stage figcaption { font-size: 7px; }
  .karapop-copy > h2 { font-size: 40px; line-height: .9; }
  .karapop-summary p { font-size: 14px; line-height: 1.5; }
  .karapop-cta { border-radius: 13px; box-shadow: 3px 4px 0 var(--kp-ink); font-size: 11px; }
}

@media (max-height: 650px) and (orientation: landscape) {
  .karapop-stage { border-right: 2px solid var(--kp-ink); border-bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .visual-karapop img,
  .karapop-visual-prompt,
  .karapop-dialog,
  .karapop-dialog::backdrop,
  .karapop-stage > img { transition: none; }
  .visual-karapop:hover img,
  .visual-karapop:focus-visible img { transform: none; }
}