.service-transition { display: block; z-index: 200; color: #f3f5f3; }
.curtain-caption { padding: 40px 5.2%; }
.curtain-name { font-size: 70px; letter-spacing: 0; line-height: 1.08; overflow-wrap: anywhere; }
.curtain-number { font-size: 12px; letter-spacing: 0; }
.curtain-panels i { flex: 1; animation-delay: 0ms; }
.curtain-panels i:nth-child(2) { animation-delay: 45ms; }
.curtain-panels i:nth-child(3) { animation-delay: 90ms; }
.is-covering .curtain-panels i { animation: curtain-cover 360ms both; animation-delay: inherit; }
.is-covering .curtain-panels i:nth-child(2) { animation-delay: 45ms; }
.is-covering .curtain-panels i:nth-child(3) { animation-delay: 90ms; }
.is-covering .curtain-caption { animation: curtain-caption-in 240ms 240ms both; }
.is-covered .curtain-panels i { transform: translateY(0); }
.is-covered .curtain-caption { opacity: 1; }
.is-revealing .curtain-panels i { animation: curtain-reveal 440ms 180ms both; }
.is-revealing .curtain-panels i:nth-child(2) { animation-delay: 225ms; }
.is-revealing .curtain-panels i:nth-child(3) { animation-delay: 270ms; }
.is-revealing .curtain-caption { animation: curtain-caption-out 210ms 90ms both; }
@keyframes curtain-cover { from { transform: translateY(101%); } to { transform: translateY(0); } }
@keyframes curtain-reveal { from { transform: translateY(0); } to { transform: translateY(-101%); } }
@keyframes curtain-caption-in { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes curtain-caption-out { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-20px); } }
@media (max-width: 900px) { .curtain-name { font-size: 48px; } }
@media (max-width: 600px) {
  .curtain-caption { padding: 28px 24px; }
  .curtain-name { font-size: 32px; }
  .curtain-caption-arrow { font-size: 45px; }
}
@media (prefers-reduced-motion: reduce) { .service-transition { display: none !important; } }
