/* Northern Shine Auto Detailing
   Interaction layer. Loads last so it can refine hover states set earlier.
   Everything here is disabled by the reduced motion block in style.css. */

/* ---------------------------------------------------------------
   Header navigation, underline wipes in from the left
   --------------------------------------------------------------- */
.primary-nav a {
    position: relative;
    border-bottom: 0;
}

.primary-nav a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 2px;
    background: var(--teal);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .34s var(--ease);
}

.primary-nav a.is-active::after {
    transform: scaleX(1);
}

.primary-nav a:hover::after,
.primary-nav a:focus-visible::after {
    transform: scaleX(1);
}

/* Header phone icon */
.header-phone__icon {
    transition: background-color .3s var(--ease), color .3s var(--ease);
}

.header-phone:hover .header-phone__icon {
    background: var(--teal);
    color: #04211F;
}

/* ---------------------------------------------------------------
   Trust band
   --------------------------------------------------------------- */
.trust__item svg {
    transition: transform .35s var(--ease);
}

.trust__item:hover svg {
    transform: scale(1.15) rotate(-6deg);
}

/* ---------------------------------------------------------------
   Cards lift and pick up the brand accent
   --------------------------------------------------------------- */
.value-card,
.contact-card,
.price-card,
.aside-links,
.process__step,
.quote-side__call {
    transition: transform .35s var(--ease), border-color .35s var(--ease), background-color .35s var(--ease);
}

.value-card:hover,
a.contact-card:hover,
.quote-side__call:hover {
    transform: translateY(-4px);
}

.process__step:hover {
    border-top-color: var(--teal);
}

.process__step:hover .process__n {
    color: var(--teal);
}

.process__step,
.process__n {
    transition: border-color .35s var(--ease), color .35s var(--ease);
}

/* ---------------------------------------------------------------
   Filter buttons use the same slide fill as the main buttons
   --------------------------------------------------------------- */
.filter-bar__btn {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    transition: color .28s var(--ease), border-color .28s var(--ease);
}

.filter-bar__btn::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--teal);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .38s var(--ease);
}

.filter-bar__btn.is-active::before {
    transform: scaleX(1);
}

.filter-bar__btn:hover::before,
.filter-bar__btn:focus-visible::before {
    transform: scaleX(1);
}

.filter-bar__btn:hover,
.filter-bar__btn:focus-visible {
    color: #04211F;
    border-color: var(--teal);
}

/* ---------------------------------------------------------------
   Gallery tiles
   --------------------------------------------------------------- */
.gallery-item__label {
    transition: transform .4s var(--ease);
}

.gallery-item::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 3;
    height: 4px;
    width: 100%;
    background: var(--teal);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .42s var(--ease);
}

.gallery-item:hover::before,
.gallery-item:focus-visible::before {
    transform: scaleX(1);
}

.gallery-item:hover .gallery-item__label {
    transform: translateY(-4px);
}

/* ---------------------------------------------------------------
   Service rows and side lists nudge on hover
   --------------------------------------------------------------- */
/* Colour only, so the anchor keeps the heading line box and its tap area */
.service-row__head h3 a {
    transition: color .26s var(--ease);
}

.aside-links li a,
.price-summary li a,
.site-footer ul a,
.error-page__links a {
    display: inline-block;
    transition: color .26s var(--ease), transform .26s var(--ease);
}

.service-row__head h3 a:hover {
    color: var(--teal);
}

.aside-links li a:hover,
.price-summary li a:hover,
.site-footer ul a:hover,
.error-page__links a:hover {
    transform: translateX(4px);
}

.aside-links__all {
    position: relative;
}

.aside-links__all::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    width: 100%;
    background: var(--teal);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .34s var(--ease);
}

.aside-links__all:hover::after {
    transform: scaleX(1);
}

/* ---------------------------------------------------------------
   FAQ rows
   --------------------------------------------------------------- */
.faq__item {
    transition: border-color .3s var(--ease);
}

.faq__q {
    transition: color .26s var(--ease), padding-left .3s var(--ease);
}

.faq__q:hover {
    color: var(--teal);
    padding-left: .4rem;
}

.faq__item.is-open {
    border-bottom-color: var(--teal);
}

/* ---------------------------------------------------------------
   Before and after handle
   --------------------------------------------------------------- */
.ba__grip {
    transition: transform .3s var(--ease), background-color .3s var(--ease);
}

.ba__stage:hover .ba__grip {
    transform: translate(-50%, -50%) scale(1.08);
}

.ba__thumb {
    transition: opacity .28s var(--ease), border-color .28s var(--ease), transform .28s var(--ease);
}

.ba__thumb:hover {
    transform: translateY(-3px);
}

/* ---------------------------------------------------------------
   Hero slide indicators
   --------------------------------------------------------------- */
.hero__dot {
    transition: background-color .3s var(--ease), width .3s var(--ease);
}

.hero__dot:hover {
    background: rgba(8, 207, 198, .6);
}

.hero__dot.is-active {
    width: 64px;
}

/* ---------------------------------------------------------------
   Form fields
   --------------------------------------------------------------- */
.field input,
.field select,
.field textarea {
    transition: border-color .26s var(--ease), background-color .26s var(--ease);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
    background: #131A21;
}

.quote-card--light .field input:focus,
.quote-card--light .field select:focus,
.quote-card--light .field textarea:focus {
    background: var(--white);
}

/* ---------------------------------------------------------------
   Footer credit
   --------------------------------------------------------------- */
.site-footer__credit {
    width: 100%;
    order: 3;
    padding-top: 1rem;
    margin-top: .3rem;
    border-top: 1px solid var(--line);
}

.site-footer__credit a {
    color: var(--white);
    font-size: .87rem;
    letter-spacing: .02em;
    position: relative;
    display: inline-block;
    padding-block: .35rem;
}

@media (max-width: 720px) {
    .site-footer__credit a {
        padding-block: .6rem;
    }
}

.site-footer__credit a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    height: 1px;
    width: 100%;
    background: var(--teal);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .34s var(--ease);
}

.site-footer__credit a:hover {
    color: var(--teal);
}

.site-footer__credit a:hover::after {
    transform: scaleX(1);
}

/* ---------------------------------------------------------------
   Section rules draw themselves in when revealed
   --------------------------------------------------------------- */
.reveal .slash-rule,
.reveal.slash-rule {
    transform: skewX(-24deg) scaleX(0);
    transform-origin: left center;
    transition: transform .55s var(--ease) .1s;
}

.reveal.is-in .slash-rule,
.reveal.is-in.slash-rule {
    transform: skewX(-24deg) scaleX(1);
}

/* ---------------------------------------------------------------
   Logo
   --------------------------------------------------------------- */
.brand img,
.footer-brand img {
    transition: opacity .28s var(--ease);
}

.brand:hover img,
.footer-brand a:hover img {
    opacity: .82;
}

/* ---------------------------------------------------------------
   Motion preferences win over everything above
   --------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .btn::before,
    .filter-bar__btn::before,
    .primary-nav a::after,
    .service-tile__body::after,
    .gallery-item::before,
    .aside-links__all::after,
    .site-footer__credit a::after {
        transition: none !important;
    }

    .reveal .slash-rule,
    .reveal.slash-rule {
        transform: skewX(-24deg) scaleX(1);
        transition: none !important;
    }

    .service-tile p {
        grid-template-rows: 1fr;
        opacity: 1;
        transform: none;
    }
}