/* Subtle, progressive motion for the Barbero theme. Content stays visible without JS. */
@keyframes barbero-hero-enter {
    from { opacity: 0; transform: translate3d(0, 24px, 0); }
    to { opacity: 1; transform: translate3d(0, 0, 0); }
}

.home-hero .hero-copy .hero-eyebrow,
.home-hero .hero-copy .hero-title,
.home-hero .hero-copy .hero-description,
.home-hero .hero-copy > div {
    animation: barbero-hero-enter 700ms cubic-bezier(.2,.7,.25,1) both;
}

.home-hero .hero-copy .hero-eyebrow { animation-delay: 80ms; }
.home-hero .hero-copy .hero-title { animation-delay: 220ms; }
.home-hero .hero-copy .hero-description { animation-delay: 360ms; }
.home-hero .hero-copy > div { animation-delay: 500ms; }

.hero-eyebrow-text.is-typing::after {
    display: inline-block;
    width: 2px;
    height: 1em;
    margin-left: 3px;
    background: currentColor;
    content: '';
    vertical-align: -0.12em;
    animation: barbero-caret 750ms steps(1, end) infinite;
}

@keyframes barbero-caret {
    50% { opacity: 0; }
}

.has-scroll-motion .scroll-motion-item {
    opacity: 0;
    transform: translate3d(0, 18px, 0);
    transition: opacity 560ms cubic-bezier(.2,.7,.25,1), transform 560ms cubic-bezier(.2,.7,.25,1);
    transition-delay: var(--scroll-motion-delay, 0ms);
}

.has-scroll-motion .scroll-motion-item.scroll-motion-title {
    transform: translate3d(0, 12px, 0);
}

.has-scroll-motion .scroll-motion-item.is-in-view {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.home-hero-copy-only {
    grid-column: 1 / -1;
}

@media (min-width: 1024px) {
    .home-hero:not(.home-hero-copy-only) {
        grid-template-columns: 1fr 1fr;
    }

    .home-hero .hero-copy h1 {
        max-width: 22ch;
        font-size: clamp(2.8rem, 3.4vw, 3.25rem);
    }

    .home-hero-copy-only {
        clip-path: none !important;
        margin-left: 0 !important;
        padding-left: clamp(3rem, 8vw, 8rem) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .home-hero .hero-copy .hero-eyebrow,
    .home-hero .hero-copy .hero-title,
    .home-hero .hero-copy .hero-description,
    .home-hero .hero-copy > div {
        animation: none;
    }

    .hero-eyebrow-text.is-typing::after { animation: none; }

    .has-scroll-motion .scroll-motion-item,
    .has-scroll-motion .scroll-motion-item.is-in-view {
        opacity: 1;
        transform: none;
        transition: none;
    }
}