/* rru-motion.css - three finishing touches from the Codex motion study (2026-09-12), adapted to
 * the served homepage. Loaded by the applier's EVENT-DATA region; every rule is scoped to a class
 * that only js/rru-motion.js adds, so without the script nothing here matches.
 *
 * 1. Foil posters: a light reflection follows a fine pointer across the upcoming flyers and the
 *    NEXT UP flyer, with at most 1.5deg of tilt. Dates, names and ticket buttons do not move.
 *    Touch devices get no tilt and no foil - the poster stays steady and a tap is still a tap.
 * 2. Photo stacks: three real photos from a gallery fan out over its RELIVE card on hover or
 *    keyboard focus; on touch they open once when the card is in view. The whole card stays the
 *    link to the gallery.
 * 3. Light sweep: one 1.8s sweep under the Upcoming header when it arrives, then a static line.
 *
 * prefers-reduced-motion: no tilt, no foil movement, no sweep; the stacks open without motion. */

/* ---------- 1. foil posters ---------- */
.rru-foil-host {
  transform: perspective(900px) rotateX(var(--rru-rx, 0deg)) rotateY(var(--rru-ry, 0deg));
  transition: transform .18s ease-out;
}
.rru-foil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit;
  opacity: 0; transition: opacity .3s;
  background:
    radial-gradient(ellipse at var(--rru-mx, 50%) var(--rru-my, 50%), rgba(255,255,255,.21), transparent 53%),
    linear-gradient(115deg, transparent 15%, rgba(79,255,255,.09) 35%, rgba(255,249,171,.17) 48%, rgba(255,105,214,.17) 58%, transparent 75%);
  background-size: 100% 100%, 240% 100%;
  background-position: 0 0, var(--rru-mx, 50%) 0;
  mix-blend-mode: screen;
}
.rru-foil-host.rru-foil-on .rru-foil { opacity: .72; }
/* THE FLYER MUST STAY A LINK. The card is one link: .event-name a::after is stretched over the
   whole card. main.js's magnetic headings put a transform on `.event-card h3` while the pointer is
   over the card - even an identity matrix - and a transformed element becomes the containing block
   of its absolute descendants, so the stretched link shrank to the title and a click on a hovered
   flyer landed on the image and did nothing. Measured on the live site before this release
   (2026-09-12): hover a flyer, wait, click - no navigation. The foil invites exactly that hover. */
.rru-foil-card .event-name { transform: none !important; }

/* ---------- 2. gallery photo stacks ---------- */
.rru-stack {
  position: absolute; left: 0; right: 0; top: 0; height: 300px; z-index: 1;
  pointer-events: none;
}
.rru-stack-photo {
  position: absolute; left: 28%; top: 26%; width: 44%; aspect-ratio: 3 / 2;
  border: 5px solid #e3d9d1; background: #e3d9d1; border-radius: 2px;
  box-shadow: 0 12px 30px rgba(0,0,0,.6);
  opacity: 0; transform: translateY(14px) scale(.92);
  transition: transform .65s cubic-bezier(.2,.8,.2,1), opacity .35s ease, filter .65s;
}
/* style.css sizes every image in a RELIVE card (#relive .relive-card img: absolute, 300px tall,
   scaled on hover); the stack's photos must not inherit that. */
#relive .relive-card .rru-stack-photo img.rru-stack-img,
#relive .relive-card:hover .rru-stack-photo img.rru-stack-img {
  position: static; display: block; width: 100%; height: 100%; object-fit: cover;
  transform: none; filter: none; transition: none;
}
.rru-stack-photo:nth-child(1) { transition-delay: .06s; }
.rru-stack-photo:nth-child(2) { transition-delay: .03s; }
.rru-stack-open .rru-stack-photo { opacity: 1; }
.rru-stack-open .rru-stack-photo:nth-child(1) { transform: translate(38%, -8%) rotate(9deg); filter: brightness(.9); }
.rru-stack-open .rru-stack-photo:nth-child(2) { transform: translate(-38%, -4%) rotate(-8deg); filter: brightness(.95); }
.rru-stack-open .rru-stack-photo:nth-child(3) { transform: translateY(10%) rotate(-2deg); }
#relive .relive-card.rru-stack-open img:not(.rru-stack-img) {
  filter: brightness(.38) saturate(.85);
}
@media (max-width: 699px) {
  .rru-stack { height: 228px; }
  .rru-stack-photo { left: 25%; width: 50%; top: 14%; border-width: 4px; }
}

/* ---------- 3. light sweep ---------- */
.rru-sweep-host { position: relative; }
.rru-sweep {
  position: absolute; left: 0; right: 0; top: -22px; height: 2px; overflow: hidden;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(117,41,94,.55), rgba(35,116,122,.55), transparent);
}
.rru-sweep > span {
  position: absolute; inset: 0; transform: translateX(-110%);
  background: linear-gradient(90deg, transparent 10%, #ff2496 42%, #f0fce6 50%, #00e5f2 58%, transparent 90%);
}
.rru-sweep.rru-sweep-play > span { animation: rru-sweep 1.8s ease-in-out both; }
@keyframes rru-sweep { to { transform: translateX(110%); } }

@media (prefers-reduced-motion: reduce) {
  .rru-foil-host { transform: none !important; transition: none; }
  .rru-foil { display: none; }
  .rru-stack-photo, .rru-stack-photo:nth-child(n) { transition: none; }
  .rru-sweep.rru-sweep-play > span { animation: none; }
}