/* ═══════════════════════════════════════════
   PARASIA — SHARED DESIGN SYSTEM
   Vietnamese × Bavarian Fusion
═══════════════════════════════════════════ */

/* ── TOKENS ── */
:root {
  --bg:          #080C16;
  --bg-2:        #0F1520;
  --bg-3:        #1A2030;
  --bg-4:        #242B3D;
  --viet-red:    #B91C1C;
  --viet-red-lt: #EF4444;
  --gold:        #D4AF37;
  --gold-lt:     #F0D060;
  --gold-dk:     #8B6914;
  --gold-dim:    rgba(212,175,55,.14);
  --gold-glow:   rgba(212,175,55,.35);
  --bav-blue:    #1E3A8A;
  --bav-blue-lt: #3B82F6;
  --bamboo:      #6B8F4E;
  --lotus:       #F9A8D4;
  --white:       #F8F4EE;
  --gray:        #9CA3AF;
  --gray-lt:     #D1D5DB;
  --border:      rgba(212,175,55,.18);
  --r:           12px;
  --r-lg:        22px;
  --ease:        cubic-bezier(.16,1,.3,1);
  --font-head:   'Playfair Display', Georgia, serif;
  --font-body:   'DM Sans', system-ui, sans-serif;
  --font-viet:   'Noto Serif', serif;
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
  background: var(--bg);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  overflow-x: hidden;
  cursor: none;
}
body.loading { overflow: hidden; }
a  { color: inherit; text-decoration: none; }
img { display: block; width: 100%; height: 100%; object-fit: cover; }
button { cursor: none; border: none; background: none; font-family: var(--font-body); }
input, select, textarea { font-family: var(--font-body); }
.container { max-width: 1280px; margin: 0 auto; padding: 0 clamp(1.5rem,5vw,4rem); }

/* ─────────────────────────────────────────
   PAGE TRANSITION CURTAIN
───────────────────────────────────────── */
#curtain {
  position: fixed; inset: 0;
  background: var(--bg);
  z-index: 9990;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity .45s var(--ease);
}
#curtain.show { opacity: 1; pointer-events: all; }
#curtain.hide { opacity: 0; }
.curtain-logo {
  display: flex; flex-direction: column; align-items: center; gap: .8rem;
  animation: curtainPulse .8s ease infinite alternate;
}
.curtain-logo img {
  width: 70px !important; height: 70px !important;
  max-width: 70px; max-height: 70px;
  object-fit: contain; display: block;
}
.curtain-logo span {
  font-family: var(--font-head);
  font-size: 1.2rem; letter-spacing: .3em;
  color: var(--gold);
}
@keyframes curtainPulse { from{opacity:.6} to{opacity:1} }

/* ─────────────────────────────────────────
   CUSTOM CURSOR — CHOPSTICKS
───────────────────────────────────────── */
.cursor-stick {
  position: fixed; top:0; left:0;
  pointer-events: none; z-index: 9998;
  transform: translate(-50%,-50%);
  transition: transform .12s;
}
.cursor-stick .stick {
  position: absolute;
  width: 3px; height: 28px;
  background: var(--gold);
  border-radius: 2px;
  transform-origin: bottom center;
  transition: transform .25s var(--ease);
}
.cursor-stick .stick-a { transform: rotate(-18deg) translateX(-5px); }
.cursor-stick .stick-b { transform: rotate(18deg)  translateX(5px);  }
body.cursor-hover .stick-a { transform: rotate(-6deg) translateX(-3px); }
body.cursor-hover .stick-b { transform: rotate(6deg)  translateX(3px);  }

.cursor-ring {
  position: fixed; top:0; left:0;
  width: 38px; height: 38px;
  border: 1.5px solid var(--gold);
  border-radius: 50%;
  pointer-events: none; z-index: 9997;
  transform: translate(-50%,-50%);
  transition: width .3s, height .3s, border-color .3s, opacity .3s;
}
body.cursor-hover .cursor-ring {
  width: 60px; height: 60px;
  border-color: var(--gold-lt);
  opacity: .5;
}
@media (max-width:768px){
  .cursor-stick, .cursor-ring { display: none; }
  body { cursor: default; }
}

/* ─────────────────────────────────────────
   NAVIGATION
───────────────────────────────────────── */
#navbar {
  position: fixed; top:0; left:0; right:0; z-index:900;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.2rem clamp(1.5rem,5vw,3rem);
  transition: background .5s, padding .4s, box-shadow .4s;
}
#navbar.scrolled {
  background: rgba(8,12,22,.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: .85rem clamp(1.5rem,5vw,3rem);
  box-shadow: 0 4px 40px rgba(0,0,0,.6);
  border-bottom: 1px solid var(--border);
}

.nav-brand {
  display: flex; align-items: center; gap: .75rem;
}
.nav-brand img {
  width: 62px; height: 62px;
  object-fit: contain;
  filter: drop-shadow(0 0 8px var(--gold-glow));
  transition: filter .3s;
}
.nav-brand:hover img { filter: drop-shadow(0 0 16px var(--gold-glow)); }
.brand-text { display: flex; flex-direction: column; line-height: 1; }
.brand-name {
  font-family: var(--font-head);
  font-size: 1.15rem; font-weight: 700;
  letter-spacing: .05em;
  color: var(--white);
}
.brand-sub {
  font-size: .65rem; letter-spacing: .2em;
  color: var(--gold); text-transform: uppercase;
}

.nav-links {
  display: flex; list-style: none; gap: 2rem; align-items: center;
}
.nav-link {
  font-size: .85rem; font-weight: 400;
  letter-spacing: .07em; color: var(--gray-lt);
  position: relative; transition: color .3s;
}
.nav-link::after {
  content: '';
  position: absolute; bottom:-4px; left:0;
  width:0; height:1px;
  background: var(--gold);
  transition: width .35s var(--ease);
}
.nav-link:hover, .nav-link.active { color: var(--white); }
.nav-link:hover::after, .nav-link.active::after { width: 100%; }

.nav-cta {
  font-size: .82rem; font-weight: 600;
  letter-spacing: .1em; padding: .6rem 1.4rem;
  border: 1px solid var(--gold); border-radius: 999px;
  color: var(--gold);
  transition: background .3s, color .3s, box-shadow .3s;
  position: relative; overflow: hidden;
}
.nav-cta::before {
  content: '';
  position: absolute; inset: 0;
  background: var(--gold);
  transform: scaleX(0); transform-origin: left;
  transition: transform .35s var(--ease);
}
.nav-cta:hover::before { transform: scaleX(1); }
.nav-cta span { position: relative; z-index:1; }
.nav-cta:hover span { color: var(--bg); }
.nav-cta:hover { box-shadow: 0 0 24px var(--gold-glow); }

.hamburger {
  display: none; flex-direction: column; gap: 5px; width: 26px;
}
.hamburger span {
  display: block; height: 1.5px;
  background: var(--white);
  transition: transform .3s, opacity .3s;
}
.hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity:0; }
.hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ─────────────────────────────────────────
   BAVARIAN LOZENGE BORDER (Rauten)
───────────────────────────────────────── */
.bav-border {
  height: 18px;
  background-image:
    linear-gradient(135deg, var(--bav-blue) 25%, transparent 25%),
    linear-gradient(225deg, var(--bav-blue) 25%, transparent 25%),
    linear-gradient(45deg,  var(--bav-blue) 25%, transparent 25%),
    linear-gradient(315deg, var(--bav-blue) 25%, var(--white) 25%);
  background-size: 18px 18px;
  background-position: 0 0, 0 9px, 9px -9px, -9px 0px;
  opacity: .7;
  animation: bavShift 8s linear infinite;
}
@keyframes bavShift { to { background-position: 18px 0, 18px 9px, 27px -9px, 9px 0; } }

.bav-border-gold {
  height: 14px;
  background-image:
    linear-gradient(135deg, var(--gold-dk) 25%, transparent 25%),
    linear-gradient(225deg, var(--gold-dk) 25%, transparent 25%),
    linear-gradient(45deg,  var(--gold-dk) 25%, transparent 25%),
    linear-gradient(315deg, var(--gold-dk) 25%, var(--gold-dim) 25%);
  background-size: 14px 14px;
  background-position: 0 0, 0 7px, 7px -7px, -7px 0;
  animation: bavShiftGold 6s linear infinite;
}
@keyframes bavShiftGold { to { background-position: 14px 0, 14px 7px, 21px -7px, 7px 0; } }

/* ─────────────────────────────────────────
   SECTION LABELS & TITLES
───────────────────────────────────────── */
.section-label {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .72rem; font-weight: 600;
  letter-spacing: .28em; text-transform: uppercase;
  color: var(--gold); margin-bottom: .9rem;
}
.section-label::before, .section-label::after {
  content: '';
  display: block; width: 20px; height: 1px;
  background: var(--gold); opacity: .6;
}
.section-title {
  font-family: var(--font-head);
  font-size: clamp(2.2rem,4.5vw,3.6rem);
  font-weight: 700; line-height: 1.08;
  letter-spacing: -.01em;
}
.section-title em { font-style: italic; color: var(--gold); }
.section-header { text-align: center; margin-bottom: 3.5rem; }

/* ─────────────────────────────────────────
   SCROLL REVEAL
───────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity .8s var(--ease) var(--delay,0s),
              transform .8s var(--ease) var(--delay,0s);
}
.reveal.visible { opacity:1; transform:none; }
.reveal-left  { opacity:0; transform:translateX(-40px); transition: opacity .8s var(--ease) var(--delay,0s), transform .8s var(--ease) var(--delay,0s); }
.reveal-right { opacity:0; transform:translateX(40px);  transition: opacity .8s var(--ease) var(--delay,0s), transform .8s var(--ease) var(--delay,0s); }
.reveal-left.visible, .reveal-right.visible { opacity:1; transform:none; }

/* ─────────────────────────────────────────
   BUTTONS
───────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .9rem 2rem; border-radius: 999px;
  font-size: .88rem; font-weight: 600; letter-spacing: .08em;
  position: relative; overflow: hidden;
  transition: box-shadow .3s, transform .3s;
}
.btn::before {
  content: '';
  position: absolute; inset:0;
  background: linear-gradient(120deg,transparent 20%,rgba(255,255,255,.25) 50%,transparent 80%);
  transform: translateX(-100%);
  transition: transform .5s ease;
}
.btn:hover::before { transform: translateX(100%); }
.btn:hover { transform: translateY(-2px); }

.btn-gold { background: var(--gold); color: var(--bg); }
.btn-gold:hover { box-shadow: 0 8px 32px var(--gold-glow); }

.btn-red { background: var(--viet-red); color: var(--white); }
.btn-red:hover { box-shadow: 0 8px 32px rgba(185,28,28,.5); }

.btn-outline {
  background: transparent; color: var(--white);
  border: 1px solid rgba(255,255,255,.3);
}
.btn-outline:hover { border-color: var(--gold); background: var(--gold-dim); }

.btn-full { width:100%; justify-content: center; }

/* ─────────────────────────────────────────
   LOTUS DIVIDER
───────────────────────────────────────── */
.lotus-divider {
  display: flex; align-items: center; gap: 1.2rem;
  padding: 0 clamp(1.5rem,5vw,4rem);
  position: relative; z-index:2;
}
.lotus-divider .line {
  flex:1; height:1px;
  background: linear-gradient(90deg,transparent,var(--border),transparent);
}
.lotus-icon {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem;
  animation: lotusFloat 4s ease-in-out infinite;
}
@keyframes lotusFloat {
  0%,100% { transform: translateY(0) rotate(-5deg); }
  50%      { transform: translateY(-6px) rotate(5deg); }
}

/* ─────────────────────────────────────────
   FOOTER
───────────────────────────────────────── */
#footer {
  background: var(--bg-2);
  border-top: 1px solid var(--border);
  position: relative; z-index:2; overflow: hidden;
}
.footer-bav { margin-bottom: 0; }

.footer-inner {
  max-width:1280px; margin:0 auto;
  padding: 4rem clamp(1.5rem,5vw,4rem) 2rem;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 3rem;
}
.footer-brand img { width:90px; height:90px; object-fit:contain; margin-bottom:1rem; }
.footer-brand .name {
  font-family: var(--font-head); font-size:1.3rem;
  font-weight:700; margin-bottom: .3rem;
}
.footer-brand p { font-size:.875rem; color:var(--gray); line-height:1.8; }

.footer-col h4 {
  font-size:.72rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--gray);
  margin-bottom:1.2rem;
}
.footer-col a {
  display:block; font-size:.9rem;
  color:var(--gray-lt); margin-bottom:.7rem;
  transition:color .3s;
}
.footer-col a:hover { color:var(--gold); }

.footer-bottom {
  max-width:1280px; margin:0 auto;
  padding: 1.5rem clamp(1.5rem,5vw,4rem);
  border-top: 1px solid var(--bg-4);
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:.5rem;
  font-size:.8rem; color:var(--gray);
}
.footer-legal a { color:var(--gray-lt); }
.footer-legal a:hover { color:var(--gold); }
.footer-fish {
  position: absolute; bottom:2rem; right:2rem;
  font-size:3rem; opacity:.06;
  animation: fishDrift 8s ease-in-out infinite;
}
@keyframes fishDrift {
  0%,100% { transform: translateX(0) scaleX(1); }
  50%      { transform: translateX(-40px) scaleX(-1); }
}

/* ─────────────────────────────────────────
   PAGE HERO (shared smaller hero)
───────────────────────────────────────── */
.page-hero {
  position: relative;
  padding: clamp(8rem,16vh,11rem) 0 clamp(4rem,8vh,6rem);
  text-align: center;
  overflow: hidden;
}
.page-hero-bg {
  position: absolute; inset:0; z-index:0;
}
.page-hero-bg img { opacity:.2; }
.page-hero-overlay {
  position: absolute; inset:0;
  background: linear-gradient(to bottom, rgba(8,12,22,.6) 0%, var(--bg) 100%);
}
.page-hero-content { position:relative; z-index:2; }
.page-hero h1 {
  font-family: var(--font-head);
  font-size: clamp(2.8rem,6vw,5rem);
  font-weight:700; line-height:1.05;
  margin-bottom:.8rem;
}
.page-hero h1 em { font-style:italic; color:var(--gold); }
.page-hero p { color:var(--gray-lt); font-size:1.05rem; max-width:520px; margin:0 auto; }

/* ─────────────────────────────────────────
   SCROLL TOP BUTTON
───────────────────────────────────────── */
#scrollTop {
  position:fixed; bottom:2rem; right:2rem;
  width:44px; height:44px;
  background: var(--gold); color:var(--bg);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:.9rem; z-index:800;
  opacity:0; pointer-events:none;
  transform:translateY(12px);
  transition: opacity .3s, transform .3s, box-shadow .3s;
  box-shadow: 0 4px 20px var(--gold-glow);
}
#scrollTop.show { opacity:1; pointer-events:all; transform:none; }
#scrollTop:hover { box-shadow: 0 8px 32px var(--gold-glow); }

/* ─────────────────────────────────────────
   RESPONSIVE NAV
───────────────────────────────────────── */
@media(max-width:900px){
  .nav-links {
    display:none; position:fixed; inset:0;
    background:rgba(8,12,22,.97); backdrop-filter:blur(20px);
    flex-direction:column; align-items:center; justify-content:center;
    gap:2.5rem; z-index:850;
  }
  .nav-links.open { display:flex; }
  .nav-link { font-size:1.3rem; }
  .nav-cta  { display:none; }
  .hamburger { display:flex; }

  .footer-inner { grid-template-columns:1fr 1fr; }
  .footer-brand { grid-column:span 2; }
}
@media(max-width:580px){
  .footer-inner { grid-template-columns:1fr; }
  .footer-brand { grid-column:span 1; }
}

/* ─────────────────────────────────────────
   MOBILE-ONLY: hide redundant stat strips + press strip
───────────────────────────────────────── */
@media(max-width:768px){
  #stats-render,
  .press-strip { display:none !important; }
}