/* ════════════════════════════
       ANIMATION SYSTEM
    ════════════════════════════ */

    /* ── Loading screen ── */
    #loading-screen {
      position: fixed;
      inset: 0;
      background: linear-gradient(160deg, #fdf2f0 0%, #f5efe6 40%, #fce4ec 100%);
      z-index: 99999;
      overflow: hidden;
      transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);
      display: flex;
      align-items: center;
      justify-content: center;
    }
    #loading-screen.ls-hide {
      opacity: 0;
      pointer-events: none;
    }

    /* Center branding */
    .ls-center {
      text-align: center;
      z-index: 2;
      animation: ls-center-in 0.6s ease-out both;
    }
    @keyframes ls-center-in {
      0%   { opacity: 0; transform: scale(0.8) translateY(12px); }
      100% { opacity: 1; transform: scale(1) translateY(0); }
    }
    .ls-center-heart {
      width: 48px;
      height: 48px;
      margin: 0 auto 10px;
      animation: ls-pulse 1.2s ease-in-out infinite;
      filter: drop-shadow(0 0 12px rgba(192, 48, 46, 0.35));
      overflow: visible;
    }
    @keyframes ls-pulse {
      0%, 100% { transform: scale(1); }
      50%      { transform: scale(1.15); }
    }
    .ls-names {
      font-family: 'Dancing Script', cursive;
      font-size: 28px;
      font-weight: 600;
      color: #b83048;
      letter-spacing: 0.03em;
      opacity: 0;
      animation: ls-names-in 0.5s 0.25s ease-out forwards;
    }
    @keyframes ls-names-in {
      0%   { opacity: 0; transform: translateY(8px); }
      100% { opacity: 1; transform: translateY(0); }
    }

    /* Hearts inside loading screen */
    @keyframes loading-heart-float {
      0%   { transform: translateY(0) translateX(0) scale(var(--lhs, 1)) rotate(0deg); opacity: 0; }
      10%  { opacity: var(--lho, 0.8); }
      50%  { transform: translateY(-35vh) translateX(calc(var(--lhx, 0px) * 0.6)) scale(var(--lhs, 1)) rotate(var(--lhr, 15deg)); }
      85%  { opacity: calc(var(--lho, 0.8) * 0.5); }
      100% { transform: translateY(-75vh) translateX(var(--lhx, 0px)) scale(calc(var(--lhs, 1) * 0.6)) rotate(calc(var(--lhr, 15deg) * 2)); opacity: 0; }
    }
    .loading-heart {
      position: absolute;
      bottom: -8%;
      user-select: none;
      pointer-events: none;
      animation: loading-heart-float ease-out forwards;
      filter: blur(var(--lhb, 0px));
    }
    .loading-heart svg {
      display: block;
      width: 100%;
      height: 100%;
    }

    /* Sparkle particles */
    @keyframes ls-sparkle {
      0%   { transform: scale(0) rotate(0deg); opacity: 0; }
      20%  { opacity: 1; }
      50%  { transform: scale(1) rotate(180deg); opacity: 0.8; }
      100% { transform: scale(0) rotate(360deg); opacity: 0; }
    }
    .ls-sparkle {
      position: absolute;
      width: 4px;
      height: 4px;
      background: radial-gradient(circle, #f0c27a, #d4a056);
      border-radius: 50%;
      pointer-events: none;
      animation: ls-sparkle ease-in-out forwards;
    }

    /* ── Scroll-reveal base states ── */
    [data-reveal] {
      opacity: 0;
      transform: translateY(40px);
      filter: blur(6px);
      transition: opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1),
                  transform 0.85s cubic-bezier(0.22, 1, 0.36, 1),
                  filter 0.85s cubic-bezier(0.22, 1, 0.36, 1);
    }
    [data-reveal="fade-in"] {
      opacity: 0;
      transform: none;
      filter: blur(6px);
      transition: opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1),
                  filter 0.85s cubic-bezier(0.22, 1, 0.36, 1);
    }
    [data-reveal="fade-down"] {
      opacity: 0;
      transform: translateY(-32px);
      filter: blur(6px);
      transition: opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1),
                  transform 0.85s cubic-bezier(0.22, 1, 0.36, 1),
                  filter 0.85s cubic-bezier(0.22, 1, 0.36, 1);
    }
    [data-reveal="scale-in"] {
      opacity: 0;
      transform: scale(0.82);
      filter: blur(6px);
      transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
                  transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1),
                  filter 0.8s cubic-bezier(0.22, 1, 0.36, 1);
    }
    [data-reveal="slide-left"] {
      opacity: 0;
      transform: translateX(70px);
      filter: blur(6px);
      transition: opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1),
                  transform 0.85s cubic-bezier(0.22, 1, 0.36, 1),
                  filter 0.85s cubic-bezier(0.22, 1, 0.36, 1);
    }
    [data-reveal="slide-right"] {
      opacity: 0;
      transform: translateX(-70px);
      filter: blur(6px);
      transition: opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1),
                  transform 0.85s cubic-bezier(0.22, 1, 0.36, 1),
                  filter 0.85s cubic-bezier(0.22, 1, 0.36, 1);
    }
    /* fade-left used in nhagai families */
    [data-reveal="fade-left"] {
      opacity: 0;
      transform: translateX(-40px);
      filter: blur(6px);
      transition: opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1),
                  transform 0.85s cubic-bezier(0.22, 1, 0.36, 1),
                  filter 0.85s cubic-bezier(0.22, 1, 0.36, 1);
    }
    /* fade-right used in nhagai families */
    [data-reveal="fade-right"] {
      opacity: 0;
      transform: translateX(40px);
      filter: blur(6px);
      transition: opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1),
                  transform 0.85s cubic-bezier(0.22, 1, 0.36, 1),
                  filter 0.85s cubic-bezier(0.22, 1, 0.36, 1);
    }
    [data-reveal].is-visible {
      opacity: 1;
      transform: none;
      filter: blur(0);
    }

    /* ── Wishes bar entrance animation ── */
    @keyframes wishes-bar-enter {
      0% {
        opacity: 0;
        transform: translateX(-50%) translateY(20px);
      }
      100% {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
      }
    }
    .wishes-bar.is-entering {
      animation: wishes-bar-enter 0.6s cubic-bezier(0.25, 1, 0.5, 1) forwards;
    }

    @media (prefers-reduced-motion: reduce) {
      [data-reveal] { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
      #loading-screen, #nhg-loading { display: none !important; }
      .wishes-bar { opacity: 1 !important; }
    }