/**
 * DanangMedia — Footer Scene CSS  v1.0
 * Cảnh hoàng hôn biển / sóng nước động
 *
 * Các lớp:
 *  .mnm-footer-scene   — khung cảnh (sky + waves + sand)
 *  .mnm-footer-content — nội dung text footer
 *  .mnm-footer-inner   — container nội dung
 */

/* ── Variables ─────────────────────────────────────────────── */
:root {
    --mnm-coral:       #e8578a;
    --mnm-coral-dark:  #c44522;
    --mnm-gold:        #d4a24c;
    --mnm-gold-light:  #f0d08c;
    --mnm-cream:       #fdf6ee;
    --mnm-deep:        #1a1008;
    --mnm-dark-bg:     #0a2704;
    --mnm-font-serif:  'Cormorant Garamond', Georgia, serif;
    --mnm-font-sans:   'DM Sans', 'Helvetica Neue', sans-serif;
}

/* ── Scene Wrapper ─────────────────────────────────────────── */
.mnm-footer-scene {
    position: relative; width: 100%; height: 420px; overflow: hidden;
    background: linear-gradient(
        180deg,
        #FF6B35 0%,   #FF8C42 12%,  #FFA552 22%,
        #FFD08A 35%,  #87CEEB 58%,  #5A9FBF 72%,
        #2E6B8F 85%,  #1a4060 100%
    );
}

/* ── Sun ────────────────────────────────────────────────────── */
.mnm-sun {
    position: absolute; left: 42%; top: 18%;
    width: 72px; height: 72px; border-radius: 50%;
    background: radial-gradient(circle at 40% 38%,
        #fffde7 0%, #FFD700 40%, #FFA500 80%, #FF7200 100%);
    box-shadow:
        0 0 0  8px rgba(255,215,0,.25),
        0 0 0 22px rgba(255,165,0,.15),
        0 0 0 48px rgba(255,114,0,.08),
        0 0 60px 20px rgba(255,200,50,.20);
    animation: mnm-sun-pulse 5s ease-in-out infinite;
    will-change: transform, box-shadow;
}

/* Sun reflection on water */
.mnm-sun-reflection {
    position: absolute; left: calc(42% + 4px); bottom: 185px;
    width: 64px; height: 100px;
    background: linear-gradient(
        to bottom,
        rgba(255,215,0,.45) 0%, rgba(255,160,50,.25) 40%,
        rgba(255,120,0,.08) 75%, transparent 100%
    );
    border-radius: 50% 50% 30% 30% / 20% 20% 60% 60%;
    animation: mnm-reflection-shimmer 3s ease-in-out infinite;
    will-change: opacity, transform;
}

/* ── Birds ─────────────────────────────────────────────────── */
.mnm-birds {
    position: absolute; top: 15%; left: -120px;
    width: 120px; height: 30px;
    animation: mnm-birds-fly 22s linear infinite;
    will-change: transform;
}
.mnm-birds svg { overflow: visible; }
.mnm-birds-2 {
    top: 8%;
    animation-duration: 30s;
    animation-delay: -12s;
    transform: scale(0.7);
}

/* ── Waves ─────────────────────────────────────────────────── */
.mnm-wave-wrapper {
    position: absolute; bottom: 0; left: 0;
    width: 200%; will-change: transform; pointer-events: none;
}
.mnm-wave-back  { bottom: 155px; animation: mnm-wave-slide 20s linear infinite; opacity: .55; z-index: 2; }
.mnm-wave-mid   { bottom: 130px; animation: mnm-wave-slide-reverse 13s linear infinite; opacity: .70; z-index: 3; }
.mnm-wave-front { bottom: 110px; animation: mnm-wave-slide 7s linear infinite;  opacity: 1;   z-index: 4; }
.mnm-wave-wrapper svg { display: block; width: 100%; height: 120px; }

/* ── Sand ──────────────────────────────────────────────────── */
.mnm-sand {
    position: absolute; bottom: 0; left: 0; width: 100%; height: 115px; z-index: 5;
    background: linear-gradient(to bottom, #f5deb3 0%, #e8c99a 30%, #dbb882 65%, #c9a06a 100%);
    border-top: 3px solid rgba(255,255,255,.35);
}

/* ── Silhouettes & Misc ────────────────────────────────────── */
.mnm-silhouettes { position: absolute; bottom: 108px; left: 0; width: 100%; height: 90px; z-index: 6; pointer-events: none; }
.mnm-shadows     { position: absolute; bottom: 100px; left: 0; width: 100%; height: 20px; z-index: 5; pointer-events: none; }
.mnm-svg-filters { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ── Footer Content ────────────────────────────────────────── */
.mnm-footer-content {
    position: relative; z-index: 10;
    background: rgba(8,32,58,.92);
    color: #d0d8e0;
    -webkit-backdrop-filter: blur(8px) saturate(160%);
    backdrop-filter: blur(8px) saturate(160%);
    border-top: 3px solid var(--mnm-coral);
}
.mnm-footer-inner {
    max-width: 1200px; margin: 0 auto; padding: 52px 24px 36px;
}
.mnm-footer-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr;
    gap: 48px;
    margin-bottom: 40px;
}

/* Brand column */
.mnm-fc-brand .mnm-footer-logo {
    font-family: var(--mnm-font-serif); font-size: 26px; font-weight: 700;
    color: #fff; display: inline-block; margin-bottom: 14px; letter-spacing: .5px;
}
.mnm-fc-brand .mnm-footer-logo span { color: var(--mnm-coral); }
.mnm-fc-brand p { font-size: 14px; line-height: 1.85; color: #a8b8c8; margin-bottom: 6px; }
.mnm-fc-brand p strong { color: rgba(255,255,255,.88); font-weight: 600; }

.mnm-mst-tag {
    display: inline-block;
    background: rgba(212,162,76,.15); border: 1px solid rgba(212,162,76,.35);
    color: var(--mnm-gold-light); font-size: 12px; font-weight: 700;
    letter-spacing: 1px; padding: 5px 14px; border-radius: 100px; margin-top: 12px;
}

/* Nav columns */
.mnm-footer-col h4 {
    font-family: var(--mnm-font-sans); font-size: 11px; font-weight: 800;
    text-transform: uppercase; letter-spacing: 2.5px; color: var(--mnm-gold);
    margin-bottom: 20px; padding-bottom: 12px;
    border-bottom: 1px solid rgba(212,162,76,.25);
}
.mnm-footer-col ul { list-style: none; padding: 0; margin: 0; }
.mnm-footer-col ul li { margin-bottom: 11px; }
.mnm-footer-col ul li a {
    font-size: 14px; color: #a8b8c8; text-decoration: none;
    display: inline-flex; align-items: center; gap: 8px;
    transition: color .25s ease, gap .25s ease;
}
.mnm-footer-col ul li a:hover { color: #5FFBF1; gap: 12px; }
.mnm-footer-col ul li a::before {
    content: '→'; font-size: 12px; color: var(--mnm-coral);
    flex-shrink: 0; transition: transform .25s ease;
}
.mnm-footer-col ul li a:hover::before { transform: translateX(3px); }

/* Contact */
.mnm-contact-item {
    display: flex; align-items: flex-start; gap: 12px;
    margin-bottom: 14px; font-size: 14px; color: #a8b8c8; line-height: 1.6;
}
.mnm-contact-item svg { flex-shrink: 0; color: var(--mnm-coral); margin-top: 2px; }
.mnm-contact-item a { color: inherit; text-decoration: none; transition: color .25s; }
.mnm-contact-item a:hover { color: #5FFBF1; }
.mnm-contact-phone {
    font-family: var(--mnm-font-serif); font-size: 22px; font-weight: 700;
    color: var(--mnm-gold-light); letter-spacing: .5px;
}
.mnm-contact-phone:hover { color: #fff; }

/* Bottom bar */
.mnm-footer-bottom {
    border-top: 1px solid rgba(255,255,255,.07); padding-top: 24px;
    display: flex; justify-content: space-between; align-items: center;
    flex-wrap: wrap; gap: 12px; font-size: 13px; color: #6a7f90;
}
.mnm-footer-bottom a { color: var(--mnm-gold); text-decoration: none; }
.mnm-footer-bottom a:hover { color: var(--mnm-gold-light); }

.mnm-hashtags { display: flex; gap: 10px; flex-wrap: wrap; }
.mnm-hashtag  { font-size: 12px; color: rgba(95,251,241,.5); font-weight: 600; }

/* ── Keyframes ─────────────────────────────────────────────── */
@keyframes mnm-wave-slide         { 0% { transform: translateX(0); }    100% { transform: translateX(-50%); } }
@keyframes mnm-wave-slide-reverse { 0% { transform: translateX(-50%); } 100% { transform: translateX(0); } }

@keyframes mnm-sun-pulse {
    0%, 100% {
        transform: scale(1);
        box-shadow:
            0 0 0  8px rgba(255,215,0,.22),
            0 0 0 22px rgba(255,165,0,.12),
            0 0 0 48px rgba(255,114,0,.06),
            0 0 60px 20px rgba(255,200,50,.18);
    }
    50% {
        transform: scale(1.07);
        box-shadow:
            0 0 0 12px rgba(255,215,0,.30),
            0 0 0 30px rgba(255,165,0,.18),
            0 0 0 60px rgba(255,114,0,.09),
            0 0 80px 30px rgba(255,200,50,.25);
    }
}

@keyframes mnm-reflection-shimmer {
    0%, 100% { opacity: .6; transform: scaleX(1); }
    33%       { opacity: .9; transform: scaleX(1.15); }
    66%       { opacity: .5; transform: scaleX(0.9); }
}

@keyframes mnm-birds-fly {
    0%   { transform: translateX(0vw)   translateY(0); }
    25%  { transform: translateX(30vw)  translateY(-18px); }
    50%  { transform: translateX(60vw)  translateY(5px); }
    75%  { transform: translateX(90vw)  translateY(-10px); }
    100% { transform: translateX(calc(100vw + 140px)) translateY(0); }
}

@keyframes mnm-char-jump {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-8px); }
}
@keyframes mnm-cam-shake {
    0%, 100% { transform: rotate(-1deg) translateY(0); }
    25%       { transform: rotate(0.5deg) translateY(-2px); }
    50%       { transform: rotate(-0.5deg) translateY(0); }
    75%       { transform: rotate(1deg) translateY(-1px); }
}
@keyframes mnm-drone-hover {
    0%, 100% { transform: translateY(0) rotate(-2deg); }
    50%       { transform: translateY(-14px) rotate(2deg); }
}

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 900px) {
    .mnm-footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
    .mnm-fc-brand    { grid-column: 1 / -1; }
    .mnm-footer-scene { height: 340px; }
    .mnm-sun          { left: 35%; top: 15%; width: 58px; height: 58px; }
    .mnm-sun-reflection { left: calc(35% + 4px); bottom: 150px; }
}

@media (max-width: 600px) {
    .mnm-footer-grid  { grid-template-columns: 1fr; gap: 28px; }
    .mnm-footer-scene { height: 280px; }
    .mnm-sun          { left: 28%; top: 12%; width: 48px; height: 48px; }
    .mnm-sun-reflection { bottom: 120px; height: 70px; }
    .mnm-footer-bottom { flex-direction: column; text-align: center; }
    .mnm-hashtags      { justify-content: center; }
    .mnm-wave-wrapper svg  { height: 80px; }
    .mnm-wave-back    { bottom: 115px; }
    .mnm-wave-mid     { bottom: 98px; }
    .mnm-wave-front   { bottom: 82px; }
    .mnm-sand         { height: 85px; }
    .mnm-silhouettes  { bottom: 78px; }
}

/* ── Accessibility ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .mnm-wave-wrapper,
    .mnm-sun,
    .mnm-sun-reflection,
    .mnm-birds,
    .mnm-birds-2,
    [class*="mnm-char"],
    [class*="mnm-cam"],
    [class*="mnm-drone"] {
        animation: none !important;
        transition: none !important;
    }
}