/* ========== Atmosphere layers ========== */
.film-grain {
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  opacity: var(--grain-opacity);
  mix-blend-mode: var(--grain-blend);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.vignette {
  position: fixed;
  inset: 0;
  z-index: 89;
  pointer-events: none;
  background: var(--vignette);
}

.ambient-glow {
  position: fixed;
  width: 42vw;
  height: 42vw;
  max-width: 520px;
  max-height: 520px;
  margin: -21vw 0 0 -21vw;
  border-radius: 50%;
  background: radial-gradient(circle, var(--glow), transparent 68%);
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.6s ease;
  will-change: transform;
}

body.is-glowing .ambient-glow {
  opacity: 1;
}

@media (max-width: 900px), (hover: none) {
  .ambient-glow {
    display: none;
  }
}

/* ========== Rail progress spine ========== */
.rail__dots {
  position: relative;
  padding: 0.35rem 0;
}

.rail__spine {
  position: absolute;
  left: 50%;
  top: 0.55rem;
  bottom: 0.55rem;
  width: 1px;
  transform: translateX(-50%);
  background: rgba(236, 232, 225, 0.12);
  pointer-events: none;
}

.rail__spine-fill {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 0%;
  background: linear-gradient(180deg, var(--accent), var(--copper));
  transition: height 0.35s var(--ease);
}

.rail__dot {
  position: relative;
  z-index: 1;
  background: var(--bg-rail);
}

.rail__dot.is-active {
  box-shadow: 0 0 0 4px rgba(122, 158, 143, 0.18);
}

/* ========== Button sheen ========== */
.btn--primary {
  position: relative;
  overflow: hidden;
}

.btn--primary::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(14, 17, 20, 0.08) 48%, transparent 62%);
  transform: translateX(-120%);
  transition: transform 0.65s var(--ease);
}

.btn--primary:hover::after {
  transform: translateX(120%);
}

/* ========== Float nav polish ========== */
.float-nav {
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}

/* ========== Hero refinements ========== */
.hero-x__line {
  width: 3.5rem;
  height: 1px;
  background: var(--accent);
  margin: 0 0 1.35rem;
  transform-origin: left;
}

.hero-x__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem 1.25rem;
  margin-top: 1.75rem;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.hero-x__meta span {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.hero-x__meta span::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent);
}

/* ========== H-card luxury ========== */
.h-card {
  position: relative;
  isolation: isolate;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.22);
}

.h-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(145deg, rgba(122, 158, 143, 0.45), transparent 40%, rgba(196, 165, 116, 0.2));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
}

.h-card:hover::before {
  opacity: 1;
}

.h-card__visual {
  position: relative;
  overflow: hidden;
}

.h-card__visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='200' fill='none'%3E%3Cpath stroke='%237a9e8f' stroke-opacity='.35' d='M30 120 C70 80 110 140 160 100 C210 60 250 110 290 90'/%3E%3Ccircle cx='70' cy='95' r='3' fill='%237a9e8f' fill-opacity='.55'/%3E%3Ccircle cx='160' cy='100' r='3' fill='%23c4a574' fill-opacity='.5'/%3E%3Ccircle cx='250' cy='105' r='3' fill='%237a9e8f' fill-opacity='.45'/%3E%3C/svg%3E")
      center / cover no-repeat;
  opacity: 0.85;
}

.h-card__visual::after {
  content: "";
  position: absolute;
  inset: -40%;
  background: linear-gradient(120deg, transparent 40%, rgba(236, 232, 225, 0.08) 50%, transparent 60%);
  transform: translateX(-30%);
  transition: transform 0.8s var(--ease);
}

.h-card:hover .h-card__visual::after {
  transform: translateX(40%);
}

.h-track-progress {
  width: min(100% - var(--gutter) * 2, 1320px);
  margin: 0.5rem auto 0;
  height: 2px;
  background: rgba(236, 232, 225, 0.08);
  border-radius: 2px;
  overflow: hidden;
}

.h-track-progress__bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--accent), var(--copper));
  transition: width 0.15s linear;
}

/* ========== Story chapter index ========== */
.story__sticky-index {
  font-family: var(--font-display);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  color: var(--text-muted);
  margin-top: 2rem;
}

.story__sticky-index strong {
  color: var(--accent);
  font-weight: 600;
}

.story__panel {
  position: relative;
}

.story__panel-num {
  font-family: var(--font-display);
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  color: var(--accent);
  margin-bottom: 1rem;
}

.story__panel.is-active {
  background: linear-gradient(90deg, rgba(122, 158, 143, 0.06), transparent 55%);
}

.story__panel.is-active h3 {
  color: var(--accent-hover);
}

/* ========== Story panel polish ========== */
.news-x__feature {
  position: relative;
  overflow: hidden;
  transition: border-color 0.35s, transform 0.45s var(--ease);
}

.news-x__feature:hover {
  border-color: var(--accent-line);
  transform: translateY(-3px);
}

/* ========== Finale watermark ========== */
.finale__wm {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -52%);
  font-family: var(--font-display);
  font-size: clamp(5rem, 18vw, 12rem);
  font-weight: 800;
  letter-spacing: -0.05em;
  color: transparent;
  -webkit-text-stroke: 1px var(--wm-stroke-soft);
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

/* ========== Inner page accent ========== */
.page-x__rule {
  width: 3rem;
  height: 1px;
  background: var(--accent);
  margin-bottom: 1.25rem;
}

/* ========== Cursor effects (keeps system cursor) ========== */
.cursor-fx {
  position: fixed;
  inset: 0;
  z-index: 95;
  pointer-events: none;
  overflow: hidden;
}

.cursor-fx__ring {
  position: fixed;
  top: 0;
  left: 0;
  width: 42px;
  height: 42px;
  margin: -21px 0 0 -21px;
  border: 1px solid var(--accent-line);
  border-radius: 50%;
  opacity: 0;
  transform: translate3d(-100px, -100px, 0) scale(0.6);
  transition:
    width 0.35s var(--ease),
    height 0.35s var(--ease),
    margin 0.35s var(--ease),
    border-color 0.25s,
    background 0.25s,
    opacity 0.3s;
  will-change: transform;
}

.cursor-fx__dot {
  position: fixed;
  top: 0;
  left: 0;
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0;
  transform: translate3d(-100px, -100px, 0);
  will-change: transform;
  box-shadow: 0 0 12px var(--glow);
}

.cursor-fx__trail {
  position: fixed;
  top: 0;
  left: 0;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
}

body.is-cursor-on .cursor-fx__ring,
body.is-cursor-on .cursor-fx__dot {
  opacity: 1;
}

body.is-cursor-hover .cursor-fx__ring {
  width: 64px;
  height: 64px;
  margin: -32px 0 0 -32px;
  border-color: var(--accent);
  background: var(--accent-soft);
}

body.is-cursor-click .cursor-fx__ring {
  width: 28px;
  height: 28px;
  margin: -14px 0 0 -14px;
  background: var(--accent-soft);
}

.cursor-fx__ripple {
  position: fixed;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  border: 1px solid var(--accent);
  pointer-events: none;
  animation: cursor-ripple 0.7s var(--ease) forwards;
}

@keyframes cursor-ripple {
  0% {
    opacity: 0.7;
    transform: scale(0.4);
  }
  100% {
    opacity: 0;
    transform: scale(4.5);
  }
}

/* Spotlight follow on cards */
.has-spot {
  position: relative;
  overflow: hidden;
}

.has-spot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    420px circle at var(--spot-x, 50%) var(--spot-y, 50%),
    var(--accent-soft),
    transparent 55%
  );
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
  z-index: 1;
}

.has-spot:hover::after {
  opacity: 1;
}

@media (max-width: 900px), (hover: none) {
  .cursor-fx {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .btn--primary::after,
  .h-card__visual::after,
  .ambient-glow,
  .cursor-fx {
    display: none;
  }
}