/* =========================================================
   STORIES PAGE
   Story lists, story cards, main story showcase, story effects,
   and responsive Stories page layouts split out of css/components.css.
   ========================================================= */

/* =============================
   EBOOK LIST
============================= */

.story-subheading {
  margin: 1.35rem auto 0.95rem;
}

.ebook-list {
  list-style: none;
  padding: 1rem;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}

.main-story-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  --story-gap: 1.1rem;
  gap: var(--story-gap);
  max-width: 1500px;
}

.main-story-list > li {
  min-width: 0;
  flex: 0 1 calc((100% - (4 * var(--story-gap))) / 5);
  max-width: calc((100% - (4 * var(--story-gap))) / 5);
}

#ebooks .story-cover {
  width: 100%;
  max-width: 200px;
  height: auto;
  object-fit: contain;
}
.other-stories-section {
  margin-top: 2.1rem;
}

.other-story-list {
  display: grid;
  grid-template-columns: minmax(0, 420px);
  justify-content: center;
  max-width: 460px;
  gap: 1rem;
  padding-top: 0.2rem;
}

#ebooks li {
  background: var(--card-bg);
  padding: 1rem;
  border-radius: 8px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100%;
}

#ebooks li h4 {
  margin-bottom: 0.55rem;
  line-height: 1.35;
}

#ebooks li p {
  margin: 0.2rem auto 0.95rem;
  line-height: 1.55;
}

.fancy-btn {
  background: transparent;
  border: 2px solid #8C8C8C;
  color: #fff;
  padding: 0.6rem 1.2rem;
  border-radius: 0;
  cursor: pointer;
  font-weight: bold;
  transition: background 0.3s ease, color 0.3s ease;
}

.fancy-btn:hover {
  background: #636363;
  color: #fff;
}

#ebooks li .fancy-btn {
  margin-top: auto;
  padding: 0.7rem 1.15rem;
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#ebooks img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto 1rem;
  border-radius: 6px;
}

/* =============================
   STORY SECTION
============================= */

#story .page {
  background: var(--card-bg);
  padding: 1.5rem;
  border-radius: 8px;
  margin-top: 1rem;
  line-height: 1.6;
  position: relative;
  overflow: hidden;
}

.pager {
  display: flex;
  justify-content: space-between;
  margin-top: 1rem;
}

.pager button {
  background: var(--accent);
  border: none;
  color: #000;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  cursor: pointer;
}
.contact-email-btn:hover {
  background: var(--accent) !important;
  color: #000 !important;
}





/* =============================
   STORIES PAGE REWORK
============================= */

body[data-page="stories"] #ebooks {
  max-width: 1500px;
  margin-inline: auto;
  padding-top: clamp(1.05rem, 2.4vw, 1.8rem);
}

body[data-page="stories"] #ebooks .stories-hero {
  max-width: 860px;
  margin: 0 auto 1.6rem;
  padding: clamp(1rem, 2.2vw, 1.45rem);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background:
    radial-gradient(circle at 86% 12%, rgba(124, 103, 95, 0.22), transparent 46%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.66), rgba(0, 0, 0, 0.46));
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.28);
  text-align: center;
}

body[data-page="stories"] #ebooks .stories-title {
  margin-bottom: 0.6rem;
  line-height: 1.2;
  text-wrap: balance;
}

body[data-page="stories"] #ebooks .stories-lead {
  margin: 0 auto;
  max-width: 68ch;
  color: rgba(255, 255, 255, 0.92);
}

body[data-page="stories"] #ebooks .stories-group {
  margin: 0 auto 1.65rem;
  padding: clamp(1rem, 2vw, 1.45rem);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background:
    radial-gradient(circle at 88% 10%, rgba(124, 103, 95, 0.22), transparent 48%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.38));
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.25);
}

body[data-page="stories"] #ebooks .stories-group--unified {
  border-color: rgba(255, 225, 182, 0.16);
  background:
    radial-gradient(circle at 84% 8%, rgba(166, 119, 77, 0.2), transparent 42%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.58), rgba(0, 0, 0, 0.4));
  box-shadow:
    0 18px 38px rgba(0, 0, 0, 0.28),
    0 0 0 1px rgba(255, 243, 217, 0.04) inset;
}

body[data-page="stories"] #ebooks .stories-group-head {
  text-align: center;
  margin-bottom: 1rem;
}

body[data-page="stories"] #ebooks .stories-group-head--intro {
  display: grid;
  justify-items: center;
  width: 100%;
  margin-bottom: clamp(1rem, 2vw, 1.35rem);
  text-align: center;
}

body[data-page="stories"] #ebooks .stories-group-kicker {
  display: block;
  width: 100%;
  margin: 0;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 224, 156, 0.94);
  text-align: center;
}

body[data-page="stories"] #ebooks .stories-group-head .story-subheading {
  margin: 0;
}

body[data-page="stories"] #ebooks .stories-group-note {
  margin: 0.45rem auto 0;
  color: rgba(255, 255, 255, 0.82);
}

body[data-page="stories"] #ebooks .stories-group--unified .stories-title {
  display: block;
  width: 100%;
  margin: 0.28rem auto 0;
  font-size: clamp(1.7rem, 3.6vw, 2.28rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: rgba(255, 246, 230, 0.98);
  text-shadow: 0 10px 24px rgba(0, 0, 0, 0.24);
  text-align: center;
}

body[data-page="stories"] #ebooks .stories-group--unified .stories-lead {
  display: block;
  width: 100%;
  margin: 0.5rem auto 0;
  max-width: 65ch;
  color: rgba(255, 255, 255, 0.92);
  font-size: clamp(0.95rem, 2.4vw, 1.05rem);
  line-height: 1.6;
  text-align: center;
}

body[data-page="stories"] #ebooks .main-story-list,
body[data-page="stories"] #ebooks .other-story-list {
  list-style: none;
  width: 100%;
  max-width: 1500px;
  padding: 0;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  --story-gap: 1rem;
  gap: var(--story-gap);
}

body[data-page="stories"] #ebooks .main-story-list > .story-card,
body[data-page="stories"] #ebooks .other-story-list > .story-card {
  min-width: 0;
  flex: 0 1 calc((100% - (4 * var(--story-gap))) / 5);
  max-width: calc((100% - (4 * var(--story-gap))) / 5);
}

body[data-page="stories"] #ebooks .story-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-height: 100%;
  padding: 0.85rem;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.68), rgba(0, 0, 0, 0.82)),
    radial-gradient(circle at top right, rgba(124, 103, 95, 0.18), transparent 60%);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

body[data-page="stories"] #ebooks .story-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 255, 255, 0.28);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.4);
}

body[data-page="stories"] #ebooks .story-tag {
  align-self: flex-start;
  margin: 0;
  padding: 0.28rem 0.55rem;
  border-radius: 999px;
  font-size: 0.73rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

body[data-page="stories"] #ebooks .story-tag-live {
  background: rgba(64, 186, 98, 0.18);
  color: #8ef0a5;
  border: 1px solid rgba(64, 186, 98, 0.45);
}

body[data-page="stories"] #ebooks .story-tag-planned {
  background: rgba(255, 255, 255, 0.11);
  color: #e4e4e4;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

body[data-page="stories"] #ebooks .story-card h4 {
  margin: 0.55rem 0 0.45rem;
  line-height: 1.35;
  font-size: 1rem;
  text-wrap: balance;
}

body[data-page="stories"] #ebooks .story-media {
  width: 100%;
  aspect-ratio: 3 / 4;
  margin-bottom: 0.75rem;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(12, 12, 12, 0.95);
  overflow: hidden;
}

body[data-page="stories"] #ebooks .story-media .story-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  margin: 0;
  border-radius: 0;
}

body[data-page="stories"] #ebooks .other-story-list .story-media .story-cover {
  max-width: none;
  object-fit: cover;
  object-position: center;
}

body[data-page="stories"] #ebooks .story-media[data-protected-cover] {
  position: relative;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

body[data-page="stories"] #ebooks .story-media[data-protected-cover] .story-cover {
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
}

body[data-page="stories"] #ebooks .story-media[data-protected-cover]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: transparent;
}

body[data-page="stories"] #ebooks .story-media-placeholder {
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 28%, rgba(255, 236, 188, 0.14), transparent 34%),
    linear-gradient(180deg, rgba(20, 20, 20, 0.96), rgba(6, 6, 6, 0.98));
  border-style: dashed;
}

body[data-page="stories"] #ebooks .story-media-placeholder span {
  padding: 0.8rem;
  color: rgba(255, 239, 205, 0.86);
  font-size: clamp(1rem, 2vw, 1.28rem);
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: center;
}

body[data-page="stories"] #ebooks .story-card-comingsoon {
  background:
    linear-gradient(180deg, rgba(8, 8, 8, 0.76), rgba(0, 0, 0, 0.9)),
    radial-gradient(circle at top center, rgba(255, 228, 171, 0.12), transparent 52%);
}

body[data-page="stories"] #ebooks .story-desc {
  margin: 0 0 0.95rem;
  line-height: 1.45;
  font-size: 0.92rem;
}

body[data-page="stories"] #ebooks .story-btn {
  --story-button-accent: 255, 224, 156;
  margin-top: auto;
  width: 100%;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 8px;
  border: 3px solid rgba(var(--story-button-accent), 0.9);
  background:
    linear-gradient(90deg, rgba(var(--story-button-accent), 0.24) 0 0.48rem, transparent 0.48rem),
    linear-gradient(180deg, rgba(20, 18, 15, 0.98), rgba(8, 8, 8, 0.98));
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.08) inset,
    0 12px 22px rgba(0, 0, 0, 0.34);
  color: #fffaf0;
  font-family: "Montserrat", sans-serif;
  font-size: 0.96rem;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1.28;
  text-decoration: none;
  text-shadow: none;
  white-space: normal;
  overflow-wrap: anywhere;
}

body[data-page="stories"] #ebooks .story-btn:hover,
body[data-page="stories"] #ebooks .story-btn:focus-visible {
  border-color: rgba(255, 255, 255, 0.98);
  background:
    linear-gradient(90deg, rgba(var(--story-button-accent), 0.42) 0 0.56rem, transparent 0.56rem),
    linear-gradient(180deg, rgba(35, 32, 27, 0.99), rgba(12, 12, 12, 0.99));
  color: #fff;
  text-decoration: underline;
  text-decoration-thickness: 0.12em;
  text-underline-offset: 0.18em;
}

body[data-page="stories"] #ebooks .story-btn:focus-visible {
  outline: 3px solid rgba(255, 255, 255, 0.98);
  outline-offset: 4px;
}

body[data-page="stories"] #ebooks .story-btn-disabled,
body[data-page="stories"] #ebooks .story-btn:disabled {
  border-color: rgba(255, 255, 255, 0.58);
  color: rgba(255, 255, 255, 0.92);
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.09) 0 8px, rgba(255, 255, 255, 0.03) 8px 16px),
    linear-gradient(180deg, rgba(20, 20, 20, 0.98), rgba(7, 7, 7, 0.98));
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.08) inset,
    0 8px 18px rgba(0, 0, 0, 0.28);
  cursor: not-allowed;
  opacity: 1;
}

body[data-page="stories"] #ebooks .story-btn-disabled:hover,
body[data-page="stories"] #ebooks .story-btn:disabled:hover {
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.09) 0 8px, rgba(255, 255, 255, 0.03) 8px 16px),
    linear-gradient(180deg, rgba(20, 20, 20, 0.98), rgba(7, 7, 7, 0.98));
  color: rgba(255, 255, 255, 0.92);
  text-decoration: none;
}

body[data-page="stories"][data-stories-view="other"] #ebooks .other-stories-section {
  margin-top: 0;
}

body[data-page="stories"] #ebooks .stories-group--main-showcase {
  --active-story-glow: rgba(153, 93, 255, 0.36);
  --active-story-border: rgba(201, 170, 255, 0.46);
  background:
    radial-gradient(circle at 50% -10%, var(--active-story-glow), transparent 44%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.66), rgba(0, 0, 0, 0.42));
  border-color: var(--active-story-border);
  transition: border-color 0.28s ease, background 0.28s ease, box-shadow 0.28s ease;
}

body[data-page="stories"] #ebooks .stories-group--main-showcase[data-active-story="chapter-one"] {
  --active-story-glow: rgba(88, 196, 96, 0.34);
  --active-story-border: rgba(140, 228, 145, 0.46);
}

body[data-page="stories"] #ebooks .stories-group--main-showcase[data-active-story="chapter-two"] {
  --active-story-glow: rgba(244, 75, 53, 0.38);
  --active-story-border: rgba(255, 132, 103, 0.48);
}

body[data-page="stories"] #ebooks .stories-group--main-showcase[data-active-story="chapter-three"] {
  --active-story-glow: rgba(116, 232, 128, 0.28);
  --active-story-border: rgba(181, 128, 255, 0.54);
}

body[data-page="stories"] #ebooks .stories-group--main-showcase[data-active-story="chapter-four"] {
  --active-story-glow: rgba(85, 195, 232, 0.28);
  --active-story-border: rgba(152, 213, 210, 0.5);
}

body[data-page="stories"] #ebooks .main-story-showcase {
  position: relative;
  width: min(100%, 1160px);
  margin-inline: auto;
}

body[data-page="stories"] #ebooks .main-story-arrow {
  position: absolute;
  top: 50%;
  z-index: 8;
  display: grid;
  place-items: center;
  width: clamp(3rem, 5.3vw, 4.2rem);
  height: clamp(3rem, 5.3vw, 4.2rem);
  border: 1px solid rgba(255, 241, 208, 0.5);
  border-radius: 999px;
  background:
    radial-gradient(circle at 50% 28%, rgba(255, 241, 205, 0.26), transparent 56%),
    rgba(5, 5, 5, 0.72);
  color: rgba(255, 250, 235, 0.98);
  cursor: pointer;
  transform: translateY(-50%);
  box-shadow:
    0 14px 30px rgba(0, 0, 0, 0.4),
    0 0 24px rgba(255, 228, 166, 0.14);
  transition: opacity 0.18s ease, transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

body[data-page="stories"] #ebooks .main-story-arrow::before {
  position: absolute;
  left: 50%;
  top: 50%;
  color: rgba(255, 250, 235, 0.98);
  font-size: clamp(2.7rem, 5vw, 4rem);
  font-weight: 800;
  line-height: 1;
  transform: translate(-50%, -68%);
}

body[data-page="stories"] #ebooks .main-story-arrow--prev::before {
  content: "\2039";
}

body[data-page="stories"] #ebooks .main-story-arrow--next::before {
  content: "\203A";
}

body[data-page="stories"] #ebooks .main-story-arrow--prev {
  left: clamp(0.4rem, 1.4vw, 0.82rem);
}

body[data-page="stories"] #ebooks .main-story-arrow--next {
  right: clamp(0.4rem, 1.4vw, 0.82rem);
  animation: storyArrowNudge 1.7s ease-in-out infinite;
}

body[data-page="stories"] #ebooks .main-story-arrow:hover,
body[data-page="stories"] #ebooks .main-story-arrow:focus-visible {
  border-color: rgba(255, 244, 219, 0.88);
  background:
    radial-gradient(circle at 50% 28%, rgba(255, 241, 205, 0.34), transparent 56%),
    rgba(10, 9, 7, 0.86);
  transform: translateY(-50%) scale(1.06);
}

body[data-page="stories"] #ebooks .main-story-arrow:focus-visible {
  outline: 2px solid rgba(255, 230, 179, 0.95);
  outline-offset: 3px;
}

body[data-page="stories"] #ebooks .main-story-arrow:disabled {
  opacity: 0;
  pointer-events: none;
}

body[data-page="stories"] #ebooks .main-story-viewport {
  display: flex;
  gap: clamp(0.76rem, 1.6vw, 1.1rem);
  width: 100%;
  padding: clamp(0.52rem, 1.2vw, 0.78rem);
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: clamp(0.52rem, 1.2vw, 0.78rem);
  scrollbar-width: none;
  cursor: grab;
  touch-action: pan-x pan-y pinch-zoom;
}

body[data-page="stories"] #ebooks .main-story-viewport::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

body[data-page="stories"] #ebooks .main-story-viewport.is-pointer-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
}

body[data-page="stories"] #ebooks .main-story-panel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(230px, 0.86fr) minmax(260px, 1fr);
  align-items: stretch;
  gap: clamp(0.78rem, 1.9vw, 1.28rem);
  flex: 0 0 min(100%, 980px);
  min-height: clamp(540px, 74svh, 760px);
  padding: clamp(0.84rem, 1.8vw, 1.25rem);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 20px;
  scroll-snap-align: center;
  overflow: hidden;
  isolation: isolate;
  box-shadow:
    0 22px 42px rgba(0, 0, 0, 0.32),
    0 0 0 1px rgba(255, 255, 255, 0.05) inset;
  opacity: 0.64;
  transform: scale(0.975);
  transition: opacity 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

body[data-page="stories"] #ebooks .main-story-panel.is-active {
  opacity: 1;
  transform: scale(1);
  border-color: rgba(255, 245, 220, 0.42);
}

body[data-page="stories"] #ebooks .story-theme-prologue {
  background:
    radial-gradient(circle at 50% 0%, rgba(190, 137, 255, 0.42), transparent 38%),
    linear-gradient(180deg, rgba(57, 18, 86, 0.98), rgba(16, 7, 30, 0.98));
}

body[data-page="stories"] #ebooks .story-theme-chapter-one {
  background:
    radial-gradient(circle at 50% 100%, rgba(134, 230, 104, 0.32), transparent 42%),
    linear-gradient(180deg, rgba(33, 92, 46, 0.98), rgba(7, 31, 15, 0.98));
}

body[data-page="stories"] #ebooks .story-theme-chapter-two {
  background:
    radial-gradient(circle at 50% 56%, rgba(255, 159, 81, 0.36), transparent 38%),
    linear-gradient(180deg, rgba(106, 20, 15, 0.98), rgba(26, 5, 4, 0.99));
}

body[data-page="stories"] #ebooks .story-theme-chapter-three {
  background:
    linear-gradient(115deg, rgba(30, 95, 39, 0.96), rgba(24, 8, 44, 0.9) 48%, rgba(74, 35, 122, 0.98));
}

body[data-page="stories"] #ebooks .story-theme-chapter-four {
  background: linear-gradient(180deg, rgba(7, 10, 12, 0.99), rgba(3, 4, 5, 0.99));
}

body[data-page="stories"] #ebooks .story-effect {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

body[data-page="stories"] #ebooks .story-effect::before,
body[data-page="stories"] #ebooks .story-effect::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

body[data-page="stories"] #ebooks .story-effect--storm {
  z-index: 0;
  background:
    radial-gradient(circle at 50% -10%, rgba(224, 206, 255, 0.42), transparent 34%),
    radial-gradient(circle at 22% 80%, rgba(97, 45, 145, 0.2), transparent 34%),
    radial-gradient(circle at 80% 74%, rgba(124, 62, 176, 0.2), transparent 36%),
    linear-gradient(180deg, rgba(120, 77, 167, 0.34), rgba(70, 27, 116, 0.2) 58%, transparent 100%);
  animation: storyStormPulse 5.2s ease-in-out infinite;
}

body[data-page="stories"] #ebooks .story-effect--storm::before {
  inset: 0;
  background:
    radial-gradient(circle at 24% 8%, rgba(226, 197, 255, 0.34), transparent 22%),
    radial-gradient(circle at 62% 2%, rgba(168, 105, 229, 0.28), transparent 26%),
    radial-gradient(circle at 88% 12%, rgba(218, 178, 255, 0.24), transparent 20%);
  opacity: 0.62;
  animation: storyStormTopGlow 6.4s ease-in-out infinite;
}

body[data-page="stories"] #ebooks .story-effect--storm::after {
  inset: -8% -4% -8%;
  z-index: 0;
  background:
    radial-gradient(ellipse 1.6px 7px at 18px 17px, rgba(239, 225, 255, 0.52) 0 72%, transparent 78%),
    radial-gradient(ellipse 1.25px 6px at 52px 38px, rgba(226, 202, 250, 0.44) 0 70%, transparent 78%),
    radial-gradient(ellipse 1.4px 6.5px at 79px 62px, rgba(210, 180, 241, 0.4) 0 70%, transparent 78%),
    radial-gradient(ellipse 1px 5px at 118px 83px, rgba(197, 163, 231, 0.34) 0 68%, transparent 78%),
    radial-gradient(ellipse 0.9px 4.5px at 163px 111px, rgba(181, 143, 221, 0.28) 0 66%, transparent 78%);
  background-size: 68px 96px, 91px 131px, 117px 169px, 149px 211px, 193px 257px;
  background-position: 0 0, 21px -65px, 47px -104px, 76px -128px, 112px -173px;
  opacity: 0.62;
  transform: skewX(-10deg);
  -webkit-mask-image: linear-gradient(180deg, transparent 0 20%, rgba(0, 0, 0, 0.18) 28%, #000 42%);
  mask-image: linear-gradient(180deg, transparent 0 20%, rgba(0, 0, 0, 0.18) 28%, #000 42%);
  will-change: background-position;
  animation: storyStormRain 0.68s linear infinite;
}

body[data-page="stories"] #ebooks .story-storm-clouds,
body[data-page="stories"] #ebooks .story-lightning {
  position: absolute;
  pointer-events: none;
}

body[data-page="stories"] #ebooks .story-storm-clouds {
  top: 0;
  right: -3%;
  left: -3%;
  z-index: 1;
  height: 28%;
  background:
    radial-gradient(circle at 3% 48%, #542674 0 11%, transparent 11.6%),
    radial-gradient(circle at 15% 25%, #74459a 0 14%, transparent 14.6%),
    radial-gradient(circle at 29% 52%, #48215f 0 16%, transparent 16.6%),
    radial-gradient(circle at 43% 20%, #8051a5 0 15%, transparent 15.6%),
    radial-gradient(circle at 57% 50%, #52276d 0 16%, transparent 16.6%),
    radial-gradient(circle at 71% 22%, #75469a 0 15%, transparent 15.6%),
    radial-gradient(circle at 85% 51%, #492161 0 16%, transparent 16.6%),
    radial-gradient(circle at 98% 25%, #704091 0 13%, transparent 13.6%);
  filter: drop-shadow(0 12px 16px rgba(17, 5, 28, 0.62));
  opacity: 0.96;
  transform: translateX(-1.5%);
  will-change: transform;
  animation: storyPurpleCloudsDrift 12s ease-in-out infinite;
}

body[data-page="stories"] #ebooks .story-storm-clouds::before,
body[data-page="stories"] #ebooks .story-storm-clouds::after {
  content: "";
  position: absolute;
  inset: 12% 4% auto;
  height: 82%;
  background:
    radial-gradient(circle at 9% 67%, rgba(177, 114, 219, 0.88) 0 9%, transparent 9.7%),
    radial-gradient(circle at 23% 40%, rgba(70, 32, 94, 0.98) 0 14%, transparent 14.7%),
    radial-gradient(circle at 40% 66%, rgba(118, 65, 151, 0.96) 0 15%, transparent 15.7%),
    radial-gradient(circle at 58% 39%, rgba(62, 28, 86, 0.98) 0 14%, transparent 14.7%),
    radial-gradient(circle at 75% 65%, rgba(127, 70, 161, 0.94) 0 15%, transparent 15.7%),
    radial-gradient(circle at 92% 43%, rgba(165, 101, 207, 0.82) 0 10%, transparent 10.7%);
  filter: blur(1.5px);
  opacity: 0.86;
  animation: storyPurpleCloudsBillow 8.5s ease-in-out infinite;
}

body[data-page="stories"] #ebooks .story-storm-clouds::after {
  inset: 48% 8% auto;
  height: 48%;
  background:
    radial-gradient(circle at 12% 46%, rgba(34, 13, 52, 0.96) 0 12%, transparent 12.8%),
    radial-gradient(circle at 33% 62%, rgba(76, 35, 101, 0.98) 0 17%, transparent 17.8%),
    radial-gradient(circle at 57% 43%, rgba(37, 15, 57, 0.98) 0 15%, transparent 15.8%),
    radial-gradient(circle at 78% 63%, rgba(86, 42, 112, 0.94) 0 17%, transparent 17.8%),
    radial-gradient(circle at 96% 45%, rgba(43, 17, 63, 0.96) 0 11%, transparent 11.8%);
  filter: blur(2.5px);
  opacity: 0.82;
  animation-duration: 11.5s;
  animation-delay: -4s;
}

body[data-page="stories"] #ebooks .story-lightning {
  top: -3%;
  z-index: 0;
  width: clamp(4.2rem, 10vw, 8rem);
  height: clamp(15rem, 34vw, 26rem);
  opacity: 0;
  filter:
    drop-shadow(0 0 8px rgba(242, 232, 255, 0.9))
    drop-shadow(0 0 22px rgba(188, 130, 255, 0.76));
  transform-origin: top center;
}

body[data-page="stories"] #ebooks .story-lightning::before,
body[data-page="stories"] #ebooks .story-lightning::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #ffffff, #d7c0ff 52%, rgba(255, 255, 255, 0.1));
  clip-path: polygon(
    45% 0,
    62% 0,
    52% 25%,
    72% 25%,
    46% 55%,
    62% 55%,
    28% 100%,
    38% 62%,
    20% 62%,
    42% 32%,
    28% 32%
  );
}

body[data-page="stories"] #ebooks .story-lightning::after {
  opacity: 0.34;
  transform: scaleX(1.72) translateY(0.12rem);
  filter: blur(12px);
}

body[data-page="stories"] #ebooks .story-lightning--one {
  left: 18%;
  height: clamp(22rem, 52vw, 42rem);
  transform: rotate(-8deg) scaleX(0.82);
  animation: storyLightningStrikeOne 4.8s steps(1, end) infinite;
}

body[data-page="stories"] #ebooks .story-lightning--one::before,
body[data-page="stories"] #ebooks .story-lightning--one::after {
  clip-path: polygon(
    52% 0,
    68% 0,
    42% 31%,
    61% 31%,
    35% 56%,
    54% 56%,
    24% 100%,
    31% 63%,
    15% 63%,
    39% 35%,
    24% 35%
  );
}

body[data-page="stories"] #ebooks .story-lightning--two {
  left: 50%;
  width: clamp(5rem, 12vw, 9.5rem);
  height: clamp(24rem, 58vw, 46rem);
  transform: rotate(4deg) scaleX(1.08);
  animation: storyLightningStrikeTwo 6.2s steps(1, end) infinite;
}

body[data-page="stories"] #ebooks .story-lightning--two::before,
body[data-page="stories"] #ebooks .story-lightning--two::after {
  clip-path: polygon(
    38% 0,
    56% 0,
    49% 22%,
    74% 22%,
    56% 43%,
    82% 43%,
    34% 100%,
    48% 54%,
    24% 54%,
    44% 31%,
    28% 31%
  );
}

body[data-page="stories"] #ebooks .story-lightning--three {
  right: 12%;
  width: clamp(3.2rem, 8vw, 6.5rem);
  height: clamp(18rem, 44vw, 34rem);
  transform: rotate(13deg) scaleX(0.68);
  animation: storyLightningStrikeThree 5.4s steps(1, end) infinite;
}

body[data-page="stories"] #ebooks .story-lightning--three::before,
body[data-page="stories"] #ebooks .story-lightning--three::after {
  clip-path: polygon(
    48% 0,
    66% 0,
    57% 27%,
    76% 27%,
    45% 50%,
    63% 50%,
    28% 100%,
    37% 58%,
    18% 58%,
    42% 34%,
    31% 34%
  );
}

body[data-page="stories"] #ebooks .story-effect--grass {
  background:
    radial-gradient(ellipse at 50% 108%, rgba(113, 222, 92, 0.24), transparent 48%),
    linear-gradient(0deg, rgba(20, 82, 34, 0.2), transparent 72%);
}

body[data-page="stories"] #ebooks .story-effect--grass::before,
body[data-page="stories"] #ebooks .story-effect--grass::after {
  display: none;
}

body[data-page="stories"] #ebooks .story-grass-group {
  position: absolute;
  top: var(--grass-top);
  right: -3%;
  left: -3%;
  z-index: 0;
  height: var(--grass-height);
  transform-origin: center bottom;
  background: linear-gradient(180deg, #94e779 0%, #48a64d 58%, #24733a 100%);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 64'%3E%3Cpath fill='white' d='M3 64C5 43 7 17 12 3C15 25 14 47 12 64Z M29 64C30 51 32 32 36 14C40 35 39 52 38 64Z M57 64C60 39 64 15 70 0C72 27 70 49 68 64Z M91 64C93 47 95 29 101 8C104 32 103 51 102 64Z M124 64C126 53 129 39 134 21C137 40 136 54 136 64Z M154 64C157 41 160 20 168 5C169 29 167 49 165 64Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 64'%3E%3Cpath fill='white' d='M3 64C5 43 7 17 12 3C15 25 14 47 12 64Z M29 64C30 51 32 32 36 14C40 35 39 52 38 64Z M57 64C60 39 64 15 70 0C72 27 70 49 68 64Z M91 64C93 47 95 29 101 8C104 32 103 51 102 64Z M124 64C126 53 129 39 134 21C137 40 136 54 136 64Z M154 64C157 41 160 20 168 5C169 29 167 49 165 64Z'/%3E%3C/svg%3E");
  -webkit-mask-position: var(--grass-offset) bottom;
  mask-position: var(--grass-offset) bottom;
  -webkit-mask-repeat: repeat-x;
  mask-repeat: repeat-x;
  -webkit-mask-size: var(--grass-cluster) 100%;
  mask-size: var(--grass-cluster) 100%;
  filter: drop-shadow(0 2px 1px rgba(10, 48, 20, 0.2));
  opacity: var(--grass-opacity);
  will-change: transform;
  animation: storyGrassGroupSway var(--grass-duration) ease-in-out var(--grass-delay) infinite;
}

body[data-page="stories"] #ebooks .story-wind-gust {
  position: absolute;
  left: -48%;
  z-index: 1;
  width: clamp(280px, 46%, 500px);
  height: clamp(32px, 5vw, 50px);
  background:
    linear-gradient(90deg, transparent 0 5%, rgba(226, 255, 222, 0.42) 13% 72%, transparent 100%) 0 7% / 78% 3px no-repeat,
    linear-gradient(90deg, transparent 0 11%, rgba(226, 255, 222, 0.34) 20% 80%, transparent 100%) 20% 49% / 72% 2px no-repeat,
    linear-gradient(90deg, transparent 0 7%, rgba(226, 255, 222, 0.27) 16% 76%, transparent 100%) 4% 91% / 62% 2px no-repeat;
  opacity: 0;
  filter:
    blur(0.2px)
    drop-shadow(0 0 6px rgba(184, 255, 190, 0.2));
  transform: translateY(0) skewX(-10deg) scaleX(0.86);
  will-change: left, opacity, transform;
}

body[data-page="stories"] #ebooks .story-wind-gust::before,
body[data-page="stories"] #ebooks .story-wind-gust::after {
  content: "";
  position: absolute;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(226, 255, 222, 0.3) 18% 78%, transparent);
}

body[data-page="stories"] #ebooks .story-wind-gust::before {
  top: 13px;
  left: 3%;
  width: 45%;
}

body[data-page="stories"] #ebooks .story-wind-gust::after {
  right: 4%;
  bottom: 9px;
  width: 38%;
}

body[data-page="stories"] #ebooks .story-wind-gust--one {
  top: 19%;
  --wind-pass-duration: 1.08s;
  --wind-rise: -8px;
}

body[data-page="stories"] #ebooks .story-wind-gust--two {
  top: 46%;
  width: clamp(240px, 38%, 410px);
  --wind-pass-duration: 1.42s;
  --wind-rise: 7px;
}

body[data-page="stories"] #ebooks .story-wind-gust--three {
  top: 71%;
  width: clamp(310px, 51%, 540px);
  --wind-pass-duration: 0.86s;
  --wind-rise: -5px;
}

body[data-page="stories"] #ebooks .story-wind-gust.is-casting {
  animation: storyGrassWindGust var(--wind-pass-duration) linear 1;
}

body[data-page="stories"] #ebooks .story-effect--fire {
  background:
    radial-gradient(ellipse at 50% 112%, rgba(255, 208, 86, 0.72), transparent 34%),
    radial-gradient(ellipse at 48% 92%, rgba(255, 39, 91, 0.4), transparent 48%),
    linear-gradient(180deg, rgba(105, 4, 18, 0.08), rgba(184, 20, 24, 0.2) 56%, rgba(255, 63, 24, 0.3));
  animation: storyFireGlow 2.2s ease-in-out infinite alternate;
}

body[data-page="stories"] #ebooks .story-effect--fire::before {
  inset: 40% -8% -18%;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(255, 246, 184, 0.74), transparent 24%),
    radial-gradient(ellipse at 50% 94%, rgba(255, 118, 171, 0.62), transparent 42%),
    radial-gradient(ellipse at 50% 94%, rgba(255, 37, 54, 0.5), transparent 60%);
  filter: blur(9px);
  opacity: 0.88;
  animation: storyFireCorePulse 1.45s ease-in-out infinite alternate;
}

body[data-page="stories"] #ebooks .story-effect--fire::after {
  inset: 0;
  background:
    linear-gradient(90deg, transparent, rgba(255, 194, 168, 0.05), transparent 38%),
    linear-gradient(90deg, transparent 34%, rgba(255, 116, 155, 0.06), transparent 66%);
  filter: blur(10px);
  opacity: 0.54;
  animation: storyFireHeatWash 3.4s ease-in-out infinite alternate;
}

body[data-page="stories"] #ebooks .story-fire-flames,
body[data-page="stories"] #ebooks .story-fire-embers,
body[data-page="stories"] #ebooks .story-fire-heat {
  position: absolute;
  pointer-events: none;
}

body[data-page="stories"] #ebooks .story-fire-flames {
  right: -5%;
  bottom: -9%;
  left: -5%;
  transform-origin: center bottom;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 260'%3E%3Cpath fill='white' d='M0 260V194C35 224 52 180 41 142C82 167 87 216 121 220C153 224 140 165 175 95C198 137 192 193 224 206C251 217 259 163 246 119C296 146 282 215 322 218C359 221 341 133 390 50C418 104 394 184 431 210C467 235 472 153 456 106C514 142 494 224 541 219C571 216 566 181 600 159V260Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 260'%3E%3Cpath fill='white' d='M0 260V194C35 224 52 180 41 142C82 167 87 216 121 220C153 224 140 165 175 95C198 137 192 193 224 206C251 217 259 163 246 119C296 146 282 215 322 218C359 221 341 133 390 50C418 104 394 184 431 210C467 235 472 153 456 106C514 142 494 224 541 219C571 216 566 181 600 159V260Z'/%3E%3C/svg%3E");
  -webkit-mask-position: center bottom;
  mask-position: center bottom;
  -webkit-mask-repeat: repeat-x;
  mask-repeat: repeat-x;
}

body[data-page="stories"] #ebooks .story-fire-flames--back {
  z-index: 0;
  height: 58%;
  background: linear-gradient(180deg, rgba(255, 49, 115, 0.16), rgba(226, 18, 31, 0.62) 48%, rgba(119, 4, 14, 0.72));
  -webkit-mask-size: 72% 100%;
  mask-size: 72% 100%;
  filter: blur(4px);
  opacity: 0.72;
  animation: storyFireRiseBack 6.4s ease-in-out infinite;
}

body[data-page="stories"] #ebooks .story-fire-flames--middle {
  z-index: 1;
  height: 47%;
  background: linear-gradient(180deg, rgba(255, 121, 176, 0.38), rgba(255, 45, 48, 0.82) 48%, rgba(255, 107, 24, 0.88));
  -webkit-mask-size: 58% 100%;
  mask-size: 58% 100%;
  -webkit-mask-position: 21% bottom;
  mask-position: 21% bottom;
  filter: blur(1.5px);
  opacity: 0.84;
  animation: storyFireRiseMiddle 4.8s ease-in-out infinite;
}

body[data-page="stories"] #ebooks .story-fire-flames--front {
  z-index: 2;
  height: 34%;
  background: linear-gradient(180deg, rgba(255, 211, 226, 0.68), rgba(255, 91, 161, 0.94) 34%, rgba(255, 101, 31, 0.98) 72%, rgba(255, 214, 83, 0.96));
  -webkit-mask-size: 46% 100%;
  mask-size: 46% 100%;
  -webkit-mask-position: -8% bottom;
  mask-position: -8% bottom;
  filter: drop-shadow(0 0 10px rgba(255, 70, 132, 0.34));
  opacity: 0.92;
  animation: storyFireRiseFront 3.6s ease-in-out infinite;
}

body[data-page="stories"] #ebooks .story-fire-embers {
  right: 0;
  bottom: -108%;
  left: 0;
  z-index: 3;
  height: 100%;
  background-repeat: no-repeat;
  opacity: 0;
  will-change: transform, opacity;
  animation-name: storyFireEmbersRise;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

body[data-page="stories"] #ebooks .story-fire-embers--slow {
  background-image:
    radial-gradient(circle, rgba(255, 232, 170, 0.9) 0 2px, transparent 3px),
    radial-gradient(circle, rgba(255, 91, 158, 0.72) 0 1.6px, transparent 2.6px),
    radial-gradient(circle, rgba(255, 171, 94, 0.82) 0 1.5px, transparent 2.5px),
    radial-gradient(circle, rgba(255, 224, 159, 0.76) 0 1.3px, transparent 2.3px),
    radial-gradient(circle, rgba(255, 69, 137, 0.68) 0 1.5px, transparent 2.5px);
  background-position: 12% 82%, 34% 96%, 56% 76%, 74% 91%, 92% 84%;
  background-size: 7px 7px, 6px 6px, 5px 5px, 5px 5px, 6px 6px;
  animation-duration: 19.2s;
  animation-delay: -12.4s;
}

body[data-page="stories"] #ebooks .story-fire-embers--medium {
  background-image:
    radial-gradient(circle, rgba(255, 121, 56, 0.88) 0 1.8px, transparent 2.8px),
    radial-gradient(circle, rgba(255, 210, 135, 0.82) 0 1.4px, transparent 2.4px),
    radial-gradient(circle, rgba(255, 78, 145, 0.74) 0 1.7px, transparent 2.7px),
    radial-gradient(circle, rgba(255, 184, 101, 0.8) 0 1.3px, transparent 2.3px),
    radial-gradient(circle, rgba(255, 238, 185, 0.78) 0 1.5px, transparent 2.5px);
  background-position: 7% 93%, 28% 80%, 48% 98%, 69% 74%, 86% 89%;
  background-size: 7px 7px, 5px 5px, 6px 6px, 5px 5px, 6px 6px;
  animation-duration: 15.8s;
  animation-delay: -5.9s;
}

body[data-page="stories"] #ebooks .story-fire-embers--fast {
  background-image:
    radial-gradient(circle, rgba(255, 80, 139, 0.78) 0 1.5px, transparent 2.5px),
    radial-gradient(circle, rgba(255, 243, 191, 0.88) 0 1.3px, transparent 2.2px),
    radial-gradient(circle, rgba(255, 120, 50, 0.84) 0 1.6px, transparent 2.6px),
    radial-gradient(circle, rgba(255, 108, 167, 0.7) 0 1.4px, transparent 2.4px),
    radial-gradient(circle, rgba(255, 203, 126, 0.78) 0 1.2px, transparent 2.2px);
  background-position: 18% 99%, 39% 78%, 61% 92%, 79% 72%, 96% 87%;
  background-size: 6px 6px, 5px 5px, 6px 6px, 5px 5px, 5px 5px;
  animation-duration: 12.6s;
  animation-delay: -9.7s;
}

body[data-page="stories"] #ebooks .story-fire-heat {
  inset: 4% -8%;
  z-index: 4;
  background: repeating-linear-gradient(96deg, transparent 0 44px, rgba(255, 184, 199, 0.045) 48px, transparent 55px 104px);
  filter: blur(7px);
  opacity: 0.48;
  animation: storyFireShimmer 5.4s ease-in-out infinite alternate;
}

body[data-page="stories"] #ebooks .story-effect--clash {
  background:
    radial-gradient(circle at 24% 52%, rgba(73, 226, 97, 0.72), transparent 54%),
    radial-gradient(circle at 76% 48%, rgba(166, 89, 255, 0.78), transparent 58%),
    linear-gradient(115deg, #12331e, #321c4b);
}

body[data-page="stories"] #ebooks .story-effect--clash::before {
  inset: -8%;
  z-index: 0;
  background:
    radial-gradient(circle at 38% 46%, rgba(125, 255, 148, 0.28), transparent 42%),
    radial-gradient(circle at 64% 54%, rgba(201, 139, 255, 0.34), transparent 46%);
  filter: blur(24px);
  animation: storyClashColorVeil 8s ease-in-out infinite;
}

body[data-page="stories"] #ebooks .story-effect--clash::after {
  display: block;
  inset: 0;
  z-index: 0;
  background: #020504;
  animation: storyClashColorWarp 8s ease-in-out infinite;
}

body[data-page="stories"] #ebooks .story-clash-darkness,
body[data-page="stories"] #ebooks .story-clash-arrow {
  position: absolute;
  pointer-events: none;
}

body[data-page="stories"] #ebooks .story-clash-darkness {
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(circle at 50% 48%, transparent 0 24%, rgba(0, 0, 0, 0.42) 72%),
    rgba(0, 0, 0, 0.12);
  opacity: 0.12;
  animation: storyClashDarknessFade 10.8s ease-in-out infinite;
}

body[data-page="stories"] #ebooks .story-clash-arrow {
  top: -2%;
  left: 50%;
  z-index: 3;
  width: 5px;
  height: 82%;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.42), #fff 18% 91%, rgba(255, 255, 255, 0.82));
  box-shadow:
    0 0 7px rgba(255, 255, 255, 0.52),
    0 0 18px rgba(211, 255, 223, 0.22);
  transform-origin: 50% 0;
  animation: storyClashArrowSwing 8s ease-in-out infinite;
}

body[data-page="stories"] #ebooks .story-clash-arrow::before,
body[data-page="stories"] #ebooks .story-clash-arrow::after {
  content: "";
  position: absolute;
}

body[data-page="stories"] #ebooks .story-clash-arrow::before {
  bottom: -24px;
  left: 50%;
  width: 30px;
  height: 32px;
  background: #fff;
  clip-path: polygon(50% 100%, 0 0, 50% 22%, 100% 0);
  filter: drop-shadow(0 0 7px rgba(255, 255, 255, 0.5));
  transform: translateX(-50%);
}

body[data-page="stories"] #ebooks .story-clash-arrow::after {
  top: 7%;
  left: 50%;
  width: 25px;
  height: 34px;
  background: rgba(255, 255, 255, 0.82);
  clip-path: polygon(50% 34%, 0 0, 20% 48%, 0 100%, 50% 66%, 100% 100%, 80% 48%, 100% 0);
  filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.42));
  transform: translateX(-50%);
}

body[data-page="stories"] #ebooks .story-effect--tricolor {
  background: transparent;
}

body[data-page="stories"] #ebooks .story-effect--tricolor::before,
body[data-page="stories"] #ebooks .story-effect--tricolor::after {
  display: none;
}

body[data-page="stories"] #ebooks .story-prophecy-heart {
  --heart-color: #69cbff;
  --heart-rgb: 105 203 255;
  --heart-delay: 0s;
  position: absolute;
  top: var(--heart-top);
  left: var(--heart-left);
  z-index: 1;
  width: clamp(240px, 27vw, 360px);
  aspect-ratio: 1.08 / 1;
  transform: translate(-50%, -50%);
  transform-origin: center 56%;
  animation: storyProphecyHeartbeat 18s ease-in-out var(--heart-delay) infinite;
}

body[data-page="stories"] #ebooks .story-prophecy-heart::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

body[data-page="stories"] #ebooks .story-prophecy-wave {
  position: absolute;
  inset: -12px;
  border: 1px solid rgb(var(--heart-rgb) / 0.96);
  background: transparent;
  opacity: 0;
  transform: scale(0.7);
  pointer-events: none;
}

body[data-page="stories"] #ebooks .story-prophecy-wave--first {
  animation: storyProphecyHeartWaveFirst 18s ease-out var(--heart-delay) infinite;
}

body[data-page="stories"] #ebooks .story-prophecy-wave--second {
  animation: storyProphecyHeartWaveSecond 18s ease-out var(--heart-delay) infinite;
}

body[data-page="stories"] #ebooks .story-prophecy-heart::after {
  inset: -3px;
  clip-path: polygon(50% 96%, 42% 87%, 14% 62%, 5% 43%, 6% 25%, 16% 10%, 31% 5%, 42% 10%, 50% 21%, 58% 10%, 69% 5%, 84% 10%, 94% 25%, 95% 43%, 86% 62%, 58% 87%);
  background:
    radial-gradient(circle at 34% 26%, rgba(255, 255, 255, 0.42), transparent 12%),
    linear-gradient(145deg, color-mix(in srgb, var(--heart-color), white 10%), var(--heart-color) 48%, color-mix(in srgb, var(--heart-color), black 42%));
  animation: storyProphecyHeartGlow 18s ease-in-out var(--heart-delay) infinite;
}

body[data-page="stories"] #ebooks .story-prophecy-heart--blue {
  --heart-top: -3%;
  --heart-left: 54%;
}

body[data-page="stories"] #ebooks .story-prophecy-heart--blue .story-prophecy-wave {
  border-radius: 4%;
}

body[data-page="stories"] #ebooks .story-prophecy-heart--red {
  --heart-color: #c92f3f;
  --heart-rgb: 201 47 63;
  --heart-delay: -6s;
  --heart-top: 24%;
  --heart-left: 103%;
}

body[data-page="stories"] #ebooks .story-prophecy-heart--red .story-prophecy-wave {
  border: 0;
  background: rgb(var(--heart-rgb) / 0.96);
  -webkit-mask: center / 100% 100% no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 3L97 94H3Z' fill='none' stroke='white' stroke-width='1.2'/%3E%3C/svg%3E");
  mask: center / 100% 100% no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 3L97 94H3Z' fill='none' stroke='white' stroke-width='1.2'/%3E%3C/svg%3E");
}

body[data-page="stories"] #ebooks .story-prophecy-heart--green {
  --heart-color: #53cd60;
  --heart-rgb: 83 205 96;
  --heart-delay: -12s;
  --heart-top: 104%;
  --heart-left: 76%;
}

body[data-page="stories"] #ebooks .story-prophecy-heart--green .story-prophecy-wave {
  border-radius: 50%;
}

body[data-page="stories"] #ebooks .main-story-panel > .story-tag {
  position: absolute;
  top: clamp(0.78rem, 1.6vw, 1rem);
  left: clamp(0.78rem, 1.6vw, 1rem);
  z-index: 3;
}

body[data-page="stories"] #ebooks .main-story-art {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  min-height: 0;
  padding: clamp(0.78rem, 1.5vw, 1rem);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.4);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.28);
  overflow: hidden;
}

body[data-page="stories"] #ebooks .main-story-art .story-cover {
  width: min(100%, 430px);
  max-width: none;
  max-height: min(98%, 680px);
  height: auto;
  margin: 0;
  border-radius: 10px;
  object-fit: contain;
  box-shadow: 0 18px 32px rgba(0, 0, 0, 0.34);
  user-select: none;
  -webkit-user-drag: none;
}

body[data-page="stories"] #ebooks .other-story-list .story-media {
  aspect-ratio: auto;
  border: none;
  border-radius: 0;
  background: transparent;
  overflow: visible;
}

body[data-page="stories"] #ebooks .other-story-list .story-media .story-cover {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  border-radius: 8px;
  box-shadow: 0 12px 22px rgba(0, 0, 0, 0.28);
}

body[data-page="stories"] #ebooks .main-story-copy {
  position: relative;
  z-index: 1;
  align-self: end;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  min-height: 100%;
  padding: clamp(0.3rem, 1.4vw, 0.8rem);
  text-align: left;
}

body[data-page="stories"] #ebooks .main-story-eyebrow {
  margin: 0 0 0.28rem;
  color: rgba(255, 234, 181, 0.94);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  line-height: 1.2;
  text-transform: uppercase;
}

body[data-page="stories"] #ebooks .main-story-copy h2 {
  margin: 0;
  max-width: 12ch;
  color: rgba(255, 250, 239, 0.98);
  font-size: clamp(2.15rem, 5vw, 4.2rem);
  line-height: 0.98;
  text-wrap: balance;
}

body[data-page="stories"] #ebooks .main-story-copy p:not(.main-story-eyebrow) {
  margin: clamp(0.72rem, 1.5vw, 1rem) 0 clamp(0.9rem, 1.7vw, 1.2rem);
  max-width: 39ch;
  color: rgba(255, 255, 255, 0.92);
  font-size: clamp(0.98rem, 1.2vw, 1.12rem);
  line-height: 1.55;
}

body[data-page="stories"] #ebooks .main-story-copy .story-btn {
  align-self: center;
  width: min(100%, 390px);
  min-height: 4rem;
  padding: 1rem 1.35rem 1.05rem 1.6rem;
  font-size: clamp(1rem, 1vw, 1.12rem);
  text-align: center;
}

body[data-page="stories"] #ebooks .main-story-copy a.story-btn::after {
  content: "\2192";
  flex: 0 0 auto;
  color: rgb(var(--story-button-accent));
  font-size: 1.15em;
  line-height: 1;
}

body[data-page="stories"] #ebooks .story-theme-prologue .story-btn {
  --story-button-accent: 214, 176, 255;
}

body[data-page="stories"] #ebooks .story-theme-chapter-one .story-btn {
  --story-button-accent: 143, 235, 146;
}

body[data-page="stories"] #ebooks .story-theme-chapter-two .story-btn {
  --story-button-accent: 255, 147, 103;
}

body[data-page="stories"] #ebooks .story-theme-chapter-three .story-btn {
  --story-button-accent: 188, 149, 255;
}

body[data-page="stories"] #ebooks .story-theme-chapter-four .story-btn {
  --story-button-accent: 157, 223, 222;
}

body[data-page="stories"] #ebooks .other-story-list .story-btn {
  align-self: center;
  width: min(100%, 360px);
  min-height: 3.35rem;
  padding: 0.9rem 1.2rem;
  font-size: clamp(0.98rem, 1vw, 1.1rem);
}

body[data-page="stories"] #ebooks .main-story-progress {
  display: flex;
  justify-content: center;
  gap: 0.42rem;
  margin-top: 0.5rem;
}

body[data-page="stories"] #ebooks .main-story-progress span {
  width: 0.58rem;
  height: 0.58rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.34);
  transition: width 0.2s ease, background 0.2s ease;
}

body[data-page="stories"] #ebooks .main-story-progress span.is-active {
  width: 1.7rem;
  background: rgba(255, 236, 184, 0.95);
}

body[data-page="stories"][data-stories-view="combined"] #ebooks .other-story-list > .story-card {
  flex-basis: min(100%, 420px);
  max-width: 420px;
}

@keyframes storyArrowNudge {
  0%,
  100% {
    transform: translateY(-50%) translateX(0);
  }

  50% {
    transform: translateY(-50%) translateX(0.28rem);
  }
}

@keyframes storyStormPulse {
  0%,
  100% {
    opacity: 0.74;
    filter: brightness(0.96);
  }

  50% {
    opacity: 0.92;
    filter: brightness(1.08);
  }
}

@keyframes storyStormTopGlow {
  0%,
  100% {
    opacity: 0.46;
    transform: translateY(0);
  }

  50% {
    opacity: 0.76;
    transform: translateY(0.35rem);
  }
}

@keyframes storyStormRain {
  0% {
    background-position: 0 0, 21px -65px, 47px -104px, 76px -128px, 112px -173px;
  }

  100% {
    background-position: 0 96px, 21px 66px, 47px 65px, 76px 83px, 112px 84px;
  }
}

@keyframes storyPurpleCloudsDrift {
  0%,
  100% {
    transform: translateX(-1.5%) translateY(0) scale(1);
  }

  50% {
    transform: translateX(1.5%) translateY(0.3rem) scale(1.025);
  }
}

@keyframes storyPurpleCloudsBillow {
  0%,
  100% {
    transform: translateX(-1.2%) scale(1);
    opacity: 0.72;
  }

  50% {
    transform: translateX(1.2%) scale(1.035, 1.06);
    opacity: 0.9;
  }
}

@keyframes storyLightningStrikeOne {
  0%,
  17%,
  19%,
  100% {
    opacity: 0;
  }

  18%,
  18.6% {
    opacity: 1;
  }

  18.8% {
    opacity: 0.22;
  }
}

@keyframes storyLightningStrikeTwo {
  0%,
  43%,
  45.2%,
  100% {
    opacity: 0;
  }

  44%,
  44.7% {
    opacity: 0.92;
  }

  45% {
    opacity: 0.18;
  }
}

@keyframes storyLightningStrikeThree {
  0%,
  68%,
  70.4%,
  100% {
    opacity: 0;
  }

  69%,
  69.5% {
    opacity: 0.82;
  }

  70% {
    opacity: 0.24;
  }
}

@keyframes storyGrassGroupSway {
  0%,
  100% {
    transform: translateX(calc(var(--grass-shift) * -0.6)) skewX(calc(var(--grass-lean) * -0.55));
  }

  42% {
    transform: translateX(var(--grass-shift)) skewX(var(--grass-lean));
  }

  68% {
    transform: translateX(calc(var(--grass-shift) * 0.2)) skewX(calc(var(--grass-lean) * 0.25));
  }
}

@keyframes storyGrassWindGust {
  0% {
    left: -48%;
    opacity: 0;
    transform: translateY(0) skewX(-10deg) scaleX(0.78);
  }

  10% {
    opacity: 0.78;
  }

  52% {
    opacity: 0.65;
    transform: translateY(var(--wind-rise)) skewX(-6deg) scaleX(1);
  }

  100% {
    left: 108%;
    opacity: 0;
    transform: translateY(0) skewX(-3deg) scaleX(1.08);
  }
}

@keyframes storyFireGlow {
  0%,
  100% {
    opacity: 0.82;
    filter: saturate(1);
  }

  50% {
    opacity: 1;
    filter: saturate(1.18);
  }
}

@keyframes storyFireCorePulse {
  from {
    transform: translateY(1.2rem) scaleX(0.92) scaleY(0.94);
    opacity: 0.68;
  }

  to {
    transform: translateY(-0.6rem) scaleX(1.08) scaleY(1.06);
    opacity: 0.94;
  }
}

@keyframes storyFireHeatWash {
  from {
    transform: translateX(-4%) skewX(-2deg);
    opacity: 0.3;
  }

  to {
    transform: translateX(5%) skewX(3deg);
    opacity: 0.64;
  }
}

@keyframes storyFireRiseBack {
  0%,
  100% {
    transform: skewX(-1.5deg) scaleX(1.01) scaleY(0.98);
    opacity: 0.66;
  }

  34% {
    transform: skewX(2deg) scaleX(0.99) scaleY(1.035);
    opacity: 0.74;
  }

  68% {
    transform: skewX(-0.8deg) scaleX(1.015) scaleY(1.015);
    opacity: 0.7;
  }
}

@keyframes storyFireRiseMiddle {
  0%,
  100% {
    transform: skewX(1.4deg) scaleX(0.995) scaleY(0.985);
    opacity: 0.78;
  }

  42% {
    transform: skewX(-2.2deg) scaleX(1.012) scaleY(1.055);
    opacity: 0.88;
  }

  73% {
    transform: skewX(0.7deg) scaleX(0.99) scaleY(1.025);
    opacity: 0.83;
  }
}

@keyframes storyFireRiseFront {
  0%,
  100% {
    transform: skewX(-1.8deg) scaleX(1.008) scaleY(0.98);
    opacity: 0.86;
  }

  31% {
    transform: skewX(2.4deg) scaleX(0.992) scaleY(1.065);
    opacity: 0.94;
  }

  59% {
    transform: skewX(-0.5deg) scaleX(1.014) scaleY(1.025);
    opacity: 0.9;
  }

  82% {
    transform: skewX(1.2deg) scaleX(0.997) scaleY(1.045);
    opacity: 0.93;
  }
}

@keyframes storyFireEmbersRise {
  0% {
    opacity: 0;
    transform: translate3d(-8px, 0, 0) scale(0.78);
  }

  8% {
    opacity: 0.78;
  }

  36% {
    transform: translate3d(7px, -76%, 0) scale(1);
  }

  68% {
    opacity: 0.7;
    transform: translate3d(-4px, -148%, 0) scale(0.88);
  }

  91% {
    opacity: 0.54;
  }

  100% {
    opacity: 0;
    transform: translate3d(10px, -218%, 0) scale(0.45);
  }
}

@keyframes storyFireShimmer {
  from {
    transform: translateX(-3%) skewX(-2deg);
    opacity: 0.24;
  }

  to {
    transform: translateX(4%) skewX(3deg);
    opacity: 0.56;
  }
}

@keyframes storyClashColorWarp {
  0%,
  100% {
    opacity: 0.52;
  }

  50% {
    opacity: 0.04;
  }
}

@keyframes storyClashColorVeil {
  0%,
  100% {
    opacity: 0.18;
    transform: scale(0.98);
  }

  50% {
    opacity: 0.82;
    transform: scale(1.04);
  }
}

@keyframes storyClashArrowSwing {
  0%,
  100% {
    transform: translateX(-50%) rotate(-24deg);
  }

  50% {
    transform: translateX(-50%) rotate(24deg);
  }
}

@keyframes storyClashDarknessFade {
  0%,
  100% {
    opacity: 0.12;
  }

  46%,
  58% {
    opacity: 0.74;
  }
}

@keyframes storyProphecyHeartbeat {
  0%,
  8%,
  19%,
  100% {
    transform: translate(-50%, -50%) scale(1);
  }

  10% {
    transform: translate(-50%, -50%) scale(1.13);
  }

  13% {
    transform: translate(-50%, -50%) scale(0.98);
  }

  16% {
    transform: translate(-50%, -50%) scale(1.08);
  }
}

@keyframes storyProphecyHeartWaveFirst {
  0%,
  8%,
  100% {
    opacity: 0;
    transform: scale(0.7);
  }

  10% {
    opacity: 0.96;
    transform: scale(0.82);
  }

  40% {
    opacity: 0;
    transform: scale(6.4);
  }
}

@keyframes storyProphecyHeartWaveSecond {
  0%,
  14%,
  100% {
    opacity: 0;
    transform: scale(0.7);
  }

  16% {
    opacity: 0.82;
    transform: scale(0.82);
  }

  43% {
    opacity: 0;
    transform: scale(6.4);
  }
}

@keyframes storyProphecyHeartGlow {
  0%,
  8%,
  19%,
  100% {
    opacity: 0.52;
    filter:
      brightness(0.5)
      saturate(0.72)
      drop-shadow(0 0 3px rgb(var(--heart-rgb) / 0.18));
  }

  10% {
    opacity: 1;
    filter:
      brightness(1.28)
      saturate(1.2)
      drop-shadow(0 0 10px rgb(var(--heart-rgb) / 0.92))
      drop-shadow(0 0 28px rgb(var(--heart-rgb) / 0.62));
  }

  13% {
    opacity: 0.68;
    filter:
      brightness(0.72)
      saturate(0.88)
      drop-shadow(0 0 5px rgb(var(--heart-rgb) / 0.36));
  }

  16% {
    opacity: 0.92;
    filter:
      brightness(1.08)
      saturate(1.1)
      drop-shadow(0 0 8px rgb(var(--heart-rgb) / 0.72))
      drop-shadow(0 0 20px rgb(var(--heart-rgb) / 0.42));
  }
}

@media (max-width: 820px) {
  body[data-page="stories"] #ebooks .main-story-arrow {
    width: clamp(2.8rem, 11vw, 3.5rem);
    height: clamp(2.8rem, 11vw, 3.5rem);
    top: 50%;
  }

  body[data-page="stories"] #ebooks .main-story-arrow::before {
    font-size: clamp(2.55rem, 10vw, 3.45rem);
  }

  body[data-page="stories"] #ebooks .main-story-arrow--prev {
    left: 0.18rem;
  }

  body[data-page="stories"] #ebooks .main-story-arrow--next {
    right: 0.18rem;
  }

  body[data-page="stories"] #ebooks .main-story-panel {
    grid-template-columns: 1fr;
    flex-basis: 100%;
    max-width: 520px;
    min-height: auto;
    gap: 0.68rem;
  }

  body[data-page="stories"] #ebooks .main-story-art {
    min-height: 0;
    height: clamp(250px, 44svh, 390px);
    aspect-ratio: auto;
  }

  body[data-page="stories"] #ebooks .main-story-art .story-cover {
    width: min(100%, 315px);
    max-height: 100%;
  }

  body[data-page="stories"] #ebooks .main-story-copy {
    min-height: auto;
    padding: 0.28rem 0.08rem 0.14rem;
    text-align: center;
    align-items: center;
  }

  body[data-page="stories"] #ebooks .main-story-copy h2 {
    max-width: 13ch;
    font-size: clamp(2rem, 9vw, 3.2rem);
  }

  body[data-page="stories"] #ebooks .main-story-copy p:not(.main-story-eyebrow) {
    margin-block: 0.56rem 0.72rem;
  }
}

@media (max-width: 520px) {
  body[data-page="stories"] #ebooks .main-story-list,
  body[data-page="stories"] #ebooks .other-story-list {
    --story-gap: 0.72rem;
  }

  body[data-page="stories"] #ebooks .stories-group--main-showcase {
    padding-inline: 0.42rem;
  }

  body[data-page="stories"] #ebooks .main-story-viewport {
    gap: 0.58rem;
    padding-inline: 0;
    scroll-padding-inline: 0;
  }

  body[data-page="stories"] #ebooks .main-story-panel {
    flex-basis: 100%;
    max-width: 100%;
    padding: 0.68rem;
    border-radius: 16px;
  }

  body[data-page="stories"] #ebooks .main-story-art {
    padding: 0.58rem;
    border-radius: 13px;
    height: clamp(225px, 39svh, 340px);
  }

  body[data-page="stories"] #ebooks .story-theme-prologue .main-story-art {
    height: clamp(235px, 40svh, 350px);
  }

  body[data-page="stories"] #ebooks .main-story-copy h2 {
    font-size: clamp(1.8rem, 10vw, 2.82rem);
  }

  body[data-page="stories"] #ebooks .main-story-copy p:not(.main-story-eyebrow) {
    font-size: 0.92rem;
    line-height: 1.42;
    margin-block: 0.46rem 0.62rem;
  }

  body[data-page="stories"] #ebooks .main-story-copy .story-btn {
    min-height: 3.4rem;
    padding: 0.78rem 0.95rem 0.82rem 1.08rem;
    font-size: 0.94rem;
  }

  body[data-page="stories"] #ebooks .main-story-list > .story-card,
  body[data-page="stories"] #ebooks .other-story-list > .story-card {
    flex-basis: 100%;
    max-width: 100%;
  }

  body[data-page="stories"][data-stories-view="combined"] #ebooks .other-story-list > .story-card {
    flex-basis: calc((100% - var(--story-gap)) / 2);
    max-width: calc((100% - var(--story-gap)) / 2);
  }

  body[data-page="stories"] #ebooks .other-story-list > .story-card {
    flex-basis: calc((100% - var(--story-gap)) / 2);
    max-width: calc((100% - var(--story-gap)) / 2);
  }

  body[data-page="stories"] #ebooks .story-media {
    margin-bottom: 0.65rem;
  }
}

@media (max-width: 1320px) {
  body[data-page="stories"] #ebooks .main-story-list > .story-card,
  body[data-page="stories"] #ebooks .other-story-list > .story-card {
    flex-basis: calc((100% - (3 * var(--story-gap))) / 4);
    max-width: calc((100% - (3 * var(--story-gap))) / 4);
  }
}

@media (max-width: 1050px) {
  body[data-page="stories"] #ebooks .main-story-list > .story-card,
  body[data-page="stories"] #ebooks .other-story-list > .story-card {
    flex-basis: calc((100% - (2 * var(--story-gap))) / 3);
    max-width: calc((100% - (2 * var(--story-gap))) / 3);
  }
}

@media (max-width: 760px) {
  body[data-page="stories"] #ebooks .main-story-list,
  body[data-page="stories"] #ebooks .other-story-list {
    --story-gap: 0.75rem;
  }

  body[data-page="stories"] #ebooks .main-story-list > .story-card,
  body[data-page="stories"] #ebooks .other-story-list > .story-card {
    flex-basis: calc((100% - var(--story-gap)) / 2);
    max-width: calc((100% - var(--story-gap)) / 2);
  }
}

@media (max-width: 640px) {
  body[data-page="stories"] #ebooks {
    padding-inline: clamp(0.2rem, 1vw, 0.36rem);
  }

  body[data-page="stories"] #ebooks .stories-hero,
  body[data-page="stories"] #ebooks .stories-group {
    padding: clamp(0.58rem, 2.2vw, 0.78rem);
  }

  body[data-page="stories"] #ebooks .main-story-list,
  body[data-page="stories"] #ebooks .other-story-list {
    --story-gap: 0.62rem;
  }

  body[data-page="stories"] #ebooks .story-card {
    padding: 0.72rem;
  }
}

@media (max-width: 430px) {
  body[data-page="stories"] #ebooks {
    padding-top: 0.82rem;
  }

  body[data-page="stories"] #ebooks .stories-hero {
    margin-bottom: 1.15rem;
    padding: 0.82rem;
    border-radius: 12px;
  }

  body[data-page="stories"] #ebooks .stories-group {
    padding: 0.75rem;
    border-radius: 12px;
  }

  body[data-page="stories"] #ebooks .main-story-list,
  body[data-page="stories"] #ebooks .other-story-list {
    --story-gap: 0.55rem;
  }

  body[data-page="stories"] #ebooks .story-tag {
    font-size: 0.66rem;
  }

  body[data-page="stories"] #ebooks .story-card {
    padding: 0.65rem;
    border-radius: 10px;
  }

  body[data-page="stories"] #ebooks .story-card h4 {
    font-size: 0.88rem;
  }

  body[data-page="stories"] #ebooks .story-desc {
    font-size: 0.82rem;
  }

  body[data-page="stories"] #ebooks .story-btn {
    font-size: 0.79rem;
    padding: 0.52rem 0.6rem;
  }
}


/* =============================
   STORIES ALIGNMENT TUNING
============================= */

body[data-page="stories"] #ebooks .story-tag {
  min-height: 1.9em;
  display: inline-flex;
  align-items: center;
}

body[data-page="stories"] #ebooks .main-story-list .story-card h4,
body[data-page="stories"] #ebooks .other-story-list .story-card h4 {
  min-height: calc(1.35em * 2);
  display: flex;
  align-items: flex-start;
}

body[data-page="stories"] #ebooks .main-story-list .story-desc,
body[data-page="stories"] #ebooks .other-story-list .story-desc {
  min-height: calc(1.45em * 3);
}

@media (max-width: 430px) {
  body[data-page="stories"] #ebooks .main-story-list .story-card h4,
  body[data-page="stories"] #ebooks .other-story-list .story-card h4 {
    min-height: calc(1.3em * 2);
  }

  body[data-page="stories"] #ebooks .main-story-list .story-desc,
  body[data-page="stories"] #ebooks .other-story-list .story-desc {
    min-height: calc(1.35em * 3);
  }
}