/* ============================================
   LEFT SIDE INTRO (whole column fades in as one)
   ============================================ */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.home-left {
  opacity: 0;
}

.home-left.show {
  animation: fadeInUp 0.6s ease forwards;
}

/* ============================================
   TAB FAN-OUT ANIMATION
   Tabs slide in slowly from bottom-right.
   Staggered by JS with --delay custom property.
   ============================================ */
.tab.visible {
  animation: tabReveal 2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: var(--delay, 0s);
}

@keyframes tabReveal {
  from {
    opacity: 0;
    transform: translate(80px, 80px);
  }
  to {
    opacity: 1;
    transform: translate(0, 0);
  }
}

/* ============================================
   SCREEN TRANSITIONS
   Leaving screen snaps out instantly.
   Entering screen slides in from the right — fast, physical, no linger.
   ============================================ */
.screen.leaving {
  animation: screenOut 0.07s ease forwards;
}

.screen.entering {
  animation: screenIn 0.28s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes screenOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}

@keyframes screenIn {
  from {
    opacity: 0;
    transform: translateX(28px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ============================================
   BACK ARROW PULSE
   ============================================ */
@keyframes subtlePulse {
  0%, 100% { box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
  50%       { box-shadow: 0 4px 20px rgba(176, 196, 212, 0.4); }
}

.back-arrow {
  animation: subtlePulse 3s ease-in-out infinite;
  animation-delay: 1s;
}

/* ============================================
   POEM CARD ENTRANCE (staggered)
   ============================================ */
@keyframes cardIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

.writing-gallery .poem-card {
  opacity: 0;
}

.screen.active .writing-gallery .poem-card {
  animation: cardIn 0.4s ease forwards;
  animation-delay: var(--card-delay, 0s);
}