/* Info Banner component. Vendor widget integration; one source for its visuals. */
.apx-notice:empty{display:none}
.apx-notice .info-banner{color:#f1fcff;padding:15px 22px;}
.apx-notice .info-banner__close{background:transparent;color:#fff;}
.apx-notice{position:relative;margin-block:8px 16px;isolation:isolate}
.apx-notice .info-banner{position:relative;overflow:hidden;min-height:86px;border:1px solid #48d8cf97;border-radius:18px;box-shadow:0 12px 42px #0004,inset 0 1px #d6fff63d,0 0 35px #35ffe015;transition:transform .35s,box-shadow .35s}
.apx-notice .info-banner::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 20%,#ffffff11 40%,transparent 57%);background-size:250% 100%;animation:apxNoticeShine 8s linear infinite}
.apx-notice .info-banner::after{content:"";position:absolute;left:24px;right:24px;bottom:0;height:2px;background:linear-gradient(90deg,transparent,#75f4de,#ffd95d,transparent);background-size:220% 100%;animation:apxNoticeFlow 6s linear infinite}
.apx-notice .info-banner__content{position:relative;z-index:1;display:flex;align-items:center;color:#fafcff}
.apx-notice .info-banner__body{color:#f5fbff;font-size:clamp(14px,1.15vw,16px);line-height:1.65;overflow-wrap:anywhere}
.apx-notice .info-banner__body p{margin:0}
.apx-notice .info-banner__icon{width:43px;height:43px;display:grid;place-items:center;}
.apx-notice .info-banner__icon::after{
  content:none;
}
.apx-notice .info-banner__close{margin-left:auto;width:40px;height:40px;border-radius:50%;border:1px solid #76c8d080;transition:transform .35s,background .35s}
.apx-notice .info-banner__close:hover{transform:rotate(90deg) scale(1.07);background:#fff2}
.apx-notice .info-banner--warning{border-color:#ffd36b}
.apx-notice .info-banner--error{border-color:#ff667b}
.apx-notice .info-banner--success{border-color:#87ee9f}
@keyframes apxNoticeShine{to{background-position:-220% 0}}
@keyframes apxNoticeFlow{to{background-position:220% 0}}
.apx-notice .info-banner__body{flex:1 1 auto;min-width:0;width:auto;max-width:none}
.apx-notice .info-banner__icon{flex:0 0 43px}
.apx-notice .info-banner__close{position:relative;flex:0 0 40px}
.apx-notice .info-banner__close::before,.apx-notice .info-banner__close::after{content:"";display:block;position:absolute;top:18px;left:11px;width:17px;height:2px;background:#f7faff;border-radius:2px;transform:rotate(45deg)}
.apx-notice .info-banner__close::after{transform:rotate(-45deg)}
@media (max-width:650px){
.apx-notice .info-banner__content{padding:16px 13px;gap:11px}
.apx-notice .info-banner__body{font-size:13px;line-height:1.5}
.apx-notice .info-banner__icon{flex-basis:32px;width:32px;height:32px;border-radius:10px}
.apx-notice .info-banner__close{flex-basis:32px;width:32px;height:32px}
.apx-notice .info-banner__close::before,.apx-notice .info-banner__close::after{left:8px;top:15px}
}
.apx-notice .info-banner__icon{position:relative;isolation:isolate;background:linear-gradient(145deg,#5dfad9,#34bdf8);border:1px solid #a5ffeb6e;border-radius:50%;box-shadow:0 0 0 7px #5efcce0d,0 0 25px #5afbe86e}
.apx-notice .info-banner__icon::before{content:"i";position:absolute;inset:0;display:grid;place-items:center;color:#081b27;font-size:24px;font-weight:850;font-family:Georgia,serif;line-height:1}
.apx-notice .info-banner{background:radial-gradient(ellipse 50% 140% at 5% 40%,#0d595a,#14253f 68%,#322049)}
.apx-notice .info-banner__content{padding:20px 25px;gap:16px}
.apx-notice .info-banner__close{flex-shrink:0}
.apx-site .info-banner__content{display:flex;align-items:center;gap:clamp(12px,2vw,24px)}
.apx-site .info-banner__body{flex:1;min-width:0}
.apx-site .info-banner__close{position:relative;inset:auto;align-self:center;flex:0 0 42px;display:grid;place-items:center;width:42px;height:42px;min-height:42px;margin:0 0 0 auto;line-height:1;transform:none;vertical-align:middle}
.apx-site .info-banner__close::before,.apx-site .info-banner__close::after{position:absolute;top:50%;left:50%;right:auto;bottom:auto;transform-origin:center}
.apx-site .info-banner__close::before{transform:translate(-50%,-50%) rotate(45deg)}
.apx-site .info-banner__close::after{transform:translate(-50%,-50%) rotate(-45deg)}

/* Canonical Info Banner optical treatments formerly housed in motion foundations.
 * Keep widget presentation here; Drupal Info Banner owns its behavior. */
.apx-site .apx-notice .info-banner{background-size:200% 200%;animation:apxNoticeAurora 15s ease-in-out infinite alternate}
@keyframes apxNoticeAurora{to{background-position:100% 50%}}
.apx-site .apx-notice .info-banner__icon{transition:transform .5s cubic-bezier(.17,.88,.25,1),filter .45s;transform-origin:50% 70%}
.apx-site .apx-notice .info-banner__icon:hover{transform:rotate(-12deg) scale(1.2);filter:drop-shadow(0 0 16px #76ffec)}
.apx-site .apx-notice .info-banner__body{transform:translateZ(0)}
.apx-site .apx-notice .info-banner__body:hover{color:#fff;text-shadow:0 0 16px #b9fff267}
.apx-site .apx-notice .info-banner__close{display:grid;place-items:center;align-self:center;margin-block:auto;}
.apx-site .apx-notice .info-banner__close:hover{transform:rotate(90deg) scale(1.1);background:#ffffff1e;box-shadow:0 0 0 6px #ffffff0b,0 0 20px #ffd70040}
.apx-site .apx-notice .info-banner__body{position:relative;isolation:isolate;transition:filter 1.3s ease,color 1.3s ease}
.apx-site .apx-notice .info-banner__body:hover{filter:brightness(1.17);}
.apx-site .apx-notice .info-banner__body::after{content:"";position:absolute;inset:-8px -12px;pointer-events:none;background:linear-gradient(102deg,transparent 15%,#ffffff00 32%,#caffee34 47%,transparent 61%);background-size:280% 100%;background-position:120% 0;opacity:0;mix-blend-mode:screen;transition:opacity .5s}
.apx-site .apx-notice .info-banner__body:hover::after{opacity:1;animation:apx19TextWave 2.7s var(--apx-silk) both}
@keyframes apx19TextWave{from{background-position:120% 0}to{background-position:-120% 0}}
.apx-site .apx-notice .info-banner__icon{animation:apx19IconBreathe 6s ease-in-out infinite;cursor:default}
.apx-site .apx-notice .info-banner__icon:hover{animation:apx19IconPop 1.4s var(--apx-silk) both;transform-origin:center}
@keyframes apx19IconBreathe{50%{box-shadow:0 0 0 8px #5af6de0f,0 0 32px #57f3e27a}}
@keyframes apx19IconPop{0%,100%{transform:scale(1) rotate(0)}40%{transform:scale(1.19) rotate(-10deg)}70%{transform:scale(.97) rotate(7deg)}}
.apx-site .apx-notice .info-banner__close{transition:transform 1.1s var(--apx-silk),box-shadow .85s ease,background .85s ease}

/* Discoverable close affordance. The vendor button keeps its native click
 * action; only a subtle ring and X motion are themed here. */
.apx-site .apx-notice .info-banner__close{
  cursor:pointer;
  border-color:#a7fff2a3;
  animation:apxNoticeCloseRing 2.9s ease-in-out infinite;
}
.apx-site .apx-notice .info-banner__close::before,
.apx-site .apx-notice .info-banner__close::after{
  transition:background-color .4s ease,width .4s ease;
}
.apx-site .apx-notice .info-banner__close:is(:hover,:focus-visible){
  animation-play-state:paused;border-color:#ffe8b0;
  background:#a6fff124;box-shadow:0 0 0 5px #89fce221,0 0 18px #91fce64d;
}
.apx-site .apx-notice .info-banner__close:is(:hover,:focus-visible)::before,
.apx-site .apx-notice .info-banner__close:is(:hover,:focus-visible)::after{
  width:21px;background:#fff4c5;
}
.apx-site .apx-notice .info-banner__close:focus-visible{outline:2px solid #ffe5a0;outline-offset:3px}
@keyframes apxNoticeCloseRing{
  0%{border-color:#e2ffee;box-shadow:0 0 0 1px #7affdc8a,0 0 13px #7affdc46}
  18%{border-color:#a7fff2;box-shadow:0 0 0 6px #7affdc2c,0 0 22px #7affdc67}
  40%{border-color:#7affdc9a;box-shadow:0 0 0 10px #7affdc00,0 0 4px #7affdc12}
  62%{border-color:#e6f5da;box-shadow:0 0 0 1px #ffe3a64a,0 0 12px #ffe2a628}
  82%,100%{border-color:#a7fff2a3;box-shadow:0 0 0 0 #7affdc00}
}
/* Local accessibility contract remains effective independent of base reset. */
@media(prefers-reduced-motion:reduce){.apx-site .apx-notice .info-banner,.apx-site .apx-notice .info-banner__icon,.apx-site .apx-notice .info-banner__close{animation:none}}
