/* pages-base.css — Global layout, shared components: topbar, CTA bar, flash overlay, animations */

/* ═══════════════════════════════════════════════════
   pages.css — Styles for the new linear page flow

   Layout is inherited from base.css:
     body → 9:16 portrait column, width: min(100vw, 100svh * 9/16)
     #app  → fills body, position: relative
   Do NOT re-declare html/body layout here.
════════════════════════════════════════════════════ */

/* ── Design tokens (page-specific overrides) ─────── */
:root {
  --page-bg:          var(--color-faint-gray);  /* Toyota Faint Gray */
  --page-bg-dark:     var(--color-black);        /* Toyota Black */
  --page-text:        var(--color-black);        /* Toyota Black */
  --page-red:         var(--color-red);          /* Toyota Red */
  --page-red-gradient: linear-gradient(180deg, #FF2916 0%, #FF0000 100%); /* Art guide red gradient */
  --page-card-bg:     var(--color-white);        /* Toyota White */
  --page-card-border: var(--color-gray);         /* Toyota Gray */
  --page-muted:       var(--color-gray);         /* Toyota Gray */

  /* Gender card colors */
  --gender-male-bg:   #C8E6E0;  /* teal */
  --gender-female-bg: #F5C6C6;  /* pink */

  /* Hobby category label color */
  --hobby-category-color: var(--color-red);

}

/* ── App mount point ─────────────────────────────── */
#app {
  width: 100%;
  height: 100%;
  position: relative;
}

/* ── Page base ───────────────────────────────────── */
.page {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--page-bg) url('../assets/bg/BG_White.png') center center / cover no-repeat;
  color: var(--page-text);
  font-family: var(--font-solid, sans-serif);
  overflow: hidden;
}



.page-hidden {
  display: none;
}

/* ── White flash overlay (story-end → result-char transition) ── */
#flash-overlay {
  position: fixed;
  inset: 0;
  background: #fff;
  pointer-events: none;
  opacity: 0;
  z-index: 9999;
}

@keyframes flash-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes flash-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

#flash-overlay.flash-in {
  pointer-events: all;
  animation: flash-in 0.4s ease forwards;
}

#flash-overlay.flash-out {
  pointer-events: all;
  animation: flash-out 0.4s ease forwards;
}


@keyframes page-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.page-enter {
  animation: page-fade-in 0.5s ease forwards;
}

/* ── Staggered child entrance animation ──────────────────────────────────── */
/* Elements marked data-ani-step="1/2/3" slide up + fade in after the page   */
/* background has faded in. Step 1 = title/question, 2 = options, 3 = button */

/* Slide + fade — for flow elements (title/question) */
@keyframes page-child-enter {
  from { opacity: 0; transform: translateY(-14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Fade only — for absolutely-positioned or bottom-anchored elements */
@keyframes page-child-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Hide all stepped children at the very start of an entering page */
.page-enter [data-ani-step] {
  opacity: 0;
}

/* Step 1: title / question — slide + fade */
.page-enter [data-ani-step="1"] {
  animation: page-child-enter 0.35s ease forwards;
  animation-delay: 0.2s;
}

/* Step 2: options/scene — fade only (may contain position:absolute elements) */
.page-enter [data-ani-step="2"] {
  animation: page-child-fade 0.35s ease forwards;
  animation-delay: 0.55s;
}

/* Step 3: CTA button — fade only (bottom-anchored bar) */
.page-enter [data-ani-step="3"] {
  animation: page-child-fade 0.35s ease forwards;
  animation-delay: 0.9s;
}

/* Step 4: optional extra element — fade only */
/* Total: step4 delay (1.25s) + step duration (0.35s) = 1.6s */
.page-enter [data-ani-step="4"] {
  animation: page-child-fade 0.35s ease forwards;
  animation-delay: 1.25s;
}

/* Generic placeholder pages (not yet designed) */
.page-content {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0 clamp(20px, 6cqw, 48px);
}

.page-title-text {
  font-size: clamp(24px, 7cqw, 52px);
  font-weight: 700;
  text-align: center;
  color: var(--page-text);
}

/* ── Generic nav bar (placeholder pages) ─────────── */
.page-nav {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: clamp(12px, 3cqw, 24px) clamp(20px, 5cqw, 40px);
  gap: clamp(12px, 3cqw, 20px);
  background: var(--page-bg);
}

.btn-back,
.btn-next {
  padding: clamp(10px, 2.5cqw, 16px) clamp(24px, 7cqw, 48px);
  border-radius: clamp(6px, 1.5cqw, 10px);
  font-size: clamp(12px, 2.8cqw, 18px);
  font-weight: 600;
  font-family: var(--font-body, sans-serif);
  cursor: pointer;
  border: none;
  transition: opacity 0.15s, transform 0.1s;
  letter-spacing: 0.5px;
}

.btn-back {
  background: transparent;
  border: 1.5px solid rgba(0,0,0,0.2);
  color: var(--page-text);
}

.btn-next {
  background: var(--page-text);
  color: var(--page-bg);
  margin-left: auto;
}

.btn-back:active,
.btn-next:active {
  opacity: 0.65;
  transform: scale(0.97);
}


/* ── Bottom KEMBALI bar (legacy, kept for other pages) ── */
.kembali-bar {
  width: 100%;
  padding: clamp(10px, 2.5cqw, 18px) clamp(16px, 4cqw, 32px);
  border-top: 1px solid rgba(0,0,0,0.08);
  background: var(--page-bg);
  flex-shrink: 0;
}

.btn-kembali {
  width: 100%;
  padding: clamp(10px, 2.5cqw, 16px);
  background: var(--page-card-bg);
  border: 1.5px solid rgba(0,0,0,0.12);
  border-radius: clamp(8px, 2cqw, 14px);
  font-family: var(--font-body, sans-serif);
  font-size: clamp(11px, 2.8cqw, 18px);
  font-weight: 600;
  color: var(--page-text);
  cursor: pointer;
  letter-spacing: 0.3px;
  transition: opacity 0.15s;
}

.btn-kembali:active { opacity: 0.65; }