/* ═══════════════════════════════════════════
   靜宜大學 晶片設計學士學位學程 — 形象頁
   品牌色：藍 #0050A0 / 橘 #E05010 / 金 #F0A000
   ═══════════════════════════════════════════ */

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden}
body{
	font-family:"Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif;
	color:#EAF0FA;
	background:radial-gradient(130% 100% at 70% 10%,#16305e 0%,#0A1326 55%),#0A1326;
}

.stage{
	position:relative;width:100%;height:100vh;
	display:flex;align-items:center;justify-content:center;
	padding:112px 32px 48px;overflow:hidden;
}

/* ── 背景電路 ── */
.bgcircuit{position:absolute;inset:0;z-index:1;opacity:.5;pointer-events:none}
.bgline path{
	fill:none;stroke:#F0A000;stroke-width:1;opacity:.16;
	stroke-dasharray:400;stroke-dashoffset:400;
	animation:drawbg 3s ease-out forwards;
}
.bgline path:nth-child(2){animation-delay:.2s}
.bgline path:nth-child(3){animation-delay:.4s}
.bgline path:nth-child(4){animation-delay:.6s}
.bgline path:nth-child(5){animation-delay:.3s}
.bgline path:nth-child(6){animation-delay:.5s}
@keyframes drawbg{to{stroke-dashoffset:0}}

.bgnode circle{
	fill:#F0A000;opacity:0;
	animation:nodepop .5s ease-out forwards,nodepulse 3s ease-in-out infinite;
}
.bgnode circle:nth-child(1){animation-delay:1.2s,2s}
.bgnode circle:nth-child(2){animation-delay:1.35s,2.3s}
.bgnode circle:nth-child(3){animation-delay:1.5s,2.6s}
.bgnode circle:nth-child(4){animation-delay:1.65s,2.1s}
.bgnode circle:nth-child(5){animation-delay:1.8s,2.9s}
.bgnode circle:nth-child(6){animation-delay:1.95s,2.4s}
.bgnode circle:nth-child(7){animation-delay:2.1s,3.1s}
.bgnode circle:nth-child(8){animation-delay:2.25s,2.2s}
.bgnode circle:nth-child(9){animation-delay:2.4s,2.7s}
.bgnode circle:nth-child(10){animation-delay:2.55s,3.3s}
.bgnode circle:nth-child(11){animation-delay:2.7s,2.5s}
@keyframes nodepop{to{opacity:.5}}
@keyframes nodepulse{0%,100%{opacity:.25}50%{opacity:.9}}

/* ── 移動訊號點 ── */
.sig{
	position:absolute;z-index:2;pointer-events:none;width:6px;height:6px;border-radius:50%;
	background:#F0A000;box-shadow:0 0 12px 3px rgba(240,160,0,.8);
	animation:flyX linear infinite;
}
.s1{top:15.5%;animation-duration:6s;animation-delay:0s}
.s2{top:51%;background:#E05010;box-shadow:0 0 12px 3px rgba(224,80,16,.8);animation-duration:8s;animation-delay:1.2s}
.s3{top:77.7%;animation-duration:7s;animation-delay:2.4s}
.s4{top:93.3%;background:#3E8BE0;box-shadow:0 0 12px 3px rgba(62,139,224,.7);animation-duration:9s;animation-delay:.6s}
.s5{top:35.5%;background:#E05010;box-shadow:0 0 12px 3px rgba(224,80,16,.7);animation-duration:7.5s;animation-delay:3s}
@keyframes flyX{from{left:-2%}to{left:102%}}

/* ── 漂浮粒子 ── */
.dot{
	position:absolute;z-index:1;pointer-events:none;border-radius:50%;background:#F0A000;
	opacity:.25;animation:float ease-in-out infinite;
}
.d1{width:5px;height:5px;left:12%;top:22%;animation-duration:7s}
.d2{width:3px;height:3px;left:28%;top:68%;animation-duration:9s;animation-delay:1s;background:#3E8BE0}
.d3{width:6px;height:6px;left:62%;top:18%;animation-duration:8s;animation-delay:2s;background:#E05010}
.d4{width:4px;height:4px;left:78%;top:75%;animation-duration:10s;animation-delay:.5s}
.d5{width:5px;height:5px;left:45%;top:88%;animation-duration:6.5s;animation-delay:1.5s;background:#3E8BE0}
.d6{width:3px;height:3px;left:88%;top:42%;animation-duration:11s;animation-delay:2.5s;background:#E05010}
@keyframes float{
	0%,100%{transform:translateY(0) translateX(0);opacity:.2}
	50%{transform:translateY(-30px) translateX(12px);opacity:.6}
}

/* ── 內容 ── */
.content{
	position:relative;z-index:10;width:100%;max-width:1140px;
	display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;
}

/* ── 左：文案 ── */
.tagline{display:flex;align-items:center;gap:12px;opacity:0;animation:rise .8s cubic-bezier(.2,.7,.2,1) .3s forwards}
.tag-line{width:0;height:1px;background:#F0A000;animation:linegrow .8s ease-out .5s forwards}
@keyframes linegrow{to{width:36px}}
.tag-txt{font-family:monospace;font-size:.78rem;letter-spacing:.24em;text-transform:uppercase;color:#F0A000}

h1{margin-top:22px;font-weight:900;line-height:1.08;font-size:clamp(2.3rem,4.6vw,3.6rem)}
h1 span{display:block;overflow:hidden}
h1 .l1,h1 .l2{opacity:0;transform:translateY(30px);animation:riseUp .9s cubic-bezier(.2,.8,.2,1) forwards}
h1 .l1{animation-delay:.55s}
h1 .l2{animation-delay:.75s}
h1 em{font-style:normal;color:#F0A000;position:relative}
.cursor{
	display:inline-block;width:4px;height:.85em;background:#E05010;
	margin-left:6px;vertical-align:middle;
	animation:blink 1s step-end infinite 1.8s;opacity:0;
}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}

.lead{
	margin-top:20px;font-size:1.06rem;line-height:1.8;color:rgba(234,240,250,.78);max-width:32ch;
	opacity:0;animation:rise .8s cubic-bezier(.2,.7,.2,1) 1s forwards;
}

/* 標籤 chips */
.chips{display:flex;gap:9px;margin-top:24px;flex-wrap:wrap}
.chip{
	display:inline-flex;align-items:center;gap:7px;
	padding:8px 16px;border:1px solid rgba(255,255,255,.16);border-radius:999px;
	font-size:.86rem;color:rgba(234,240,250,.85);background:rgba(15,29,58,.5);
	opacity:0;transform:translateY(14px);
	animation:riseUp .6s cubic-bezier(.2,.8,.2,1) forwards;
	transition:border-color .25s,transform .25s;
}
.chip:hover{border-color:#F0A000;transform:translateY(-3px)}
.chip i{width:6px;height:6px;border-radius:50%;display:block;animation:blip 2s ease-in-out infinite}
.c1{animation-delay:1.2s}.c1 i{background:#F0A000}
.c2{animation-delay:1.32s}.c2 i{background:#3E8BE0;animation-delay:.4s}
.c3{animation-delay:1.44s}.c3 i{background:#E05010;animation-delay:.8s}
@keyframes blip{0%,100%{opacity:.4;transform:scale(1)}50%{opacity:1;transform:scale(1.5)}}

/* 進入按鈕 */
.enter{
	position:relative;overflow:hidden;z-index:20;pointer-events:auto;
	display:inline-flex;align-items:center;gap:10px;margin-top:34px;
	padding:16px 36px;background:#F0A000;color:#0A1326;
	font-weight:900;font-size:1.06rem;text-decoration:none;border-radius:12px;
	opacity:0;
	/* 淡入動畫 + failsafe：即使動畫被瀏覽器擋掉，3 秒後也強制顯示、確保可點 */
	animation:rise .8s cubic-bezier(.2,.7,.2,1) 1.6s both,failsafe 0s linear 3s forwards;
	transition:transform .22s,box-shadow .22s,background .22s;
}
.enter:hover{transform:translateY(-3px);box-shadow:0 16px 38px -10px rgba(240,160,0,.6);background:#FFC451}
.etxt,.earrow{position:relative;z-index:2}
.earrow{transition:transform .22s;display:inline-block}
.enter:hover .earrow{transform:translateX(5px)}
.eshine{
	position:absolute;top:0;left:-70%;width:45%;height:100%;z-index:1;pointer-events:none;
	background:linear-gradient(100deg,transparent,rgba(255,255,255,.65),transparent);
	transform:skewX(-22deg);animation:shine 3.4s ease-in-out 2.6s infinite;
}
@keyframes shine{0%{left:-70%}45%,100%{left:140%}}

/* ── 右：場景 SVG ── */
.right{display:flex;justify-content:center;align-items:center}
.scene{width:min(500px,95%);height:auto;overflow:visible}

/* 線稿共通：描邊動畫 */
.draw{
	fill:none;stroke:#EAF0FA;stroke-width:2;
	stroke-linecap:round;stroke-linejoin:round;
	stroke-dasharray:600;stroke-dashoffset:600;
	animation:drawin 1.4s ease-out forwards;
}
@keyframes drawin{to{stroke-dashoffset:0}}

.desk{stroke:#3E8BE0;stroke-width:2.5;animation-delay:.2s}
.desk2{stroke:#3E8BE0;stroke-width:2;animation-delay:.4s}

/* 學生 */
.student{opacity:0;animation:fadein .6s ease-out .5s forwards}
.body{stroke:#EAF0FA;stroke-width:2.2}
.body:nth-of-type(1){animation-delay:.6s}
.face{stroke:#F0A000;stroke-width:2;animation-delay:1.4s}
.student .body{animation-delay:.7s}

/* 眼睛眨眼 */
.eye{stroke:#EAF0FA;stroke-width:2.4;stroke-linecap:round;
	animation:blinkeye 4s ease-in-out 2s infinite;transform-origin:center}
@keyframes blinkeye{
	0%,92%,100%{transform:scaleY(1)}
	95%{transform:scaleY(.1)}
}

/* 手臂：打字動作 */
.arm-r{transform-origin:156px 292px;animation:typing 1.2s ease-in-out 2s infinite}
.arm-l{transform-origin:84px 292px;animation:typing 1.2s ease-in-out 2.3s infinite}
@keyframes typing{
	0%,100%{transform:rotate(0deg)}
	50%{transform:rotate(-3deg)}
}

/* 筆電 */
.laptop{opacity:0;animation:fadein .6s ease-out .9s forwards}
.lp{stroke:#F0A000;stroke-width:2.2;animation-delay:1s}
.screen{
	fill:#0F1D3A;stroke:#3E8BE0;stroke-width:1.5;
	opacity:0;animation:fadein .5s ease-out 1.8s forwards;
}
/* 程式碼行逐行出現 */
.cl{
	stroke:#3E8BE0;stroke-width:2.5;stroke-linecap:round;
	stroke-dasharray:120;stroke-dashoffset:120;
	animation:codetype .5s ease-out forwards,codeloop 5s linear 4s infinite;
}
.cl:nth-child(1){animation-delay:2.1s,4s}
.cl:nth-child(2){animation-delay:2.3s,4.2s}
.cl:nth-child(3){animation-delay:2.5s,4.4s;stroke:#F0A000}
.cl:nth-child(4){animation-delay:2.7s,4.6s}
.cl:nth-child(5){animation-delay:2.9s,4.8s;stroke:#E05010}
.cl:nth-child(6){animation-delay:3.1s,5s}
@keyframes codetype{to{stroke-dashoffset:0}}
@keyframes codeloop{
	0%,85%{opacity:1}
	90%{opacity:.3}
	100%{opacity:1}
}

/* 懸浮晶片 */
.chipfloat{
	opacity:0;transform-origin:415px 175px;
	animation:chipin 1s cubic-bezier(.2,.8,.2,1) 1.5s forwards,
	          chipfloat 5s ease-in-out 2.5s infinite;
}
@keyframes chipin{
	from{opacity:0;transform:scale(.6) translateY(30px)}
	to{opacity:1;transform:scale(1) translateY(0)}
}
@keyframes chipfloat{
	0%,100%{transform:translateY(0) rotate(0deg)}
	50%{transform:translateY(-14px) rotate(2deg)}
}
.chipbody{stroke:#F0A000;stroke-width:2.5;fill:rgba(15,29,58,.7);animation-delay:1.6s}
.chipcore{fill:#F0A000;opacity:0;animation:fadein .5s ease-out 2.4s forwards,coreglow 2.5s ease-in-out 3s infinite}
@keyframes coreglow{0%,100%{opacity:1}50%{opacity:.65}}
.chiptxt{
	fill:#0A1326;font-family:monospace;font-size:18px;font-weight:700;
	opacity:0;animation:fadein .4s ease-out 2.7s forwards;
}
.pin{
	stroke:#F0A000;stroke-width:3;stroke-linecap:round;
	opacity:0;animation:fadein .3s ease-out forwards,pinpulse 2s ease-in-out infinite;
}
.pin:nth-child(1){animation-delay:2s,3s}
.pin:nth-child(2){animation-delay:2.05s,3.2s}
.pin:nth-child(3){animation-delay:2.1s,3.4s}
.pin:nth-child(4){animation-delay:2.15s,3.1s}
.pin:nth-child(5){animation-delay:2.2s,3.5s}
.pin:nth-child(6){animation-delay:2.25s,3.3s}
.pin:nth-child(7){animation-delay:2.3s,3.6s}
.pin:nth-child(8){animation-delay:2.35s,3.15s}
.pin:nth-child(9){animation-delay:2.4s,3.45s}
.pin:nth-child(10){animation-delay:2.45s,3.25s}
.pin:nth-child(11){animation-delay:2.5s,3.55s}
.pin:nth-child(12){animation-delay:2.55s,3.05s}
@keyframes pinpulse{0%,100%{opacity:.4}50%{opacity:1}}

/* 學生 → 晶片 連線 */
.link{
	fill:none;stroke:#E05010;stroke-width:1.8;stroke-dasharray:6 8;
	opacity:0;
	animation:fadeinhalf .6s ease-out 2.8s forwards,flowline 1.5s linear 3s infinite;
}
@keyframes fadeinhalf{to{opacity:.55}}
@keyframes flowline{to{stroke-dashoffset:-28}}
.linkdot{
	fill:#F0A000;opacity:0;
	animation:fadein .4s ease-out 3s forwards;
	filter:drop-shadow(0 0 6px #F0A000);
}

/* 靈感泡泡 */
.ib{
	fill:none;stroke:#F0A000;stroke-width:2;opacity:0;
	animation:bubbleup 3s ease-out infinite;
}
.i2{animation-delay:.5s;stroke:#E05010}
.i3{animation-delay:1s;stroke:#3E8BE0}
@keyframes bubbleup{
	0%{opacity:0;transform:translateY(10px) scale(.5)}
	20%{opacity:.9}
	80%{opacity:.3}
	100%{opacity:0;transform:translateY(-25px) scale(1.2)}
}

/* ── 掃描光線 ── */
.scanline{
	position:absolute;left:0;right:0;height:2px;z-index:4;pointer-events:none;
	background:linear-gradient(90deg,transparent,rgba(240,160,0,.5),transparent);
	animation:scan 7s ease-in-out infinite;
}
@keyframes scan{
	0%{top:-5%;opacity:0}
	10%{opacity:.7}
	90%{opacity:.7}
	100%{top:105%;opacity:0}
}

/* ── 略過 ── */
.skip{
	position:absolute;right:30px;bottom:26px;z-index:20;
	font-family:monospace;font-size:.78rem;letter-spacing:.06em;
	color:rgba(234,240,250,.5);text-decoration:none;transition:color .2s;
	opacity:0;animation:rise .6s ease-out 2.2s both,failsafe 0s linear 3s forwards;
}
.skip:hover{color:#F0A000}

/* ── 共用 keyframes ── */
@keyframes rise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@keyframes riseUp{to{opacity:1;transform:translateY(0)}}
@keyframes fadein{to{opacity:1}}

/* ── 手機 ── */
@media (max-width:900px){
	.content{grid-template-columns:1fr;gap:22px;max-width:520px;text-align:center}
	.tagline{justify-content:center}
	.lead{margin-left:auto;margin-right:auto}
	.chips{justify-content:center}
	.right{order:-1}
	.scene{width:min(300px,72%)}
	h1{font-size:clamp(2rem,7vw,2.8rem)}
}
@media (max-width:520px){
	/* 整體上移、底部預留安全距離（避開瀏覽器工具列與 iPhone 手勢區）*/
	.stage{
		padding:74px 20px calc(40px + env(safe-area-inset-bottom,24px));
		justify-content:flex-start;
	}
	.content{gap:18px;margin-top:8px}
	.scene{width:min(240px,62%)}
	h1{font-size:clamp(1.8rem,6.6vw,2.5rem);margin-top:14px}
	.lead{margin-top:14px;font-size:.98rem}
	.chips{margin-top:16px;gap:7px}
	.chip{padding:7px 13px;font-size:.8rem}
	/* 進入按鈕：加大、加寬、更好按 */
	.enter{
		margin-top:24px;
		padding:18px 44px;
		font-size:1.14rem;
		width:auto;min-width:220px;justify-content:center;
	}
	/* 略過改成文字連結，位置在按鈕下方但留足空間 */
	.skip{
		position:static;display:inline-block;margin-top:18px;
		font-size:.92rem;padding:8px 16px;
	}
}
/* 更小的螢幕（舊 iPhone SE 等）再收緊 */
@media (max-width:380px){
	.stage{padding:64px 16px calc(36px + env(safe-area-inset-bottom,24px))}
	.scene{width:min(210px,58%)}
	h1{font-size:1.7rem}
	.enter{padding:17px 40px;font-size:1.1rem;min-width:200px}
}

/* ── 減少動態 ── */
@media (prefers-reduced-motion:reduce){
	*{animation:none!important;transition:none!important}
	.tagline,.lead,.enter,.skip,.chip,h1 .l1,h1 .l2,
	.student,.laptop,.chipfloat,.screen,.chipcore,.chiptxt{opacity:1!important;transform:none!important}
	.draw,.cl{stroke-dashoffset:0!important}
	.pin,.link,.linkdot,.bgnode circle{opacity:.6!important}
	.tag-line{width:36px!important}
	.sig,.dot,.scanline,.idea{display:none}
}


/* ══ 校院識別（校徽 + 系徽）══ */
.cobrand{
	position:absolute;top:34px;left:50%;transform:translateX(-50%);z-index:8;
	display:flex;align-items:center;gap:18px;
	opacity:0;animation:cbin 1s cubic-bezier(.16,1,.3,1) .2s forwards;
}
@keyframes cbin{
	from{opacity:0;transform:translateX(-50%) translateY(-14px)}
	to{opacity:1;transform:translateX(-50%) translateY(0)}
}
.cobrand .emb{
	width:52px;height:52px;
	filter:drop-shadow(0 4px 12px rgba(0,0,0,.45));
	animation:embfloat 6s ease-in-out 1.4s infinite;
}
@keyframes embfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.cobrand .cb-div{
	width:1px;height:34px;
	background:linear-gradient(transparent,rgba(240,160,0,.55),transparent);
}
.cobrand .icdl{
	height:40px;width:auto;
	filter:drop-shadow(0 4px 12px rgba(0,0,0,.45));
}

@media (max-width:900px){
	.cobrand{top:24px;gap:14px}
	.cobrand .emb{width:44px;height:44px}
	.cobrand .icdl{height:34px}
	.stage{padding:96px 22px 44px}
}
@media (max-width:520px){
	.cobrand{top:20px;gap:12px}
	.cobrand .emb{width:38px;height:38px}
	.cobrand .icdl{height:29px}
	.cobrand .cb-div{height:26px}
	.stage{padding:84px 20px 36px}
}

@media (prefers-reduced-motion:reduce){
	.cobrand,.cobrand .emb{opacity:1!important;transform:none!important;animation:none!important}
	.cobrand{transform:translateX(-50%)!important}
}


/* ══ 進入按鈕可點性保險（修正「按不到進入網站」）══ */
.enter,.skip{pointer-events:auto!important}
/* 動畫沒跑（被瀏覽器擋/舊裝置）時，仍保證可見可點 */
@media (prefers-reduced-motion:reduce){
	.enter,.skip{opacity:1!important;transform:none!important}
}
/* 裝飾層一律不阻擋點擊 */
.bgcircuit,.sig,.dot,.scanline{pointer-events:none!important}


/* ══ Failsafe：任何情況下 3 秒後按鈕一定出現且可點 ══ */
@keyframes failsafe{to{opacity:1;transform:none}}