* { margin: 0; padding: 0; box-sizing: border-box; }

    .header {
      height: 50px;
      background: #aaffff url('/images/bautroi.gif') repeat-x;
      border: 1px dashed #00f;
      overflow: hidden;
      position: relative;
    }

    .header.shake {
      animation: shakeHeader 1s linear;
    }

    .logo-wrapper, #container {
      width: 190px;
      height: 48px;
      overflow: hidden;
    }

    .logo-wrapper {
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
    }

    #container {
      padding: 0 5px;
    }

    .inner {
      width: 100%;
      height: 100%;
      will-change: transform;
    }

    #logo {
      width: 100%;
      height: 100%;
      object-fit: contain;
      will-change: opacity, filter;
    }

    @keyframes dropBounce {
      0%   { transform: scale(0.3) translateY(-200px); }
      45%  { transform: scale(1.1,0.9) translateY(0); }
      50%  { transform: scale(1.2,0.8) translateY(2px); }
      65%  { transform: scale(1,1.1) translateY(-15px); }
      75%  { transform: scale(1,0.95) translateY(10px); }
      82%  { transform: scale(1,1.05) translateY(-6px); }
      90%  { transform: scale(1,1) translateY(3px); }
      96%  { transform: scale(1,1) translateY(-1px); }
      100% { transform: scale(1,1) translateY(0); }
    }

    @keyframes flash {
      0%,100% { opacity: 1; }
      5%,15%,25%,35%,45%,55%,65%,75%,85%,95% { opacity: 0; }
      10%,20%,30%,40%,50%,60%,70%,80%,90%   { opacity: 1; }
    }

    @keyframes earthquake {
      0%   { transform: translate(0,0); filter:hue-rotate(0deg); }
      10%  { transform: translate(-4px,-4px); filter:hue-rotate(60deg); }
      20%  { transform: translate(4px,4px); filter:hue-rotate(120deg); }
      30%  { transform: translate(-6px,-6px); filter:hue-rotate(180deg); }
      40%  { transform: translate(6px,6px); filter:hue-rotate(240deg); }
      50%  { transform: translate(-3px,-3px); filter:hue-rotate(300deg); }
      60%  { transform: translate(3px,3px); filter:hue-rotate(360deg); }
      70%  { transform: translate(-2px,-2px); filter:hue-rotate(420deg); }
      80%  { transform: translate(2px,2px); filter: hue-rotate(480deg); }
      90%  { transform: translate(-1px,-1px); filter: hue-rotate(540deg); }
      100% { transform: translate(0,0); filter: hue-rotate(600deg); }
    }

    @keyframes shakeHeader {
      0%,100% { transform: translateX(0); }
      10% { transform: translateX(-4px); }
      20% { transform: translateX(4px); }
      30% { transform: translateX(-6px); }
      40% { transform: translateX(6px); }
      50% { transform: translateX(-3px); }
      60% { transform: translateX(3px); }
      70% { transform: translateX(-2px); }
      80% { transform: translateX(2px); }
      90% { transform: translateX(0); }
    }

    @keyframes moveStart {
      0%   { left: 50%; transform: translateX(-50%); }
      100% { left: -190px; transform: translateX(0); }
    }

    @keyframes returnToCenter {
      0%   { left: 100%; transform: translateX(0); }
      100% { left: 50%; transform: translateX(-50%); }
    }

    @keyframes floaty {
      0%, 100% { transform: translateX(-50%) translateY(0); }
      50%      { transform: translateX(-50%) translateY(-5px); }
    }

    .drop   { animation: dropBounce 2s cubic-bezier(0.25, 1, 0.5, 1) forwards; }
    .flash  { animation: flash 1s steps(8,end) 1s forwards; }
    .quake  { animation: earthquake 1s linear; }
    .move   { animation: moveStart 6s linear forwards; }
    .return { animation: returnToCenter 6s linear forwards; }
    .floaty { animation: floaty 2s ease-in-out infinite; }