.line,
.char {
  transform: translate3d(0, 100%, 0);
}

/* Simple centered title with subtitle */
.main-title {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 100;
  pointer-events: none;
  text-align: center;
}

.main-title h1 {
  font-family: 'TWK Lausanne', sans-serif;
  font-size: clamp(4rem, 12vw, 8rem);
  font-weight: 300;
  color: var(--color-text);
  margin: 0;
  opacity: 0.9;
  letter-spacing: -0.02em;

  /* Smaller font on mobile */
  @media (max-width: 768px) {
    font-size: clamp(4rem, 10vw, 5rem);
  }
}

.main-title .subtitle {
  font-family: 'TWK Lausanne', sans-serif;
  font-size: clamp(1rem, 3vw, 1.5rem);
  font-weight: 600;
  color: var(--color-text);
  margin: 0.15rem 0 0 0;
  opacity: 0; /* Hidden initially - typewriter will reveal */
  height: 1.5rem; /* Fixed height prevents layout shift */
  line-height: 1.5rem; /* Match height for consistent spacing */
  /* letter-spacing: 0.05em; */

  /* Smaller subtitle on mobile */
  @media (max-width: 768px) {
    font-size: clamp(0.875rem, 4vw, 1.125rem);
    height: 1.125rem; /* Fixed height on mobile */
    line-height: 1.125rem;
  }
}


/* Typewriter cursor animation */
.typewriter-cursor {
  opacity: 1;
  animation: blink 0.7s infinite;
  margin-left: 2px;
}

@keyframes blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

.container {
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  transform-origin: center center;
}

.grid {
  position: absolute;
  width: max-content;
  height: max-content;
  display: flex;
  gap: 5vw;

  /* Mobile: Slightly more spacious horizontal gaps */
  @media (max-width: 768px) {
    gap: 6vw;
  }
}

.--is-loaded {
  overflow: hidden;

  .grid {
    transition: transform 0.45s cubic-bezier(0.33, 1, 0.68, 1);
    cursor: grab;

    /* Remove cursor styling on touch devices */
    @media (hover: none) {
      cursor: default;
    }
  }
}

.column {
  display: flex;
  flex-direction: column;
  gap: 5vw;

  /* Responsive vertical spacing */
  @media (max-width: 1024px) {
    gap: 4vw; /* Tablets */
  }

  @media (max-width: 768px) {
    gap: 10vw; /* Mobile - match horizontal gap for consistent spacing */
  }
}

/* Responsive column hiding */
@media (max-width: 1024px) {
  .column:nth-child(n+9) {
    display: none !important; /* Show 8 columns on tablets */
  }
}

.column:nth-child(even) {
  margin-top: 10vw;

  /* Responsive column staggering */
  @media (max-width: 1024px) {
    margin-top: 7vw; /* Tablets */
  }

  @media (max-width: 768px) {
    margin-top: 10vw; /* Mobile - match desktop for consistent look */
  }
}

.product {
  position: relative;
  width: 18.5vw;
  aspect-ratio: 1 / 1;

  div {
    width: 18.5vw;
    aspect-ratio: 1 / 1;
  }

  /* Mobile: Bigger products to show exactly 5 columns at 0.75x initial scale */
  @media (max-width: 768px) {
    width: 23vw;
    
    div {
      width: 23vw;
    }
  }

  img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 300ms ease-in-out;
  }

  /* Only use will-change on hover for desktop, or when actually animating */
  @media (hover: hover) {
    img:hover {
      will-change: transform;
    }
  }

  /* Mobile: Only add will-change during animations, not constantly */
  @media (hover: none) {
    img {
      will-change: auto; /* Let browser decide when to use GPU layers */
    }
  }

  /* Only show loading animation for images that haven't loaded yet */
  img[data-src] {
    background-color: #f8f8f8; /* Very light gray */
    background-image: linear-gradient(90deg, #f8f8f8 25%, #f0f0f0 50%, #f8f8f8 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
  }

  @keyframes loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
  }

  /* Only apply hover effects on devices that support hover (desktop) */
  @media (hover: hover) {
    :hover {
      transform: scale(1.05);
    }
  }

  /* Disable hover effects on touch devices to prevent sticky states */
  @media (hover: none) {
    :hover {
      transform: none;
    }
  }

}