/* ============================================================
   PCRU — หน้าแรกสำหรับเลือกบอร์ดการประชุม
   ธีมสถาบัน: navy เข้ม + สีประจำบอร์ด (ทอง / ฟ้า / เขียวหยก)
   ============================================================ */

:root{
  --bg:       #050912;
  --ink:      #eaf0fb;
  --ink-dim:  #9aa9c6;
  --ink-mute: #5f6d8c;
  --gold:     #e8b866;
  --gold-lt:  #ffd79a;
  --steel:    #7ea8e0;
  --line:     rgba(255,255,255,.085);
  --ease:     cubic-bezier(.22,1,.36,1);

  --f-th: 'Anuphan','Noto Sans Thai','Leelawadee UI',system-ui,sans-serif;
  --f-en: 'Bai Jamjuree','Anuphan',system-ui,sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }

body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--f-th); font-size:16px; line-height:1.7;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
a{ color:inherit; text-decoration:none; }

::selection{ background:var(--gold); color:#161006; }
::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background:#060b16; }
::-webkit-scrollbar-thumb{ background:#1c2a45; border-radius:10px; }


/* ════════════════ PRELOADER ════════════════ */
.preloader{
  position:fixed; inset:0; z-index:9999; background:var(--bg);
  display:grid; place-items:center;
  transition:opacity .7s var(--ease), visibility .7s;
}
.preloader.is-out{ opacity:0; visibility:hidden; }
.preloader__inner{ text-align:center; width:min(320px,74vw); }
.preloader__mark{
  font-family:var(--f-en); font-weight:700; font-size:38px; letter-spacing:.42em;
  padding-left:.42em; color:transparent;
  background:linear-gradient(100deg,var(--gold-lt),var(--gold),var(--steel));
  -webkit-background-clip:text; background-clip:text;
}
.preloader__sub{ margin:10px 0 26px; font-size:13px; color:var(--ink-mute); }
.preloader__bar{ height:2px; background:rgba(255,255,255,.1); border-radius:2px; overflow:hidden; }
.preloader__bar span{
  display:block; height:100%; transform:scaleX(0); transform-origin:0 50%;
  background:linear-gradient(90deg,var(--gold),var(--steel));
  transition:transform .35s var(--ease);
}
.preloader__pct{
  margin-top:14px; font-family:var(--f-en); font-size:12px;
  letter-spacing:.3em; color:var(--ink-mute);
}

.cursor-glow{
  position:fixed; top:0; left:0; z-index:2; pointer-events:none;
  width:460px; height:460px; border-radius:50%;
  background:radial-gradient(circle, rgba(126,168,224,.11), transparent 62%);
  mix-blend-mode:screen;
}


/* ════════════════ ฉากพื้นหลัง ════════════════ */
.scene{ position:fixed; inset:0; z-index:0; overflow:hidden; }
.scene__canvas,.scene__net,.scene__video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block;
}
.scene__net{ z-index:1; }
.scene__vignette{
  position:absolute; inset:0; z-index:2;
  background:
    radial-gradient(118% 84% at 50% 40%, transparent 18%, rgba(5,9,18,.5) 68%, rgba(5,9,18,.92) 100%),
    linear-gradient(to bottom, rgba(5,9,18,.68) 0%, transparent 26%, transparent 58%, rgba(5,9,18,.88) 100%);
}
.scene__grain{
  position:absolute; inset:-120%; z-index:3; opacity:.045; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 7s steps(8) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)} 12.5%{transform:translate(-3%,-4%)} 25%{transform:translate(4%,-2%)}
  37.5%{transform:translate(-2%,4%)} 50%{transform:translate(3%,3%)} 62.5%{transform:translate(-4%,1%)}
  75%{transform:translate(2%,-3%)} 87.5%{transform:translate(-1%,2%)} 100%{transform:translate(0,0)}
}


/* ════════════════ โครงหน้าจอ ════════════════ */
.stage{
  position:relative; z-index:3;
  min-height:100svh;
  display:grid; grid-template-rows:auto auto 1fr auto;
}


/* ── แถบบน ── */
.topbar{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:22px 34px;
}
.topbar__brand{ display:flex; align-items:center; gap:14px; min-width:0; }
.topbar__mark{
  font-family:var(--f-en); font-weight:700; font-size:16px; letter-spacing:.24em;
  padding:6px 12px; border-radius:6px; flex:none;
  color:var(--gold-lt); border:1px solid rgba(232,184,102,.3); background:rgba(232,184,102,.07);
}
.topbar__txt{ font-size:12.5px; line-height:1.55; color:var(--ink-mute); }
.topbar__txt b{ color:var(--ink-dim); font-weight:600; }
.topbar__tel{
  font-size:13.5px; color:var(--ink-dim); white-space:nowrap;
  padding:8px 16px; border:1px solid var(--line); border-radius:100px;
  transition:color .35s, border-color .35s, background .35s;
}
.topbar__tel span{ color:var(--ink-mute); letter-spacing:.1em; font-size:11.5px; }
.topbar__tel:hover{ color:var(--gold-lt); border-color:rgba(232,184,102,.4); background:rgba(232,184,102,.07); }


/* ── ข้อความนำ ── */
.intro{ text-align:center; padding:clamp(10px,3vh,34px) 24px clamp(18px,4vh,40px); }
.intro__eyebrow{
  display:inline-flex; align-items:center; gap:13px;
  font-family:var(--f-en); font-size:11px; letter-spacing:.42em;
  color:var(--ink-mute); margin-bottom:18px;
}
.intro__eyebrow span{ width:38px; height:1px; background:linear-gradient(90deg,transparent,var(--gold)); }
.intro__eyebrow span:last-child{ background:linear-gradient(90deg,var(--gold),transparent); }

.intro__title{
  font-family:var(--f-en); font-weight:700; margin:0;
  font-size:clamp(38px,8vw,104px); line-height:.96; letter-spacing:-.02em;
}
.intro__title .line{ display:block; overflow:hidden; padding-block:.05em; }
.intro__title .word{ display:inline-block; }
.intro__title .char{ display:inline-block; }
.js .intro__title .char{
  opacity:0; transform:translateY(105%) rotate(5deg);
  transition:opacity .9s var(--ease), transform 1.05s var(--ease);
}
body.is-ready .intro__title .char{ opacity:1; transform:none; }
.intro__title .line--alt .word{
  color:transparent;
  background:linear-gradient(100deg,var(--gold-lt) 0%,var(--gold) 46%,var(--steel) 100%);
  -webkit-background-clip:text; background-clip:text;
}
.intro__lead{ margin:18px 0 0; font-size:15px; color:var(--ink-dim); letter-spacing:.03em; }


/* ════════════════ แผงเลือกบอร์ด ════════════════ */
.picker{
  display:flex; align-items:stretch; gap:14px;
  padding:0 26px clamp(14px,2.4vh,26px);
  min-height:0;
}

.panel{
  position:relative; flex:1 1 0; min-width:0;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:30px 28px 28px;
  border:1px solid var(--line); border-radius:16px;
  overflow:hidden; isolation:isolate;
  background:rgba(255,255,255,.022);
  transition:flex-grow .65s var(--ease), border-color .5s var(--ease),
             box-shadow .55s var(--ease), background .5s var(--ease),
             transform .5s var(--ease);
}

/* ชั้นสีประจำบอร์ด — สว่างขึ้นเมื่อชี้ */
.panel__media{
  position:absolute; inset:0; z-index:-1; opacity:.34;
  background:
    radial-gradient(120% 78% at 50% 118%, rgba(var(--c),.55), transparent 66%),
    linear-gradient(to top, rgba(var(--c),.14), transparent 58%);
  transition:opacity .6s var(--ease), transform .8s var(--ease);
}
.panel__idx{
  position:absolute; top:-10px; right:12px; z-index:-1; pointer-events:none;
  font-family:var(--f-en); font-weight:700; font-size:clamp(80px,9vw,132px); line-height:1;
  color:rgba(255,255,255,.045);
  transition:color .6s var(--ease), transform .7s var(--ease);
}
/* เส้นเรืองแสงขอบบน */
.panel__edge{
  position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, transparent, rgb(var(--c)), transparent);
  transform:scaleX(0); transition:transform .6s var(--ease);
}

.panel__inner{ display:block; position:relative; }
.panel__no{
  display:block; font-family:var(--f-en); font-size:11px; letter-spacing:.34em;
  color:rgb(var(--c)); margin-bottom:14px;
}
.panel__title{
  display:block; font-size:clamp(19px,1.65vw,23px); font-weight:600; line-height:1.42;
}
.panel__small{
  display:block; font-size:14.5px; color:var(--ink-dim); margin-top:4px;
}
.panel__desc{
  display:block; font-size:13.5px; line-height:1.8; color:var(--ink-dim);
  margin-top:14px;
  /* บนจอใหญ่ ซ่อนไว้ก่อน แล้วค่อยคลี่ออกตอนชี้ */
  max-height:0; opacity:0; overflow:hidden;
  transition:max-height .6s var(--ease), opacity .5s var(--ease), margin-top .6s var(--ease);
}
.panel__cta{
  display:inline-flex; align-items:center; gap:10px; margin-top:20px;
  font-size:14px; color:var(--ink);
  padding-bottom:6px; border-bottom:1px solid var(--line);
  transition:color .4s, border-color .4s, gap .4s var(--ease);
}
.panel__cta i{ font-style:normal; color:rgb(var(--c)); transition:transform .4s var(--ease); }

/* ── สถานะชี้/โฟกัส ── */
.panel:hover,.panel:focus-visible{
  flex-grow:1.55;
  border-color:rgba(var(--c),.5);
  background:rgba(var(--c),.055);
  box-shadow:0 30px 70px -34px rgba(var(--c),.75);
  outline:none;
}
.panel:hover .panel__media,.panel:focus-visible .panel__media{ opacity:.72; transform:scale(1.04); }
.panel:hover .panel__idx,.panel:focus-visible .panel__idx{ color:rgba(var(--c),.2); transform:translateY(4px); }
.panel:hover .panel__edge,.panel:focus-visible .panel__edge{ transform:scaleX(1); }
.panel:hover .panel__desc,.panel:focus-visible .panel__desc{ max-height:190px; opacity:1; }
.panel:hover .panel__cta,.panel:focus-visible .panel__cta{
  color:rgb(var(--c)); border-color:rgba(var(--c),.6); gap:16px;
}
.panel:focus-visible{ box-shadow:0 0 0 2px rgba(var(--c),.7), 0 30px 70px -34px rgba(var(--c),.75); }

/* แผงที่ไม่ได้ชี้จะถอยหลังไปเล็กน้อย */
.picker.is-hot .panel:not(:hover):not(:focus-visible){ opacity:.5; }
.panel{ transition-property:flex-grow,border-color,box-shadow,background,transform,opacity; }


/* ── แถบล่าง ── */
.botbar{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; flex-wrap:wrap;
  padding:16px 34px 22px; border-top:1px solid var(--line); margin:0 26px;
}
.botbar p{ margin:0; font-size:12px; color:var(--ink-mute); }


/* ════════════════ จอเล็ก ════════════════ */
@media (max-width:1000px){
  .stage{ min-height:auto; }
  .picker{ flex-direction:column; padding-inline:20px; }
  .panel{ flex:none; padding:26px 24px 24px; }
  /* จอสัมผัสไม่มี hover — แสดงคำอธิบายเสมอ */
  .panel__desc{ max-height:none; opacity:1; overflow:visible; }
  .panel__edge{ transform:scaleX(1); }
  .picker.is-hot .panel:not(:hover):not(:focus-visible){ opacity:1; }
  .topbar{ padding:18px 20px; }
  .botbar{ margin-inline:20px; padding:16px 0 22px; }
}
@media (max-width:600px){
  .topbar__txt{ display:none; }
  .intro__lead{ font-size:14px; }
  .botbar{ justify-content:center; text-align:center; }
}
/* จอเตี้ย — ลดขนาดหัวเรื่องไม่ให้ล้น */
@media (max-height:760px) and (min-width:1001px){
  .intro__title{ font-size:clamp(32px,5.4vw,64px); }
  .intro{ padding-top:6px; padding-bottom:16px; }
  .panel{ padding:24px 24px 22px; }
}


/* ════════════════ REVEAL ════════════════ */
.js .reveal{
  opacity:0; transform:translateY(26px);
  transition:opacity .9s var(--ease), transform 1s var(--ease);
}
.js .reveal.is-in{ opacity:1; transform:none; }

.js .panel{ opacity:0; transform:translateY(34px); }
.js .panel.is-in{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  .js .reveal, .js .panel, .js .intro__title .char{
    opacity:1 !important; transform:none !important; transition:none !important;
  }
  .scene__grain, .preloader__mark{ animation:none !important; }
}