/* =====================================================
   Site motion — เมนูเด็ด.com (โหลดทุกหน้าหน้าบ้านผ่าน Views/front/header)
   ใช้ property `translate` / `scale` / `rotate` แยกจาก `transform`
   เพื่อไม่ให้ animation ไปทับ hover ที่ใช้ transform (เช่น Tailwind -translate-y-1)
   ===================================================== */

/* สีพื้นหลัง section หมวดหมู่ (= ชั้นล่างสุดของคลื่น ให้ไหลต่อกันพอดี) */
.md-cat-bg {
    background-color: #e4ece2;
}

/* ---------- Hero entrance: ข้อความค่อยๆ ขึ้นทีละบรรทัด ---------- */
@keyframes md-fade-up {
    from { opacity: 0; translate: 0 18px; }
    to   { opacity: 1; translate: 0 0; }
}

.md-hero-intro > * {
    animation: md-fade-up 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.md-hero-intro > :nth-child(1) { animation-delay: 0.05s; }
.md-hero-intro > :nth-child(2) { animation-delay: 0.15s; }
.md-hero-intro > :nth-child(3) { animation-delay: 0.25s; }
.md-hero-intro > :nth-child(4) { animation-delay: 0.35s; }
.md-hero-intro > :nth-child(5) { animation-delay: 0.45s; }
.md-hero-intro > :nth-child(6) { animation-delay: 0.55s; }
.md-hero-intro > :nth-child(7) { animation-delay: 0.65s; }
.md-hero-intro > :nth-child(8) { animation-delay: 0.75s; }

/* จุดสถานะบน badge — วงแหวนกระจายออก */
@keyframes md-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(253, 224, 71, 0.6); }
    70%  { box-shadow: 0 0 0 8px rgba(253, 224, 71, 0); }
    100% { box-shadow: 0 0 0 0 rgba(253, 224, 71, 0); }
}
.md-dot {
    animation: md-pulse 2.4s ease-out infinite;
}

/* วงแสงพื้นหลังลอยช้าๆ */
@keyframes md-blob-drift {
    from { translate: 0 0; }
    to   { translate: 30px -20px; }
}
.md-blob {
    animation: md-blob-drift 14s ease-in-out infinite alternate;
}
.md-blob:nth-child(2) { animation-duration: 18s; animation-delay: -6s; }
.md-blob:nth-child(3) { animation-duration: 22s; animation-delay: -11s; }

/* ---------- จานอาหารลอย ---------- */
.md-plates {
    position: relative;
    height: 470px;
}

/* แสงอุ่นๆ ด้านหลังจาน */
.md-plates::before {
    content: '';
    position: absolute;
    inset: 12% 10%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(253, 224, 71, 0.35), rgba(253, 224, 71, 0) 70%);
    filter: blur(10px);
    pointer-events: none;
}

@keyframes md-pop {
    from { opacity: 0; scale: 0.6; }
    to   { opacity: 1; scale: 1; }
}

@keyframes md-float {
    0%, 100% { translate: 0 0;     rotate: -2deg; }
    50%      { translate: 0 -14px; rotate: 2deg; }
}

.md-plate {
    position: absolute;
    display: block;
    border-radius: 50%;
    z-index: 1;
    animation:
        md-pop 0.9s cubic-bezier(0.2, 0.8, 0.2, 1.15) both,
        md-float 7s ease-in-out infinite;
}

.md-plate-img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 8px solid #fff;
    box-shadow:
        0 28px 50px -14px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(0, 0, 0, 0.04);
    transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.md-plate:hover .md-plate-img,
.md-plate:focus-visible .md-plate-img {
    transform: scale(1.07) rotate(-4deg);
}

/* ป้ายชื่อเมนูใต้จาน */
.md-plate-tag {
    position: absolute;
    left: 50%;
    bottom: -4px;
    transform: translateX(-50%);
    white-space: nowrap;
    background: #fff;
    color: #276e00;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 999px;
    box-shadow: 0 6px 16px -4px rgba(0, 0, 0, 0.3);
}

/* ตำแหน่งจาน + จังหวะลอยที่ต่างกัน */
.md-plate-1 { width: 250px; height: 250px; top: 8px;   left: 0;      animation-delay: 0.30s, -1s;  animation-duration: 0.9s, 7s; }
.md-plate-2 { width: 200px; height: 200px; top: 34px;  right: 6px;   animation-delay: 0.42s, -3s;  animation-duration: 0.9s, 8s; }
.md-plate-3 { width: 190px; height: 190px; bottom: 0;  left: 80px;   animation-delay: 0.54s, -5s;  animation-duration: 0.9s, 9s; }
.md-plate-4 { width: 165px; height: 165px; bottom: 56px; right: 44px; animation-delay: 0.66s, -2s; animation-duration: 0.9s, 6.5s; }

/* ไอร้อนลอยขึ้นจากจานต้มยำ */
.md-steam {
    position: absolute;
    left: 50%;
    top: -64px;
    width: 90px;
    height: 76px;
    margin-left: -45px;
    pointer-events: none;
    overflow: visible;
}
.md-steam path {
    fill: none;
    stroke: rgba(255, 255, 255, 0.75);
    stroke-width: 3.5;
    stroke-linecap: round;
    opacity: 0;
    animation: md-steam 3.6s ease-in-out infinite;
}
.md-steam path:nth-child(2) { animation-delay: 1.2s; }
.md-steam path:nth-child(3) { animation-delay: 2.4s; }

@keyframes md-steam {
    0%   { opacity: 0;   translate: 0 16px; }
    30%  { opacity: 0.8; }
    100% { opacity: 0;   translate: 0 -22px; }
}

/* ป้ายลอย (บริการ) */
@keyframes md-chip-bob {
    0%, 100% { translate: 0 0; }
    50%      { translate: 0 -8px; }
}
.md-chip {
    position: absolute;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.96);
    color: #1f2937;
    font-size: 12px;
    font-weight: 600;
    padding: 7px 13px;
    border-radius: 999px;
    box-shadow: 0 12px 28px -8px rgba(0, 0, 0, 0.35);
    animation:
        md-pop 0.8s cubic-bezier(0.2, 0.8, 0.2, 1.15) both,
        md-chip-bob 5s ease-in-out infinite;
}
.md-chip-1 { top: 252px; left: 214px; animation-delay: 0.85s, -1s; }
.md-chip-2 { top: 0;     left: 236px; animation-delay: 1.0s,  -3s; }

/* ของตกแต่งเล็กๆ (พริก ใบโหระพา มะนาว) ลอยหมุนช้าๆ */
@keyframes md-garnish {
    0%, 100% { translate: 0 0;      rotate: 0deg; }
    50%      { translate: 6px -12px; rotate: 18deg; }
}
.md-garnish {
    position: absolute;
    z-index: 0;
    font-size: 26px;
    line-height: 1;
    filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.25));
    animation: md-garnish 9s ease-in-out infinite;
    pointer-events: none;
}
.md-garnish-1 { top: 210px; left: -14px; animation-delay: -2s; }
.md-garnish-2 { top: 240px; right: 4px;  animation-delay: -5s; animation-duration: 11s; }
.md-garnish-3 { bottom: 6px; right: 6px; animation-delay: -7s; animation-duration: 10s; }

/* แถวจานเล็กบนมือถือ */
.md-plates-mobile {
    display: flex;
    justify-content: center;
    gap: 10px;
}
.md-plates-mobile .md-mini {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #fff;
    box-shadow: 0 10px 20px -8px rgba(0, 0, 0, 0.45);
    animation: md-float 6s ease-in-out infinite;
}
.md-plates-mobile .md-mini:nth-child(2) { animation-delay: -1.5s; }
.md-plates-mobile .md-mini:nth-child(3) { animation-delay: -3s; }
.md-plates-mobile .md-mini:nth-child(4) { animation-delay: -4.5s; }
@media (min-width: 1024px) {
    .md-plates-mobile { display: none; }
}

/* ---------- คลื่นใต้ hero (แนว nexile / netregis) ---------- */
.md-waves {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    z-index: 0;
    display: block;
    width: 100%;
    height: 70px;
    pointer-events: none;
}

@keyframes md-wave {
    0%   { transform: translate3d(-90px, 0, 0); }
    100% { transform: translate3d(85px, 0, 0); }
}
.md-wave use {
    animation: md-wave 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
}
/* ชั้น 3–4 ใช้สีพื้นของ section ถัดไป (--md-wave-base; หน้าแรก = สีหมวดหมู่) */
.md-wave-1 use { fill: rgba(255, 255, 255, 0.10); animation-duration: 11s; animation-delay: -2s; }
.md-wave-2 use { fill: rgba(255, 255, 255, 0.20); animation-duration: 9s;  animation-delay: -3s; }
.md-wave-3 use { fill: var(--md-wave-base, #e4ece2); fill-opacity: 0.55; animation-duration: 14s; animation-delay: -4s; }
.md-wave-4 use { fill: var(--md-wave-base, #e4ece2); animation-duration: 20s; animation-delay: -5s; }

@media (max-width: 767px) {
    .md-waves { height: 42px; }
}

/* ---------- Banner หัวหน้าอื่นๆ (motion.js เติม class + คลื่นให้อัตโนมัติ) ---------- */
.md-page-hero {
    position: relative;
    overflow: hidden;
    padding-bottom: 5rem !important; /* เผื่อที่ให้คลื่น ไม่ทับเนื้อหา */
}
.md-page-hero > :not(.md-waves):not(.absolute) {
    position: relative;
    z-index: 1;
}
@media (max-width: 767px) {
    .md-page-hero { padding-bottom: 3.75rem !important; }
}

/* ---------- Ticker เมนูยอดฮิต ---------- */
.md-ticker {
    padding: 14px 0 6px;
}
.md-ticker-label {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #276e00;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    padding: 7px 14px;
    border-radius: 999px;
}
.md-ticker-viewport {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.md-ticker-track {
    display: flex;
    width: max-content;
    animation: md-marquee 45s linear infinite;
}
.md-ticker-viewport:hover .md-ticker-track,
.md-ticker-viewport:focus-within .md-ticker-track {
    animation-play-state: paused;
}
@keyframes md-marquee {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
}
/* ใช้ margin แทน gap เพื่อให้เลื่อน -50% แล้ววนต่อได้พอดีเป๊ะ */
.md-ticker-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-right: 10px;
    background: #fff;
    color: #276e00;
    border: 1px solid rgba(128, 187, 1, 0.35);
    font-size: 13px;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 999px;
    white-space: nowrap;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.md-ticker-item:hover {
    background: #80BB01;
    border-color: #80BB01;
    color: #fff;
}

/* ---------- เส้นโค้งคั่น section ---------- */
.md-divider {
    background: var(--md-from, transparent);
    line-height: 0;
}
.md-divider svg {
    display: block;
    width: 100%;
    height: 48px;
}
.md-divider path {
    fill: var(--md-to, #fff);
}
.md-divider-flip svg {
    transform: scaleX(-1);
}
@media (max-width: 767px) {
    .md-divider svg { height: 28px; }
}


/* ---------- Scroll reveal (class เติมโดย motion.js) ----------
   ใช้ `html .md-reveal` ให้ specificity สูงกว่าคลาส transition-* ของ Tailwind
   (Tailwind CDN ฉีด style ทีหลังไฟล์นี้ จึงชนะถ้า specificity เท่ากัน) */
html .md-reveal {
    opacity: 0;
    translate: 0 22px;
    transition:
        opacity 0.6s ease,
        translate 0.6s cubic-bezier(0.2, 0.7, 0.2, 1),
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease,
        background-color 0.3s ease,
        color 0.3s ease;
}
html .md-reveal.is-visible {
    opacity: 1;
    translate: 0 0;
}

/* ---------- ผู้ใช้ที่ตั้งค่าลดการเคลื่อนไหว ---------- */
@media (prefers-reduced-motion: reduce) {
    .md-hero-intro > *,
    .md-dot,
    .md-blob,
    .md-plate,
    .md-chip,
    .md-garnish,
    .md-steam path,
    .md-plates-mobile .md-mini,
    .md-wave use,
    .md-ticker-track {
        animation: none !important;
    }
    .md-steam { display: none; }
    .md-ticker-viewport { overflow-x: auto; }
    html .md-reveal {
        opacity: 1;
        translate: none;
        transition: none;
    }
}