/* ============================================================
   PME Intro Overlay — first-load animation styles
   12 seconds total. Ground line draws, equipment rises (staggered
   starts, same finish), then wordmark types in below.
   ============================================================ */

.pme-intro {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: #FBFAF7;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  overflow: hidden;
  opacity: 1;
  transition: opacity 0.7s ease;
}
.pme-intro-out { opacity: 0; pointer-events: none; }

.pme-intro-skip {
  position: absolute;
  top: 28px;
  right: 32px;
  background: transparent;
  border: 1px solid rgba(15, 61, 46, 0.25);
  color: #0F3D2E;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 9px 18px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
  opacity: 0;
  animation: pme-skip-in 0.6s ease 0.8s forwards;
}
.pme-intro-skip:hover {
  background: #0F3D2E;
  color: #FBFAF7;
  border-color: #0F3D2E;
}
@keyframes pme-skip-in { to { opacity: 1; } }

/* ── Stage ──────────────────────────────────────────────── */
.pme-intro-stage {
  position: relative;
  width: min(1100px, 96vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

/* ── Equipment lineup ─────────────────────────────────────── */
.pme-lineup {
  position: relative;
  width: 100%;
  height: 220px;
  margin-bottom: 56px;
}
/* Ground line — draws left→right in 1.5s */
.pme-ground {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: #0F3D2E;
  transform-origin: left center;
  transform: scaleX(0);
  animation: pme-ground-draw 1.5s cubic-bezier(.55,.1,.4,1) 0s forwards;
}
@keyframes pme-ground-draw {
  to { transform: scaleX(1); }
}

.pme-lineup-row {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
}

/* Each equipment item — sits ON the ground line, fades in stationary.
   Items overlap via negative marginLeft set inline.
   --rise-delay : when fade-in starts (s)
   --rise-dur   : how long fade-in takes (s)  → end time is delay+dur
   All items share the same end time (~6.5s), just different starts/durs.
*/
.pme-eq-item {
  position: relative;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  flex: 0 0 auto;
  opacity: 0;
  animation: pme-eq-fade var(--rise-dur, 5s) ease-out var(--rise-delay, 0s) forwards;
}
/* Vary stacking order so some sit in front, some behind */
.pme-eq-item:nth-child(1) { z-index: 2; }
.pme-eq-item:nth-child(2) { z-index: 5; }
.pme-eq-item:nth-child(3) { z-index: 3; }
.pme-eq-item:nth-child(4) { z-index: 6; }
.pme-eq-item:nth-child(5) { z-index: 2; }
.pme-eq-item:nth-child(6) { z-index: 4; }
.pme-eq-item:nth-child(7) { z-index: 3; }
.pme-eq-item:nth-child(8) { z-index: 2; }
@keyframes pme-eq-fade {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

/* SVG fills its item box, anchored to the bottom (ground line) */
.pme-eq-svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}
/* Self-drawing strokes — each path/line/circle/rect inside an SVG draws
   itself in via stroke-dashoffset, synced to the rise animation.
   We tie the stroke draw to rise-dur so they finish together. */
.pme-eq-svg path,
.pme-eq-svg line,
.pme-eq-svg rect,
.pme-eq-svg circle,
.pme-eq-svg ellipse {
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
  animation: pme-stroke-draw var(--rise-dur, 5s) cubic-bezier(.55,.1,.4,1) var(--rise-delay, 0s) forwards;
}
.pme-eq-svg [fill]:not([fill="none"]) {
  /* For solid-fill accents (lime dots, pillows): just fade in at end */
  stroke-dasharray: none;
  stroke-dashoffset: 0;
  opacity: 0;
  animation: pme-fill-fade 0.4s ease calc(var(--rise-delay, 0s) + var(--rise-dur, 5s) - 0.2s) forwards;
}
@keyframes pme-stroke-draw {
  to { stroke-dashoffset: 0; }
}
@keyframes pme-fill-fade {
  to { opacity: 1; }
}

/* ── Wordmark ───────────────────────────────────────────── */
.pme-intro-words {
  text-align: center;
  margin-top: 4px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.pme-intro-words.in {
  opacity: 1;
  transform: translateY(0);
}
.pme-intro-en {
  font-family: "Fraunces", "Source Serif Pro", Georgia, serif;
  font-weight: 400;
  font-size: clamp(28px, 4.4vw, 46px);
  letter-spacing: -0.01em;
  color: #0F3D2E;
  line-height: 1.1;
}
.pme-intro-lao {
  font-family: "Noto Serif Lao", "Phetsarath", serif;
  font-weight: 500;
  font-size: clamp(18px, 2.6vw, 26px);
  color: #0F3D2E;
  margin-top: 8px;
  opacity: 0.85;
  line-height: 1.3;
}
/* Typewriter via clip-path */
.typer {
  display: inline-block;
  clip-path: inset(0 100% 0 0);
}
.pme-intro-words.in .typer {
  animation: pme-type 1.4s steps(28) 0.1s forwards;
}
.pme-intro-words.in .typer-lao {
  animation: pme-type 1.4s steps(22) 0.9s forwards;
}
@keyframes pme-type {
  to { clip-path: inset(0 0 0 0); }
}

/* ── Tagline ────────────────────────────────────────────── */
.pme-intro-tagline {
  margin-top: 22px;
  text-align: center;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.pme-intro-tagline.in {
  opacity: 1;
  transform: translateY(0);
}
.pme-intro-tagline-en {
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #1F7A3A;
}
.pme-intro-tagline-lao {
  font-family: "Noto Serif Lao", "Phetsarath", serif;
  font-weight: 400;
  font-size: 14px;
  color: #6F7A73;
  margin-top: 6px;
  letter-spacing: 0.02em;
}

/* Reduce motion — instant, no draws */
@media (prefers-reduced-motion: reduce) {
  .pme-ground,
  .pme-eq-item,
  .pme-eq-svg path, .pme-eq-svg line, .pme-eq-svg rect, .pme-eq-svg circle, .pme-eq-svg ellipse,
  .pme-eq-svg [fill]:not([fill="none"]),
  .typer {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    stroke-dashoffset: 0 !important;
  }
}

/* Mobile */
@media (max-width: 760px) {
  .pme-lineup { height: 180px; margin-bottom: 40px; }
  .pme-lineup-row { padding: 0 6px; transform: scale(0.78); transform-origin: bottom center; }
  .pme-intro-skip { top: 18px; right: 18px; padding: 7px 14px; font-size: 11px; }
}
@media (max-width: 480px) {
  .pme-lineup { height: 150px; }
  .pme-lineup-row { transform: scale(0.6); }
}