.oc-reveal { opacity: 0; transform: translateY(50px); transition: opacity 1s cubic-bezier(.22,.9,.28,1),transform 1s cubic-bezier(.22,.9,.28,1) }
.oc-reveal.in { opacity: 1; transform: none }
/* img reveal */
.oc-curtain { position: relative; overflow: hidden }
.oc-curtain::after { content: ""; position: absolute; inset: 0; background: var(--oc-bg); z-index: 2; transform: scaleX(1); transform-origin: right; transition: transform 1.1s cubic-bezier(.77,0,.18,1) .1s; }
.oc-curtain.in::after { transform: scaleX(0) }
.oc-curtain img { transform: scale(1.15); transition: transform 1.6s cubic-bezier(.22,.9,.28,1) .1s }
.oc-curtain.in img { transform: scale(1) }
.oc-ghost {position: absolute;left: 0;white-space: nowrap;pointer-events: none;z-index: 0;font-family: 'Chakra Petch',sans-serif;font-weight: 600;font-size: clamp(5rem,14vw,13rem);line-height: 1;letter-spacing: .02em;color: transparent;-webkit-text-stroke: 1px rgb(5 180 199);will-change: transform;}
section .oc-more {display: inline-flex;align-items: center;gap: 16px;font-family: 'Chakra Petch',sans-serif;font-size: .82rem;letter-spacing: .3em;color: var(--oc-ink);margin-top: 40px;}
section .oc-more .circle {width: 44px;height: 44px;border: 1px solid var(--oc-line);border-radius: 50%;display: flex;align-items: center;justify-content: center;position: relative;overflow: hidden;transition: border-color .4s;flex-shrink: 0;place-items: center;border: 1px solid rgba(var(--primary-rgb), .4);border-radius: 50%;background: rgba(var(--primary-rgb), .08);box-shadow: 0 0 28px rgba(var(--primary-rgb), .08);transition: all .4s ease;}
section .oc-more .circle::before {content: "";position: absolute;inset: 0;border-radius: 50%;background: var(--primary);transform: scale(0);transition: transform .45s cubic-bezier(.22,.9,.28,1);}
section .oc-more .circle svg { position: relative; z-index: 1; transition: transform .4s }
section .oc-more:hover .circle {background: var(--primary);box-shadow: 0 0 30px rgba(var(--primary-rgb), .42);transform: translateX(5px);}
section .oc-more:hover .circle::before { transform: scale(1) }
section .oc-more:hover .circle svg {transform: translateX(3px);color: #041014;}
.oc-arc {position: absolute;border: 1px solid rgb(204 223 255 / 18%);border-radius: 50%;pointer-events: none;opacity: .55;will-change: transform;z-index: 10;}
.oc-arc.glow { box-shadow: 0 0 60px rgba(47,123,255,.18),inset 0 0 60px rgba(47,123,255,.1); border-width: 2px }
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration: .01ms!important; animation-iteration-count: 1!important; transition-duration: .01ms!important }
  html { scroll-behavior: auto }
}


/* ============================================================
   #marquee 幽靈字捲動帶
   ============================================================ */
#marquee{position:relative;padding:60px 0 20px;overflow:hidden}
#marquee .ghost{position:relative;display:block}

/* ============================================================
   #strip 影像帶（listPT）— 無縫漂移相片列
   ============================================================ */
#strip{position:relative;padding:10px 0 clamp(80px,10vw,140px);overflow:hidden}
#strip .track{display:flex;width:max-content;gap:clamp(14px,1.6vw,22px);animation:oc-drift 40s linear infinite}
#strip:hover .track{animation-play-state:paused}
@keyframes oc-drift{to{transform:translateX(-50%)}}
#strip figure{
	position:relative;width:clamp(200px,22vw,300px);aspect-ratio:4/3;flex-shrink:0;
	overflow:hidden;border:1px solid var(--oc-line);
}
#strip figure img{width:100%;height:100%;object-fit:cover;filter:saturate(.85);transition:filter .5s,transform 2.5s ease}
#strip figure:hover img{filter:saturate(1.15);transform:scale(1.08)}
#strip figure figcaption{
	position:absolute;left:0;right:0;bottom:0;padding:10px 14px;font-size:.78rem;letter-spacing:.08em;
	background:linear-gradient(0deg,rgba(5,6,8,.85),transparent);
	opacity:0;transform:translateY(8px);transition:all .4s;
}
#strip figure:hover figcaption{opacity:1;transform:none}

/* ============================================================
   #services 服務（listC）— shinwa 式巨題堆疊區塊
   ============================================================ */
#services{position:relative;padding: 40px 5vw 60px;background:var(--oc-bg2);overflow:hidden;counter-reset:svc}
#services .arc1{width:120vmax;height:120vmax;left:-70vmax;top:6%}
#services .arc2{width:100vmax;height:100vmax;right:-64vmax;bottom:-10%;border-color:rgba(0,229,255,.3)}
#services .head{
	position:relative;
	z-index:1;
	margin:0 auto clamp(60px,7vw,100px);
	display:flex;
	align-items:flex-end;
	justify-content: center;
	gap:24px;
}
#services .head .oc-reveal{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}
#services .head .label{font-family:'Chakra Petch',sans-serif;font-size:.76rem;letter-spacing:.4em;color:var(--oc-cyan);margin-bottom:12px}
#services .head h2{font-family:'Chakra Petch','Noto Sans TC',sans-serif;font-weight: 600;font-size: clamp(28px,4vw,46px);letter-spacing:.06em}
#services .head p{margin-top:10px;color: var(--triadic1);font-size: clamp(15px, 1.05vw, 18px);font-weight: 400;line-height: 2.05;letter-spacing: .055em;text-align: justify;text-align: center;}
#services .item{position:relative;z-index:1;width: min(1200px,100%);margin:0 auto clamp(80px,9vw,130px)}
#services .item:last-of-type{margin-bottom:0}
#services .item .no{
	font-family:'Chakra Petch',sans-serif;font-size:.76rem;letter-spacing:.4em;color:var(--oc-cyan);
	display:flex;align-items:center;gap:14px;margin-bottom:10px;
}
#services .item .no::before{counter-increment:svc;content:"SERVICE 0" counter(svc)}
#services .item .no::after{content:"";flex:0 0 50px;height:1px;background:var(--oc-cyan);opacity:.5}
#services .item h3{
	font-family:'Chakra Petch','Noto Sans TC',sans-serif;
	font-weight:600;
	font-size: clamp(28px,4vw,46px);
	line-height:1.25;
	letter-spacing:.03em;
	margin-bottom:clamp(26px,3vw,44px);
}
#services .item .cols{display:grid;grid-template-columns: minmax(0,560px) 1fr;gap:clamp(28px,4vw,60px);align-items: center;}
#services .item figure{aspect-ratio:16/10;}
#services .item figure img{width:100%;height:100%;object-fit:cover}
#services .item .info .en{font-family:'Chakra Petch',sans-serif;font-size:.72rem;letter-spacing:.28em;color: var(--oc-blue);margin-bottom:12px}
#services .item .info p{color:var(--oc-ink2);font-size:.93rem;margin-bottom:24px;font-size: clamp(15px, 1.05vw, 18px);font-weight: 400;line-height: 2.05;letter-spacing: .055em;}
/* 偶數項左右對調 */
#services .item:nth-of-type(even) .cols{grid-template-columns: 1fr minmax(0,560px);}
#services .item:nth-of-type(even) figure{order:2}
@media (max-width:860px){
	#services .item .cols,
	#services .item:nth-of-type(even) .cols{grid-template-columns:1fr}
	#services .item:nth-of-type(even) figure{order:0}
}

/* ============================================================
   #products 產品（listP）— 「量子懸浮艙」3D 自動輪播
   中央艙體投影聚焦，兩側艙體向深處退散，等速自轉
   ============================================================ */
#products{position:relative;padding: clamp(50px,7vw,130px) 0;overflow:hidden}
#products .arc1{width:100vmax;height:100vmax;left:-58vmax;bottom:-46vmax}
#products .head{
	position:relative;
	z-index:2;
	width: min(1200px,92%);
	margin:0 auto clamp(30px,3.5vw,48px);
	display:flex;
	align-items:flex-end;
	justify-content:space-between;
	gap: 4px;
}
#products .head .label{font-family:'Chakra Petch',sans-serif;font-size:.76rem;letter-spacing:.4em;color:var(--oc-cyan);margin-bottom:12px}
#products .head h2{font-weight:600;font-size: clamp(28px,4vw,46px);letter-spacing:.06em}
/* 3D 舞台 */
#products .stage3d{
	position:relative;z-index:1;width:min(1200px,100%);margin:0 auto;
	height:clamp(430px,44vw,560px);perspective:1500px;
}
#products .stage3d .halo{
	position:absolute;left:50%;top:46%;width:min(60vw,620px);aspect-ratio:1;
	transform:translate(-50%,-50%);border:1px dashed rgba(0,229,255,.16);border-radius:50%;
	animation:oc-halo 30s linear infinite;pointer-events:none;
}
@keyframes oc-halo{to{transform:translate(-50%,-50%) rotate(360deg)}}
#products .stage3d .ghostnum{
	position:absolute;left:2%;bottom:0;z-index:0;pointer-events:none;
	font-family:'Chakra Petch',sans-serif;font-weight:700;font-size:clamp(6rem,15vw,13rem);line-height:1;
	color:transparent;-webkit-text-stroke:1px rgba(0,229,255,.14);
	transition:opacity .4s;
}
#products .orbit{position:absolute;inset:0;transform-style:preserve-3d}
/* 艙體卡片 */
#products .qcard{
	position:absolute;left:50%;top:44%;width:clamp(250px,29vw,370px);
	transform:translate(-50%,-50%);will-change:transform,opacity,filter;
	transition:transform 1.05s cubic-bezier(.22,.9,.28,1),opacity .8s ease,filter .8s ease;
	pointer-events:none;opacity:0;
}
#products .qcard a{display:block;position:relative;background:rgba(8,11,18,.82);border:1px solid var(--oc-line)}
#products .qcard figure{aspect-ratio:16/10;overflow:hidden;position:relative}
#products .qcard figure img{width:100%;height:100%;object-fit:cover}
#products .qcard figure .scanfx{
	position:absolute;inset:0;pointer-events:none;
	background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(0,0,0,.16) 3px 4px);
}
#products .qcard .body{padding:16px 20px 20px;position:relative}
#products .qcard .tag{
	display:inline-block;
	font-size: 1rem;
	letter-spacing:.22em;
	color:var(--oc-cyan);
	border:1px solid rgba(0,229,255,.4);
	padding:2px 12px;
	margin-bottom:10px;
	clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%);
}
#products .qcard h3{font-size:1rem;font-weight: 400;line-height:1.6;margin-bottom:8px;font-size: 22px;}
#products .qcard .price{font-family:'Chakra Petch',sans-serif;font-weight:600;color:var(--oc-cyan);letter-spacing:.06em;font-size:.95rem}
#products .qcard .price del{color:var(--oc-ink2);font-weight:400;font-size:.8rem;margin-left:8px}
/* 四角 HUD 括號（僅中央艙顯示） */
#products .qcard .bracket,#products .qcard .bracket::before,
#products .qcard .bracket::after{position:absolute;pointer-events:none}
#products .qcard .bracket{inset:0;opacity:0;transition:opacity .6s}
#products .qcard .bracket::before,#products .qcard .bracket::after{
	content:"";width:22px;height:22px;border:2px solid var(--oc-cyan);
}
#products .qcard .bracket::before{top:-7px;left:-7px;border-right:0;border-bottom:0}
#products .qcard .bracket::after{bottom:-7px;right:-7px;border-left:0;border-top:0}
/* 位置級別 */
#products .qcard.p0{
	transform:translate(-50%,-50%) translateZ(150px);
	opacity:1;pointer-events:auto;z-index:5;filter:none;
}
#products .qcard.p0 a{border-color:rgba(0,229,255,.55);box-shadow:0 30px 70px rgba(0,0,0,.6),0 0 44px rgba(0,229,255,.14)}
#products .qcard.p0 .bracket{opacity:1}
#products .qcard.p1{transform:translate(28%,-50%) rotateY(-34deg) translateZ(-70px);opacity:.75;pointer-events:auto;z-index:4;filter:brightness(.5) saturate(.7)}
#products .qcard.p-1{transform:translate(-128%,-50%) rotateY(34deg) translateZ(-70px);opacity:.75;pointer-events:auto;z-index:4;filter:brightness(.5) saturate(.7)}
#products .qcard.p2{transform:translate(92%,-50%) rotateY(-46deg) translateZ(-190px);opacity:.35;pointer-events:auto;z-index:3;filter:brightness(.32) saturate(.5)}
#products .qcard.p-2{transform:translate(-192%,-50%) rotateY(46deg) translateZ(-190px);opacity:.35;pointer-events:auto;z-index:3;filter:brightness(.32) saturate(.5)}
#products .qcard.hide{transform:translate(-50%,-50%) translateZ(-320px);opacity:0;z-index:1}
/* 投影光束與底座 */
#products .stage3d .beam{
	position:absolute;left:50%;bottom:2%;width:30%;height:52%;transform:translateX(-50%);
	background:linear-gradient(180deg,transparent,rgba(0,229,255,.08) 55%,rgba(0,229,255,.2));
	clip-path:polygon(30% 0,70% 0,100% 100%,0 100%);pointer-events:none;z-index:0;
	animation:oc-beam 4s ease-in-out infinite;
}
@keyframes oc-beam{0%,100%{opacity:.85}50%{opacity:.45}}
#products .stage3d .pad{
	position:absolute;left:50%;bottom:0;width:40%;height:14px;transform:translateX(-50%);
	border:1px solid rgba(0,229,255,.45);border-radius:50%;z-index:0;
	box-shadow:0 0 26px rgba(0,229,255,.28),inset 0 0 14px rgba(0,229,255,.18);
}
/* HUD 控制列 */
#products .qhud{
	position:relative;z-index:2;width:min(1100px,100%);margin:clamp(20px,2.5vw,34px) auto 0;
	display:flex;align-items:center;gap:26px;font-family:'Chakra Petch',sans-serif;
}
#products .qhud .readout{font-size:.7rem;letter-spacing:.24em;color:var(--oc-ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:46%}
#products .qhud .readout b{color:var(--oc-cyan);font-weight:500}
#products .qhud .qbar{flex:1;height:1px;background:rgba(255,255,255,.14);position:relative;overflow:hidden}
#products .qhud .qbar i{position:absolute;inset:0;background:var(--oc-cyan);transform-origin:left;transform:scaleX(0)}
#products .qhud .qbar i.run{animation:oc-qbar 4.5s linear forwards}
@keyframes oc-qbar{to{transform:scaleX(1)}}
#products .qhud .qnum{font-size:.82rem;letter-spacing:.2em;color:var(--oc-ink2)}
#products .qhud .qnum b{color:var(--oc-cyan);font-size:1.2rem;font-weight:600}
@media (max-width:760px){
	#products .stage3d{height:clamp(380px,120vw,460px);perspective:1100px}
	#products .qcard{width:min(72vw,300px);top:46%}
	#products .qcard.p1{transform:translate(12%,-50%) rotateY(-36deg) translateZ(-90px)}
	#products .qcard.p-1{transform:translate(-112%,-50%) rotateY(36deg) translateZ(-90px)}
	#products .qcard.p2,#products .qcard.p-2{opacity:0;pointer-events:none}
	#products .stage3d .ghostnum{font-size:5.4rem}
	#products .qhud{flex-wrap:wrap;gap:14px}
	#products .qhud .readout{max-width:100%}
}

/* ============================================================
   #news 消息（listN）— 清單列（お知らせ式）
   ============================================================ */
#news{position:relative;padding:clamp(90px,12vw,170px) 4vw;background:var(--oc-bg2);overflow:hidden}
#news .arc1{width:90vmax;height:90vmax;right:-52vmax;top:-40vmax}
#news .inner{position:relative;z-index:1;width:min(1100px,100%);margin:0 auto}
#news .head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:clamp(36px,4vw,54px)}
#news .head .label{font-family:'Chakra Petch',sans-serif;font-size:.76rem;letter-spacing:.4em;color:var(--oc-cyan);margin-bottom:12px}
#news .head h2{font-family:'Chakra Petch','Noto Sans TC',sans-serif;font-weight:600;font-size:clamp(1.6rem,3vw,2.4rem);letter-spacing:.06em}
#news .list a{
	display:grid;grid-template-columns:auto auto 1fr auto;gap:clamp(16px,3vw,40px);align-items:center;
	padding:clamp(20px,2.6vw,30px) 10px;border-bottom:1px solid var(--oc-line);position:relative;
	transition:background .35s,padding .35s;
}
#news .list a:first-child{border-top:1px solid var(--oc-line)}
#news .list a::after{
	content:"";position:absolute;left:0;bottom:-1px;height:1px;width:0;
	background:linear-gradient(90deg,var(--oc-cyan),var(--oc-blue));transition:width .5s cubic-bezier(.22,.9,.28,1);
}
#news .list a:hover{background:rgba(47,123,255,.05);padding-left:22px}
#news .list a:hover::after{width:100%}
#news .list time{font-family:'Chakra Petch',sans-serif;font-size:.82rem;letter-spacing:.16em;color:var(--oc-ink2);white-space:nowrap}
#news .list .cat{
	font-family:'Chakra Petch',sans-serif;font-size:.64rem;letter-spacing:.2em;color:var(--oc-cyan);
	border:1px solid rgba(0,229,255,.4);padding:3px 14px;border-radius:30px;white-space:nowrap;
}
#news .list h3{font-size:.98rem;font-weight:400;line-height:1.6;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
#news .list .arrow{
	width:38px;height:38px;border:1px solid var(--oc-line);border-radius:50%;
	display:flex;align-items:center;justify-content:center;transition:all .35s;flex-shrink:0;
}
#news .list a:hover .arrow{background:var(--oc-blue);border-color:var(--oc-blue);transform:translateX(4px)}
#news .foot{margin-top:34px;text-align:right}
@media (max-width:640px){
	#news .list a{grid-template-columns:auto auto 1fr;grid-template-rows:auto auto}
	#news .list h3{grid-column:1/-1;-webkit-line-clamp:2}
	#news .list .arrow{display:none}
}

/* ============================================================
   #gallery 相簿（listB）— 拼貼視差 + 幽靈字 + 圓形入口
   ============================================================ */
#gallery{position:relative;padding:clamp(110px,14vw,200px) 4vw;overflow:hidden;text-align:center}
#gallery .ghost{top:10%}
#gallery .arc1{width:110vmax;height:110vmax;left:50%;top:64%;transform:translateX(-50%)}
#gallery .collage{
	position:relative;z-index:1;width:min(1100px,100%);margin:0 auto clamp(40px,5vw,70px);
	display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,26px);
}
#gallery .collage a{position:relative;display:block;overflow:hidden;border:1px solid var(--oc-line)}
#gallery .collage a:nth-child(2){transform:translateY(clamp(20px,3vw,44px))}
#gallery .collage figure{aspect-ratio:4/4.6}
#gallery .collage figure img{width:100%;height:100%;object-fit:cover;filter:saturate(.85);transition:transform 2.4s ease,filter .5s}
#gallery .collage a:hover figure img{transform:scale(1.08);filter:saturate(1.15)}
#gallery .collage .info{
	position:absolute;left:0;right:0;bottom:0;padding:14px 16px;text-align:left;
	background:linear-gradient(0deg,rgba(5,6,8,.9),transparent);
}
#gallery .collage .info h3{font-size:.9rem;font-weight:500;letter-spacing:.06em}
#gallery .collage .info time{font-family:'Chakra Petch',sans-serif;font-size:.68rem;letter-spacing:.22em;color:var(--oc-cyan)}
#gallery .copy{position:relative;z-index:1;margin-bottom:clamp(36px,4vw,56px)}
#gallery .copy h2{font-family:'Chakra Petch','Noto Sans TC',sans-serif;font-weight:600;font-size:clamp(1.5rem,2.8vw,2.2rem);letter-spacing:.08em;line-height:1.6}
#gallery .copy p{color:var(--oc-ink2);font-size:.92rem;margin-top:14px}
/* 圓形入口按鈕（旋轉文字環 + ENTRY） */
#gallery .entry{position:relative;z-index:1;display:inline-block;width:170px;height:170px}
#gallery .entry .ringtext{position:absolute;inset:0;animation:oc-spin 16s linear infinite}
@keyframes oc-spin{to{transform:rotate(360deg)}}
#gallery .entry .ringtext text{
	font-family:'Chakra Petch',sans-serif;font-size:10.5px;letter-spacing:.34em;fill:var(--oc-ink2);
}
#gallery .entry .btn{
	position:absolute;inset:26px;border-radius:50%;
	background:rgba(238,243,250,.06);border:1px solid var(--oc-line);
	backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
	display:flex;align-items:center;justify-content:center;
	font-family:'Chakra Petch',sans-serif;font-size:.8rem;letter-spacing:.3em;
	transition:all .45s;
}
#gallery .entry:hover .btn{background:var(--oc-blue);border-color:var(--oc-blue);box-shadow:0 0 50px rgba(47,123,255,.45)}
@media (max-width:640px){
	#gallery .collage{grid-template-columns:repeat(2,1fr)}
	#gallery .collage a:nth-child(3){display:none}
}