#section-03-broken-photo {
    position: fixed;
    inset: 0;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #2D3B49;
    visibility: hidden;
    pointer-events: none;
    z-index: 7;
  }
  #section-03-broken-photo.is-visible {
    visibility: visible;
    pointer-events: auto;
  }
  #section-03-broken-photo.is-complete {
    visibility: hidden;
    pointer-events: none;
  }
  .broken-photo-frame {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background: #2D3B49;
  }
  .broken-photo-stage {
    position: absolute;
    inset: 0;
  }
  .broken-photo-heart,
  .broken-photo-heart-broken,
  .broken-photo-positioning {
    position: absolute;
    left: 50%;
    top: 50%;
    display: block;
    width: auto;
    height: auto;
    max-width: 100vw;
    max-height: 100vh;
    object-fit: contain;
    transform: translate(-50%, -50%);
  }
  .broken-photo-heart {
    opacity: 0;
    filter: blur(8px) saturate(0.96);
    transform: translate(-50%, -50%) scale(0.985);
    transition: opacity 450ms ease, filter 450ms ease, transform 450ms ease;
  }
  .broken-photo-heart.is-visible {
    opacity: 1;
    filter: blur(0) saturate(1);
    transform: translate(-50%, -50%) scale(1);
  }
  .broken-photo-heart.is-hidden {
    opacity: 0;
    filter: blur(6px);
    transform: translate(-50%, -50%) scale(1.01);
  }
  .broken-photo-heart-broken {
    opacity: 0;
    filter: blur(8px) saturate(0.96);
    transform: translate(-50%, -50%) scale(0.985);
    transition: opacity 210ms ease, filter 260ms ease, transform 260ms ease;
  }
  .broken-photo-heart-broken.is-visible {
    opacity: 1;
    filter: blur(0) saturate(1);
    transform: translate(-50%, -50%) scale(1);
  }
  .broken-photo-heart-broken.is-hidden {
    opacity: 0;
    filter: blur(6px);
    transform: translate(-50%, -50%) scale(1.01);
  }
  .broken-photo-positioning {
    opacity: 0;
    pointer-events: none;
    transition: opacity 260ms ease;
  }
  .broken-photo-pieces-group {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 900px; /* UPDATE THIS LATER if needed */
    height: 650px; /* UPDATE THIS LATER if needed */
    transform: translate(-50%, -50%);
    pointer-events: none;
    opacity: 1;
    transition: opacity 320ms ease;
  }
  .broken-photo-pieces-group.is-hidden {
    opacity: 0;
    pointer-events: none;
  }
  .broken-photo-piece {
    position: absolute;
    display: inline-block;
    width: max-content;
    height: max-content;
    opacity: 0;
    filter: blur(10px);
    transition: opacity 260ms ease, filter 320ms ease, transform 320ms ease;
    pointer-events: none;
  }
  .broken-photo-piece.is-visible {
    opacity: 1;
    filter: blur(0);
  }
  .broken-photo-piece-visual {
    display: block;
    width: var(--piece-width, 180px);
    height: auto;
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
    transition: filter 220ms ease;
  }
  .broken-photo-piece-hit {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
  }
  .broken-photo-piece-hit svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
  }
  .broken-photo-piece-hit svg path,
  .broken-photo-piece-hit svg polygon,
  .broken-photo-piece-hit svg rect,
  .broken-photo-piece-hit svg circle,
  .broken-photo-piece-hit svg ellipse {
    fill: transparent !important;
    stroke: transparent !important;
    opacity: 0 !important;
    pointer-events: none;
  }
  .broken-photo-piece.is-interactive .broken-photo-piece-hit svg path,
  .broken-photo-piece.is-interactive .broken-photo-piece-hit svg polygon,
  .broken-photo-piece.is-interactive .broken-photo-piece-hit svg rect,
  .broken-photo-piece.is-interactive .broken-photo-piece-hit svg circle,
  .broken-photo-piece.is-interactive .broken-photo-piece-hit svg ellipse {
    pointer-events: all;
    cursor: pointer;
  }
  .broken-photo-piece.is-active .broken-photo-piece-visual {
    filter: brightness(1.1);
  }
  
  /* UPDATE PIECE 1 POSITION HERE */
  .broken-photo-piece-1 {
    --piece-width: 170px;
    left: 152px;
    top: 125px;
    transform: scale(3.1);
    z-index: 4;
  }

  .broken-photo-piece-1.is-active {
    animation: pieceFloat1 2.4s ease-in-out infinite;
  }
  
  /* UPDATE PIECE 2 POSITION HERE */
  .broken-photo-piece-2 {
    --piece-width: 200px;
    left: 580px;
    top: 100px;
    transform: scale(2.42);
    z-index: 6;
  }
  .broken-photo-piece-2.is-active {
    animation: pieceFloat2 2.4s ease-in-out infinite;
  }
  
  /* UPDATE PIECE 3 POSITION HERE */
  .broken-photo-piece-3 {
    --piece-width: 190px;
    left: 135px;
    top: 240px;
    transform: scale(2.73);
    z-index: 5;
  }
  .broken-photo-piece-3.is-active {
    animation: pieceFloat3 2.4s ease-in-out infinite;
  }
  
  /* UPDATE PIECE 4 POSITION HERE */
  .broken-photo-piece-4 {
    --piece-width: 180px;
    left: 235px;
    top: 525px;
    transform: scale(3.65);
    z-index: 2;
  }

  .broken-photo-piece-4.is-active {
    animation: pieceFloat4 2.4s ease-in-out infinite;
  }
  
  /* UPDATE PIECE 5 POSITION HERE */
  .broken-photo-piece-5 {
    --piece-width: 190px;
    left: 625px;
    top: 350px;
    transform: scale(2.15);
    z-index: 1;
  }

  .broken-photo-piece-5.is-active {
    animation: pieceFloat5 2.4s ease-in-out infinite;
  }

  @keyframes pieceFloat1 {
    0% {
      transform: scale(3.1);
    }
    50% {
      transform: translateY(-6px) scale(3.15);
    }
    100% {
      transform: scale(3.1);
    }
  }
  
  @keyframes pieceFloat2 {
    0% {
      transform: scale(2.42);
    }
    50% {
      transform: translateY(-6px) scale(2.47);
    }
    100% {
      transform: scale(2.42);
    }
  }
  @keyframes pieceFloat3 {
    0% {
      transform: scale(2.73);
    }
    50% {
      transform: translateY(-6px) scale(2.78);
    }
    100% {
      transform: scale(2.73);
    }
  }
  @keyframes pieceFloat4 {
    0% {
      transform: scale(3.65);
    }
    50% {
      transform: translateY(-6px) scale(3.7);
    }
    100% {
      transform: scale(3.65);
    }
  }

  @keyframes pieceFloat5 {
    0% {
      transform: scale(2.15);
    }
    50% {
      transform: translateY(-6px) scale(2.2);
    }
    100% {
      transform: scale(2.15);
    }
  }
  
  .broken-photo-full-group {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: max-content;
    height: max-content;
    opacity: 0;
    pointer-events: none;
    transition: opacity 360ms ease;
    z-index: 12;
  }
  .broken-photo-full-group.is-visible {
    opacity: 1;
    pointer-events: auto;
  }
  .broken-photo-full-photo {
    display: block;
    width: auto;
    height: auto;
    max-width: 100vw;
    max-height: 100vh;
    object-fit: contain;
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
  }
  .broken-photo-full-heart-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }
  .broken-photo-full-heart {
    display: block;
    width: 100%;
    height: auto;
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
  }

  .broken-photo-full-heart-hit {
    position: absolute;
    left: 54%;
    top: 63%;
    width: 80px;
    height: 50px;
    transform: translate(-50%, -50%);
    cursor: pointer;
    z-index: 2;
  }
  
  .broken-photo-full-heart {
    transition: transform 220ms ease, filter 220ms ease;
    transform-origin: center center;
  }
  
  .broken-photo-full-heart-layer.is-hovering .broken-photo-full-heart {
    transform: scale(1.02);
  }
  
  .broken-photo-full-heart-layer.has-idle-cue .broken-photo-full-heart {
    filter: brightness(1.08);
  }
  
  #section-03-broken-photo.is-interactive {
    cursor: none;
  }
  
  #section-03-broken-photo.is-interactive .broken-photo-piece.is-interactive .broken-photo-piece-hit svg path,
  #section-03-broken-photo.is-interactive .broken-photo-piece.is-interactive .broken-photo-piece-hit svg polygon,
  #section-03-broken-photo.is-interactive .broken-photo-piece.is-interactive .broken-photo-piece-hit svg rect,
  #section-03-broken-photo.is-interactive .broken-photo-piece.is-interactive .broken-photo-piece-hit svg circle,
  #section-03-broken-photo.is-interactive .broken-photo-piece.is-interactive .broken-photo-piece-hit svg ellipse,
  #section-03-broken-photo.is-interactive .broken-photo-full-heart-hit {
    cursor: none !important;
  }
  
  .broken-photo-hover-cursor {
    position: absolute;
    left: 0;
    top: 0;
    width: 64px;
    height: 64px;
    pointer-events: none;
    opacity: 0;
    transform: translate3d(-9999px, -9999px, 0);
    transition: opacity 100ms ease;
    z-index: 30;
    will-change: transform, opacity;
  }
  
  .broken-photo-hover-cursor.is-visible {
    opacity: 1;
  }
  
  .broken-photo-hover-cursor img {
    width: 32px;
    height: 32px;
    display: block;
  }
  
  .broken-photo-exit-overlay {
    position: absolute;
    inset: 0;
    background: #121b28;
    opacity: 0;
    pointer-events: none;
    transition: opacity 220ms ease;
    z-index: 20;
  }
  .broken-photo-exit-overlay.is-visible {
    opacity: 1;
  }