/* ============================================================================
   PRESETS + ROUND TRIP (rp- prefix) — "Bring your presets. Keep your catalog."
   Two cards on RECOGNIZABLE interfaces, laid out in PLAIN FLOW: every box gets
   its height from content, intrinsic image ratios, or an explicit clamp - no
   aspect-ratio boxes, no absolute-only interiors (an earlier build collapsed
   to an empty card on the owner's machine). Absolute positioning is only used
   for overlays inside sized boxes, and the traveling print is placed in px by
   JS from measured rects. Tokens mirror app.css; lb-shot / feat__txt idiom.
   The trip card's state attribute is data-RPBEAT, never data-beat: app.css
   hides every [data-beat] element by default (it is the lede's own reveal
   mechanism), which blanked this whole card on the homepage.
   ============================================================================ */

.rp { position: relative; z-index: 1; padding: clamp(100px, 15vh, 196px) 0 clamp(60px, 9vh, 120px); }
.rp__head { max-width: 780px; margin: 0 auto clamp(40px, 6vh, 72px); padding: 0 var(--gutter); text-align: center; }
.rp__head .section-title { margin: 14px 0 0; }
.rp__sub { margin-inline: auto; text-wrap: balance; }

/* the two cards stretch to one height; card 2 centres its scene in the extra
   room and pins the steps to the bottom, so the pair reads as one composition */
.rp__cards { max-width: 1180px; margin: 0 auto; padding: 0 var(--gutter);
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3.2vw, 44px); align-items: stretch; }
.rp__card { min-width: 0; display: flex; flex-direction: column; }
.rp__card .feat__txt { margin-top: auto; padding-top: 18px; }

.rp__shot { position: relative; border-radius: 16px; overflow: hidden; padding: 14px 14px 16px;
  display: flex; flex-direction: column; flex: 1 0 auto;
  background: radial-gradient(120% 100% at 50% 0%, #131317 0%, #0c0c0f 60%, #09090b 100%);
  border: 1px solid rgb(255 255 255 / 0.08); box-shadow: 0 28px 70px -34px rgb(0 0 0 / 0.85); }

/* the app nameplates: a plain flow row above each scene, anchored by muted
   app marks (monochrome "Lr" / "C1" badges as works-with references, never
   their brand colours; Chromogen wears its real icon) */
.rp__labels { display: flex; align-items: center; gap: 12px; margin: 2px 2px 10px; }
.rp__lbl { display: flex; align-items: center; gap: 6px; min-width: 0;
  font-size: 9px; letter-spacing: 0.09em; color: rgb(var(--ink-low)); }
.rp__lbl-tx { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp__lbl--lr { flex: 0 1 auto; width: 39%; }
.rp__lbl--c1 { flex: 0 1 auto; width: 30%; }
.rp__lbl--cg { flex: 1; color: rgb(var(--ink-muted)); }
.rp__mark2 { display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 17px; height: 17px; border-radius: 4.5px; background: rgb(255 255 255 / 0.07);
  border: 1px solid rgb(255 255 255 / 0.22); color: rgb(255 255 255 / 0.82);
  font-family: var(--sans); font-style: normal; font-size: 8.5px; font-weight: 600;
  letter-spacing: 0.02em; text-transform: none; }
.rp__mark2-img { width: 17px; height: 17px; border-radius: 4.5px; flex: none; }
@media (max-width: 640px) { .rp__applbl-tail { display: none; } }

/* ---- card 1: the Lightroom Develop left rail -> a Chromogen frame ---------- */
.rp__row { display: flex; align-items: flex-start; gap: 10px; }

.rp__lr { flex: none; width: 35%; display: flex; flex-direction: column; border-radius: 8px;
  background: #242428; border: 1px solid #38383d; overflow: hidden;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.04), 0 14px 34px -18px rgb(0 0 0 / 0.8); }
.rp__lr .rp__mark2 { width: 16px; height: 16px; font-size: 8px; }
.rp__lr-sec { display: flex; align-items: center; gap: 8px; margin: 0; padding: 10px 12px;
  border-top: 1px solid #313136; color: #cfcfd4; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.01em; }
.rp__lr-sec:first-child { border-top: 0; }
.rp__lr-plus { margin-left: auto; color: #85858c; font-weight: 400; font-size: 0.9rem; }
.rp__tri { width: 0; height: 0; flex: none; border-left: 4.5px solid transparent; border-right: 4.5px solid transparent;
  border-top: 5.5px solid #8b8b92; transform: rotate(-90deg); }
.rp__tri--open { transform: none; }
.rp__tri--sm { border-left-width: 3.5px; border-right-width: 3.5px; border-top-width: 4.5px; }
.rp__lr-body { padding: 0 0 8px; border-top: 1px solid #313136; background: #212125; }
.rp__lr-group { display: flex; align-items: center; gap: 7px; margin: 0; padding: 7px 12px 4px;
  color: #a6a6ad; font-size: 0.71rem; letter-spacing: 0.02em; }
.rp__lr-row { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6.5px 10px 6.5px 24px;
  text-align: left; color: #e3e3e7; font-size: 0.78rem; background: transparent; border: 0; cursor: pointer;
  transition: background 0.18s ease; }
.rp__lr-row:hover { background: #34343a; }
.rp__lr-row.is-on { background: #3e3e45; }
.rp__lr-nm { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* the file type on every row: the list itself shows both ecosystems */
.rp__lr-fmt { flex: none; font-family: var(--mono); font-size: 6px; letter-spacing: 0.06em;
  text-transform: uppercase; color: #7f7f87; transition: color 0.2s ease; }
.rp__lr-row.is-on .rp__lr-fmt { color: rgb(var(--accent)); }
/* the compact panel floats at its natural height beside the taller window */

.rp__flow { flex: none; align-self: center; color: rgb(var(--ink-low)); font-size: 15px; }

.rp__cg-win { flex: 1; min-width: 0; display: flex; flex-direction: column; border-radius: 10px; overflow: hidden;
  background: #0d0d0f; border: 1px solid rgb(255 255 255 / 0.1); box-shadow: 0 18px 44px -18px rgb(0 0 0 / 0.85); }
.rp__cg-bar { display: flex; align-items: center; gap: 8px; height: 32px; flex: none; padding: 0 10px;
  background: #0c0c0e; border-bottom: 1px solid rgb(255 255 255 / 0.07); }
.rp__cg-ic { width: 15px; height: 15px; border-radius: 4px; flex: none; }
.rp__cg-name { font-size: 8.5px; letter-spacing: 0.16em; color: rgb(var(--ink-strong)); }
.rp__cg-dots { margin-left: auto; display: inline-flex; gap: 5px; }
.rp__cg-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgb(255 255 255 / 0.14); }
/* the canvas height is the one explicit size in the card; everything hangs off it */
.rp__cg-canvas { position: relative; height: clamp(300px, 26vw, 430px); }
/* the Chromogen presets-panel mock: imported files land here as native looks */
.rp__cg-canvas--panel { background: #131317; }
.rp__cgp { display: flex; flex-direction: column; gap: 7px; padding: 12px 12px 44px; height: 100%; box-sizing: border-box; overflow: hidden; }
.rp__cgp-h { margin: 0 0 2px; padding: 0 2px; font-size: 0.58rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgb(var(--ink-low)); }
.rp__cgp-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px;
  border: 1px solid #2c2c34; border-radius: 10px; background: #1b1b20; color: #e7e7ec; font-size: 0.8rem; }
.rp__cgp-nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp__cgp-tag { flex: none; font-size: 0.55rem; letter-spacing: 0.1em; text-transform: uppercase; color: #7f7f87; }
.rp__cgp-tag--new { color: rgb(var(--accent)); }
.rp__cgp-row[data-look] { opacity: 0; transform: translateX(-10px); transition: opacity 0.35s ease, transform 0.35s ease; }
.rp__cgp-row.is-in { opacity: 1; transform: none; }
.rp__cgp-row.is-hot { border-color: rgb(var(--accent) / 0.55); }
.rp__ph { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; object-position: 44% 50%;
  opacity: 0; transition: opacity 0.5s ease; }
.rp__ph.is-on { opacity: 1; }
.rp__badge { position: absolute; left: 10px; bottom: 10px; z-index: 5; padding: 5px 9px; border-radius: 999px;
  font-size: 8px; letter-spacing: 0.13em; color: rgb(255 255 255 / 0.8); background: rgb(8 8 10 / 0.6);
  border: 1px solid rgb(255 255 255 / 0.14); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  pointer-events: none; max-width: calc(100% - 20px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* the preset in flight: a pill cloned from the clicked row (positioned by JS) */
.rp__flypill { position: absolute; z-index: 9; padding: 7px 12px; border-radius: 999px; pointer-events: none;
  background: rgb(38 38 42 / 0.98); border: 1px solid rgb(var(--accent) / 0.55); color: rgb(var(--ink-strong));
  font-size: 0.74rem; white-space: nowrap; box-shadow: 0 14px 30px -12px rgb(0 0 0 / 0.85);
  transition: transform 0.55s var(--ease), opacity 0.3s ease 0.4s; }

/* ---- card 2: the round trip ------------------------------------------------ */
.rp__stage2 { position: relative; display: flex; align-items: center; gap: 4%; margin-block: auto; }

/* the catalog cell: Capture One's orange selection frame; the ghost print
   inside gives the cell its height and stands in while the photo is away */
.rp__cell { position: relative; flex: none; width: 30%; padding: 3px; border-radius: 8px;
  border: 2px solid rgb(255 125 43 / 0.85); background: rgb(255 255 255 / 0.03);
  box-shadow: 0 0 0 1px rgb(0 0 0 / 0.5), 0 12px 30px -14px rgb(0 0 0 / 0.8); }
/* the ghost IS the photo in the cell until the print is measured and laid over
   it, so the card reads correctly even if the JS never runs; it dims only while
   the photo is away being developed */
.rp__ghost { display: block; width: 100%; border-radius: 5px; opacity: 1; filter: saturate(0.45) brightness(0.8);
  transition: opacity 0.4s ease 0.25s; }
#rpTrip[data-rpbeat="1"] .rp__ghost, #rpTrip[data-rpbeat="2"] .rp__ghost,
#rpTrip[data-rpbeat="3"] .rp__ghost, #rpTrip[data-rpbeat="4"] .rp__ghost { opacity: 0.24; }
.rp__saved { position: absolute; left: 50%; top: 10px; transform: translateX(-50%) translateY(-4px);
  z-index: 7; padding: 5px 9px; border-radius: 999px; white-space: nowrap;
  font-size: 7.5px; letter-spacing: 0.12em; color: rgb(10 10 12 / 0.92); background: rgb(235 236 240 / 0.94);
  box-shadow: 0 8px 20px -8px rgb(0 0 0 / 0.7); opacity: 0; transition: opacity 0.35s ease, transform 0.35s var(--ease); }
#rpTrip[data-rpbeat="5"] .rp__saved { opacity: 1; transform: translateX(-50%); }

/* the Chromogen window: the real app, captured; the img's own ratio sizes it */
.rp__mini { flex: 1; min-width: 0; }
.rp__mini-app { display: block; width: 100%; height: auto; border-radius: 9px;
  border: 1px solid rgb(255 255 255 / 0.12); box-shadow: 0 20px 50px -20px rgb(0 0 0 / 0.9);
  filter: brightness(0.92); transition: filter 0.5s ease; }
#rpTrip[data-rpbeat="2"] .rp__mini-app, #rpTrip[data-rpbeat="3"] .rp__mini-app { filter: brightness(1.04); }

/* the catalog's right-click menu (positioned under the cell by JS) */
.rp__menu { position: absolute; z-index: 8; width: min(52%, 230px); padding: 5px;
  background: rgb(24 24 28 / 0.97); border: 1px solid rgb(255 255 255 / 0.12); border-radius: 10px;
  box-shadow: 0 18px 44px -14px rgb(0 0 0 / 0.85); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  opacity: 0; transform: translateY(5px) scale(0.97); transform-origin: top left;
  transition: opacity 0.3s ease, transform 0.3s var(--ease); pointer-events: none; }
#rpTrip[data-rpbeat="0"] .rp__menu { opacity: 1; transform: none; }
.rp__menu-row { display: flex; align-items: center; padding: 7px 10px; border-radius: 6px;
  font-size: 0.74rem; color: rgb(var(--ink-low)); }
.rp__menu-row--hot { color: rgb(var(--ink-strong)); background: rgb(255 255 255 / 0.07); }
.rp__menu-row--hot b { font-weight: 600; }
.rp__menu-row--hot i { margin-left: auto; font-style: normal; color: rgb(var(--ink-muted)); }

/* the traveling print (left/top/width/height set in px by JS per beat) */
.rp__print { position: absolute; left: 0; top: 0; margin: 0; z-index: 6; border-radius: 5px; overflow: hidden;
  box-shadow: 0 14px 36px -14px rgb(0 0 0 / 0.85);
  transition: left 0.85s var(--ease), top 0.85s var(--ease), width 0.85s var(--ease), height 0.85s var(--ease),
    box-shadow 0.85s ease; }
.rp__print img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
.rp__print-b { opacity: 0; transition: opacity 0.7s ease; }
#rpTrip[data-rpbeat="2"] .rp__print-b, #rpTrip[data-rpbeat="3"] .rp__print-b,
#rpTrip[data-rpbeat="4"] .rp__print-b, #rpTrip[data-rpbeat="5"] .rp__print-b { opacity: 1; }
#rpTrip[data-rpbeat="1"] .rp__print, #rpTrip[data-rpbeat="4"] .rp__print { box-shadow: 0 26px 56px -18px rgb(0 0 0 / 0.9); }
.rp__srbtn { position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%) translateY(6px) scale(0.9);
  z-index: 4; padding: 5px 9px; border-radius: 999px; white-space: nowrap;
  font-size: 7px; letter-spacing: 0.11em; color: rgb(var(--primary-ink)); background: rgb(var(--primary));
  box-shadow: 0 8px 20px -8px rgb(0 0 0 / 0.8); opacity: 0; transition: opacity 0.3s ease, transform 0.3s var(--ease); }
.rp__srbtn.is-press { transform: translateX(-50%) scale(0.92) !important; }
#rpTrip[data-rpbeat="3"] .rp__srbtn { opacity: 1; transform: translateX(-50%); }

/* the four steps: a plain list under the scene, the live one lights up */
.rp__steps { margin: 16px 2px 0; margin-top: auto; padding: 16px 2px 0; list-style: none;
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px; }
.rp__steps li { display: flex; align-items: baseline; gap: 7px; font-family: var(--mono); font-size: 8.5px;
  letter-spacing: 0.1em; text-transform: uppercase; color: rgb(var(--ink-low)); transition: color 0.3s ease; }
.rp__steps li i { font-style: normal; font-size: 7.5px; color: rgb(var(--ink-low) / 0.7); transition: color 0.3s ease; }
.rp__steps li.is-lit { color: rgb(var(--ink-strong)); }
.rp__steps li.is-lit i { color: rgb(var(--accent)); }

.rp__srdesc { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---- layout: stack on small screens ---------------------------------------- */
@media (max-width: 880px) {
  .rp__cards { grid-template-columns: 1fr; gap: 40px; }
  .rp__cg-canvas { height: clamp(300px, 92vw, 420px); }
}
@media (max-width: 430px) {
  .rp__steps { grid-template-columns: 1fr; gap: 6px; }
  .rp__lr-row { font-size: 0.72rem; }
  .rp__lr { width: 44%; }
}

/* reduced motion: no travel transitions; the loop rests on its final frame */
@media (prefers-reduced-motion: reduce) {
  .rp__print, .rp__print-b, .rp__srbtn, .rp__saved, .rp__ph, .rp__menu, .rp__flypill, .rp__ghost, .rp__cgp-row { transition: none; }
}