/* Ganesh Gas Service — premium motion layer, additive to the core responsive theme.
   Animation is an enhancement only: all content remains visible if JS is off. */
:root{--motion-ease:cubic-bezier(.22,1,.36,1);--motion-spring:cubic-bezier(.2,1.4,.35,1);--motion-blue:#073257;--motion-teal:#056ea0}

/* Interaction affordances, carefully scoped so forms remain familiar. */
:where(a,button,input,select,textarea):focus-visible{outline:3px solid #ffab4d;outline-offset:4px}
a:active,button:active{transition-duration:.12s!important}
.site-header{isolation:isolate}
.header-progress{position:absolute;bottom:0;left:0;width:100%;height:3px;z-index:4;pointer-events:none;background:linear-gradient(90deg,#0584b6 0%,#2ecfb7 50%,#ff9442 100%);transform:scaleX(var(--scroll-progress,0));transform-origin:0 50%;opacity:0;transition:opacity .22s ease}
.site-header.scrolled .header-progress{opacity:1}

/* Homepage: hero typography and image depth. */
.hero{isolation:isolate}
.hero h1 .heading-gradient{background-size:150% 100%;transition:background-position .9s var(--motion-ease)}
.hero-copy .eyebrow-pill{box-shadow:0 8px 24px rgba(5,92,145,.09)}
.photo-backdrop{transition:transform .8s var(--motion-ease);will-change:transform}
.hero-art:hover .photo-backdrop{transform:rotate(0deg) scale(1.012)}
.photo-card{transform:perspective(1100px) rotateX(calc(var(--photo-y,0)*1deg)) rotateY(calc(var(--photo-x,0)*1deg));transition:transform .55s var(--motion-ease),box-shadow .5s ease;transform-style:preserve-3d}
.hero-art:hover .photo-card{box-shadow:0 42px 80px rgba(8,41,72,.27)}
.photo-card img{transition:transform 1.2s var(--motion-ease);transform:scale(1.01)}
.hero-art:hover .photo-card img{transform:scale(1.055)}
.photo-badge,.floating-note{transition:transform .5s var(--motion-spring),box-shadow .35s ease}
.hero-art:hover .photo-badge{transform:translate(-4px,-7px)}
.hero-art:hover .floating-note{transform:translateY(-7px)}
.hero-offer{transition:transform .35s var(--motion-spring),box-shadow .3s ease,border-color .3s ease}
.hero-offer:hover{transform:translateY(-6px) scale(1.02);border-color:#9ed9e3;box-shadow:0 16px 32px rgba(7,64,101,.11)}
.hero-offer:hover .hero-offer-icon{animation:icon-jump .6s var(--motion-spring)}
@keyframes icon-jump{0%,100%{transform:translateY(0)}40%{transform:translateY(-6px)}75%{transform:translateY(1px)}}

/* Buttons: subtle shine, directional arrows, positive feedback. */
.btn{position:relative;isolation:isolate;overflow:hidden;transition:transform .3s var(--motion-spring),box-shadow .3s ease,background-color .3s ease}
.btn:before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 18%,rgba(255,255,255,.22) 47%,transparent 70%);transform:translateX(-140%);transition:transform .75s ease;pointer-events:none}
.btn:hover:before,.btn:focus-visible:before{transform:translateX(140%)}
.btn:hover,.btn:focus-visible{transform:translateY(-3px);box-shadow:0 14px 30px rgba(12,52,83,.16)}
.btn-orange:hover,.btn-orange:focus-visible{box-shadow:0 17px 35px rgba(255,103,37,.26)}
.btn span[aria-hidden="true"],.hero-buttons .btn span{transition:transform .35s var(--motion-spring)}
.btn:hover span[aria-hidden="true"],.hero-buttons .btn:hover span{transform:translate(3px,-3px)}

/* Service cards become tactile, with an image reveal and pointer-follow light. */
.service-card,.related-card,.gallery-tile{isolation:isolate;position:relative;transition:transform .55s var(--motion-ease),box-shadow .45s ease,border-color .3s ease}
.service-card:before{content:"";pointer-events:none;position:absolute;inset:0;border-radius:inherit;background:radial-gradient(250px circle at var(--glow-x,50%) var(--glow-y,30%),rgba(28,186,201,.14),transparent 75%);opacity:0;transition:opacity .45s ease;z-index:1}
.service-card:hover:before,.service-card:focus-visible:before{opacity:1}
.service-card:hover,.service-card:focus-visible,.related-card:hover,.gallery-tile:hover{transform:translateY(-9px);border-color:#b5e3e9;box-shadow:0 26px 55px rgba(6,52,83,.14)}
.service-thumb{isolation:isolate}
.service-thumb:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(2,32,54,.16),transparent 58%);pointer-events:none;transition:opacity .5s ease;opacity:.45}
.service-card:hover .service-thumb:after{opacity:.85}
.service-card .service-thumb img{transition:transform .9s var(--motion-ease),filter .65s ease}
.service-card:hover .service-thumb img,.service-card:focus-visible .service-thumb img{transform:scale(1.085);filter:saturate(1.07)}
.service-card-body{position:relative;z-index:2}
.service-card .arrow-bubble{transition:transform .45s var(--motion-spring),background .3s ease,color .3s ease}
.service-card:hover .arrow-bubble,.service-card:focus-visible .arrow-bubble{transform:translate(4px,-4px) rotate(42deg);background:#086ca0;color:white}
.service-card .card-action{display:inline-block;transition:letter-spacing .3s ease,color .3s ease}
.service-card:hover .card-action{letter-spacing:.02em;color:#df531f}
.related-card img,.gallery-tile img{transition:transform .8s var(--motion-ease),filter .5s ease}
.related-card:hover img,.gallery-tile:hover img{transform:scale(1.06);filter:saturate(1.09)}
.gallery-tile>div,.related-card>div{position:relative;background:#fff;z-index:1}

/* Shared panels: consistent premium depth and quieter attention cues. */
.advantages-shell,.service-area-panel,.booking-form-box,.aside-box{transition:box-shadow .45s ease,border-color .35s ease}
.advantages-shell:hover,.service-area-panel:hover{box-shadow:0 30px 65px rgba(5,52,88,.21)}
.advantage,.steps-grid>div,.symptom,.contact-method{transition:transform .38s var(--motion-ease),background-color .35s ease,box-shadow .35s ease}
.advantage:hover,.steps-grid>div:hover,.symptom:hover{transform:translateY(-5px)}
.advantage:hover{background:rgba(255,255,255,.095)}
.steps-grid>div:hover{box-shadow:0 16px 34px rgba(6,50,84,.08)}
.symptom:hover{background:#f0fbfc}
.location-pills span{transition:transform .3s var(--motion-spring),background-color .3s ease,border-color .3s ease}
.location-pills span:hover{transform:translateY(-4px);border-color:#8ed7dc;background:#e9f9fb}
.visual-photo,.inner-image-wrap{overflow:hidden}
.visual-photo img,.inner-image-wrap img,.inner-image{transition:transform 1.1s var(--motion-ease),filter .8s ease}
.visual-photo:hover img,.inner-image-wrap:hover img{transform:scale(1.045)}
.faq-stack details{transition:background-color .3s ease,padding .3s ease}
.faq-stack details[open]{background:#fff;border-radius:12px;padding-inline:14px}
.faq-stack summary{cursor:pointer}
.contact-method:hover{transform:translateX(5px)}
.enquiry-form input,.enquiry-form select{transition:border-color .25s ease,box-shadow .25s ease,background-color .25s ease}
.enquiry-form input:focus,.enquiry-form select:focus{outline:none;border-color:#0f93ad;box-shadow:0 0 0 4px rgba(28,173,201,.12);background:#fff}

/* Word-by-word text reveal. JS produces span wrappers but original heading text remains semantic. */
.motion-heading .motion-word{display:inline-block;vertical-align:baseline;overflow:hidden;padding-block:.055em;margin-block:-.055em}
.motion-heading .motion-word>span{display:inline-block;transition:transform .8s var(--motion-ease),opacity .6s ease;transition-delay:var(--word-delay,0ms)}
.motion-ok .motion-heading:not(.is-visible) .motion-word>span{transform:translate3d(0,112%,0);opacity:0}
.motion-ok .motion-heading.is-visible .motion-word>span{transform:translate3d(0,0,0);opacity:1}

/* Progressive viewport entrance effects. Only JS-selected elements are affected. */
.motion-ok .motion-reveal{opacity:0;transform:translate3d(0,35px,0) scale(.985);transition:opacity .7s var(--motion-ease),transform .8s var(--motion-ease),box-shadow .35s ease;transition-delay:var(--reveal-delay,0ms)}
.motion-ok .motion-reveal.is-visible{opacity:1;transform:translate3d(0,0,0) scale(1);}
.motion-ok .motion-reveal.motion-slide-left:not(.is-visible){transform:translate3d(-32px,0,0) scale(.99)}
.motion-ok .motion-reveal.motion-zoom:not(.is-visible){transform:scale(.94);}
.motion-ok .service-card.motion-reveal.is-visible:hover,.motion-ok .related-card.motion-reveal.is-visible:hover,.motion-ok .gallery-tile.motion-reveal.is-visible:hover{transform:translateY(-9px)}
.motion-ok .hero-offer.motion-reveal.is-visible:hover{transform:translateY(-6px) scale(1.02)}
.motion-ok .advantage.motion-reveal.is-visible:hover,.motion-ok .steps-grid>div.motion-reveal.is-visible:hover,.motion-ok .symptom.motion-reveal.is-visible:hover{transform:translateY(-5px)}
.motion-ok .contact-method.motion-reveal.is-visible:hover{transform:translateX(5px)}
/* Prevent any clipping artifacts in content that would include sticky elements. */
.motion-ok .service-area-panel.motion-reveal.is-visible:hover{transform:translateY(0)}

/* Narrow-page navigation and micro-interactions. */
.main-nav>a{position:relative}
@media(min-width:971px){.main-nav>a:after{content:"";position:absolute;left:0;right:0;bottom:25px;height:2px;background:linear-gradient(90deg,#0dbbba,#ff873c);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--motion-ease)}.main-nav>a:hover:after,.main-nav>a.current:after{transform:scaleX(1)}}
.header-wa{transition:transform .3s var(--motion-spring),box-shadow .3s ease}
.header-wa:hover{transform:translateY(-3px);box-shadow:0 9px 22px rgba(0,155,112,.17)}

/* Useful actions beyond decoration. */
.back-to-top{position:fixed;right:22px;bottom:25px;z-index:75;width:48px;height:48px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.4);border-radius:15px;color:#fff;background:linear-gradient(155deg,#073257,#056ea0);box-shadow:0 10px 25px rgba(3,55,91,.22);font-size:23px;line-height:1;cursor:pointer;opacity:0;visibility:hidden;transform:translateY(14px);transition:opacity .3s ease,transform .35s var(--motion-spring),visibility .3s ease}
.back-to-top.is-visible{opacity:1;visibility:visible;transform:translateY(0)}
.back-to-top:hover{transform:translateY(-5px);box-shadow:0 14px 29px rgba(3,55,91,.3)}

/* Optional quick-filter on the full services page. Accessible buttons, no navigation breakage. */
.service-filters{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:-18px 0 27px}
.filter-label{font-size:11px;font-weight:850;letter-spacing:.11em;color:#688392;text-transform:uppercase;margin-right:6px}
.filter-button{border:1px solid #d3e7eb;padding:11px 17px;border-radius:999px;background:#fff;color:#28516b;font-size:12px;font-weight:800;transition:background-color .25s ease,border-color .25s ease,transform .25s var(--motion-spring),box-shadow .25s ease}
.filter-button:hover{transform:translateY(-3px);border-color:#89cfdc;background:#eefafd}
.filter-button[aria-pressed="true"]{color:#fff;border-color:transparent;background:linear-gradient(125deg,#073257,#056ea0);box-shadow:0 8px 20px rgba(6,85,126,.18)}
.service-card[hidden]{display:none!important}
.filter-summary{margin-left:auto;color:#678292;font-size:12px;font-weight:700}

/* Mobile-first performance, spacing and interaction clarity. */
@media(max-width:970px){.photo-card{transform:none!important}.hero-art:hover .photo-card img{transform:none}.header-progress{height:2px}}
@media(max-width:690px){.service-filters{margin:0 0 22px;gap:8px}.filter-summary{width:100%;margin:5px 0 0}.filter-button{padding:10px 13px;font-size:11px}.back-to-top{right:15px;bottom:82px;width:43px;height:43px;border-radius:12px}.hero-offer:hover{transform:none!important}.service-card:hover{transform:none;box-shadow:0 8px 32px rgba(4,49,75,.04)}.photo-card img{transform:none}.contact-method:hover{transform:none}}
@media(hover:none){.service-card:before{display:none}.btn:before{display:none}}
@media(prefers-reduced-motion:reduce){
 .motion-ok .motion-reveal,.motion-ok .motion-reveal.is-visible{opacity:1!important;filter:none!important;transform:none!important;transition:none!important}
 .motion-ok .motion-heading .motion-word>span{opacity:1!important;transform:none!important;transition:none!important}
 .photo-backdrop,.photo-card,.photo-card img,.hero-offer,.service-card,.related-card,.gallery-tile,.visual-photo img,.inner-image,.btn{transform:none!important;animation:none!important;transition:none!important}
 .header-progress,.back-to-top{transition:none!important}
}