/* ============================================================
   ANNOUNCEMENTS — Cabinet Button + Carousel Modal
   ============================================================ */

/* ---- Floating Cabinet Tab (right side) ---- */
.ann-tab {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 900;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: goldenrod;
  color: var(--white);
  padding: 1rem 0.6rem;
  border-radius: 10px 0 0 10px;
  cursor: pointer;
  box-shadow: -3px 0 18px rgba(230, 5, 14, 0.35);
  transition: background 0.2s ease, transform 0.2s ease;
  border: none;
  writing-mode: initial;
  min-width: 52px;
}

.ann-tab:hover {
  background: var(--crimson-light);
  transform: translateY(-50%) translateX(-4px);
}

.ann-tab__icon {
  font-size: 1.4rem;
  line-height: 1;
}

.ann-tab__label {
  font-family: var(--font-body);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
  line-height: 1;
}

.ann-tab__dot {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 9px;
  height: 9px;
  background: var(--gold-light);
  border-radius: 50%;
  border: 2px solid var(--crimson);
  animation: ann-pulse 2s infinite;
}

@keyframes ann-pulse {

  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }

  50% {
    transform: scale(1.3);
    opacity: 0.75;
  }
}


/* ============================================================
   SCROLL MODAL
   ------------------------------------------------------------
   The modal frame is built from 3 sliced pieces of the scroll
   artwork instead of one stretched image:
     scroll-top.png    – fixed, never stretches (finials + quill + bird)
     scroll-middle.png – seamless tile, repeats vertically to fill
                          whatever height the content needs
     scroll-bottom.png – fixed, never stretches (finials + building + quill)
   This is what lets the modal grow for longer announcements
   without warping the carved rod ends or corner illustrations.

   --ann-pad-x/top/bottom are declared in % on purpose: CSS resolves
   top/bottom padding percentages against the element's WIDTH, which
   here works in our favor — the safe text zone scales in lockstep
   with the artwork as the modal's width changes at each breakpoint.

   These 3 values are the ones most likely to need a nudge once you
   see it live in-browser (image-based measurement isn't pixel-exact)
   — bump --ann-pad-x if text ever touches the gold rods, bump
   --ann-pad-top/bottom if the header/footer sit on top of the quill
   or building sketches more than you'd like.
   ============================================================ */

/* ---- Modal Overlay ---- */
.ann-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 12, 4, 0.75);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.ann-overlay.is-open {
  opacity: 1;
  pointer-events: all;
}

/* ---- Modal Box ---- */
.ann-modal {
  --ann-pad-x: 11%;
  --ann-pad-top: 15%;
  --ann-pad-bottom: 11%;
  --ann-ink: #4a2f14;
  --ann-ink-muted: #7a5c3a;
  --ann-title-font: 'Iowan Old Style', Georgia, serif;

  position: relative;
  width: 100%;
  max-width: 840px;
  max-height: 90vh;
  overflow: hidden;
  border-radius: 6px;
  display: flex;
  flex-direction: column;

  /* Scroll-unrolling open animation: scaleX carries the "unroll"
     motion, the back-out easing gives it a springy paper-flop
     settle without needing a separate keyframe animation. */
  transform-origin: 50% 50%;
  transform: scaleX(0.04) scaleY(0.88);
  opacity: 0;
  transition: transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
}

.ann-overlay.is-open .ann-modal {
  transform: scaleX(1) scaleY(1);
  opacity: 1;
}

/* ---- Layered scroll artwork (behind everything) ---- */
.ann-modal__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  flex-direction: column;
  pointer-events: none;
}

.ann-modal__bg-top,
.ann-modal__bg-bottom {
  flex-shrink: 0;
  width: 100%;
  background-repeat: no-repeat;
  background-size: 100% auto;
}

.ann-modal__bg-top {
  background-image: url('../images/scroll/scroll-top.png');
  background-position: top center;
  aspect-ratio: 1100 / 358;
}

.ann-modal__bg-mid {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  background-image: url('../images/scroll/scroll-middle.png');
  background-repeat: repeat-y;
  background-size: 100% auto;
  background-position: top center;
}

.ann-modal__bg-bottom {
  background-image: url('../images/scroll/scroll-bottom.png');
  background-position: bottom center;
  aspect-ratio: 1100 / 261;
  margin-top: auto;
}

/* ---- Content sits transparently on top of the artwork ---- */
.ann-modal__content {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: var(--ann-pad-top) var(--ann-pad-x) var(--ann-pad-bottom);
}


/* ---- Header (transparent, ink-colored, sits on the parchment) ---- */
.ann-modal__header {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  flex-shrink: 0;
  padding-bottom: 0.75rem;
}

.ann-modal__header-icon {
  font-size: 1.55rem;
  line-height: 1;
  margin-top: 0.1rem;
}

.ann-modal__title {
  font-family: var(--ann-title-font);
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--ann-ink);
  line-height: 1.25;
}

.ann-modal__subtitle {
  font-size: 0.72rem;
  color: var(--ann-ink-muted);
  margin-top: 0.15rem;
}

/* ---- Topbar: an invisible box that exactly overlays .ann-modal__bg-top
   (same aspect-ratio), so % positioning inside it tracks the artwork's
   own scaling instead of the modal's total height, which varies with
   content length. This is what keeps the close button pinned just under
   the top ornament border at any modal size. ---- */
.ann-modal__topbar {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  aspect-ratio: 1100 / 358;
  z-index: 2;
  pointer-events: none;
}

/* ---- Close button: small gold disc, tucked just under the top-right
   ornament border ---- */
.ann-modal__close {
  position: absolute;
  pointer-events: auto;
  top: 45%;
  right: 12.5%;
  /* background: linear-gradient(155deg, rgba(226, 186, 77, 0.514), rgba(255, 217, 0, 0.251) 55%); */
  border: 1px solid rgba(74, 47, 20, 0.35);
  color: var(--ann-ink);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-size: 0.95rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  /* box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.5); */
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.ann-modal__close:hover {
  transform: scale(1.08);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

/* ---- Carousel Track ---- */
.ann-carousel {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  position: relative;
  display: flex;
}

.ann-carousel__track {
  display: flex;
  flex: 1;
  min-height: 0;
  min-width: 0;
  transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.ann-slide {
  min-width: 100%;
  padding: 0.25rem 0.4rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  overflow-y: auto;
  overflow-x: hidden;

  /* Thin gold scrollbar */
  scrollbar-width: thin;
  scrollbar-color: #ab6e3ab5 rgba(74, 61, 20, 0.08);
}

.ann-slide::-webkit-scrollbar {
  width: 7px;
}

.ann-slide::-webkit-scrollbar-track {
  background: rgba(55, 31, 8, 0.699);
  border-radius: 10px;
}

.ann-slide::-webkit-scrollbar-thumb {
  background: #ab6e3ab5;
  border-radius: 10px;
}

.ann-slide::-webkit-scrollbar-thumb:hover {
  background: #342604c7;
}

/* ---- Slide Content ---- */
.ann-slide__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 0.3rem 0.75rem;
  border-radius: 20px;
  align-self: flex-start;
}

.ann-slide__badge--enrollment {
  border: 1px solid var(--tag-blue-text);
  color: var(--tag-blue-text);
}

.ann-slide__badge--registration {
  border: 1px solid var(--tag-lemon-text);
  color: var(--tag-lemon-text);
}

.ann-slide__badge--academic {
  border: 1px solid var(--tag-lime-text);
  color: var(--tag-lime-text);
}

.ann-slide__badge--event {
  border: 1px solid var(--tag-pink-text);
  color: var(--tag-pink-text);
}

.ann-slide__badge--urgent {
  border: 1px solid var(--tag-cherry-text);
  color: var(--tag-cherry-text);
}

.ann-slide__date {
  font-size: 0.7rem;
  color: var(--ann-ink-muted);
  font-weight: 600;
  letter-spacing: 0.05em;
}

.ann-slide__title {
  font-family: var(--ann-title-font);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--ann-ink);
  line-height: 1.3;
}

.ann-slide__divider {
  border: none;
  border-top: 2px solid #ab6e3ab5;
  width: 44px;
  margin: 0;
  opacity: 0.6;
}

.ann-slide__body {
  font-size: 0.88rem;
  color: var(--ann-ink);
  line-height: 1.3;
  white-space: normal;
  overflow-wrap: break-word;
}

.ann-slide__meta {
  margin-top: auto;
  padding-top: 0.65rem;
  border-top: 1px solid rgba(74, 47, 20, 0.2);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  font-size: 0.75rem;
  color: var(--ann-ink-muted);
}

.ann-slide__meta span {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.ann-slide__link-btn {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.15rem;
  padding: 0.55rem 1.2rem;
  border-radius: 999px;
  background: linear-gradient(155deg, var(--gold-light), var(--gold) 50%, var(--gold-dark));
  color: var(--ann-ink);
  border: 1px solid rgba(74, 47, 20, 0.35);
  font-weight: 700;
  font-size: 0.85rem;
  text-decoration: none;
  transition: transform 0.15s, box-shadow 0.15s;
}

.ann-slide__link-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(74, 47, 20, 0.25);
}

/* ---- Footer: dots + counter on top, prev/next underneath ---- */
.ann-modal__footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  flex-shrink: 0;
  padding-top: 0.6rem;
}

.ann-modal__footer-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
}

.ann-modal__footer-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
}

.ann-dots {
  display: flex;
  gap: 0.4rem;
  align-items: center;
}

.ann-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(74, 47, 20, 0.25);
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
  border: none;
  padding: 0;
}

.ann-dot.is-active {
  background: #ab6e3ab5;
  transform: scale(1.35);
}

.ann-counter {
  font-size: 0.74rem;
  color: var(--ann-ink-muted);
  font-weight: 600;
  white-space: nowrap;
}

/* ---- Prev/Next: gold knobs, sitting under the dots/counter row ---- */
.ann-nav-btn {
  background: linear-gradient(155deg, var(--gold-light), var(--gold) 50%, var(--gold-dark));
  color: var(--ann-ink);
  border: 1px solid rgba(74, 47, 20, 0.35);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 0.95rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.55);
  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

.ann-nav-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

.ann-nav-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* ---- Responsive ---- */
@media (max-width: 600px) {
  .ann-tab__label {
    display: none;
  }

  .ann-tab {
    min-width: 44px;
    padding: 0.9rem 0.5rem;
  }

  .ann-modal {
    --ann-pad-x: 13%;
    --ann-pad-top: 20%;
    --ann-pad-bottom: 17%;
  }

  .ann-nav-btn {
    width: 28px;
    height: 28px;
    font-size: 0.85rem;
  }

  .ann-modal__close {
    width: 26px;
    height: 26px;
  }
}