/* PsyRM main landing — brand-first full-viewport composition */

:root {
  --mp-bg: #f2efe8;
  --mp-ink: #3a4f47;
  --mp-muted: #6a7c74;
  --mp-accent: #5a8f7a;
  --mp-accent-soft: rgba(90, 143, 122, 0.14);
  --mp-font-brand: "Manrope", "Segoe UI", sans-serif;
  --mp-font-body: "Manrope", "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

.mp-body {
  min-height: 100vh;
  min-height: 100dvh;
  font-family: var(--mp-font-body);
  color: var(--mp-ink);
  background: var(--mp-bg);
  overflow-x: hidden;
}

.mp-atmosphere {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 55% at 12% 18%, #d5e4dc 0%, transparent 58%),
    radial-gradient(ellipse 55% 45% at 88% 12%, #e6ddd0 0%, transparent 52%),
    radial-gradient(ellipse 50% 40% at 70% 88%, #cfe0d8 0%, transparent 55%),
    linear-gradient(165deg, #f6f3ec 0%, #ebe6db 100%);
  animation: mp-drift 18s ease-in-out infinite alternate;
}

.mp-atmosphere::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30% 70%, var(--mp-accent-soft) 0%, transparent 35%);
  opacity: 0.85;
}

.mp-stage {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1.5rem, 5vw, 3rem);
  text-align: center;
}

.mp-hero {
  width: 100%;
  max-width: min(40rem, 100%);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.mp-logo {
  display: block;
  width: min(22rem, 72vw);
  height: auto;
  margin: 0 0 clamp(0.85rem, 2.5vw, 1.35rem);
  animation: mp-rise 1.05s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.mp-brand {
  margin: 0;
  width: 100%;
  font-family: var(--mp-font-brand);
  font-weight: 800;
  font-size: clamp(3.8rem, 14vw, 8.25rem);
  letter-spacing: 0.02em;
  line-height: 1.05;
  color: var(--mp-ink);
  text-align: center;
  animation: mp-rise 1.05s cubic-bezier(0.22, 1, 0.36, 1) 0.08s both;
}

.mp-brand span {
  display: inline-block;
  background: linear-gradient(135deg, #4a6b5e 12%, #6a9a84 55%, #8ab09a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* Soft outline: weight without a hard edge */
  -webkit-text-stroke: 0.028em rgba(74, 107, 94, 0.35);
  paint-order: stroke fill;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.35),
    0 0.04em 0.12em rgba(74, 107, 94, 0.12);
}

.mp-tagline {
  margin: clamp(1.1rem, 3vw, 1.75rem) 0 0;
  width: 100%;
  font-size: clamp(1.05rem, 2.4vw, 1.45rem);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--mp-muted);
  text-align: center;
  animation: mp-rise 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.18s both;
}

.mp-rule {
  width: 3.25rem;
  height: 2px;
  margin: clamp(1.25rem, 3vw, 1.75rem) auto 0;
  background: linear-gradient(90deg, transparent, var(--mp-accent), transparent);
  border: 0;
  border-radius: 2px;
  opacity: 0.75;
  animation: mp-rule 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.35s both;
  transform-origin: center;
}

@keyframes mp-rise {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes mp-rule {
  from {
    opacity: 0;
    transform: scaleX(0.2);
  }
  to {
    opacity: 1;
    transform: scaleX(1);
  }
}

@keyframes mp-drift {
  from { transform: scale(1) translate(0, 0); }
  to { transform: scale(1.04) translate(-1.5%, 1%); }
}

@media (prefers-reduced-motion: reduce) {
  .mp-atmosphere,
  .mp-logo,
  .mp-brand,
  .mp-tagline,
  .mp-rule {
    animation: none;
  }
}