/* ---------- hero cinemagraph (canvas / man / bubble) ---------- */
/* Do not restyle .hero / .hero__media here — that lives in assets/styles.css. */

.hero__canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  opacity:0;
  pointer-events:none;
  transition:opacity .6s ease;
  z-index:1;
}
.hero__canvas.is-ready{opacity:1}

/* video element used only as an off-screen frame source for the canvas texture.
   Never display:none — a hidden video stops decoding frames on some browsers. */
.hero__clip-video{
  position:absolute;
  left:0;
  top:0;
  width:1px;
  height:1px;
  opacity:0;
  overflow:hidden;
  pointer-events:none;
  z-index:0;
}

.hero__man{
  position:absolute;
  margin:0;
  padding:0;
  border:0;
  background:transparent;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  z-index:2;
}
.hero__man:focus-visible{
  outline:2px solid rgba(251,248,242,.9);
  outline-offset:4px;
  border-radius:6px;
}
.hero__man[hidden]{display:none}

.hero__bubble{
  position:absolute;
  left:0;
  top:0;
  z-index:4;
  max-width:min(220px,42vw);
  padding:.6em .9em;
  background:#faf8f4;
  color:#2c2721;
  border-radius:14px;
  box-shadow:0 8px 24px rgba(20,15,8,.22),0 1px 3px rgba(20,15,8,.14);
  pointer-events:none;
  opacity:0;
  transform:translateY(6px);
}
.hero__bubble::after{
  content:"";
  position:absolute;
  left:22px;
  bottom:-7px;
  width:14px;
  height:14px;
  background:#faf8f4;
  clip-path:polygon(0 0,100% 0,0 100%);
  border-radius:0 0 0 3px;
}
.hero__bubble[hidden]{display:none}
.hero__bubble.is-visible{
  animation:heroBubbleIn .45s cubic-bezier(.19,1,.22,1) forwards;
}
.hero__bubble-text{
  display:inline-block;
  font-family:"Saira",sans-serif;
  font-weight:200;
  font-stretch:125%;
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:clamp(14px,1.4vw,17px);
  line-height:1.3;
  white-space:nowrap;
}
.hero__bubble--dots .hero__bubble-text{
  animation:heroDotsBreathe 2.6s ease-in-out infinite;
  white-space:normal;
}

@keyframes heroBubbleIn{
  from{opacity:0;transform:translateY(6px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes heroDotsBreathe{
  0%,100%{opacity:.35}
  50%{opacity:.85}
}

@media (prefers-reduced-motion: reduce){
  .hero__canvas{transition:none}
  .hero__bubble.is-visible{animation:none;opacity:1;transform:none}
  .hero__bubble--dots .hero__bubble-text{animation:none;opacity:.6}
}