/* Album covers (see album-cover.js). The cover sits where the group heading was; the folders live in a drawer underneath it. */
.ar-groups .ar-group > h3.ar-cover-h { display: block; font: inherit; letter-spacing: 0; }
.ar-groups .ar-group > h3.ar-cover-h::before, .ar-groups .ar-group > h3.ar-cover-h::after { content: none; }

.ar-cover {
  --cover-red: #E10600; --cover-ease: cubic-bezier(.76, 0, .24, 1);
  position: relative; display: block; width: 100%; min-height: clamp(172px, 28vh, 250px);
  padding: 18px 20px 46px; border: 0; border-radius: 10px; background: #050504; color: var(--cover-red);
  text-align: left; cursor: pointer; overflow: hidden; isolation: isolate;
  font-family: var(--font-display); -webkit-tap-highlight-color: transparent;
  transition: min-height 640ms var(--cover-ease), transform 420ms var(--ease-editorial, cubic-bezier(.16,.6,.2,1));
}
.ar-cover:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .ar-group:not(.is-flick) .ar-cover:hover { transform: translate3d(0, -2px, 0); } }

.ar-cover-title {
  position: relative; z-index: 2; display: block; text-transform: uppercase; font-weight: 700;
  font-size: clamp(2.5rem, calc(var(--ar-w) / 8.6), 4.6rem); line-height: .88; letter-spacing: -.035em;
  text-wrap: balance; overflow-wrap: anywhere;
  transition: font-size 640ms var(--cover-ease), transform 380ms var(--cover-ease), opacity 380ms var(--cover-ease);
}
.ar-cover-count { display: inline-block; margin-left: .22em; font-size: .26em; font-weight: 600; letter-spacing: 0; vertical-align: top; position: relative; top: .5em; font-variant-numeric: tabular-nums; }

.ar-cover-meta {
  position: absolute; z-index: 2; left: 20px; right: 20px; bottom: 15px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font-family: var(--font-sans); font-weight: 500; font-size: .625rem; line-height: 1; letter-spacing: .14em; text-transform: uppercase;
}
.ar-cover-meta .cue { display: inline-flex; align-items: center; gap: 8px; }
.ar-cover-meta .cue::after { content: "+"; font-size: 1.25rem; font-weight: 400; letter-spacing: 0; line-height: .6; transition: transform 360ms var(--cover-ease); }
.ar-cover-meta .c-c { display: none; }
.ar-group.is-open .ar-cover-meta .c-o { display: none; }
.ar-group.is-open .ar-cover-meta .c-c { display: inline; }
.ar-group.is-open .ar-cover-meta .cue::after { transform: rotate(45deg); }

/* Flicker: one full-bleed photo at a time, swapped every few frames. Looks: bw / red duotone / yellow heat; the last cut stays, dimmed. */
.ar-cover-stage { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.ar-cover-stage .flick { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 500ms ease; }
.ar-cover-stage::after { content: ""; position: absolute; inset: 0; mix-blend-mode: multiply; background: transparent; }
.ar-cover-stage.t-bw .flick   { opacity: 1; transition: none; filter: grayscale(1) contrast(1.45) brightness(1.05); }
.ar-cover-stage.t-red .flick  { opacity: 1; transition: none; filter: grayscale(1) contrast(1.7) brightness(1.1); }
.ar-cover-stage.t-red::after  { background: #E10600; }
.ar-cover-stage.t-heat .flick { opacity: 1; transition: none; filter: grayscale(1) contrast(1.6) brightness(1.15); }
.ar-cover-stage.t-heat::after { background: #FFB000; }
.ar-cover-stage.t-final .flick { opacity: .42; transition: opacity 600ms ease; filter: grayscale(1) contrast(1.5) brightness(.85); }

/* While the photos cut, the lettering stays put; then it lifts away and comes back small once the cover has settled into a banner. */
.ar-group.title-out .ar-cover-title { transform: translate3d(0, -34%, 0); opacity: 0; }
.ar-group.is-open .ar-cover { min-height: 96px; }
.ar-group.is-open .ar-cover-title { font-size: clamp(1.7rem, calc(var(--ar-w) / 14), 2.4rem); }

/* Drawer with the sub-albums (the existing folder stack); the list fades in from a blur. */
.ar-sub { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows 560ms var(--cover-ease, cubic-bezier(.76,0,.24,1)), visibility 0s linear 560ms; }
.ar-group.is-open .ar-sub { grid-template-rows: 1fr; visibility: visible; transition-delay: 0s; }
.ar-sub-in { min-height: 0; overflow: hidden; }
.ar-sub.settled .ar-sub-in { overflow: visible; }
.ar-group.is-open .ar-list { margin-top: 26px; animation: arListIn 760ms cubic-bezier(.22, 1, .36, 1) backwards; }
@keyframes arListIn { from { opacity: 0; filter: blur(10px); transform: translate3d(0, 14px, 0); } }

@media (prefers-reduced-motion: reduce) {
  .ar-cover, .ar-cover-title, .ar-sub, .ar-cover-stage .flick { transition: none; }
  .ar-group.is-open .ar-list { animation: none; }
}