/* ==========================================================================
 Bathawab Official Local Build — Subtle Motion Enhancements (v2)
 File: gemini-enhancements.css
 Matches exact DOM selectors from site.html, app.js, campaign.js, business.js, motion.css
 ========================================================================== */

:root {
 --bw-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
 --bw-ease-soft: cubic-bezier(0.2, 0.75, 0.2, 1);
}

/* --------------------------------------------------------------------------
 1) Header Company Logo — Inline SVG Wrapper & 180deg One-Time Emblem Spin
 Selector: body > header a[data-company-home] > img.logo[data-company-logo]
 - Keeps company name & subtitle 100% static (no rotation, no jump).
 - Only the circular golden emblem (.bw-logo-emblem-rotor) rotates once
 from -180deg to 0deg around its exact center.
 - Respects day/night and Arabic/English official SVGs.
 - Footer logo (body > footer img[data-company-logo]) is untouched.
 -------------------------------------------------------------------------- */
body > header a[data-company-home] {
 display: inline-flex;
 align-items: center;
 position: relative;
}

.bw-inline-logo-wrap {
 display: block;
 width: 216px;
 height: 62px;
 line-height: 0;
 flex-shrink: 0;
 position: relative;
 pointer-events: none;
}

.bw-inline-logo-wrap svg.bw-inline-logo-svg {
 display: block;
 width: 100%;
 height: 100%;
 overflow: visible;
}

/* Match exact responsive dimensions of header .logo from style.css & motion.css */
@media (max-width: 1100px) {
 .bw-inline-logo-wrap {
 width: 185px;
 height: 55px;
 }
}

@media (max-width: 800px) {
 .bw-inline-logo-wrap {
 width: 150px;
 height: 58px;
 }
}

@media (max-width: 390px) {
 .bw-inline-logo-wrap {
 width: 126px;
 height: 58px;
 }
}

/* Keep the original img.logo hidden in place when inline SVG is active so app.js
 can still read/write img.src and img.alt without layout shift */
body > header a[data-company-home].bw-has-inline-logo > img.logo[data-company-logo] {
 position: absolute !important;
 width: 1px !important;
 height: 1px !important;
 padding: 0 !important;
 margin: -1px !important;
 overflow: hidden !important;
 clip: rect(0, 0, 0, 0) !important;
 white-space: nowrap !important;
 border: 0 !important;
 opacity: 0 !important;
 pointer-events: none !important;
}

/* Dynamic theme colors on inline SVG paths so theme toggle is instant & flash-free */
.bw-inline-logo-svg .bw-logo-wordmark path {
 fill: #4e4c50;
 transition: fill 0.25s ease;
}

html[data-theme="dark"] .bw-inline-logo-svg .bw-logo-wordmark path {
 fill: #ffffff !important;
}

.bw-inline-logo-svg .bw-logo-emblem-rotor path[fill]:not([fill="none"]) {
 fill: #d29c47;
}

.bw-inline-logo-svg .bw-logo-emblem-rotor path[stroke] {
 stroke: #d29c47;
}

/* Exact center of the circular emblem in SVG user coordinates:
 Arabic viewBox (0 0 267.584 83.5488): circle center is (41.4645, 42.0842)
 English viewBox (0 0 264.898 84.2803): circle center is (41.4645, 42.8157)
 Using transform-box: fill-box + transform-origin: 50% 50% on the outer circle + waves group
 (since the outer circle path bounds the entire emblem symmetrically). */
.bw-inline-logo-svg .bw-logo-emblem-rotor {
 transform-box: fill-box;
 transform-origin: 50% 50%;
 transform: rotate(0deg);
 will-change: transform;
}

html:not(.paused) .bw-inline-logo-svg .bw-logo-emblem-rotor.bw-emblem-spin-once {
 animation: bwEmblemRotateOnce 1.15s var(--bw-ease-out) 0.06s 1 both;
}

@keyframes bwEmblemRotateOnce {
 0% {
 transform: rotate(-180deg);
 }
 100% {
 transform: rotate(0deg);
 }
}

/* Ensure footer logo remains completely static */
body > footer a[data-company-home] img[data-company-logo] {
 animation: none !important;
 transform: none !important;
}

/* --------------------------------------------------------------------------
 2) Campaign Hero Slider (#home.campaign-hero)
 Selector: #campaignContent .campaign-stage img.scene-photo
 Excludes tobacco scene: #home[data-scene="brand-2dddaebc"] and #home[data-scene="tobacco"]
 -------------------------------------------------------------------------- */
html:not(.paused) #home.campaign-hero:not([data-scene="brand-2dddaebc"]):not([data-scene="tobacco"]) #campaignContent .campaign-stage img.scene-photo.bw-scene-entering {
 animation: bwSceneGentleSettle 1.05s var(--bw-ease-out) 1 both !important;
}

@keyframes bwSceneGentleSettle {
 0% {
 transform: scale(1.032) translateY(4px);
 }
 100% {
 transform: scale(1) translateY(0);
 }
}

@media (hover: hover) and (pointer: fine) {
 html:not(.paused) #home.campaign-hero:not([data-scene="brand-2dddaebc"]):not([data-scene="tobacco"]) #campaignContent .campaign-stage:hover img.scene-photo {
 transform: scale(1.028);
 }
}

/* Explicitly disable any extra motion on tobacco hero slide */
#home.campaign-hero[data-scene="brand-2dddaebc"] #campaignContent .campaign-stage img.scene-photo,
#home.campaign-hero[data-scene="tobacco"] #campaignContent .campaign-stage img.scene-photo {
 animation: none !important;
 transform: none !important;
 transition: none !important;
}

/* Slider arrows & CTA calm interaction */
.campaign-arrows button,
.campaign-cta,
.filters button,
.catalog-tools button,
.primary-submit {
 transition:
 transform 0.24s var(--bw-ease-out),
 box-shadow 0.24s var(--bw-ease-out),
 background-color 0.22s ease,
 border-color 0.22s ease;
}

@media (hover: hover) and (pointer: fine) {
 html:not(.paused) .campaign-arrows button:hover:not(:disabled) {
 transform: translateY(-1.5px);
 }

 html:not(.paused) #home.campaign-hero:not([data-scene="brand-2dddaebc"]):not([data-scene="tobacco"]) .campaign-cta:hover {
 transform: translateY(-2px);
 box-shadow: 0 8px 22px rgba(145, 109, 40, 0.22);
 }
}

/* --------------------------------------------------------------------------
 3) Staggered Reveal for 'Why Choose Bathawab' (#why .benefit-grid > article, #why .benefit-grid > div)
 - Progressive enhancement: visible by default if JS/IO fails.
 -------------------------------------------------------------------------- */
#why .benefit-grid > article,
#why .benefit-grid > div {
 position: relative;
 transition:
 transform 0.35s var(--bw-ease-out),
 box-shadow 0.35s var(--bw-ease-out),
 border-color 0.3s ease;
}

html:not(.paused) #why .benefit-grid > :is(article, div).bw-why-stagger-init:not(.bw-why-stagger-in) {
 opacity: 0;
 transform: translateY(18px);
}

html:not(.paused) #why .benefit-grid > :is(article, div).bw-why-stagger-init.bw-why-stagger-in {
 opacity: 1;
 transform: translateY(0);
 transition:
 opacity 0.62s var(--bw-ease-out) calc(var(--bw-why-idx, 0) * 85ms),
 transform 0.62s var(--bw-ease-out) calc(var(--bw-why-idx, 0) * 85ms),
 box-shadow 0.35s var(--bw-ease-out),
 border-color 0.3s ease;
}

#why .benefit-grid .benefit-number {
 display: inline-block;
 transition: transform 0.32s var(--bw-ease-out), color 0.3s ease;
}

@media (hover: hover) and (pointer: fine) {
 html:not(.paused) #why .benefit-grid > :is(article, div):hover {
 transform: translateY(-3px);
 box-shadow: 0 12px 26px rgba(49, 37, 23, 0.06);
 }

 html[data-theme="dark"]:not(.paused) #why .benefit-grid > :is(article, div):hover {
 box-shadow: 0 12px 26px rgba(0, 0, 0, 0.28);
 }

 html:not(.paused) #why .benefit-grid > :is(article, div):hover .benefit-number {
 transform: translateY(-2px);
 }
}

/* --------------------------------------------------------------------------
 4) Calm Interactions for Agency Cards (#grid a.card) & Products (#allCollections)
 Strictly excluding tobacco brand-2dddaebc and #agency-directory
 -------------------------------------------------------------------------- */
#grid a.card:not([data-brand="brand-2dddaebc"]) {
 transition:
 transform 0.32s var(--bw-ease-out),
 box-shadow 0.32s var(--bw-ease-out),
 border-color 0.28s ease !important;
}

#grid a.card:not([data-brand="brand-2dddaebc"]) .art img {
 transition: transform 0.55s var(--bw-ease-out) !important;
}

#grid a.card:not([data-brand="brand-2dddaebc"]) .brand-heading .agency-logo {
 transition: transform 0.35s var(--bw-ease-out) !important;
}

@media (hover: hover) and (pointer: fine) {
 html:not(.paused) #grid a.card:not([data-brand="brand-2dddaebc"]):hover {
 transform: translateY(-4px);
 box-shadow: 0 14px 28px rgba(49, 37, 23, 0.07) !important;
 }

 html[data-theme="dark"]:not(.paused) #grid a.card:not([data-brand="brand-2dddaebc"]):hover {
 box-shadow: 0 14px 28px rgba(0, 0, 0, 0.32) !important;
 }

 html:not(.paused) #grid a.card:not([data-brand="brand-2dddaebc"]):not([data-brand="almubarak"]):hover .art img {
 transform: scale(1.03);
 }
}

/* Products in #allCollections (excluding brand-2dddaebc) */
#allCollections .collection:not(#collection-brand-2dddaebc):not(.theme-brand-2dddaebc) .catalog-product:not([data-owner="brand-2dddaebc"]) {
 transition:
 transform 0.32s var(--bw-ease-out),
 box-shadow 0.32s var(--bw-ease-out),
 border-color 0.28s ease !important;
}

#allCollections .collection:not(#collection-brand-2dddaebc):not(.theme-brand-2dddaebc) .catalog-product:not([data-owner="brand-2dddaebc"]) .catalog-image img {
 transition: transform 0.45s var(--bw-ease-out) !important;
}

@media (hover: hover) and (pointer: fine) {
 html:not(.paused) #allCollections .collection:not(#collection-brand-2dddaebc):not(.theme-brand-2dddaebc) .catalog-product:not([data-owner="brand-2dddaebc"]):hover {
 transform: translateY(-4px);
 box-shadow: 0 12px 24px rgba(49, 37, 23, 0.06) !important;
 }

 html[data-theme="dark"]:not(.paused) #allCollections .collection:not(#collection-brand-2dddaebc):not(.theme-brand-2dddaebc) .catalog-product:not([data-owner="brand-2dddaebc"]):hover {
 box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3) !important;
 }

 html:not(.paused) #allCollections .collection:not(#collection-brand-2dddaebc):not(.theme-brand-2dddaebc) .catalog-product:not([data-owner="brand-2dddaebc"]):hover .catalog-image img {
 transform: scale(1.038);
 }
}

/* Strict neutralization for Tobacco agency card, collection, and #agency-directory */
#grid a.card[data-brand="brand-2dddaebc"],
#grid a.card[data-brand="brand-2dddaebc"]:hover,
#grid a.card[data-brand="brand-2dddaebc"] .art img,
#grid a.card[data-brand="brand-2dddaebc"]:hover .art img,
#grid a.card[data-brand="brand-2dddaebc"] .arrow,
#grid a.card[data-brand="brand-2dddaebc"]:hover .arrow,
#allCollections #collection-brand-2dddaebc *,
#allCollections .catalog-product[data-owner="brand-2dddaebc"],
#allCollections .catalog-product[data-owner="brand-2dddaebc"]:hover,
#allCollections .catalog-product[data-owner="brand-2dddaebc"] .catalog-image img,
#agency-directory,
#agency-directory * {
 animation: none !important;
 transform: none !important;
 transition: none !important;
}

/* --------------------------------------------------------------------------
 5) Reduced Motion & Pause Button (#motion -> html.paused) Guardrails
 -------------------------------------------------------------------------- */
html.paused .bw-inline-logo-svg .bw-logo-emblem-rotor,
html.paused #home.campaign-hero #campaignContent .campaign-stage img.scene-photo {
 animation: none !important;
 transform: none !important;
}

html.paused #why .benefit-grid > :is(article, div).bw-why-stagger-init {
 opacity: 1 !important;
 transform: none !important;
 transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
 html:not([data-motion-user="running"]) .bw-inline-logo-svg .bw-logo-emblem-rotor,
 html:not([data-motion-user="running"]) #home.campaign-hero #campaignContent .campaign-stage img.scene-photo {
 animation: none !important;
 transform: none !important;
 }

 html:not([data-motion-user="running"]) #why .benefit-grid > :is(article, div).bw-why-stagger-init {
 opacity: 1 !important;
 transform: none !important;
 transition: none !important;
 }
}