/* 2026/06/08 公司logo動畫專用樣式 
 <style id="LogoAnimationStyle" type="text/css"> */
/*2026/06/08 公司logo寬度變更了 start*/
@media (max-width: 1360px) {
    .navbar-toggle {
        display: block;
    }

    .navbar-collapse.collapse {
        display: none !important;
    }

    .navbar-collapse.collapse.in {
        display: block !important;
    }
}

@media (min-width: 1361px) {
    .navbar-toggle {
        display: none;
    }

    .navbar-collapse.collapse {
        display: block !important;
    }
}

@media (min-width: 769px) and (max-width: 1360px) {
    .navbar-collapse.collapsing {
        transition: none !important;
        height: auto !important;
    }
}

@media (max-width: 379px) {
    .stage {
        width: 200px !important;
        height: 84px !important;
    }

    .stage svg {
        width: 200px !important;
        height: 84px !important;
    }

    #aaa {
        height: 84px !important;
    }
}
/* @media (max-width: 1398px) { */
@media (max-width: 1509px) {
    #logo-007 {
        display: none;
    }
}

/* @media (min-width: 1399px) { */
@media (min-width: 1510px) {
    #logo-007 {
        display: inline-block;
    }
}
/*2026/06/08 公司logo寬度變更了 end*/
:root {
    --navy: #16384f;
    /* 深藍主色 */
    --navy-2: #1f4d6b;
    --orange: #f26a21;
    /* 橘色主色 */
    --orange-2: #ff8a3d;
    --neon: #39ff8c;
    /* 雷達綠色螢光 */
    --bg: #0c1820;
}

.stage {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center
}

svg {
    display: block;
    overflow: visible
}

/* ---- Signal arcs (EAS / 感應門 / RFID) ---- */
.arc {
    fill: none;
    stroke: var(--navy);
    stroke-linecap: round;
    transform-origin: 38px 92px;
    animation: emit 2.6s ease-out infinite;
}

.arc.a2 {
    animation-delay: .45s
}

.arc.a3 {
    animation-delay: .9s
}

@keyframes emit {
    0% {
        opacity: 0;
        stroke-width: 11
    }

    18% {
        opacity: 1
    }

    100% {
        opacity: 0;
        stroke-width: 4
    }
}

/* ---- Chinese title fade/slide in ---- */
.cjk {
    opacity: 0;
    animation: dropIn .7s cubic-bezier(.2, .8, .2, 1) forwards
}

.cjk.c1 {
    animation-delay: .15s
}

.cjk.c2 {
    animation-delay: .27s
}

.cjk.c3 {
    animation-delay: .39s
}

.cjk.c4 {
    animation-delay: .51s
}

.tag {
    opacity: 0;
    animation: dropIn .6s ease forwards;
    animation-delay: .8s
}

@keyframes dropIn {
    from {
        opacity: 0;
        transform: translateY(-10px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

/* ---- GOLDPiCK letters: staggered rise + glow ---- */
.ltr {
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center bottom;
    animation: rise .55s cubic-bezier(.2, .9, .3, 1.2) forwards
}

.l1 {
    animation-delay: .55s
}

.l2 {
    animation-delay: .62s
}

.l3 {
    animation-delay: .69s
}

.l4 {
    animation-delay: .76s
}

.l5 {
    animation-delay: .83s
}

.l6 {
    animation-delay: .90s
}

.l7 {
    animation-delay: .97s
}

.l8 {
    animation-delay: 1.04s
}

@keyframes rise {
    0% {
        opacity: 0;
        transform: translateY(16px) scaleY(.6)
    }

    100% {
        opacity: 1;
        transform: translateY(0) scaleY(1)
    }
}

/* ---- Scanning sweep line over the wordmark ---- */
.scan {
    fill: url(#scanGrad);
    opacity: .0;
    animation: scan 3.8s linear infinite;
    animation-delay: 1.3s;
    mix-blend-mode: screen;
}

@keyframes scan {
    0% {
        transform: translateX(-40px);
        opacity: 0
    }

    8% {
        opacity: .85
    }

    45% {
        opacity: .85
    }

    55% {
        opacity: 0
    }

    100% {
        transform: translateX(360px);
        opacity: 0
    }
}

/* ---- Data dots travelling along baseline (人流/數據) ---- */
.flow {
    fill: var(--orange-2)
}

.f1 {
    animation: flow 3.2s linear infinite
}

.f2 {
    animation: flow 3.2s linear infinite;
    animation-delay: 1.06s
}

.f3 {
    animation: flow 3.2s linear infinite;
    animation-delay: 2.13s
}

@keyframes flow {
    0% {
        opacity: 0;
        transform: translateX(0)
    }

    10% {
        opacity: 1
    }

    90% {
        opacity: 1
    }

    100% {
        opacity: 0;
        transform: translateX(300px)
    }
}

.label {
    z-index: 1;
    color: #8fb4c9;
    font-size: 13px;
    letter-spacing: 3px;
    text-transform: uppercase;
    opacity: 0;
    animation: dropIn .8s ease forwards;
    animation-delay: 1.6s
}

.svc {
    opacity: 0;
    animation: dropIn .8s ease forwards;
    animation-delay: 1.6s
}

.eng {
    opacity: 0;
    animation: dropIn .8s ease forwards;
    animation-delay: 1.4s
}

/* ---- (2) circuit/particle dots: drift + twinkle ---- */
.dot {
    fill: var(--orange);
    opacity: .4
}

.circuit {
    stroke: var(--navy-2);
    stroke-width: .8;
    fill: none;
    opacity: .18
}

/* irregular wandering paths (each dot uses a different one) */
.drift1 {
    animation: drift1 7s ease-in-out infinite, twinkle 3s ease-in-out infinite
}

.drift2 {
    animation: drift2 9s ease-in-out infinite, twinkle 3.6s ease-in-out infinite
}

.drift3 {
    animation: drift3 6.4s ease-in-out infinite, twinkle 2.7s ease-in-out infinite
}

.drift4 {
    animation: drift4 8.2s ease-in-out infinite, twinkle 4.1s ease-in-out infinite
}

.drift5 {
    animation: drift5 7.6s ease-in-out infinite, twinkle 3.3s ease-in-out infinite
}

.drift6 {
    animation: drift6 9.4s ease-in-out infinite, twinkle 3.9s ease-in-out infinite
}

@keyframes twinkle {

    0%,
    100% {
        opacity: .18
    }

    50% {
        opacity: .7
    }
}

@keyframes drift1 {

    0%,
    100% {
        transform: translate(0, 0)
    }

    25% {
        transform: translate(6px, -5px)
    }

    50% {
        transform: translate(-4px, 4px)
    }

    75% {
        transform: translate(3px, 6px)
    }
}

@keyframes drift2 {

    0%,
    100% {
        transform: translate(0, 0)
    }

    20% {
        transform: translate(-5px, 4px)
    }

    45% {
        transform: translate(5px, 5px)
    }

    70% {
        transform: translate(4px, -6px)
    }
}

@keyframes drift3 {

    0%,
    100% {
        transform: translate(0, 0)
    }

    30% {
        transform: translate(5px, 5px)
    }

    55% {
        transform: translate(-6px, -3px)
    }

    80% {
        transform: translate(-3px, 5px)
    }
}

@keyframes drift4 {

    0%,
    100% {
        transform: translate(0, 0)
    }

    22% {
        transform: translate(-6px, -5px)
    }

    48% {
        transform: translate(4px, -4px)
    }

    74% {
        transform: translate(5px, 4px)
    }
}

@keyframes drift5 {

    0%,
    100% {
        transform: translate(0, 0)
    }

    28% {
        transform: translate(4px, 6px)
    }

    52% {
        transform: translate(-5px, -5px)
    }

    78% {
        transform: translate(6px, -3px)
    }
}

@keyframes drift6 {

    0%,
    100% {
        transform: translate(0, 0)
    }

    24% {
        transform: translate(-4px, 5px)
    }

    50% {
        transform: translate(6px, 3px)
    }

    76% {
        transform: translate(-5px, -6px)
    }
}

/* ---- (3) radar scan: rotating sweep + pulsing center ---- */
.radar-sweep {
    transform-origin: 338px 108px;
    animation: radar 3.4s linear infinite
}

@keyframes radar {
    from {
        transform: rotate(0)
    }

    to {
        transform: rotate(360deg)
    }
}

.radar-ping {
    transform-origin: 338px 108px;
    animation: ping 2.4s ease-out infinite
}

@keyframes ping {
    0% {
        transform: scale(.3);
        opacity: .9
    }

    100% {
        transform: scale(1.6);
        opacity: 0
    }
}

/* ---- (4) data flow dots travelling right ---- */
.data {
    fill: var(--orange);
}

.d1 {
    animation: dataflow1 3.4s ease-in-out infinite
}

.d2 {
    animation: dataflow2 3.4s ease-in-out infinite;
    animation-delay: 1.13s
}

.d3 {
    animation: dataflow3 3.4s ease-in-out infinite;
    animation-delay: 2.26s
}

@keyframes dataflow1 {
    0% {
        opacity: 0;
        transform: translate(0, 0)
    }

    12% {
        opacity: 1
    }

    30% {
        transform: translate(16px, -7px)
    }

    55% {
        transform: translate(30px, 5px)
    }

    78% {
        transform: translate(46px, -4px)
    }

    88% {
        opacity: 1
    }

    100% {
        opacity: 0;
        transform: translate(58px, 3px)
    }
}

@keyframes dataflow2 {
    0% {
        opacity: 0;
        transform: translate(0, 0)
    }

    12% {
        opacity: 1
    }

    28% {
        transform: translate(15px, 6px)
    }

    52% {
        transform: translate(29px, -6px)
    }

    76% {
        transform: translate(45px, 5px)
    }

    88% {
        opacity: 1
    }

    100% {
        opacity: 0;
        transform: translate(58px, -3px)
    }
}

@keyframes dataflow3 {
    0% {
        opacity: 0;
        transform: translate(0, 0)
    }

    12% {
        opacity: 1
    }

    32% {
        transform: translate(17px, -5px)
    }

    58% {
        transform: translate(31px, 7px)
    }

    80% {
        transform: translate(46px, -6px)
    }

    88% {
        opacity: 1
    }

    100% {
        opacity: 0;
        transform: translate(58px, 2px)
    }
}

/* ---- (5) thermal scan wave (熱顯像) ---- */

/* ---- Bullet camera: tilts to scan + blinking record dot ---- */
.cam-aim {
    animation: camtilt 4.5s ease-in-out infinite
}

@keyframes camtilt {

    0%,
    100% {
        transform: translate(358.5px, 46px) rotate(-12deg)
    }

    50% {
        transform: translate(358.5px, 46px) rotate(12deg)
    }
}

.cam-beam2 {
    animation: beampulse 2.6s ease-in-out infinite
}

@keyframes beampulse {

    0%,
    100% {
        opacity: .55
    }

    50% {
        opacity: 1
    }
}

.cam-rec {
    animation: recblink 1.4s steps(1) infinite
}

@keyframes recblink {

    0%,
    49% {
        opacity: 1
    }

    50%,
    100% {
        opacity: .15
    }
}

/* ---- (7) air-quality sensor dots (空氣品質) ---- */
.aq {
    fill: var(--neon)
}

.aq1 {
    animation: aqrise 2.6s ease-in infinite
}

.aq2 {
    animation: aqrise 2.6s ease-in infinite;
    animation-delay: .65s
}

.aq3 {
    animation: aqrise 2.6s ease-in infinite;
    animation-delay: 1.3s
}

.aq4 {
    animation: aqrise 2.6s ease-in infinite;
    animation-delay: 1.95s
}

@keyframes aqrise {
    0% {
        opacity: 0;
        transform: translate(0, 0) scale(.6)
    }

    20% {
        opacity: .8
    }

    100% {
        opacity: 0;
        transform: translate(2px, -16px) scale(1.1)
    }
}

/* </style> */