:root{
--aems-blue: #0e3a63; /* fallback colour */
--aems-white: #fff;
--aems-shadow: 0 10px 24px rgba(0,0,0,.18);
--aems-event-bg: url('/assets/images/events/bg-event.gif');
}

.aems-edge-btn{
position: fixed;
top: 30vh;
right: 0;
z-index: 1030;
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 56px;
height: 160px;

color: var(--aems-white);
background-color: var(--aems-blue);   /* fallback if no image loads */
background-image: var(--aems-event-bg);
background-size: cover;               /* make image cover entire area */
background-position: center;          /* centre crop */
background-repeat: no-repeat;

border-radius: 14px 0 0 14px;
box-shadow: var(--aems-shadow);
text-decoration: none;
overflow: hidden;
}

.aems-bell{
font-size: 22px;
margin-bottom: 12px;
transform-origin: 50% 0%;
}

.aems-edge-label{
writing-mode: vertical-rl;
transform: rotate(180deg);
font: 700 15px/1 system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
}

.aems-edge-btn:hover { filter: brightness(1.05); }

/* Bell shake animation */
@keyframes bell-ring {
  0%   { transform: rotate(0deg);   }
  12%  { transform: rotate(18deg);  }
  24%  { transform: rotate(-14deg); }
  36%  { transform: rotate(10deg);  }
  48%  { transform: rotate(-6deg);  }
  60%  { transform: rotate(3deg);   }
  72%  { transform: rotate(-2deg);  }
  100% { transform: rotate(0deg);   }
}

.aems-bell.is-shaking {
  animation: bell-ring 1.1s ease-in-out both;
}