/* Hypershadow case study — page shell tweaks and frames for the real product captures.
   The product UI itself lives in hypershadow-exact-*.html (captured from the Hypershadow
   back-office) and hypershadow-widget-live.html (the real chat widget bundle). */

:root {
  --hs-green: #a8ff62;
  --hs-amber: #f5a524;
  --hs-purple: #9353d3;
  --hs-ink: #f4f5f1;
  --hs-muted: #a5a7a1;
  --hs-dim: #72756f;
}

.project-case--hypershadow {
  --case-pink: var(--hs-green);
  --case-pink-dark: #17220f;
}

.project-case--hypershadow .case-hero h1 { max-width: 7ch; font-size: clamp(58px, 7.4vw, 108px); overflow-wrap: normal; }
.project-case--hypershadow .case-hero__copy {
  background-image:
    linear-gradient(180deg, transparent 58%, var(--bg) 96%),
    linear-gradient(rgb(167 255 98 / 5%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(167 255 98 / 5%) 1px, transparent 1px);
  background-size: 100% 100%, 24px 24px, 24px 24px;
}
.project-case--hypershadow .case-hero__media { background: #071412; }
.project-case--hypershadow .case-hero__media img { object-position: center; filter: saturate(.95) contrast(1.04); }
.project-case--hypershadow .case-story blockquote { border-color: var(--hs-green); }
.project-case--hypershadow .case-story--compact .case-story__body { min-height: 0; }

/* Real UI windows ------------------------------------------------------ */

.hs-exact.exact-case-showcase { background: #050505; }
.hs-exact .exact-window { border-color: #262830; background: #000; }
.hs-exact .exact-window__bar { background: #0b0c0f; }
.hs-exact .exact-capture,
.hs-exact .exact-capture iframe { background: #000; }
.hs-exact .exact-capture--live iframe { pointer-events: auto; }

/* Captured-state switcher (portfolio chrome, not product UI) */
.exact-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 8px 12px;
  border-bottom: 1px solid rgb(255 255 255 / 9%);
  background: #0b0c0f;
}
.exact-tabs button {
  padding: 6px 10px;
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: 999px;
  color: #8a8c94;
  background: transparent;
  font: 500 9px/1 var(--font-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.exact-tabs button:hover { color: #d6d7dc; border-color: rgb(255 255 255 / 22%); }
.exact-tabs button.is-active { color: #0b0c0f; background: #e6e7ea; border-color: #e6e7ea; }
.exact-tabs em { margin-left: auto; align-self: center; color: #5e6068; font: 400 9px/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; font-style: normal; }

/* Captures whose product tabs switch the state are pointer-enabled ------- */
.hs-exact .exact-capture--hotspots iframe { pointer-events: auto; }
.hs-exact .exact-capture--live { background: #0a0a0a; }

/* Self-playing cursor over the chat-model grid (portfolio chrome) --------- */
.hs-cursor {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  width: 22px;
  height: 22px;
  opacity: 0;
  pointer-events: none;
  will-change: transform;
  filter: drop-shadow(0 2px 4px rgb(0 0 0 / 55%));
}
.hs-cursor.is-visible { opacity: 1; }
.hs-cursor svg { display: block; }
.hs-cursor i {
  position: absolute;
  top: -8px;
  left: -8px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--hs-green);
  opacity: 0;
  transform: scale(.4);
}
.hs-cursor.is-click i { animation: hs-cursor-click .32s ease-out; }
@keyframes hs-cursor-click {
  0% { opacity: .9; transform: scale(.4); }
  100% { opacity: 0; transform: scale(1.6); }
}
.hs-exact .exact-capture--autoplay { position: relative; }
.hs-exact .exact-window[data-hs-autoplay] { position: relative; }
.hs-exact .exact-window[data-hs-autoplay] > .hs-cursor { z-index: 6; }

.hs-exact .exact-case-shot figcaption span { color: #9a9ca4; }

@media (max-width: 767px) {
  .project-case--hypershadow .case-hero h1 { font-size: clamp(52px, 16vw, 76px); }
  .project-case--hypershadow .case-hero__media { aspect-ratio: 1 / 1; }
  .exact-tabs { padding: 8px; }
  .exact-tabs em { display: none; }
  .hs-cursor { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .project-case--hypershadow * { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}