/* ==========================================================================
   The Canal Boat Bookseller - story.css
   The Kingfisher Letters, the towpath die, and scene motion (boat arriving,
   visitor walking up, tea pouring). Loaded after components.css.
   ========================================================================== */

/* The Kingfisher Letters */
#kingfisherMount:empty { display: none; }
.kf-card { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 14px 18px; background: linear-gradient(135deg, #FBF3DF, #F4E7C8); border: 1px solid #DCC59A; border-left: 5px solid #1F6E8C; border-radius: var(--r-md); box-shadow: 0 3px 12px rgba(42, 27, 16, 0.08); }
.kf-card.is-found { border-left-color: var(--c-forest-mid); background: #FFFDF8; }
.kf-seal { width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #1F6E8C; color: #FFFDF8; font-size: 22px; box-shadow: inset 0 0 0 3px rgba(255,255,255,0.25); flex-shrink: 0; }
.kf-seal.is-hidden { background: #C6985C; animation: kfPulse 2s ease-in-out infinite; }
@keyframes kfPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
.kf-kicker { font-family: var(--font-hand); font-size: 18px; color: #1F6E8C; }
.kf-card-text strong { display: block; font-family: var(--font-serif); font-size: 17px; color: var(--c-forest-dark); }
.kf-card-text p { font-size: 15px; line-height: 1.5; color: var(--c-ink-sub); margin-top: 2px; }
.kf-card-actions { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.kf-posted { font-size: 15px; font-weight: 600; color: var(--c-forest-mid); }
@media (max-width: 600px) {
  .kf-card { grid-template-columns: auto 1fr; }
  .kf-card-actions { grid-column: 1 / -1; align-items: stretch; }
}

.kf-envelope-stage { position: relative; min-height: 340px; display: flex; justify-content: center; align-items: flex-start; }
.kf-envelope { position: absolute; top: 110px; width: 300px; max-width: 90%; height: 190px; perspective: 800px; cursor: pointer; transition: transform 0.6s ease 0.4s, opacity 0.5s ease 0.6s; }
.kf-env-back, .kf-env-front { position: absolute; inset: 0; border-radius: 6px; }
.kf-env-back { background: #D9C49A; }
.kf-env-front { background: linear-gradient(160deg, #E9D7AE, #DCC392); clip-path: polygon(0 0, 50% 52%, 100% 0, 100% 100%, 0 100%); display: flex; align-items: flex-end; justify-content: center; padding-bottom: 22px; font-family: var(--font-hand); font-size: 20px; color: #5A4428; z-index: 3; }
.kf-env-flap { position: absolute; left: 0; right: 0; top: 0; height: 56%; background: #CFB683; clip-path: polygon(0 0, 100% 0, 50% 100%); transform-origin: top; transition: transform 0.55s ease; z-index: 4; }
.kf-wax { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%); width: 40px; height: 40px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #3A8FAE, #1F6E8C 60%, #134A5E); color: #E6F2F6; font-family: 'Cinzel', serif; font-weight: 700; display: flex; align-items: center; justify-content: center; z-index: 5; transition: opacity 0.3s; }
.kf-envelope.is-open .kf-env-flap { transform: rotateX(180deg); z-index: 1; }
.kf-envelope.is-open .kf-wax { opacity: 0; }
.kf-envelope:not(.is-open) { animation: kfWiggle 2.4s ease-in-out infinite; }
@keyframes kfWiggle { 0%, 88%, 100% { transform: rotate(0); } 92% { transform: rotate(-2deg); } 96% { transform: rotate(2deg); } }
.kf-letter { position: relative; width: min(460px, 94%); padding: 22px 26px; background: #FFFBF0 repeating-linear-gradient(0deg, transparent 0 31px, rgba(139, 101, 52, 0.12) 31px 32px); border: 1px solid #E5D3AE; box-shadow: 0 12px 30px rgba(0,0,0,0.2); transform: translateY(140px) scale(0.85); opacity: 0; z-index: 6; transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease; pointer-events: none; }
.kf-letter.is-out { transform: rotate(-1deg); opacity: 1; pointer-events: auto; }
.kf-envelope-stage:has(.kf-letter.is-out) .kf-envelope { opacity: 0; transform: translateY(90px); pointer-events: none; }
.kf-letter-date { display: block; text-align: right; font-family: var(--font-hand); font-size: 18px; color: #6E553F; }
.kf-letter-text { font-family: var(--font-hand); font-size: 23px; line-height: 1.38; color: #2A2018; margin: 10px 0; }
.kf-letter-sign { display: block; text-align: right; font-family: var(--font-hand); font-size: 24px; color: #1F6E8C; }

.kf-intro { font-family: var(--font-serif); font-size: 16px; line-height: 1.6; color: var(--c-wood-warm); margin-bottom: 14px; }
.kf-list { display: flex; flex-direction: column; gap: 10px; }
.kf-list-item { display: flex; gap: 14px; align-items: center; text-align: left; padding: 12px 14px; background: #FFFDF8; border: 1px solid var(--c-parchment-border); border-radius: var(--r-md); width: 100%; }
.kf-list-item strong { font-family: var(--font-serif); font-size: 16px; color: var(--c-forest-dark); }
.kf-list-item p { font-family: var(--font-hand); font-size: 18px; color: var(--c-wood-warm); margin-top: 2px; }
.kf-list-item.is-missing { opacity: 0.6; }
.kf-list-item.is-missing p { font-family: var(--font-body); font-size: 15px; font-style: italic; }
.listen-item.is-kingfisher .listen-q-btn { border-left: 4px solid #1F6E8C; }
.xmas-envelope.is-special { grid-column: 1 / -1; background: #EAF3F6; border-color: #9CC3D2; }
.xmas-envelope.is-special .env-front { color: #1F6E8C; }

/* The towpath die */
.die-stage { height: 170px; display: flex; align-items: center; justify-content: center; perspective: 700px; }
.die-cube { position: relative; width: 96px; height: 96px; transform-style: preserve-3d; transform: rotateX(-24deg) rotateY(32deg); transition: transform 1.45s cubic-bezier(0.2, 0.7, 0.2, 1); cursor: pointer; }
.die-cube.is-rolling { animation: dieHop 1.45s ease-out; }
@keyframes dieHop { 0% { translate: 0 0; } 30% { translate: 0 -60px; } 60% { translate: 0 0; } 75% { translate: 0 -14px; } 100% { translate: 0 0; } }
.die-face { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); padding: 14px; gap: 4px; background: linear-gradient(145deg, #FFFDF8, #EBDDC2); border: 2px solid #B89B6C; border-radius: 16px; box-shadow: inset 0 0 12px rgba(139, 101, 52, 0.25); backface-visibility: hidden; }
.die-face span { display: block; }
.die-face span.pip { width: 16px; height: 16px; margin: auto; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #4A6E59, #16291F); }
.die-f1 { transform: translateZ(48px); }
.die-f2 { transform: rotateY(90deg) translateZ(48px); }
.die-f3 { transform: rotateY(180deg) translateZ(48px); }
.die-f4 { transform: rotateY(-90deg) translateZ(48px); }
.die-f5 { transform: rotateX(90deg) translateZ(48px); }
.die-f6 { transform: rotateX(-90deg) translateZ(48px); }
.die-table { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 6px; }
.die-row { padding: 8px 12px; background: #F4EDE0; border-radius: var(--r-sm); font-size: 15px; color: var(--c-wood-warm); transition: all 0.3s; }
.die-row b { display: inline-block; width: 22px; color: var(--c-forest-mid); }
.die-row.is-hit { background: var(--c-forest-mid); color: #FFFDF8; transform: scale(1.03); }
.die-row.is-hit b { color: #E2BC84; }
.die-result { padding: 16px 18px; background: #FFFDF8; border: 2px solid var(--c-wood-honey); border-radius: var(--r-md); animation: fadeUp 0.4s ease; }
.die-result-num { font-family: var(--font-hand); font-size: 19px; color: var(--c-terracotta); }
.die-result-title { font-family: var(--font-serif); font-size: 20px; color: var(--c-forest-dark); margin: 2px 0 6px; }
.die-result-text { font-size: 16px; line-height: 1.55; color: var(--c-ink); }
.die-result-prompt { font-family: var(--font-serif); font-style: italic; font-size: 17px; color: var(--c-wood-warm); margin: 10px 0 8px; }
.die-note { min-height: 64px !important; margin-bottom: 10px; }
.voyage-echo { border-left: 4px solid var(--c-wood-honey); margin-bottom: 8px; }
.voyage-note { display: block; margin-top: 4px; font-family: var(--font-hand); font-size: 19px; color: var(--c-forest-dark); }

/* Movement: the boat arrives, the visitor walks up, the tea pours */
.scene-boat-arrive { position: absolute; z-index: 1; bottom: 6%; left: -32%; width: 30%; max-width: 260px; animation: boatArrive 4.2s cubic-bezier(0.25, 0.6, 0.3, 1) forwards; pointer-events: none; }
.scene-boat-arrive img { width: 100%; display: block; filter: drop-shadow(0 6px 6px rgba(0,0,0,0.35)); }
.scene-boat-wake { position: absolute; left: -20%; right: 30%; bottom: 8%; height: 10px; border-radius: 50%; background: radial-gradient(ellipse at right, rgba(255,255,255,0.55), rgba(255,255,255,0)); animation: wakeFade 4.2s ease forwards; }
.scene-boat-arrive.is-moored { animation: boatBob 3.4s ease-in-out infinite; left: 58%; }
@keyframes boatArrive { 0% { left: -32%; } 100% { left: 58%; } }
@keyframes boatBob { 0%, 100% { transform: translateY(0) rotate(-0.6deg); } 50% { transform: translateY(3px) rotate(0.6deg); } }
@keyframes wakeFade { 0%, 70% { opacity: 1; } 100% { opacity: 0; } }

.visitor-intro-card { flex-wrap: wrap; }
.visitor-intro-card.is-arriving .visitor-avatar-wrap { animation: walkIn 1.6s ease-out both; }
.visitor-intro-card.is-arriving .visitor-dialogue-content { animation: fadeUp 0.6s ease 1.4s both; }
@keyframes walkIn { 0% { opacity: 0; transform: translateX(70px); } 15% { transform: translateX(56px) translateY(-4px); } 30% { transform: translateX(42px) translateY(0); } 45% { transform: translateX(28px) translateY(-4px); } 60% { transform: translateX(14px) translateY(0); } 75% { transform: translateX(4px) translateY(-3px); } 100% { opacity: 1; transform: none; } }
.visitor-arrival-line { flex-basis: 100%; font-family: var(--font-hand); font-size: 19px; color: var(--c-terracotta); animation: fadeUp 0.5s ease both; }

.tea-pour-stage { height: auto !important; width: 220px; max-width: 100%; }
.tea-pour-svg { width: 100%; height: auto; display: block; }
.tea-pot { transform-origin: 70px 60px; transition: transform 0.5s ease; }
.tea-pour-stage.is-steaming .tea-pot { transform: rotate(22deg) translate(6px, -4px); }
.tea-stream { opacity: 0; transition: opacity 0.3s; }
.tea-pour-stage.is-steaming .tea-stream { opacity: 1; stroke-dasharray: 8 6; animation: streamFlow 0.6s linear infinite; }
@keyframes streamFlow { from { stroke-dashoffset: 28; } to { stroke-dashoffset: 0; } }
.tea-fill { transform-box: fill-box; transform-origin: bottom; transform: scaleY(var(--steep, 0)); transition: transform 0.15s linear; }
.tea-steam-wisps { opacity: 0; transition: opacity 0.6s; }
.tea-pour-stage.is-poured .tea-steam-wisps { opacity: 1; animation: wispRise 2.4s ease-in-out infinite; }
@keyframes wispRise { 0%, 100% { transform: translateY(0); opacity: 0.8; } 50% { transform: translateY(-6px); opacity: 0.4; } }

@media (prefers-reduced-motion: reduce) {
  .scene-boat-arrive, .visitor-intro-card.is-arriving .visitor-avatar-wrap, .die-cube { animation: none !important; transition: none !important; }
}

/* The die stops taking taps once it has landed; ritual buttons always sit on top */
.die-stage.is-done, .die-stage.is-done * { pointer-events: none; }
.die-stage { position: relative; z-index: 0; }
.ritual-actions { position: relative; z-index: 5; }