/* public/assets/css/story.css */

/* ── Story outer wrapper ── */
.story-outer {
  display: grid;
  grid-template-columns: 1fr 64px;
  min-height: 100vh;
}

/* ── Story main scroll area ── */
.story-main {
  overflow: visible; /* beats are full-viewport, page scrolls normally */
}

/* ── Each beat — full viewport ── */
.beat {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  background: var(--bg);
  cursor: none; /* wand cursor overrides */
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* ── Right rail ── */
.right-rail {
  position: fixed;
  right: 0; top: 0; bottom: 0;
  width: 64px;
  border-left: 1px solid #080808;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 28px 0 20px;
  z-index: 50;
  overflow: visible;
}

/* ── Corner labels (consistent across all beats) ── */
.corner-tr {
  position: absolute;
  top: 16px; right: 80px;
  font-size: var(--fs-2xs); color: #1e1e1e;
  letter-spacing: 2px; text-transform: uppercase;
  z-index: 5;
  transition: color 0.6s ease;
}
.beat.in-view .corner-tr { color: #2a2a2a; }
.corner-tl {
  position: absolute;
  top: 16px; left: 20px;
  font-size: var(--fs-2xs); color: #1e1e1e;
  letter-spacing: 2px; text-transform: uppercase;
  z-index: 5;
}
.corner-bl {
  position: absolute;
  bottom: 16px; left: 20px;
  font-size: var(--fs-2xs); color: #1e1e1e;
  letter-spacing: 2px; text-transform: uppercase;
  z-index: 5;
}

/* ── Scroll hint ── */
.scroll-hint {
  position: absolute;
  bottom: 24px; right: 80px;
  display: flex; align-items: center; gap: 10px;
  opacity: 0; transition: opacity .5s ease 1s;
  z-index: 2;
}
.beat.in-view .scroll-hint { opacity: 1; }
.sh-text { font-size: var(--fs-2xs); color: #333; letter-spacing: 4px; text-transform: uppercase; }
.sh-line { width: 32px; height: 1px; background: linear-gradient(to right, #333, transparent); }

/* ── Horizontal beat divider ── */
.v-divider {
  height: 1px;
  background: #111;
  transform: scaleX(0); transform-origin: left;
  transition: transform .8s var(--ease-out) .5s;
}
.beat.in-view .v-divider { transform: scaleX(1); }

/* ── Beat enter: subtle background shift ── */
.beat {
  transition: background 0.4s ease;
}
.beat.in-view {
  background: #060606;
}

/* ════════════════════════════════════════════════════════════════
   LIGHT-MODE OVERRIDES — story page
   Only adds [data-theme="light"] rules. Dark rules above untouched.
   ════════════════════════════════════════════════════════════════ */

/* Beats — white base */
:root[data-theme="light"] .beat {
  background: #fafaf8;
}
:root[data-theme="light"] .beat.in-view {
  background: #ffffff;
}

/* Right rail border */
:root[data-theme="light"] .right-rail {
  border-left-color: #e4e4e0;
}

/* Corner labels */
:root[data-theme="light"] .corner-tr,
:root[data-theme="light"] .corner-tl,
:root[data-theme="light"] .corner-bl {
  color: #8a8a8a;
}
:root[data-theme="light"] .beat.in-view .corner-tr {
  color: #6a6a6a;
}

/* Scroll hint */
:root[data-theme="light"] .sh-text {
  color: #6a6a6a;
}
:root[data-theme="light"] .sh-line {
  background: linear-gradient(to right, #6a6a6a, transparent);
}

/* Horizontal beat divider */
:root[data-theme="light"] .v-divider {
  background: #e4e4e0;
}

/* ── Mobile: offset corner labels away from RightRail (hidden on mobile) ── */
@media (max-width: 768px) {
  .corner-tr { right: 16px; }
  .scroll-hint { right: 16px; }
}