/* ==========================================================================
   Loading screen + scroll / hero animations
   ========================================================================== */

   #loading-screen {
    position: fixed;
    inset: 0;
    background-color: var(--background-color);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    opacity: 1;
    transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  }
  
  #loading-screen.fade-out {
    opacity: 0;
    pointer-events: none;
    transition-delay: 200ms;
  }
  
  .loader-matrix-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    height: 100px;
    padding: 0 10px;
  }
  
  .matrix-dot {
    width: 12px;
    height: 12px;
    background-color: var(--accent-main);
    border-radius: 50%;
    will-change: transform, opacity;
    animation: matrixShift 2s infinite cubic-bezier(0.25, 1, 0.5, 1);
  }
  
  .matrix-dot:nth-child(1) { animation-delay: 0s; }
  .matrix-dot:nth-child(2) { animation-delay: 0.15s; }
  .matrix-dot:nth-child(4) { animation-delay: 0.45s; }
  
  .matrix-dot.matrix-hero {
    background-color: var(--special-accent);
    animation: heroShift 2s infinite cubic-bezier(0.25, 1, 0.5, 1);
    animation-delay: 0.3s;
  }
  
  #loading-screen.elements-out .matrix-dot {
    animation: exitUp 1s forwards cubic-bezier(0.16, 1, 0.3, 1);
  }
  
  #loading-screen.elements-out .matrix-dot:nth-child(1) { animation-delay: 0s; }
  #loading-screen.elements-out .matrix-dot:nth-child(2) { animation-delay: 0.07s; }
  #loading-screen.elements-out .matrix-dot.matrix-hero { animation-delay: 0.14s; }
  #loading-screen.elements-out .matrix-dot:nth-child(4) { animation-delay: 0.21s; }
  
  @keyframes exitUp {
    to {
      transform: translateY(-60px);
      opacity: 0;
    }
  }
  
  @keyframes matrixShift {
    0%, 100% { transform: scale(1); opacity: 1; border-radius: 50%; }
    25% { transform: scaleX(1.8) scaleY(0.75); opacity: 0.9; }
    50% { transform: scale(0.55); border-radius: 2px; opacity: 0.6; }
    75% { transform: scale(1.15); border-radius: 50%; opacity: 1; }
  }
  
  @keyframes heroShift {
    0%, 100% { transform: scale(1) rotate(0deg); border-radius: 50%; opacity: 1; }
    25% { transform: scale(1.3) rotate(45deg); border-radius: 4px; opacity: 1; }
    50% { transform: scale(0.65) rotate(90deg); border-radius: 2px; opacity: 0.8; }
    75% { transform: scale(1.15) rotate(135deg); border-radius: 50%; opacity: 1; }
  }
  
  /* Hero entrance */
  @keyframes megaEntrance {
    0% {
      opacity: 0;
      filter: blur(10px);
      transform: translateY(40px) scale(0.96);
    }
    100% {
      opacity: 1;
      filter: blur(0);
      transform: translateY(0) scale(1);
    }
  }
  
  .static-line,
  .action-line,
  .hero-socials {
    opacity: 0;
  }
  
  .hero-start .static-line { animation: megaEntrance 1s cubic-bezier(0.16, 1, 0.3, 1) both; }
  .hero-start .action-line { animation: megaEntrance 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both; }
  .hero-start .hero-socials { animation: megaEntrance 1.3s cubic-bezier(0.16, 1, 0.3, 1) 0.28s both; }
  
  .name-button {
    position: relative;
    background: linear-gradient(to right, var(--accent-main) 50%, transparent 50%);
    background-size: 200% 100%;
    background-position: 100% 0;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
    -webkit-text-stroke-color: var(--accent-main) !important;
    transition: background-position 0.5s cubic-bezier(0.76, 0, 0.24, 1), -webkit-text-stroke-color 0.4s ease !important;
  }
  
  .name-button:hover {
    background-position: 0 0;
  }
  
  /* Scroll-driven entrances */
  .ascii-leaf-parent-container,
  .ascii-leaves-parent-container,
  .info-heading-text,
  .info-lede,
  .info-card,
  .info-btn-wrapper,
  .about-photo-frame {
    opacity: 0;
    will-change: transform, opacity;
    transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1),
                transform 1.2s cubic-bezier(0.16, 1, 0.3, 1),
                filter 1.2s ease;
  }

  .ascii-leaf-parent-container { transform: translateY(80px); }
  .ascii-leaves-parent-container { transform: translateY(-80px); }

  .info-section--left .info-heading-text { transform: translateX(-80px) skewX(8deg); filter: blur(4px); }
  .info-section--right .info-heading-text { transform: translateX(80px) skewX(-8deg); filter: blur(4px); }
  .info-lede, .info-card, .info-btn-wrapper { transform: translateY(50px); }
  .about-photo-frame { transform: translateY(30px) scale(0.96); }
  
  .in-view {
    opacity: 1 !important;
    transform: translateX(0) translateY(0) scale(1) skewX(0deg) !important;
    filter: blur(0) !important;
  }
  
  .ascii-leaf-parent-container.in-view {
    opacity: 0.15 !important;
    transform: translateY(0) !important;
  }
  
  .ascii-leaves-parent-container.in-view {
    opacity: 0.4 !important;
    transform: translateY(0) !important;
  }
  
  .info-card:nth-child(2) { transition-delay: 0.08s; }
  .info-card:nth-child(3) { transition-delay: 0.16s; }
  .info-card:nth-child(4) { transition-delay: 0.24s; }
  
  .info-page-link {
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), color 0.4s ease-in-out !important;
  }
  
  .info-page-link:hover {
    transform: translateY(-4px) !important;
  }