/* Logo Connect: hoạt ảnh giới thiệu thương hiệu (3D nhẹ, bóng, ánh sáng).
   Hình dạng, tỉ lệ, kiểu chữ và màu của logo giữ nguyên, chỉ thêm chuyển động và ánh sáng. */
.logo3d { position: relative; width: min(100%, 500px); aspect-ratio: 880 / 258; perspective: 1100px; margin-bottom: clamp(12px, 2vh, 22px); }
.logo3d .punch, .logo3d .rig { position: absolute; inset: 0; transform-style: preserve-3d; }
.logo3d .rig { transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
.logo3d .pc { position: absolute; top: 0; height: 100%; transform-style: preserve-3d; }
.logo3d .pc img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.logo3d .pc .main { filter: drop-shadow(0 10px 9px rgba(9, 48, 30, .20)) drop-shadow(0 2px 2px rgba(9, 48, 30, .16)); }
.logo3d .pc .back { filter: brightness(.45) saturate(1.1); transform: translateZ(-9px); opacity: .55; }
.logo3d .pc .shine { filter: brightness(3.2) saturate(.35); opacity: 0;
  -webkit-mask-image: linear-gradient(105deg, transparent 38%, #000 50%, transparent 62%); mask-image: linear-gradient(105deg, transparent 38%, #000 50%, transparent 62%);
  -webkit-mask-size: 300% 100%; mask-size: 300% 100%; -webkit-mask-position: 100% 0; mask-position: 100% 0; pointer-events: none; }
.logo3d .emb { left: 0; width: 28.41%; }
.logo3d .l1 { left: 28.92%; width: 13.54%; }
.logo3d .l2 { left: 45.14%; width: 13.54%; }
.logo3d .l3 { left: 61.37%; width: 10.15%; }
.logo3d .l4 { left: 73.24%; width: 14.18%; }
.logo3d .l5 { left: 88.33%; width: 11.66%; }

.logo3d .ground { position: absolute; left: 6%; right: 6%; bottom: -16%; height: 15%; border-radius: 50%; background: radial-gradient(50% 50% at 50% 50%, rgba(9, 48, 30, .34), rgba(9, 48, 30, 0) 72%); filter: blur(5px); opacity: 0; }
.logo3d .glow { position: absolute; inset: -34% -12%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, .95), rgba(120, 200, 120, .16) 58%, rgba(255, 255, 255, 0) 78%); opacity: 0; pointer-events: none; }
.logo3d .hair { position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: linear-gradient(90deg, transparent, #1e7a2f 30%, #f28a2e 70%, transparent); transform: scaleX(0); opacity: 0; }

/* Chờ trang tải xong mới chạy để người xem thấy trọn vẹn từ đầu */
.js .logo3d .pc { opacity: 0; }
.js.loaded .logo3d .hair { animation: hair 1.1s cubic-bezier(.6, 0, .2, 1) .1s both; }
.js.loaded .logo3d .ground { animation: ground 2.4s cubic-bezier(.2, .7, .2, 1) .5s both; }
.js.loaded .logo3d .glow { animation: glow 2.6s ease-out 2.0s both; }
.js.loaded .logo3d .emb { animation: emb-in 1.9s cubic-bezier(.2, .85, .22, 1) .55s both; }
.js.loaded .logo3d .lt { animation: lt-in .95s cubic-bezier(.2, 1.1, .3, 1) calc(1.15s + var(--i) * .11s) both; }
.js.loaded .logo3d .punch { animation: punch 1s cubic-bezier(.3, 0, .2, 1) 2.3s both; }
.js.loaded .logo3d .shine { animation: shine 1.5s cubic-bezier(.5, 0, .3, 1) calc(2.45s + var(--i) * .07s) both; }
.js.loaded .logo3d.again .shine { animation: shine2 1.5s cubic-bezier(.5, 0, .3, 1) calc(var(--i) * .07s) both; }

@keyframes hair { 0% { opacity: 0; transform: scaleX(0); } 30% { opacity: 1; } 75% { opacity: 1; transform: scaleX(1); } 100% { opacity: 0; transform: scaleX(1); } }
@keyframes ground { 0% { opacity: 0; transform: scale(.25, .5); } 100% { opacity: 1; transform: none; } }
@keyframes glow { 0% { opacity: 0; transform: scale(.7); } 35% { opacity: .85; } 100% { opacity: .25; transform: scale(1); } }
@keyframes emb-in {
  0% { opacity: 0; transform: translateZ(-520px) rotateZ(-140deg) rotateY(-62deg); }
  35% { opacity: 1; }
  78% { transform: translateZ(26px) rotateZ(6deg) rotateY(8deg); }
  100% { opacity: 1; transform: none; }
}
@keyframes lt-in {
  0% { opacity: 0; transform: translate3d(0, -42%, -460px) rotateX(78deg) rotateY(-30deg); }
  45% { opacity: 1; }
  100% { opacity: 1; transform: none; }
}
@keyframes punch { 0% { transform: none; } 45% { transform: translateZ(46px) scale(1.04); } 100% { transform: none; } }
@keyframes shine { 0% { opacity: 1; -webkit-mask-position: 100% 0; mask-position: 100% 0; } 100% { opacity: 1; -webkit-mask-position: 0% 0; mask-position: 0% 0; } }
@keyframes shine2 { 0% { opacity: 1; -webkit-mask-position: 100% 0; mask-position: 100% 0; } 100% { opacity: 1; -webkit-mask-position: 0% 0; mask-position: 0% 0; } }

@media (prefers-reduced-motion: reduce) {
  .js .logo3d .pc { opacity: 1; }
  .js.loaded .logo3d *, .js .logo3d * { animation: none !important; transition: none !important; }
  .logo3d .ground { opacity: 1; } .logo3d .shine, .logo3d .glow, .logo3d .hair { display: none; }
}