@layer utilities {
  .fade-up {
    opacity: 0; transform: translateY(20px); transition: opacity var(--ease-slow), transform var(--ease-slow);

    &.visible { opacity: 1; transform: translateY(0); }
  }

  .typed-section {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity var(--ease-slow), transform var(--ease-slow);
  }

  .typed-section .section-body > p,
  .typed-section .schematic-node,
  .typed-section .schematic-tentacle,
  .typed-section .schematic-tentacle-v,
  .typed-section .work-card,
  .typed-section .flow-box,
  .typed-section .flow-tentacle,
  .typed-section .flow-tentacle-v,
  .typed-section .flow-box-final,
  .typed-section .contact-info,
  .typed-section .terminal-form {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.2s ease, transform 0.2s ease;
  }

  .typed-section .arsenal-table tbody tr {
    opacity: 0;
    transition: opacity 0.15s ease;
  }

  .typing-cursor {
    color: var(--acid);
    opacity: 0.6;
    animation: blink 1s step-end infinite;
    text-shadow: var(--glow-sm);

    &.fade-out { animation: none; opacity: 0; transition: opacity 0.5s ease; }
  }
}