/* Shared SnapGo machine-art language: decorative only, never interactive. */
.brand-elements{
  position:absolute;
  z-index:1;
  inset:0;
  overflow:hidden;
  contain:layout paint;
  pointer-events:none;
  user-select:none;
}

.brand-elements__city,
.brand-elements__organic,
.brand-element{
  position:absolute;
  display:none;
  pointer-events:none;
}

.brand-elements__city{
  inset:-8%;
  background:url("../image/elements-bg-designs/brand-city-bg.webp") center / cover no-repeat;
  opacity:.11;
  filter:saturate(.85) contrast(1.05);
  mix-blend-mode:screen;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 28%,#000 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 28%,#000 100%);
}

.brand-elements__organic{
  top:-34%;
  bottom:-34%;
  width:clamp(120px,14vw,225px);
  background:url("../image/elements-bg-designs/brand-organic-rail.webp") center / cover no-repeat;
  opacity:.13;
  mix-blend-mode:screen;
}

.brand-element{
  height:auto;
  object-fit:contain;
  filter:drop-shadow(0 14px 28px rgba(24,3,31,.16));
  animation:brandElementFloat 7s ease-in-out infinite alternate;
}

.brand-element--spark-white,
.brand-element--spark-amber{animation-duration:4.8s;}
.brand-element--chevrons-a,
.brand-element--chevrons-b{animation:none;}

@keyframes brandElementFloat{
  to{transform:translate3d(0,-10px,0) rotate(3deg)}
}

:is(#page-home .snap-hero,#page-why .why-hero,#page-menu .menu-hero-chapter,#page-where .where-hero,#page-contact .contact-hero){
  position:relative;
  isolation:isolate;
}

:is(#page-home .hero-grid,#page-why .why-hero-grid,#page-menu .menu-hero,#page-where .where-hero-grid,#page-contact .contact-hero-grid){
  position:relative;
  z-index:2;
}

/* Home: machine-side motion marks and warm product cues. */
body[data-page="home"] .brand-elements__city,
body[data-page="home"] :is(.brand-element--chevrons-a,.brand-element--halftone,.brand-element--snack,.brand-element--spark-white,.brand-element--spark-amber){display:block;}
body[data-page="home"] .brand-elements__city{opacity:.075;mix-blend-mode:multiply;}
body[data-page="home"] .brand-element--chevrons-a{right:1.4%;top:4%;width:clamp(25px,3vw,45px);height:88%;object-fit:cover;opacity:.16;}
body[data-page="home"] .brand-element--halftone{left:-64px;bottom:-82px;width:clamp(170px,19vw,300px);opacity:.15;transform:rotate(-14deg);}
body[data-page="home"] .brand-element--snack{right:45%;top:8%;width:clamp(42px,4.2vw,68px);opacity:.56;transform:rotate(9deg);}
body[data-page="home"] .brand-element--spark-white{right:5.5%;top:16%;width:clamp(28px,3.2vw,50px);opacity:.72;}
body[data-page="home"] .brand-element--spark-amber{left:47%;bottom:8%;width:clamp(30px,3.4vw,52px);opacity:.72;animation-delay:-2s;}

/* Why: managed-service hero, framed like the machine's side artwork. */
body[data-page="why"] .brand-elements__city,
body[data-page="why"] .brand-elements__organic,
body[data-page="why"] :is(.brand-element--chevrons-b,.brand-element--halftone,.brand-element--snack,.brand-element--rays,.brand-element--spark-amber){display:block;}
body[data-page="why"] .brand-elements__city{opacity:.13;}
body[data-page="why"] .brand-elements__organic{right:-42px;}
body[data-page="why"] .brand-element--chevrons-b{right:2.4%;top:8%;width:clamp(30px,3.6vw,54px);height:82%;object-fit:cover;opacity:.23;}
body[data-page="why"] .brand-element--halftone{left:-58px;bottom:-68px;width:clamp(170px,17vw,265px);opacity:.24;transform:rotate(10deg);}
body[data-page="why"] .brand-element--snack{left:46%;bottom:8%;width:clamp(48px,5vw,78px);opacity:.58;transform:rotate(-10deg);}
body[data-page="why"] .brand-element--rays{right:5.5%;top:7%;width:clamp(52px,6vw,90px);opacity:.52;}
body[data-page="why"] .brand-element--spark-amber{left:4%;top:15%;width:clamp(30px,3vw,48px);opacity:.7;}

/* Menu: strongest food-and-drink expression, kept outside the copy column. */
body[data-page="menu"] .brand-elements__city,
body[data-page="menu"] :is(.brand-element--halftone,.brand-element--snack,.brand-element--cup,.brand-element--rays,.brand-element--spark-white,.brand-element--spark-amber){display:block;}
body[data-page="menu"] .brand-elements__city{opacity:.18;}
body[data-page="menu"] .brand-element--halftone{right:-76px;top:-34px;width:clamp(210px,22vw,350px);opacity:.27;transform:rotate(-8deg);}
body[data-page="menu"] .brand-element--snack{left:2.2%;bottom:10%;width:clamp(58px,6vw,92px);opacity:.68;transform:rotate(-12deg);}
body[data-page="menu"] .brand-element--cup{right:1.6%;top:29%;width:clamp(58px,6.4vw,98px);opacity:.5;transform:rotate(8deg);}
body[data-page="menu"] .brand-element--rays{left:2.4%;top:8%;width:clamp(52px,5vw,78px);opacity:.54;}
body[data-page="menu"] .brand-element--spark-white{right:7%;bottom:12%;width:clamp(28px,3vw,48px);opacity:.74;}
body[data-page="menu"] .brand-element--spark-amber{left:49%;top:8%;width:clamp(30px,3.4vw,52px);opacity:.75;animation-delay:-1.5s;}

/* Where: city pattern supports the high-footfall location story. */
body[data-page="where"] .brand-elements__city,
body[data-page="where"] :is(.brand-element--chevrons-a,.brand-element--chevrons-b,.brand-element--halftone,.brand-element--rays,.brand-element--spark-white,.brand-element--spark-amber){display:block;}
body[data-page="where"] .brand-elements__city{opacity:.17;}
body[data-page="where"] .brand-element--chevrons-a{left:1.4%;top:7%;width:clamp(26px,3vw,44px);height:84%;object-fit:cover;opacity:.17;}
body[data-page="where"] .brand-element--chevrons-b{right:1%;top:17%;width:clamp(28px,3.2vw,50px);height:72%;object-fit:cover;opacity:.17;}
body[data-page="where"] .brand-element--halftone{right:-64px;bottom:-86px;width:clamp(180px,19vw,300px);opacity:.22;transform:rotate(12deg);}
body[data-page="where"] .brand-element--rays{right:5%;top:8%;width:clamp(54px,5.5vw,86px);opacity:.48;}
body[data-page="where"] .brand-element--spark-white{left:5%;bottom:12%;width:clamp(30px,3vw,48px);opacity:.66;}
body[data-page="where"] .brand-element--spark-amber{left:47%;top:8%;width:clamp(30px,3.3vw,50px);opacity:.72;}

/* Contact: the designer's finger-heart becomes a partnership cue. */
body[data-page="contact"] .brand-elements__city,
body[data-page="contact"] .brand-elements__organic,
body[data-page="contact"] :is(.brand-element--halftone,.brand-element--cup,.brand-element--heart,.brand-element--rays,.brand-element--spark-white,.brand-element--spark-amber){display:block;}
body[data-page="contact"] .brand-elements__city{opacity:.12;}
body[data-page="contact"] .brand-elements__organic{left:-52px;transform:scaleX(-1);}
body[data-page="contact"] .brand-element--halftone{right:-62px;bottom:-74px;width:clamp(180px,19vw,305px);opacity:.22;transform:rotate(-12deg);}
body[data-page="contact"] .brand-element--heart{right:2.2%;top:26%;width:clamp(60px,6.8vw,105px);opacity:.58;transform:rotate(7deg);}
body[data-page="contact"] .brand-element--cup{left:2%;bottom:10%;width:clamp(54px,6vw,90px);opacity:.46;transform:rotate(-8deg);}
body[data-page="contact"] .brand-element--rays{right:5%;top:7%;width:clamp(52px,5.5vw,86px);opacity:.5;}
body[data-page="contact"] .brand-element--spark-white{left:47%;top:8%;width:clamp(28px,3vw,48px);opacity:.7;}
body[data-page="contact"] .brand-element--spark-amber{right:43%;bottom:7%;width:clamp(30px,3.2vw,50px);opacity:.68;animation-delay:-2s;}

/* The illustrated skyline returns at conversion points, with dark overlays for legibility. */
#page-home .final-cta,
#page-why .why-final,
#page-where .where-final,
#page-contact .contact-final{
  background-image:
    linear-gradient(120deg,rgba(87,28,96,.94),rgba(129,35,100,.88)),
    url("../image/elements-bg-designs/brand-city-bg.webp") !important;
  background-position:center !important;
  background-size:cover !important;
}

#page-menu .menu-final{
  background-image:
    linear-gradient(180deg,rgba(81,24,78,.91),rgba(35,10,35,.97)),
    url("../image/elements-bg-designs/brand-city-bg.webp") !important;
  background-position:center 54% !important;
  background-size:cover !important;
}

@media(max-width:980px){
  .brand-elements__city{inset:-4%;opacity:.09!important;}
  .brand-elements__organic{opacity:.08;}
  .brand-element--chevrons-a,
  .brand-element--chevrons-b{opacity:.11!important;}
  .brand-element--snack,
  .brand-element--cup,
  .brand-element--heart{opacity:.34!important;}
}

@media(max-width:680px){
  .brand-elements__organic,
  .brand-element--chevrons-a,
  .brand-element--chevrons-b,
  .brand-element--halftone,
  .brand-element--snack,
  .brand-element--cup,
  .brand-element--heart{display:none!important;}
  .brand-elements__city{opacity:.065!important;}
  .brand-element--rays{right:2%!important;top:3%!important;width:48px!important;opacity:.3!important;}
  .brand-element--spark-white{right:4%!important;left:auto!important;top:18%!important;width:30px!important;opacity:.45!important;}
  .brand-element--spark-amber{left:3%!important;right:auto!important;top:auto!important;bottom:5%!important;width:30px!important;opacity:.48!important;}
}

@media(prefers-reduced-motion:reduce){
  .brand-element{animation:none!important;}
}

@media(forced-colors:active){
  .brand-elements{display:none!important;}
}