/* =============================================================
 * Funnelysis — Background Atmosphere
 *
 * The brand's signature visual layer. Two parts:
 *   1. A checkerboard pattern (images/bg.svg, two purple squares
 *      at 5% opacity in a 56×56 tile) with a soft white-to-gray
 *      gradient overlay.
 *   2. Twelve floating glass bubbles that drift in slow loops
 *      and *magnify* the checkerboard behind them via a scaled
 *      copy of the same background applied to ::before.
 *
 * Used on every page of funnelysis.com. Include this file (and
 * tokens.css) and drop the markup from atmosphere.html below
 * into the body for the full effect.
 *
 * Lifted verbatim from styles.css §5–§6 with original line refs.
 * ============================================================= */

/* -----------------------------------------------------------
 * 1. CHECKERBOARD + GRADIENT
 *    styles.css L156-198
 * ----------------------------------------------------------- */
.background-pattern {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: var(--z-bg-pattern);
    background-color: var(--background-gray);
    background-image:
        linear-gradient(
            to bottom,
            rgba(var(--gradient-top-color), var(--gradient-top-opacity)) 0%,
            rgba(var(--gradient-bottom-color), var(--gradient-bottom-opacity)) 100%
        ),
        url('images/bg.svg');
    background-repeat: repeat;
    background-size: auto, 3.5rem 3.5rem;
    background-position: 0 0;
    background-attachment: fixed;
    pointer-events: none;
}

/* -----------------------------------------------------------
 * 2. BUBBLE LAYER
 *    styles.css L364-489
 *
 *  Each .bubble is:
 *    - A transparent circle with a thin yellow border and a soft
 *      yellow glow.
 *    - Its ::before is a scaled-up copy of the page background
 *      (the same checkerboard + gradient) clipped by the circle,
 *      producing the "magnifying glass" effect.
 *    - Its ::after is a radial highlight at 30% 30% for a glass
 *      shine.
 *    - On capable browsers, backdrop-filter adds a slight blur
 *      + brightness lift over whatever is behind.
 * ----------------------------------------------------------- */
.floating-bubbles-background {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: var(--z-bubbles);
    pointer-events: none;
}

.bubble {
    position: absolute;
    border-radius: var(--radius-circle);
    overflow: hidden;
    will-change: transform;
    backface-visibility: hidden;
    box-shadow: var(--glow-yellow), var(--inset-bubble);
    border: 1px solid rgba(242, 191, 98, 0.3);
    background: transparent;
}

/* Magnified background behind the bubble */
.bubble::before {
    content: '';
    position: absolute;
    inset: -20%;
    border-radius: 0;
    background-color: var(--background-gray);
    background-image:
        linear-gradient(
            to bottom,
            rgba(var(--gradient-top-color), var(--gradient-top-opacity)) 0%,
            rgba(var(--gradient-bottom-color), var(--gradient-bottom-opacity)) 100%
        ),
        url('images/bg.svg');
    background-repeat: repeat;
    background-size: auto, 5rem 5rem;       /* larger than the page tile = magnification */
    background-position: 0 0;
    background-attachment: fixed;
    z-index: -1;
    transform: scale(1.2);
    transform-origin: center center;
    opacity: 0.95;
}

/* Glass highlight */
.bubble::after {
    content: '';
    display: block;
    position: absolute;
    inset: 0;
    border-radius: var(--radius-circle);
    background: radial-gradient(
        circle at 30% 30%,
        rgba(255, 255, 255, 0.3),
        rgba(255, 255, 255, 0) 70%
    );
    z-index: 1;
    pointer-events: none;
}

/* -----------------------------------------------------------
 * Twelve bubbles, varied size + position + animation timing.
 * Sizes range from 100px to 700px; durations 15–45s.
 * ----------------------------------------------------------- */
.bubble-1  { top: 15%; left: 10%; width: 450px; height: 450px;
             animation: pronounced-float 25s infinite ease-in-out;
             backdrop-filter: blur(1.5px) brightness(1.08);
             -webkit-backdrop-filter: blur(1.5px) brightness(1.08); }
.bubble-2  { top: 60%; left: 70%; width: 550px; height: 550px;
             animation: pronounced-float 32s infinite ease-in-out reverse;
             backdrop-filter: blur(2px) brightness(1.10);
             -webkit-backdrop-filter: blur(2px) brightness(1.10); }
.bubble-3  { top: 70%; left: 20%; width: 400px; height: 400px;
             animation: pronounced-float 28s infinite ease-in-out;
             animation-delay: 2s;
             backdrop-filter: blur(1.2px) brightness(1.06);
             -webkit-backdrop-filter: blur(1.2px) brightness(1.06); }
.bubble-4  { top: 10%; left: 65%; width: 350px; height: 350px;
             animation: pronounced-float 30s infinite ease-in-out reverse;
             animation-delay: 1s;
             backdrop-filter: blur(1px) brightness(1.04);
             -webkit-backdrop-filter: blur(1px) brightness(1.04); }
.bubble-5  { top: 45%; left: 35%; width: 500px; height: 500px;
             animation: pronounced-float 36s infinite ease-in-out;
             animation-delay: 3s;
             backdrop-filter: blur(1.8px) brightness(1.12);
             -webkit-backdrop-filter: blur(1.8px) brightness(1.12); }
.bubble-6  { top: 28%; left: 85%; width: 180px; height: 180px;
             animation: pronounced-float 22s infinite ease-in-out;
             animation-delay: 1.5s; }
.bubble-7  { top: 85%; left: 55%; width: 150px; height: 150px;
             animation: pronounced-float-alt2 20s infinite ease-in-out reverse;
             animation-delay: 0.8s; }
.bubble-8  { top: 38%; left: 8%;  width: 120px; height: 120px;
             animation: pronounced-float-alt1 18s infinite ease-in-out;
             animation-delay: 2.5s; }
.bubble-9  { top: 15%; left: 45%; width: 650px; height: 650px;
             animation: pronounced-float 40s infinite ease-in-out reverse;
             animation-delay: 4s; }
.bubble-10 { top: 65%; left: 90%; width: 100px; height: 100px;
             animation: pronounced-float-alt2 15s infinite ease-in-out;
             animation-delay: 1.2s; }
.bubble-11 { top: 5%;  left: 25%; width: 200px; height: 200px;
             animation: pronounced-float-alt1 24s infinite ease-in-out reverse;
             animation-delay: 3.2s; }
.bubble-12 { top: 90%; left: 5%;  width: 700px; height: 700px;
             animation: pronounced-float 45s infinite ease-in-out;
             animation-delay: 5s; }

@supports not (backdrop-filter: blur(1px)) {
    .bubble {
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(242, 191, 98, 0.4);
    }
}

/* -----------------------------------------------------------
 * 3. KEYFRAMES — three "pronounced-float" loops give variety.
 *    styles.css L601-636
 * ----------------------------------------------------------- */
@keyframes pronounced-float {
    0%   { transform: translate(0, 0); }
    25%  { transform: translate(80px, -60px); }
    50%  { transform: translate(-40px, 100px); }
    75%  { transform: translate(60px, 40px); }
    100% { transform: translate(0, 0); }
}

@keyframes pronounced-float-alt1 {
    0%   { transform: translate(0, 0); }
    30%  { transform: translate(60px, -80px); }
    70%  { transform: translate(-70px, 60px); }
    100% { transform: translate(0, 0); }
}

@keyframes pronounced-float-alt2 {
    0%   { transform: translate(0, 0); }
    40%  { transform: translate(-50px, -60px); }
    80%  { transform: translate(70px, 30px); }
    100% { transform: translate(0, 0); }
}

/* -----------------------------------------------------------
 * 4. RESPONSIVE — bubbles shrink on smaller screens and lose
 *    some of their blur intensity.
 * ----------------------------------------------------------- */
@media (max-width: 992px) {
    .bubble {
        backdrop-filter: blur(0.8px) brightness(1.04);
        -webkit-backdrop-filter: blur(0.8px) brightness(1.04);
    }
    .bubble-1 { width: 320px; height: 320px; }
    .bubble-2 { width: 380px; height: 380px; }
    .bubble-3 { width: 290px; height: 290px; }
    .bubble-4 { width: 250px; height: 250px; }
    .bubble-5 { width: 340px; height: 340px; }
    .bubble-6 { width: 140px; height: 140px; }
    .bubble-7 { width: 120px; height: 120px; }
    .bubble-8 { width: 100px; height: 100px; }
    .bubble-9 { width: 450px; height: 450px; }
    .bubble-10 { width:  80px; height:  80px; }
    .bubble-11 { width: 160px; height: 160px; }
    .bubble-12 { width: 480px; height: 480px; }
}

@media (max-width: 768px) {
    .bubble {
        backdrop-filter: blur(0.6px) brightness(1.03);
        -webkit-backdrop-filter: blur(0.6px) brightness(1.03);
    }
    .bubble-1 { width: 220px; height: 220px; }
    .bubble-2 { width: 260px; height: 260px; }
    .bubble-3 { width: 200px; height: 200px; }
    .bubble-4 { width: 180px; height: 180px; }
    .bubble-5 { width: 240px; height: 240px; }
    .bubble-6 { width: 120px; height: 120px; }
    .bubble-7 { width:  90px; height:  90px; }
    .bubble-8 { width:  70px; height:  70px; }
    .bubble-9 { width: 300px; height: 300px; }
    .bubble-10 { width:  60px; height:  60px; }
    .bubble-11 { width: 130px; height: 130px; }
    .bubble-12 { width: 350px; height: 350px; }
}

@media (max-width: 480px) {
    .bubble-7, .bubble-8, .bubble-10 { display: none; }
    .bubble-6  { width: 100px; height: 100px; }
    .bubble-9  { width: 200px; height: 200px; }
    .bubble-11 { width:  90px; height:  90px; }
    .bubble-12 { width: 240px; height: 240px; }
}