/* --- Research page: immersive hero + scroll-revealed chapters, wallpaper
   background on every strip (see research.js for the reveal + scatter logic) --- */

.research {
  background: var(--bg);
}

.rs-section {
  position: relative;
  background-image: url("../assets/img/wallpaper.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.research__close {
  position: fixed;
  top: 24px;
  left: 24px;
  z-index: 20;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(250, 249, 246, 0.7);
  color: var(--ink);
  text-decoration: none;
  font-size: 16px;
  transition: background 0.2s ease;
}

.research__close:hover {
  background: rgba(250, 249, 246, 0.95);
}

/* Language switch: fixed top-right (mirrors .research__close on the
   opposite side), three buttons (HE/EN/IT). Every translatable string on
   the page is authored as a .lang-he/.lang-en/.lang-it trio — setting
   body.lang-en or body.lang-it swaps which one shows, see initLangSwitch
   in research.js. */
.lang-switch {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 20;
  display: flex;
  gap: 6px;
  padding: 4px;
  border-radius: 20px;
  background: rgba(250, 249, 246, 0.7);
}

.lang-switch__btn {
  height: 28px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  border: none;
  background: transparent;
  color: var(--ink-soft);
  font-family: "NarkissBlock", sans-serif;
  font-size: 13px;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.lang-switch__btn:hover {
  color: var(--ink);
}

.lang-switch__btn.is-active {
  background: rgba(255, 255, 255, 0.9);
  color: var(--ink);
}

/* Hebrew is the default; English/Italian are hidden until body carries the
   matching lang-en/lang-it class. Camerino (used for every title) only has
   Hebrew glyphs, so headings must fall back to NarkissBlock in either
   non-Hebrew mode — the body copy already uses NarkissBlock and needs no
   override.
   Scoped to `span.lang-en`/`span.lang-he`/`span.lang-it` specifically (not
   a bare `.lang-en` class selector) — body itself carries the "lang-en"/
   "lang-it" class as the active-language flag, and a bare selector would
   match body too, collapsing the whole page via `display: none`. */
span.lang-en,
span.lang-it {
  display: none;
  direction: ltr;
  unicode-bidi: isolate;
}

span.lang-he {
  direction: rtl;
  unicode-bidi: isolate;
}

body.lang-en span.lang-he,
body.lang-it span.lang-he {
  display: none;
}

body.lang-en span.lang-en {
  display: inline;
}

body.lang-it span.lang-it {
  display: inline;
}

body.lang-en .rs-hero__title,
body.lang-en .rs-hero__subtitle,
body.lang-en .rs-chapter__title,
body.lang-en .credits__title,
body.lang-it .rs-hero__title,
body.lang-it .rs-hero__subtitle,
body.lang-it .rs-chapter__title,
body.lang-it .credits__title {
  font-family: "NarkissBlock", sans-serif;
}

.rs-hero {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.rs-hero__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  text-align: center;
  /* Without this, the parallax drift in initHeroCreatures (research.js)
     snaps straight to each new mousemove position instead of easing
     between them — matches .hero__content's transition in style.css. */
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.rs-hero__title {
  font-family: "Camerino", serif;
  font-weight: 400;
  font-size: clamp(3rem, 9vw, 7rem);
  line-height: 1;
  color: var(--ink);
}

.rs-hero__subtitle {
  font-family: "Camerino", serif;
  font-style: italic;
  font-size: clamp(1.3rem, 2.4vw, 2rem);
  color: var(--ink);
}

.rs-hero__scroll {
  position: absolute;
  z-index: 1;
  bottom: 6vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  font-family: "Camerino", serif;
  font-size: 12px;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
}

.rs-hero__arrow {
  width: 1px;
  height: 32px;
  background: var(--ink-soft);
  animation: rs-scroll-cue 1.8s ease-in-out infinite;
}

@keyframes rs-scroll-cue {
  0%, 100% { transform: scaleY(1); opacity: 0.6; }
  50% { transform: scaleY(0.5); opacity: 1; }
}

.rs-chapter {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10vh var(--side-pad);
}

.rs-chapter__title {
  font-family: "Camerino", serif;
  font-weight: 400;
  font-size: clamp(2rem, 5vw, 3.5rem);
  text-align: center;
  color: var(--ink);
}

.rs-chapter {
  flex-direction: column;
  gap: 6vh;
}

.rs-chapter__body {
  width: 100%;
  max-width: 1200px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6vw;
}

.rs-chapter__body--text-only {
  max-width: 760px;
}

.rs-chapter__text {
  flex: 1 1 380px;
  min-width: 0;
  font-family: "NarkissBlock", sans-serif;
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  line-height: 1.5;
  color: var(--ink);
  /* Avoids a lone word stranded on its own wrapped line — matters most for
     the English translations, which flow freely instead of using the
     hand-placed <br> breaks the Hebrew original uses. */
  text-wrap: pretty;
}

.rs-chapter__text p + p {
  margin-top: 1.4em;
}

/* Used when the text sits stacked below full-width media (e.g. floor 2's
   marquee) instead of side-by-side with it — wider column, centered,
   matching that reference layout instead of the narrow side-by-side one. */
.rs-chapter__text--wide {
  flex: 0 0 auto;
  width: 100%;
  max-width: 1100px;
  text-align: center;
}

.rs-chapter__media {
  flex: 1 1 380px;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
}

.rs-chapter__media img {
  min-width: 0;
  max-width: 100%;
  border-radius: 4px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
}

.rs-chapter__media--single img {
  max-width: min(420px, 100%);
}

/* Hover-reveal: a second image sits hidden behind the first, only visible
   through a soft circular mask that follows the cursor (--rx/--ry, set via
   mousemove in research.js). A feathered radial-gradient edge (solid center
   fading to transparent) is what gives it a soft, liquid-like quality
   instead of a hard-edged spotlight. */
.rs-reveal {
  position: relative;
  cursor: pointer;
  overflow: hidden;
  border-radius: 4px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
}

/* the container above already carries the shadow/radius for the stacked
   pair as a whole — without this, the generic .rs-chapter__media img rule
   would put its own shadow on each of the two stacked images individually */
.rs-reveal img {
  box-shadow: none;
  border-radius: 0;
}

.rs-reveal__base {
  display: block;
  width: 100%;
}

.rs-reveal__hidden {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.35s ease;
  -webkit-mask-image: radial-gradient(circle var(--reveal-radius, 140px) at var(--rx, 50%) var(--ry, 50%), #000 55%, transparent 100%);
  mask-image: radial-gradient(circle var(--reveal-radius, 140px) at var(--rx, 50%) var(--ry, 50%), #000 55%, transparent 100%);
}

.rs-reveal:hover .rs-reveal__hidden {
  opacity: 1;
}

/* Floor 6: two images (top layer / bottom layer, matching the reveal pair
   above) spanning full-bleed edge-to-edge instead of sitting inside the
   normal page padding — same technique as .plant-ribbon on the home page:
   grow past the padding by exactly its own width, then pull back in with
   an equal negative margin. A larger mask radius suits the much bigger
   full-width image better than the default (tuned for a narrow column). */
.rs-reveal--full {
  width: calc(100% + 2 * var(--side-pad));
  margin: 0 calc(-1 * var(--side-pad));
  --reveal-radius: 260px;
}

.rs-chapter__media--three {
  flex-wrap: wrap;
}

.rs-chapter__media--three img {
  flex: 1 1 30%;
  max-width: 32%;
}

@media (max-width: 860px) {
  .rs-chapter__body {
    flex-direction: column;
  }

  .rs-chapter__media--three img {
    max-width: 60%;
    flex: 1 1 45%;
  }
}

/* Strip 2's two-block layout follows a specific reference comp — each
   block pairs one paragraph with one image at its own size, alternating
   which side leans toward the page's outer (right) vs inner (left) edge,
   rather than the generic even text/media split used elsewhere. */
.rs-chapter--split {
  align-items: stretch;
}

.rs-chapter__block {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 4vw;
}

/* justify-content's start/end follow the RTL writing direction here
   (flex-start = right, flex-end = left) — block a's image sits toward
   the outer/right edge, block b's text sits toward the inner/left edge,
   matching the reference comp's edge-to-edge asymmetric placement. */
.rs-chapter__block--a {
  justify-content: flex-start;
}

.rs-chapter__block--b {
  justify-content: flex-end;
}

.rs-chapter__block .rs-chapter__text {
  flex: 0 1 420px;
}

.rs-chapter__img--sm {
  flex: 0 0 auto;
  width: 22vw;
}

.rs-chapter__img--lg {
  flex: 0 0 auto;
  width: 30vw;
}

@media (max-width: 860px) {
  .rs-chapter__block {
    flex-direction: column;
    align-items: center;
  }

  .rs-chapter__img--sm,
  .rs-chapter__img--lg {
    width: 80%;
  }
}

/* --- Multi-image slider (floors 2, 5, 7): horizontal scroll-snap carousel,
   not a static grid — drag/swipe or use the prev/next buttons. See
   initSliders in research.js for the button wiring. */
.rs-slider-wrap {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.rs-slider {
  display: flex;
  gap: 1.5rem;
  width: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: 2px;
}

.rs-slider::-webkit-scrollbar {
  display: none;
}

.rs-slider img {
  scroll-snap-align: center;
  flex: 0 0 auto;
  max-height: 340px;
  width: auto;
  max-width: 80%;
  border-radius: 4px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
}

.rs-slider__nav {
  display: flex;
  justify-content: center;
  gap: 1rem;
}

.rs-slider__nav button {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--ink);
  background: transparent;
  color: var(--ink);
  font-size: 18px;
  font-family: "NarkissBlock", sans-serif;
  cursor: pointer;
  transition: background 0.2s ease;
}

.rs-slider__nav button:hover {
  background: rgba(0, 0, 0, 0.06);
}

@media (max-width: 860px) {
  .rs-slider img {
    max-height: 220px;
  }
}

/* --- Marquee (floor 2): images scroll continuously right-to-left on their
   own clock — not user-driven like .rs-slider. The track's image list is
   duplicated once in the HTML — the position is driven directly by JS
   (requestAnimationFrame in initMarquees, research.js), not a CSS
   @keyframes animation. A plain incrementing pixel offset wrapped with
   modulo against one set's width can never "run out" the way a
   fixed-duration CSS animation's internal iteration handling might on some
   engines — it's just arithmetic, verified to keep advancing indefinitely.
   Hover slows it by changing the JS rate variable, not by touching
   anything animation-related. */
.rs-marquee {
  width: 100%;
  overflow: hidden;
  /* Forced to ltr regardless of the page's own dir="rtl" — confirmed by
     direct measurement that in RTL, DOM order places each next image
     further LEFT (off-screen), leaving no runway of not-yet-seen content
     on the right for new images to slide in from. In ltr, DOM order places
     later images further RIGHT (naturally off-screen, waiting) — exactly
     the standard, well-tested marquee setup — so a plain translateX(-x)
     sweep actually carries every image through the visible window. */
  direction: ltr;
}

.rs-marquee__track {
  display: flex;
  gap: 1.5rem;
  width: max-content;
  /* Without this, the browser has no reason to promote the track to its
     own GPU layer — every rAF-driven translateX (see initMarquees in
     research.js) can end up repainting the full row of large source
     images instead of just cheaply re-compositing it, which reads as
     small stutters even though the underlying position math is smooth. */
  will-change: transform;
}

.rs-marquee__track img {
  height: 550px;
  width: auto;
  flex: 0 0 auto;
  border-radius: 4px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
}

@media (max-width: 860px) {
  .rs-marquee__track img {
    height: 360px;
  }
}

/* --- Running image loop (floors 3, 4, 6, 8): an autoplaying frame cycle —
   NOT tied to scroll position like the home page's video-scrub sections.
   See initRunningLoops in research.js. Hovering slows the frame interval
   down rather than stopping it, per explicit request. --- */
.rs-loop {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 4px;
  cursor: pointer;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
}

.rs-loop img {
  display: block;
  width: 100%;
  height: auto;
}

/* --- Floor 4: letter-design stroke diagrams, alongside the running loop --- */
.rs-strokes {
  display: flex;
  justify-content: center;
  width: 100%;
}

.rs-strokes img {
  width: 100%;
  max-width: 700px;
}

/* --- Floor 10: closing full-alphabet display --- */
.rs-alphabet {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
  gap: 2vh 1vw;
  width: 100%;
  max-width: 1100px;
  padding: 4vh 0;
}

.rs-alphabet span {
  font-family: "Camerino", serif;
  font-size: clamp(2rem, 4vw, 3.2rem);
  text-align: center;
  color: var(--ink);
}