/* Creators Conclave — rich media kit (photo and film components shared by every page).
   Loads after styles.css and pages.css; behaviour is in js/rich.js.

   .rx-hero      page hero over a film or photo            .rx-mosaic   editorial photo grid (opens a lightbox)
   .rx-band      full-width film or photo with a statement  .rx-strip    moving film strip of photos
   .rx-duo       two layered photos beside text             .rx-shots    photo cards with a caption over the image
   .rx-frame     one photo in a gold hairline frame         .rx-kb       slow camera move on any photo
   Add data-rx-video="file.mp4" to a <video> to load and play it only while it is on screen.
   Add data-rx-parallax="0.12" to drift an element against the scroll. */

/* ── Slow camera move on a photo ── */
@keyframes rx-kb { from { transform: scale(1.04) translate3d(0, 0, 0); } to { transform: scale(1.16) translate3d(-1.5%, -1.5%, 0); } }
@keyframes rx-kb-alt { from { transform: scale(1.16) translate3d(1.5%, 0, 0); } to { transform: scale(1.04) translate3d(0, -1%, 0); } }
.rx-kb { animation: rx-kb 22s ease-in-out infinite alternate; will-change: transform; }
.rx-kb--alt { animation-name: rx-kb-alt; }

/* ── Hero over film or photo ── */
.rx-hero { position: relative; isolation: isolate; overflow: hidden; min-height: min(86vh, 860px); padding: 190px 16px 96px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; text-align: center; }
.rx-hero--left { align-items: flex-start; text-align: left; }
.rx-hero--left .rx-hero__body { margin: 0 auto; width: 100%; max-width: 1208px; align-items: flex-start; }
.rx-hero__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; background: #050505; }
.rx-hero__media img, .rx-hero__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rx-hero__media video { opacity: 0; transition: opacity 1.2s ease; }
.rx-hero__media video.is-playing { opacity: 1; }
.rx-hero__media--grey img, .rx-hero__media--grey video { filter: grayscale(1) contrast(1.05); }
.rx-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background:
  radial-gradient(120% 80% at 50% 108%, rgba(var(--glow), .28), transparent 60%),
  linear-gradient(180deg, rgba(0, 0, 0, .78) 0%, rgba(0, 0, 0, .32) 34%, rgba(0, 0, 0, .58) 66%, #000 100%); }
.rx-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(var(--glow), .7) 20%, rgba(var(--glow), .7) 80%, transparent); }
.rx-hero > .dust { position: absolute; inset: 0; z-index: 0; }
.rx-hero__body { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; }
.rx-hero__kicker { font-family: var(--f-mono); font-size: 14px; letter-spacing: .34em; text-transform: uppercase; color: #8fd6dc; margin-bottom: 20px; }
.rx-hero__title { font-family: var(--f-display); font-weight: 500; font-size: clamp(38px, 6.6vw, 98px); line-height: 1.02; letter-spacing: -.01em; text-transform: uppercase; max-width: 16ch; text-wrap: balance; text-shadow: 0 6px 40px rgba(0, 0, 0, .7); }
.rx-hero__title em { font-style: normal; background: linear-gradient(180deg, var(--a1), var(--a2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rx-hero__lead { margin-top: 24px; max-width: 60ch; font-size: clamp(17px, 1.5vw, 22px); line-height: 1.5; color: #e6dfd1; text-wrap: pretty; }
.rx-hero__actions { margin-top: 36px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 18px 28px; }
.rx-hero--left .rx-hero__actions { justify-content: flex-start; }

/* ── Full-width film or photo band with a statement over it ── */
.rx-band { position: relative; isolation: isolate; overflow: hidden; min-height: clamp(420px, 70vh, 760px); display: flex; align-items: center; justify-content: center; padding: clamp(72px, 10vw, 150px) 16px; text-align: center; }
.rx-band__media { position: absolute; inset: -8% 0; z-index: -2; }
.rx-band__media img, .rx-band__media video { width: 100%; height: 100%; object-fit: cover; }
.rx-band::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .46) 22%, rgba(0, 0, 0, .46) 78%, #000 100%); }
.rx-band__kicker { font-family: var(--f-mono); font-size: 13.5px; letter-spacing: .34em; text-transform: uppercase; color: var(--a1); margin-bottom: 22px; }
.rx-band__line { font-family: var(--f-display); font-weight: 500; text-transform: uppercase; font-size: clamp(30px, 5.4vw, 84px); line-height: 1.05; max-width: 17ch; margin: 0 auto; text-wrap: balance; text-shadow: 0 8px 50px rgba(0, 0, 0, .8); }
.rx-band__line em { font-style: normal; background: linear-gradient(180deg, var(--a1), var(--a2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rx-band__sub { margin: 26px auto 0; max-width: 56ch; font-size: clamp(16px, 1.4vw, 21px); line-height: 1.55; color: #e6dfd1; }

/* ── Editorial photo grid ── */
.rx-mosaic { display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: 44vw; grid-auto-flow: dense; gap: 10px; }
.rx-mosaic__item { position: relative; overflow: hidden; border-radius: 18px; background: #101010; cursor: zoom-in; border: 0; padding: 0; display: block; width: 100%; height: 100%; color: inherit; text-align: left; }
.rx-mosaic__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s cubic-bezier(.22, 1, .36, 1), filter .6s; }
.rx-mosaic__item::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, transparent 52%, rgba(0, 0, 0, .82)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); transition: box-shadow .4s; pointer-events: none; }
.rx-mosaic__item:hover img, .rx-mosaic__item:focus-visible img { transform: scale(1.07); }
.rx-mosaic__item:hover::after, .rx-mosaic__item:focus-visible::after { box-shadow: inset 0 0 0 1px rgba(var(--glow), .9), inset 0 0 60px rgba(var(--glow), .18); }
.rx-mosaic__cap { position: absolute; left: 16px; right: 16px; bottom: 14px; z-index: 1; display: flex; flex-direction: column; gap: 4px; }
.rx-mosaic__cap b { font-family: var(--f-display); font-weight: 500; font-size: clamp(13px, 1.25vw, 18px); text-transform: uppercase; letter-spacing: .04em; }
.rx-mosaic__cap span { font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--a1); }
.rx-mosaic__item--wide { grid-column: span 2; }
@media (min-width: 768px) {
  .rx-mosaic { grid-template-columns: repeat(4, 1fr); grid-auto-rows: clamp(170px, 19vw, 280px); gap: 14px; }
  .rx-mosaic__item--tall { grid-row: span 2; }
  .rx-mosaic__item--big { grid-column: span 2; grid-row: span 2; }
}

/* ── Moving film strip ── */
.rx-strip { position: relative; overflow: hidden; padding: 6px 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.rx-strip__row { display: flex; gap: 14px; width: max-content; animation: rx-slide var(--rx-speed, 70s) linear infinite; }
.rx-strip__row + .rx-strip__row { margin-top: 14px; animation-direction: reverse; }
.rx-strip:hover .rx-strip__row { animation-play-state: paused; }
.rx-strip__row img { flex: none; width: clamp(220px, 26vw, 400px); height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 16px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.rx-strip--tall .rx-strip__row img { width: clamp(170px, 17vw, 260px); aspect-ratio: 4 / 5; }
@keyframes rx-slide { to { transform: translate3d(-50%, 0, 0); } }

/* ── Two layered photos beside text ── */
.rx-duo { display: grid; gap: clamp(40px, 6vw, 88px); align-items: center; }
.rx-duo__art { position: relative; padding: 0 9% 13% 0; }
.rx-duo__art > :first-child { position: relative; overflow: hidden; border-radius: 26px; aspect-ratio: 4 / 5; box-shadow: 0 40px 90px -40px #000; }
.rx-duo__art > :nth-child(2) { position: absolute; right: 0; bottom: 0; width: 52%; overflow: hidden; border-radius: 20px; aspect-ratio: 1; border: 1px solid rgba(var(--glow), .8); box-shadow: 0 30px 70px -20px #000, 0 0 60px -10px rgba(var(--glow), .45); }
.rx-duo__art img, .rx-duo__art video { width: 100%; height: 100%; object-fit: cover; }
.rx-duo__art::before { content: ""; position: absolute; left: -16px; top: -16px; width: 42%; height: 38%; border-left: 1px solid rgba(var(--glow), .8); border-top: 1px solid rgba(var(--glow), .8); border-radius: 26px 0 0 0; pointer-events: none; }
@media (min-width: 900px) {
  .rx-duo { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
  .rx-duo--flip .rx-duo__art { order: 2; }
}

/* ── Photo cards with the caption over the image ── */
.rx-shots { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
.rx-shot { position: relative; isolation: isolate; overflow: hidden; border-radius: 22px; min-height: clamp(300px, 34vw, 440px); display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; padding: 24px; background: #101010; border: 1px solid rgba(255, 255, 255, .08); transition: border-color .4s, box-shadow .4s; }
.rx-shot > img, .rx-shot > video { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s cubic-bezier(.22, 1, .36, 1); }
.rx-shot::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0, 0, 0, .05) 30%, rgba(0, 0, 0, .9) 88%); }
.rx-shot:hover { border-color: rgba(var(--glow), .8); box-shadow: 0 30px 70px -30px rgba(var(--glow), .7); }
.rx-shot:hover > img { transform: scale(1.07); }
.rx-shot__tag { font-family: var(--f-mono); font-size: 12px; letter-spacing: .26em; text-transform: uppercase; color: var(--a1); }
.rx-shot__title { font-family: var(--f-display); font-weight: 500; font-size: clamp(19px, 1.8vw, 25px); line-height: 1.15; text-transform: uppercase; }
.rx-shot__text { font-size: 15.5px; line-height: 1.55; color: #ddd5c6; }

/* ── One photo in a gold hairline frame ── */
.rx-frame { position: relative; border-radius: 26px; padding: 10px; border: 1px solid rgba(var(--glow), .55); background: linear-gradient(180deg, rgba(var(--glow), .12), transparent 40%); }
.rx-frame > * { display: block; width: 100%; border-radius: 18px; overflow: hidden; }
.rx-frame img, .rx-frame video { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ── Lightbox for the photo grid ── */
.rx-light { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 4vmin; background: rgba(0, 0, 0, .93); opacity: 0; visibility: hidden; transition: opacity .35s, visibility .35s; cursor: zoom-out; }
.rx-light.is-open { opacity: 1; visibility: visible; }
.rx-light img { max-width: 100%; max-height: 86vh; border-radius: 14px; box-shadow: 0 0 0 1px rgba(var(--glow), .6), 0 40px 120px -20px #000; transform: scale(.96); transition: transform .5s cubic-bezier(.22, 1, .36, 1); }
.rx-light.is-open img { transform: none; }
.rx-light p { margin-top: 16px; text-align: center; font-family: var(--f-mono); font-size: 12.5px; letter-spacing: .26em; text-transform: uppercase; color: var(--a1); }

@media (prefers-reduced-motion: reduce) {
  .rx-kb, .rx-strip__row { animation: none; }
  .rx-strip { overflow-x: auto; }
}