/* -- RESPONSIVE MOBILE & TABLET (<= 900px) -- */
@media (max-width: 900px) {
  /* Site Header updates */
  #site-header {
    padding: 0 16px;
    height: 48px;
  }
  .h-center {
    display: none; /* Hide live clock on mobile to save space */
  }

  /* Gallery alignment */
  #gallery-area {
    align-items: flex-start;
    padding-top: 40px;
    padding-bottom: 40px;
  }

  /* Track flow */
  #gallery-track {
    flex-direction: column;
    padding: 0 20px;
    gap: 40px;
  }

  /* Override card widths dynamically generated by original JS, constrain max-width */
  .g-card-inner {
    width: 100% !important;
    height: auto !important;
    max-width: 400px;
    margin: 0 auto;
  }
  .g-img {
    width: 100%;
    height: auto;
    object-fit: contain;
  }

  /* Reduce sizes of canvas to match new images sizes */
  .g-card-inner canvas.ripple-canvas {
    width: 100% !important;     
  }

  /* Bottom strip */
  #bottom-strip {
    height: 64px;
    flex-direction: column;
  }

  #tagline-block {
    display: none; /* Hide tagline block to save vertical space on mobile */
  }

  #ticker-wrap {
    border-right: none;
  }

  /* Landing Page responsiveness */
  #ld-headline h1 {
    font-size: clamp(48px, 15vw, 90px);
  }
  #ld-nav {
    padding: 16px;
  }
  #ld-nav-links {
    gap: 16px;
    font-size: 9px;
  }
  #ld-bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 20px 40px;
    gap: 20px;
  }
  #ld-left {
    align-items: center;
    text-align: center;
    gap: 20px;
  }
  #ld-center {
    display: flex !important;
    transform: scale(0.65);
    margin: -10px 0;
  }
  #ld-right {
    display: flex !important;
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    width: 600px !important;
    height: 600px !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    opacity: 0.35 !important;
    z-index: 0 !important;
    pointer-events: none !important;
    align-items: center !important;
    justify-content: center !important;
  }
  #ld-sigil svg {
    animation: bgPulse 8s ease-in-out infinite alternate !important;
    transform: rotate(90deg) scale(1.3);
  }
  @keyframes bgPulse {
    0% { transform: rotate(90deg) scale(1.2); filter: drop-shadow(0 0 2px rgba(0,0,0,0.2)); }
    100% { transform: rotate(90deg) scale(1.35); filter: drop-shadow(0 0 15px rgba(0,0,0,0.8)); }
  }
  /* Breathtaking drawing animation for cybersigilism */
  #ld-sigil svg path,
  #ld-sigil svg line,
  #ld-sigil svg polygon,
  #ld-sigil svg rect,
  #ld-sigil svg circle {
    stroke-dasharray: 800;
    stroke-dashoffset: 800;
    animation: sigilDraw 7s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate;
  }
  @keyframes sigilDraw {
    0% { stroke-dashoffset: 800; opacity: 0; }
    20% { opacity: 0.6; }
    80% { stroke-dashoffset: 0; opacity: 1; }
    100% { stroke-dashoffset: 0; opacity: 1; }
  }
  
  #ld-barcode {
    display: flex !important;
    opacity: 0.5;
    transform: scale(0.85);
  }
  #ld-tagline {
    max-width: 280px;
    font-size: 12px;
  }
  #ld-enter-btn {
    transform: scale(1.1);
  }

  /* Footer adjustments */
  #site-footer {
    padding: 0 16px;
    justify-content: center !important;
  }
  .am-btn-wrap {
    padding: 0 20px !important;
    height: 40px !important;
  }

  /* Scroll hints and stuff */
  #scroll-hint {
    bottom: 24px !important;
    left: 20px !important;
    transform: none !important;
    right: auto !important;
    font-size: 8px;
    width: auto !important;
  }
  #scroll-hint::before, #scroll-hint::after {
    width: 16px;
  }
}