/* พื้นหลังและฟอนต์ */
body{
  margin:0;
  font-family:'Sriracha', cursive;
  background:linear-gradient(to right,#bdf4fc,#f2d3ff);
}

/* หัวเรื่องด้านบน */
.stage{
  display:flex;
  justify-content:center;
  align-items:center;
  min-height:180px;
  overflow:visible;
  position:relative;
  user-select:none;
  touch-action:pan-y;
}
.center-card{ max-width:800px; }
.center-card h1{ margin:0; }

/* การ์ดเพลง */
.music-wrap{ padding:20px; }
.player-card{
  background:rgba(255,255,255,.85);
  border-radius:16px;
  box-shadow:0 8px 20px rgba(0,0,0,.15);
  padding:20px; max-width:520px; margin:0 auto;
}
.album-cover{ width:72px; height:72px; object-fit:cover; border-radius:8px; }
.player-head{ display:flex; gap:12px; align-items:center; }
.song-title{ font-weight:bold; }
.song-artist{ font-size:.9em; opacity:.8; }
.progress{ width:100%; margin:10px 0; }
.player-ctrl{ display:flex; align-items:center; justify-content:space-between; }
.icon-btn,.play-btn{ background:none; border:none; font-size:1.2em; cursor:pointer; }

/* ====== ขนาดกรอบของ Carousel ====== */
:root{
  --w: 420px;     /* ความกว้างกรอบบนจอใหญ่ */
  --h: 560px;     /* ความสูงกรอบ */
  --gap: 16px;
  --scale-step:.12;
  --blur-step:1px;
  --shadow:0 6px 14px rgba(0,0,0,.15);
  --radius:16px;
  --speed:420ms;
}

/* กล่อง carousel */
.carousel{
  width:min(92vw,var(--w));
  margin:24px auto 0;
  display:grid;
  grid-template-rows:1fr auto;
  align-items:end;
  gap:12px;
}

/* เวทีของ carousel (แยกชื่อไม่ชน .stage) */
.carousel-stage{
  position:relative;
  height:var(--h);
  overflow:hidden;
  perspective:1000px;
  touch-action:pan-y;
}

/* ใบรูป/การ์ด */
.card{
  position:absolute; inset:0;
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow);
  background:#eee;
  transform-origin:center;
  transition:transform var(--speed) cubic-bezier(.2,.7,.2,1), opacity var(--speed), filter var(--speed);
  will-change:transform,opacity,filter;
}
.card img{ width:100%; height:100%; object-fit:cover; display:block; }

/* จุดบอกหน้า */
.ctrl{ display:flex; justify-content:center; gap:12px; padding-top:8px; align-items:center; }
.dots{ display:flex; gap:6px; align-items:center; justify-content:center; }
.dot{ width:8px; height:8px; border-radius:50%; background:rgba(0,0,0,.18); transition:.2s; }
.dot[aria-current="true"]{ background:rgba(0,0,0,.5); transform:scale(1.3); }

/* มือถือ – ให้กรอบกว้างเกือบเต็มจอและสูงตามจอ */
@media (max-width:600px){
  :root{ --w: 92vw; --h: 58vh; }
}

/* กันรูปอื่น ๆ ในหน้ายืด */
img{ max-width:100%; height:auto; }

.note-wrap{
  max-width: 820px;
  margin: 28px auto;
  padding: 0 16px;
}
.note-card{
  background: #fff;
  border-radius: 16px;
  padding: 18px 20px;
  box-shadow: 0 10px 24px rgba(0,0,0,.12);
  border: 1px solid rgba(0,0,0,.06);
  line-height: 1.65;
}

/* เอฟเฟกต์ fade-up */
.fade-up{
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s ease, transform .7s ease;
}
.fade-up.in-view{
  opacity: 1;
  transform: translateY(0);
}
.delay-3{ transition-delay: .45s; }