/* =========================
   ANIMATION SYSTEM
   ========================= */

/* Initial hidden state */
.reveal {
  opacity: 1 !important;
  transform: none !important;
}



.reveal.show {
  opacity: 1;
  transform: translateY(0);
}

/* When revealed */
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delays */
.reveal.delay-1 { transition-delay: 0.1s; }
.reveal.delay-2 { transition-delay: 0.2s; }
.reveal.delay-3 { transition-delay: 0.3s; }

/* Subtle divider animation */
.divider.reveal {
  transform: scaleX(0);
  transform-origin: left;
}

.divider.reveal.visible {
  transform: scaleX(1);
}

/* =========================
   SECTION REVEAL
   ========================= */

.section {
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity 0.9s ease,
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

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

/* =========================
   TEXT MOTION
   ========================= */

h2, h3 {
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.section.visible h2,
.section.visible h3 {
  transform: translateY(0);
  opacity: 1;
}
/* =========================
   HOVER MICRO-INTERACTIONS
   ========================= */

.owned-item,
.work-step,
.beyond-item {
  transition:
    border-color 0.3s ease,
    transform 0.3s ease;
}

.owned-item:hover,
.work-step:hover,
.beyond-item:hover {
  border-left-color: var(--accent);
  transform: translateX(4px);
}
.button {
  transition:
    transform 0.25s ease,
    border-color 0.25s ease,
    color 0.25s ease;
}

.button:hover {
  transform: translateY(-3px);
}
/* =========================
   REVEAL ANIMATION
   ========================= */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: all 0.8s ease;
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
}