/* Mamahotel hero, sketch C2 "Lobby pro všechny" (D-01, D-05, D-06).
   Portability contract: every selector starts with .mh- and every colour comes from tokens.css (var(--mh-*)).
   Reduced motion is handled with scoped rules on the mh- classes below, never with a universal selector. */

/* ---- the neon sign: MAMAH(O)TEL with a dead O and one lit star ---- */
.mh-sign {
  margin: 0 0 var(--mh-space-4);
  font-family: var(--mh-font-display);
  text-align: center;
}

.mh-sign__word {
  display: block;
  color: var(--mh-accent);
  font-size: clamp(1.8rem, 8.4vw, 2.8rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-shadow: var(--mh-glow-accent);
  animation: mh-flicker 4s infinite;
}

.mh-sign__dead {
  color: var(--mh-sign-dead);            /* decorative: the dead bulb */
  text-shadow: none;
}

.mh-sign__stars {
  display: flex;
  justify-content: center;
  gap: 0.45em;
  margin-top: var(--mh-space-1);
  font-size: 0.8rem;
}

.mh-sign__star {
  width: 1.15em;
  height: 1.15em;
  background: var(--mh-star);
  clip-path: polygon(50% 0, 62% 35%, 98% 36%, 69% 57%, 80% 92%, 50% 71%, 20% 92%, 31% 57%, 2% 36%, 38% 35%);
}

.mh-sign__star--off {
  background: var(--mh-star-off);
}

@keyframes mh-flicker {
  0%, 91%, 94%, 97%, 100% { opacity: 1; }
  92%, 95% { opacity: 0.55; }
  96% { opacity: 0.8; }
}

/* ---- CTAs with icons ---- */
.mh-hero__ctas .mh-btn {
  gap: var(--mh-space-2);
}

.mh-hero__ctas .mh-btn--primary {
  box-shadow: var(--mh-glow-soft);
}

.mh-btn__icon {
  flex: none;
  width: 20px;
  height: 20px;
}

/* ---- the door: a brass knob and the big Do Not Disturb tag ---- */
.mh-door {
  position: relative;
  width: min(88%, 340px);
  margin: var(--mh-space-8) auto 0;
  perspective: 900px;                    /* depth for the flip */
}

.mh-door__knob {
  position: relative;
  z-index: 2;
  display: block;
  width: 46px;
  height: 46px;
  margin: 0 auto;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, var(--mh-brass-light), var(--mh-brass-dark) 70%);
  box-shadow: var(--mh-shadow-knob);
}

.mh-dnd {
  position: relative;
  display: block;
  width: 100%;
  margin: -23px 0 0;
  padding: 78px 24px 60px;
  border: 0;
  border-radius: 24px 24px 130px 130px / 24px 24px 95px 95px;
  background: var(--mh-paper);
  box-shadow: var(--mh-shadow-lg), var(--mh-shadow-inset);
  color: var(--mh-ink);
  font: inherit;
  text-align: center;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transform-origin: 50% 0;               /* hangs from the knob */
  animation: mh-sway var(--mh-sway-duration) ease-in-out infinite;
}

/* the hole the knob goes through */
.mh-dnd::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--mh-bg);
  box-shadow: inset 0 0 0 7px var(--mh-paper-edge);
  transform: translateX(-50%);
}

/* stitched hotel-card edge */
.mh-dnd::after {
  content: "";
  position: absolute;
  inset: 12px;
  border: 2px dashed var(--mh-paper-edge);
  border-radius: 14px 14px 118px 118px / 14px 14px 83px 83px;
  pointer-events: none;
}

.mh-dnd:active {
  scale: 0.985;
}

.mh-dnd:focus-visible {
  outline: 3px solid var(--mh-accent);
  outline-offset: 6px;
}

/* the sway uses the individual `rotate` property so the flip (a `transform`) can run on top of it without restarting it */
.mh-dnd--flip {
  animation: mh-sway var(--mh-sway-duration) ease-in-out infinite, mh-flip 0.5s ease;
}

@keyframes mh-sway {
  0%, 100% { rotate: -2.5deg; }
  50% { rotate: 2.5deg; }
}

@keyframes mh-flip {
  0% { transform: rotateY(0); }
  50% { transform: rotateY(90deg); }
  100% { transform: rotateY(0); }
}

.mh-dnd__t1 {
  display: block;
  font-family: var(--mh-font-display);
  font-size: clamp(2.1rem, 10vw, 2.8rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.mh-dnd__t2 {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 3.2em;
  margin-top: var(--mh-space-4);
  color: var(--mh-ink-muted);
  font-family: var(--mh-font-body);
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.3;
  text-wrap: balance;
}

.mh-dnd__hint {
  display: block;
  margin-top: var(--mh-space-3);
  color: var(--mh-ink-hint);             /* not the sketch's #a08a6a: 2.88:1 on cream */
  font-size: 0.8125rem;
  letter-spacing: 0.05em;
}

/* ---- reduced motion: nothing moves (D-06, D-19); scoped to the mh- classes, never a universal selector ---- */
@media (prefers-reduced-motion: reduce) {
  .mh-sign__word,
  .mh-dnd,
  .mh-dnd--flip {
    animation: none;
  }

  .mh-dnd:active {
    scale: none;
  }
}