/* MOGTEC - Hainan Traveling Agency 
  High-Performance Master Stylesheet 
*/

:root {
  /* Core Palette */
  --nv: #0A1628;  --nv2: #0D2640; --oc: #0F6B8E; --tl: #1B9BBF;
  --lt: #5EC8E0;  --fm: #C8F0F8; --rd: #C8191E; --r2: #E03030;
  --rdk: #8B0000; --g1: #D4A843; --g2: #F0CC70; --cr: #FFF9EE;
  --sv: #1A3010;  --wc: #07C160; --ap: #1677FF; --wh: #FEFEFE; --ink: #060B10;
}

/* RESET & BASE */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-x: hidden; width: 100%; }
body { 
  font-family: 'Josefin Sans', sans-serif; 
  background: var(--nv); 
  color: var(--wh); 
  overflow-x: hidden;
  position: relative;
  -webkit-font-smoothing: antialiased;
}

img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* CUSTOM SCROLLBAR */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--nv); }
::-webkit-scrollbar-thumb { background: var(--g1); border-radius: 2px; }

/* --- LANGUAGE LOGIC --- */
[class*="t-"], [class*="tb-"] { display: none !important; }

/* Desktop Display Rules */
body.lang-en .t-en { display: inline !important; }
body.lang-zh .t-zh { display: inline !important; }
body.lang-ru .t-ru { display: inline !important; }

body.lang-en .tb-en { display: block !important; }
body.lang-zh .tb-zh { display: block !important; }
body.lang-ru .tb-ru { display: block !important; }

/* SCROLL PROGRESS */
#sbar { 
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 9999;
  background: linear-gradient(90deg, var(--tl), var(--g2), var(--rd));
  transform: scaleX(0); transform-origin: left; transition: transform .1s; 
}

/* LANG BAR */
.lbar { 
  position: fixed; top: 0; left: 0; right: 0; z-index: 700; 
  background: rgba(3, 6, 14, .97); border-bottom: 1px solid rgba(212, 168, 67, .18); 
  height: 34px; display: flex; align-items: center; padding: 0 28px; 
}

.ll { font-size: 9px; letter-spacing: .18em; text-transform: uppercase; color: rgba(255, 255, 255, .28); margin-right: 10px; }
.lb { 
  display: flex; align-items: center; gap: 5px; padding: 0 12px; height: 34px;
  font-size: 10px; font-weight: 700; cursor: pointer; border: none; background: transparent;
  color: rgba(255, 255, 255, .38); border-right: 1px solid rgba(255, 255, 255, .07); transition: all .15s; 
}
.lb:first-of-type { border-left: 1px solid rgba(255, 255, 255, .07); }
.lb.on { background: rgba(212, 168, 67, .1); color: var(--g2); }
.lb:hover:not(.on) { color: white; background: rgba(255, 255, 255, .04); }

.lr { margin-left: auto; display: flex; align-items: center; gap: 8px; font-size: 10px; color: rgba(255, 255, 255, .28); }
.lwc { background: var(--wc); color: white; font-size: 9px; font-weight: 700; padding: 2px 8px; border-radius: 3px; }

/* NAVIGATION */
nav { 
  position: fixed; top: 34px; left: 0; right: 0; z-index: 600;
  background: rgba(6, 11, 22, .97); backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(212, 168, 67, .15); height: 56px;
  display: flex; align-items: center; padding: 0 28px; gap: 14px; 
}

.nav-logo { display: flex; align-items: center; gap: 10px; cursor: pointer; text-decoration: none; }
.nl { display: flex; gap: 18px; list-style: none; margin-left: auto; }
.nl a { 
  font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255, 255, 255, .48); text-decoration: none; transition: color .2s; 
}
.nl a:hover { color: var(--g2); }

.ncta { 
  background: var(--rd); color: white; padding: 8px 18px; border-radius: 6px;
  font-size: 10px; font-weight: 700; letter-spacing: .08em; border: none; cursor: pointer;
  transition: all .2s; white-space: nowrap; 
}
.ncta:hover { background: var(--r2); transform: translateY(-1px); }

/* SHARED ANIMATIONS & UI */
@keyframes up { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } }
@keyframes wavemove { 0% { transform: translateX(0) rotate(0deg); } 100% { transform: translateX(-50%) rotate(360deg); } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

.sec-eye { font-size: 9px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--tl); margin-bottom: 10px; }
.sec-h2 { font-family: 'Cinzel', serif; font-size: clamp(22px, 3.2vw, 38px); font-weight: 700; color: var(--g2); margin-bottom: 6px; }
.sec-head { text-align: center; margin-bottom: 40px; }

/* WAVE LAYERS (Performance Optimized) */
.hw { 
  position: absolute; bottom: 0; left: -50%; width: 200%; border-radius: 45%;
  animation: wavemove var(--s, 9s) linear infinite var(--d, 0s);
  opacity: var(--o, .06); background: var(--c, #5EC8E0); height: var(--h, 80px);
  will-change: transform; 
}
.hw:nth-child(1) { --s: 8s; --o: .07; --c: #1B9BBF; --h: 90px; --d: 0s; }
.hw:nth-child(2) { --s: 11s; --o: .05; --c: #0F6B8E; --h: 70px; --d: -3s; }
.hw:nth-child(3) { --s: 14s; --o: .04; --c: #5EC8E0; --h: 60px; --d: -6s; }

/* BUTTONS */
.btn-r { 
  background: var(--rd); color: white; padding: 12px 24px; border-radius: 8px;
  font-size: 11px; font-weight: 700; text-transform: uppercase; border: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px; transition: all .2s; 
}
.btn-r:hover { background: var(--r2); transform: translateY(-2px); box-shadow: 0 8px 22px rgba(200, 25, 30, .35); }

/* CARDS & PANELS */
.ppk, .rv, .pip, .qf { 
  border-radius: 14px; transition: transform .35s ease, box-shadow .35s ease; 
}

.ppk:hover { 
  transform: perspective(900px) rotateX(4deg) rotateY(-4deg) translateZ(14px);
  box-shadow: 16px 32px 56px rgba(0, 0, 0, .72); 
}

/* MODALS */
#book-modal { 
  display: none; position: fixed; inset: 0; z-index: 9000; 
  background: rgba(0, 0, 0, .85); backdrop-filter: blur(8px); 
  align-items: center; justify-content: center; padding: 20px; 
}
#book-modal.open { display: flex; }
.modal-box { 
  background: linear-gradient(135deg, #061428, #0a1e38); border: 1px solid rgba(212, 168, 67, .2);
  border-radius: 20px; padding: 40px; max-width: 600px; width: 100%; max-height: 90vh; overflow-y: auto; 
}

/* --- MOBILE & PERFORMANCE OVERRIDES --- */
@media (max-width: 900px) {
  .nav-logo span:nth-child(3) { display: none; }
  .nl { display: none; }
  .lbar { height: auto; flex-direction: column; padding: 8px 15px; }
  .lr { width: 100%; justify-content: center; margin-top: 5px; border-top: 1px solid rgba(255,255,255,.05); padding-top: 5px; }
  
  /* Kill heavy 3D on mobile for better FPS */
  .ppk:hover, .rv:hover, .qf:hover, .pip:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 10px 25px rgba(0,0,0,0.4) !important;
  }
  
  .form-row { grid-template-columns: 1fr; }
  .psel { top: 90px; }
}

/* WeChat Specific fix for horizontal shifts */
body { width: 100vw; position: relative; }