/* Hero animation states — requires .yn-ph--js guard added by product-hero-anim.js */

.yn-ph.yn-ph--js .yn-ph-eyebrow,
.yn-ph.yn-ph--js .yn-ph-title,
.yn-ph.yn-ph--js .yn-ph-desc {
    opacity: 0;
    transform: translateY(24px);
    will-change: opacity, transform;
    transition: opacity .65s cubic-bezier(.22, 1, .36, 1), transform .65s cubic-bezier(.22, 1, .36, 1);
}

.yn-ph.yn-ph--js .yn-ph-card {
    opacity: 0;
    transform: translateX(28px) translateY(10px);
    will-change: opacity, transform;
    transition: opacity .65s cubic-bezier(.22, 1, .36, 1), transform .65s cubic-bezier(.22, 1, .36, 1);
}

/* Animate in */
.yn-ph.yn-ph--visible .yn-ph-eyebrow {
    opacity: 1;
    transform: none;
    transition-delay: 0ms;
}

.yn-ph.yn-ph--visible .yn-ph-title {
    opacity: 1;
    transform: none;
    transition-delay: 100ms;
}

.yn-ph.yn-ph--visible .yn-ph-desc {
    opacity: 1;
    transform: none;
    transition-delay: 200ms;
}

.yn-ph.yn-ph--visible .yn-ph-card {
    opacity: 1;
    transform: none;
    transition-delay: 150ms;
}