@charset "UTF-8";
/* CSS Document */

/* Logo nhỏ */
.logo{
  height:50px; width:auto; cursor:pointer;
  transition:transform .25s ease;
}
.logo:hover{ transform:scale(1.06); }

/* Lớp phủ toàn màn hình */
#logo-overlay{
  position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
  visibility:hidden; pointer-events:none; z-index:9999;
  /* nền mờ nhẹ */
  background: radial-gradient(ellipse at center, rgba(255,255,255,.08), rgba(0,0,0,.25));
}

/* Ảnh logo to */
#logo-overlay img{
  width:min(32vmin,290px); height:auto;
  opacity:0; transform:scale(.6) rotate(0deg);
  filter: drop-shadow(0 0 0 rgba(255,255,255,0));
  will-change: transform, opacity, filter;
}

/* Khi hiển thị, chạy animation tổng hợp */
.show-logo #logo-overlay{ visibility:visible; }
.show-logo #logo-overlay img{
  /* Tổng 3.2s:
     - 0%→15%: zoom-in
     - 15%→75%: xoay 2 vòng (720deg)
     - 75%→90%: glow flash
     - 90%→100%: fade out
  */
  animation: zoomSpinGlow 3.2s ease-in-out forwards;
}

/* Keyframes theo thứ tự bạn yêu cầu */
@keyframes zoomSpinGlow{
  0%   { opacity:0; transform:scale(.6) rotate(0deg);    filter:drop-shadow(0 0 0 rgba(255,255,255,0)); }
  10%  { opacity:1; transform:scale(1.12) rotate(0deg); }
  15%  { opacity:1; transform:scale(1.08) rotate(0deg); }
  /* Xoay 2 vòng (0→720deg) */
  75%  { opacity:1; transform:scale(1.08) rotate(720deg); filter:drop-shadow(0 0 0 rgba(255,255,255,0)); }
  /* Glow lóe sáng */
  90%  { opacity:.95; transform:scale(1.22) rotate(740deg);
         filter: drop-shadow(0 0 22px rgba(255,255,255,.85))
                 drop-shadow(0 0 60px rgba(255,255,255,.55)); }
  /* Biến mất */
  100% { opacity:0; transform:scale(.2) rotate(780deg);
         filter: drop-shadow(0 0 0 rgba(255,255,255,0)); }
}

/* Tôn trọng người dùng giảm chuyển động (tùy chọn) */
@media (prefers-reduced-motion: reduce){
  .show-logo #logo-overlay img{ animation: none; opacity:1; }
}