/*
  Workmates Hero — five scenes, each a bespoke recreation of an audited
  reference screenshot (real HR Cloud product screens, plus a separate
  AI Insights survey chat) — see the per-scene comments below for each
  one's source. Colors are sampled directly from those references, not
  invented.

  Layout composition matches the reference recordings' own asymmetric
  split: product screen | photography panel.
*/

:root {
  --wmh-navy-deep: #060c1c; /* photo panel placeholder background */

  /* Neutrals */
  --wmh-white: #fff;
  --wmh-gray-bg: #f1f2f5;
  --wmh-gray-100: #e9eaee;
  --wmh-gray-300: #d7d9df;
  --wmh-gray-500: #6b7280;
  --wmh-text: #1c1f27;

  --wmh-radius-sm: 8px;
  --wmh-radius-md: 12px;
  --wmh-radius-lg: 18px;
  --wmh-radius-full: 9999px;

  --wmh-shadow: 0 20px 25px -5px #0000001a, 0 8px 10px -6px #0000001a;
  --wmh-shadow-sm: 0 2px 8px #0000001f;

  --wmh-font: "Lato", system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;

  --wmh-ease-out: cubic-bezier(0, 0, 0.2, 1);
}

/* ---------------------------------------------------------------------- */
/* Base                                                                    */
/* ---------------------------------------------------------------------- */

.wmh-hero {
  position: relative;
  background: var(--wmh-gray-bg);
  font-family: var(--wmh-font);
  color: var(--wmh-text);
  padding-block: clamp(2.5rem, 5vw, 4.5rem);
}

.wmh-hero__inner {
  max-width: 80rem;
  margin-inline: auto;
  padding-inline: 1.25rem;
}

/* Equal columns by default, sized so the photo box keeps its original
   width exactly (it was 1fr of a 2.1fr:1fr split) — the stage itself
   is narrowed and centered to match, rather than widening the photo
   box to fill the old product-panel space. A scene can widen its own
   share via --wmh-cols (see workmates-hero.js, SCENES[].columns,
   audited from the source recording — its desktop-dashboard scene
   runs wider).

   Column/width changes are intentionally instant, not transitioned:
   --wmh-cols and --wmh-stage-max are unregistered custom properties, so
   a transition on the properties that read them (grid-template-columns,
   max-width) doesn't interpolate cleanly — verified via slowed-down,
   real-time-captured frames, the previous 700ms transition here ran on
   its own timeline, out of step with the incoming mock's 700ms slide-in
   (SLIDE_MS in workmates-hero.js). For several hundred ms into every
   transition, the panel was still the OUTGOING scene's (wider) size
   while already showing the INCOMING scene's content stretched to fill
   it — e.g. the kudos phone rendering oversized and blended into the
   still-visible previous scene's sidebar, reading as the two scenes
   overlapping. Snapping both instantly, in lockstep with how the mocks
   already resize instantly via inset:0, removes that mismatched window;
   the incoming mock's own translateX slide is still what animates.

   No viewport media query — tablet and mobile render the exact same
   side-by-side layout as desktop; this is a fixed-width component
   embed, not a responsive reflow. */
.wmh-stage {
  --wmh-cols: minmax(0, 1fr) minmax(0, 1fr);
  display: grid;
  grid-template-columns: var(--wmh-cols);
  max-width: var(--wmh-stage-max, 50.5rem);
  margin-inline: auto;
  gap: 1.25rem;
  contain: layout paint;
}

.wmh-panel {
  position: relative;
  min-width: 0;
  border-radius: 1.25rem;
  overflow: hidden;
}

/* Transparent, shadowless by default — every scene's own content (each
   .wmh-mock paints its own opaque background, or is a bare cutout image
   like Scene 4's phone mockup) already covers this, so it's only ever
   visible as a fallback. Scene 2 (Survey AI Insights) used to keep a
   white card + drop-shadow look here (.wmh-panel--card, toggled in
   workmates-hero.js), but at this panel's fixed height the shadow's own
   downward offset had nowhere to render within the iframe's exact-height
   canvas below it — it read as abruptly sliced off rather than a
   floating card, and inconsistent with every other scene here being
   shadowless. Removed rather than fixed in place: .wmh-ai already paints
   its own full-bleed gradient card (see below), so the panel needed
   nothing extra. */

/* Both panels always share the same box dimensions — on every breakpoint,
   not just desktop where they happen to sit side by side. */
.wmh-panel--product,
.wmh-panel--photo {
  height: 34rem;
}

@media (max-width: 67.1875rem) {
  .wmh-panel--product,
  .wmh-panel--photo {
    height: 22rem;
  }
}

/* Scene 4's phone mockup PNG bakes in ~3.3% transparent top/bottom padding
   (visible phone content is 1719/1777 of the full image height), so at the
   shared panel height it reads slightly taller than the phone graphic next
   to it. Shrinks + re-centers the photo panel to that same visible height
   instead — align-self overrides the grid row's default stretch so it
   doesn't just get squashed against the top. */
.wmh-panel--photo-compact {
  height: calc(34rem * 1719 / 1777);
  align-self: center;
}

@media (max-width: 67.1875rem) {
  .wmh-panel--photo-compact {
    height: calc(22rem * 1719 / 1777);
  }
}

/* -- Product panel transition ---------------------------------------------
   Matches the source recording's own scene change exactly: each incoming
   scene is a full-bleed card that slides in from the right and covers the
   previous one, which never itself moves — it just sits underneath,
   instantly hidden once covered. There is no crossfade. The slide is
   driven by JS (workmates-hero.js) toggling an inline transform + a
   one-off transition so the same element can be reset off-panel (no
   transition) and re-enter (with one) every time its turn comes round
   again in the loop; this stylesheet only supplies the "parked
   off-panel" default and the eased duration used for the entrance. */

.wmh-mock {
  position: absolute;
  inset: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--wmh-white);
  transform: translateX(100%);
  pointer-events: none;
  z-index: 1;
}

.wmh-mock.is-active {
  /* Covers the initial (JS class-only) activation of scene 0, which never
     goes through the slideIn() inline-style path below. */
  transform: translateX(0);
  pointer-events: auto;
  z-index: 2;
}

/* Flat scenes — the shared reference screenshot placed as-is, no
   recreated markup. The base .wmh-mock rule paints every scene white
   behind its content; that's wrong for these, especially scene 4's
   transparent-background phone mockup, so it's cleared here. */
.wmh-mock--flat {
  background: var(--wmh-gray-bg);
}

.wmh-flat-reveal {
  display: block;
  width: 100%;
  height: 100%;
}

.wmh-mock--flat img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Scene 4's kudos image is a transparent-background phone mockup, not a
   rectangular screenshot — no white card box or rounded-corner clip
   behind it, so its own shape shows through cleanly. */
.wmh-panel--bare {
  background: transparent;
  border-radius: 0;
}

/* Per-scene reveal pacing — base delay before the first staggered element
   starts, the step between each subsequent one, and each element's own
   fade duration. Sampled directly from the source recording (see the
   per-scene comments below); every scene keeps its own cadence rather
   than sharing one generic timing. */
.wmh-reveal {
  opacity: 0;
  transform: translateY(10px);
}

.wmh-mock.is-active .wmh-reveal {
  animation: wmh-reveal-up var(--wmh-reveal-dur, 350ms) var(--wmh-ease-out) forwards;
  animation-delay: calc(
    var(--wmh-reveal-base, 300ms) + (var(--wmh-d, 0) * var(--wmh-reveal-step, 300ms))
  );
}

@keyframes wmh-reveal-up {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---------------------------------------------------------------------- */
/* Scene 2 — "AI Insights" survey chat                                     */
/* ---------------------------------------------------------------------- */
/* Recreated from HRCloudAIInsights.mp4 (0:24–0:43, chat panel only): a
   greeting state (icon/heading/subheading/four topic tabs) collapses into
   a live Q&A once the demo "asks" a question, with a typing indicator that
   swaps to an answer card carrying two supporting charts. Timings below
   are sampled from that clip. Its own accent is green (#32b885), not the
   purple used elsewhere in this file for the Vandelay Industries brand. */

.wmh-ai {
  --wmh-ai-accent: #32b885;
  --wmh-ai-accent-deep: #1f8f68;
  --wmh-ai-soft: #e3f5ec;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  /* Soft #32B885 wash — covers the whole card so it's still visible once
     the greeting collapses and the chat/answer takes over, not just
     during the greeting itself. */
  background: linear-gradient(180deg, var(--wmh-white) 0%, #f3fbf8 45%, var(--wmh-ai-soft) 100%);
}

.wmh-ai__header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.9rem 1.1rem 0;
}

.wmh-ai__title {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--wmh-text);
  margin: 0;
}

.wmh-ai__title svg {
  width: 15px;
  height: 15px;
  color: var(--wmh-ai-accent);
}

.wmh-ai__close {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--wmh-gray-500);
  border: 1px solid var(--wmh-gray-300);
  border-radius: 6px;
  padding: 0.3rem 0.7rem;
}

.wmh-ai__stage {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  padding: 0.5rem 1.1rem 0;
}

/* Greeting — visible immediately on activation, then collapses out of the
   way once the demo "asks" its question (2.2s in, sampled from the clip). */
.wmh-ai__greeting {
  text-align: center;
  max-height: 16rem;
  opacity: 1;
  overflow: hidden;
  border-radius: 10px;
  padding: 1.1rem 0.5rem 0.75rem;
}

.wmh-mock.is-active .wmh-ai__greeting {
  animation: wmh-ai-collapse 500ms var(--wmh-ease-out) forwards;
  animation-delay: 2200ms;
}

@keyframes wmh-ai-collapse {
  to {
    opacity: 0;
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    transform: translateY(-6px);
  }
}

.wmh-ai__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 999px;
  background: var(--wmh-white);
  color: var(--wmh-ai-accent);
  margin-bottom: 0.6rem;
}

.wmh-ai__icon svg {
  width: 18px;
  height: 18px;
}

.wmh-ai__greeting h3 {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--wmh-text);
  margin: 0 0 0.4rem;
}

.wmh-ai__greeting p {
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--wmh-gray-500);
  max-width: 26rem;
  margin: 0 auto 0.9rem;
}

.wmh-ai__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.wmh-ai__tabs--big {
  justify-content: center;
}

.wmh-ai__tab {
  background: var(--wmh-white);
  border: 1px solid var(--wmh-gray-300);
  border-radius: 999px;
  padding: 0.4rem 0.8rem;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--wmh-text);
  white-space: nowrap;
}

.wmh-ai__tabs--small {
  opacity: 0;
}

.wmh-mock.is-active .wmh-ai__tabs--small {
  animation: wmh-ai-fade-in 400ms var(--wmh-ease-out) forwards;
  animation-delay: 2350ms;
}

.wmh-ai__tabs--small .wmh-ai__tab {
  padding: 0.3rem 0.6rem;
  font-size: 0.625rem;
  color: var(--wmh-gray-500);
}

@keyframes wmh-ai-fade-in {
  to {
    opacity: 1;
  }
}

/* Chat — the question/typing/answer sequence beneath the greeting */
.wmh-ai__chat {
  padding-top: 0.75rem;
}

.wmh-ai__bubble-row {
  display: flex;
  justify-content: flex-end;
  opacity: 0;
}

.wmh-mock.is-active .wmh-ai__bubble-row {
  animation: wmh-ai-fade-in 400ms var(--wmh-ease-out) forwards;
  animation-delay: 2550ms;
}

.wmh-ai__bubble {
  background: var(--wmh-ai-soft);
  color: var(--wmh-text);
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 0.6rem 1rem;
  border-radius: 1rem 1rem 0.2rem 1rem;
  max-width: 80%;
}

.wmh-ai__typing {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
  color: var(--wmh-ai-accent);
  opacity: 0;
}

.wmh-ai__typing svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.wmh-mock.is-active .wmh-ai__typing {
  animation: wmh-ai-typing-blip 700ms steps(1, end) forwards;
  animation-delay: 2700ms;
}

@keyframes wmh-ai-typing-blip {
  0% {
    opacity: 0;
  }
  15%,
  85% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.wmh-ai__dots {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: var(--wmh-white);
  box-shadow: 0 1px 4px #0000001a;
  border-radius: 999px;
  padding: 0.55rem 0.7rem;
}

.wmh-ai__dots i {
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: var(--wmh-ai-accent);
  animation: wmh-ai-dot-bounce 1s ease-in-out infinite;
}

.wmh-ai__dots i:nth-child(2) {
  animation-delay: 0.15s;
}

.wmh-ai__dots i:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes wmh-ai-dot-bounce {
  0%,
  60%,
  100% {
    transform: translateY(0);
    opacity: 0.5;
  }
  30% {
    transform: translateY(-3px);
    opacity: 1;
  }
}

.wmh-ai__answer {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: 0.75rem;
  opacity: 0;
}

.wmh-mock.is-active .wmh-ai__answer {
  animation: wmh-ai-fade-in 450ms var(--wmh-ease-out) forwards;
  animation-delay: 3350ms;
}

.wmh-ai__answer-icon {
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  margin-top: 0.2rem;
  color: var(--wmh-ai-accent);
}

.wmh-ai__answer-card {
  flex: 1;
  min-width: 0;
  background: var(--wmh-white);
  box-shadow: 0 1px 6px #0000001a;
  border-radius: 0.9rem;
  padding: 0.75rem 0.85rem;
}

.wmh-ai__answer-card > p {
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--wmh-text);
  margin: 0 0 0.7rem;
}

.wmh-ai__charts {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--wmh-gray-100);
}

.wmh-ai__donut {
  position: relative;
  flex-shrink: 0;
  width: 3.4rem;
  height: 3.4rem;
}

.wmh-ai__donut svg {
  width: 100%;
  height: 100%;
}

.wmh-ai__donut span {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 0.6875rem;
  font-weight: 800;
  color: var(--wmh-text);
  line-height: 1.1;
}

.wmh-ai__donut span small {
  font-size: 0.3rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--wmh-gray-500);
  margin-top: 1px;
}

.wmh-ai__bars {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.wmh-ai__bar {
  display: grid;
  grid-template-columns: 3.2rem 1fr 1.8rem;
  align-items: center;
  gap: 0.4rem;
}

.wmh-ai__bar-label {
  font-size: 0.5625rem;
  color: var(--wmh-gray-500);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wmh-ai__bar-track {
  height: 5px;
  border-radius: 999px;
  background: var(--wmh-gray-100);
  overflow: hidden;
}

.wmh-ai__bar-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--wmh-ai-accent);
  transform: scaleX(0);
  transform-origin: left center;
}

.wmh-mock.is-active .wmh-ai__bar-fill {
  animation: wmh-ai-bar-fill 700ms var(--wmh-ease-out) forwards;
  animation-delay: 3550ms;
}

@keyframes wmh-ai-bar-fill {
  to {
    transform: scaleX(var(--wmh-w, 0));
  }
}

.wmh-ai__bar-pct {
  font-size: 0.5625rem;
  font-weight: 700;
  color: var(--wmh-text);
  text-align: right;
}

.wmh-ai__inputbar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin: 0.75rem 1.1rem 0;
  padding: 0.55rem 0.55rem 0.55rem 0.9rem;
  border: 1px solid var(--wmh-gray-300);
  border-radius: 999px;
}

.wmh-ai__inputbar > span:first-child {
  font-size: 0.75rem;
  color: var(--wmh-gray-500);
}

.wmh-ai__send {
  flex-shrink: 0;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 999px;
  background: var(--wmh-ai-accent);
  color: var(--wmh-white);
  display: flex;
  align-items: center;
  justify-content: center;
}

.wmh-ai__send svg {
  width: 11px;
  height: 11px;
  transform: rotate(-90deg);
}

.wmh-ai__disclaimer {
  flex-shrink: 0;
  text-align: center;
  font-size: 0.625rem;
  color: var(--wmh-gray-500);
  margin: 0.4rem 0 0.85rem;
}

@media (prefers-reduced-motion: reduce) {
  .wmh-ai__greeting {
    animation: none !important;
    opacity: 0 !important;
    max-height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  .wmh-ai__tabs--small,
  .wmh-ai__bubble-row,
  .wmh-ai__answer {
    animation: none !important;
    opacity: 1 !important;
  }
  .wmh-ai__typing {
    animation: none !important;
    opacity: 0 !important;
    display: none !important;
  }
  .wmh-ai__dots i {
    animation: none !important;
  }
  .wmh-ai__bar-fill {
    animation: none !important;
    transform: scaleX(var(--wmh-w, 0)) !important;
  }
}

/* ---------------------------------------------------------------------- */
/* HR Cloud scenes — shared chrome (Scenes 1, 3 & 4)                       */
/* ---------------------------------------------------------------------- */
/* Scene 1 ("New York Team"), Scene 3 (Feed — Mandatory Read announcement)
   and Scene 4 (Feed — kudos) all recreate real HR Cloud product screens,
   so they share one sidebar/topbar/card chrome here. Logos and the eight
   app icons are the real brand assets extracted from
   ~/Downloads/dashboard animation copy/homepage-dashboard/img — not
   hand-drawn — so this scene's colors intentionally follow those assets
   (navy chrome, teal accent, HR Cloud's own orange for CTAs/ribbons)
   rather than this file's Vandelay-purple palette. */

.wmh-hrc {
  height: 100%;
  overflow: hidden;
  display: flex;
  background: var(--wmh-white);
}

.wmh-hrc__sidebar {
  flex-shrink: 0;
  width: 1.75rem;
  background: #1e2530;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 0.4rem;
  overflow: hidden;
}

.wmh-hrc__badge {
  width: 1.05rem;
  height: 1.05rem;
  margin-bottom: 0.45rem;
  flex-shrink: 0;
}

.wmh-hrc__badge img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.wmh-hrc__worklogo {
  width: 1.05rem;
  height: 1.05rem;
  margin-bottom: 0.45rem;
  flex-shrink: 0;
}

.wmh-hrc__worklogo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Nine plain icons (Tasks/Chat/Calendar/… ) — real HR Cloud SVGs, dimmed
   like the reference's own subtle inactive-icon treatment. */
.wmh-hrc__navicons {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  margin-bottom: 0.45rem;
}

.wmh-hrc__navicon {
  width: 0.8rem;
  height: 0.8rem;
  color: #6b7684;
  flex-shrink: 0;
}

.wmh-hrc__navicon svg {
  width: 100%;
  height: 100%;
}

/* Colored "Applications" icons — real brand assets, sit below the plain
   icons exactly as in the audited sidebar. */
.wmh-hrc__apps {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.32rem;
}

.wmh-hrc__app {
  width: 1.05rem;
  height: 1.05rem;
  flex-shrink: 0;
}

.wmh-hrc__app img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 3px;
}

.wmh-hrc__main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.wmh-hrc__topbar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.6rem;
  background: #2b3542;
}

.wmh-hrc__search {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  background: #3d4753;
  border-radius: 6px;
  padding: 0.2rem 0.6rem;
  color: #9aa4b2;
  font-size: 0.5625rem;
}

.wmh-hrc__search svg {
  width: 9px;
  height: 9px;
  flex-shrink: 0;
}

.wmh-hrc__topbar-icons {
  margin-left: auto;
  color: #9aa4b2;
  display: flex;
  align-items: center;
}

.wmh-hrc__topbar-icons svg {
  width: 11px;
  height: 11px;
}

.wmh-hrc__avatar {
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 999px;
  object-fit: cover;
  margin-left: 0.5rem;
  flex-shrink: 0;
}

/* Banner — photo variant (Scene 1's team header) */
.wmh-hrc__banner {
  position: relative;
  flex-shrink: 0;
  display: flex;
  overflow: hidden;
}

.wmh-hrc__banner--photo {
  height: 4.5rem;
  background-size: cover;
  background-position: center;
}

.wmh-hrc__banner--photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #00000000 40%, #000000a6 100%);
}

.wmh-hrc__back {
  position: absolute;
  z-index: 1;
  top: 0.4rem;
  left: 0.7rem;
  color: #fff;
  font-size: 0.5rem;
  font-weight: 700;
}

.wmh-hrc__team-name {
  position: absolute;
  z-index: 1;
  bottom: 0.4rem;
  left: 0.7rem;
  color: #fff;
  font-size: 0.875rem;
  font-weight: 800;
}

.wmh-hrc__banner-actions {
  position: absolute;
  z-index: 1;
  bottom: 0.45rem;
  right: 0.7rem;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.wmh-hrc__icon-btn {
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 4px;
  border: 1px solid #ffffff66;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.5625rem;
}

.wmh-hrc__edit-btn {
  border: 1px solid #ffffff66;
  border-radius: 4px;
  color: #fff;
  font-size: 0.5rem;
  font-weight: 700;
  text-transform: uppercase;
  padding: 0.25rem 0.5rem;
  white-space: nowrap;
}

/* Banner — brand variant (Scenes 3 & 4's teal "HR Cloud" header) */
.wmh-hrc__banner--brand {
  height: 2.5rem;
  background: linear-gradient(160deg, #bfe8e4, #4fb6b8);
  align-items: center;
  justify-content: center;
}

.wmh-hrc__banner--brand img {
  height: 1.1rem;
}

.wmh-hrc__navstrip {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.35rem 0.7rem;
  background: var(--wmh-white);
  border-bottom: 1px solid var(--wmh-gray-100);
  overflow: hidden;
}

.wmh-hrc__tab {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.5625rem;
  font-weight: 600;
  color: var(--wmh-gray-500);
  padding-bottom: 0.25rem;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}

.wmh-hrc__tab svg {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
}

.wmh-hrc__tab-chevron {
  width: 7px !important;
  height: 7px !important;
  margin-left: -0.1rem;
}

.wmh-hrc__tab.is-active {
  color: var(--wmh-text);
  border-bottom-color: #3fb6b8;
}

.wmh-hrc__content {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  /* Same soft #32B885 wash used on the Survey AI Insights card, so every
     scene shares that treatment. */
  background: linear-gradient(180deg, var(--wmh-gray-bg) 0%, #f3fbf8 45%, #e3f5ec 100%);
  padding: 0.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.wmh-hrc__content--split {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 0.6rem;
  align-items: start;
}

.wmh-hrc__card {
  background: var(--wmh-white);
  border-top: 2px solid #3fb6b8;
  border-radius: 3px;
  box-shadow: 0 1px 2px #0000000f;
  padding: 0.55rem 0.65rem;
  min-width: 0;
}

.wmh-hrc__card-title {
  display: flex;
  align-items: center;
  font-size: 0.625rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--wmh-text);
  margin: 0 0 0.5rem;
}

.wmh-hrc__view-all {
  margin-left: auto;
  flex-shrink: 0;
  font-size: 0.5625rem;
  font-weight: 700;
  text-transform: none;
  color: #3fb0b6;
}

.wmh-btn-teal {
  display: inline-block;
  background: #3fb6b8;
  color: #fff;
  font-size: 0.5625rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  padding: 0.3rem 0.6rem;
  border-radius: 3px;
}

/* -- Scene 1 — Description + Featured Posts ------------------------------ */

.wmh-hrc__desc {
  display: flex;
  gap: 0.6rem;
}

.wmh-hrc__desc-photo {
  flex: 1.3;
  min-width: 0;
  height: 5.5rem;
  border-radius: 4px;
  background-size: cover;
  background-position: center;
}

.wmh-hrc__desc-text {
  flex: 1;
  min-width: 0;
}

.wmh-hrc__kicker {
  font-size: 0.5rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--wmh-gray-500);
  margin: 0 0 0.2rem;
}

.wmh-hrc__desc-text h3 {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--wmh-text);
  margin: 0 0 0.3rem;
}

.wmh-hrc__desc-text > p:last-child {
  font-size: 0.5625rem;
  line-height: 1.45;
  color: var(--wmh-gray-500);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.wmh-hrc__dots {
  display: flex;
  justify-content: center;
  gap: 0.3rem;
  margin-top: 0.55rem;
}

.wmh-hrc__dots span {
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: var(--wmh-gray-100);
}

.wmh-hrc__dots span.is-active {
  background: #3fb6b8;
}

.wmh-hrc__section-title {
  display: flex;
  align-items: center;
  font-size: 0.625rem;
  font-weight: 800;
  color: var(--wmh-text);
  margin: 0 0 0.5rem;
}

.wmh-hrc__featured-row {
  display: flex;
  gap: 0.5rem;
}

.wmh-hrc__featured-card {
  position: relative;
  flex: 1;
  min-width: 0;
  background: var(--wmh-white);
  border: 1px solid var(--wmh-gray-100);
  border-radius: 4px;
  padding: 0.45rem;
}

.wmh-hrc__pin {
  position: absolute;
  top: 0.3rem;
  right: 0.3rem;
  font-size: 0.5rem;
}

.wmh-hrc__featured-card img {
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 999px;
  object-fit: cover;
  margin-bottom: 0.3rem;
}

.wmh-hrc__featured-card strong {
  display: block;
  font-size: 0.5625rem;
  font-weight: 700;
  color: var(--wmh-text);
}

.wmh-hrc__featured-card span {
  font-size: 0.5rem;
  color: var(--wmh-gray-500);
}

/* -- Scenes 3 & 4 — Feed main post ---------------------------------------- */

.wmh-hrc__post-head {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.5rem;
}

.wmh-hrc__post-head img {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 999px;
  object-fit: cover;
  flex-shrink: 0;
}

.wmh-hrc__post-head p {
  font-size: 0.625rem;
  color: var(--wmh-gray-500);
  margin: 0;
}

.wmh-hrc__post-head strong {
  color: var(--wmh-text);
  font-weight: 700;
}

.wmh-hrc__post-photo {
  position: relative;
  height: 7.5rem;
  border-radius: 4px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  margin-bottom: 0.5rem;
}

.wmh-hrc__ribbon {
  position: absolute;
  top: 0.45rem;
  left: 0;
  background: #f0632c;
  color: #fff;
  font-size: 0.5rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  padding: 0.2rem 0.55rem;
}

.wmh-hrc__post-title {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--wmh-text);
  margin: 0 0 0.35rem;
}

.wmh-hrc__post-body {
  font-size: 0.625rem;
  line-height: 1.5;
  color: var(--wmh-gray-500);
  margin: 0 0 0.4rem;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.wmh-hrc__see-more {
  display: block;
  font-size: 0.5625rem;
  font-weight: 700;
  color: var(--wmh-text);
  text-decoration: underline;
  margin-bottom: 0.55rem;
}

.wmh-hrc__cta--orange {
  background: #f0632c;
}

.wmh-hrc__like-row {
  margin-top: 0.55rem;
  display: flex;
  gap: 0.8rem;
  font-size: 0.625rem;
  color: var(--wmh-gray-500);
}

/* Kudos card (Scene 4) */
.wmh-hrc__kudos-card {
  position: relative;
  background: linear-gradient(160deg, #eafaf3, #f7fdfb);
  border-radius: 6px;
  padding: 1rem 0.7rem 0.7rem;
  text-align: center;
  margin-bottom: 0.5rem;
}

.wmh-hrc__kudos-medal {
  position: absolute;
  top: 0.4rem;
  right: 0.6rem;
  font-size: 1.4rem;
}

.wmh-hrc__kudos-thanks {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--wmh-text);
  margin: 0 0 0.6rem;
}

.wmh-hrc__kudos-recipients {
  display: flex;
  justify-content: center;
  gap: 0.6rem;
}

.wmh-hrc__kudos-recip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
}

.wmh-hrc__kudos-recip img {
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  object-fit: cover;
}

.wmh-hrc__kudos-recip span {
  font-size: 0.5rem;
  font-weight: 600;
  color: var(--wmh-text);
}

.wmh-hrc__kudos-message {
  text-align: center;
  font-size: 0.6875rem;
  color: var(--wmh-text);
  margin: 0 0 0.4rem;
}

/* Right rail widgets (Scenes 3 & 4) */
.wmh-hrc__rail {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.wmh-hrc__widget .wmh-hrc__view-all {
  display: block;
  margin: 0.2rem 0 0;
}

.wmh-hrc__ann-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.4rem;
}

.wmh-hrc__ann-icon {
  width: 0.9rem;
  flex-shrink: 0;
  font-size: 0.5625rem;
  color: #f0632c;
  text-align: center;
}

.wmh-hrc__ann-icon--done {
  color: #1f9d75;
}

.wmh-hrc__skeleton {
  flex: 1;
  height: 6px;
  border-radius: 999px;
  background: var(--wmh-gray-100);
}

.wmh-hrc__leave-btn {
  display: block;
  text-align: center;
  margin-bottom: 0.4rem;
}

.wmh-hrc__leave-note {
  font-size: 0.5625rem;
  color: var(--wmh-gray-500);
  margin: 0;
}

.wmh-hrc__kudos-icons {
  display: flex;
  gap: 0.55rem;
}

.wmh-hrc__kudos-icons span {
  position: relative;
  font-size: 1.1rem;
}

.wmh-hrc__kudos-icons b {
  position: absolute;
  bottom: -3px;
  right: -6px;
  background: #3fb6b8;
  color: #fff;
  font-size: 0.4375rem;
  font-weight: 800;
  border-radius: 999px;
  padding: 0 3px;
}

/* ---------------------------------------------------------------------- */
/* Scene 5 — "Sunrise Hotel" HR Cloud Feed page                            */
/* ---------------------------------------------------------------------- */
/* Same sidebar/topbar chrome as Scenes 1/3/4 (reused per request — real
   extracted assets). Its own blue banner blends in an exact photo crop
   with nav tabs sitting directly on the banner (no separate white nav
   row), filter pills above the feed, an "Acknowledged" post, and a right
   rail of real (non-skeleton) announcement rows plus a Channels list —
   all audited from the reference screenshot. */

.wmh-hrc__banner--sunrise {
  height: 5.5rem;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-end;
  background-size: cover;
  background-position: right center;
  background-color: #2255e0;
}

.wmh-hrc__banner--sunrise::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #1c4be0 0%, #2f65f0 55%, transparent 100%);
}

.wmh-hrc__sunrise-top {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 0.7rem 0.3rem;
}

.wmh-hrc__sunrise-brand {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.03em;
}

.wmh-hrc__sunrise-brand img {
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 999px;
  object-fit: contain;
}

.wmh-hrc__banner--sunrise .wmh-hrc__banner-actions {
  position: absolute;
  top: 0.5rem;
  right: 0.7rem;
  bottom: auto;
}

.wmh-hrc__navstrip--onbanner {
  position: relative;
  z-index: 1;
  background: transparent;
  border-bottom: none;
  padding: 0.2rem 0.7rem 0.4rem;
}

.wmh-hrc__navstrip--onbanner .wmh-hrc__tab {
  color: #ffffffcc;
}

.wmh-hrc__navstrip--onbanner .wmh-hrc__tab.is-active {
  color: #fff;
  border-bottom-color: #fff;
}

.wmh-hrc__filters {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.55rem;
}

.wmh-hrc__filter-pill {
  font-size: 0.5625rem;
  font-weight: 700;
  padding: 0.3rem 0.55rem;
  border-radius: 3px;
  border: 1px solid var(--wmh-gray-300);
  color: var(--wmh-text);
  white-space: nowrap;
}

.wmh-hrc__filter-pill.is-active {
  background: #3fb6b8;
  border-color: #3fb6b8;
  color: #fff;
}

.wmh-hrc__filter-clear {
  font-size: 0.5625rem;
  font-weight: 700;
  color: var(--wmh-gray-500);
  white-space: nowrap;
}

.wmh-hrc__ribbon--ack {
  background: #3fb6b8;
}

/* Real (non-skeleton) announcement rows */
.wmh-hrc__ann-real {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--wmh-gray-100);
}

.wmh-hrc__ann-real:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.wmh-hrc__ann-real-title {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--wmh-text);
  margin: 0 0 0.35rem;
}

.wmh-hrc__ann-real-title svg {
  width: 11px;
  height: 11px;
  color: #1f9d75;
  flex-shrink: 0;
}

.wmh-hrc__ann-real-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.wmh-hrc__ann-real-row img {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 999px;
  object-fit: cover;
  flex-shrink: 0;
}

.wmh-hrc__ann-real-row div {
  flex: 1;
  min-width: 0;
}

.wmh-hrc__ann-real-row strong {
  display: block;
  font-size: 0.625rem;
  font-weight: 600;
  color: var(--wmh-gray-500);
}

.wmh-hrc__ann-real-row span {
  font-size: 0.5625rem;
  color: var(--wmh-gray-500);
}

.wmh-hrc__ann-real-row svg {
  width: 10px;
  height: 10px;
  color: var(--wmh-gray-300);
  flex-shrink: 0;
}

.wmh-hrc__channel-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0;
}

.wmh-hrc__channel-icon {
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 4px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 0.625rem;
  font-weight: 800;
}

.wmh-hrc__channel-row span:last-child {
  font-size: 0.625rem;
  font-weight: 600;
  color: var(--wmh-text);
}

/* ---------------------------------------------------------------------- */
/* Photography panel                                                       */
/* ---------------------------------------------------------------------- */

.wmh-photo {
  /* Same slide-in-covers-the-previous mechanic as .wmh-mock — the
     reference's photography panel changes in lockstep with the product
     panel, not on its own crossfade. */
  position: absolute;
  inset: 0;
  transform: translateX(100%);
  z-index: 1;
}

.wmh-photo.is-active {
  transform: translateX(0);
  z-index: 2;
}

.wmh-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---------------------------------------------------------------------- */
/* Screen-reader-only live region + reduced motion                        */
/* ---------------------------------------------------------------------- */

.wmh-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .wmh-mock,
  .wmh-photo {
    transition-duration: 1ms !important;
    transform: none !important;
  }
  .wmh-reveal {
    opacity: 1 !important;
    transform: none !important;
  }
  .wmh-mock.is-active .wmh-reveal {
    animation: none !important;
  }
}