/* ==========================================================================
   Waving Mission & Purpose Poster Styles (Simsime Travels & Tours)
   Editorial Luxury Himalayan Aesthetic | Interactive Geometric Poster
   ========================================================================== */

:root {
  --wpl-accent: #0B5D67; /* Passport Teal */
  --wpl-paper: #FAF8F5;  /* Luxury Warm Parchment */
  --wpl-ink: #083E45;    /* Deep Forest Teal / Slate */
}

/* Outer Business Goal Container */
.mission-poster-section {
  position: relative;
  background-color: var(--travel-cream, #FDFBF7);
  border-top: 1px solid rgba(11, 93, 103, 0.12);
  border-bottom: 1px solid rgba(11, 93, 103, 0.12);
  padding: 80px 0 60px 0;
  overflow: hidden;
}

.mission-poster-header {
  text-align: center;
  max-width: 820px;
  margin: 0 auto 40px auto;
  padding: 0 24px;
}

.mission-tagline-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(11, 93, 103, 0.08);
  border: 1px solid rgba(11, 93, 103, 0.2);
  color: var(--passport-teal, #0B5D67);
  padding: 6px 16px;
  border-radius: 30px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.mission-main-title {
  font-family: var(--font-serif, 'Playfair Display', Georgia, serif);
  font-size: clamp(28px, 4.5vw, 42px);
  color: var(--passport-teal, #0B5D67);
  line-height: 1.25;
  margin: 0 0 16px 0;
  font-weight: 700;
}

.mission-lead-text {
  font-size: clamp(15px, 1.8vw, 17px);
  color: #4B5563;
  line-height: 1.65;
  margin: 0 auto;
}

/* 3-Pillar Purpose Ribbon */
.mission-pillars-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1140px;
  margin: 40px auto 0 auto;
  padding: 0 24px;
}

.mission-pillar-card {
  background: #FFFFFF;
  border: 1px solid rgba(11, 93, 103, 0.12);
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 4px 16px rgba(11, 93, 103, 0.04);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.mission-pillar-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(11, 93, 103, 0.09);
  border-color: rgba(11, 93, 103, 0.28);
}

.pillar-number {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--passport-teal, #0B5D67);
  margin-bottom: 8px;
}

.pillar-title {
  font-family: var(--font-serif, 'Playfair Display', Georgia, serif);
  font-size: 19px;
  color: #111827;
  margin: 0 0 10px 0;
  font-weight: 700;
}

.pillar-desc {
  font-size: 13.5px;
  color: #4B5563;
  line-height: 1.6;
  margin: 0;
}

@media (max-width: 768px) {
  .mission-pillars-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* -------------------------------------------------------------
   Interactive SVG Poster Engine Styles
   ------------------------------------------------------------- */

.wpl-root {
  position: relative;
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  overflow: hidden;
  background: var(--wpl-paper, #FAF8F5);
  color: var(--wpl-ink, #083E45);
  border-radius: 16px;
  border: 1px solid rgba(11, 93, 103, 0.2);
  box-shadow: 0 18px 45px rgba(11, 93, 103, 0.08);
  isolation: isolate;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.wpl-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.wpl-stage {
  position: absolute;
  inset: 0;
}

.wpl-poster {
  position: absolute;
  left: 3%;
  top: 8%;
  width: 94%;
  height: 76%;
  max-width: none;
  overflow: visible;
  z-index: 2;
}

.wpl-label {
  font-family: var(--font-sans, "Manrope", -apple-system, sans-serif);
  font-weight: 800;
  font-size: 26px;
  letter-spacing: 0.06em;
  fill: var(--wpl-accent, #0B5D67);
}

.wpl-bubble-text {
  fill: var(--wpl-ink, #083E45);
  font-size: 24px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.wpl-par-letters {
  transform: translate(calc(var(--wpl-mx, 0) * -14px), calc(var(--wpl-my, 0) * -8px));
  transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.wpl-par-lines {
  transform: translate(calc(var(--wpl-mx, 0) * -5px), calc(var(--wpl-my, 0) * -3px));
  transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.wpl-par-char {
  transform: translate(calc(var(--wpl-mx, 0) * 9px), 0px);
  transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.wpl-draw {
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}

.wpl-dot {
  transform-box: fill-box;
  transform-origin: center;
}

.wpl-reel.is-rolling {
  animation: wpl-roll var(--dur, 1s) var(--delay, 0s) both;
}

.wpl-cell {
  cursor: pointer;
}

.wpl-char {
  cursor: pointer;
  outline: none;
}

.wpl-char:focus-visible .wpl-head {
  filter: drop-shadow(0 0 6px var(--wpl-accent, #0B5D67));
}

.wpl-tilt {
  transform-box: view-box;
  transform-origin: 205px 600px;
  transform: rotate(-7deg);
}

.wpl-breathe {
  transform-box: view-box;
  transform-origin: 205px 600px;
  animation: wpl-breathe 3.8s ease-in-out infinite;
}

.wpl-uarm {
  transform-box: view-box;
  transform-origin: 288px 248px;
}

.wpl-farm {
  transform-box: view-box;
  transform-origin: 348px 346px;
}

.wpl-hand {
  transform-box: view-box;
  transform-origin: 392px 216px;
}

.wpl-head {
  transform-box: view-box;
  transform-origin: 203px 200px;
  transform: rotate(-4deg);
}

.wpl-look {
  transform-box: view-box;
  transform-origin: 203px 200px;
  transform: rotate(calc(var(--wpl-hr, 0) * 1deg));
  transition: transform 0.4s ease-out;
}

.wpl-pupils {
  transform: translate(calc(var(--wpl-ex, 0) * 1px), calc(var(--wpl-ey, 0) * 1px));
  transition: transform 0.2s ease-out;
}

.wpl-eyes {
  transform-box: fill-box;
  transform-origin: center;
  animation: wpl-blink 5.2s 7.5s infinite;
}

.wpl-brows {
  transition: transform 0.25s cubic-bezier(0.3, 1.6, 0.5, 1);
}

.wpl-happy,
.wpl-grin {
  opacity: 0;
}

.wpl-bubble {
  transform-box: fill-box;
  transform-origin: 0% 100%;
  animation: wpl-pop 0.45s cubic-bezier(0.3, 1.6, 0.5, 1) both;
}

.wpl-root[data-intro="done"] .wpl-hand {
  animation: wpl-wiggle 6.5s 1.5s infinite;
}

.wpl-char.is-waving .wpl-farm {
  animation: wpl-wave 1.5s ease-in-out;
}

.wpl-char.is-waving .wpl-hand {
  animation: wpl-hand 1.5s ease-in-out;
}

.wpl-char.is-waving .wpl-head {
  animation: wpl-nod 1.5s ease-in-out;
}

.wpl-char.is-waving .wpl-brows {
  transform: translateY(-6px);
}

.wpl-char.is-waving .wpl-eyes,
.wpl-char.is-waving .wpl-smile {
  opacity: 0;
}

.wpl-char.is-waving .wpl-happy,
.wpl-char.is-waving .wpl-grin {
  opacity: 1;
}

/* Interactive Stamps (Corner Dice) */
.wpl-corner {
  position: absolute;
  top: 0;
  width: clamp(54px, 12vw, 110px);
  height: clamp(54px, 12vw, 110px);
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  z-index: 4;
}

.wpl-corner-l {
  left: 0;
}

.wpl-corner-r {
  right: 0;
}

.wpl-corner svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.wpl-corner-r svg {
  transform: scaleX(-1);
}

.wpl-corner:hover .wpl-pips {
  transform: rotate(-12deg);
}

.wpl-pips {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.3s cubic-bezier(0.3, 1.6, 0.5, 1);
}

.wpl-pips.is-rolled {
  animation: wpl-dice 0.6s cubic-bezier(0.3, 1.4, 0.5, 1);
}

/* Interactive Signature / Stamp Button */
.wpl-sign {
  position: absolute;
  left: 50%;
  bottom: 18px;
  width: clamp(60px, 9vw, 95px);
  height: clamp(60px, 9vw, 95px);
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  z-index: 4;
  transform: translateX(-50%);
  transition: transform 0.35s cubic-bezier(0.3, 1.6, 0.5, 1);
}

.wpl-sign:hover {
  transform: translateX(-50%) rotate(-8deg) scale(1.08);
}

.wpl-sign svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.wpl-root button:focus-visible {
  outline: 2px solid var(--wpl-accent, #0B5D67);
  outline-offset: 4px;
}

/* Burst Particles */
.wpl-burst-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 6;
  overflow: hidden;
}

.wpl-burst {
  position: absolute;
  width: 0;
  height: 0;
  pointer-events: none;
}

.wpl-bit {
  position: absolute;
  left: -9px;
  top: -18px;
  width: 18px;
  height: 36px;
  overflow: visible;
  animation: wpl-bit 0.95s cubic-bezier(0.15, 0.7, 0.3, 1) forwards;
}

@keyframes wpl-roll {
  0% {
    transform: translateY(var(--dist));
    opacity: 0;
    animation-timing-function: cubic-bezier(0.5, 0, 0.25, 1);
  }
  6% {
    opacity: 1;
  }
  82% {
    transform: translateY(-16px);
    opacity: 1;
    animation-timing-function: ease-in-out;
  }
  100% {
    transform: translateY(0px);
    opacity: 1;
  }
}

@keyframes wpl-breathe {
  0%, 100% { transform: scale(1, 1); }
  50% { transform: scale(1.008, 1.012); }
}

@keyframes wpl-blink {
  0%, 94%, 100% { transform: scaleY(1); }
  97% { transform: scaleY(0.1); }
}

@keyframes wpl-pop {
  from { transform: scale(0) rotate(-8deg); opacity: 0; }
  to { transform: scale(1) rotate(0deg); opacity: 1; }
}

@keyframes wpl-wave {
  0% { transform: rotate(0deg); }
  15% { transform: rotate(-17deg); }
  32% { transform: rotate(12deg); }
  50% { transform: rotate(-17deg); }
  68% { transform: rotate(12deg); }
  84% { transform: rotate(-7deg); }
  100% { transform: rotate(0deg); }
}

@keyframes wpl-hand {
  0% { transform: rotate(0deg); }
  15% { transform: rotate(-10deg); }
  32% { transform: rotate(10deg); }
  50% { transform: rotate(-10deg); }
  68% { transform: rotate(10deg); }
  84% { transform: rotate(-5deg); }
  100% { transform: rotate(0deg); }
}

@keyframes wpl-nod {
  0% { transform: rotate(-4deg); }
  25% { transform: rotate(-9deg); }
  55% { transform: rotate(-1deg); }
  80% { transform: rotate(-6deg); }
  100% { transform: rotate(-4deg); }
}

@keyframes wpl-wiggle {
  0%, 86%, 100% { transform: rotate(0deg); }
  90% { transform: rotate(-9deg); }
  94% { transform: rotate(7deg); }
  97% { transform: rotate(-3deg); }
}

@keyframes wpl-dice {
  from { transform: rotate(-360deg) scale(0.4); }
  to { transform: rotate(0deg) scale(1); }
}

@keyframes wpl-bit {
  from {
    transform: translate(0, 0) rotate(0deg) scale(0.4);
    opacity: 1;
  }
  to {
    transform: translate(var(--dx), var(--dy)) rotate(var(--rot)) scale(1);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wpl-root *,
  .wpl-root *::before,
  .wpl-root *::after {
    animation: none !important;
    transition: none !important;
  }
}