/* ============================================================
       FUSE SECTION WRAPPER
       Each animation block = .fuse-wrapper > .fuse-pin-wrapper > .fuse-section

       .fuse-pin-wrapper  — tall div that gives scroll room.
                            Height = SCROLL_MULTIPLIER × 100vh.
                            EDIT SCROLL_MULTIPLIER in JS to make
                            the section feel slower or faster.

       .fuse-section      — the sticky viewport-filling panel.
    ============================================================ */
    .fuse-pin-wrapper {
      position: relative;
      /* height set dynamically in JS based on SCROLL_MULTIPLIER */
    }

    .fuse-section {
      position: sticky;
      top: 0;
      left: 0;
      width: 100%;
      height: 100vh;
      overflow: hidden;
      display: flex;
      align-items: stretch;
    }

    /* subtle noise grain overlay */
    .fuse-section::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
      pointer-events: none;
      opacity: 0.6;
      z-index: 0;
    }

    /* ============================================================
       COLUMNS
    ============================================================ */
    .fuse-col {
      position: relative;
      z-index: 1;
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .fuse-col-left  { padding: 3rem 2rem 3rem 4rem; }
    .fuse-col-right { padding: 3rem 4rem 3rem 3rem; }

    /* ============================================================
       SVG DIVIDER
    ============================================================ */
    .divider-svg {
      position: absolute;
      left: 50%;
      top: 0;
      transform: translateX(-50%);
      width: 120px;
      height: 100%;
      z-index: 2;
      overflow: visible;
      pointer-events: none;
    }

    .divider-path {
      fill: none;
      stroke-width: 1.2;
    }

    /* ============================================================
       PULSE DOT
    ============================================================ */
    .fuse-pulse {
      position: fixed; /* set in JS too — explicit here for safety */
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: radial-gradient(circle, #ffffff 0%, #f0f0f0 50%, #cccccc 100%);
      box-shadow:
        0 0 4px 2px rgba(255,255,255,1),
        0 0 10px 4px rgba(255,255,255,0.7),
        0 0 24px 8px rgba(200,200,255,0.35),
        0 0 48px 16px rgba(160,130,255,0.2);
      z-index: 10;
      margin-left: -5px;
      margin-top: -5px;
      pointer-events: none;
      opacity: 0;
    }

    .fuse-pulse::before {
      content: '';
      position: absolute;
      top: 50%; left: 50%;
      transform: translate(-50%,-50%);
      width: 18px; height: 18px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(255,255,255,0.4) 0%, transparent 70%);
      animation: ember-flicker 0.15s ease-in-out infinite alternate;
    }

    .fuse-pulse::after {
      content: '';
      position: absolute;
      inset: -4px;
      border-radius: 50%;
      border: 1px solid rgba(255,255,255,0.35);
      animation: ring-pulse 1.1s ease-out infinite;
    }

    @keyframes ember-flicker {
      0%   { transform: translate(-50%,-50%) scale(1);    opacity: 0.8; }
      100% { transform: translate(-50%,-50%) scale(1.35); opacity: 1;   }
    }

    @keyframes ring-pulse {
      0%   { transform: scale(1); opacity: 0.8; }
      100% { transform: scale(3); opacity: 0;   }
    }