/* V10 — 原創「臺灣暖光水彩繪本」視覺層
   尊重內容、閱讀與無障礙優先；不模仿特定動畫工作室的專有角色或構圖。 */
:root {
  --book-paper: #fdfbf7;
  --book-paper-warm: #fff6e9;
  --book-sun: #f9a875;
  --book-sun-deep: #bc5c43;
  --book-leaf: #678d78;
  --book-leaf-deep: #315b4c;
  --book-sky: #b9d9d0;
  --book-rain: #708b9a;
  --book-ink: #342d29;
  --book-gold: #f1c56c;
  --book-plum: #82475a;
  --book-line: rgba(79, 64, 52, .18);
  --book-shadow: 0 24px 64px rgba(86, 61, 42, .12);
  --book-ease: cubic-bezier(.22, .72, .25, 1);
}

html { scroll-behavior: smooth; }

body {
  color: var(--book-ink);
  background-color: var(--book-paper);
  background-image:
    radial-gradient(circle at 12% 8%, rgba(249, 168, 117, .09) 0 1px, transparent 2px),
    radial-gradient(circle at 82% 22%, rgba(103, 141, 120, .07) 0 1px, transparent 2px),
    repeating-linear-gradient(7deg, rgba(82, 61, 47, .018) 0 1px, transparent 1px 8px);
  background-size: 18px 18px, 23px 23px, auto;
}

body::before {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: .2;
  mix-blend-mode: multiply;
  background-image:
    repeating-linear-gradient(88deg, transparent 0 4px, rgba(83, 64, 48, .018) 4px 5px),
    repeating-linear-gradient(2deg, transparent 0 7px, rgba(255, 255, 255, .16) 7px 8px);
  content: "";
}

.site-header {
  border-bottom-color: rgba(80, 64, 52, .13);
  box-shadow: 0 8px 26px rgba(73, 55, 42, .06);
}

.brand-mark,
.footer-brand-mark,
.page-mark {
  filter: saturate(.88) contrast(.96);
}

.nav-links a:not(.header-call)::after {
  height: 3px;
  border-radius: 70% 40% 60% 45%;
  background: linear-gradient(90deg, var(--book-sun-deep), var(--book-gold));
}

.header-call,
.btn,
.mobile-action,
.mobile-actions a,
.access-btn,
.perspective-tab,
.amount-presets button,
.hope-submit,
.hope-clear {
  border-radius: 999px 999px 999px 900px;
}

.btn,
.header-call,
.mobile-action,
.mobile-actions a {
  box-shadow: 0 9px 20px rgba(88, 57, 39, .11);
}

.btn:hover,
.header-call:hover,
.mobile-action:hover,
.mobile-actions a:hover {
  transform: translateY(-3px) rotate(-.35deg);
  box-shadow: 0 14px 27px rgba(88, 57, 39, .16);
}

.eyebrow,
.interactive-kicker {
  letter-spacing: .15em;
}

.eyebrow::before,
.interactive-kicker::before {
  border-radius: 60% 42% 63% 36%;
  transform: rotate(-4deg);
}

h1, h2, h3, blockquote, .article-title {
  text-wrap: balance;
}

.service-card,
.journey-card,
.trust-item,
.content-card,
.story-card,
.feature-card,
.metric-card,
.film-card,
.meta-card,
.notice,
.ai-card,
.guide-card {
  border-color: var(--book-line);
  border-radius: 25px 31px 24px 34px / 30px 23px 35px 25px;
  box-shadow: var(--book-shadow);
}

.service-card:hover,
.journey-card:hover,
.story-card:hover,
.feature-card:hover,
.interactive-teaser-card:hover {
  transform: translateY(-7px) rotate(.22deg);
}

.service-card:nth-child(even),
.journey-card:nth-child(even),
.story-card:nth-child(even) {
  border-radius: 32px 23px 34px 25px / 24px 35px 23px 31px;
}

.section-sunlit,
.section.alt,
.section.rose {
  background-image:
    radial-gradient(circle at 15% 18%, rgba(249, 168, 117, .14), transparent 25rem),
    radial-gradient(circle at 88% 76%, rgba(103, 141, 120, .11), transparent 28rem),
    repeating-linear-gradient(4deg, rgba(93, 74, 59, .015) 0 1px, transparent 1px 9px);
}

/* 首頁：一頁一頁走進晨光 */
.hero {
  isolation: isolate;
  overflow: clip;
  min-height: min(900px, calc(100svh - 96px));
  background:
    radial-gradient(circle at calc(76% + var(--hero-x, 0%)) calc(21% + var(--hero-y, 0%)), rgba(255, 225, 163, .42), transparent 25rem),
    linear-gradient(122deg, rgba(253, 251, 247, .99) 4%, rgba(253, 251, 247, .93) 48%, rgba(232, 242, 235, .7));
}

.hero::after {
  position: absolute;
  right: 3%;
  bottom: 2%;
  z-index: -1;
  width: clamp(120px, 16vw, 250px);
  aspect-ratio: 1;
  opacity: .3;
  border: 2px dashed rgba(103, 141, 120, .36);
  border-radius: 44% 56% 48% 52%;
  content: "";
  animation: book-ring 16s linear infinite;
}

.hero-grid { position: relative; z-index: 1; }
.hero-copy { position: relative; z-index: 3; }

.hero-slogan span {
  position: relative;
  color: var(--book-plum);
  text-shadow: 0 2px 0 rgba(255,255,255,.65);
}

.hero-slogan span::after {
  position: absolute;
  left: 1%;
  right: 6%;
  bottom: -.12em;
  height: .2em;
  opacity: .7;
  background: linear-gradient(90deg, transparent, rgba(249,168,117,.48) 8% 91%, transparent);
  border-radius: 50%;
  content: "";
  transform: rotate(-1deg);
  transition: transform .45s var(--book-ease), opacity .45s ease;
}

.hero-slogan:hover span::after,
.hero-slogan:focus-visible span::after { opacity: 1; transform: rotate(0) scaleX(1.03); }

.storybook-hero-visual {
  position: relative;
  width: min(48vw, 760px);
  margin: 0;
  justify-self: end;
  animation: storybook-arrive 1.1s var(--book-ease) both;
}

.storybook-frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: #f7efe4;
  border: 1px solid rgba(90, 70, 54, .2);
  border-radius: 35px 60px 31px 68px / 54px 34px 66px 38px;
  box-shadow: 0 35px 80px rgba(66, 48, 36, .2), inset 0 0 0 8px rgba(255,255,255,.34);
  transform: rotate(.7deg);
}

.storybook-frame::after {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(253,251,247,.3), transparent 18% 84%, rgba(253,251,247,.22)),
    repeating-linear-gradient(8deg, transparent 0 5px, rgba(74,55,42,.025) 5px 6px);
  content: "";
}

.storybook-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.88) contrast(.96) brightness(calc(.92 + var(--storybook-light, 0) * .08));
  transform: scale(1.035) translate3d(calc(var(--hero-x, 0%) * .14), calc(var(--hero-y, 0%) * .14), 0);
  transition: filter .8s ease, transform .3s ease-out;
}

.storybook-rain {
  position: absolute;
  z-index: 2;
  inset: -20% 35% 0 -10%;
  pointer-events: none;
  opacity: calc(.42 - var(--storybook-light, 0) * .37);
  background-image: repeating-linear-gradient(114deg, transparent 0 14px, rgba(99,129,144,.36) 15px 16px, transparent 17px 28px);
  background-size: 38px 38px;
  animation: story-rain 3.8s linear infinite;
}
.rain-two { opacity: calc(.24 - var(--storybook-light, 0) * .2); background-size: 61px 61px; animation-duration: 5.2s; }

.storybook-sun {
  position: absolute;
  z-index: 2;
  top: 5%;
  right: 8%;
  width: 22%;
  aspect-ratio: 1;
  pointer-events: none;
  opacity: calc(.1 + var(--storybook-light, 0) * .65);
  background: radial-gradient(circle, rgba(255,239,173,.9), rgba(255,206,102,.23) 45%, transparent 70%);
  border-radius: 50%;
  transform: scale(calc(.7 + var(--storybook-light, 0) * .3));
  transition: opacity .45s ease, transform .45s var(--book-ease);
}

.storybook-sprout {
  position: absolute;
  z-index: 4;
  bottom: 3%;
  color: var(--book-leaf-deep);
  opacity: calc(.1 + var(--storybook-light, 0) * .9);
  font-size: clamp(2rem, 4vw, 4.2rem);
  line-height: 1;
  text-shadow: 0 4px 8px rgba(255,255,255,.8);
  transform: translateY(calc(28px - var(--storybook-light, 0) * 28px)) rotate(-14deg);
  transition: opacity .5s ease, transform .7s var(--book-ease);
}
.sprout-one { left: 8%; }
.sprout-two { right: 8%; transform: translateY(calc(32px - var(--storybook-light, 0) * 32px)) scaleX(-1) rotate(-10deg); }

.storybook-hero-visual .hero-note {
  position: relative;
  z-index: 5;
  max-width: 88%;
  margin: -1.15rem auto 0;
  padding: .85rem 1.1rem;
  color: var(--book-leaf-deep);
  background: rgba(255, 250, 237, .95);
  border: 1px solid var(--book-line);
  border-radius: 16px 22px 14px 25px;
  box-shadow: 0 13px 30px rgba(62,46,35,.14);
  font-family: "Noto Serif TC", serif;
  font-weight: 750;
  text-align: center;
  transform: rotate(-1deg);
}

body[data-perspective="caregiver"] .storybook-frame { box-shadow: 0 35px 80px rgba(53, 80, 68, .19), inset 0 0 0 8px rgba(255,255,255,.34); }
body[data-perspective="supporter"] .storybook-frame { box-shadow: 0 35px 80px rgba(139, 77, 47, .2), inset 0 0 0 8px rgba(255,255,255,.34); }

.perspective-control {
  background: rgba(255, 251, 241, .86);
  border-style: solid;
  border-radius: 28px 21px 31px 23px / 23px 32px 22px 31px;
  box-shadow: 0 18px 38px rgba(76, 57, 44, .09);
  backdrop-filter: blur(12px);
}

.perspective-tab[aria-selected="true"]::before {
  margin-right: .4rem;
  content: "✦";
}

/* 愛心小樹：金額只改變敘事階段，不宣稱未查證的等值成果 */
.impact-result { background: linear-gradient(164deg, rgba(255,255,255,.96), rgba(247,241,222,.88)); }
.impact-tree-stage {
  position: relative;
  z-index: 2;
  width: min(100%, 235px);
  aspect-ratio: 3 / 4;
  margin: -.7rem auto -.15rem;
  background-image: url("hope-tree-stages.webp");
  background-repeat: no-repeat;
  background-size: 400% 100%;
  background-position: 0 50%;
  filter: drop-shadow(0 14px 15px rgba(64,82,57,.14));
  transition: background-position .65s steps(1), transform .6s var(--book-ease), filter .45s ease;
}
.impact-tree-stage[data-stage="sprout"] { background-position: 33.333% 50%; }
.impact-tree-stage[data-stage="sapling"] { background-position: 66.666% 50%; }
.impact-tree-stage[data-stage="bloom"] { background-position: 100% 50%; }
.impact-result.is-changing .impact-tree-stage { transform: translateY(-5px) scale(1.035); filter: drop-shadow(0 19px 18px rgba(64,82,57,.2)) saturate(1.06); }
.impact-tree-caption { position: relative; z-index: 2; margin: -.55rem 0 .7rem; color: var(--book-leaf-deep) !important; font-family: "Noto Serif TC", serif; font-weight: 850; text-align: center; }
.impact-result .badge,
.impact-result h3,
.impact-result > p:not(.impact-tree-caption),
.impact-result .actions { position: relative; z-index: 3; }

.amount-presets button::before { color: var(--book-leaf); content: "• "; }

/* 希望之光地圖 */
.map-canvas {
  background:
    radial-gradient(circle at 50% 44%, rgba(255,222,137,.44), transparent 18rem),
    repeating-linear-gradient(7deg, rgba(92,73,58,.02) 0 1px, transparent 1px 8px),
    #f8f4e8;
  border-radius: 43px 28px 48px 30px / 31px 48px 28px 45px;
}
.taiwan-map path {
  fill: rgba(103,141,120,.16);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 12 5 8 4;
}
.map-pin::after {
  position: absolute;
  inset: -9px;
  z-index: -1;
  opacity: 0;
  border: 2px dashed rgba(241,197,108,.8);
  border-radius: 50%;
  content: "";
}
.map-pin[aria-pressed="true"]::after { opacity: 1; animation: lantern-pulse 2.8s ease-in-out infinite; }
.region-panel { border-radius: 30px 22px 33px 24px / 23px 34px 21px 31px; }

/* 私密許願樹：留言像燈籠，但資料仍只留在本機 */
.hope-section {
  position: relative;
  overflow: hidden;
  background: linear-gradient(145deg, #4c392f, #6b4a38 58%, #2e463b);
}
.hope-section::before {
  position: absolute;
  inset: 0;
  opacity: .5;
  background: radial-gradient(circle at 72% 34%, rgba(255,205,117,.28), transparent 30rem);
  content: "";
}
.hope-section > .container { position: relative; z-index: 2; }
.hope-wall {
  position: relative;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  min-height: 540px;
  align-content: end;
  overflow: hidden;
  padding: 13rem 1.25rem 1.4rem;
  background-image: linear-gradient(to bottom, rgba(35,24,17,.02), rgba(35,24,17,.28)), url("wish-tree.webp");
  background-position: center;
  background-size: cover;
  border-radius: 40px 26px 46px 29px / 27px 48px 26px 43px;
}
.hope-note {
  min-height: 128px;
  padding: 2rem .85rem 1rem;
  background: rgba(255,239,182,.94);
  border-radius: 44% 44% 18px 18px / 22% 22% 18px 18px;
  box-shadow: 0 0 24px rgba(255,201,98,.38), 0 14px 30px rgba(31,16,9,.22);
  transform-origin: 50% -18px;
  animation: lantern-arrive .72s var(--book-ease) both, lantern-sway 5.5s ease-in-out 1s infinite alternate;
}
.hope-note::before {
  width: 2px;
  height: 2rem;
  top: -2rem;
  background: rgba(255,245,217,.75);
  transform: translateX(-50%);
}
.hope-note::after {
  position: absolute;
  left: 50%;
  bottom: -12px;
  width: 14px;
  height: 15px;
  background: linear-gradient(90deg, var(--book-gold), #fff2a9);
  clip-path: polygon(50% 100%, 0 0, 100% 0);
  content: "";
  transform: translateX(-50%);
}
.hope-note:nth-child(2n) { background: rgba(255,221,205,.94); animation-duration: .72s, 6.1s; }
.hope-note:nth-child(3n) { background: rgba(227,241,215,.94); animation-duration: .72s, 4.9s; }

/* 內容頁與動畫分鏡頁 */
.page-hero {
  background-image:
    radial-gradient(circle at 80% 18%, rgba(249,168,117,.22), transparent 27rem),
    radial-gradient(circle at 14% 84%, rgba(103,141,120,.12), transparent 24rem),
    repeating-linear-gradient(6deg, rgba(93,74,59,.018) 0 1px, transparent 1px 9px);
}
.page-hero-grid { min-height: 34rem; }
.page-mark { position: relative; }
.page-mark::after {
  position: absolute;
  inset: 8% -8% -3% 7%;
  z-index: -1;
  border: 2px dashed rgba(103,141,120,.24);
  border-radius: 44% 56% 51% 49%;
  content: "";
  animation: book-ring 18s linear infinite reverse;
}
.storybook-page-mark {
  overflow: hidden;
  width: min(100%, 580px);
  padding: .55rem;
  background: rgba(255,255,255,.58);
  border: 1px solid var(--book-line);
  border-radius: 36px 52px 31px 58px / 48px 34px 56px 37px;
  box-shadow: var(--book-shadow);
  transform: rotate(.7deg);
}
.storybook-page-mark img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 29px 45px 25px 50px / 40px 28px 48px 31px;
}
.film-poster {
  background:
    radial-gradient(circle at 70% 28%, rgba(255,222,146,.34), transparent 19rem),
    linear-gradient(138deg, #395d50, #7a4f3e 63%, #d78963);
}
.film-poster::after {
  position: absolute;
  inset: 0;
  opacity: .2;
  background: repeating-linear-gradient(8deg, transparent 0 7px, rgba(255,255,255,.14) 7px 8px);
  content: "";
}
.film-poster > div { position: relative; z-index: 2; }
.film-number { font-family: Georgia, serif; font-style: italic; }
.production-script summary { background: rgba(249,168,117,.1); }
.shot-table tr:nth-child(even) { background: rgba(103,141,120,.05); }
.story-article:nth-of-type(even) { background: rgba(249,168,117,.04); }
.article-body > p:first-of-type::first-letter {
  float: left;
  margin: .08em .12em 0 0;
  color: var(--book-plum);
  font-family: Georgia, "Noto Serif TC", serif;
  font-size: 3.3em;
  line-height: .82;
}
.embed-cue { border-radius: 24px 19px 28px 21px / 18px 29px 19px 27px; }
.embed-cue summary::before { content: "✦ "; }

@keyframes storybook-arrive {
  from { opacity: 0; transform: translateY(24px) rotate(-1deg) scale(.975); }
  to { opacity: 1; transform: translateY(0) rotate(0) scale(1); }
}
@keyframes story-rain { to { background-position: 76px 112px; } }
@keyframes book-ring { to { transform: rotate(360deg); } }
@keyframes lantern-pulse { 50% { transform: scale(1.16); opacity: .34; } }
@keyframes lantern-arrive { from { opacity: 0; transform: translateY(-25px) scale(.8); } to { opacity: 1; } }
@keyframes lantern-sway { from { transform: rotate(-1.5deg); } to { transform: rotate(1.5deg); } }

@media (max-width: 1040px) {
  .storybook-hero-visual { width: min(92vw, 780px); justify-self: center; }
  .hero { min-height: auto; }
  .hope-wall { padding-top: 10rem; }
}

@media (max-width: 720px) {
  .storybook-frame { border-radius: 25px 36px 24px 42px / 34px 25px 40px 27px; }
  .storybook-hero-visual .hero-note { max-width: 96%; font-size: .86rem; }
  .hope-wall { min-height: 520px; padding: 11rem .8rem 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hope-note { min-height: 116px; font-size: .9rem; }
  .impact-tree-stage { width: min(100%, 190px); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero::after,
  .page-mark::after,
  .storybook-rain,
  .map-pin[aria-pressed="true"]::after,
  .hope-note { animation: none !important; }
  .storybook-sun,
  .storybook-sprout { transition: none !important; }
}

body.high-contrast,
body[data-contrast="high"] {
  --book-paper: #fff;
  --book-paper-warm: #fff;
  --book-ink: #000;
  --book-leaf-deep: #073c2d;
  --book-plum: #5d0020;
}
body.high-contrast::before,
body[data-contrast="high"]::before { display: none; }
body.high-contrast .storybook-frame img,
body[data-contrast="high"] .storybook-frame img { filter: contrast(1.08); }

@media print {
  body::before,
  .storybook-rain,
  .storybook-sun,
  .storybook-sprout { display: none !important; }
  .storybook-frame,
  .film-card,
  .service-card { box-shadow: none; }
}