/* HEBE coordinated motion system — premium movement without changing brand identity. */
:root {
    --hebe-motion-ease: cubic-bezier(.22, 1, .36, 1);
    --hebe-motion-red: #fe0202;
    --hebe-pointer-x: 50vw;
    --hebe-pointer-y: 35vh;
}

html { scroll-behavior: smooth; }
body.istudio-hebe { overflow-x: clip; }

body.istudio-hebe::before {
    content: "";
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    width: var(--hebe-scroll, 0%);
    height: 3px;
    pointer-events: none;
    background: linear-gradient(90deg, #fe0202, #6D6D6D);
    box-shadow: 0 0 16px rgba(254,2,2,.45);
    transition: width .08s linear;
}

body.istudio-hebe::after {
    content: "";
    position: fixed;
    z-index: -1;
    width: 34rem;
    height: 34rem;
    left: calc(var(--hebe-pointer-x) - 17rem);
    top: calc(var(--hebe-pointer-y) - 17rem);
    border-radius: 50%;
    pointer-events: none;
    opacity: .26;
    background: radial-gradient(circle, rgba(254,2,2,.09), transparent 68%);
    transform: translateZ(0);
}

.hebe-nav-shell {
    transition: transform .45s var(--hebe-motion-ease), background-color .3s ease,
        box-shadow .3s ease !important;
}
.hebe-nav-shell.is-scrolled {
    box-shadow: 0 14px 40px rgba(0,0,0,.08);
    backdrop-filter: blur(16px);
}
.hebe-nav-shell .nav-link { position: relative; }
.hebe-nav-shell .nav-link::after {
    content: "";
    position: absolute;
    left: .75rem;
    right: .75rem;
    bottom: .3rem;
    height: 2px;
    background: #fe0202;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform .38s var(--hebe-motion-ease);
}
.hebe-nav-shell .nav-link:hover::after,
.hebe-nav-shell .nav-link.active::after {
    transform: scaleX(1);
    transform-origin: left;
}

/* Elements are hidden only after JS confirms the observer is ready. */
.hebe-motion-ready .hebe-motion-reveal {
    opacity: 0;
    transform: translate3d(0, 34px, 0) scale(.985);
    filter: blur(5px);
    transition: opacity .8s var(--hebe-motion-ease),
        transform .9s var(--hebe-motion-ease), filter .7s ease;
    transition-delay: var(--hebe-motion-delay, 0ms);
}
.hebe-motion-ready .hebe-motion-reveal.is-motion-visible {
    opacity: 1;
    transform: none;
    filter: none;
}
.hebe-motion-ready .hebe-motion-reveal[data-motion-side="left"] {
    transform: translate3d(-44px, 10px, 0);
}
.hebe-motion-ready .hebe-motion-reveal[data-motion-side="right"] {
    transform: translate3d(44px, 10px, 0);
}
.hebe-motion-ready .hebe-motion-reveal.is-motion-visible { transform: none; }

.hebe-motion-card {
    --hebe-tilt-x: 0deg;
    --hebe-tilt-y: 0deg;
    --hebe-lift: 0px;
    transform: perspective(900px) rotateX(var(--hebe-tilt-x)) rotateY(var(--hebe-tilt-y)) translateY(var(--hebe-lift));
    transform-style: preserve-3d;
    will-change: transform;
    transition: transform .55s var(--hebe-motion-ease), box-shadow .45s ease;
}
.hebe-motion-card:hover {
    --hebe-lift: -8px;
    box-shadow: 0 28px 60px rgba(0,0,0,.16);
}
.hebe-motion-card img {
    transition: transform 1s var(--hebe-motion-ease), filter .5s ease !important;
}
.hebe-motion-card:hover img { transform: scale(1.045); }

.btn, .hebe-account-button, .hebe-explore-more-designs {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    transition: transform .35s var(--hebe-motion-ease), box-shadow .35s ease,
        background-color .25s ease, color .25s ease !important;
}
.btn::before, .hebe-account-button::before, .hebe-explore-more-designs::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -50% -20%;
    background: linear-gradient(110deg, transparent 32%, rgba(255,255,255,.46) 50%, transparent 68%);
    transform: translateX(-115%) rotate(8deg);
    transition: transform .75s var(--hebe-motion-ease);
}
.btn:hover::before, .hebe-account-button:hover::before,
.hebe-explore-more-designs:hover::before { transform: translateX(115%) rotate(8deg); }
.btn:hover, .hebe-account-button:hover, .hebe-explore-more-designs:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 30px rgba(254,2,2,.18);
}

.hebe-template-carousel {
    transform: perspective(1200px) rotateX(var(--hero-rotate-x, 0deg)) rotateY(var(--hero-rotate-y, 0deg));
    transform-style: preserve-3d;
    transition: transform .8s var(--hebe-motion-ease);
    box-shadow: 0 35px 80px rgba(0,0,0,.14);
}
.hebe-template-slide img { transform: scale(1.02); }
.hebe-template-slide.is-active img { animation: hebeHeroLivingImage 5.2s ease-out both; }
.hebe-template-slide.is-active span { animation: hebeHeroCaption .75s .16s var(--hebe-motion-ease) both; }

@keyframes hebeHeroLivingImage {
    from { transform: scale(1.085); filter: brightness(.82); }
    to { transform: scale(1.02); filter: brightness(1); }
}
@keyframes hebeHeroCaption {
    from { opacity: 0; transform: translate3d(0, 22px, 0); }
    to { opacity: 1; transform: none; }
}

.hebe-istudio-brand span { transition: letter-spacing .4s var(--hebe-motion-ease); }
.hebe-istudio-brand:hover span { letter-spacing: .055em; }

@media (max-width: 991.98px), (pointer: coarse) {
    body.istudio-hebe::after { display: none; }
    .hebe-motion-ready .hebe-motion-reveal,
    .hebe-motion-ready .hebe-motion-reveal[data-motion-side] {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        transition: none !important;
    }
    .hebe-motion-card { transform: none !important; will-change: auto; }
    .hebe-motion-card:hover { --hebe-lift: 0px; box-shadow: none; }
    .hebe-template-carousel { transform: none !important; }
}

/* Explore catalogue pagination keeps the full library easy to browse. */
.hebe-catalogue-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin: 36px 0 64px;
}
.hebe-page-step {
    display: inline-flex;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    padding: 11px 20px;
    border: 1px solid #fe0202;
    border-radius: 999px;
    color: #fe0202;
    background: #FFFFFF;
    font-weight: 750;
    transition: .25s ease;
}
.hebe-page-step:hover { color: #FFFFFF; background: #fe0202; transform: translateY(-2px); }
.hebe-page-status { color: #000000; text-align: center; font-weight: 750; }
.hebe-page-status small { display: block; margin-top: 2px; color: #6D6D6D; font-size: 12px; font-weight: 500; }

/* Explore catalogue: replace desktop masonry with a compact, reliable phone grid. */
@media (max-width: 767.98px) {
    main > .container > .grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        columns: auto !important;
        gap: 12px !important;
        width: 100%;
    }
    main > .container > .grid > .card {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
    }
    main > .container > .grid > .card img {
        display: block;
        width: 100%;
        min-height: 0;
        aspect-ratio: 1 / 1;
        object-fit: cover;
    }
    main > .container > .grid .card-action { display: none; }
    main > .container > .grid .card-badge {
        top: 8px;
        left: 8px;
        max-width: calc(100% - 16px);
        padding: 5px 7px;
        overflow: hidden;
        font-size: 9px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    main > .container > .grid .card-content { padding: 11px 10px 12px; }
    main > .container > .grid .card-content h3 {
        display: -webkit-box;
        min-height: 2.7em;
        margin-bottom: 4px;
        overflow: hidden;
        font-size: 13px;
        line-height: 1.35;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }
    main > .container > .grid .card-content p { font-size: 11px; }
    .hebe-catalogue-pagination { gap: 8px; margin: 28px 0 48px; }
    .hebe-page-step { min-height: 44px; padding: 9px 13px; font-size: 12px; }
    .hebe-page-status { font-size: 12px; }
}

@media (max-width: 340px) {
    main > .container > .grid { grid-template-columns: minmax(0, 1fr) !important; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    body.istudio-hebe::before, body.istudio-hebe::after { display: none; }
    .hebe-motion-ready .hebe-motion-reveal,
    .hebe-motion-ready .hebe-motion-reveal[data-motion-side] {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        transition: none !important;
    }
    .hebe-motion-card, .hebe-template-carousel { transform: none !important; transition: none !important; }
    .hebe-template-slide.is-active img, .hebe-template-slide.is-active span { animation: none !important; }
    .btn::before, .hebe-account-button::before, .hebe-explore-more-designs::before { display: none; }
}