/* ==========================================================================
   Marathon Ballot, Loading Ticker
   Styles for the slot-machine year reveal overlay.

   All class names are scoped under `.mblt-overlay` to avoid collisions.
   Reads --accent from :root (defined in colors_and_type.css).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Overlay shell, full-bleed orange canvas with fade-in
   -------------------------------------------------------------------------- */
.mblt-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--accent, #e88a4d);
  color: #1a0f06;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 280ms cubic-bezier(.2, .7, .2, 1);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: contain;
}
.mblt-overlay.mblt-in {
  opacity: 1;
}

/* --------------------------------------------------------------------------
   Card, off-white panel that holds the ticker
   -------------------------------------------------------------------------- */
.mblt-card {
  background: #f6efe6;
  border-radius: 18px;
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(26, 15, 6, 0.06),
    0 24px 60px -20px rgba(26, 15, 6, 0.28),
    0 80px 120px -60px rgba(26, 15, 6, 0.35);
  transform: scale(0.96);
  transition: transform 360ms cubic-bezier(.2, .7, .2, 1);
}
.mblt-overlay.mblt-in .mblt-card {
  transform: scale(1);
}
.mblt-overlay.mblt-mobile .mblt-card {
  border-radius: 14px;
}

/* --------------------------------------------------------------------------
   Stage, visible window. JS sets width/height inline (desktop / mobile).
   -------------------------------------------------------------------------- */
.mblt-stage {
  position: relative;
  overflow: hidden;
}

/* Edge fade masks, soften where blocks enter/exit */
.mblt-mask {
  position: absolute;
  top: 0; bottom: 0;
  width: 96px;
  pointer-events: none;
  z-index: 4;
}
.mblt-mask-l { left: 0;  background: linear-gradient(to right, #f6efe6, rgba(246, 239, 230, 0)); }
.mblt-mask-r { right: 0; background: linear-gradient(to left,  #f6efe6, rgba(246, 239, 230, 0)); }
.mblt-mobile .mblt-mask { width: 48px; }

/* --------------------------------------------------------------------------
   Center frame, bracket markers (viewfinder corners)
   JS sets width inline to match the ITEM_W.
   -------------------------------------------------------------------------- */
.mblt-frame {
  position: absolute;
  left: 50%;
  top: 50%;
  height: 100%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 6;
}
.mblt-bracket {
  position: absolute;
  width: 16px;
  height: 16px;
  border: 2px solid #1a0f06;
  opacity: 0.85;
  transition: transform 220ms cubic-bezier(.2, .7, .2, 1);
}
.mblt-bracket.mblt-tl { top: 14px;    left: 14px;    border-right: 0; border-bottom: 0; }
.mblt-bracket.mblt-tr { top: 14px;    right: 14px;   border-left: 0;  border-bottom: 0; }
.mblt-bracket.mblt-bl { bottom: 14px; left: 14px;    border-right: 0; border-top: 0; }
.mblt-bracket.mblt-br { bottom: 14px; right: 14px;   border-left: 0;  border-top: 0; }

/* Mobile, smaller brackets, tighter offset */
.mblt-mobile .mblt-bracket          { width: 11px; height: 11px; border-width: 1.5px; }
.mblt-mobile .mblt-bracket.mblt-tl,
.mblt-mobile .mblt-bracket.mblt-tr  { top: 10px; }
.mblt-mobile .mblt-bracket.mblt-bl,
.mblt-mobile .mblt-bracket.mblt-br  { bottom: 10px; }
.mblt-mobile .mblt-bracket.mblt-tl,
.mblt-mobile .mblt-bracket.mblt-bl  { left: 10px; }
.mblt-mobile .mblt-bracket.mblt-tr,
.mblt-mobile .mblt-bracket.mblt-br  { right: 10px; }

/* Lock, brackets push outward from each corner when the reel settles */
.mblt-overlay.mblt-locked .mblt-bracket.mblt-tl { transform: translate(-3px, -3px) scale(1.25); }
.mblt-overlay.mblt-locked .mblt-bracket.mblt-tr { transform: translate( 3px, -3px) scale(1.25); }
.mblt-overlay.mblt-locked .mblt-bracket.mblt-bl { transform: translate(-3px,  3px) scale(1.25); }
.mblt-overlay.mblt-locked .mblt-bracket.mblt-br { transform: translate( 3px,  3px) scale(1.25); }

/* --------------------------------------------------------------------------
   Ribbon, scrolling row of year blocks
   -------------------------------------------------------------------------- */
.mblt-ribbon-mask {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.mblt-ribbon {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: stretch;
  will-change: transform;
}

/* Each block, year on top, mono label below, both vertically centered.
   Hairline rule on the right edge (last block has none). */
.mblt-cell {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 100%;
  color: #1a0f06;
  border-right: 1px solid rgba(26, 15, 6, 0.14);
}
.mblt-cell:last-child {
  border-right: 0;
}
.mblt-mobile .mblt-cell {
  gap: 4px;
}
.mblt-pad { /* empty leading cells, no content */ }

.mblt-year {
  font-size: 110px;
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 0.9;
  color: #1a0f06;
  font-variant-numeric: tabular-nums;
}
.mblt-mobile .mblt-year {
  font-size: 68px;
}

.mblt-label {
  font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #8a5230;
}
.mblt-mobile .mblt-label {
  font-size: 10px;
  letter-spacing: 0.18em;
}

/* Accepted block, same ink-colored year, but label flips to accent + bold */
.mblt-accepted .mblt-label {
  color: var(--accent, #e88a4d);
  font-weight: 700;
}

/* Lock pops, fire when the ribbon settles */
.mblt-cell.mblt-locked .mblt-year {
  animation: mblt-year-pop 480ms cubic-bezier(.18, .85, .28, 1.05) both;
}
.mblt-cell.mblt-locked .mblt-label {
  animation: mblt-label-pop 480ms cubic-bezier(.18, .85, .28, 1.05) 80ms both;
}
@keyframes mblt-year-pop {
  0%   { transform: scale(1);     }
  40%  { transform: scale(1.06);  }
  100% { transform: scale(1);     }
}
@keyframes mblt-label-pop {
  0%   { opacity: 0.55; transform: translateY(2px); letter-spacing: 0.22em; }
  100% { opacity: 1;    transform: translateY(0);   letter-spacing: 0.26em; }
}

/* --------------------------------------------------------------------------
   Reduced-motion, no scroll/spring; reel cuts directly to the locked state.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .mblt-overlay { transition: opacity 200ms ease; }
  .mblt-card { transition: none; transform: none !important; }
  .mblt-ribbon { transition: none !important; }
  .mblt-bracket { transition: none !important; }
  .mblt-cell.mblt-locked .mblt-year,
  .mblt-cell.mblt-locked .mblt-label { animation: none; }
}