/* อนิเมชันและหน้าตาตัวอย่างแอปบนเว็บ — แยกไฟล์ ไม่แก้ styles.css / faq.css เดิม */

/* ───────── 1. หัวเว็บโผล่ทีละบรรทัด (เฉพาะเมื่อ JS ใส่ pg-motion แล้ว) ───────── */
html.pg-motion .hero-copy > *,
html.pg-motion .guide-hero > * {
  opacity: 0;
  transform: translateY(18px);
  animation: pgHeroUp .65s cubic-bezier(.22, 1, .36, 1) forwards;
}
html.pg-motion .hero-copy > :nth-child(1),
html.pg-motion .guide-hero > :nth-child(1) { animation-delay: .05s; }
html.pg-motion .hero-copy > :nth-child(2),
html.pg-motion .guide-hero > :nth-child(2) { animation-delay: .15s; }
html.pg-motion .hero-copy > :nth-child(3),
html.pg-motion .guide-hero > :nth-child(3) { animation-delay: .25s; }
html.pg-motion .hero-copy > :nth-child(4) { animation-delay: .35s; }
html.pg-motion .hero-copy > :nth-child(5) { animation-delay: .45s; }

@keyframes pgHeroUp {
  to { opacity: 1; transform: translateY(0); }
}

/* ───────── 2. ปุ่มหลักมีแสงวิ่งผ่าน + ลูกศร → ↓ ขยับเป็นจังหวะ ───────── */
.button-primary,
.nav .button {
  position: relative;
  overflow: hidden;
}
.button-primary::after,
.nav .button::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: -120%;
  width: 65%;
  background: linear-gradient(105deg, transparent 20%, rgba(255, 255, 255, .42) 50%, transparent 80%);
  transform: skewX(-20deg);
  animation: pgSheen 4.2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes pgSheen {
  0%, 62% { left: -120%; }
  100% { left: 160%; }
}

.button b {
  display: inline-block;
  animation: pgArrowRight 1.6s ease-in-out infinite;
}
.text-link span {
  display: inline-block;
  animation: pgArrowDown 1.6s ease-in-out infinite;
}
@keyframes pgArrowRight {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(4px); }
}
@keyframes pgArrowDown {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(4px); }
}

/* ───────── 3. ป้าย PRO / Free trial เรืองแสง ───────── */
.app-brand small,
.tag-pro,
.plan-label {
  animation: pgBadgeGlow 2.6s ease-in-out infinite;
}
@keyframes pgBadgeGlow {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(255, 160, 36, 0)); }
  50% { filter: drop-shadow(0 0 8px rgba(255, 175, 45, .65)); }
}

/* ───────── 4. แถบดำ .trust-strip เลื่อนวิ่งวน หยุดเมื่อชี้เมาส์ ───────── */
.trust-strip.pg-marquee {
  overflow: hidden;
  justify-content: flex-start;
  padding-inline: 0;
  white-space: nowrap;
}
.pg-marquee-track {
  display: flex;
  align-items: center;
  gap: 28px;
  width: max-content;
  padding-inline: 14px;
  animation: pgMarquee 26s linear infinite;
}
.trust-strip.pg-marquee:hover .pg-marquee-track {
  animation-play-state: paused;
}
.pg-marquee-group {
  display: flex;
  align-items: center;
  gap: 28px;
}
@keyframes pgMarquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ───────── 5. ส่วนต่างๆ/การ์ดโผล่ตอนเลื่อนลงมา (IntersectionObserver) + การ์ดยกขึ้นตอนชี้เมาส์ ───────── */
html.pg-motion .pg-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s cubic-bezier(.22, 1, .36, 1), transform .6s cubic-bezier(.22, 1, .36, 1);
  transition-delay: var(--pg-delay, 0s);
}
html.pg-motion .pg-reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}

.process-list li,
.feature-art,
.price-card,
.guide,
.shot {
  transition: transform .25s cubic-bezier(.22, 1, .36, 1), box-shadow .25s ease;
}
.process-list li:hover,
.feature-art:hover,
.price-card:hover,
.guide:hover,
.shot:hover {
  transform: translateY(-5px);
}
.price-card:hover {
  box-shadow: 0 30px 68px rgba(11, 43, 91, .24);
}

/* ───────── 6. FAQ ปุ่ม +/− หมุนและคำตอบเลื่อนลง ───────── */
.faq summary:after,
.guide > summary:after {
  transition: transform .28s cubic-bezier(.22, 1, .36, 1), background .2s, border-color .2s;
}
.faq details[open] summary:after {
  transform: translateY(-50%) rotate(180deg);
}
.guide[open] > summary:after {
  transform: rotate(180deg);
}
.faq details[open] .faq-answer,
.guide[open] .steps-list {
  animation: pgSlideDown .28s cubic-bezier(.22, 1, .36, 1);
}
@keyframes pgSlideDown {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ───────── 7. .app-preview หน้าตาเหมือนแอปจริง (สี/รูปทรงจาก web/app.css) ───────── */
.app-preview {
  max-width: 100%;
  min-width: 0;
  border: 1.5px solid #174f9d;
  border-radius: 18px;
  background: #030817;
  box-shadow: 0 28px 64px rgba(4, 18, 46, .35), 0 0 0 6px rgba(13, 124, 255, .07);
  animation: pgFloat 6s ease-in-out infinite;
}
@keyframes pgFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}

.app-preview .window-bar {
  height: 36px;
  background: linear-gradient(180deg, #091a3a, #050d20);
  border-bottom: 1px solid #1550a0;
  color: #a8bad6;
}
.app-preview .app-body {
  padding: 14px 16px 16px;
  background:
    radial-gradient(480px 200px at 20% -8%, rgba(13, 124, 255, .24), transparent 65%),
    radial-gradient(380px 200px at 92% 8%, rgba(37, 216, 242, .12), transparent 64%),
    linear-gradient(180deg, #07142f, #030817 55%);
  color: #f3f8ff;
  font-family: "Segoe UI", Manrope, sans-serif;
}
.app-preview .app-brand {
  margin-bottom: 12px;
  padding-bottom: 9px;
  border-bottom: 1px solid #12345f;
}
.app-preview .app-brand > span {
  font-size: 14px;
  background: linear-gradient(90deg, #f3f8ff 0 52%, #2ba8ff 70%, #25d8f2 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.app-preview .app-brand small {
  border-color: #25d8f2;
  background: rgba(13, 124, 255, .18);
  color: #25d8f2;
  font-weight: 700;
}

/* แผงสี่ขั้นตอน 3 มิติ */
.pg-stepper {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  padding: 6px;
  margin-bottom: 10px;
  border-radius: 14px;
  border: 1.5px solid #174f9d;
  background: linear-gradient(180deg, #0a1834, #071126);
  box-shadow: 0 0 18px rgba(13, 124, 255, .22), inset 0 1px 0 rgba(37, 216, 242, .3);
}
.pg-step {
  position: relative;
  min-width: 0;
  padding: 1.5px;
  border-radius: 11px;
  background: linear-gradient(180deg, #2a8fe8, #1765ba 45%, #0f3a7a);
  box-shadow: 0 6px 14px rgba(0, 0, 0, .45);
  transition: transform .22s ease, box-shadow .22s ease, background .22s ease;
}
.pg-step.is-active {
  background: linear-gradient(180deg, #25d8f2, #0d7cff 55%, #1765ba);
  box-shadow: 0 0 16px rgba(37, 216, 242, .55), 0 6px 14px rgba(0, 0, 0, .5);
  transform: translateY(-2px);
}
.pg-step-in {
  height: 100%;
  min-height: 112px;
  border-radius: 9.5px;
  padding: 0 6px 8px;
  background:
    radial-gradient(140px 70px at 50% 105%, rgba(13, 124, 255, .28), transparent 70%),
    linear-gradient(180deg, #0c2044, #071126);
  box-shadow: inset 0 1px 0 rgba(37, 216, 242, .4), inset 0 -10px 20px rgba(0, 0, 0, .4);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
}
.pg-step-tab {
  width: 100%;
  text-align: center;
  font-weight: 700;
  font-size: 9.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 4px 5px 5px;
  margin-top: -1.5px;
  border: 1px solid #25d8f2;
  border-top: 0;
  border-radius: 0 0 9px 9px;
  background: linear-gradient(180deg, #123f7c, #0a2853);
  color: #dffaff;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .5), inset 0 -1.5px 0 rgba(37, 216, 242, .5);
}

/* ขั้น 1: โฟลเดอร์ */
.pg-folder-well {
  width: 100%;
  flex: 1;
  display: grid;
  place-items: center;
  padding: 4px 0;
  border-radius: 9px;
  background: radial-gradient(ellipse at 50% 30%, #0c2347, #061431 75%);
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, .55);
}
.pg-folder-well svg {
  width: 48px;
  height: 36px;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .5));
}
.pg-mini-field {
  width: 100%;
  padding: 3px 6px;
  border-radius: 5px;
  border: 1px solid #12345f;
  background: #07152d;
  color: #a8bad6;
  font: 9px/1.2 "DM Mono", Consolas, monospace;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}

/* ขั้น 2: แผ่นดิสก์หมุน + ป้าย MP3 */
.pg-format-art {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.pg-disc-wrap {
  position: relative;
  width: 50px;
  height: 50px;
}
.pg-disc-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 0 5px rgba(37, 216, 242, .7));
  animation: pgSpin 9s linear infinite;
}
.pg-disc {
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  background:
    radial-gradient(circle, #061431 0 11%, #25d8f2 12% 17%, #061431 18% 24%, transparent 25%),
    conic-gradient(#e9fbff, #0d7cff, #c8f8ff, #25d8f2, #f5fdff, #126ef0, #dffaff, #102a67, #f5fdff);
  box-shadow: 0 0 0 1.5px #061431, 0 0 0 2.5px #1765ba, 0 4px 10px rgba(0, 0, 0, .6);
  animation: pgSpin 14s linear infinite;
}
.app-preview.is-downloading .pg-disc { animation-duration: 1.5s; }
.app-preview.is-downloading .pg-disc-ring { animation-duration: 2.2s; }
@keyframes pgSpin { to { transform: rotate(360deg); } }

.pg-pill {
  padding: 2px 8px;
  border-radius: 6px;
  border: 1px solid #174f9d;
  background: #07152d;
  color: #f3f8ff;
  font: 700 9px/1.3 Manrope, sans-serif;
}

/* ขั้น 3: ปุ่มหมุนคุณภาพ */
.pg-quality-art {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.pg-knob-wrap {
  position: relative;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
}
.pg-knob-ticks {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 225deg, #25d8f2 0 235deg, #16457b 0 270deg, transparent 0);
  -webkit-mask: repeating-conic-gradient(from 225deg, #000 0 6deg, transparent 6deg 12deg), radial-gradient(circle, transparent 0 58%, #000 60% 72%, transparent 73%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
  filter: drop-shadow(0 0 4px rgba(37, 216, 242, .7));
}
.pg-knob {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  position: relative;
  background: conic-gradient(#f4fdff, #25d8f2, #d7f8ff, #0d7cff, #f4fdff, #2aa5ff, #e8fbff, #123e8b, #f4fdff);
  box-shadow: 0 0 0 2.5px #061431, 0 0 0 3.5px #1476db, 0 6px 12px rgba(0, 0, 0, .65);
  transform: rotate(95deg);
  transition: transform .4s cubic-bezier(.3, 1.4, .5, 1);
}
.pg-step.is-active .pg-knob { transform: rotate(128deg); }
.pg-knob i {
  position: absolute;
  left: 50%;
  top: 3px;
  width: 5px;
  height: 5px;
  margin-left: -2.5px;
  border-radius: 50%;
  background: #25d8f2;
  box-shadow: 0 0 6px #25d8f2, 0 0 2px #fff;
}

/* ขั้น 4: ปุ่ม Paste URL */
.pg-go-art {
  width: 100%;
  flex: 1;
  display: grid;
  place-items: center;
  padding: 6px 4px;
  border-radius: 9px;
  background: radial-gradient(ellipse at 50% 40%, #0c2347, #061431 75%);
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, .55);
}
.pg-go-btn {
  width: 100%;
  padding: 9px 6px;
  border-radius: 10px;
  border: 1.5px solid #45b7ff;
  background: linear-gradient(180deg, #168cff 0%, #0b6fe6 50%, #075dcc 100%);
  color: #fff;
  font: 700 10px/1.15 "Segoe UI", Manrope, sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  box-shadow: 0 0 14px rgba(13, 124, 255, .5), 0 6px 12px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .4);
  transition: transform .12s ease, filter .15s ease, box-shadow .15s ease;
}
.pg-go-btn svg { width: 13px; height: 13px; flex: none; }
.pg-go-btn.is-pressed {
  transform: translateY(2px) scale(.97);
  filter: brightness(1.2);
  box-shadow: 0 0 22px rgba(37, 216, 242, .85), inset 0 2px 5px rgba(0, 0, 0, .4);
}

/* ช่องค้นหา / URL */
.app-preview .url-field {
  padding: 7px 9px;
  border: 1px solid #12345f;
  border-radius: 9px;
  background: #07152d;
  color: #f3f8ff;
  font-size: 11px;
  gap: 8px;
}
.app-preview .url-field.is-typing {
  border-color: #0d7cff;
  box-shadow: 0 0 0 2px rgba(13, 124, 255, .22);
}
.pg-url-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #a8bad6;
  font-family: "DM Mono", Consolas, monospace;
  font-size: 10.5px;
}
.pg-url-text.has-value { color: #f3f8ff; }
.pg-caret {
  display: inline-block;
  width: 1.5px;
  height: 12px;
  vertical-align: -2px;
  margin-left: 1px;
  background: #25d8f2;
  animation: pgBlink .9s steps(2) infinite;
}
@keyframes pgBlink { 50% { opacity: 0; } }

.app-preview .url-field button {
  padding: 6px 11px;
  border-radius: 7px;
  border: 1px solid #45b7ff;
  background: linear-gradient(180deg, #168cff, #075dcc);
  color: #fff;
  font: 700 10px Manrope, sans-serif;
  box-shadow: 0 0 12px rgba(13, 124, 255, .28);
  transition: transform .12s ease, filter .15s ease;
}
.app-preview .url-field button.is-pressed {
  transform: translateY(1px) scale(.97);
  filter: brightness(1.22);
}

/* กล่องคิวและแถวคิวโหลด */
.app-preview .queue-card {
  margin-top: 10px;
  padding: 10px 12px;
  min-height: 0;
  border: 1px solid #12345f;
  border-radius: 10px;
  background: linear-gradient(180deg, #0a1834, #071126);
  box-shadow: inset 0 1px 0 rgba(88, 180, 255, .09), 0 6px 16px rgba(0, 0, 0, .28);
}
.pg-qhead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  font-size: 10.5px;
  color: #a8bad6;
}
.pg-qstatus {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
}
.pg-qstatus.is-done { color: #39dfbb; }
.pg-qrow {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 9px;
  align-items: center;
  padding: 7px 9px;
  border-radius: 8px;
  border: 1px solid #12345f;
  background: linear-gradient(180deg, #0b1c3b, #071126);
  transition: border-color .25s ease, box-shadow .25s ease;
}
.pg-qrow.is-done {
  border-color: rgba(57, 223, 187, .55);
  box-shadow: 0 0 14px rgba(57, 223, 187, .15);
}
.pg-qthumb {
  width: 44px;
  height: 30px;
  border-radius: 5px;
  background: linear-gradient(135deg, #123f7c, #061431);
  border: 1px solid #174f9d;
  display: grid;
  place-items: center;
  color: #25d8f2;
  font-size: 13px;
}
.pg-qrow.is-done .pg-qthumb {
  color: #39dfbb;
  border-color: #39dfbb;
}
.pg-qmain { min-width: 0; }
.pg-qtop {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 4px;
}
.pg-qtitle {
  font-size: 11px;
  font-weight: 700;
  color: #f3f8ff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pg-qpct {
  font: 700 10.5px "DM Mono", Consolas, monospace;
  color: #25d8f2;
  font-variant-numeric: tabular-nums;
}
.pg-qrow.is-done .pg-qpct { color: #39dfbb; }
.pg-qbar {
  height: 6px;
  border-radius: 999px;
  background: #030a18;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px #12345f;
}
.pg-qbar i {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, #0d7cff, #25d8f2);
  box-shadow: 0 0 10px rgba(37, 216, 242, .6);
  transition: width .12s linear, background .2s ease;
}
.pg-qrow.is-done .pg-qbar i {
  background: linear-gradient(90deg, #1ec997, #39dfbb);
  box-shadow: 0 0 10px rgba(57, 223, 187, .65);
}

/* จอแคบต้องไม่ล้น */
@media (max-width: 560px) {
  .pg-stepper {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .pg-step-in {
    min-height: 98px;
  }
  .app-preview .app-body {
    padding: 12px;
  }
}

/* ───────── 8. ปิดทั้งหมดเมื่อ prefers-reduced-motion ───────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  html.pg-motion .hero-copy > *,
  html.pg-motion .guide-hero > *,
  html.pg-motion .pg-reveal {
    opacity: 1 !important;
    transform: none !important;
  }
}