/* req2/req52 (2026-10-06)：首页/准备页套 PJ116 设计库「主题 01 办公蓝 + 背景 01 办公室天际线」。
   电脑左右两栏、大标题、入场动画、下方"开会需要的，都在这里"介绍区。只用 CSS，不改脚本。
   回滚=删掉 index.html 里的 <link href="/home.css"> 和 <div id="intro"> 整块。 */
#home.page, #pre.page, #wait.page, #end.page, #intro {
  --panel: #fff; --line: #d3deec; --fg: #14233a; --sub: #4a5d78;
  color: #14233a;
  padding-left: max(16px, calc((100vw - 1180px) / 2)); padding-right: max(16px, calc((100vw - 1180px) / 2)); }
#home.page, #pre.page, #wait.page, #end.page { max-width: none; margin: 0; padding-top: clamp(20px, 6vh, 72px); padding-bottom: clamp(20px, 5vh, 56px);
  background: #f4f7fb url(/bg01.svg) center/cover fixed; }
body:has(#home:not(.hidden)), body:has(#pre:not(.hidden)), body:has(#wait:not(.hidden)), body:has(#end:not(.hidden)) { background: #f4f7fb; }
#home a, #pre a, #intro a { color: #1f6feb; }
#home input, #pre input, #pre select { background: #fff; color: #14233a; border-color: #c4d2e6; min-height: 44px; font-size: 16px; }
#home button, #pre button, #wait button, #end button { color: #14233a; min-height: 44px; border-radius: 999px; padding: 0 20px; background: #fff; border-color: #c4d2e6; transition: transform .15s, filter .15s; }
#home button.pri, #pre button.pri, #end button.pri { color: #fff; background: #2f80ed; border-color: #2f80ed; box-shadow: 0 6px 18px rgba(47,128,237,.35); }
#home button:hover, #pre button:hover { transform: translateY(-1px); filter: brightness(1.05); }
#pre button.on { background: #e3eeff; border-color: #2f80ed; }
#pre button.off { background: #ffe5e5; border-color: #e5484d; }
#home .warn, #pre .warn, #wait .warn { color: #b45309; }

#home { display: block; }
#home::after { content: ""; display: block; clear: both; }
#home > h1, #home > .sub:first-of-type, #home > .card.sub { float: left; clear: left; width: calc(50% - 32px); }
#home > .card { float: right; clear: right; width: calc(50% - 32px); }
#home > h1 { position: relative; font-size: clamp(2.8rem, 6.4vw, 5.4rem); line-height: 1.05; letter-spacing: -.03em; margin: 0 0 .25em;
  background: linear-gradient(100deg, #14233a 30%, #1f6feb 50%, #14233a 70%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: hshine 6s linear infinite; }
#home > h1::after { content: "📹"; position: absolute; right: 6%; top: -.2em; font-size: .6em; animation: hfloat 6s ease-in-out infinite; -webkit-text-fill-color: initial; }
#home > .sub:first-of-type { font-size: 1.15rem; line-height: 1.7; max-width: 30em; }
#home > .card { margin: 0 0 16px; padding: 22px; border-radius: 18px; background: rgba(255,255,255,.92); box-shadow: 0 10px 34px rgba(20,35,58,.12); animation: hrise .6s cubic-bezier(.2,.7,.2,1) both; }
#home > .card:nth-of-type(1) { animation-delay: .05s; } #home > .card:nth-of-type(2) { animation-delay: .15s; } #home > .card:nth-of-type(3) { animation-delay: .25s; } #home > .card:nth-of-type(4) { animation-delay: .35s; }
#home > .card.sub { background: rgba(255,244,222,.92); border-color: #f1d9a8; font-size: .95rem; }

/* 介绍区：只在首页显示（#home 隐藏时一起隐藏） */
#intro { display: none; padding-top: clamp(28px, 5vw, 64px); padding-bottom: clamp(36px, 6vw, 80px); background: #eaf1fb url(/bg01.svg) center bottom/cover fixed; border-top: 1px solid #d3deec; }
#home:not(.hidden) + #intro { display: block; }
#intro h2 { font-size: clamp(1.6rem, 3.2vw, 2.4rem); margin: 0 0 .3em; color: #14233a; }
#intro > .sub { font-size: 1.05rem; margin: 0 0 1.4em; }
#intro .ig { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
#intro .ic { background: #fff; border: 1px solid #d3deec; border-radius: 16px; padding: 22px; box-shadow: 0 8px 26px rgba(20,35,58,.08); transition: transform .25s, box-shadow .25s; min-width: 0; }
#intro .ic:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(20,35,58,.16); }
#intro .ic .ico { display: none; }
#intro .ic h3 { margin: 0 0 .4em; font-size: 1.1rem; color: #14233a; }
#intro .ic p { margin: 0; color: #4a5d78; line-height: 1.6; }

#pre { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); column-gap: clamp(24px, 4vw, 56px); align-items: start; }
#pre > h1 { grid-column: 1 / -1; font-size: clamp(2rem, 4.5vw, 3.4rem); letter-spacing: -.02em; }
#pre > .card { grid-column: 1; margin: 0; animation: hrise .6s both; background: rgba(255,255,255,.92); }
#pre > #btnEnter { grid-column: 2; grid-row: 2; align-self: start; min-height: 56px; font-size: 1.1rem; }
#pre > #roomInfo { grid-column: 2; grid-row: 3; }
#wait > .card, #end > .card { background: rgba(255,255,255,.92); }

@keyframes hrise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes hshine { to { background-position: -220% 0; } }
@keyframes hfloat { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-12px) rotate(6deg); } }
@media (max-width: 860px) {
  #pre { grid-template-columns: minmax(0, 1fr); }
  #home > h1, #home > .sub:first-of-type, #home > .card, #home > .card.sub { float: none; width: auto; }
  #pre > .card, #pre > #btnEnter, #pre > #roomInfo { grid-column: 1; grid-row: auto; }
}
@media (prefers-reduced-motion: reduce) { #home > h1, #home > h1::after, #home > .card, #pre > .card { animation: none; } #home > h1 { color: #14233a; background: none; } }