.message-hero {
  --okmh-duration: 20s;
  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: none;
  min-height: max(760px, 100svh);
  margin: 0;
  padding: 132px 24px 150px;
  overflow: visible;
  background: transparent;
  text-align: center;
}

.message-hero > .message-hero-copy {
  position: relative;
  z-index: 20;
  display: flex;
  width: min(100%, 860px);
  flex-direction: column;
  align-items: center;
}

.message-hero .message-hero-eyebrow {
  margin-bottom: 18px;
  color: var(--fg-mid);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
  line-height: 1.2;
  text-transform: lowercase;
}

.message-hero .message-hero-copy h1 {
  position: relative;
  z-index: 0;
  max-width: 860px;
  font-size: clamp(48px, 7.2vw, 92px);
  line-height: 1.03;
  white-space: normal;
}

.message-hero .message-hero-copy .sub {
  position: relative;
  z-index: 0;
  max-width: 760px;
}

.message-hero .message-hero-copy h1::before,
.message-hero .message-hero-copy .sub::before {
  content: "";
  position: absolute;
  z-index: -1;
  background: rgba(255, 255, 255, .05);
  -webkit-backdrop-filter: blur(6px) saturate(.96);
  backdrop-filter: blur(6px) saturate(.96);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 55%, rgba(0, 0, 0, .72) 78%, transparent 100%);
  mask-image: radial-gradient(ellipse at center, #000 55%, rgba(0, 0, 0, .72) 78%, transparent 100%);
  pointer-events: none;
  contain: paint;
}

.message-hero .message-hero-copy h1::before {
  inset: -16px -26px -10px;
  border-radius: 46px;
}

.message-hero .message-hero-copy .sub::before {
  inset: -8px -18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .04);
  -webkit-backdrop-filter: blur(5px) saturate(.97);
  backdrop-filter: blur(5px) saturate(.97);
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .message-hero .message-hero-copy h1::before,
  .message-hero .message-hero-copy .sub::before {
    background: rgba(255, 255, 255, .62);
  }
}

.message-hero > .okmh-messages {
  position: absolute;
  inset: 0;
  z-index: 3;
  overflow: hidden;
  pointer-events: none;
}

.okmh-float {
  position: absolute;
  bottom: 108px;
  left: 50%;
  opacity: 0;
  animation: okmhBranch var(--okmh-duration) linear var(--delay) infinite;
}

.message-hero:not(.is-suspended) .okmh-float { will-change: transform, opacity; }

.okmh-float.route-center-left { --spread-x:-20vw; --tilt:-1deg; }
.okmh-float.route-center-right { --spread-x:20vw; --tilt:1deg; }
.okmh-float.route-left { --spread-x:-34vw; --tilt:-2deg; }
.okmh-float.route-right { --spread-x:34vw; --tilt:2deg; }
.okmh-float.route-far-left { --spread-x:-48vw; --tilt:-3deg; }
.okmh-float.route-far-right { --spread-x:48vw; --tilt:3deg; }

.okmh-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 14px;
  width: clamp(250px, 19vw, 292px);
  min-height: 106px;
  padding: 18px 18px 17px;
  border: 1px solid #dededb;
  border-radius: 25px;
  background: #fff;
  box-shadow: 0 16px 38px rgba(0,0,0,.13), inset 0 1px #fff;
  color: #1c1c1e;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
  pointer-events: auto;
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.okmh-card:hover { transform: scale(1.025); box-shadow: 0 22px 68px rgba(0,0,0,.17), inset 0 1px #fff; }
.okmh-float:hover { animation-play-state: paused; }
.okmh-card.wide { width: clamp(290px, 23vw, 350px); }
.okmh-card.compact { width: clamp(238px, 18vw, 272px); }
.okmh-copy, .okmh-copy b, .okmh-copy small { display: block; }
.okmh-copy b { font-size: 15px; line-height: 1.25; }
.okmh-copy small { margin-top: 7px; color: #68686d; font-size: 13px; line-height: 1.36; }
.okmh-card > i { align-self: start; padding-top: 3px; color: rgba(60,60,67,.48); font-size: 11px; font-style: normal; }

.okmh-avatar, .okmh-reaction, .okmh-calendar { position: absolute; z-index: 5; background: #fff; box-shadow: 0 9px 20px rgba(0,0,0,.14); animation: okmhBob 4s ease-in-out infinite alternate; }
.okmh-avatar { display: block; width: 52px; height: 52px; overflow: hidden; border: 3px solid #fff; border-radius: 50%; }
.okmh-avatar img { width: 100%; height: 100%; object-fit: cover; }
.okmh-avatar.top-left { top:-29px; left:18px; }
.okmh-avatar.top-right { top:-29px; right:20px; }
.okmh-avatar.bottom-left { bottom:-25px; left:22px; }
.okmh-avatar.bottom-right { right:24px; bottom:-25px; }

.okmh-reaction { display:grid; place-items:center; width:42px; height:42px; border:1px solid #e2e2df; border-radius:50%; font-size:23px; }
.okmh-reaction.left { top:50%; left:-27px; transform:translateY(-50%); }
.okmh-reaction.right { top:50%; right:-27px; transform:translateY(-50%); }
.okmh-reaction.top { top:-25px; left:42%; }
.okmh-reaction.bottom { right:22%; bottom:-24px; }

.okmh-calendar { right:-38px; bottom:-25px; display:grid; place-items:center; width:74px; min-height:78px; overflow:hidden; border:1px solid #dededb; border-radius:16px; }
.okmh-calendar em { width:100%; padding:5px 0 4px; background:#ff5a5f; color:#fff; font-size:9px; font-style:normal; font-weight:700; text-align:center; }
.okmh-calendar strong { margin-top:3px; font-size:24px; line-height:1; }
.okmh-calendar small { padding-bottom:6px; color:#777; font-size:9px; }

.message-hero > .okmh-source { position:absolute; z-index:12; left:50%; bottom:22px; display:grid; place-items:center; width:88px; height:88px; transform:translateX(-50%); }
.okmh-source img { position:relative; z-index:2; display:block; width:76px; height:76px; border-radius:22px; box-shadow:0 18px 44px rgba(0,0,0,.18); }
.okmh-source span { position:absolute; inset:6px; border:1px solid rgba(179,255,0,.8); border-radius:25px; animation:okmhPulse 2.8s ease-out infinite; }

@keyframes okmhBob { from { translate:0 -2px; } to { translate:0 3px; } }
@keyframes okmhPulse { 0% { opacity:.8; transform:scale(.82); } 80%,100% { opacity:0; transform:scale(1.45); } }
@keyframes okmhBranch {
  0% { opacity:0; transform:translate3d(-50%,38px,0) rotate(0) scale(.18); }
  8% { opacity:.68; transform:translate3d(-50%,-3vh,0) rotate(0) scale(.28); }
  16% { opacity:.82; transform:translate3d(calc(-50% + var(--spread-x) * .06),-13vh,0) rotate(calc(var(--tilt) * .06)) scale(.38); }
  28% { opacity:.96; transform:translate3d(calc(-50% + var(--spread-x) * .2),-29vh,0) rotate(calc(var(--tilt) * .2)) scale(.58); }
  42% { opacity:1; transform:translate3d(calc(-50% + var(--spread-x) * .38),-45vh,0) rotate(calc(var(--tilt) * .38)) scale(.72); }
  60% { opacity:1; transform:translate3d(calc(-50% + var(--spread-x) * .6),-66vh,0) rotate(calc(var(--tilt) * .6)) scale(.86); }
  80% { opacity:.94; transform:translate3d(calc(-50% + var(--spread-x) * .82),-90vh,0) rotate(calc(var(--tilt) * .82)) scale(.96); }
  100% { opacity:0; transform:translate3d(calc(-50% + var(--spread-x)),-113vh,0) rotate(var(--tilt)) scale(1); }
}

.message-hero.is-suspended .okmh-float,
.message-hero.is-suspended .okmh-avatar,
.message-hero.is-suspended .okmh-reaction,
.message-hero.is-suspended .okmh-calendar,
.message-hero.is-suspended .okmh-source span { animation-play-state:paused; }

@media (max-width:700px) {
  .message-hero { min-height: max(720px, 100svh); padding: 118px 18px 132px; }
  .message-hero .message-hero-copy h1::before,
  .message-hero .message-hero-copy .sub::before {
    background: rgba(255, 255, 255, .06);
    -webkit-backdrop-filter: blur(4px) saturate(.98);
    backdrop-filter: blur(4px) saturate(.98);
  }
  .message-hero .message-hero-copy h1::before {
    inset: -12px -8px -8px;
    border-radius: 28px;
  }
  .message-hero .message-hero-copy .sub::before {
    inset: -6px -8px;
  }
  .message-hero .message-hero-eyebrow { margin-bottom: 14px; font-size: 11px; }
  .message-hero .message-hero-copy h1 { font-size: clamp(42px, 13vw, 62px); }
  .message-hero .message-hero-copy .sub { max-width: 520px; }
  .okmh-float.route-center-left { --spread-x:-32vw; }
  .okmh-float.route-center-right { --spread-x:32vw; }
  .okmh-float.route-left { --spread-x:-54vw; }
  .okmh-float.route-right { --spread-x:54vw; }
  .okmh-float.route-far-left { --spread-x:-76vw; }
  .okmh-float.route-far-right { --spread-x:76vw; }
  .okmh-card { width:246px; min-height:98px; padding:15px; border-radius:21px; }
  .okmh-card.wide { width:270px; }
  .okmh-card.compact { width:224px; }
  .okmh-copy b { font-size:14px; }
  .okmh-copy small { font-size:11px; }
  .okmh-card > i { display:none; }
  .okmh-avatar { width:45px; height:45px; }
  .okmh-reaction { width:38px; height:38px; font-size:21px; }
  .okmh-calendar { right:-20px; width:62px; min-height:68px; }
}

@media (prefers-reduced-transparency: reduce) {
  .message-hero .message-hero-copy h1::before,
  .message-hero .message-hero-copy .sub::before {
    background: rgba(255, 255, 255, .88);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

@media (prefers-reduced-motion:reduce) {
  .message-hero *, .message-hero *::before, .message-hero *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .okmh-float, .okmh-avatar, .okmh-reaction, .okmh-calendar, .okmh-source span { animation:none !important; }
  .okmh-float { bottom:auto; left:50%; opacity:.92; }
  .okmh-float:nth-child(1) { top:8%; transform:translateX(calc(-50% - 23vw)); }
  .okmh-float:nth-child(2) { top:18%; transform:translateX(calc(-50% + 22vw)); }
  .okmh-float:nth-child(3) { top:31%; transform:translateX(calc(-50% - 7vw)) scale(.82); }
  .okmh-float:nth-child(n+4) { display:none; }
}