/* =====================================================
   PROSPER WITH EM — Shared Styles & Design Tokens
   Source of truth for colors, typography, animation,
   focus, mobile nav, and micro-interactions.
   ===================================================== */

/* ── Design tokens (CSS custom properties) ──────────── */
:root {
  /* Primary */
  --color-primary:                   #640015;
  --color-primary-container:         #881326;
  --color-primary-fixed:             #ffdad9;
  --color-primary-fixed-dim:         #ffb3b4;
  --color-on-primary:                #ffffff;
  --color-on-primary-container:      #ff9397;
  --color-on-primary-fixed:          #40000a;
  --color-on-primary-fixed-variant:  #8b1628;
  --color-inverse-primary:           #ffb3b4;
  /* Secondary */
  --color-secondary:                 #605e5a;
  --color-secondary-container:       #e6e2dd;
  --color-on-secondary:              #ffffff;
  --color-on-secondary-container:    #666460;
  --color-on-secondary-fixed:        #1c1c19;
  --color-on-secondary-fixed-variant:#484743;
  /* Surface */
  --color-surface:                   #fcf9f8;
  --color-surface-container-lowest:  #ffffff;
  --color-surface-container-low:     #f6f3f2;
  --color-surface-container:         #f0eded;
  --color-surface-container-high:    #eae7e7;
  --color-surface-container-highest: #e4e2e1;
  --color-on-surface:                #1b1c1c;
  --color-on-surface-variant:        #584141;
  --color-background:                #fcf9f8;
  --color-outline:                   #8b7171;
  --color-outline-variant:           #dfbfbf;
  /* Typography */
  --font-headline: 'Noto Serif', serif;
  --font-body:     'Manrope', sans-serif;
  /* Spacing */
  --container-max: 1200px;
  /* Animation easing */
  --ease-blur-slide: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-spring:     cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-sharp:      cubic-bezier(0.76, 0,    0.24, 1);
}

/* ── Reduced motion — disable all motion ────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:        0.01ms !important;
    animation-iteration-count: 1      !important;
    transition-duration:       0.01ms !important;
  }
  .blur-slide-enter { opacity: 0; }
  .blur-slide-enter.entered { opacity: 1; animation: none; }
  .image-enter { opacity: 0; }
  .image-enter.entered { opacity: 1; animation: none; }
  .word-animate { opacity: 0; animation: none; }
  .word-animate.animated { opacity: 1; }
}

/* ── Keyframes ──────────────────────────────────────── */
@keyframes blurSlideUp {
  from { opacity: 0; filter: blur(12px); transform: translateY(28px); }
  to   { opacity: 1; filter: blur(0px);  transform: translateY(0);    }
}

@keyframes blurWord {
  0%   { opacity: 0;   filter: blur(10px); transform: translateY(40px); }
  50%  { opacity: 0.5; filter: blur(4px);  transform: translateY(-4px); }
  100% { opacity: 1;   filter: blur(0px);  transform: translateY(0);    }
}

@keyframes imageEntrance {
  from { opacity: 0; filter: blur(10px); transform: scale(0.92); }
  to   { opacity: 1; filter: blur(0px);  transform: scale(1);    }
}

@keyframes lineReveal {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

@keyframes fadeOnly {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes blurSlideLeft {
  from { opacity: 0; filter: blur(10px); transform: translateX(-48px); }
  to   { opacity: 1; filter: blur(0px);  transform: translateX(0);     }
}

/* ── Entrance animation classes ─────────────────────── */
.blur-slide-enter {
  opacity: 0;
}
.blur-slide-enter.entered {
  animation: blurSlideUp 0.7s var(--ease-blur-slide) forwards;
}

.slide-left-enter {
  opacity: 0;
}
.slide-left-enter.entered {
  animation: blurSlideLeft 0.65s var(--ease-blur-slide) forwards;
}

.image-enter {
  opacity: 0;
}
.image-enter.entered {
  animation: imageEntrance 0.65s var(--ease-spring) forwards;
}

.line-reveal {
  transform: scaleX(0);
  transform-origin: left;
}
.line-reveal.entered {
  animation: lineReveal 0.9s var(--ease-sharp) forwards;
}

/* ── Word-by-word headline ──────────────────────────── */
.word-split {
  display: flex;
  flex-wrap: wrap;
  row-gap: 0.1em;
}
.word-animate {
  display: inline-block;
  margin-right: 0.28em;
  opacity: 0;
}
.word-animate.animated {
  animation: blurWord 0.7s var(--ease-blur-slide) forwards;
}

/* ── Card hover ─────────────────────────────────────── */
.card-hover {
  transition: transform 0.3s var(--ease-spring),
              box-shadow 0.3s ease;
  will-change: transform;
}
.card-hover:hover {
  transform: translateY(-7px) scale(1.018);
}

/* ── Button hover ───────────────────────────────────── */
.btn-hover {
  transition: transform 0.2s var(--ease-spring),
              box-shadow 0.2s ease;
  will-change: transform;
}
.btn-hover:hover  { transform: scale(1.05); }
.btn-hover:active { transform: scale(0.97); }

/* ── Nav link underline draw ────────────────────────── */
.nav-link-hover {
  position: relative;
}
.nav-link-hover::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s var(--ease-blur-slide);
}
.nav-link-hover:hover::after { transform: scaleX(1); }

/* ── Focus styles ───────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ── Mobile navigation ──────────────────────────────── */
.mobile-drawer {
  display: none;
  flex-direction: column;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: rgba(252, 249, 248, 0.98);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-outline-variant);
  padding: 1.25rem 2rem 1.5rem;
  z-index: 49;
  box-shadow: 0 8px 24px rgba(100, 0, 21, 0.08);
  gap: 0;
}
.nav-open .mobile-drawer { display: flex; }

.mobile-drawer a {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--color-on-surface);
  text-decoration: none;
  padding: 0.875rem 0;
  border-bottom: 1px solid var(--color-surface-container);
  transition: color 0.2s ease;
  min-height: 44px;
  display: flex;
  align-items: center;
}
.mobile-drawer a:last-child { border-bottom: none; }
.mobile-drawer a:hover      { color: var(--color-primary); }
.mobile-drawer a.bg-primary,
.mobile-drawer a.bg-primary:hover { color: #ffffff; }

/* Hamburger button */
.hamburger-btn {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  border-radius: 8px;
  flex-shrink: 0;
  transition: background 0.2s ease;
}
.hamburger-btn:hover { background: var(--color-surface-container); }
.hamburger-btn span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--color-primary);
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Hamburger → X */
.nav-open .hamburger-btn span:nth-child(1) { transform: translateY(7px) rotate(45deg);  }
.nav-open .hamburger-btn span:nth-child(2) { opacity: 0; }
.nav-open .hamburger-btn span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Typewriter cursor ──────────────────────────────── */
@keyframes cursorBlink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}
.typewriter-cursor {
  display: inline-block;
  width: 3px;
  height: 0.85em;
  background: currentColor;
  vertical-align: text-bottom;
  margin-left: 2px;
  border-radius: 1px;
  animation: cursorBlink 0.75s step-end infinite;
}

/* ── Lazy-loaded image placeholder ──────────────────── */
img[loading="lazy"] {
  background: var(--color-surface-container-low);
}

/* ── Logo image ─────────────────────────────────────── */
.logo-img {
  height: 52px;
  width: auto;
  display: block;
  mix-blend-mode: multiply;
}

/* ── Material symbols base ──────────────────────────── */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
  display: inline-block;
  vertical-align: middle;
}