/* pages-story.css — Story intro 1, story pages (story1/2/3/end) */

/* ═══════════════════════════════════════════════════
   STORY INTRO PAGE
════════════════════════════════════════════════════ */
.story-intro-page {
  background: url('../assets/bg/BG3.jpg') center / cover no-repeat;
  justify-content: flex-start;
  overflow: hidden;
}

/* Step 1: tagline — uses standard data-ani-step="1" slide+fade */
.story-intro-tagline-wrap {
  width: 100%;
  padding: clamp(36px, 10cqw, 144px) clamp(24px, 6cqw, 86px) 0;
  text-align: center;
  flex-shrink: 0;
}

.story-intro-tagline {
  font-family: var(--font-solid, sans-serif);
  font-size: clamp(16px, 3.9cqw, 56px);
  font-weight: 350;
  color: var(--page-text);
  line-height: 1.4;
}

.story-intro-brand {
  color: var(--page-text);
  font-weight: 700;
  font-size: 1.25em;
}

/* Stage: fills remaining space; typing in middle, illustration at bottom */
.story-intro-stage {
  flex: 1;
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  min-height: 0;
}

/* Typing text — vertically centred in the upper portion */
.story-intro-typing-text {
  font-family: var(--font-solid, sans-serif);
  font-size: clamp(16px, 3.9cqw, 56px);
  font-weight: 350;
  color: var(--page-text);
  line-height: 1.4;
  text-align: center;
  padding: clamp(29px, 8cqw, 115px) clamp(54px, 13.5cqw, 173px) clamp(12px, 3cqw, 43px);
  flex-shrink: 0;
}

/* Illustration — absolutely anchored to bottom, never affected by typing text height */
.story-intro-illust-wrap {
  position: absolute;
  bottom: -8cqw;
  left: 0;
  width: 100%;
  height: clamp(200px, 58cqw, 800px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
}

.story-intro-illust {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom center;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
}

@keyframes illust-slide-in {
  from { transform: translateX(100%)  scale(1.3); opacity: 0; }
  to   { transform: translateX(0)     scale(1.3); opacity: 1; }
}

@keyframes illust-slide-out {
  from { transform: translateX(0)     scale(1.3); opacity: 1; }
  to   { transform: translateX(-100%) scale(1.3); opacity: 0; }
}

.story-intro-illust.is-entering {
  animation: illust-slide-in 2s ease forwards;
}

.story-intro-illust.is-exiting {
  animation: illust-slide-out 2s ease forwards;
}

/* Story-intro review nav arrows — injected by JS after sequence completes */
#page-story-intro .story-intro-nav-arrow {
  position: absolute;
  top: 50%;
  pointer-events: auto;
  transform: translateY(65%) scale(0.7);
  transform-origin: center top;
}


/* ═══════════════════════════════════════════════════
   STORY PAGES (story1 / story2 / story3 / story-end)
════════════════════════════════════════════════════ */
.story-page {
  background: var(--page-bg-dark);
  color: var(--color-white);
  justify-content: flex-start;
  overflow: hidden;
}

/* Override topbar text colors for dark background */
.story-page .page-topbar-badge-num,
.story-page .page-topbar-badge-text {
  color: var(--color-white);
}

/* Progress bar row */
.story-progress-wrap {
  width: 100%;
  display: flex;
  align-items: center;
  gap: clamp(8px, 2cqw, 51px);
  padding: 0 clamp(54px, 13.5cqw, 346px) clamp(8px, 2cqw, 51px);
  flex-shrink: 0;
}

.story-progress-label {
  font-family: var(--font-body, sans-serif);
  font-size: clamp(10px, 3cqw, 64px);
  font-weight: 600;
  color: var(--color-white);
  min-width: clamp(24px, 6cqw, 154px);
  flex-shrink: 0;
}

.story-progress-track {
  flex: 1;
  height: clamp(5px, 1.4cqw, 31px);
  background: rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  overflow: hidden;
}

.story-progress-fill {
  height: 100%;
  background: var(--page-red);
  border-radius: 999px;
  transition: width 0.4s ease;
}

/* Narrative text block */
.story-text-block {
  width: 100%;
  padding: 0 clamp(48px, 12cqw, 154px) 0;
  flex-shrink: 0;
}

.story-narrative {
  font-family: var(--font-solid, sans-serif);
  font-size: clamp(15px, 3.6cqw, 28px);
  font-weight: 350;
  color: var(--color-white);
  line-height: 1.5;
  text-align: center;
}

.story-narrative strong {
  font-size: clamp(17px, 4.4cqw, 34px);
  font-weight: 700;
}

/* Bold at normal body size — no font-size increase */
.story-narrative .story-narrative-bold-same {
  font-size: inherit;
}

/* Scene area — fills remaining space, centers mascot */
.story-scene {
  flex: 1;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.story-mascot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(140px, 50cqw, 300px);
}

.story-mascot .title-mascot-placeholder {
  width: clamp(120px, 45cqw, 260px);
  height: clamp(120px, 45cqw, 260px);
  font-size: clamp(48px, 18cqw, 120px);
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.15);
}

.story-mascot img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* Full-page background illustration for story-quiz pages */
.story-scene-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
  z-index: 0;
  pointer-events: none;
}

@keyframes story-bg-enter {
  from { opacity: 0; transform: translateY(32px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Bg illustration animates on page enter — fly up + fade over 0.6s */
.page-enter .story-scene-bg {
  opacity: 0;
  animation: story-bg-enter 0.6s ease forwards;
  animation-delay: 0s;
}

/* Delay child steps to start after bg animation finishes (0.6s) */
.story-page.page-enter [data-ani-step="1"] {
  animation-delay: 0.7s;
}
.story-page.page-enter [data-ani-step="2"] {
  animation-delay: 1.05s;
}
.story-page.page-enter [data-ani-step="3"] {
  animation-delay: 1.4s;
}

.story-page .page-topbar,
.story-page .story-progress-wrap,
.story-page .story-text-block,
.story-page .story-scene,
.story-page .page-cta-bar {
  position: relative;
  z-index: 1;
}

/* story-end: add top padding, explicitly repeat left/right to match base story-text-block */
.story-end-page .story-text-block {
  padding-top: clamp(20px, 5cqw, 40px);
  padding-left: clamp(48px, 12cqw, 154px);
  padding-right: clamp(48px, 12cqw, 154px);
}

/* story-end: layered illustrations, full-page absolute like story-scene-bg */
.story-end-illust-bg,
.story-end-illust-fg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.story-end-illust-bg {
  object-fit: contain;
  object-position: center;
  z-index: 0;
}

.story-end-illust-fg {
  object-fit: contain;
  object-position: center;
  z-index: 1;
}

@keyframes story-end-bg-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}

/* Fly-up + fade on enter — higher specificity wins over page-active pulse */
.page-active.page-enter .story-end-illust-bg {
  opacity: 0;
  animation: story-bg-enter 0.6s ease forwards 0s;
}

.page-active.page-enter .story-end-illust-fg {
  opacity: 0;
  animation: story-bg-enter 0.6s ease forwards 0.2s;
}

/* Pulse loops once page-enter is removed, leaving only page-active */
.page-active:not(.page-enter) .story-end-illust-bg {
  animation: story-end-bg-pulse 4.8s ease-in-out infinite;
}

/* CTA bar on dark pages — keep white background button, looks correct */
.story-page .page-cta-bar {
  background: transparent;
}

/* ── Story-end: analysing bar (replaces Berikutnya button) ── */
.story-end-analysing-bar {
  width: 100%;
  padding: clamp(12px, 3cqw, 40px) clamp(54px, 13.5cqw, 173px) clamp(90px, 34cqw, 472px);
  flex-shrink: 0;
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.story-end-analysing-text {
  font-family: var(--font-solid, sans-serif);
  font-size: clamp(14px, 3.5cqw, 44px);
  font-weight: 700;
  color: #fff;
  display: flex;
  align-items: baseline;
  gap: 0;
}

.story-end-analysing-dots {
  display: inline-flex;
  align-items: baseline;
}

.story-end-analysing-dots span::before {
  content: '.';
}

.story-end-analysing-dots span {
  animation: loading-dots 1.2s ease-in-out infinite;
  opacity: 0;
}

.story-end-analysing-dots span:nth-child(2) { animation-delay: 0.4s; }
.story-end-analysing-dots span:nth-child(3) { animation-delay: 0.8s; }