/* SEA DRAGON V11 Dynamic Edition — lightweight motion layer */
:root{--dyn-gold:#c9a35d;--dyn-dark:#0c1216;--dyn-soft:#eef1f2}
html{scroll-behavior:smooth}
html.dynamic-mode body{overflow-x:hidden}
.dynamic-progress{position:fixed;z-index:9999;left:0;top:0;width:100%;height:3px;background:rgba(255,255,255,.08);pointer-events:none}
.dynamic-progress>i{display:block;width:0;height:100%;background:linear-gradient(90deg,#9f7b3c,#e3c98d);box-shadow:0 0 14px rgba(218,187,120,.55);transition:width .08s linear}
.site-header{transition:background .35s ease,box-shadow .35s ease,transform .35s ease}
.site-header.dynamic-scrolled{background:rgba(246,247,248,.93);backdrop-filter:blur(18px) saturate(130%);box-shadow:0 12px 40px rgba(12,18,22,.10)}
.hero{overflow:hidden;isolation:isolate}
.hero-bg{will-change:transform;transform:translate3d(0,var(--hero-parallax,0px),0) scale(1.045);transition:filter .4s ease}
.hero-water-fx{position:absolute;z-index:2;left:-8%;right:-8%;bottom:-22px;height:19%;pointer-events:none;opacity:.42;mix-blend-mode:screen;background:linear-gradient(180deg,rgba(255,255,255,0),rgba(125,186,211,.12) 28%,rgba(111,173,198,.2));filter:blur(.1px)}
.hero-water-fx:before,.hero-water-fx:after{content:"";position:absolute;left:-5%;width:110%;height:42px;border-radius:48%;border-top:1px solid rgba(255,255,255,.5);background:radial-gradient(ellipse at center,rgba(255,255,255,.13),transparent 65%);animation:sdWave 8s ease-in-out infinite alternate}
.hero-water-fx:before{top:8px;transform:rotate(-1deg)}
.hero-water-fx:after{top:46px;opacity:.55;animation-duration:11s;animation-direction:alternate-reverse}
@keyframes sdWave{0%{transform:translateX(-1.5%) scaleX(.98)}100%{transform:translateX(1.5%) scaleX(1.02)}}
html.dynamic-mode .hero-content>*{opacity:0;transform:translateY(24px)}
html.dynamic-mode.dynamic-ready .hero-content>*{opacity:1;transform:none;transition:opacity .7s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
html.dynamic-mode.dynamic-ready .hero-content>*:nth-child(1){transition-delay:.08s}
html.dynamic-mode.dynamic-ready .hero-content>*:nth-child(2){transition-delay:.16s}
html.dynamic-mode.dynamic-ready .hero-content>*:nth-child(3){transition-delay:.25s}
html.dynamic-mode.dynamic-ready .hero-content>*:nth-child(4){transition-delay:.33s}
html.dynamic-mode.dynamic-ready .hero-content>*:nth-child(5){transition-delay:.40s}
html.dynamic-mode.dynamic-ready .hero-content>*:nth-child(6){transition-delay:.48s}
html.dynamic-mode.dynamic-ready .hero-content>*:nth-child(7){transition-delay:.56s}
.primary-btn,.quote-btn,.conversion-cta{position:relative;overflow:hidden}
.primary-btn:after,.quote-btn:after,.conversion-cta:after{content:"";position:absolute;inset:-70% auto -70% -35%;width:22%;transform:rotate(17deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);transition:left .75s ease}
.primary-btn:hover:after,.quote-btn:hover:after,.conversion-cta:hover:after{left:120%}
.hero-proof>div,.trust-grid>div,.conversion-grid>div{transition:transform .3s ease,border-color .3s ease,background .3s ease}
.hero-proof>div:hover,.trust-grid>div:hover,.conversion-grid>div:hover{transform:translateY(-4px)}
[data-dyn-reveal]{opacity:0;transform:translateY(34px);transition:opacity .7s ease,transform .75s cubic-bezier(.2,.7,.2,1)}
[data-dyn-reveal].is-visible{opacity:1;transform:none}
[data-dyn-reveal][data-dyn-delay="1"]{transition-delay:.08s}
[data-dyn-reveal][data-dyn-delay="2"]{transition-delay:.16s}
[data-dyn-reveal][data-dyn-delay="3"]{transition-delay:.24s}
[data-dyn-reveal][data-dyn-delay="4"]{transition-delay:.32s}
.step-grid{position:relative}
.step-grid:before{content:"";position:absolute;left:7%;right:7%;top:calc(50% - 1px);height:1px;background:linear-gradient(90deg,rgba(42,103,145,.12),rgba(42,103,145,.38),rgba(42,103,145,.12));pointer-events:none}
.step-grid article{position:relative;z-index:1;transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease,opacity .35s ease;cursor:pointer}
.step-grid article:not(.dyn-step-active){opacity:.78}
.step-grid article.dyn-step-active{transform:translateY(-8px);box-shadow:0 18px 42px rgba(17,33,44,.15);border-color:rgba(41,121,168,.35)}
.step-grid article.dyn-step-active .step-image{box-shadow:0 14px 32px rgba(33,122,172,.16)}
.step-grid article:after{content:"";position:absolute;left:14px;right:14px;bottom:0;height:3px;border-radius:3px 3px 0 0;background:linear-gradient(90deg,#176ea6,#74b8dd);transform:scaleX(0);transform-origin:left;transition:transform .35s ease}
.step-grid article.dyn-step-active:after{transform:scaleX(1)}
.engineering-poster{position:relative;overflow:visible}
.engineering-poster .dyn-hotspot{position:absolute;z-index:5;width:30px;height:30px;border:0;border-radius:50%;padding:0;background:rgba(198,159,88,.92);box-shadow:0 0 0 5px rgba(198,159,88,.18),0 8px 18px rgba(10,20,28,.24);cursor:pointer;transform:translate(-50%,-50%);transition:transform .2s ease,box-shadow .2s ease}
.engineering-poster .dyn-hotspot:before{content:"+";display:grid;place-items:center;color:#fff;font-weight:700;font-size:18px;height:100%}
.engineering-poster .dyn-hotspot:hover,.engineering-poster .dyn-hotspot:focus-visible{transform:translate(-50%,-50%) scale(1.12);box-shadow:0 0 0 7px rgba(198,159,88,.22),0 12px 26px rgba(10,20,28,.26);outline:none}
.engineering-poster .dyn-hotspot span{position:absolute;left:38px;top:50%;min-width:150px;max-width:220px;padding:9px 12px;border-radius:7px;background:rgba(11,18,23,.94);color:#fff;font-size:12px;line-height:1.35;letter-spacing:.02em;box-shadow:0 12px 30px rgba(0,0,0,.22);opacity:0;transform:translateY(-50%) translateX(-8px);pointer-events:none;transition:opacity .2s ease,transform .2s ease;text-align:left}
.engineering-poster .dyn-hotspot:hover span,.engineering-poster .dyn-hotspot:focus-visible span,.engineering-poster .dyn-hotspot.is-open span{opacity:1;transform:translateY(-50%) translateX(0)}
.structure-card,.project-card,.video-card{transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s ease,border-color .35s ease}
.structure-card:hover,.project-card:hover,.video-card:hover{transform:translateY(-7px);box-shadow:0 20px 45px rgba(12,23,31,.14)}
.structure-card img,.project-card img,.video-card img{transition:transform .6s cubic-bezier(.2,.7,.2,1),filter .4s ease}
.structure-card:hover img,.project-card:hover img,.video-card:hover img{transform:scale(1.025)}
.dynamic-backtop{position:fixed;z-index:80;right:22px;bottom:24px;width:46px;height:46px;border:1px solid rgba(255,255,255,.2);border-radius:50%;display:grid;place-items:center;background:rgba(14,20,24,.86);color:#fff;box-shadow:0 12px 30px rgba(0,0,0,.18);font-size:18px;opacity:0;transform:translateY(14px);pointer-events:none;transition:opacity .25s ease,transform .25s ease,background .25s ease;cursor:pointer}
.dynamic-backtop.is-visible{opacity:1;transform:none;pointer-events:auto}
.dynamic-backtop:hover{background:#b8914c}
.dyn-counter{font-variant-numeric:tabular-nums}
@media(max-width:900px){.engineering-poster .dyn-hotspot{display:none}.step-grid:before{display:none}.step-grid article:not(.dyn-step-active){opacity:1}.step-grid article.dyn-step-active{transform:none}.dynamic-backtop{bottom:92px;right:16px}}
@media(max-width:700px){.hero-water-fx{height:14%;opacity:.28}.structure-card:hover,.project-card:hover,.video-card:hover{transform:none}.dynamic-backtop{width:42px;height:42px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.hero-water-fx:before,.hero-water-fx:after{animation:none!important}html.dynamic-mode .hero-content>*{opacity:1!important;transform:none!important;transition:none!important}[data-dyn-reveal]{opacity:1!important;transform:none!important;transition:none!important}.step-grid article,.structure-card,.project-card,.video-card{transition:none!important}}

/* ===== V11.1 Interactive linkage mechanism lab ===== */
.linkage-lab-section{padding:82px 0 86px;background:linear-gradient(180deg,#0d151b 0%,#111c23 55%,#0b1217 100%);color:#fff;position:relative;overflow:hidden;border-top:1px solid rgba(255,255,255,.07);border-bottom:1px solid rgba(0,0,0,.45)}
.linkage-lab-section:before{content:"";position:absolute;inset:-25% -10% auto auto;width:620px;height:620px;border-radius:50%;background:radial-gradient(circle,rgba(194,156,78,.13),rgba(194,156,78,0) 68%);pointer-events:none}
.linkage-lab-head{display:flex;justify-content:space-between;align-items:flex-end;gap:48px;margin-bottom:30px}
.linkage-lab-head .section-kicker{color:#d6b46b}.linkage-lab-head h2{font-family:"Noto Serif TC","PMingLiU",serif;font-size:42px;line-height:1.22;margin:6px 0 0;letter-spacing:.5px}.linkage-lab-head p{max-width:640px;margin:0;color:#aab5bc;font-size:14px;line-height:1.8}
.linkage-lab{--ml-accent:#c6a457;display:grid;grid-template-columns:minmax(0,1.45fr) minmax(320px,.75fr);gap:18px;align-items:stretch}
.ml-stage{position:relative;min-height:520px;border-radius:18px;overflow:hidden;background:linear-gradient(145deg,#e8ecee 0%,#cdd5da 48%,#aeb8bf 100%);box-shadow:0 28px 70px rgba(0,0,0,.34);border:1px solid rgba(255,255,255,.12);touch-action:none;-webkit-user-select:none;user-select:none}
.ml-stage:before{content:"";position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,255,255,.36),transparent 28%,transparent 68%,rgba(255,255,255,.10));pointer-events:none}
.ml-stage svg{display:block;width:100%;height:100%;min-height:520px}.ml-stage .ml-line{vector-effect:non-scaling-stroke}
.ml-handle-hit{cursor:grab}.ml-stage.is-dragging .ml-handle-hit{cursor:grabbing}
.ml-barrier-face{filter:url(#mlMetal)}.ml-shadow{filter:url(#mlSoftShadow)}
.ml-motion-arrow{opacity:.18;transition:opacity .2s ease}.ml-stage.is-active .ml-motion-arrow{opacity:.92}.ml-stage.is-locked .ml-seal-glow{opacity:1}.ml-seal-glow{opacity:.18;transition:opacity .28s ease}
.ml-controls{border-radius:18px;padding:28px;background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.045));border:1px solid rgba(255,255,255,.11);box-shadow:0 28px 70px rgba(0,0,0,.22);display:flex;flex-direction:column;gap:22px;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.ml-status-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-bottom:18px;border-bottom:1px solid rgba(255,255,255,.10)}
.ml-status-row small{display:block;color:#82919a;font-size:9px;letter-spacing:1.6px;font-weight:800}.ml-status-row strong{font-size:21px;letter-spacing:.5px}.ml-state-badge{display:inline-flex;align-items:center;gap:8px;padding:8px 11px;border-radius:999px;background:rgba(255,255,255,.07);font-size:10px;font-weight:900;letter-spacing:.6px;color:#cbd4d9;white-space:nowrap}.ml-state-badge i{width:8px;height:8px;border-radius:50%;background:#7d8990;box-shadow:0 0 0 5px rgba(125,137,144,.09)}
.linkage-lab.is-active .ml-state-badge i{background:#d4ac4e;box-shadow:0 0 0 5px rgba(212,172,78,.12)}.linkage-lab.is-locked .ml-state-badge i{background:#49b884;box-shadow:0 0 0 5px rgba(73,184,132,.12)}
.ml-readouts{display:grid;grid-template-columns:1fr 1fr;gap:10px}.ml-readout{padding:13px 14px;border-radius:11px;background:rgba(0,0,0,.18);border:1px solid rgba(255,255,255,.07)}.ml-readout span{display:block;color:#8c9aa3;font-size:9px;letter-spacing:.9px;margin-bottom:5px}.ml-readout b{font-size:18px;font-variant-numeric:tabular-nums}.ml-readout em{font-style:normal;color:#d7b66d;font-size:10px;margin-left:4px}
.ml-instruction{font-size:12px;line-height:1.7;color:#aab6bd;margin:0}.ml-instruction b{color:#fff}
.ml-range-wrap{display:grid;gap:9px}.ml-range-head{display:flex;justify-content:space-between;align-items:center;font-size:10px;color:#98a5ad;font-weight:800;letter-spacing:.7px}.ml-range-head output{color:#e2c783;font-size:13px}.ml-range{width:100%;accent-color:#c6a457;cursor:pointer}
.ml-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}.ml-action{appearance:none;border:0;border-radius:10px;padding:13px 14px;font-size:11px;font-weight:900;letter-spacing:.5px;cursor:pointer;transition:transform .2s ease,background .2s ease,box-shadow .2s ease}.ml-action:hover{transform:translateY(-1px)}.ml-action.primary{background:linear-gradient(135deg,#d3b066,#a98239);color:#111;box-shadow:0 12px 28px rgba(191,151,66,.18)}.ml-action.secondary{background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.10)}
.ml-process{display:grid;gap:9px;margin-top:auto}.ml-process div{display:grid;grid-template-columns:28px 1fr auto;gap:10px;align-items:center;padding:9px 0;border-top:1px solid rgba(255,255,255,.07)}.ml-process i{width:25px;height:25px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:9px;font-weight:900;background:rgba(255,255,255,.07);color:#8f9ba3}.ml-process strong{font-size:11px}.ml-process small{font-size:8px;color:#75838c}.ml-process div.is-on i{background:#c6a457;color:#111}.ml-process div.is-done i{background:#48ad7d;color:#fff}
.ml-help{display:flex;gap:9px;align-items:flex-start;color:#75848d;font-size:9px;line-height:1.6}.ml-help span{font-size:14px;color:#c7a65a}
@media(max-width:1050px){.linkage-lab{grid-template-columns:1fr}.ml-stage{min-height:470px}.ml-stage svg{min-height:470px}.ml-controls{display:grid;grid-template-columns:1fr 1fr;gap:18px}.ml-status-row,.ml-process{grid-column:1/3}.ml-actions{align-self:end}}
@media(max-width:700px){.linkage-lab-section{padding:58px 0 64px}.linkage-lab-head{display:block;margin-bottom:22px}.linkage-lab-head h2{font-size:31px}.linkage-lab-head p{margin-top:14px}.ml-stage{min-height:390px;border-radius:13px}.ml-stage svg{min-height:390px}.ml-controls{display:flex;padding:20px;border-radius:13px}.ml-readouts{grid-template-columns:1fr 1fr}.ml-actions{grid-template-columns:1fr}.ml-status-row{align-items:flex-start}.ml-status-row strong{font-size:18px}.ml-process div{grid-template-columns:26px 1fr}.ml-process small{display:none}}
@media(prefers-reduced-motion:reduce){.ml-action{transition:none}.ml-motion-arrow,.ml-seal-glow{transition:none}}

/* ===== V11.2 video-calibrated mechanism refinements ===== */
.linkage-lab-v12 .ml-stage-v12{background:linear-gradient(140deg,#f0f3f4 0%,#d6dde0 44%,#b7c1c6 100%)}
.linkage-lab-v12 .ml-stage-v12:after{content:"VIDEO-CALIBRATED MOTION";position:absolute;left:24px;top:20px;padding:7px 10px;border-radius:999px;background:rgba(10,20,27,.72);color:#e5c77e;font-size:8px;letter-spacing:1.4px;font-weight:900;z-index:3;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.linkage-lab-v12 .ml12-cues{position:absolute;left:22px;right:22px;bottom:18px;display:grid;grid-template-columns:repeat(4,1fr);gap:7px;z-index:4;pointer-events:none}
.linkage-lab-v12 .ml12-cues span{display:flex;align-items:center;gap:7px;min-width:0;padding:7px 9px;border-radius:8px;background:rgba(10,20,27,.72);border:1px solid rgba(255,255,255,.11);color:#aebbc2;font-size:8px;font-weight:800;letter-spacing:.2px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:.22s ease}
.linkage-lab-v12 .ml12-cues i{flex:0 0 20px;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.09);font-style:normal;color:#d6b76f;font-size:8px}
.linkage-lab-v12 .ml12-cues span.is-live{background:rgba(177,137,57,.86);border-color:rgba(234,207,145,.7);color:#111;transform:translateY(-2px)}
.linkage-lab-v12 .ml12-cues span.is-live i{background:#111;color:#f2d897}
.linkage-lab-v12 .ml12-handle{filter:url(#ml12Shadow)}
.linkage-lab-v12 .ml12-yellow-carrier,.linkage-lab-v12 .ml12-pusher{filter:drop-shadow(0 4px 5px rgba(67,49,8,.22))}
.linkage-lab-v12 .ml12-v-arrow,.linkage-lab-v12 .ml12-h-arrow,.linkage-lab-v12 .ml12-handle-arc{opacity:.16;transition:opacity .18s ease}
.linkage-lab-v12 .ml-stage.is-locked .ml12-side-glow,.linkage-lab-v12 .ml-stage.is-locked .ml12-bottom-glow{filter:url(#ml12Glow)}
@media(max-width:1050px){.linkage-lab-v12 .ml12-cues{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.linkage-lab-v12 .ml-stage-v12:after{left:12px;top:12px;font-size:7px}.linkage-lab-v12 .ml12-cues{left:10px;right:10px;bottom:10px;grid-template-columns:1fr 1fr;gap:5px}.linkage-lab-v12 .ml12-cues span{font-size:7px;padding:5px 6px}.linkage-lab-v12 .ml12-cues i{width:17px;height:17px;flex-basis:17px}.linkage-lab-v12 .ml-stage svg{min-height:430px}}
@media(prefers-reduced-motion:reduce){.linkage-lab-v12 .ml12-cues span{transition:none}}

/* V11.4 Safari mechanism compatibility */
.is-safari .ml-stage svg{transform:translateZ(0);-webkit-transform:translateZ(0)}
.is-safari .ml12-handle,.is-safari .ml12-yellow-carrier,.is-safari .ml12-pusher{will-change:transform}
.is-safari .ml-handle-hit{-webkit-tap-highlight-color:transparent}

/* V11.5 Safari fail-safe */
html.safari-static-safe.dynamic-mode .hero-content>*{opacity:1!important;transform:none!important;transition:none!important}
html.safari-static-safe [data-dyn-reveal]{opacity:1!important;transform:none!important;transition:none!important}
html.safari-static-safe .linkage-lab-section[data-static-mechanism="v115"]{display:block!important;visibility:visible!important;opacity:1!important}
