/* ============================================================================
   COFFEE FESTIVAL EUROPE — the archive
   ----------------------------------------------------------------------------
   The folder-open animation is the Webflow cloneable the client pointed at
   (nw-folder-open-animation.webflow.io/#cards). It was rebuilt from that
   project's own IX2 action lists, read out of the supplied mirror, rather than
   eyeballed — these are its numbers:

     open  (a-7, 500 ms, swingTo = easeOutBack, s = 1.70158)
       .is-1   0 ms   height 10rem → 7rem   width 100%  rotateX   0 → −15°
       .is-2 100 ms   height 10rem → 8rem   width  99%  rotateX   0 → −15°
       .is-3 200 ms   height 10rem → 9rem   width  98%  rotateX   0 → −15°
       .is-5 200 ms   translateY 0 → −70%              rotateX   0 →  +5°
       .is-4 300 ms   height 10rem → 10rem  width 100%  rotateX   0 →   0°

     close (a-8, 500 ms, outQuint — except .is-5, swingFrom = easeInBack)
       .is-4   0 ms · .is-3 100 ms · .is-5 100 ms · .is-2 200 ms · .is-1 300 ms

   The stagger is asymmetric on purpose: opening runs front-to-back, closing
   runs back-to-front. In CSS that means the delays live on the hover rule for
   the open and on the base rule for the close.
   ========================================================================= */

:root{
  --sw-to:   cubic-bezier(.175,.885,.32,1.275);   /* swingTo   / easeOutBack  */
  --sw-from: cubic-bezier(.6,-.28,.735,.045);     /* swingFrom / easeInBack   */
  --out-q:   cubic-bezier(.23,1,.32,1);           /* outQuint                 */
}

/* ---------- one event ---------------------------------------------------- */
.rsec{padding-block:clamp(28px,4vh,54px)}
.rsec__head{display:flex;align-items:baseline;justify-content:space-between;
  flex-wrap:wrap;gap:.8rem 1.6rem;margin-bottom:clamp(16px,2vw,26px);
  padding-bottom:clamp(12px,1.4vw,18px);border-bottom:1px solid rgba(244,238,228,.1)}
.rsec__t{font-family:var(--f-display);font-weight:760;font-stretch:106%;
  font-size:clamp(1.35rem,2.4vw,2.2rem);line-height:1.05;letter-spacing:-.022em;color:var(--ivory)}
.rsec__m{display:flex;align-items:baseline;gap:.45rem;color:var(--muted)}
.rsec__m span{color:var(--ember);font-variant-numeric:tabular-nums}
.rsec__m i{font-style:normal;margin-right:.55rem}

/* the reference stacks its folders 2rem apart and lets the opened one rise
   over its neighbour — so the hovered folder has to win the paint order, or a
   later row's cards climb on top of the one you are actually pointing at */
.rfolders{display:grid;gap:3.2rem;padding-top:2.6rem}

/* ---------- the folder --------------------------------------------------- */
.rfolder{position:relative;z-index:1;display:flex;justify-content:center;align-items:flex-end;
  width:100%;height:10rem;padding:0;border:0;background:none;cursor:pointer;
  perspective:1000px;perspective-origin:50% 50%}
.rfolder:hover,.rfolder:focus-visible,.rfolder.is-open{z-index:5}
.rfolder:focus-visible{outline:2px solid var(--ember);outline-offset:10px;border-radius:1rem}

.rcard{position:absolute;bottom:0;left:50%;translate:-50% 0;
  transform-origin:50% 100%;
  display:flex;align-items:center;justify-content:space-between;
  width:100%;height:10rem;padding:1.4rem 1.7rem;overflow:hidden;
  border-radius:1rem;background:#241710;
  border:1px solid rgba(244,238,228,.1);
  transition:height .5s var(--out-q),width .5s var(--out-q),
             transform .5s var(--out-q),box-shadow .5s var(--out-q)}
.rcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

/* the cover, and the three photo sheets behind it */
.rcard--1{z-index:10;flex-direction:column;align-items:flex-start;justify-content:center;
  gap:.35rem;background:linear-gradient(150deg,#2E1D14,#191411);
  box-shadow:0 18px 40px rgba(0,0,0,.4)}
.rcard--2{z-index:9}
.rcard--3{z-index:8}
.rcard--4{z-index:7}
.rcard--5{z-index:6;align-items:flex-start;justify-content:center;
  background:linear-gradient(160deg,var(--ember),#A8400F);border-color:transparent}

.rcard__yr{font-family:var(--f-display);font-weight:800;font-stretch:112%;
  font-size:clamp(1.5rem,2.6vw,2.4rem);line-height:1;letter-spacing:-.03em;color:var(--ivory)}
.rcard__ev{font-family:var(--f-mono);font-size:var(--t-label);letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted)}
.rcard__n{position:absolute;right:1.7rem;top:1.4rem;display:flex;align-items:baseline;gap:.4rem;
  font-family:var(--f-mono);font-size:var(--t-label);letter-spacing:.1em;color:var(--muted)}
.rcard__n b{color:var(--ember);font-weight:400}
.rcard__n i{font-style:normal}
.rcard__open{width:100%;text-align:center;padding-top:.35rem;
  font-family:var(--f-mono);font-size:var(--t-label);letter-spacing:.16em;
  text-transform:uppercase;color:#fff}
/* the sheets carry a dark foot so the cover above them still reads */
.rcard--2::after,.rcard--3::after,.rcard--4::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(11,8,6,0) 40%,rgba(11,8,6,.55))}

/* ---------- open --------------------------------------------------------- */
.rfolder:hover .rcard,.rfolder:focus-visible .rcard,.rfolder.is-open .rcard{transition-timing-function:var(--sw-to)}

.rfolder:hover .rcard--1,.rfolder:focus-visible .rcard--1,.rfolder.is-open .rcard--1{
  height:7rem;width:100%;transform:rotateX(-15deg);transition-delay:0ms}
.rfolder:hover .rcard--2,.rfolder:focus-visible .rcard--2,.rfolder.is-open .rcard--2{
  height:8rem;width:99%;transform:rotateX(-15deg);transition-delay:100ms}
.rfolder:hover .rcard--3,.rfolder:focus-visible .rcard--3,.rfolder.is-open .rcard--3{
  height:9rem;width:98%;transform:rotateX(-15deg);transition-delay:200ms}
.rfolder:hover .rcard--5,.rfolder:focus-visible .rcard--5,.rfolder.is-open .rcard--5{
  transform:translateY(-70%) rotateX(5deg);transition-delay:200ms;
  transition-timing-function:var(--sw-to)}
.rfolder:hover .rcard--4,.rfolder:focus-visible .rcard--4,.rfolder.is-open .rcard--4{
  height:10rem;width:100%;transform:rotateX(0deg);transition-delay:300ms}

/* ---------- close (back to front, and .is-5 on its own curve) ------------ */
.rcard--4{transition-delay:0ms}
.rcard--3{transition-delay:100ms}
.rcard--5{transition-delay:100ms;transition-timing-function:var(--sw-from)}
.rcard--2{transition-delay:200ms}
.rcard--1{transition-delay:300ms}

/* ---------- lightbox ----------------------------------------------------- */
/* ══ THE VIEWER ═══════════════════════════════════════════════════════════
   A full-bleed viewer rather than a card in the middle of the page: the
   photographs are the content here, so they get the whole window and the
   controls get out of their way. Namespaced rlb*.                        */
.rlb{position:fixed;inset:0;z-index:190}
.rlb[hidden]{display:none}
.rlb__scrim{position:absolute;inset:0;
  background:radial-gradient(120% 100% at 50% 0%,rgba(36,23,16,.94),rgba(6,4,3,.97) 70%);
  backdrop-filter:blur(22px) saturate(.9);-webkit-backdrop-filter:blur(22px) saturate(.9);
  opacity:0;transition:opacity .5s var(--e-out-cubic)}
.rlb.is-on .rlb__scrim{opacity:1}

.rlb__inner{position:absolute;inset:0;display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;
  padding:clamp(10px,1.6vw,22px);gap:clamp(8px,1.2vw,16px);
  opacity:0;transform:scale(.985) translate3d(0,10px,0);
  transition:opacity .5s var(--e-out-cubic),transform .8s var(--e-out-expo)}
.rlb.is-on .rlb__inner{opacity:1;transform:none}
.rlb__inner:focus{outline:none}
.rlb__inner:focus-visible{outline:2px solid var(--ember);outline-offset:-6px}

/* ---------- the bar ------------------------------------------------------ */
.rlb__bar{display:flex;align-items:center;gap:clamp(10px,2vw,24px);
  padding:clamp(6px,.8vw,10px) clamp(8px,1vw,14px)}
.rlb__id{flex:1;min-width:0;display:flex;align-items:baseline;gap:clamp(10px,1.4vw,18px)}
.rlb__t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-family:var(--f-display);font-weight:680;font-stretch:104%;
  font-size:clamp(.95rem,1.5vw,1.3rem);color:var(--ivory)}
.rlb__n{flex:none;display:flex;align-items:baseline;gap:.3em;
  font-family:var(--f-mono);font-size:var(--t-label);letter-spacing:.1em;
  font-variant-numeric:tabular-nums}
.rlb__n b{color:var(--ember);font-weight:400}
.rlb__n i{font-style:normal;color:var(--muted-2)}
.rlb__n span{color:var(--muted)}

.rlb__tools{flex:none;display:flex;align-items:center;gap:6px}
.rlbt{display:grid;place-items:center;width:36px;height:36px;border-radius:11px;cursor:pointer;
  border:1px solid rgba(244,238,228,.14);background:rgba(244,238,228,.05);color:var(--bone);
  transition:color .3s,background-color .3s,border-color .3s,transform .5s var(--e-out-expo)}
.rlbt svg{width:15px;height:15px;fill:currentColor}
.rlbt:hover{color:var(--ivory);background:rgba(244,238,228,.14);transform:translateY(-2px)}
.rlbt:focus-visible{outline:2px solid var(--ember);outline-offset:3px}
.rlbt[aria-pressed="true"]{background:var(--ember);border-color:var(--ember);color:#fff}
.rlbt--x:hover{background:var(--ember);border-color:var(--ember);color:#fff;transform:rotate(90deg)}
.rlbt__b{display:none}
.rlb.is-playing .rlbt__a{display:none}
.rlb.is-playing .rlbt__b{display:block}

.rlb__zoom{display:flex;align-items:center;gap:2px;padding:0 2px;border-radius:12px;
  border:1px solid rgba(244,238,228,.14);background:rgba(244,238,228,.03)}
.rlb__zoom .rlbt{border:0;background:none;width:30px;height:32px;border-radius:9px}
.rlb__zoom .rlbt:hover{transform:none;background:rgba(244,238,228,.1)}
.rlb__zv{min-width:52px;cursor:pointer;background:none;border:0;color:var(--muted);
  font-family:var(--f-mono);font-size:.62rem;letter-spacing:.08em;
  font-variant-numeric:tabular-nums;transition:color .3s}
.rlb__zv:hover{color:var(--ivory)}
.rlb__zv:focus-visible{outline:2px solid var(--ember);outline-offset:3px}

/* ---------- the stage ---------------------------------------------------- */
.rlb__stage{position:relative;min-height:0;display:grid;place-items:center;
  overflow:hidden;border-radius:clamp(12px,1.4vw,20px);touch-action:none}
.rlb.is-grid .rlb__stage{display:none}
.rlb__frame{position:relative;display:grid;place-items:center;
  max-width:100%;max-height:100%;will-change:transform}
.rlb__img{max-width:100%;max-height:100%;display:block;grid-area:1/1;
  border-radius:clamp(8px,1vw,14px);
  box-shadow:0 40px 120px rgba(0,0,0,.6);
  -webkit-user-select:none;user-select:none;
  opacity:0;transform:scale(.985);
  transition:opacity .45s var(--e-out-cubic),transform .8s var(--e-out-expo)}
.rlb__img.is-in{opacity:1;transform:none}
.rlb__img--ghost{opacity:0;pointer-events:none;z-index:1}
.rlb__img:not(.rlb__img--ghost){z-index:2}

.rlb__spin{position:absolute;z-index:3;width:34px;height:34px;border-radius:50%;
  border:2px solid rgba(244,238,228,.16);border-top-color:var(--ember);
  animation:rlbSpin .9s linear infinite;pointer-events:none}
.rlb__spin[hidden]{display:none}
@keyframes rlbSpin{to{transform:rotate(360deg)}}
.rlb__err{position:absolute;z-index:3;padding:.8rem 1.1rem;border-radius:12px;
  background:rgba(11,8,6,.9);border:1px solid rgba(226,85,30,.4);color:var(--bone);
  font-size:.86rem}
.rlb__err[hidden]{display:none}

.rlb__nav{position:absolute;top:50%;translate:0 -50%;z-index:4;
  display:grid;place-items:center;width:clamp(40px,3.4vw,52px);aspect-ratio:1;
  border-radius:50%;cursor:pointer;
  border:1px solid rgba(244,238,228,.16);background:rgba(11,8,6,.62);color:var(--bone);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transition:color .3s,background-color .35s,border-color .35s,transform .55s var(--e-out-expo),opacity .3s}
.rlb__nav svg{width:16px;height:16px}
.rlb__nav--prev{left:clamp(8px,1.4vw,20px)}
.rlb__nav--next{right:clamp(8px,1.4vw,20px)}
.rlb__nav:hover{background:var(--ember);border-color:var(--ember);color:#fff}
.rlb__nav--prev:hover{transform:translateY(-50%) translateX(-3px)}
.rlb__nav--next:hover{transform:translateY(-50%) translateX(3px)}
.rlb__nav:focus-visible{outline:2px solid var(--ember);outline-offset:3px}
.rlb.is-zoomed .rlb__nav{opacity:0;pointer-events:none}

/* ---------- the grid ----------------------------------------------------- */
.rlb__gridview{min-height:0;overflow-y:auto;overscroll-behavior:contain;
  padding:clamp(6px,1vw,14px) 2px}
.rlb__gridview[hidden]{display:none}
.rlb__gridh{margin-bottom:.9rem;color:var(--muted)}
.rlb__gridcells{display:grid;gap:clamp(8px,1vw,14px);
  grid-template-columns:repeat(auto-fill,minmax(clamp(120px,14vw,200px),1fr))}
.rlb__gridcells button{position:relative;aspect-ratio:4/3;overflow:hidden;cursor:pointer;
  border-radius:12px;border:1px solid rgba(244,238,228,.12);background:none;padding:0;
  transition:border-color .35s,transform .55s var(--e-out-expo),box-shadow .5s}
.rlb__gridcells img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .8s var(--e-out-expo),filter .4s;filter:saturate(.9)}
.rlb__gridcells button:hover{border-color:rgba(226,85,30,.5);transform:translateY(-3px);
  box-shadow:0 18px 40px rgba(0,0,0,.45)}
.rlb__gridcells button:hover img{transform:scale(1.06);filter:none}
.rlb__gridcells button.is-on{border-color:var(--ember)}
.rlb__gridcells button.is-on::after{content:'';position:absolute;inset:0;
  box-shadow:inset 0 0 0 2px var(--ember);border-radius:inherit;pointer-events:none}
.rlb__gridcells button:focus-visible{outline:2px solid var(--ember);outline-offset:3px}

/* ---------- the foot ----------------------------------------------------- */
.rlb__foot{display:grid;gap:8px}
.rlb.is-grid .rlb__foot .rlb__strip,.rlb.is-grid .rlb__hint{display:none}
.rlb__prog{height:2px;border-radius:2px;background:rgba(244,238,228,.1);overflow:hidden}
.rlb__prog span{display:block;height:100%;background:var(--ember);
  transform:scaleX(0);transform-origin:0 50%}

.rlb__strip{display:flex;gap:8px;overflow-x:auto;padding:2px;scrollbar-width:none}
.rlb__strip::-webkit-scrollbar{display:none}
.rlb__strip button{position:relative;flex:none;
  width:clamp(64px,6vw,92px);aspect-ratio:4/3;border-radius:10px;overflow:hidden;
  cursor:pointer;padding:0;border:1px solid transparent;opacity:.5;
  transition:opacity .35s,border-color .35s,transform .5s var(--e-out-expo)}
.rlb__strip button img{width:100%;height:100%;object-fit:cover;display:block}
.rlb__strip button:hover{opacity:.9;transform:translateY(-2px)}
.rlb__strip button.is-on{opacity:1;border-color:var(--ember)}
.rlb__strip button:focus-visible{outline:2px solid var(--ember);outline-offset:2px}

.rlb__hint{text-align:center;font-family:var(--f-mono);font-size:.6rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2)}

body.has-rlb{overflow:hidden}

/* ---------- narrow ------------------------------------------------------- */
@media (max-width:760px){
  /* the folder opens as it passes the middle of a touch screen, so it needs
     standing room that a hover-only layout never did */
  .rfolders{gap:5.2rem}
  .rfolder{height:8rem}
  .rcard{height:8rem;padding:1.1rem 1.2rem}
  .rfolder:hover .rcard--1,.rfolder.is-open .rcard--1{height:5.6rem}
  .rfolder:hover .rcard--2,.rfolder.is-open .rcard--2{height:6.4rem}
  .rfolder:hover .rcard--3,.rfolder.is-open .rcard--3{height:7.2rem}
  .rfolder:hover .rcard--4,.rfolder.is-open .rcard--4{height:8rem}
  .rcard__n{right:1.2rem;top:1.1rem}
  .rlb__bar{gap:8px}
  .rlb__id{flex-direction:column;align-items:flex-start;gap:.15em}
  .rlbt--wide{display:none}
  .rlb__zoom{display:none}
  .rlb__strip button{width:56px}
}
@media (prefers-reduced-motion:reduce){
  /* no fan-out, but the folder still says it can be opened */
  .rcard{transition:none!important;transform:none!important}
  .rfolder:hover .rcard--1,.rfolder:focus-visible .rcard--1,.rfolder.is-open .rcard--1{height:10rem}
  .rfolder:hover .rcard--1,.rfolder.is-open .rcard--1{border-color:rgba(226,85,30,.5)}
  .rlb__inner,.rlb__scrim,.rlb__img,.rlb__nav,.rlbt{transition:none}
  .rlb__spin{animation:none}
}