@layer components {

  
  .mh-glass-container {
    width: 100%;
    height: 380px;
    background-color: #fdfdfd;
    border: 2px solid var(--mh-black);
    box-shadow: 8px 8px 0px var(--mh-black);
    background-image:
      linear-gradient(#e0e0e0 1px, transparent 1px),
      linear-gradient(90deg, #e0e0e0 1px, transparent 1px);
    background-size: 20px 20px;
    position: relative;
    overflow: hidden;
  }

  .mh-glass-grid {
    display: grid;
    width: 100%;
    height: 100%;
    grid-template-columns: repeat(20, 1fr);
    grid-template-rows: repeat(20, 1fr);
  }

  .mh-gl-frame {
    grid-column: 5 / 17;
    grid-row: 4 / 18;
    border: 4px solid #333;
    background: #f0f0f0;
    box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.1);
    position: relative;
    opacity: 0;
    animation: popOnGrid 0.5s ease forwards;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 10px;
    font-size: 0.6rem;
    color: #999;
  }

  .mh-gl-measure {
    position: absolute;
    font-size: 0.6rem;
    color: var(--mh-black);
    background: #fff;
    padding: 0 4px;
    border: 1px dotted #000;
    opacity: 0;
    animation: fadeIn 0.5s ease forwards 0.5s;
  }
  .mh-gl-measure-w { bottom: -20px; width: 100%; text-align: center; }
  .mh-gl-measure-h { right: -35px; top: 50%; transform: rotate(-90deg); }

  .mh-gl-pane {
    position: absolute;
    width: 90%;
    height: 90%;
    top: 5%;
    left: 5%;
    background: linear-gradient(135deg, rgba(225, 245, 254, 0.6) 0%, rgba(225, 245, 254, 0.9) 50%, rgba(225, 245, 254, 0.6) 100%);
    border: 1px solid #81d4fa;
    opacity: 0;
    transform: translateY(20px) scale(0.95);
    animation: installGlass 2s ease forwards 1s;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .mh-gl-pane::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(45deg, transparent 40%, rgba(255, 255, 255, 0.8) 50%, transparent 60%);
    background-size: 200% 200%;
    animation: shine 3s infinite;
  }

  .mh-gl-lifter {
    font-size: 2rem;
    position: absolute;
    z-index: 5;
    opacity: 0;
    animation: lifterAction 2.5s ease forwards 1s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
  }

  .mh-gl-lift-tag {
    font-size: 0.5rem;
    background: #000;
    color: #fff;
    padding: 2px;
  }

  .mh-gl-seal {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    border: 4px solid transparent;
    z-index: 4;
    animation: sealJoint 1.5s linear forwards 3.5s;
  }

  .mh-gl-worker {
    grid-column: 15 / 19;
    grid-row: 14 / 18;
    font-size: 2.5rem;
    z-index: 10;
    opacity: 0;
    animation: popOnGrid 0.5s ease forwards 0.8s;
  }

  
  @keyframes fadeIn { to { opacity: 1; } }
  @keyframes installGlass {
    0%   { opacity: 0; transform: translateY(50px) scale(0.9); }
    40%  { opacity: 1; transform: translateY(0) scale(0.95); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
  }
  @keyframes lifterAction {
    0%   { opacity: 0; transform: translateY(50px); }
    20%  { opacity: 1; transform: translateY(0); }
    80%  { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(0) scale(1.2); }
  }
  @keyframes shine {
    0%   { background-position: 150% 150%; }
    100% { background-position: -50% -50%; }
  }
  @keyframes sealJoint {
    0%   { border-color: transparent; }
    25%  { border-top-color: #333; border-right-color: transparent; border-bottom-color: transparent; border-left-color: transparent; }
    50%  { border-top-color: #333; border-right-color: #333; border-bottom-color: transparent; border-left-color: transparent; }
    75%  { border-top-color: #333; border-right-color: #333; border-bottom-color: #333; border-left-color: transparent; }
    100% { border-color: #333; }
  }

  
  @media (prefers-reduced-motion: reduce) {
    .mh-gl-frame, .mh-gl-measure, .mh-gl-pane, .mh-gl-lifter,
    .mh-gl-seal, .mh-gl-worker {
      animation: none !important;
      opacity: 1 !important;
    }
    .mh-gl-pane::after { animation: none !important; }
  }
}