.credencialize-loader {
  display: block;
  width: min(176px, 42vw);
  aspect-ratio: 1;
  overflow: visible;
}

.credencialize-loader__stroke {
  fill: none;
  vector-effect: non-scaling-stroke;
  stroke-linejoin: round;
  stroke-linecap: round;
  transition: stroke .4s ease, opacity .4s ease;
}

.credencialize-loader__shadow {
  stroke: rgba(115, 119, 158, .1);
  stroke-width: 2.6;
  filter: blur(.25px);
}

.credencialize-loader__outline {
  stroke: rgba(196, 198, 232, .27);
  stroke-width: 1.05;
}

.credencialize-loader__sweep-glow { stroke-width: 5; opacity: .48; }
.credencialize-loader__sweep-core { stroke-width: 1.35; }

@keyframes credencialize-loader-breathe {
  0%, 100% { opacity: .6; }
  50% { opacity: 1; }
}

.is-success .credencialize-loader__shadow {
  stroke: rgba(105, 231, 174, .38);
  filter: drop-shadow(0 0 8px rgba(105, 231, 174, .55));
}

.is-success .credencialize-loader__outline {
  stroke: #69e7ae;
  stroke-width: 1.8;
}

.is-success .credencialize-loader__sweep-glow,
.is-success .credencialize-loader__sweep-core {
  animation: none;
  opacity: 0;
}

.event-loading-region { position: relative; }
.event-loading-region__loader { display: none; }
.event-loading-region__loader .credencialize-loader { width: min(112px, 30vw); }
.has-js .event-loading-region { min-height: 220px; }
.has-js .event-loading-region__loader { position: absolute; z-index: 2; inset: 0; display: grid; place-items: center; opacity: 1; transition: opacity .3s ease; }
.has-js .event-loading-region__content { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .35s ease; }
.event-loading-region.is-ready { min-height: 0; }
.event-loading-region.is-ready .event-loading-region__loader { opacity: 0; visibility: hidden; }
.event-loading-region.is-ready .event-loading-region__content { opacity: 1; visibility: visible; pointer-events: auto; }

.event-skeleton {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  overflow: hidden;
}

.event-skeleton--list {
  grid-template-columns: repeat(auto-fill, minmax(min(270px, 100%), 1fr));
}

.event-skeleton__card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--dashboard-border);
  border-radius: 17px;
  background: var(--dashboard-surface-solid);
  box-shadow: var(--dashboard-card-shadow);
}

.event-skeleton__visual,
.event-skeleton__line {
  background: linear-gradient(100deg, var(--dashboard-soft) 20%, color-mix(in srgb, var(--dashboard-soft) 55%, var(--dashboard-surface-solid)) 40%, var(--dashboard-soft) 60%);
  background-size: 220% 100%;
  animation: event-skeleton-shimmer 1.35s ease-in-out infinite;
}

.event-skeleton__visual { aspect-ratio: 16 / 7.6; }
.event-skeleton__body { min-height: 160px; padding: 18px 17px; }
.event-skeleton__line { height: 11px; margin-bottom: 13px; border-radius: 99px; }
.event-skeleton__line--title { width: 68%; height: 14px; }
.event-skeleton__line--short { width: 42%; }

@keyframes event-skeleton-shimmer {
  to { background-position-x: -220%; }
}

.cms-page-skeleton { pointer-events: none; }
/* O skeleton reaproveita as classes reais dos componentes; aqui as molduras somem
   para sobrar apenas o shimmer dos blocos. */
.cms-page-skeleton .event-summary-card,
.cms-page-skeleton .event-search-field { border-color: transparent; box-shadow: none; }
.cms-skeleton-line, .cms-skeleton-heading, .cms-skeleton-summary span, .cms-skeleton-panel {
  border-radius: 12px;
  background: linear-gradient(100deg, var(--dashboard-soft) 20%, color-mix(in srgb, var(--dashboard-soft) 55%, var(--dashboard-surface-solid)) 40%, var(--dashboard-soft) 60%);
  background-size: 220% 100%;
  animation: event-skeleton-shimmer 1.35s ease-in-out infinite;
}
.cms-skeleton-line { height: 13px; margin-bottom: 12px; }
.cms-skeleton-line--eyebrow { width: 145px; height: 9px; }
.cms-skeleton-line--hero { width: min(520px, 84%); height: 34px; }
.cms-skeleton-line--copy { width: min(460px, 72%); }
.cms-skeleton-heading { width: 210px; height: 42px; margin: 34px 0 18px; }
.cms-skeleton-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 28px 0 18px; }
.cms-skeleton-summary span { min-height: 94px; }
.cms-skeleton-panel { min-height: 155px; margin-top: 18px; }
.cms-skeleton-panel--table { min-height: 310px; }

@media (max-width: 900px) {
  .event-skeleton { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .event-skeleton__card:nth-child(3) { display: none; }
}

@media (max-width: 1050px) {
  .cms-skeleton-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .event-skeleton { grid-template-columns: minmax(0, 84vw); }
  .event-skeleton--list { grid-template-columns: 1fr; }
  .event-skeleton__card:nth-child(n+2) { display: none; }
}

@media (max-width: 520px) {
  .cms-skeleton-summary { grid-template-columns: 1fr; }
  .cms-skeleton-summary span { min-height: 70px; }
}

@media (prefers-reduced-motion: reduce) {
  .credencialize-loader__sweep-glow,
  .credencialize-loader__sweep-core { display: none; animation: none; }

  /* Keep essential loading feedback with a slow fade, without moving the logo.
     The scoped !important overrides the login's universal .01ms animation reset. */
  .credencialize-loader .credencialize-loader__outline {
    stroke: #67c7f2;
    animation: credencialize-loader-breathe 3s ease-in-out infinite !important;
  }

  .is-success .credencialize-loader .credencialize-loader__outline {
    stroke: #69e7ae;
    animation: none !important;
    opacity: 1;
  }

  .event-loading-region__loader,
  .event-loading-region__content { transition: none; }

  .event-skeleton__visual,
  .event-skeleton__line,
  .cms-skeleton-line,
  .cms-skeleton-heading,
  .cms-skeleton-summary span,
  .cms-skeleton-panel { animation: none; }
}