/* Muse — global tokens
   The Seasons (display serif) + 4-color editorial palette.
   Each variation picks one dominant + uses others as accents. */

@import url("https://db.onlinewebfonts.com/c/9366bd460113d8bf675fd2bdfe1ce764?family=The+Seasons");

/* Profession-word pop-up — staggered entry */
@keyframes ms-pop-in {
  0%   { opacity: 0; transform: translateY(0.4em) rotate(-2deg) scale(0.9); filter: blur(6px); }
  60%  { opacity: 1; transform: translateY(-0.05em) rotate(0deg) scale(1.04); filter: blur(0); }
  100% { opacity: 1; transform: translateY(0) rotate(0deg) scale(1); filter: blur(0); }
}
.ms-pop {
  display: inline-block;
  opacity: 0;
  animation: ms-pop-in 0.7s cubic-bezier(.2,.9,.3,1.2) forwards;
  transform-origin: 50% 100%;
}
.ms-pop-1 { animation-delay: 0.15s; }
.ms-pop-2 { animation-delay: 0.55s; }
.ms-pop-3 { animation-delay: 0.95s; }
.ms-pop-4 { animation-delay: 1.35s; }
.ms-pop-5 { animation-delay: 1.75s; }
@media (prefers-reduced-motion: reduce) {
  .ms-pop { animation: none; opacity: 1; }
}

/* Niche card pop-in — triggered when section scrolls into view */
@keyframes ms-niche-pop {
  0%   { opacity: 0; transform: translateY(20px) scale(0.92); filter: blur(4px); }
  60%  { opacity: 1; transform: translateY(-3px) scale(1.02); filter: blur(0); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
.ms-niche {
  opacity: 0;
}
.ms-niche.ms-niche-in {
  animation: ms-niche-pop 0.65s cubic-bezier(.2,.9,.3,1.15) forwards;
}
.ms-niche {
  transition: transform 0.35s cubic-bezier(.2,.9,.3,1.2), box-shadow 0.35s ease, filter 0.35s ease, background 0.35s ease !important;
  cursor: pointer;
}
.ms-niche.ms-niche-in:hover,
.ms-niche.ms-niche-in:active {
  transform: translateY(-4px) scale(1.025) !important;
  filter: brightness(1.18) saturate(1.15) !important;
  z-index: 2;
}
@media (prefers-reduced-motion: reduce) {
  .ms-niche, .ms-niche.ms-niche-in { animation: none; opacity: 1; }
}

/* Hero moodboard collage — staggered fly-in with ken-burns float */
@keyframes ms-mood-fly {
  0%   { opacity: 0; transform: translateY(40px) translateX(var(--mb-tx, 0)) rotate(var(--mb-rot, 0deg)) scale(0.9); filter: blur(8px); }
  100% { opacity: 1; transform: translateY(0) translateX(0) rotate(var(--mb-rot, 0deg)) scale(1); filter: blur(0); }
}
@keyframes ms-mood-float {
  0%, 100% { transform: translateY(0) rotate(var(--mb-rot, 0deg)); }
  50%      { transform: translateY(-6px) rotate(calc(var(--mb-rot, 0deg) + 0.3deg)); }
}
.ms-mood {
  opacity: 0;
  animation:
    ms-mood-fly 0.95s cubic-bezier(.2,.8,.25,1.05) forwards,
    ms-mood-float 7s ease-in-out infinite;
  animation-delay: var(--mb-delay, 0s), calc(var(--mb-delay, 0s) + 1s);
  transform-origin: center center;
  will-change: transform, opacity;
}
@keyframes ms-mood-label {
  0%   { opacity: 0; transform: translateY(6px); }
  100% { opacity: 1; transform: translateY(0); }
}
.ms-mood-label {
  opacity: 0;
  animation: ms-mood-label 0.6s ease-out forwards;
  animation-delay: calc(var(--mb-delay, 0s) + 0.5s);
}
@media (prefers-reduced-motion: reduce) {
  .ms-mood, .ms-mood-label { animation: none; opacity: 1; transform: rotate(var(--mb-rot, 0deg)); }
}

/* ============================================================
   ClientAnswers widget — chat bubbles cycling on a 15s loop
   Each bubble has its own keyframe schedule baked in.
   ============================================================ */
/* ============================================================
   ClientAnswers widget — three scenarios cross-fade on 18s loop.
   Within each scenario, 4 answer bubbles stagger in.
   ============================================================ */

/* Scenario containers — each holds the stage for ~6s of an 18s cycle */
@keyframes ms-scenario-1 {
  0%, 1%    { opacity: 0; transform: translateY(6px); }
  3%, 30%   { opacity: 1; transform: translateY(0); }
  33%, 100% { opacity: 0; transform: translateY(-6px); }
}
@keyframes ms-scenario-2 {
  0%, 33%   { opacity: 0; transform: translateY(6px); }
  36%, 63%  { opacity: 1; transform: translateY(0); }
  66%, 100% { opacity: 0; transform: translateY(-6px); }
}
@keyframes ms-scenario-3 {
  0%, 66%   { opacity: 0; transform: translateY(6px); }
  69%, 96%  { opacity: 1; transform: translateY(0); }
  99%, 100% { opacity: 0; transform: translateY(-6px); }
}
.ms-scenario {
  opacity: 0;
  animation-duration: 18s;
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(.2,.8,.25,1);
}
.ms-scenario-1 { animation-name: ms-scenario-1; }
.ms-scenario-2 { animation-name: ms-scenario-2; animation-delay: 0s; }
.ms-scenario-3 { animation-name: ms-scenario-3; animation-delay: 0s; }

/* 3-board cross-fade (for Mood widget — interior · interior · florist) */
@keyframes ms-board-1 {
  0%, 1%    { opacity: 0; transform: translateY(6px); }
  3%, 31%   { opacity: 1; transform: translateY(0); }
  34%, 100% { opacity: 0; transform: translateY(-6px); }
}
@keyframes ms-board-2 {
  0%, 34%   { opacity: 0; transform: translateY(6px); }
  37%, 64%  { opacity: 1; transform: translateY(0); }
  67%, 100% { opacity: 0; transform: translateY(-6px); }
}
@keyframes ms-board-3 {
  0%, 67%   { opacity: 0; transform: translateY(6px); }
  70%, 97%  { opacity: 1; transform: translateY(0); }
  100%      { opacity: 0; transform: translateY(-6px); }
}
.ms-board {
  opacity: 0;
  animation-duration: 24s;
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(.2,.8,.25,1);
}
.ms-board-1 { animation-name: ms-board-1; }
.ms-board-2 { animation-name: ms-board-2; }
.ms-board-3 { animation-name: ms-board-3; }

/* Method visuals — three-step diagrams. Continuous loops. */
@keyframes ms-method-line-fill {
  0%   { width: 0%; }
  60%  { width: 100%; }
  100% { width: 100%; }
}
@keyframes ms-method-line-fade {
  0%, 70% { opacity: 1; }
  90%, 100% { opacity: 0; }
}
@keyframes ms-method-dot-rise {
  0%   { opacity: 0; transform: translateY(8px); }
  20%  { opacity: 1; transform: translateY(0); }
  80%  { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-4px); }
}
@keyframes ms-method-tile-in {
  0%   { opacity: 0; transform: translateY(10px) scale(0.92); }
  60%  { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes ms-method-orbit {
  0%   { transform: rotate(0deg) translateX(22px) rotate(0deg); }
  100% { transform: rotate(360deg) translateX(22px) rotate(-360deg); }
}

/* Answer bubbles — within an active scenario, stagger over ~3s */
@keyframes ms-answer-1 {
  0%, 4%   { opacity: 0; transform: translateY(8px) scale(0.96); }
  8%, 100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes ms-answer-2 {
  0%, 12%  { opacity: 0; transform: translateY(8px) scale(0.96); }
  16%, 100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes ms-answer-3 {
  0%, 20%  { opacity: 0; transform: translateY(8px) scale(0.96); }
  24%, 100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes ms-answer-4 {
  0%, 28%  { opacity: 0; transform: translateY(8px) scale(0.96); }
  32%, 100% { opacity: 1; transform: translateY(0) scale(1); }
}
.ms-answer {
  opacity: 0;
  animation-duration: 18s;
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(.2,.8,.25,1);
}
.ms-answer-1 { animation-name: ms-answer-1; }
.ms-answer-2 { animation-name: ms-answer-2; }
.ms-answer-3 { animation-name: ms-answer-3; }
.ms-answer-4 { animation-name: ms-answer-4; }

/* Typing dots */
@keyframes ms-typing-dot {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30%           { transform: translateY(-3px); opacity: 1; }
}
.ms-typing-dot {
  animation: ms-typing-dot 1.1s ease-in-out infinite;
}
.ms-typing-dot:nth-child(2) { animation-delay: 0.15s; }
.ms-typing-dot:nth-child(3) { animation-delay: 0.3s; }

/* Window header pulse */
@keyframes ms-rec-pulse {
  0%, 100% { opacity: 0.5; }
  50%      { opacity: 1; }
}
.ms-rec-dot { animation: ms-rec-pulse 1.4s ease-in-out infinite; }

/* ============================================================
   MoodboardBuild widget — cards fly in over 15s, then dwell, loop
   ============================================================ */
@keyframes ms-mb-card-1 {
  0%, 2%   { opacity: 0; transform: translate(var(--from-x, 0), var(--from-y, 30px)) rotate(var(--from-rot, -8deg)) scale(0.85); filter: blur(6px); }
  10%, 88% { opacity: 1; transform: translate(0, 0) rotate(var(--rot, 0deg)) scale(1); filter: blur(0); }
  96%, 100% { opacity: 0; transform: translate(0, 0) rotate(var(--rot, 0deg)) scale(1.02); filter: blur(2px); }
}
@keyframes ms-mb-card-2 {
  0%, 16%  { opacity: 0; transform: translate(var(--from-x, 0), var(--from-y, 30px)) rotate(var(--from-rot, -8deg)) scale(0.85); filter: blur(6px); }
  24%, 88% { opacity: 1; transform: translate(0, 0) rotate(var(--rot, 0deg)) scale(1); filter: blur(0); }
  96%, 100% { opacity: 0; transform: translate(0, 0) rotate(var(--rot, 0deg)) scale(1.02); filter: blur(2px); }
}
@keyframes ms-mb-card-3 {
  0%, 32%  { opacity: 0; transform: translate(var(--from-x, 0), var(--from-y, 30px)) rotate(var(--from-rot, -8deg)) scale(0.85); filter: blur(6px); }
  40%, 88% { opacity: 1; transform: translate(0, 0) rotate(var(--rot, 0deg)) scale(1); filter: blur(0); }
  96%, 100% { opacity: 0; transform: translate(0, 0) rotate(var(--rot, 0deg)) scale(1.02); filter: blur(2px); }
}
@keyframes ms-mb-card-4 {
  0%, 48%  { opacity: 0; transform: translate(var(--from-x, 0), var(--from-y, 30px)) rotate(var(--from-rot, -8deg)) scale(0.85); filter: blur(6px); }
  56%, 88% { opacity: 1; transform: translate(0, 0) rotate(var(--rot, 0deg)) scale(1); filter: blur(0); }
  96%, 100% { opacity: 0; transform: translate(0, 0) rotate(var(--rot, 0deg)) scale(1.02); filter: blur(2px); }
}
.ms-mb-card {
  opacity: 0;
  animation-duration: 15s;
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(.2,.8,.25,1);
}
.ms-mb-card-1 { animation-name: ms-mb-card-1; }
.ms-mb-card-2 { animation-name: ms-mb-card-2; }
.ms-mb-card-3 { animation-name: ms-mb-card-3; }
.ms-mb-card-4 { animation-name: ms-mb-card-4; }

/* Progress bar — fills over 15s loop */
@keyframes ms-mb-progress {
  0%   { width: 0%; }
  88%  { width: 100%; }
  100% { width: 100%; }
}
.ms-mb-progress { animation: ms-mb-progress 15s linear infinite; }

/* Option D — Polaroid stack: cards drop onto a pile, top card cycles */
@keyframes ms-pol-1 {
  0%, 1%   { opacity: 0; transform: translate(40vw, -50vh) rotate(40deg); }
  6%, 22%  { opacity: 1; transform: translate(0, 0) rotate(var(--rot, -3deg)); }
  26%, 100% { opacity: 1; transform: translate(0, 0) rotate(var(--rot, -3deg)); }
}
@keyframes ms-pol-2 {
  0%, 22%  { opacity: 0; transform: translate(40vw, -50vh) rotate(40deg); }
  28%, 46% { opacity: 1; transform: translate(0, 0) rotate(var(--rot, 4deg)); }
  50%, 100% { opacity: 1; transform: translate(0, 0) rotate(var(--rot, 4deg)); }
}
@keyframes ms-pol-3 {
  0%, 46%  { opacity: 0; transform: translate(40vw, -50vh) rotate(40deg); }
  52%, 70% { opacity: 1; transform: translate(0, 0) rotate(var(--rot, -5deg)); }
  74%, 100% { opacity: 1; transform: translate(0, 0) rotate(var(--rot, -5deg)); }
}
@keyframes ms-pol-4 {
  0%, 70%  { opacity: 0; transform: translate(40vw, -50vh) rotate(40deg); }
  76%, 94% { opacity: 1; transform: translate(0, 0) rotate(var(--rot, 6deg)); }
  98%, 100% { opacity: 1; transform: translate(0, 0) rotate(var(--rot, 6deg)); }
}
.ms-pol {
  opacity: 0;
  animation-duration: 15s;
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(.25,.85,.3,1.05);
  transform-origin: center 30%;
}
.ms-pol-1 { animation-name: ms-pol-1; }
.ms-pol-2 { animation-name: ms-pol-2; }
.ms-pol-3 { animation-name: ms-pol-3; }
.ms-pol-4 { animation-name: ms-pol-4; }

/* Option E — Palette swatches: stripes wipe in vertically */
@keyframes ms-swatch-in {
  0%   { transform: scaleY(0); }
  100% { transform: scaleY(1); }
}
.ms-swatch {
  transform-origin: top center;
  animation: ms-swatch-in 0.85s cubic-bezier(.7,0,.3,1) forwards;
}

@media (prefers-reduced-motion: reduce) {
  .ms-bubble, .ms-mb-card, .ms-pol, .ms-swatch { animation: none; opacity: 1; transform: none; }
  .ms-typing-dot, .ms-rec-dot, .ms-mb-progress { animation: none; }
}
@import url("https://db.onlinewebfonts.com/c/f7d34c9e4c3102c89048d775c27a78f3?family=The+Seasons+Bold");

:root {
  /* Brand four */
  --ms-blue:    #2d4ef5;   /* bright blue */
  --ms-blue-deep: #1a2c9c;
  --ms-green:   #b8d4ad;   /* soft green */
  --ms-green-deep: #6b8a5e;
  --ms-purple:  #2e1a4a;   /* deep purple */
  --ms-purple-soft: #5b3d82;
  --ms-pink:    #e8418f;   /* rich pink */
  --ms-pink-deep: #a82561;

  /* Neutrals — bias warm-cream so colors pop */
  --ms-paper:    #f4eee2;
  --ms-paper-2:  #e8dfcc;
  --ms-ink:      #14101c;  /* near-black with violet bias */

  /* Type — The Seasons display + Cormorant body italic + Inter UI + JBM mono */
  --ms-display: "The Seasons Bold", "The Seasons", "Playfair Display", serif;
  --ms-display-light: "The Seasons", "Playfair Display", serif;
  --ms-body-serif: "Cormorant Garamond", "Times New Roman", serif;
  --ms-sans: "Inter", system-ui, sans-serif;
  --ms-mono: "JetBrains Mono", monospace;
}