/* ============================================================
   WORK PANEL — the talking-work layer (AI Bible Part 5-8)
   Shared by /advertising/ and /award-school/ only. Self-styled
   overlay component, sibling of the homepage twin panel rather
   than a themed extension of either host page (Award School runs
   its own self-contained cyan system and never touches this
   palette otherwise). Locked palette: teal #2AA8BC, green #8DBE3F,
   orange #F07C22, yellow #E8B32B on #0B0F1A. Oxanium / Space
   Grotesk / JetBrains Mono, same families as the rest of the site.
   Imported directly so exact weights (Space Grotesk 300 for the
   work's voice, 500 for the visitor's) are available regardless of
   what the host page happens to load.
   ============================================================ */
@import url("https://fonts.googleapis.com/css2?family=Oxanium:wght@600;700&family=Space+Grotesk:wght@300;400;500&family=JetBrains+Mono:wght@400;500&display=swap");

:root{
  --wp-bg: #0B0F1A;
  --wp-teal: #2AA8BC;
  --wp-green: #8DBE3F;
  --wp-orange: #F07C22;
  --wp-yellow: #E8B32B;
  --wp-paper: #FAF9F7;
}

/* ---------- persistent trigger — one per work, never hover-only ---------- */
.wp-trigger{
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px 9px 11px;
  border-radius: 999px;
  border: 1px solid rgba(42,168,188,0.55);
  background: rgba(11,15,26,0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--wp-teal);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-weight: 500;
  font-size: 11.5px;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}
.wp-trigger svg{ width: 15px; height: 15px; flex-shrink: 0; }
.wp-trigger:hover,
.wp-trigger:focus-visible{
  background: rgba(42,168,188,0.2);
  border-color: var(--wp-teal);
  transform: translateY(-1px);
}

html.layer-intro-done .wp-work-card .wp-trigger:not(.wp-trigger--lightbox),
html.layer-intro-done .aw-frame > .wp-trigger{
  animation: wp-arrive 720ms cubic-bezier(0.22, 1, 0.36, 1);
}
html.layer-intro-done .wp-work-card:nth-child(-n+3) .wp-trigger:not(.wp-trigger--lightbox),
html.layer-intro-done .aw-work:nth-of-type(-n+3) .aw-frame > .wp-trigger{
  animation:
    wp-arrive 720ms cubic-bezier(0.22, 1, 0.36, 1),
    wp-speak-glow 1.8s ease-out 0.55s 2;
}
html.layer-intro-done .wp-work-card:nth-child(1) .wp-trigger,
html.layer-intro-done .aw-work:nth-of-type(1) .aw-frame > .wp-trigger{ animation-delay: 0ms, 400ms; }
html.layer-intro-done .wp-work-card:nth-child(2) .wp-trigger,
html.layer-intro-done .aw-work:nth-of-type(2) .aw-frame > .wp-trigger{ animation-delay: 70ms, 470ms; }
html.layer-intro-done .wp-work-card:nth-child(3) .wp-trigger,
html.layer-intro-done .aw-work:nth-of-type(3) .aw-frame > .wp-trigger{ animation-delay: 140ms, 540ms; }
html.layer-intro-done .wp-work-card:nth-child(4) .wp-trigger,
html.layer-intro-done .aw-work:nth-of-type(4) .aw-frame > .wp-trigger{ animation-delay: 210ms; }
html.layer-intro-done .wp-work-card:nth-child(5) .wp-trigger,
html.layer-intro-done .aw-work:nth-of-type(5) .aw-frame > .wp-trigger{ animation-delay: 280ms; }
html.layer-intro-done .wp-work-card:nth-child(6) .wp-trigger,
html.layer-intro-done .aw-work:nth-of-type(6) .aw-frame > .wp-trigger{ animation-delay: 350ms; }
html.layer-intro-done .wp-work-card:nth-child(7) .wp-trigger,
html.layer-intro-done .aw-work:nth-of-type(7) .aw-frame > .wp-trigger{ animation-delay: 420ms; }
html.layer-intro-done .wp-work-card:nth-child(8) .wp-trigger,
html.layer-intro-done .aw-work:nth-of-type(8) .aw-frame > .wp-trigger{ animation-delay: 490ms; }
html.layer-intro-done .wp-work-card:nth-child(9) .wp-trigger,
html.layer-intro-done .aw-work:nth-of-type(9) .aw-frame > .wp-trigger{ animation-delay: 560ms; }
html.layer-intro-done .wp-work-card:nth-child(10) .wp-trigger,
html.layer-intro-done .aw-work:nth-of-type(10) .aw-frame > .wp-trigger{ animation-delay: 630ms; }
html.layer-intro-done .wp-work-card:nth-child(11) .wp-trigger,
html.layer-intro-done .aw-work:nth-of-type(11) .aw-frame > .wp-trigger{ animation-delay: 700ms; }
html.layer-intro-done .wp-work-card:nth-child(12) .wp-trigger,
html.layer-intro-done .aw-work:nth-of-type(12) .aw-frame > .wp-trigger{ animation-delay: 770ms; }
html.layer-intro-done .wp-work-card:nth-child(13) .wp-trigger,
html.layer-intro-done .aw-work:nth-of-type(13) .aw-frame > .wp-trigger{ animation-delay: 840ms; }
html.layer-intro-done .wp-work-card:nth-child(14) .wp-trigger{ animation-delay: 910ms; }
html.layer-intro-done .wp-work-card:nth-child(15) .wp-trigger{ animation-delay: 980ms; }
@keyframes wp-arrive{
  0% { transform: scale(0.86); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes wp-speak-glow{
  0%, 100% { box-shadow: 0 0 0 0 rgba(42,168,188,0); }
  40% { box-shadow: 0 0 0 8px rgba(42,168,188,0.28); }
}
@media (prefers-reduced-motion: reduce){
  html.layer-intro-done .wp-work-card .wp-trigger,
  html.layer-intro-done .aw-frame > .wp-trigger{ animation: none; }
}

/* ---------- Advertising restructured work cards ---------- */
.wp-work-card{ position: relative; }
.wp-work-card img + img{ margin-top: 8px; }
.wp-work-caption{
  margin: 10px 2px 0;
  font-family: "JetBrains Mono", monospace;
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(250,249,247,0.55);
}

/* ---------- Award School frame anchor ---------- */
.award-page .aw-frame{ position: relative; }

/* ---------- lightbox copy of the trigger — stays visible on the
   magnified image, pinned to viewport chrome (top), never over the
   image itself. Shared by both /advertising/ and /award-school/
   lightboxes; fixed positioning means it doesn't need to know either
   lightbox's own internal layout. data-work-id is kept in sync with
   whichever image is currently shown, by each page's own lightbox
   script - this file only needs the shared .wp-trigger class to pick
   the click up via delegation. ---------- */
.wp-trigger--lightbox{
  position: fixed;
  top: 22px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1500;
}
.wp-trigger--lightbox[hidden]{ display: none; }
@media (max-width: 700px){
  .wp-trigger--lightbox{
    left: 12px;
    top: 12px;
    transform: none;
  }
}

/* ---------- split view ----------
   Was a modal that blurred the work behind it, which meant the visitor
   talked to a piece they could no longer see. Now the work holds one
   side of the screen for the whole conversation - including across
   speaker swaps - and the chat holds the other. No backdrop blur,
   nothing hiding behind the panel.
   ---------------------------------------------------------------- */
.wp-overlay{
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: none;
  background: var(--wp-bg);
}
.wp-overlay.wp-open{ display: block; }

body.wp-locked{ overflow: hidden; }

.wp-shell{
  height: 100%;
  height: 100dvh;
  display: grid;
  /* Mobile: the work is pinned to the top 40% and stays there while the
     conversation scrolls underneath it. */
  grid-template-rows: 40vh 1fr;
  grid-template-rows: 40dvh 1fr;
  min-height: 0;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 220ms ease, transform 220ms ease;
}
.wp-overlay.wp-open .wp-shell{
  opacity: 1;
  transform: translateY(0);
}

@media (min-width: 900px){
  .wp-shell{
    /* Desktop: work left, chat right. */
    grid-template-rows: 1fr;
    grid-template-columns: 60fr 40fr;
  }
}

/* ---------- stage (the work itself) ---------- */
.wp-stage{
  position: relative;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  background: rgba(255,255,255,0.02);
  border-bottom: 1px solid rgba(42,168,188,0.28);
  transition: opacity 240ms ease;
}
.wp-stage.wp-stage-fading{ opacity: 0; }

@media (min-width: 900px){
  .wp-stage{
    border-bottom: none;
    border-right: 1px solid rgba(42,168,188,0.28);
    padding: 22px 24px;
    gap: 14px;
  }
}

.wp-stage-head{
  flex-shrink: 0;
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.wp-stage-figure{
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.wp-media-img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 6px;
}

/* ---------- multi-execution artwork ---------- */
/* The artwork itself is the control: click (or Enter/Space, this is a
   real <button>) to advance to the next execution, wrapping at the end.
   Every execution is a real <img> from render, never lazy, so the set
   is fully loaded before the visitor can click - the crossfade is a
   plain opacity transition between images already sitting in place. */
.wp-exec-frame{
  position: relative;
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  display: block;
}
.wp-exec-img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 6px;
  opacity: 0;
  transition: opacity 250ms ease;
}
.wp-exec-img.wp-exec-current{ opacity: 1; }
@media (prefers-reduced-motion: reduce){
  .wp-exec-img{ transition: none; }
}

.wp-exec-dots{
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.wp-exec-dot{
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(250,249,247,0.28);
}
.wp-exec-dot.wp-exec-dot-current{ background: var(--wp-teal); }

.wp-media-video{
  max-width: 100%;
  max-height: 100%;
  border-radius: 6px;
  background: #000;
}

.wp-media-missing{
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(250,249,247,0.45);
}

/* Social: the asset sits inside a phone, because that is where it ran. */
.wp-phone{
  height: 100%;
  aspect-ratio: 9 / 19.5;
  max-width: 100%;
  padding: 8px 6px;
  border-radius: 26px;
  border: 2px solid rgba(250,249,247,0.22);
  background: #0a0c12;
  box-shadow: 0 10px 40px rgba(0,0,0,0.5);
  display: flex;
}
.wp-phone-screen{
  flex: 1;
  min-height: 0;
  border-radius: 18px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
}
.wp-phone-screen .wp-media-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}

/* Radio: bars move only while audio is actually playing. They are a
   play-state indicator, not a rendering of the waveform data. */
.wp-media-audio{
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.wp-wave{
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 3px;
  height: 72px;
  width: 100%;
}
.wp-wave-bar{
  flex: 1 1 auto;
  max-width: 6px;
  height: 14%;
  border-radius: 2px;
  background: var(--wp-teal);
  opacity: 0.45;
  transform-origin: bottom;
}
.wp-media-audio.wp-playing .wp-wave-bar{
  animation: wp-wave 900ms ease-in-out infinite alternate;
  opacity: 1;
}
@keyframes wp-wave{
  from{ transform: scaleY(1); }
  to{ transform: scaleY(4.5); }
}
@media (prefers-reduced-motion: reduce){
  .wp-media-audio.wp-playing .wp-wave-bar{ animation: none; transform: scaleY(2.5); }
}
.wp-media-label{
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(250,249,247,0.55);
}
.wp-audio-el{ width: 100%; }

/* ---------- chat side ---------- */
.wp-chat{
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 14px 16px 12px;
}
@media (min-width: 900px){
  .wp-chat{ padding: 22px 22px 18px; }
}

.wp-speaker-label{
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(250,249,247,0.4);
}
.wp-speaker{
  font-family: "Oxanium", sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: var(--wp-paper);
}

/* ---------- handover divider ---------- */
.wp-handover{
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 16px 0 4px;
}
.wp-handover::before,
.wp-handover::after{
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(42,168,188,0.32);
}
.wp-handover-label{
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--wp-teal);
  white-space: nowrap;
}

/* ---------- inline work reference ---------- */
.wp-ref{
  font: inherit;
  color: var(--wp-teal);
  background: none;
  border: 0;
  border-bottom: 1px dashed currentColor;
  padding: 0;
  cursor: pointer;
}
.wp-ref:hover,
.wp-ref:focus-visible{ color: var(--wp-orange); }

.wp-header{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-shrink: 0;
}
.wp-header-text{ display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.wp-title{
  font-family: "Oxanium", sans-serif;
  font-weight: 700;
  font-size: 18px;
  color: var(--wp-paper);
}
.wp-medium{
  font-family: "JetBrains Mono", monospace;
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wp-teal);
}
.wp-medium:empty{ display: none; }
.wp-close{
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid rgba(250,249,247,0.16);
  background: rgba(250,249,247,0.04);
  color: var(--wp-paper);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.wp-close svg{ width: 16px; height: 16px; }
.wp-close:hover{ background: rgba(240,124,34,0.14); border-color: var(--wp-orange); color: var(--wp-orange); }

.wp-divider{
  height: 1px;
  margin: 16px 0;
  flex-shrink: 0;
  background: linear-gradient(90deg, var(--wp-teal), var(--wp-green));
  opacity: 0.5;
}

.wp-body{
  flex: 1 1 auto;
  overflow-y: auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 10px;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-top: 4px;
  --wp-footer-h: 0px;
  padding-bottom: min(var(--wp-footer-h), 18px);
}
.wp-body::-webkit-scrollbar{ display: none; }
.wp-body::before{ content: ""; margin-top: auto; }

.wp-msg{
  flex-shrink: 0;
  align-self: flex-start;
  max-width: 88%;
  overflow-wrap: anywhere;
  word-break: break-word;
  padding: 13px 15px;
  border-radius: 4px 12px 12px 12px;
  background: rgba(42,168,188,0.07);
  border: 1px solid rgba(42,168,188,0.2);
}
.wp-msg p{ margin: 0; font-size: 14px; line-height: 1.55; }

/* Locked type treatment: the work speaks lighter than the visitor. */
.wp-msg--work p{
  font-family: "Space Grotesk", sans-serif;
  font-weight: 300;
  color: var(--wp-paper);
  opacity: 0.82;
}
.wp-msg--visitor{
  align-self: flex-end;
  background: rgba(240,124,34,0.12);
  border-color: rgba(240,124,34,0.3);
  border-radius: 12px 4px 12px 12px;
}
.wp-msg--visitor p{
  font-family: "Space Grotesk", sans-serif;
  font-weight: 500;
  color: var(--wp-paper);
  opacity: 0.95;
}

.wp-msg-in{ animation: wp-in 0.35s ease forwards; }
@keyframes wp-in{ from{ opacity: 0; transform: translateY(6px); } to{ opacity: 1; transform: translateY(0); } }

.wp-typing{
  display: none;
  align-items: center;
  gap: 5px;
  align-self: flex-start;
  padding: 13px 15px;
  border-radius: 4px 12px 12px 12px;
  background: rgba(250,249,247,0.05);
  border: 1px solid rgba(250,249,247,0.08);
  width: fit-content;
  flex-shrink: 0;
}
.wp-typing.wp-visible{ display: flex; }
.wp-dot{
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(250,249,247,0.5);
  animation: wp-typing-fade 1.2s ease-in-out infinite;
}
.wp-dot:nth-child(2){ animation-delay: 0.2s; }
.wp-dot:nth-child(3){ animation-delay: 0.4s; }
@keyframes wp-typing-fade{ 0%,100%{ opacity: 0.3; } 50%{ opacity: 1; } }

.wp-footer{ flex-shrink: 0; padding-top: 14px; }

.wp-chip-row, .wp-vote-opts{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.wp-chip, .wp-vote-opt{
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(141,190,63,0.08);
  border: 1px solid rgba(141,190,63,0.4);
  color: var(--wp-green);
  font-family: "JetBrains Mono", monospace;
  font-weight: 500;
  font-size: 12px;
  cursor: pointer;
  transition: all 160ms ease;
}
.wp-chip:hover, .wp-vote-opt:hover,
.wp-chip:focus-visible, .wp-vote-opt:focus-visible{
  background: rgba(232,179,43,0.16);
  border-color: var(--wp-yellow);
  color: var(--wp-yellow);
  transform: translateY(-1px);
}
.wp-chip:disabled, .wp-vote-opt:disabled{
  opacity: 0.4;
  cursor: default;
  transform: none;
}

.wp-vote-question{
  font-family: "Space Grotesk", sans-serif;
  font-weight: 400;
  font-size: 13px;
  color: rgba(250,249,247,0.7);
  margin: 0 0 10px;
}

.wp-handoff{
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 13px 16px;
  border-radius: 10px;
  border: 1px solid rgba(240,124,34,0.4);
  background: rgba(240,124,34,0.08);
  color: var(--wp-orange);
  font-family: "Space Grotesk", sans-serif;
  font-weight: 500;
  font-size: 13px;
  line-height: 1.4;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background 160ms ease;
  box-sizing: border-box;
}
.wp-handoff:hover{ background: rgba(240,124,34,0.16); }
.wp-handoff-arrow{ width: 15px; height: 15px; margin-left: auto; flex-shrink: 0; }
.wp-handoff--reveal{ border-color: rgba(42,168,188,0.4); background: rgba(42,168,188,0.08); color: var(--wp-teal); }
.wp-handoff--reveal:hover{ background: rgba(42,168,188,0.16); }
.wp-handoff--email{ border-color: rgba(141,190,63,0.4); background: rgba(141,190,63,0.08); color: var(--wp-green); }
.wp-handoff--email:hover{ background: rgba(141,190,63,0.16); }

.wp-comment-block{ margin-top: 4px; }
.wp-comment-block + .wp-handoff{ margin-top: 14px; }
.wp-privacy{
  font-family: "JetBrains Mono", monospace;
  font-weight: 400;
  font-size: 10.5px;
  line-height: 1.5;
  color: rgba(250,249,247,0.42);
  margin: 0 0 8px;
}
.wp-comment-input{
  display: block;
  width: 100%;
  min-height: 56px;
  resize: vertical;
  border-radius: 8px;
  border: 1px solid rgba(250,249,247,0.18);
  background: rgba(250,249,247,0.03);
  color: var(--wp-paper);
  font-family: "Space Grotesk", sans-serif;
  font-size: 13px;
  padding: 10px 12px;
  box-sizing: border-box;
}
.wp-comment-input:focus{ outline: none; border-color: var(--wp-teal); }
.wp-comment-actions{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
}
.wp-comment-count{
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  color: rgba(250,249,247,0.4);
}
.wp-comment-send{
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--wp-teal);
  background: rgba(42,168,188,0.14);
  color: var(--wp-teal);
  font-family: "JetBrains Mono", monospace;
  font-weight: 500;
  font-size: 12px;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease;
}
.wp-comment-send:hover{ background: var(--wp-teal); color: #0B0F1A; }
.wp-comment-send:disabled{ opacity: 0.5; cursor: default; background: rgba(42,168,188,0.14); color: var(--wp-teal); }
.wp-comment-landed{
  font-family: "JetBrains Mono", monospace;
  font-weight: 400;
  font-size: 12px;
  line-height: 1.5;
  color: var(--wp-teal);
  margin: 4px 0 0;
}