/* ============================================================
   TOP BAR กค logo กค nav กค language dropdown
   ============================================================ */

.topbar{
  position:fixed;
  inset:0 0 auto 0;
  z-index:60;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:clamp(.75rem,2vw,2rem);
  padding:
    calc(clamp(.85rem,2.2vh,1.35rem) + env(safe-area-inset-top, 0px))
    calc(clamp(1.1rem,3.5vw,2.6rem) + env(safe-area-inset-right, 0px))
    clamp(.85rem,2.2vh,1.35rem)
    calc(clamp(1.1rem,3.5vw,2.6rem) + env(safe-area-inset-left, 0px));
  pointer-events:none;
}
.topbar > *{position:relative;z-index:1;pointer-events:auto}

/* ---------- Dark backdrop that appears on scroll ---------- */
.topbar::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,
    rgba(5,5,7,.94) 0%,
    rgba(5,5,7,.78) 70%,
    rgba(5,5,7,.62) 100%);
  backdrop-filter:blur(22px) saturate(1.2);
  -webkit-backdrop-filter:blur(22px) saturate(1.2);
  opacity:0;
  visibility:hidden;
  transition:opacity .55s cubic-bezier(.22,1,.36,1),
             visibility 0s linear .55s;
  pointer-events:none;
}

/* ---------- Neon underline that animates on scroll ---------- */
.topbar::after{
  content:'';
  position:absolute;
  left:0;right:0;bottom:0;
  height:1px;
  background:linear-gradient(90deg,
    transparent 0%,
    #ff2bd6 18%,
    #00e5ff 50%,
    #ff2bd6 82%,
    transparent 100%);
  background-size:240% 100%;
  opacity:0;
  visibility:hidden;
  transition:opacity .55s cubic-bezier(.22,1,.36,1),
             visibility 0s linear .55s;
  box-shadow:
    0 0 10px rgba(255,43,214,.75),
    0 0 26px rgba(255,43,214,.4),
    0 0 10px rgba(0,229,255,.45);
  pointer-events:none;
}

/* Active state, applied when window.scrollY > 20 */
.topbar.is-scrolled::before{
  opacity:1;
  visibility:visible;
  transition:opacity .55s cubic-bezier(.22,1,.36,1), visibility 0s;
}
.topbar.is-scrolled::after{
  opacity:1;
  visibility:visible;
  animation:neonSlide 4.5s linear infinite;
  transition:opacity .55s cubic-bezier(.22,1,.36,1), visibility 0s;
}

@keyframes neonSlide{
  from{background-position:240% 0}
  to  {background-position:-240% 0}
}

/* ---------- LOGO ---------- */
.brandmark{
  display:flex;
  align-items:center;
  justify-self:start;
  text-decoration:none;
  transition:transform .5s cubic-bezier(.22,1,.36,1);
}
.brandmark:hover{transform:translateY(-1px)}

.brandmark .logo{
  width:clamp(50px,6.6vw,78px);
  height:auto;
  overflow:visible;
  transition:filter .5s cubic-bezier(.22,1,.36,1);
}
.brandmark:hover .logo{filter:brightness(1.18) saturate(1.12)}

/* SVG stroke styling for the inline logo */
.logo .lk{
  fill:none;
  stroke:#eef0f5;
  stroke-linecap:butt;
  stroke-linejoin:miter;
}
.logo .lk--frame{
  filter:
    drop-shadow(-1px 0 5px rgba(255,43,214,.50))
    drop-shadow( 1px 0 5px rgba(0,229,255,.50))
    drop-shadow(0 0 16px rgba(255,255,255,.28));
}
.logo .lk__ring{stroke-width:2.6}
.logo .lk__dot{fill:#eef0f5;stroke:none}
.logo .lk--leaf{
  stroke-linejoin:round;
  stroke-width:2.1;
  filter:
    drop-shadow(-1px 0 5px rgba(255,43,214,.42))
    drop-shadow( 1px 0 5px rgba(0,229,255,.42))
    drop-shadow(0 0 14px rgba(255,255,255,.24));
}
.logo .lk--l{
  stroke:#ffd0f4;
  stroke-width:9;
  filter:
    drop-shadow(0 0 1.5px #fff)
    drop-shadow(0 0 7px  rgba(255,43,214,.95))
    drop-shadow(0 0 20px rgba(255,43,214,.70))
    drop-shadow(0 0 48px rgba(255,43,214,.42));
  animation:neonFlicker 9s infinite;
}
.logo .lk--a{
  stroke:#c4f6ff;
  stroke-width:8;
  filter:
    drop-shadow(0 0 1.5px #fff)
    drop-shadow(0 0 7px  rgba(0,229,255,.95))
    drop-shadow(0 0 20px rgba(0,229,255,.70))
    drop-shadow(0 0 48px rgba(0,229,255,.42));
  animation:neonFlicker 9s infinite 1.4s;
}
.logo .lk--dash{
  stroke:#eef0f5;
  stroke-width:9;
  filter:
    drop-shadow(0 0 2px #fff)
    drop-shadow(0 0 9px rgba(255,255,255,.60))
    drop-shadow(0 0 22px rgba(255,255,255,.28));
}
@keyframes neonFlicker{
  0%,19%,21%,23%,54%,56%,100%{opacity:1}
  20%,22%,55%{opacity:.72}
}
.logo .lk-t{
  font-family:'Jost', ui-sans-serif, system-ui, sans-serif;
  font-size:16px;
  letter-spacing:.32em;
  text-transform:uppercase;
}
.logo .lk-t1{
  font-weight:700;
  fill:#ffffff;
  filter:
    drop-shadow(0 0 1.5px #fff)
    drop-shadow(0 0 7px rgba(255,43,214,.90))
    drop-shadow(0 0 20px rgba(255,43,214,.60));
}
.logo .lk-t2{
  font-weight:300;
  fill:#eaf6ff;
  filter:
    drop-shadow(0 0 1.5px #fff)
    drop-shadow(0 0 8px rgba(0,229,255,.90))
    drop-shadow(0 0 22px rgba(0,229,255,.55));
}

/* ---------- NAV LINKS ---------- */
.nav{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(.9rem,2vw,2rem);
  justify-self:center;
}
.nav__link{
  position:relative;
  display:inline-block;
  font-family:inherit;
  font-size:clamp(.6rem,.78vw,.7rem);
  font-weight:400;
  letter-spacing:.24em;
  text-transform:uppercase;
  white-space:nowrap;
  padding:.45rem 0;
  background:transparent;
  border:0;
  color:#7c7c88;
  text-shadow:none;
  transition:color .45s cubic-bezier(.22,1,.36,1),
             text-shadow .45s cubic-bezier(.22,1,.36,1);
}
.nav__link:hover{
  color:rgba(255,255,255,.88);
  text-shadow:0 0 10px rgba(255,43,214,.35);
}
.nav__link:focus-visible{
  outline:1px solid #ff2bd6;
  outline-offset:5px;
}
.nav__link.is-active{
  color:#fff;
  animation:neonFlickerText 5.5s infinite;
  text-shadow:
    0 0 2px   #fff,
    0 0 8px   rgba(255,255,255,.9),
    0 0 20px  #ff2bd6,
    0 0 42px  #ff2bd6,
    0 0 72px  rgba(255,43,214,.55);
}
.nav__link.is-active::after{
  content:'';
  position:absolute;
  left:0;right:0;bottom:-3px;
  height:1px;
  background:#ff2bd6;
  box-shadow:0 0 8px #ff2bd6, 0 0 18px rgba(255,43,214,.65);
}
@keyframes neonFlickerText{
  0%,18%,22%,25%,53%,57%,100%{opacity:1}
  20%,24%,55%{opacity:.72}
}

/* ---------- LANGUAGE DROPDOWN ---------- */
.lang-dd{
  position:relative;
  justify-self:end;
}
.lang-trigger{
  display:flex;
  align-items:center;
  gap:.55rem;
  padding:.52rem .8rem .52rem .7rem;
  border:1px solid #ff2bd6;
  background:rgba(255,43,214,.05);
  color:#fff;
  font-family:inherit;
  font-size:clamp(.58rem,.72vw,.66rem);
  font-weight:500;
  letter-spacing:.2em;
  text-transform:uppercase;
  line-height:1;
  animation:neonFlickerText 6.5s infinite;
  text-shadow:
    0 0 2px #fff,
    0 0 8px rgba(255,255,255,.85),
    0 0 16px #ff2bd6;
  box-shadow:
    0 0 12px rgba(255,43,214,.5),
    inset 0 0 12px rgba(255,43,214,.12);
  transition:box-shadow .4s cubic-bezier(.22,1,.36,1),
             background .4s cubic-bezier(.22,1,.36,1);
}
.lang-trigger:hover{
  background:rgba(255,43,214,.1);
  box-shadow:
    0 0 18px rgba(255,43,214,.75),
    inset 0 0 16px rgba(255,43,214,.2);
}
.lang-trigger:focus-visible{
  outline:1px solid #ff2bd6;
  outline-offset:3px;
}
.lang-trigger__flag{
  font-size:1.05em;
  line-height:1;
  filter:drop-shadow(0 0 6px rgba(255,43,214,.6));
}
.lang-trigger__code{letter-spacing:.2em}
.lang-chevron{
  width:10px;height:10px;
  margin-left:.15rem;
  transition:transform .35s cubic-bezier(.22,1,.36,1);
  stroke:currentColor;
  fill:none;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.lang-dd.is-open .lang-chevron{transform:rotate(180deg)}

.lang-menu{
  position:absolute;
  top:calc(100% + .55rem);
  right:0;
  min-width:11.5rem;
  padding:.35rem;
  background:rgba(8,8,12,.94);
  border:1px solid rgba(255,43,214,.35);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:
    0 0 24px rgba(255,43,214,.3),
    inset 0 0 22px rgba(255,43,214,.05);
  opacity:0;
  visibility:hidden;
  transform:translateY(-8px) scale(.97);
  transform-origin:top right;
  transition:opacity .3s cubic-bezier(.22,1,.36,1),
             transform .3s cubic-bezier(.22,1,.36,1),
             visibility 0s linear .3s;
  z-index:70;
}
.lang-dd.is-open .lang-menu{
  opacity:1;
  visibility:visible;
  transform:translateY(0) scale(1);
  transition-delay:0s,0s,0s;
}
.lang-option{
  display:flex;
  align-items:center;
  gap:.7rem;
  padding:.6rem .7rem;
  cursor:pointer;
  color:#7c7c88;
  font-size:.68rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  transition:color .3s cubic-bezier(.22,1,.36,1),
             background .3s cubic-bezier(.22,1,.36,1),
             text-shadow .3s cubic-bezier(.22,1,.36,1);
}
.lang-option:hover{
  color:#fff;
  background:rgba(255,43,214,.08);
  text-shadow:0 0 10px rgba(255,43,214,.65);
}
.lang-option__flag{
  font-size:1.1rem;
  line-height:1;
  flex-shrink:0;
}
.lang-option__name{flex:1;letter-spacing:.14em}
.lang-option__check{
  font-size:.85rem;
  color:#ff2bd6;
  opacity:0;
  text-shadow:0 0 10px #ff2bd6;
  transition:opacity .3s cubic-bezier(.22,1,.36,1);
}
.lang-option.is-selected{color:#fff;text-shadow:0 0 8px rgba(255,43,214,.5)}
.lang-option.is-selected .lang-option__check{opacity:1}
/* Remove any border/outline from the logo lockup */
.brandmark,
.brandmark:hover,
.brandmark:focus,
.brandmark:focus-visible,
.brandmark:active{
  outline:none !important;
  border:none !important;
  box-shadow:none !important;
  background:transparent !important;
}

.brandmark .logo,
.brandmark svg,
.brandmark img{
  border:none !important;
  outline:none !important;
  box-shadow:none !important;
  background:transparent !important;
}