/* ================================================================
   BASE — Reset, Typography, CSS Custom Properties
   mgm Vietnam 10-Year Anniversary Website
================================================================ */
@font-face {
  font-family: 'Redriver';
  src: url('/fonts/Redriver.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; padding: 0;
  background: #0d0d0d;
  color: #f0f0f0;
  font-family: Arial, Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; }

:root {
  --B: #0d0d0d;
  --T: #f0f0f0;
  --CB: rgba(255,255,255,.04);
  --CR: rgba(255,255,255,.1);
  --G: 15px;
  --H: rgba(255,255,255,.12);
  --font-display: 'Redriver', 'Georgia', serif;
  --font-body: Arial, Helvetica, sans-serif;
}

/* Snap Scroll Container */
#snap-container {
  height: 100vh; width: 100%;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  position: relative; z-index: 1;
}

.snap-section {
  height: 100vh; width: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  position: relative; overflow: hidden;
  opacity: 0; transition: opacity 0.8s ease-in-out;
}
.snap-section.is-active { opacity: 1; }

.snap-section.is-timeline {
  height: auto !important; min-height: 100vh !important;
  overflow: visible !important;
  scroll-snap-align: start none !important;
  scroll-snap-stop: normal !important;
  opacity: 1 !important;
}

.snap-section:not(.is-timeline) > * {
  transform: translateY(50px);
  transition: transform 1.2s cubic-bezier(0.16,1,0.3,1);
  will-change: transform;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
}
.snap-section.is-active:not(.is-timeline) > * { transform: translateY(0px); }

.scrollable-content {
  height: 100%; overflow-y: auto;
  -ms-overflow-style: none; scrollbar-width: none;
}
.scrollable-content::-webkit-scrollbar { display: none; }

.mgm-nav-dot { transition: all 0.6s cubic-bezier(0.25,1,0.5,1); }
.mgm-nav-dot.active { background-color: #ffffff !important; opacity: 1 !important; width: 32px !important; }

.fade-up {
  opacity: 0; transform: translateY(40px);
  transition: opacity 0.8s cubic-bezier(0.16,1,0.3,1), transform 0.8s cubic-bezier(0.16,1,0.3,1);
}
.fade-up.is-visible { opacity: 1; transform: translateY(0); }

.tl-bf {
  position: fixed; bottom: 0; left: 0; width: 100%; height: 15vh;
  background: linear-gradient(to top, #0d0d0d 0%, transparent 100%);
  pointer-events: none; z-index: 50;
}


/* Bullet-proof Side Nav Overrides */
.mgm-nav-wrapper {
  top: 50% !important;
  right: 2rem !important;
  bottom: auto !important;
  left: auto !important;
  transform: translateY(-50%) !important;
  z-index: 999999 !important;
}
.mgm-nav-dot {
  width: 12px !important;
  height: 4px !important;
  border-radius: 4px !important;
  background-color: rgba(255, 255, 255, 0.4) !important;
  display: block !important;
  margin-bottom: 12px !important;
}
.mgm-nav-dot.active {
  background-color: #ffffff !important;
}
@media screen and (max-width: 991px) {
  .mgm-nav-wrapper { right: 0.8rem !important; }
}
@media screen and (max-width: 479px) {
  .mgm-nav-wrapper { right: 0.5rem !important; }
}