/*
 * Aural Consent Lite - UI helpers
 *
 * This file is intentionally minimal and avoids overriding your custom design.
 * It only adds:
 *  - optional animations (banner + modal)
 *  - optional focus outlines (keyboard navigation)
 */

:root {
  --ac-ui-enter: 220ms;
  --ac-ui-exit: 160ms;
  --ac-ui-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ac-ui-focus: #B08D55;
}

/* -------------------- Focus styles (optional) -------------------- */
html.acl-ui-focus .aural-consent-lite__btn:focus-visible,
html.acl-ui-focus .aural-consent-lite__link:focus-visible,
html.acl-ui-focus .aural-consent-lite__close:focus-visible,
html.acl-ui-focus .aural-consent-lite__modal-close:focus-visible,
html.acl-ui-focus .aural-consent-lite__footer-link a:focus-visible {
  outline: 2px solid var(--ac-ui-focus);
  outline-offset: 3px;
}

/* -------------------- Animations (optional) -------------------- */
@keyframes aclFadeInUp {
  from { opacity: 0; transform: translate3d(0, 10px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes aclFadeOutDown {
  from { opacity: 1; transform: translate3d(0, 0, 0); }
  to   { opacity: 0; transform: translate3d(0, 10px, 0); }
}

@keyframes aclBackdropIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes aclBackdropOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}

@keyframes aclScaleIn {
  from { opacity: 0; transform: translate3d(0, 8px, 0) scale(0.98); }
  to   { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes aclScaleOut {
  from { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
  to   { opacity: 0; transform: translate3d(0, 8px, 0) scale(0.98); }
}

/* -------------------- Reopen icon animations (optional) -------------------- */
:root {
  --ac-reopen-anim-duration: 8s;
}

@keyframes aclReopenRotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes aclReopenPulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.05); }
  100% { transform: scale(1); }
}

/* Animate only the icon itself (image), not the whole clickable area. */
.aural-consent-lite__footer-link--anim-rotate .aural-consent-lite__reopen-img {
  transform-origin: 50% 50%;
  animation: aclReopenRotate var(--ac-reopen-anim-duration, 8s) linear infinite;
}

.aural-consent-lite__footer-link--anim-pulse .aural-consent-lite__reopen-img {
  transform-origin: 50% 50%;
  animation: aclReopenPulse var(--ac-reopen-anim-duration, 3s) ease-in-out infinite;
}

html.acl-ui-anim .aural-consent-lite.acl-anim-enter {
  animation: aclFadeInUp var(--ac-ui-enter) var(--ac-ui-ease) both;
}

html.acl-ui-anim .aural-consent-lite.acl-anim-leave {
  animation: aclFadeOutDown var(--ac-ui-exit) var(--ac-ui-ease) both;
}

html.acl-ui-anim .aural-consent-lite__modal-backdrop.acl-anim-enter {
  animation: aclBackdropIn var(--ac-ui-modal-enter, var(--ac-ui-enter)) var(--ac-ui-ease) both;
}

html.acl-ui-anim .aural-consent-lite__modal-backdrop.acl-anim-leave {
  animation: aclBackdropOut var(--ac-ui-modal-exit, var(--ac-ui-exit)) var(--ac-ui-ease) both;
}

html.acl-ui-anim .aural-consent-lite__modal-panel.acl-anim-enter {
  animation: aclScaleIn var(--ac-ui-modal-enter, var(--ac-ui-enter)) var(--ac-ui-ease) both;
}

html.acl-ui-anim .aural-consent-lite__modal-panel.acl-anim-leave {
  animation: aclScaleOut var(--ac-ui-modal-exit, var(--ac-ui-exit)) var(--ac-ui-ease) both;
}

/* Respect system preference. */
@media (prefers-reduced-motion: reduce) {
  html.acl-ui-anim .aural-consent-lite.acl-anim-enter,
  html.acl-ui-anim .aural-consent-lite.acl-anim-leave,
  html.acl-ui-anim .aural-consent-lite__modal-backdrop.acl-anim-enter,
  html.acl-ui-anim .aural-consent-lite__modal-backdrop.acl-anim-leave,
  html.acl-ui-anim .aural-consent-lite__modal-panel.acl-anim-enter,
  html.acl-ui-anim .aural-consent-lite__modal-panel.acl-anim-leave {
    animation: none !important;
  }

  .aural-consent-lite__footer-link--anim-rotate .aural-consent-lite__reopen-img,
  .aural-consent-lite__footer-link--anim-pulse .aural-consent-lite__reopen-img {
    animation: none !important;
  }
}