/* Shared hero shell for inner pages (not homepage). */
.page-hero {
    box-sizing: border-box;
    height: 500px;
    min-height: 500px !important;
    max-height: 500px;
    padding-top: 110px;
    padding-bottom: 48px;
    overflow: hidden;
}

.shop-banner.page-hero {
    padding-bottom: 88px;
}

.page-hero [class*="-banner-media"] {
    overflow: hidden;
}

.page-hero [class*="-banner-media"] img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    will-change: transform;
}

.page-hero [class*="-banner-inner"] {
    z-index: 3;
}

.page-hero [class*="-banner-title"]::after {
    content: '';
    display: block;
    width: 72px;
    height: 1.5px;
    margin: 20px auto 0;
    background: #C9B58F;
    box-shadow: 0 0 12px rgba(201, 181, 143, 0.55);
}

/* ---- Shop: zoom in from the top + gold shine ---- */
.shop-banner.page-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(105deg, transparent 38%, rgba(255, 248, 230, 0.22) 50%, transparent 62%);
    background-size: 240% 100%;
    animation: hero-shop-shine 7s ease-in-out infinite;
}

.shop-banner.page-hero [class*="-banner-media"] img {
    object-position: top center;
    transform-origin: 50% 0%;
    animation: hero-shop-zoom 14s ease-in-out infinite alternate;
}

/* ---- Portfolio: cinematic left-right pan (no zoom) ---- */
.portfolio-banner.page-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    box-shadow: inset 90px 0 90px rgba(20, 14, 10, 0.32), inset -90px 0 90px rgba(20, 14, 10, 0.32);
}

.portfolio-banner.page-hero [class*="-banner-media"] img {
    object-position: center;
    width: 132%;
    max-width: none;
    height: 100%;
    margin-left: -16%;
    animation: hero-portfolio-pan 16s ease-in-out infinite alternate;
}

/* ---- Services: zoom out from a close crop ---- */
.services-banner.page-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: radial-gradient(circle at 50% 48%, transparent 22%, rgba(20, 14, 10, 0.34) 100%);
    animation: hero-services-pulse 7s ease-in-out infinite alternate;
}

.services-banner.page-hero [class*="-banner-media"] img {
    object-position: center 30%;
    transform-origin: 50% 42%;
    animation: hero-services-out 15s ease-in-out infinite alternate;
}

/* ---- About: rise + gold glow ---- */
.about-banner.page-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: radial-gradient(ellipse 42% 38% at 72% 28%, rgba(201, 181, 143, 0.28), transparent 70%);
    animation: hero-about-glow 10s ease-in-out infinite alternate;
}

.about-banner.page-hero [class*="-banner-media"] img {
    object-position: center 40%;
    transform-origin: 38% 72%;
    animation: hero-about-rise 18s ease-in-out infinite alternate;
}

.hero .hero-inner { z-index: 3; }

/* ---- Contact: vertical drift + light wash ---- */
.contact-banner.page-hero::before {
    content: '';
    position: absolute;
    inset: -12% 0;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(250, 237, 220, 0.12), transparent 42%, rgba(201, 181, 143, 0.16));
    animation: hero-contact-wash 8s ease-in-out infinite alternate;
}

.contact-banner.page-hero [class*="-banner-media"] img {
    object-position: center 45%;
    width: 100%;
    height: 128%;
    animation: hero-contact-drift 13s ease-in-out infinite alternate;
}

@keyframes hero-shop-zoom {
    from { transform: scale(1); }
    to { transform: scale(1.2); }
}

@keyframes hero-shop-shine {
    0% { background-position: 130% 0; opacity: 0.15; }
    45% { opacity: 0.7; }
    100% { background-position: -50% 0; opacity: 0.12; }
}

@keyframes hero-portfolio-pan {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(-14%, 0, 0); }
}

@keyframes hero-services-out {
    from { transform: scale(1.34); }
    to { transform: scale(1.04); }
}

@keyframes hero-services-pulse {
    from { opacity: 0.35; }
    to { opacity: 1; }
}

@keyframes hero-about-rise {
    from { transform: scale(1.04) translate3d(0, 4%, 0); }
    to { transform: scale(1.16) translate3d(-3%, -3%, 0); }
}

@keyframes hero-about-glow {
    from { opacity: 0.4; transform: translate3d(0, 0, 0); }
    to { opacity: 1; transform: translate3d(-6%, 4%, 0); }
}

@keyframes hero-contact-drift {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(0, -10%, 0); }
}

@keyframes hero-contact-wash {
    from { opacity: 0.3; transform: translateY(0); }
    to { opacity: 0.85; transform: translateY(6%); }
}

@media (prefers-reduced-motion: reduce) {
    .page-hero::before,
    .page-hero [class*="-banner-media"] img {
        animation: none !important;
        transform: none !important;
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
    }

}