:root {
  --sun: #e87a5d;
  --sun-deep: #bd553e;
  --sand: #fdf6ed;
  --sand-deep: #f2dfc9;
  --forest: #4a6b5d;
  --forest-deep: #28483c;
  --honey: #e3aa52;
  --honey-soft: #fff0c9;
  --dawn: #fff8ef;
  --dawn-glow: rgba(255, 195, 105, .33);
  --warm-ring: rgba(232, 122, 93, .22);
  --ease-warm: cubic-bezier(.22, 1, .36, 1);
}

body {
  --perspective-accent: var(--forest);
  --perspective-deep: var(--forest-deep);
  --perspective-glow: rgba(74, 107, 93, .2);
}

body[data-perspective="supporter"] {
  --perspective-accent: var(--sun);
  --perspective-deep: var(--sun-deep);
  --perspective-glow: rgba(232, 122, 93, .24);
}

.hero {
  isolation: isolate;
  background:
    radial-gradient(circle at calc(18% + var(--hero-x, 0%)) calc(10% + var(--hero-y, 0%)), rgba(255, 209, 139, .4), transparent 32rem),
    radial-gradient(circle at 84% 26%, var(--perspective-glow), transparent 28rem),
    linear-gradient(135deg, #fffdf9 0%, var(--sand) 48%, #fff0e9 100%);
  transition: background 700ms var(--ease-warm);
}

.hero::before,
.hero::after {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  content: "";
  pointer-events: none;
  filter: blur(2px);
}

.hero::before {
  width: clamp(18rem, 38vw, 36rem);
  height: clamp(18rem, 38vw, 36rem);
  left: -12rem;
  top: -12rem;
  background: radial-gradient(circle, rgba(255, 215, 145, .48), rgba(255, 215, 145, 0) 68%);
  animation: warm-drift 12s ease-in-out infinite alternate;
}

.hero::after {
  width: clamp(20rem, 42vw, 42rem);
  height: clamp(20rem, 42vw, 42rem);
  right: -16rem;
  bottom: -18rem;
  background: radial-gradient(circle, var(--perspective-glow), rgba(255,255,255,0) 70%);
  animation: warm-drift-reverse 15s ease-in-out infinite alternate;
}

@keyframes warm-drift {
  to { transform: translate3d(3.5rem, 2rem, 0) scale(1.08); }
}

@keyframes warm-drift-reverse {
  to { transform: translate3d(-3rem, -1.2rem, 0) scale(.94); }
}

.hero-slogan {
  position: relative;
  display: inline-block;
  border-radius: .45rem;
  transition: color 400ms var(--ease-warm), text-shadow 400ms var(--ease-warm);
}

.hero-slogan::after {
  position: absolute;
  right: -.7em;
  top: -.36em;
  color: var(--sun);
  content: "♡";
  font-family: Georgia, serif;
  font-size: .42em;
  opacity: 0;
  transform: translateY(.35rem) rotate(-12deg) scale(.65);
  transition: opacity 350ms ease, transform 600ms var(--ease-warm);
}

.hero-slogan:hover,
.hero-slogan:focus-visible {
  color: var(--wine-deep);
  text-shadow: 0 .1em .8em rgba(232, 122, 93, .2);
  outline: 0;
}

.hero-slogan:hover::after,
.hero-slogan:focus-visible::after {
  opacity: 1;
  transform: translateY(0) rotate(8deg) scale(1);
}

.perspective-control {
  max-width: 690px;
  margin: 1.35rem 0 1.5rem;
  padding: .55rem;
  background: rgba(255,255,255,.76);
  border: 1px solid rgba(140, 47, 66, .13);
  border-radius: 1.2rem;
  box-shadow: 0 16px 42px rgba(93, 49, 43, .08);
  backdrop-filter: blur(14px);
}

.perspective-label {
  display: block;
  margin: .25rem .45rem .45rem;
  color: var(--ink-soft);
  font-size: .78rem;
  font-weight: 820;
  letter-spacing: .06em;
}

.perspective-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .4rem;
}

.perspective-tab {
  min-height: 3.25rem;
  padding: .7rem .9rem;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-radius: .88rem;
  cursor: pointer;
  font-size: .88rem;
  font-weight: 850;
  line-height: 1.4;
  text-align: left;
  transition: transform 250ms var(--ease-warm), background 300ms ease, color 300ms ease, box-shadow 300ms ease;
}

.perspective-tab:hover { transform: translateY(-2px); background: var(--rose-2); }
.perspective-tab[aria-selected="true"] { color: white; background: var(--perspective-deep); box-shadow: 0 10px 24px var(--perspective-glow); }

.perspective-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: center;
  margin-top: .55rem;
  padding: .9rem 1rem .75rem;
  color: var(--ink-soft);
}

.perspective-panel strong { display: block; color: var(--perspective-deep); font-size: 1rem; }
.perspective-panel p { margin: .15rem 0 0; font-size: .86rem; line-height: 1.6; }
.perspective-panel .mini-actions { display: flex; flex-wrap: wrap; gap: .45rem; }
.perspective-panel .mini-link { padding: .48rem .68rem; color: var(--perspective-deep); background: white; border: 1px solid currentColor; border-radius: .65rem; font-size: .78rem; font-weight: 850; text-decoration: none; white-space: nowrap; }

.section-sunlit {
  position: relative;
  overflow: hidden;
  padding: clamp(5.5rem, 10vw, 9rem) 0;
  background:
    radial-gradient(circle at 10% 10%, rgba(255, 207, 128, .24), transparent 27rem),
    linear-gradient(180deg, var(--dawn), var(--sand));
}

.section-sunlit::before {
  position: absolute;
  width: 22rem;
  height: 22rem;
  right: -9rem;
  top: -10rem;
  background: radial-gradient(circle, var(--dawn-glow), transparent 68%);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

.interactive-kicker {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .8rem;
  color: var(--forest-deep);
  font-size: .8rem;
  font-weight: 900;
  letter-spacing: .12em;
}

.interactive-kicker::before { width: 1.7rem; height: 1px; background: var(--honey); content: ""; }

.impact-lab {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr);
  gap: clamp(1.5rem, 5vw, 4rem);
  align-items: stretch;
}

.impact-controls,
.impact-result {
  padding: clamp(1.5rem, 4vw, 2.5rem);
  background: rgba(255, 255, 255, .9);
  border: 1px solid rgba(121, 73, 52, .15);
  border-radius: 1.8rem;
  box-shadow: 0 24px 60px rgba(105, 68, 47, .1);
}

.amount-display { display: flex; align-items: baseline; gap: .55rem; margin-bottom: .9rem; }
.amount-display span { color: var(--ink-soft); font-size: .88rem; font-weight: 750; }
.amount-display output { color: var(--wine); font-family: "Noto Serif TC", serif; font-size: clamp(2.3rem, 5vw, 4rem); font-weight: 900; line-height: 1; }

.impact-slider {
  width: 100%;
  height: 1.6rem;
  margin: .5rem 0;
  accent-color: var(--sun);
  cursor: grab;
}
.impact-slider:active { cursor: grabbing; }
.slider-scale { display: flex; justify-content: space-between; color: var(--ink-soft); font-size: .75rem; font-weight: 760; }
.amount-presets { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 1.2rem; }
.amount-presets button { padding: .55rem .78rem; color: var(--wine); background: var(--rose-2); border: 1px solid rgba(140,47,66,.18); border-radius: 999px; cursor: pointer; font-weight: 850; }
.amount-presets button:hover { color: white; background: var(--wine); }

.truth-note {
  margin-top: 1.35rem;
  padding: .9rem 1rem;
  color: #654c2d;
  background: #fff4d7;
  border: 1px solid #e9c57c;
  border-radius: .9rem;
  font-size: .82rem;
  line-height: 1.65;
}

.impact-result { position: relative; display: grid; align-content: center; min-height: 390px; overflow: hidden; }
.impact-orbit { position: absolute; width: 16rem; height: 16rem; right: -6rem; top: -6rem; border: 1px solid var(--warm-ring); border-radius: 50%; }
.impact-orbit::before,
.impact-orbit::after { position: absolute; inset: 2rem; border: 1px solid var(--warm-ring); border-radius: 50%; content: ""; }
.impact-orbit::after { inset: 4.2rem; background: rgba(232,122,93,.08); }
.impact-heart { display: grid; width: 4.6rem; height: 4.6rem; margin-bottom: 1.2rem; place-items: center; color: white; background: var(--sun); border-radius: 50%; box-shadow: 0 0 0 .7rem rgba(232,122,93,.1), 0 0 0 1.5rem rgba(232,122,93,.05); font-family: Georgia, serif; font-size: 2rem; transition: transform 500ms var(--ease-warm); }
.impact-result.is-changing .impact-heart { transform: scale(1.14) rotate(8deg); }
.impact-result h3 { max-width: 520px; margin-bottom: .7rem; font-size: clamp(1.7rem, 3.5vw, 2.6rem); }
.impact-result p { max-width: 580px; margin-bottom: 1.35rem; color: var(--ink-soft); }

.gratitude-dialog {
  width: min(540px, calc(100% - 2rem));
  padding: 0;
  color: var(--ink);
  background: transparent;
  border: 0;
}
.gratitude-dialog::backdrop { background: rgba(50, 32, 36, .55); backdrop-filter: blur(5px); }
.gratitude-card { position: relative; padding: 2rem; background: var(--sand); border: 1px solid rgba(140,47,66,.18); border-radius: 1.7rem; box-shadow: 0 30px 90px rgba(40,20,25,.26); text-align: center; overflow: hidden; }
.gratitude-card::before { position: absolute; inset: -40% auto auto -15%; width: 18rem; height: 18rem; background: radial-gradient(circle, rgba(255,197,98,.38), transparent 70%); border-radius: 50%; content: ""; }
.gratitude-icon { position: relative; display: grid; width: 4.4rem; height: 4.4rem; margin: 0 auto 1rem; place-items: center; color: white; background: var(--sun); border-radius: 50%; font-family: Georgia, serif; font-size: 2.2rem; }
.gratitude-card p { position: relative; color: var(--ink-soft); }
.dialog-close { position: relative; min-height: 2.9rem; padding: .65rem 1rem; color: white; background: var(--forest); border: 0; border-radius: .8rem; cursor: pointer; font-weight: 850; }

.heart-spark {
  position: fixed;
  z-index: 9999;
  color: var(--sun);
  pointer-events: none;
  font-family: Georgia, serif;
  font-size: 1.5rem;
  animation: heart-spark 900ms var(--ease-warm) both;
}

@keyframes heart-spark {
  from { opacity: 0; transform: translate(-50%, -50%) scale(.4); }
  25% { opacity: 1; }
  to { opacity: 0; transform: translate(calc(-50% + var(--spark-x)), calc(-50% + var(--spark-y))) scale(1.2) rotate(12deg); }
}

.map-layout { display: grid; grid-template-columns: minmax(290px, .78fr) minmax(0, 1.22fr); gap: clamp(1.5rem, 5vw, 4rem); align-items: center; }
.map-canvas { position: relative; min-height: 620px; overflow: hidden; background: radial-gradient(circle at 50% 45%, rgba(255,211,135,.3), transparent 19rem); border: 1px solid var(--line); border-radius: 2rem; }
.taiwan-map { position: absolute; inset: 4% 12%; width: 76%; height: 92%; filter: drop-shadow(0 25px 35px rgba(45,76,61,.18)); }
.taiwan-map path { fill: rgba(74,107,93,.13); stroke: var(--forest); stroke-width: 4; }
.map-pin { position: absolute; display: grid; min-width: 3.3rem; min-height: 3.3rem; padding: .35rem; place-items: center; color: var(--forest-deep); background: white; border: 2px solid var(--forest); border-radius: 50%; box-shadow: 0 10px 25px rgba(40,72,60,.16); cursor: pointer; font-size: .72rem; font-weight: 900; transition: transform 300ms var(--ease-warm), background 300ms ease, color 300ms ease, box-shadow 300ms ease; }
.map-pin:hover { transform: translateY(-4px) scale(1.04); }
.map-pin[aria-pressed="true"] { color: white; background: var(--sun); border-color: var(--sun); box-shadow: 0 0 0 .7rem rgba(232,122,93,.12), 0 16px 32px rgba(154,74,55,.24); }
.pin-north { left: 54%; top: 9%; }
.pin-northwest { left: 39%; top: 23%; }
.pin-central { left: 38%; top: 41%; }
.pin-south { left: 27%; top: 70%; }
.pin-east { left: 58%; top: 48%; }
.pin-islands { left: 10%; top: 47%; }

.region-panel { padding: clamp(1.5rem, 4vw, 2.5rem); background: var(--paper); border: 1px solid var(--line); border-radius: 1.8rem; box-shadow: var(--shadow-soft); }
.region-panel-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.region-panel h3 { margin-top: .65rem; font-size: clamp(1.8rem, 4vw, 2.8rem); }
.region-counties { color: var(--forest-deep); font-weight: 830; }
.region-facts { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin: 1.25rem 0; }
.region-fact { padding: 1rem; background: var(--sand); border: 1px solid var(--sand-deep); border-radius: .9rem; }
.region-fact strong { display: block; color: var(--wine); }
.region-fact span { color: var(--ink-soft); font-size: .82rem; }

.hope-section { background: linear-gradient(150deg, #5a3d2c, #76523a 54%, #4d3528); color: white; }
.hope-section .eyebrow { color: #ffd995; }
.hope-section .eyebrow::before { background: #ffd995; }
.hope-section .section-lead { color: rgba(255,255,255,.74); }
.hope-layout { display: grid; grid-template-columns: minmax(270px, .72fr) minmax(0, 1.28fr); gap: clamp(1.5rem, 5vw, 4rem); align-items: start; }
.hope-form { padding: 1.45rem; color: var(--ink); background: rgba(255, 249, 237, .96); border: 1px solid rgba(255,255,255,.24); border-radius: 1.4rem; box-shadow: 0 22px 50px rgba(24,13,8,.2); }
.hope-form label { display: block; margin-bottom: .5rem; font-weight: 850; }
.hope-form textarea { width: 100%; min-height: 120px; resize: vertical; padding: .85rem; color: var(--ink); background: white; border: 1px solid rgba(90,61,44,.28); border-radius: .8rem; font: inherit; line-height: 1.6; }
.hope-form small { display: block; margin: .55rem 0 1rem; color: var(--ink-soft); }
.hope-form-actions { display: flex; flex-wrap: wrap; gap: .55rem; }
.hope-submit,
.hope-clear { min-height: 2.9rem; padding: .65rem .85rem; border-radius: .75rem; cursor: pointer; font-weight: 850; }
.hope-submit { color: white; background: var(--sun-deep); border: 0; }
.hope-clear { color: var(--ink-soft); background: transparent; border: 1px solid rgba(90,61,44,.3); }
.hope-wall { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; min-height: 360px; padding: 1.25rem; background: repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 2px, transparent 2px 64px), rgba(35,20,12,.14); border: 1px solid rgba(255,255,255,.16); border-radius: 1.6rem; box-shadow: inset 0 0 60px rgba(29,15,9,.2); }
.hope-note { position: relative; align-self: start; min-height: 150px; padding: 2rem 1rem 1rem; color: #4d382c; background: #fff0bd; border: 1px solid rgba(99,66,33,.18); border-radius: .35rem 1rem .5rem 1rem; box-shadow: 0 15px 28px rgba(31,16,9,.18); transform: rotate(var(--note-rotate, -1deg)); animation: note-arrive 650ms var(--ease-warm) both; }
.hope-note:nth-child(2n) { --note-rotate: 1.4deg; background: #ffe1d6; }
.hope-note:nth-child(3n) { --note-rotate: -.5deg; background: #e8f1df; }
.hope-note::before { position: absolute; width: 3.4rem; height: 1.1rem; left: 50%; top: -.45rem; background: rgba(255,220,130,.72); content: ""; transform: translateX(-50%) rotate(-2deg); }
.hope-note p { margin: 0 0 .85rem; font-family: "Noto Serif TC", serif; font-size: 1.03rem; font-weight: 720; line-height: 1.75; }
.hope-note small { color: #7b6252; font-size: .72rem; }
@keyframes note-arrive { from { opacity: 0; transform: translateY(-1.5rem) rotate(-5deg) scale(.9); } }

.reveal-on-scroll { opacity: 0; transform: translateY(1.4rem); transition: opacity 700ms ease, transform 800ms var(--ease-warm); }
.reveal-on-scroll.is-visible { opacity: 1; transform: translateY(0); }
.warm-hover { transition: transform 320ms var(--ease-warm), box-shadow 320ms ease, border-color 320ms ease; }
.warm-hover:hover { transform: translateY(-6px); border-color: rgba(232,122,93,.35); box-shadow: 0 24px 55px rgba(105,55,44,.14); }

.interactive-teaser { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1.25rem; }
.interactive-teaser-card { position: relative; min-height: 280px; padding: 2rem; overflow: hidden; color: white; background: linear-gradient(145deg, var(--forest-deep), #547f6c); border-radius: 1.7rem; text-decoration: none; box-shadow: var(--shadow); }
.interactive-teaser-card:nth-child(2) { background: linear-gradient(145deg, var(--wine-deep), var(--sun)); }
.interactive-teaser-card::after { position: absolute; width: 12rem; height: 12rem; right: -4rem; bottom: -5rem; border: 1px solid rgba(255,255,255,.22); border-radius: 50%; content: ""; transition: transform 500ms var(--ease-warm); }
.interactive-teaser-card:hover::after { transform: scale(1.25); }
.interactive-teaser-card p { max-width: 520px; color: rgba(255,255,255,.82); }
.interactive-teaser-card .badge { color: white; background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.25); }

.immersive-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, .55fr);
  gap: 1.25rem;
  margin-top: 1.6rem;
}

.immersive-intro > div {
  padding: 1.2rem;
  background: rgba(255,255,255,.78);
  border: 1px solid var(--line);
  border-radius: 1.15rem;
}

.embed-cue {
  margin: 2rem 0;
  overflow: hidden;
  background: linear-gradient(135deg, var(--sand), #fff);
  border: 1px solid var(--sand-deep);
  border-radius: 1.1rem;
}

.embed-cue > summary {
  position: relative;
  padding: 1rem 3rem 1rem 1.1rem;
  color: var(--forest-deep);
  cursor: pointer;
  font-weight: 880;
  list-style: none;
}

.embed-cue > summary::-webkit-details-marker { display: none; }
.embed-cue > summary::after { position: absolute; right: 1.1rem; top: 50%; content: "+"; font-size: 1.4rem; transform: translateY(-50%); transition: transform 250ms ease; }
.embed-cue[open] > summary::after { transform: translateY(-50%) rotate(45deg); }
.embed-cue-content { padding: 0 1.1rem 1.1rem; color: var(--ink-soft); }
.embed-cue-content p:last-child { margin-bottom: 0; }
.media-placeholder { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem; background: white; border: 1px dashed rgba(74,107,93,.35); border-radius: .85rem; }
.media-placeholder button { min-height: 2.7rem; padding: .6rem .8rem; color: var(--ink-soft); background: #eeeae4; border: 1px solid #d2cac0; border-radius: .7rem; font-weight: 800; cursor: not-allowed; }

.story-contrast {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .9rem;
  margin: 2rem 0;
}
.contrast-side { padding: 1.2rem; border: 1px solid var(--line); border-radius: 1rem; }
.contrast-side.before { background: #f4eeee; }
.contrast-side.after { background: #eaf3ed; }
.contrast-side span { display: block; margin-bottom: .35rem; color: var(--ink-soft); font-size: .76rem; font-weight: 900; letter-spacing: .08em; }
.contrast-side strong { display: block; font-family: "Noto Serif TC", serif; font-size: 1.25rem; }

.story-data-strip { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: .7rem; margin: 2rem 0; }
.story-data-strip div { padding: 1rem; background: var(--paper); border: 1px solid var(--line); border-radius: .9rem; }
.story-data-strip strong { display: block; color: var(--wine); }
.story-data-strip small { color: var(--ink-soft); }

.film-interaction {
  margin-top: 1.1rem;
  padding: 1rem;
  background: var(--sand);
  border: 1px solid var(--sand-deep);
  border-radius: .9rem;
}
.film-interaction strong { display: block; color: var(--forest-deep); }
.film-interaction p { margin-bottom: .7rem; }

.truth-gate-list { display: grid; gap: .7rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.truth-gate-list li { display: flex; gap: .65rem; align-items: flex-start; }
.truth-gate-list li::before { flex: 0 0 auto; color: var(--forest); content: "✓"; font-weight: 900; }

@media (max-width: 920px) {
  .impact-lab,
  .map-layout,
  .hope-layout { grid-template-columns: 1fr; }
  .map-canvas { min-height: 560px; }
  .hope-wall { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .immersive-intro { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .perspective-switch { grid-template-columns: 1fr; }
  .perspective-panel { grid-template-columns: 1fr; }
  .perspective-panel .mini-actions { width: 100%; }
  .perspective-panel .mini-link { flex: 1 1 8rem; text-align: center; }
  .impact-result { min-height: 330px; }
  .map-canvas { min-height: 510px; }
  .map-pin { min-width: 2.9rem; min-height: 2.9rem; font-size: .65rem; }
  .region-facts,
  .hope-wall,
  .interactive-teaser,
  .story-contrast,
  .story-data-strip { grid-template-columns: 1fr; }
  .hope-note { min-height: 130px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero::before,
  .hero::after,
  .hope-note { animation: none !important; }
  .reveal-on-scroll { opacity: 1; transform: none; }
}

@media print {
  .perspective-control,
  .impact-controls,
  .gratitude-dialog,
  .hope-form,
  .map-canvas { display: none !important; }
  .reveal-on-scroll { opacity: 1; transform: none; }
  .hope-section { color: #000; background: #fff; }
}