/* --- Preloader overlay --- */
    .preloader {
      position: fixed;
      inset: 0;
      display: grid;
      place-items: center;
     
      z-index: 9999;
      transition: opacity .35s ease, visibility .35s ease;
    }
    .preloader--hide {
      opacity: 0;
      visibility: hidden;
    }

    /* Fish image container */
    .preloader__fish {
      width: 88px;               /* adjust size as needed */
      height: 88px;
      display: grid;
      place-items: center;
      border-radius: 999px;
      
      box-shadow: 0 8px 28px rgba(0,0,0,.35), inset 0 0 40px rgba(255,255,255,.04);
      padding: 14px;
    }
    .preloader__fish img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: contain;
      image-rendering: -webkit-optimize-contrast;
    }

    /* Optional: tiny ripple below */
    .preloader__ripple {
      width: 120px;
      height: 12px;
      margin: 14px auto 0;
      
      filter: blur(4px);
      animation: pulse 1.6s ease-in-out infinite;
    }
    @keyframes pulse {
      0%, 100% { transform: scaleX(0.9); opacity: .55; }
      50% { transform: scaleX(1); opacity: .9; }
    }

    /* Demo page content */
    main { padding: 32px; font-family: system-ui, Arial, sans-serif; }
    h1 { margin: 0 0 12px; }
    p { color: #333; }