/* IEN.VN V11 — authentic lightweight technology motion. No frameworks, no remote media. */
:root{--motion-cyan:#128cce;--motion-teal:#0da994;--motion-ink:#17435f}
.motion-area{pointer-events:none}
/* Photo based hero: technology layer placed at edges rather than over the headline. */
.intro-photo-wrap{isolation:isolate}
.intro-photo-wrap::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;background:linear-gradient(135deg,rgba(244,253,255,.22),transparent 54%,rgba(9,105,153,.14));}
.hero-live-decoration{position:absolute;inset:0;z-index:4;font-size:14px}
.hero-tech-path{position:absolute;inset:0;width:100%;height:100%;filter:drop-shadow(0 1px 2px #fff8)}
.hero-tech-path .signal-track{fill:none;stroke:url(#heroLine);stroke-width:2;stroke-dasharray:7 12;opacity:.75;animation:ien-flowline 13s linear infinite}
.hero-tech-path .signal-dot{fill:#28d0b0;stroke:white;stroke-width:2;animation:ien-pulse 4s ease-in-out infinite}
.hero-tech-path .signal-dot-two{fill:#198fdf;animation-delay:1.1s}
.hero-ai-chip,.hero-cloud-chip{position:absolute;display:flex;align-items:center;gap:9px;border:1px solid rgba(255,255,255,.98);border-radius:15px;background:rgba(255,255,255,.90);box-shadow:0 12px 26px rgba(11,73,125,.15);backdrop-filter:blur(13px);-webkit-backdrop-filter:blur(13px);color:#1d4d68;animation:ien-softfloat 6s ease-in-out infinite}
.hero-ai-chip{top:15px;right:17px;padding:9px 12px;max-width:220px}
.hero-ai-chip .tech-icon-square{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(135deg,#1488de,#1ed4a9);color:white;font-size:23px;flex:none}
.hero-ai-chip b{display:block;font-size:13px;color:#153f5a;line-height:1.2}
.hero-ai-chip small{font-size:10.5px;color:#54768c;line-height:1.6;display:block}
.alive-dot{margin-left:3px;width:7px;height:7px;border-radius:50%;background:#0ac691;box-shadow:0 0 0 4px #0ac69124;animation:ien-pulse 4s ease-in-out infinite;flex:none}
.hero-cloud-chip{bottom:13px;left:13px;padding:7px 11px;font-size:11.5px;font-weight:800;letter-spacing:.03em;animation-delay:-2.8s}
.cloud-pict{font-size:21px;color:#087bca}
.tiny-transmission{display:flex;align-items:flex-end;gap:2px;height:13px;margin-left:4px}
.tiny-transmission i{width:3px;height:5px;border-radius:3px;background:#10a58e;animation:ien-tower 1.1s ease-in-out infinite alternate}
.tiny-transmission i:nth-child(2){height:10px;animation-delay:.16s}.tiny-transmission i:nth-child(3){height:7px;animation-delay:.33s}
/* Product presentation: six distinctive functional signals, always legible */
.product-card.motion-product{transition:transform .38s cubic-bezier(.23,.82,.31,1),box-shadow .38s ease,border-color .38s ease}
.product-card.motion-product:hover,.product-card.motion-product:focus-within{transform:translateY(-6px);box-shadow:0 23px 48px #144b7d24}
.product-card.motion-product .product-visual>img{transition:transform .6s cubic-bezier(.2,.8,.2,1),filter .4s}
.product-card.motion-product:hover .product-visual>img,.product-card.motion-product:focus-within .product-visual>img{transform:translateY(-5px) scale(1.025)}
.product-live-indicator{position:absolute;right:10px;bottom:14px;display:flex;align-items:center;gap:6px;max-width:85%;padding:5px 9px 5px 5px;border-radius:40px;border:1px solid #ffffffd8;background:rgba(255,255,255,.88);box-shadow:0 5px 15px #1a50802a;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:#19455b;white-space:nowrap;font-size:10px;font-weight:750;opacity:.96;animation:ien-softfloat 6.8s ease-in-out infinite}
.product-live-indicator .mini-orb{width:23px;height:23px;display:grid;place-items:center;border-radius:50%;color:#fff;background:linear-gradient(135deg,var(--one,#1389e4),var(--two,#29bcaa));font-size:12px;flex:none}
.product-live-indicator .mini-label{overflow:hidden;text-overflow:ellipsis}
.product-live-indicator .moving-dot{width:5px;height:5px;flex:none;border-radius:50%;background:var(--one,#23ae91);box-shadow:0 0 0 3px #c6f6e9;animation:ien-pulse 3.5s ease-in-out infinite}
.product-card.email .product-live-indicator{animation-delay:-.8s}.product-card.social .product-live-indicator{animation-delay:-1.6s}.product-card.card .product-live-indicator{animation-delay:-2.6s}.product-card.video .product-live-indicator{animation-delay:-3.2s}.product-card.spa .product-live-indicator{animation-delay:-4s}
.product-card.email .micro-chip{animation:ien-softfloat 6s ease-in-out infinite}
.product-card.video .video-mock-play{animation:ien-glow 3.5s ease-in-out infinite}
.product-card.card .save-mock{animation:ien-softfloat 6s ease-in-out infinite}
/* Signal in the product section header, intentionally modest */
.showcase .section-heading{position:relative}
.section-circuit{position:absolute;width:230px;height:30px;right:0;top:-24px;opacity:.38}
.section-circuit svg{width:100%;height:100%;overflow:visible;fill:none;stroke:#39a9b0;stroke-width:2;stroke-linecap:round}
.section-circuit path{stroke-dasharray:8 9;animation:ien-flowline 14s linear infinite}
.section-circuit circle{fill:#0ca79c;stroke:none;animation:ien-pulse 3.5s ease infinite}
/* Photographic section: small chips at corners so faces / story remain intact. */
.scene-v9-visual{isolation:isolate}
.scene-ai-layer{position:absolute;inset:0;z-index:4;overflow:hidden;border-radius:inherit}
.scene-trail{position:absolute;inset:0;width:100%;height:100%;opacity:.68}
.scene-trail path{fill:none;stroke:#f6ffff;stroke-width:2;stroke-dasharray:6 12;animation:ien-flowline 15s linear infinite;filter:drop-shadow(0 1px 3px #0c7493)}
.scene-tech-chip{position:absolute;display:flex;align-items:center;gap:7px;padding:8px 12px;border:1px solid rgba(255,255,255,.93);background:rgba(250,255,255,.90);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 12px 24px #154c6933;border-radius:13px;color:#15586a;font-size:12px;font-weight:800;animation:ien-softfloat 7s ease-in-out infinite}
.scene-chip-ai{top:18px;right:18px}.scene-chip-flow{bottom:20px;left:18px;animation-delay:-2.7s}
.scene-tech-glyph{font-size:17px;color:#0788c7}
.scene-light{position:absolute;width:8px;height:8px;background:#3ce8c2;border:2px solid #fff;border-radius:50%;box-shadow:0 0 15px #00d8a8;animation:ien-pulse 3.5s ease-in-out infinite}
.scene-light-a{top:29%;right:12%}.scene-light-b{bottom:21%;left:8%;animation-delay:1.3s}
/* Partner link network: quiet data connections behind the existing rotating platforms */
.orbit-stage{isolation:isolate}
.ai-network-backdrop{position:absolute;inset:0;z-index:0;opacity:.8}
.ai-network-backdrop svg{position:absolute;inset:0;width:100%;height:100%}
.net-path{fill:none;stroke:url(#netFlow);stroke-width:1.5;stroke-dasharray:6 10;animation:ien-flowline 17s linear infinite;opacity:.28}
.net-path-two{animation-direction:reverse;animation-duration:21s}
.net-pip{fill:#1bc7a7;stroke:#fff;stroke-width:2;animation:ien-pulse 5s ease infinite}
.net-pip.n2{animation-delay:1.6s}.net-pip.n3{animation-delay:3.2s}
.network-tag{position:absolute;border-radius:9px;padding:6px 9px;font-size:10px;font-weight:850;letter-spacing:.035em;color:#07778a;background:#f5fffeeb;border:1px solid #cfebf0;box-shadow:0 6px 20px #28748c1f;animation:ien-softfloat 7s ease-in-out infinite}
.network-tag.ai-tag{top:8%;left:6%}.network-tag.api-tag{bottom:12%;right:2%;animation-delay:-3.5s}
/* Steps: a true visual sequence without autoplay distractions */
.instructions .steps{position:relative}
.step-lift{position:relative;transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease}
.step-lift:hover{transform:translateY(-3px);border-color:#98dad3;box-shadow:0 16px 32px #184c6923}
.step-motion-icon{position:absolute;top:22px;right:22px;display:grid;place-items:center;width:41px;height:41px;border-radius:13px;background:linear-gradient(140deg,#dcf7f6,#e6f1ff);border:1px solid #bde6e8;color:#148fa6;font-size:22px;transition:transform .4s ease}
.step-lift:hover .step-motion-icon{transform:rotate(6deg) scale(1.04)}
.instructions .step-lift b{font-variant-numeric:tabular-nums}
/* Footer: stable and accessible, faint fine-grain tech traces. */
footer{position:relative;isolation:isolate;overflow:hidden}
.footer-circuit{position:absolute;inset:0;z-index:0;opacity:.18}
.footer-circuit svg{position:absolute;width:100%;height:100%;stroke:#9cebe3;stroke-width:1.25;fill:none}
.footer-circuit path{stroke-dasharray:10 20;animation:ien-flowline 27s linear infinite}
.footer-circuit circle{fill:#a7fff1;stroke:none;animation:ien-pulse 7s ease-in-out infinite}
footer .footer-inner,footer .footer-bottom{position:relative;z-index:1}
/* Animation motion lifecycle; no required JS for visuals. */
.motion-area:not(.motion-in-view) .hero-tech-path .signal-track,
.motion-area:not(.motion-in-view) .scene-trail path,
.motion-area:not(.motion-in-view) .net-path,
.motion-area:not(.motion-in-view) .footer-circuit path{animation-play-state:paused}
@keyframes ien-softfloat{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-6px,0)}}
@keyframes ien-flowline{from{stroke-dashoffset:0}to{stroke-dashoffset:-210}}
@keyframes ien-pulse{0%,100%{opacity:.65;filter:brightness(1)}50%{opacity:1;filter:brightness(1.16)}}
@keyframes ien-glow{0%,100%{box-shadow:0 0 0 0 rgba(27,176,219,.12)}50%{box-shadow:0 0 0 8px rgba(27,176,219,.09)}}
@keyframes ien-tower{to{transform:scaleY(.6);opacity:.65}}
@media(max-width:1100px){.hero-ai-chip{transform:scale(.92);transform-origin:top right}.product-live-indicator{bottom:10px;right:4px;max-width:93%}.section-circuit{opacity:.22}}
@media(max-width:760px){
.hero-live-decoration{font-size:12px}.hero-ai-chip{top:9px;right:8px;padding:6px 8px;border-radius:12px;max-width:172px;animation:ien-softfloat 6s ease-in-out infinite}.hero-ai-chip .tech-icon-square{width:30px;height:30px;border-radius:9px;font-size:18px}.hero-ai-chip b{font-size:10.5px}.hero-ai-chip small{font-size:9px}.hero-cloud-chip{bottom:9px;left:9px;padding:4px 9px;font-size:10px}.cloud-pict{font-size:16px}.section-circuit{display:none}
.product-live-indicator{font-size:9px;bottom:10px;right:8px;padding:4px 7px 4px 4px}.product-live-indicator .mini-orb{width:20px;height:20px;font-size:10px}
.scene-chip-ai{top:9px;right:10px}.scene-chip-flow{bottom:10px;left:8px}.scene-tech-chip{font-size:10px;padding:5px 8px}.scene-tech-glyph{font-size:14px}
.network-tag{display:none}.step-motion-icon{width:34px;height:34px;font-size:18px;top:18px;right:18px}
}
@media(max-width:400px){.hero-ai-chip small{display:none}.hero-cloud-chip{bottom:7px;left:8px}.scene-chip-flow{max-width:55%}.product-live-indicator .mini-label{font-size:8px}}
@media(prefers-reduced-motion:reduce){
.hero-tech-path .signal-track,.hero-tech-path .signal-dot,.hero-ai-chip,.hero-cloud-chip,.alive-dot,.tiny-transmission i,.product-live-indicator,.product-live-indicator .moving-dot,.product-card.email .micro-chip,.product-card.video .video-mock-play,.product-card.card .save-mock,.section-circuit *, .scene-trail *, .scene-tech-chip,.scene-light,.net-path,.net-pip,.network-tag,.footer-circuit *{animation:none!important}
.product-card.motion-product:hover,.product-card.motion-product:focus-within,.product-card.motion-product:hover .product-visual>img,.step-lift:hover{transform:none!important}
}
/* Final visual QA refinements: no competing labels on cards or photo. */
.product-card.card .product-live-indicator,
.product-card.video .product-live-indicator{display:none}
.scene-ai-layer .scene-chip-flow{left:auto;right:18px;bottom:17px}
@media(max-width:760px){.scene-ai-layer .scene-chip-flow{left:auto;right:10px;bottom:9px}}
.bot-glyph{display:block;width:27px;height:27px;color:#fff}
@media(max-width:760px){.bot-glyph{width:21px;height:21px}}