/* Story page: a manifesto, read top to bottom. */
.tale-kicker{
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--ink-dim); margin-bottom: 20px;
}
.tale-hero{
  position: relative; min-height: 100svh; overflow: hidden; background: var(--stone-black);
  display: flex; align-items: flex-end;
}
.tale-hero__img{
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 50%;
  filter: brightness(1) contrast(1.06) saturate(1);
  transform: scale(1.04); transform-origin: 50% 55%;
  animation: taleDrift 18s ease-out forwards;
}
@keyframes taleDrift{ from{ transform: scale(1.04); } to{ transform: scale(1.16); } }
/* Brake lights breathing in the dark, like an engine idling. */
.tale-hero__glow{
  position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen;
  background:
    radial-gradient(ellipse 9% 7% at 50% 52%, rgba(214,32,32,0.4) 0%, rgba(214,32,32,0) 70%);
  animation: taleIdle 3.6s ease-in-out infinite;
}
@keyframes taleIdle{ 0%,100%{ opacity: 0.55; } 50%{ opacity: 1; } }
.tale-hero__grade{
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(6,6,6,0.7) 0%, rgba(6,6,6,0.35) 38%, rgba(6,6,6,0) 66%),
    linear-gradient(180deg, rgba(6,6,6,0.5) 0%, rgba(6,6,6,0) 20%, rgba(6,6,6,0) 50%, rgba(6,6,6,0.95) 100%);
}
.tale-hero__copy{
  position: relative; z-index: 2; width: 100%;
  padding: 0 clamp(18px, 5vw, 64px) clamp(84px, 14vh, 140px);
}
.tale-title{
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(44px, 10vw, 148px); line-height: 0.92; letter-spacing: -0.03em; color: var(--ink);
  text-shadow: 0 4px 60px rgba(0,0,0,0.5);
}
.tale-line{ display: block; overflow: hidden; padding-bottom: 0.06em; }
.tale-line > span{ display: inline-block; transform: translateY(105%); animation: taleLine 1s cubic-bezier(.2,.7,.1,1) var(--d, 0s) forwards; }
@keyframes taleLine{ to{ transform: translateY(0); } }
.tale-rise{ opacity: 0; transform: translateY(14px); animation: taleRise .9s ease var(--d, 0s) forwards; }
@keyframes taleRise{ to{ opacity: 1; transform: none; } }
.tale-sub{ margin-top: 28px; font-size: clamp(18px, 2.6vw, 26px); color: var(--ink); opacity: 0; max-width: 28ch; line-height: 1.35; }
.tale-sub.tale-rise{ color: rgba(240,236,228,0.82); }
.tale-hero__cue{
  position: absolute; z-index: 2; right: clamp(18px, 5vw, 64px); bottom: clamp(28px, 5vh, 44px);
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.28em; color: var(--ink-dim);
}
.tale-hero__cue i{ width: 1px; height: 46px; background: var(--border); position: relative; overflow: hidden; display: block; }
.tale-hero__cue i::after{ content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 40%; background: var(--warm-light, #d9b98a); animation: scrollCue 2.2s ease-in-out infinite; }
.tale-hero__cue:hover{ color: var(--ink); }
@media (max-width: 700px){
  .tale-hero__img{ object-position: 50% 50%; }
  .tale-hero__glow{ background: radial-gradient(ellipse 28% 7% at 50% 52%, rgba(214,32,32,0.3) 0%, rgba(214,32,32,0) 70%); }
  .tale-hero__grade{ background:
    linear-gradient(180deg, rgba(6,6,6,0.55) 0%, rgba(6,6,6,0) 25%, rgba(6,6,6,0.15) 45%, rgba(6,6,6,0.95) 82%); }
  .tale-hero__cue{ display: none; }
}
@media (prefers-reduced-motion: reduce){
  .tale-hero__img, .tale-hero__glow{ animation: none; }
  .tale-line > span, .tale-rise{ animation: none; transform: none; opacity: 1; }
}

.tale-block, .tale-code{
  max-width: 880px; margin: 0 auto;
  padding: clamp(72px, 12vw, 150px) clamp(18px, 5vw, 32px);
}
.tale-big{
  font-family: var(--font-display); font-weight: 700; color: var(--ink);
  font-size: clamp(26px, 5.4vw, 52px); line-height: 1.1; letter-spacing: -0.01em;
  margin-bottom: 14px; text-wrap: balance;
}
.tale-big--xl{ font-size: clamp(40px, 9vw, 96px); font-weight: 800; line-height: 0.98; letter-spacing: -0.025em; margin-bottom: 28px; text-transform: uppercase; }
.tale-big--hot{ color: var(--warm-light, #d9b98a); }
.tale-text{ font-size: clamp(17px, 2.2vw, 21px); line-height: 1.7; color: var(--ink-dim); max-width: 60ch; margin-top: 28px; }
.tale-block--club{ border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); max-width: none; background: #0a0a0a; }
.tale-block--club > *{ max-width: 880px; margin-left: auto; margin-right: auto; }

.tale-scene{ position: relative; min-height: 86svh; display: flex; align-items: flex-end; overflow: hidden; }
.tale-scene img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; filter: brightness(0.7) contrast(1.05); }
.tale-scene__shade{ position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,6,6,0.5) 0%, rgba(6,6,6,0.1) 30%, rgba(6,6,6,0.92) 100%); }
.tale-scene__copy{ position: relative; max-width: 880px; margin: 0 auto; width: 100%; padding: 0 clamp(18px, 5vw, 32px) clamp(48px, 8vw, 96px); }
.tale-scene__copy .tale-text{ color: var(--ink); opacity: 0.9; }

.tale-code__list{ list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border); }
.tale-code__list li{ padding: clamp(24px, 4vw, 40px) 0; border-bottom: 1px solid var(--border); display: grid; gap: 10px; }
.tale-code__list h2{ font-family: var(--font-display); font-weight: 800; font-size: clamp(30px, 6vw, 64px); line-height: 1; letter-spacing: -0.02em; color: var(--ink); }
.tale-code__list p{ font-size: clamp(16px, 2vw, 20px); color: var(--ink-dim); max-width: 48ch; line-height: 1.5; }

.tale-block--early{ text-align: center; }
.tale-block--early .tale-text{ margin-left: auto; margin-right: auto; }
.tale-cta{ display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 44px; }
.tale-sign{ margin-top: clamp(56px, 9vw, 96px); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.3em; color: var(--ink-faint); }

/* Reveal on scroll, only when JS is running and motion is allowed. */
.js [data-reveal]{ opacity: 0; transform: translateY(24px); transition: opacity .9s var(--ease-out, ease), transform .9s var(--ease-out, ease); }
.js [data-reveal].is-in{ opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce){
  .js [data-reveal]{ opacity: 1; transform: none; transition: none; }
}