/*
 * 들꽃정원 이야기 척추 v1 — 한 권의 그림책
 *
 * 다섯 화면(현관·모두·가족·엄마·책방)을 하나의 서사로 묶는 공유 시각 층.
 *   · 챕터 마크  — 책 갈피처럼 각 정원의 시간대를 여는 작은 라벨
 *   · 내러티브 브릿지 — 한 정원의 끝에서 다음 장으로 이야기를 넘기는 장면
 *   · 페이지 베일 — 이동이 아니라 "장 넘김"으로 느껴지게 하는 종이빛 장막
 *   · 여정 꽃잎 — 지금까지 펼쳐본 장을 보여주는 다섯 장의 꽃잎 책갈피
 *   · 첫 개화 축하 — 처음 열린 장에서 한 번만 꽃잎이 흩어지는 순간
 *
 * 모든 색은 garden-system.css의 --rg-* 토큰에서만 가져온다.
 * Firebase·라우트 계약과 무관하게 순수하게 시각만 담당한다.
 */

/* ------------------------------------------------------------------ */
/* 1. 챕터 마크 — 각 정원의 시간대를 여는 책 갈피                       */
/* ------------------------------------------------------------------ */

.story-chapter-mark {
  --mark-tone: var(--rg-tone-morning);
  display: grid;
  gap: 7px;
  margin: 0 0 14px;
}

body[data-story-chapter="foyer"] .story-chapter-mark { --mark-tone: var(--rg-tone-dawn); }
body[data-story-chapter="together"] .story-chapter-mark { --mark-tone: var(--rg-tone-morning); }
body[data-story-chapter="family"] .story-chapter-mark { --mark-tone: var(--rg-tone-day); }
body[data-story-chapter="mom"] .story-chapter-mark { --mark-tone: var(--rg-tone-sunset); }
body[data-story-chapter="books"] .story-chapter-mark { --mark-tone: var(--rg-tone-candle); }

.story-chapter-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--mark-tone);
  font-family: var(--rg-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .34em;
  text-transform: uppercase;
}

.story-chapter-kicker::before {
  content: '';
  width: 26px;
  height: 1px;
  background: currentColor;
  opacity: .65;
}

.story-chapter-kicker::after {
  content: '✿';
  font-size: 10px;
  letter-spacing: 0;
  opacity: .8;
}

.story-chapter-line {
  color: var(--rg-muted);
  font-family: var(--rg-serif);
  font-size: clamp(14px, 1.3vw, 17px);
  line-height: 1.6;
}

/* 석양 히어로처럼 어두운 장면 위에서는 종이빛으로 밝힌다 */
.story-chapter-mark-light .story-chapter-kicker { color: #f2d9c4; }
.story-chapter-mark-light .story-chapter-line { color: rgba(247, 240, 226, .82); }

/* ------------------------------------------------------------------ */
/* 2. 내러티브 브릿지 — 다음 장으로 이야기를 넘기는 장면                 */
/* ------------------------------------------------------------------ */

.story-bridge-line {
  margin: 14px 0 0;
  color: var(--rg-muted);
  font-family: var(--rg-serif);
  font-size: clamp(14px, 1.25vw, 17px);
  line-height: 1.75;
}

.story-bridge {
  position: relative;
  overflow: hidden;
  padding: clamp(64px, 9vh, 110px) 24px;
  text-align: center;
  background:
    radial-gradient(58% 74% at 50% 0%, rgba(255, 246, 222, .9), transparent 70%),
    linear-gradient(178deg, var(--rg-paper-soft) 8%, var(--rg-rose-soft) 68%, #e9cfd4 100%);
}

.story-bridge::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: var(--rg-grain);
  opacity: .1;
}

/* 브릿지 위를 천천히 지나는 꽃잎 두 장 — 상시 장식이 아닌 아주 느린 호흡 */
.story-bridge::after {
  content: '❀';
  position: absolute;
  top: 18%;
  left: -6%;
  color: rgba(166, 94, 112, .2);
  font-size: clamp(28px, 3.4vw, 44px);
  animation: storyBridgeDrift calc(var(--tempo-drift) * 1.2) var(--ease-organic) infinite;
}

@keyframes storyBridgeDrift {
  0% { transform: translate3d(0, 0, 0) rotate(-14deg); opacity: 0; }
  12% { opacity: 1; }
  88% { opacity: 1; }
  100% { transform: translate3d(112vw, 9vh, 0) rotate(200deg); opacity: 0; }
}

.story-bridge-inner {
  position: relative;
  max-width: 640px;
  margin: 0 auto;
  display: grid;
  justify-items: center;
  gap: 16px;
}

.story-bridge-rose {
  width: clamp(58px, 6vw, 78px);
  height: auto;
  fill: none;
  stroke: var(--rg-rose-deep);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .85;
  animation: storyBridgeBreath var(--tempo-breath) var(--ease-organic) infinite alternate;
}

@keyframes storyBridgeBreath {
  from { transform: translateY(0) scale(1); opacity: .72; }
  to { transform: translateY(-5px) scale(1.045); opacity: .95; }
}

.story-bridge-kicker {
  margin: 0;
  color: var(--rg-rose-deep);
  font-family: var(--rg-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .34em;
  text-transform: uppercase;
}

.story-bridge h2 {
  margin: 0;
  color: var(--rg-ink-strong);
  font-family: var(--rg-serif);
  font-size: clamp(24px, 3vw, 38px);
  font-weight: 700;
  line-height: 1.42;
  letter-spacing: -.045em;
  text-wrap: balance;
}

.story-bridge-copy {
  margin: 0;
  color: var(--rg-muted);
  font-family: var(--rg-serif);
  font-size: clamp(14px, 1.3vw, 17px);
  line-height: 1.8;
}

.story-bridge-link {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
  padding: 0 26px;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(120deg, var(--rg-rose-deep), #8d5263);
  box-shadow: 0 16px 38px rgba(122, 62, 80, .3);
  font-family: var(--rg-sans);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: translate var(--rg-motion) var(--rg-ease), box-shadow var(--rg-motion) var(--rg-ease);
}

.story-bridge-link svg {
  width: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: translate var(--rg-motion-fast) var(--rg-ease);
}

.story-bridge-link:hover,
.story-bridge-link:focus-visible {
  translate: 0 -3px;
  box-shadow: 0 22px 48px rgba(122, 62, 80, .38), 0 0 34px rgba(255, 236, 190, .35);
}

.story-bridge-link:hover svg,
.story-bridge-link:focus-visible svg {
  translate: 4px 0;
}

/* 엄마의정원 브릿지는 석양 공기, 책방 브릿지는 촛불 공기 */
.story-bridge-mom {
  background:
    radial-gradient(56% 70% at 50% 0%, rgba(255, 226, 188, .5), transparent 72%),
    linear-gradient(178deg, #3c4a66 0%, #5d5b7d 52%, #8d6a79 100%);
}

.story-bridge-mom .story-bridge-kicker { color: #f4d9b8; }
.story-bridge-mom h2 { color: #fdf6ea; }
.story-bridge-mom .story-bridge-copy { color: rgba(250, 240, 226, .82); }
.story-bridge-mom .story-bridge-rose { stroke: #f4cf9d; }
.story-bridge-mom::after { color: rgba(255, 236, 190, .22); }
.story-bridge-mom .story-journey-line { color: rgba(250, 240, 226, .78); }
.story-bridge-mom .story-petal svg { stroke: rgba(250, 240, 226, .6); }
.story-bridge-mom .story-petal.is-open svg { fill: #e9b98d; stroke: #f6dcbc; }

.story-bridge-books {
  background:
    radial-gradient(56% 70% at 50% 0%, rgba(255, 244, 206, .9), transparent 72%),
    linear-gradient(178deg, var(--rg-paper-soft) 6%, #f3e3c8 62%, #ecd6b4 100%);
}

/* ------------------------------------------------------------------ */
/* 3. 여정 꽃잎 — 다섯 장의 꽃잎 책갈피                                 */
/* ------------------------------------------------------------------ */

[data-story-journey] {
  display: grid;
  justify-items: center;
  gap: 10px;
  margin-top: 18px;
}

.story-journey-petals {
  display: inline-flex;
  align-items: flex-end;
  gap: 9px;
}

.story-petal {
  display: grid;
  place-items: center;
  min-width: 44px;
  min-height: 44px;
  padding: 10px;
  transition: translate var(--rg-motion-fast) var(--rg-ease);
}

.story-petal svg {
  width: 17px;
  height: 24px;
  fill: rgba(207, 135, 149, .12);
  stroke: var(--rg-line-strong);
  stroke-width: 1.6;
  transition: fill var(--rg-motion) var(--rg-ease), stroke var(--rg-motion) var(--rg-ease);
}

.story-petal.is-open svg {
  fill: var(--rg-rose);
  stroke: var(--rg-rose-deep);
  filter: drop-shadow(0 3px 7px rgba(166, 94, 112, .35));
}

.story-petal:hover,
.story-petal:focus-visible {
  translate: 0 -3px;
}

.story-petal.is-here svg {
  stroke: var(--rg-gold);
  stroke-width: 2.2;
}

.story-journey-line {
  color: var(--rg-muted);
  font-family: var(--rg-serif);
  font-size: 13px;
  line-height: 1.6;
}

/* ------------------------------------------------------------------ */
/* 4. 페이지 베일 — 이동이 아니라 장 넘김으로                            */
/* ------------------------------------------------------------------ */

.story-pageveil {
  position: fixed;
  inset: 0;
  z-index: 9990;
  display: grid;
  place-items: center;
  pointer-events: none;
  background: radial-gradient(72% 62% at 50% 44%, rgba(255, 250, 238, .97), rgba(247, 241, 229, .93) 78%);
  opacity: 0;
  visibility: hidden;
  transition: opacity 240ms ease, visibility 0s linear 240ms;
}

.story-pageveil.is-turning {
  opacity: 1;
  visibility: visible;
  transition: opacity 200ms ease;
}

.pageveil-glow {
  position: absolute;
  width: 62vmin;
  height: 62vmin;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 240, 200, .85), rgba(255, 236, 190, 0) 68%);
}

.pageveil-petal {
  position: absolute;
  top: -12%;
  width: clamp(60px, 9vw, 120px);
  height: auto;
  fill: rgba(207, 135, 149, .5);
}

.pageveil-petal-b { fill: rgba(229, 194, 123, .45); }
.pageveil-petal-c { fill: rgba(166, 94, 112, .36); }

.story-pageveil.is-turning .pageveil-petal {
  animation: pageveilFall var(--rg-pageveil-ms) var(--ease-organic) both;
}

.story-pageveil.is-turning .pageveil-petal-b { animation-delay: 70ms; }
.story-pageveil.is-turning .pageveil-petal-c { animation-delay: 140ms; }

@keyframes pageveilFall {
  0% { transform: translate3d(-16vw, -8vh, 0) rotate(-30deg); opacity: 0; }
  18% { opacity: 1; }
  100% { transform: translate3d(20vw, 118vh, 0) rotate(230deg); opacity: .4; }
}

/* 도착한 장이 조용히 자리를 잡는 호흡 */
html.story-arriving body {
  animation: storySettle 760ms var(--rg-ease) both;
}

@keyframes storySettle {
  from { opacity: .3; transform: translateY(12px) scale(.996); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ------------------------------------------------------------------ */
/* 5. 첫 개화 축하 — 처음 열린 장에서 한 번만 꽃잎이 흩어진다            */
/* ------------------------------------------------------------------ */

.story-bloom-burst {
  position: fixed;
  inset: 0;
  z-index: 9980;
  pointer-events: none;
  overflow: hidden;
}

.burst-petal {
  position: absolute;
  top: -46px;
  left: var(--bx, 50vw);
  width: calc(15px * var(--bs, 1));
  height: calc(22px * var(--bs, 1));
  border-radius: 52% 52% 46% 46% / 62% 62% 38% 38%;
  background: linear-gradient(150deg, #f7d4dc, #e3a7b5 62%, #cf8795);
  box-shadow: 0 4px 12px rgba(166, 94, 112, .25);
  opacity: 0;
  animation: burstFall var(--bd, 1400ms) cubic-bezier(.24, .68, .38, 1) 60ms both;
}

.burst-petal:nth-child(3n) {
  background: linear-gradient(150deg, #f7e6bb, #e9c987 62%, #d9b268);
}

@keyframes burstFall {
  0% { transform: translate3d(0, 0, 0) rotate(0deg); opacity: 0; }
  12% { opacity: .95; }
  100% { transform: translate3d(6vw, 74vh, 0) rotate(var(--br, 240deg)); opacity: 0; }
}

/* ------------------------------------------------------------------ */
/* 6. 현관 표지 보조 — 책 표지처럼 여는 문장                             */
/* ------------------------------------------------------------------ */

.foyer-book-overline {
  margin: 0 0 10px;
  color: rgba(23, 63, 49, .62);
  font-family: var(--rg-sans);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .42em;
  text-transform: uppercase;
}

.foyer-book-overline::before,
.foyer-book-overline::after {
  content: '—';
  margin: 0 10px;
  opacity: .55;
}

.foyer-journey {
  margin-top: 4px;
}

/* 이미 펼쳐본 문에는 금빛 꽃잎 도장을 찍는다 */
.garden-door.is-visited .door-frame::after {
  content: '✿';
  position: absolute;
  top: 13px;
  right: 13px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 29px;
  height: 29px;
  border-radius: 50%;
  color: #fff8e6;
  background: radial-gradient(circle at 32% 28%, rgba(229, 194, 123, .96), rgba(166, 94, 112, .92));
  box-shadow: 0 6px 16px rgba(24, 22, 16, .34), 0 0 0 4px rgba(255, 248, 230, .16);
  font-size: 13px;
  line-height: 1;
}

.garden-door.is-visited .door-halo {
  box-shadow: 0 28px 75px rgba(26, 43, 36, .24), 0 0 30px rgba(255, 232, 170, .22);
}

/* ------------------------------------------------------------------ */
/* 7. 반응형과 접근성                                                    */
/* ------------------------------------------------------------------ */

@media (max-width: 700px) {
  .story-chapter-kicker { letter-spacing: .26em; font-size: 10px; }
  .story-bridge { padding: 56px 18px; }
  .story-bridge h2 { font-size: clamp(21px, 6.4vw, 28px); }
  .story-bridge-link { width: 100%; max-width: 320px; justify-content: center; }
  .story-journey-petals { gap: 7px; }
  .story-petal svg { width: 15px; height: 21px; }
  .garden-door.is-visited .door-frame::after { top: 9px; right: 9px; width: 24px; height: 24px; font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .story-bridge::after,
  .story-bridge-rose {
    animation: none !important;
  }

  .story-pageveil { display: none !important; }

  html.story-arriving body { animation: none !important; }

  .story-bloom-burst { display: none !important; }

  .story-bridge-link,
  .story-petal,
  .story-petal svg {
    transition: none !important;
  }
}