/* ==========================================================================
   2026 AI人才培育論壇 — style.css
   ========================================================================== */

:root{
  --navy-950:#050b2e;
  --navy-900:#0a1440;
  --navy-800:#0d1a4a;
  --purple-600:#6a30ff;
  --purple-500:#9600fa;
  --magenta-500:#c2007e;
  --cyan-400:#01fffe;
  --cyan-300:#01fffe;
  --tag-purple:#8b12f4;
  --tag-blue:#2f6fff;
  --gray-100:#eef0f5;
  --gray-300:#c9cdd8;
  --ink-900:#12162c;
  --white:#ffffff;
  --container:1200px;
  --font-cjk:'Roboto','Noto Sans TC', sans-serif;
  --font-display:'Archivo Black','Roboto','Noto Sans TC', sans-serif;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-cjk);
  color:var(--ink-900);
  background:#000;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,p{ margin:0; }
button{ font-family:inherit; cursor:pointer; background:none; border:0; padding:0; }
.container{ width:100%; max-width:var(--container); margin:0 auto; padding:0 24px; }

.section-title{
  text-align:center;
  font-size:42px;
  font-style: italic;
    letter-spacing: 2px;
  font-weight:900;
  color:var(--white);
  position:relative;
  padding-bottom:22px;
  margin-bottom:40px;
  line-height:1.35;
}
.section-title::after{
  content:'';
  position:absolute;
  left:50%; bottom:0;
  transform:translateX(-50%);
  width:120px; height:3px;
  background:linear-gradient(90deg,var(--purple-600),var(--cyan-400));
}
.section-title.dark{ color:var(--ink-900); }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header{
  position:absolute; top:0; left:0; right:0; z-index:200;
  background:transparent;
  transition:background .3s;
}
.site-header.fixed{ position:fixed; }
.site-header.scrolled{ background:rgba(5,8,35,.88); }
.header-inner{
  max-width:1500px; margin:0 auto;
  display:flex; align-items:center; justify-content:flex-end;
  padding:20px 40px;
}
.main-nav ul{ display:flex; align-items:center; gap:30px; }
.main-nav a{ font-size:20px; color:var(--white); white-space:nowrap; transition:color .25s; font-weight:500; }
.main-nav a:hover{ color:var(--cyan-300); }
.main-nav a.reg-link{
  padding:9px 22px; border-radius:999px;
  background:linear-gradient(90deg,var(--purple-600),var(--magenta-500));
}

.nav-toggle{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:36px; height:32px; background:none; border:0; padding:0;
}
.nav-toggle span{ display:block; width:100%; height:2px; background:#fff; transition:all .3s; }
.nav-toggle.active span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle.active span:nth-child(2){ opacity:0; }
.nav-toggle.active span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ==========================================================================
   Scroll reveal
   ========================================================================== */
.reveal{
  opacity:0;
  transform:translateY(32px);
  transition:opacity .7s cubic-bezier(.2,.65,.2,1), transform .7s cubic-bezier(.2,.65,.2,1);
  will-change:opacity, transform;
}
.reveal.in-view{ opacity:1; transform:translateY(0); }

.highlight-cards .highlight-card.reveal:nth-child(1){ transition-delay:.05s; }
.highlight-cards .highlight-card.reveal:nth-child(2){ transition-delay:.15s; }
.highlight-cards .highlight-card.reveal:nth-child(3){ transition-delay:.25s; }
.speaker-item{ cursor: pointer}

/* 講者卡片本身改由 .speaker-grid（滑動軌道）統一觸發淡入，
   避免卡片被 .speaker-viewport 的 overflow:hidden 裁切、
   導致捲動時 IntersectionObserver 抓不到不在可視範圍內的卡片 */
.speaker-grid.reveal .speaker-item{
  opacity:0;
  transform:translateY(32px);
  transition:opacity .7s cubic-bezier(.2,.65,.2,1), transform .7s cubic-bezier(.2,.65,.2,1);
}
.speaker-grid.reveal.in-view .speaker-item{ opacity:1; transform:translateY(0); }
.speaker-grid.reveal .speaker-item:nth-child(1){ transition-delay:.05s; }
.speaker-grid.reveal .speaker-item:nth-child(2){ transition-delay:.12s; }
.speaker-grid.reveal .speaker-item:nth-child(3){ transition-delay:.19s; }
.speaker-grid.reveal .speaker-item:nth-child(4){ transition-delay:.26s; }
.speaker-grid.reveal .speaker-item:nth-child(5){ transition-delay:.33s; }
@media (prefers-reduced-motion:reduce){
  .speaker-grid.reveal .speaker-item{ opacity:1; transform:none; transition:none; }
}

.traffic-info .info-block.reveal:nth-child(1){ transition-delay:.05s; }
.traffic-info .info-block.reveal:nth-child(2){ transition-delay:.13s; }
.traffic-info .info-block.reveal:nth-child(3){ transition-delay:.21s; }
.traffic-info .info-block.reveal:nth-child(4){ transition-delay:.29s; }

@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
  position:relative;
  padding:100px 0 60px;
  background:url(../images/bg_01.jpg) top center no-repeat, var(--gray-100); background-size: cover;
  display:flex; align-items:flex-end;align-items: flex-start;
  min-height:745px;
}
.hero-inner{ position:relative; z-index:2; width:100%; max-width:1300px; margin:0 auto; padding:0 24px; display: flex; justify-content: flex-end}
.hero-kv-title{ width:100%; max-width:900px; height:auto; }
.hero-kv-title.kv-desktop{ display:block; }
.hero-kv-title.kv-mobile{ display:none; }

/* ==========================================================================
   About
   ========================================================================== */
.about{
  padding:57px 0 50px;
  background:url(../images/bg_02.jpg) top center no-repeat, var(--gray-100); background-size: cover
}
.about-text{
  max-width:980px; margin:0 auto 20px; text-align:center;
  color:#000; font-size:20px; line-height:1.8;
}

/* ==========================================================================
   Highlights (icon cards)
   ========================================================================== */
.highlights{
  position:relative;
  padding:90px 0 91px;
  background:url(../images/bg_03.jpg) top center no-repeat, var(--navy-800); background-size: cover;
}
.reg-badge{
  position:absolute; top:-30px; right:6%; z-index:5;
  width:110px; height:110px;
  transition:transform .2s;
}
.reg-badge:hover{ transform:scale(1.06); }
.highlight-cards{
  margin-top:20px;
  display:grid; grid-template-columns:repeat(3,1fr); gap:30px;
  text-align:center;
}
.highlight-card img{ max-width:260px; margin:0 auto 18px; }
.highlight-card h3{
  color:var(--cyan-400); font-size:28px; font-weight:700; margin-bottom:12px;
}
.highlight-card h3 span{ font-size:16px; opacity:.85; margin:0 2px; }
.highlight-card p{ color:#fff; font-size:17px; line-height:1.8; }

/* ==========================================================================
   Speakers
   ========================================================================== */
.speakers{
  padding:116px 0 115px;
  background:url(../images/bg_04.jpg) top center no-repeat, var(--gray-100); background-size: cover;
}
.speaker-slider{ display:flex; align-items:center; gap:20px; }
.speaker-viewport{ overflow:hidden; flex:1; min-width:0; }
.speaker-grid{
  display:flex; gap:30px;
  transition:transform .45s cubic-bezier(.2,.65,.2,1);
}
.speaker-grid .speaker-item{ flex:0 0 auto; width:calc((100% - 90px) / 4); }

.slider-arrow{
  flex:0 0 auto;
  width:48px; height:48px; border-radius:50%;
  background:#fff; border:1px solid var(--gray-300); color:var(--ink-900);
  font-size:26px; line-height:1;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 14px rgba(0,0,0,.12);
  transition:opacity .2s, transform .2s;
}
.slider-arrow:hover{ transform:scale(1.08); }
.slider-arrow:disabled{ opacity:.35; cursor:default; pointer-events:none; }

.speaker-dots{ display:flex; justify-content:center; align-items:center; gap:10px; margin-top:30px; }
.speaker-dots button{
  width:10px; height:10px; border-radius:50%;
  background:var(--gray-300); padding:0; border:0; cursor:pointer;
  transition:background .25s, transform .25s;
}
.speaker-dots button:hover{ background:var(--purple-500); }
.speaker-dots button.active{
  width:26px; border-radius:6px;
  background:linear-gradient(90deg,var(--purple-600),var(--cyan-400));
}

.speaker-item{ text-align:center; }
.speaker-item img{
  width:180px; height:180px; object-fit:cover;
  margin:0 auto 16px;
}
.spk-name{ font-size:26px; font-weight:700; color:var(--ink-900); margin-bottom:4px; }
.spk-title{ font-size:18px; color:#000; margin-bottom:16px; }
.spk-btn{ margin:0 auto; transition:opacity .2s; }
.spk-btn:hover{ opacity:.8; }
.spk-btn img{ height:28px; width:auto; }

/* Modal */
.modal-overlay{
  position:fixed; inset:0; background:rgba(6,8,25,.72);
  display:none; align-items:center; justify-content:center;
  z-index:500; padding:20px;
}
.modal-overlay.open{ display:flex; }
.modal-box{
  background:#fff; border-radius:16px; max-width:640px; width:100%;
  max-height:86vh; overflow-y:auto; padding:36px; position:relative;
}
.modal-close{
  position:absolute; top:14px; right:18px; border:0; background:none;
  font-size:28px; line-height:1; color:#888; cursor:pointer;
}
.modal-top{ display:flex; align-items:center; gap:20px; margin-bottom:22px; }
.modal-top img{ width:110px; height:110px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.modal-name{ font-size:24px; font-weight:700; margin-bottom:6px; }
.modal-role{ color:#555; font-size:15px; }
.modal-bio{ font-size:15px; color:#3a3d4a; line-height:1.9; white-space:pre-line; }

/* ==========================================================================
   Agenda
   ========================================================================== */
.agenda{
  position:relative;
  padding:90px 0 60px;
  background:url(../images/bg_05.jpg) top center no-repeat, #01286d; background-size: cover;
}

.session-block{ margin-bottom:60px; }
.session-block:last-child{ margin-bottom:0; }
.session-badge{
  display:table; margin:0 auto 22px; padding:8px 26px;
  border:1px solid rgba(255,255,255,.5); border-radius:0px;
  color:#fff; font-size:16px; font-weight:700; letter-spacing:.03em;
}
.session-headline{
  text-align:center; color:#fff; font-size:24px; font-weight:700;
  line-height:1.8; margin-bottom:34px;
}

.agenda-list{ max-width:1100px; margin:0 auto; }
.agenda-item{
  display:flex; gap:26px; padding:14px 22px; border-bottom:1px solid rgba(255,255,255,.12);
  align-items:flex-start;
}
.agenda-item:last-child{ }
.agenda-time{ flex:0 0 130px; font-weight:700; color:#fff; font-size:22px; padding-top:2px; }
.agenda-session{ flex:1; min-width:0; }
.session-title{ font-weight:700; color:#fff; font-size:22px; line-height:1.6; }
.agenda-item.highlight .session-title{ font-weight:700; }
.tag{
  display:inline-block; color:#fff; font-size:18px; font-weight:700;
  padding:2px 10px; margin-right:10px;
  vertical-align:2px;
}
.agenda-list.s1 .tag{ background:var(--tag-purple); }
.agenda-list.s2 .tag{ background:var(--tag-blue); }
.session-speaker{ color:#fff; font-size:22px; margin-top:8px; }
.note-sub{ font-size:16px; color:#fff; font-weight:400; }
.panel-list{ margin-top:8px; display:flex; flex-direction:column; gap:4px; }
.panel-list p{ color:#fff; font-size:22px; }

.agenda-item.highlight{}
.agenda-list.s1 .agenda-item.highlight{ background:linear-gradient(90deg,#8f00ff,#5a00ff); }
.agenda-list.s2 .agenda-item.highlight{ background:linear-gradient(90deg,#3b7ffb,#2158ff); }
.agenda-item.highlight .agenda-time,
.agenda-item.highlight .session-title{ color:#fff; }

/* ==========================================================================
   Venue / Traffic
   ========================================================================== */
.venue{
  padding:80px 0 90px;
  background:url(../images/bg_06.jpg) top center no-repeat, var(--gray-100); background-size: cover;
}
.traffic-grid{ display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:start; }
.traffic-map{ border-radius:0; overflow:hidden; height:420px; background:#111; }
.traffic-map iframe{ width:100%; height:100%; }
.info-block{ margin-bottom:26px; }
.info-block:last-child{ margin-bottom:0; }
.info-head{ display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.info-head img{ width:24px; height:24px; }
.info-head b{ color:var(--purple-500); font-size:18px; }
.info-block p{ color:#000; font-size:17px; margin:0; padding-left:34px; line-height:1.85; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{
  background:url(../images/bg_07.jpg) top center / 100% auto no-repeat, #000;
  padding-top:60px;
  text-align:center;
}
.footer-logos{ padding:0 24px 30px; }
.footer-logos img{ max-width:1200px; width:100%; margin:0 auto; height:auto; }
.footer-contact{ padding:0 20px 40px; color:#ffffff; font-size:18px; line-height:2; }
.footer-disclaimer{ color:#ffffff; }

/* ==========================================================================
   Floating CTA buttons
   ========================================================================== */
.fix-btn{ position:fixed; z-index:150; }
.fix-btn.pc{ right:26px; bottom:30px; width:145px; }
.fix-btn.mb{ display:none; left:0; right:0; bottom:0; width:100%; }
.fix-btn img{ width:100%; }
.fix-btn.pc img{
  transform-origin:center;
  animation:fixBtnPulse 1.8s ease-in-out infinite;
}
@keyframes fixBtnPulse{
  0%, 100%{ transform:scale(1); }
  50%{ transform:scale(1.08); }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1080px){
  .highlight-cards{ grid-template-columns:1fr; max-width:420px; margin-left:auto; margin-right:auto; }
  .speaker-grid .speaker-item{ width:calc((100% - 30px) / 2); }
  .traffic-grid{ grid-template-columns:1fr; }
  .traffic-map{ height:320px; }
  .agenda-time{ flex:0 0 110px; font-size:16px; }
}

@media (max-width: 860px){
  .main-nav{
    position:fixed; top:0; right:0; height:100vh; width:78%; max-width:320px;
    background:var(--navy-900); padding:100px 30px 30px;
    transform:translateX(100%); transition:transform .35s; overflow-y:auto;
  }
  .main-nav.open{ transform:translateX(0); }
  .main-nav ul{ flex-direction:column; align-items:flex-start; gap:0; }
  .main-nav ul > li{ width:100%; border-bottom:1px solid rgba(255,255,255,.08); }
  .main-nav a{ display:block; padding:16px 0; font-size:16px; }
  .main-nav a.reg-link{ display:inline-block; margin-top:10px; }
  .nav-toggle{ display:flex; }
  .header-inner{ padding:16px 20px; }

  .hero{ padding:0; min-height:0; background:none; align-items:stretch; }
  .hero-kv-title.kv-desktop{ display:none; }
  .hero-kv-title.kv-mobile{ display:block; }
  .hero-inner{ padding:0; max-width:none; background: url(../images/mb-kvr.jpg); }

  .section-title{ font-size:36px; }
  .about-text{ font-size:18px; padding:0 4px; }

  .reg-badge{ width:80px; height:80px; top:-20px; right:16px; }
  .highlight-card img{ max-width:200px; }

  .speaker-slider{ gap:10px; }
  .speaker-grid{ gap:20px; }
  .speaker-grid .speaker-item{ width:100%; }
  .speaker-item img{ width:160px; height:160px; }
  .speaker-item img.btnm{ height:26px; width: auto}
  .spk-name{ font-size:20px; }
  .slider-arrow{ width:38px; height:38px; font-size:20px; }

  .agenda-item{ padding:16px; gap:10px; flex-direction:column; align-items:flex-start; }
  .agenda-time{ flex:none; }
  .session-title{ font-size:16px; }
  .tag{ display:block; width:max-content; margin-bottom:6px; }

  .traffic-map{ height:280px; }

  .fix-btn.pc{ display:none; }
  .fix-btn.mb{ display:block; }
  body{ padding-bottom:60px; }
}

@media (max-width: 480px){
  .speaker-grid{ gap:14px; }
  .speaker-grid .speaker-item{ width:100%; }
}