/* COD text effects and photo lightbox styles. Pairs with fx-text.js and fx-lightbox.js.
   Text effects: ported from Motion Primitives by ibelick (MIT, Copyright (c) 2024 ibelick).
   Lightbox: ported from the Subframe Motion "photo-lightbox" example (MIT, Copyright (c) 2026 Subframe).
   Licence text is in the headers of fx-text.js and fx-lightbox.js. */

/* ---------- shared ---------- */
.fxt-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.fxt-vis{display:inline}

/* ---------- words: each word rises out of its own mask ---------- */
.fxt-w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.12em;margin-bottom:-.12em}
.fxt-wi{display:inline-block;white-space:pre;opacity:0;transform:translateY(100%)}
.fxt-words.fxt-play .fxt-wi{animation:fxt-rise 520ms cubic-bezier(.22,1,.36,1) both}
@keyframes fxt-rise{from{opacity:0;transform:translateY(100%)}to{opacity:1;transform:none}}

/* ---------- roll: out face tips away, in face hinges up from its bottom edge ---------- */
.fxt-rw{display:inline-block;white-space:nowrap}
.fxt-rc{position:relative;display:inline-block;perspective:10000px;transform-style:preserve-3d}
.fxt-ro,.fxt-ri{position:absolute;left:0;top:0;display:inline-block;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.fxt-ro{transform-origin:50% 25%}
.fxt-ri{transform-origin:50% 100%;transform:rotateX(90deg)}
.fxt-rg{visibility:hidden}
.fxt-roll.fxt-play .fxt-ro{animation:fxt-roll-out 320ms cubic-bezier(.25,1,.5,1) both}
.fxt-roll.fxt-play .fxt-ri{animation:fxt-roll-in 360ms cubic-bezier(.25,1,.5,1) both}
@keyframes fxt-roll-out{from{transform:rotateX(0)}to{transform:rotateX(90deg)}}
@keyframes fxt-roll-in{from{transform:rotateX(90deg)}to{transform:rotateX(0)}}
/* before play starts, show the letters as plain text so nothing flashes empty */
.fxt-roll:not(.fxt-play) .fxt-ro{transform:none}

/* ---------- lightbox ---------- */
.fxl-trigger{cursor:zoom-in}
.fxl-trigger:focus-visible{outline:2px solid var(--ember,#e2432a);outline-offset:-2px}
html.fxl-lock{overflow:hidden}

.fxl{position:fixed;inset:0;z-index:400;display:flex;flex-direction:column;background:var(--void,#050607);color:var(--ink,#eeede8);font-family:var(--sans,'IBM Plex Sans',sans-serif);padding:10px clamp(12px,3vw,28px) 12px}
.fxl[hidden]{display:none}
.fxl.fxl-in{animation:fxl-in 180ms cubic-bezier(.2,.8,.2,1) both}
.fxl.fxl-out{animation:fxl-out 120ms ease-in both}
@keyframes fxl-in{from{opacity:0;transform:scale(.98)}to{opacity:1;transform:none}}
@keyframes fxl-out{from{opacity:1}to{opacity:0}}

.fxl-head{display:flex;justify-content:space-between;align-items:center;min-height:44px;flex-shrink:0}
.fxl-count{font-family:var(--mono,'IBM Plex Mono',monospace);font-size:11px;letter-spacing:.06em;color:var(--ink-dim,#aeb2b8)}
.fxl-title{font-family:var(--serif,'Cormorant Garamond',serif);font-weight:500;font-size:20px;letter-spacing:-.2px;color:var(--ink,#eeede8);margin-right:14px}
.fxl-meta{display:flex;align-items:baseline}

.fxl-view{flex:1;min-height:0;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;touch-action:pan-y;outline:none;border-top:1px solid var(--line,rgba(235,235,230,.1));border-bottom:1px solid var(--line,rgba(235,235,230,.1))}
.fxl-view:focus-visible{outline:2px solid var(--ember,#e2432a);outline-offset:-2px}
.fxl-view[data-zoom="true"]{touch-action:none;cursor:grab}
.fxl-view[data-zoom="true"]:active{cursor:grabbing}
.fxl-view img{width:100%;height:100%;object-fit:contain;user-select:none;-webkit-user-drag:none;transition:transform 240ms cubic-bezier(.2,.8,.2,1)}
.fxl-view[data-zoom="true"] img,.fxl-view[data-drag="true"] img{transition:none}

.fxl-foot{display:flex;align-items:center;gap:6px;flex-shrink:0;padding-top:10px}
.fxl-thumbs{display:flex;gap:4px;margin:0 auto;overflow-x:auto;max-width:100%;scrollbar-width:thin;scrollbar-color:var(--line-strong,rgba(235,235,230,.2)) transparent;padding:2px}
.fxl-thumbs button{flex:0 0 auto;width:56px;height:40px;padding:0;border:1px solid transparent;background:#000;opacity:.5;cursor:pointer;transition:opacity 150ms}
.fxl-thumbs button:hover{opacity:.85}
.fxl-thumbs button[aria-pressed="true"]{opacity:1;border-color:var(--ink,#eeede8)}
.fxl-thumbs img{width:100%;height:100%;object-fit:cover;display:block}

/* only genuinely circular controls get a radius */
.fxl-btn{flex:0 0 auto;width:44px;height:44px;border-radius:50%;border:1px solid var(--line-strong,rgba(235,235,230,.2));background:transparent;color:var(--ink,#eeede8);font:inherit;font-size:18px;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;touch-action:manipulation;transition:border-color 150ms,color 150ms}
.fxl-btn:hover{border-color:var(--ember,#e2432a);color:var(--ember,#e2432a)}
.fxl-btn:focus-visible,.fxl-thumbs button:focus-visible{outline:2px solid var(--ember,#e2432a);outline-offset:2px}
.fxl-btn[aria-pressed="true"]{border-color:var(--ember,#e2432a);color:var(--ember,#e2432a)}

@media (max-width:560px){.fxl-foot .fxl-prev,.fxl-foot .fxl-next{display:none}.fxl-thumbs button{width:48px;height:36px}}

/* ---------- reduced motion: still, final states, instant viewer ---------- */
@media (prefers-reduced-motion:reduce){
  .fxt-wi{opacity:1;transform:none;animation:none!important}
  .fxt-ro{display:none}
  .fxt-ri{transform:none;animation:none!important;position:static}
  .fxl.fxl-in,.fxl.fxl-out{animation:none}
  .fxl-view img{transition:none}
}