/* Branding-Packaging.com final production polish - 25 Aug 2026 */
:root{
  --bp-pink-final:#ffb7d2;
  --bp-pink-soft:#fff0f6;
  --bp-ink-final:#080808;
  --bp-progress:0;
  --bp-ease-out:cubic-bezier(.16,.84,.2,1);
  --bp-ease-soft:cubic-bezier(.2,.72,.2,1);
  color-scheme:light;
  interpolate-size:allow-keywords;
}
html{
  scroll-padding-top:112px;
  scrollbar-gutter:stable;
}
body{
  text-rendering:optimizeLegibility;
  font-kerning:normal;
  font-synthesis:none;
}
::selection{
  color:#050505;
  background:var(--bp-pink-final);
}

/* A thin brand-colored progress indicator gives long editorial pages a clear sense of place. */
.bp-scroll-progress{
  position:fixed;
  z-index:2200;
  inset:0 0 auto;
  height:3px;
  pointer-events:none;
  transform:scaleX(var(--bp-progress));
  transform-origin:left center;
  background:linear-gradient(90deg,#ff9fc5 0%,#ffd3e4 52%,#ff9fc5 100%);
  box-shadow:0 0 14px rgba(255,159,197,.4);
  will-change:transform;
}

/* Cross-document transitions are progressive enhancement only. */
@view-transition{navigation:auto}
.site-header{view-transition-name:bp-site-header}
.site-header .brand{view-transition-name:bp-site-brand}
.whatsapp-float{view-transition-name:bp-whatsapp}
::view-transition-old(root){animation:bp-page-out .18s ease both}
::view-transition-new(root){animation:bp-page-in .48s var(--bp-ease-out) both}
::view-transition-old(bp-site-header),
::view-transition-new(bp-site-header),
::view-transition-old(bp-site-brand),
::view-transition-new(bp-site-brand),
::view-transition-old(bp-whatsapp),
::view-transition-new(bp-whatsapp){animation:none}
@keyframes bp-page-out{to{opacity:0;filter:blur(2px)}}
@keyframes bp-page-in{from{opacity:0;clip-path:inset(0 0 9% 0)}to{opacity:1;clip-path:inset(0)}}

/* Refined focus treatment remains visible on light, pink, grey and black sections. */
:where(a,button,input,select,textarea,summary):focus-visible{
  outline:3px solid var(--bp-pink-final)!important;
  outline-offset:4px;
  box-shadow:0 0 0 2px #080808,0 0 0 7px rgba(255,183,210,.58);
}

/* Sticky editorial navigation shows the section currently being read. */
:is(.apx-side,.prx-side,.concept-on-page,.id-on-page,.sticky-nav) a{
  position:relative;
  transition:color .24s ease,translate .24s ease,padding-left .24s ease;
}
:is(.apx-side,.prx-side,.concept-on-page,.id-on-page,.sticky-nav) a::before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--bp-pink-final);
  opacity:0;
  scale:.35;
  translate:0 -50%;
  transition:opacity .24s ease,scale .24s var(--bp-ease-out);
}
:is(.apx-side,.prx-side,.concept-on-page,.id-on-page,.sticky-nav) a[aria-current="location"]{
  color:#e95c96;
  padding-left:17px;
  translate:3px 0;
}
:is(.apx-side,.prx-side,.concept-on-page,.id-on-page,.sticky-nav) a[aria-current="location"]::before{
  opacity:1;
  scale:1;
}

/* Modern details animation with a clean fallback in browsers that do not support it. */
@supports selector(details::details-content){
  details::details-content{
    block-size:0;
    overflow:clip;
    opacity:0;
    transition:block-size .46s var(--bp-ease-out),content-visibility .46s allow-discrete,opacity .3s ease;
  }
  details[open]::details-content{
    block-size:auto;
    opacity:1;
  }
}
summary{
  transition:color .22s ease,padding-left .22s ease;
}
summary:hover{color:#d84f88}
details[open]>summary{color:#d84f88}

/* Precise pointer spotlight for portfolio imagery. */
.bp-smart-surface{
  position:relative;
  isolation:isolate;
}
.bp-pointer-glow{
  position:absolute;
  z-index:5;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  opacity:0;
  background:radial-gradient(320px circle at var(--spot-x,50%) var(--spot-y,50%),rgba(255,255,255,.2),transparent 62%);
  transition:opacity .32s ease;
  mix-blend-mode:screen;
}
.bp-smart-surface:hover>.bp-pointer-glow{opacity:.7}

/* Magnetic controls use the individual translate property, so existing design transforms remain intact. */
.bp-magnetic{
  --magnetic-x:0px;
  --magnetic-y:0px;
  translate:var(--magnetic-x) var(--magnetic-y);
  transition:translate .32s var(--bp-ease-out),background-color .25s ease,color .25s ease,border-color .25s ease,box-shadow .25s ease;
}
.bp-magnetic:hover{box-shadow:0 10px 28px rgba(0,0,0,.13)}

/* Small visual response on the BP/A mark without creating constant distraction. */
.site-header .brand-mark{
  transition:scale .42s var(--bp-ease-out),rotate .42s var(--bp-ease-out),background-color .3s ease;
}
.site-header .brand:hover .brand-mark{
  scale:1.055;
  rotate:-3deg;
}

/* Anchor targets receive a brief editorial highlight after internal navigation. */
:where(main,article,section) [id]{scroll-margin-top:118px}
:target{animation:bp-target-pulse 1.1s ease-out}
@keyframes bp-target-pulse{
  0%{outline:0 solid rgba(255,183,210,0)}
  28%{outline:8px solid rgba(255,183,210,.2);outline-offset:8px}
  100%{outline:0 solid rgba(255,183,210,0);outline-offset:18px}
}

/* Improve long-word resilience without changing the measured editorial layouts. */
:where(h1,h2,h3,p,li,a,strong,span){overflow-wrap:break-word}
:where(.footer-contact,.contact-aside,.apx-contact-card){overflow-wrap:anywhere}

/* Hide repetitive interface text from generated snippets while keeping it available to users. */
.cookie-banner[data-nosnippet],
.site-footer[data-nosnippet]{contain:layout style}

/* High-contrast and Windows forced-color refinements. */
@media(prefers-contrast:more){
  :root{--bp-pink-final:#ff77b0}
  .bp-scroll-progress{height:4px;box-shadow:none}
  :where(.apx-side,.prx-side,.concept-on-page,.id-on-page,.sticky-nav) a[aria-current="location"]{text-decoration:underline;text-decoration-thickness:2px}
}
@media(forced-colors:active){
  .bp-scroll-progress,.bp-pointer-glow{display:none}
  :where(a,button,input,select,textarea,summary):focus-visible{outline:2px solid Highlight!important;box-shadow:none}
  :is(.apx-side,.prx-side,.concept-on-page,.id-on-page,.sticky-nav) a[aria-current="location"]{color:Highlight}
}

@media(max-width:1120px){
  html{scroll-padding-top:82px}
  :where(main,article,section) [id]{scroll-margin-top:88px}
}
@media(max-width:900px){
  .bp-scroll-progress{height:2px}
}
@media(hover:none),(pointer:coarse){
  .bp-magnetic{translate:none!important}
  .bp-pointer-glow{display:none}
}
@media(prefers-reduced-motion:reduce){
  ::view-transition-old(root),::view-transition-new(root){animation:none!important}
  .bp-scroll-progress{transition:none}
  .bp-magnetic{translate:none!important;transition:none!important}
  .bp-pointer-glow{display:none}
  :target{animation:none}
  details::details-content{transition:none!important}
  .site-header .brand-mark{transition:none}
}
@media print{
  .bp-scroll-progress,.bp-pointer-glow{display:none!important}
}