/* SHARED SOCIAL BAR — every page (home, reel, shorts, making of, ai, contact).
   Loaded by php/social-links.php so the markup and its styles always ship together.
   Nothing else in index.css or main.css styles this component. */

        :root {
            --social-icon-size: clamp(27px, 2.2vw, 35px);
            --social-icon-pad: 8px;  /* enlarges the hover / tap area */
            --social-gap: 3vh;       /* breathing room under the icons */
            --social-row: calc(var(--social-icon-size) + var(--social-icon-pad) * 2);

            /* Pages pad their content by this, so scrolling to the end leaves the same
               gap above the icons as there is below them. */
            --social-clearance: calc(var(--social-row) + var(--social-gap) * 2 + env(safe-area-inset-bottom));
        }

        .social-links-container {
            position: fixed;
            left: 0;
            right: 0;
            bottom: 0;
            height: 150px; /* the gradient's reach, not the icon row */
            display: flex;
            align-items: flex-end;
            justify-content: center;
            padding-bottom: calc(var(--social-gap) + env(safe-area-inset-bottom));
            z-index: 20;
            pointer-events: none; /* the strip sits over the page, so it must not swallow clicks */
            transition: opacity 0.3s ease;
        }

        /* The gradient belongs to the bar, so a page does not need its own bottom fade.
           It lives on the strip rather than on .social-links so it is painted from the
           first frame while the icons are still fading in. */
        .social-links-container::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(
                to bottom,
                rgba(0, 0, 0, 0) 0%,
                rgba(0, 0, 0, 0.02) 4%,
                rgba(0, 0, 0, 0.08) 20%,
                rgba(0, 0, 0, 0.2) 40%,
                rgba(0, 0, 0, 0.4) 70%,
                rgba(0, 0, 0, 0.7) 100%
            );
        }

        .social-links {
            position: relative;
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            white-space: nowrap;
            opacity: 0.7;
        }

        /* Only the home page fades the bar in, as part of its intro. Everywhere else
           the icons are chrome that is already in place. */
        .social-links-container.reveal .social-links {
            opacity: 0;
            transition: opacity 0.7s ease;
        }

        .social-links-container.reveal.loaded .social-links {
            opacity: 0.7;
        }

        /* Parked while a film or the image lightbox is open. */
        .social-links-container.covered {
            opacity: 0;
        }

        .social-links-container.covered .social-links a {
            pointer-events: none;
        }

        .social-links a {
            pointer-events: auto;
            margin: 0 0.2vw;
        }

        .social-links i {
            color: #B6BEBE;
            font-size: var(--social-icon-size);
            padding: var(--social-icon-pad);
            transition: color 0.3s ease, transform 0.3s ease;
        }

        .social-links i:hover {
            color: #ffffff;
            transform: scale(1.1);
        }

        @media only screen and (max-width: 840px) {
            .social-links a {
                margin: 0 0.3vw;
            }
        }