/* ===== Modern Reveal System ===== */
        .reveal {
            opacity: 0;
            transform: translateY(60px) scale(.98);
            transition: opacity 1s cubic-bezier(.16, 1, .3, 1),
                transform 1s cubic-bezier(.16, 1, .3, 1);
        }

        .reveal.show {
            opacity: 1;
            transform: none;
        }

        .reveal-left {
            transform: translateX(-80px);
        }

        .reveal-right {
            transform: translateX(80px);
        }

        .stagger>* {
            opacity: 0;
            transform: translateY(30px);
            transition: all .6s ease;
        }

        .stagger.show>* {
            opacity: 1;
            transform: none;
        }

        .stagger.show>*:nth-child(1) {
            transition-delay: .1s
        }

        .stagger.show>*:nth-child(2) {
            transition-delay: .2s
        }

        .stagger.show>*:nth-child(3) {
            transition-delay: .3s
        }

        .stagger.show>*:nth-child(4) {
            transition-delay: .4s
        }

        /* ===== Base Reveal ===== */
        .reveal {
            opacity: 0;
            transform: translateY(60px) scale(.98);
            transition:
                opacity .9s cubic-bezier(.16, 1, .3, 1),
                transform .9s cubic-bezier(.16, 1, .3, 1);
            will-change: opacity, transform;
        }

        .reveal.show {
            opacity: 1;
            transform: none;
        }

        /* Directional */
        .reveal-left {
            transform: translateX(-80px);
        }

        .reveal-right {
            transform: translateX(80px);
        }

        /* ===== Image Canvas Entrances ===== */
        .reveal img {
            transition:
                transform .9s cubic-bezier(.16, 1, .3, 1),
                opacity .9s cubic-bezier(.16, 1, .3, 1),
                box-shadow .4s ease;
        }

        /* ===== Hover Depth (images only) ===== */
        [data-modal] {
            cursor: zoom-in;
            transform-origin: center;
        }

        [data-modal]:hover {
            transform: translateY(-6px) scale(1.015);
            box-shadow: 0 25px 60px rgba(0, 0, 0, .18);
        }

        /* ===== Stagger ===== */
        .stagger>* {
            opacity: 0;
            transform: translateY(30px);
            transition:
                opacity .6s ease,
                transform .6s ease;
        }

        .stagger.show>* {
            opacity: 1;
            transform: none;
        }

        .stagger.show>*:nth-child(1) {
            transition-delay: .1s
        }

        .stagger.show>*:nth-child(2) {
            transition-delay: .2s
        }

        .stagger.show>*:nth-child(3) {
            transition-delay: .3s
        }

        .stagger.show>*:nth-child(4) {
            transition-delay: .4s
        }


/* ============================
   MOBILE RESPONSIVE OVERRIDES
   ============================ */

/* Kill desktop "scene" layouts on mobile */
@media (max-width: 768px) {

  /* Remove forced heights */
  [class*="h-["] {
    height: auto !important;
  }

  /* Reset absolute layouts */
  .relative > img.absolute {
    position: static !important;
    width: 100% !important;
    transform: none !important;
    margin-bottom: 1.5rem;
  }

  /* Stack all image scenes */
  .relative {
    display: grid;
    gap: 1.5rem;
  }

  /* Reduce extreme spacing */
  section {
    padding-top: 6rem !important;
    padding-bottom: 6rem !important;
  }

  /* Headings scale properly */
  h1 { font-size: 2.5rem !important; }
  h2 { font-size: 2rem !important; }

  /* Center text-heavy sections */
  .lg\\:col-span-5,
  .lg\\:col-span-7 {
    grid-column: span 12 !important;
  }
}