*, *::before, *::after { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow-x: hidden;
    font-family: 'Georgia', 'Times New Roman', serif;
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
}

.chapter {
    position: relative;
    min-height: 100dvh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    scroll-snap-align: start;
    overflow: hidden;
    padding: 6vh 6vw;
    text-align: center;
}

.chapter-inner {
    position: relative;
    z-index: 2;
    max-width: 640px;
}

.chapter-kicker {
    font-family: 'Georgia', serif;
    font-size: clamp(0.75rem, 2.4vw, 0.95rem);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(244,241,234,0.75);
    margin: 0 0 1.1rem;
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.9s ease, transform 0.9s ease;
}

.chapter.visible .chapter-kicker {
    opacity: 1;
    transform: translateY(0);
}

.chapter-text {
    font-size: clamp(1.4rem, 5vw, 2.4rem);
    line-height: 1.5;
    color: #f4f1ea;
    text-shadow: 0 2px 14px rgba(0,0,0,0.45);
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 1.1s ease, transform 1.1s ease;
    margin: 0;
}

.chapter.visible .chapter-text {
    opacity: 1;
    transform: translateY(0);
}

/* --- Palette per capitolo --- */

.chapter[data-bg="storm"]   { background: radial-gradient(ellipse at top, #1b2a41 0%, #0a0e17 70%); }
.chapter[data-bg="dawn"]    { background: linear-gradient(180deg, #2b1055 0%, #ff7e5f 100%); }
.chapter[data-bg="dusk"]    { background: linear-gradient(180deg, #16213e 0%, #1a1a2e 100%); }
.chapter[data-bg="sea"]     { background: linear-gradient(180deg, #0f3460 0%, #16537e 100%); }
.chapter[data-bg="storm2"]  { background: radial-gradient(ellipse at top, #3d1f1f 0%, #1a0e0e 75%); }
.chapter[data-bg="sunrise"] { background: linear-gradient(180deg, #ff9a56 0%, #ffd56b 100%); }
.chapter[data-bg="warm"]    { background: linear-gradient(180deg, #ff6a88 0%, #ffb86b 100%); }

/* --- Capitolo 1: la tempesta --- */

#ch1 .waves {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40vh;
    z-index: 1;
}

#ch1 .wave-path {
    animation: drift 8s ease-in-out infinite;
    transform-origin: center bottom;
}

#ch1 .wave-path.back {
    animation-duration: 13s;
    animation-direction: reverse;
    opacity: 0.5;
}

@keyframes drift {
    0%   { transform: translate(-2.5%, 0); }
    50%  { transform: translate(2.5%, -10px); }
    100% { transform: translate(-2.5%, 0); }
}

#ch1 .boat {
    position: absolute;
    bottom: 13vh;
    left: 50%;
    width: 110px;
    height: auto;
    z-index: 1;
    animation: rock 4.5s ease-in-out infinite;
    transform-origin: 50% 85%;
}

@keyframes rock {
    0%, 100% { transform: translateX(-50%) rotate(-4deg) translateY(0); }
    50%      { transform: translateX(-50%) rotate(4deg) translateY(-7px); }
}

#ch1 .lightning {
    position: absolute;
    inset: 0;
    background: #eaf2ff;
    opacity: 0;
    z-index: 1;
    pointer-events: none;
}

.chapter.visible#ch1 .lightning {
    animation: flash 6.5s ease-in-out 1s infinite;
}

#ch1 .bolt {
    position: absolute;
    top: 3vh;
    height: 78vh;
    right: 22%;
    width: 60px;
    z-index: 1;
    opacity: 0;
    filter: drop-shadow(0 0 12px rgba(234,242,255,0.9));
    pointer-events: none;
}

#ch1 .bolt2 {
    right: auto;
    left: 16%;
    width: 50px;
}

.chapter.visible#ch1 .bolt {
    animation: flash 6.5s ease-in-out 1s infinite;
}

.chapter.visible#ch1 .bolt2 {
    animation: flash 6.5s ease-in-out infinite;
    animation-delay: -2.25s;
}

@keyframes flash {
    0%, 92%, 100% { opacity: 0; }
    93%   { opacity: 0.55; }
    94%   { opacity: 0.05; }
    95%   { opacity: 0.35; }
    96%   { opacity: 0; }
}

/* --- Capitolo 2: rufy / alba --- */

#ch2 .sun {
    position: absolute;
    top: 12vh;
    left: 50%;
    width: 46vh;
    height: 46vh;
    border-radius: 50%;
    transform: translateX(-50%);
    background: radial-gradient(circle, rgba(255,230,180,0.95) 0%, rgba(255,160,110,0.55) 45%, rgba(255,126,95,0) 72%);
    z-index: 1;
    opacity: 0;
    transition: opacity 1.8s ease;
}

.chapter.visible#ch2 .sun {
    opacity: 1;
    animation: sunpulse 5s ease-in-out infinite 1.8s;
}

@keyframes sunpulse {
    0%, 100% { transform: translateX(-50%) scale(1); }
    50%      { transform: translateX(-50%) scale(1.05); }
}

#ch2 .bird {
    position: absolute;
    left: 22%;
    top: 60vh;
    width: 34px;
    z-index: 1;
    opacity: 0;
    animation: fly 9s linear infinite;
}

#ch2 .bird2 { left: 58%; width: 24px; animation-duration: 12s; animation-delay: 2s; }
#ch2 .bird3 { left: 76%; width: 20px; animation-duration: 7s; animation-delay: 4s; }

@keyframes fly {
    0%   { top: 62vh; opacity: 0; }
    12%  { opacity: 0.75; }
    88%  { opacity: 0.75; }
    100% { top: 4vh; opacity: 0; }
}

#ch2 .bird .wing {
    transform-box: fill-box;
    animation: flap 0.55s ease-in-out infinite alternate;
}

#ch2 .bird .wing-left  { transform-origin: 100% 50%; }
#ch2 .bird .wing-right { transform-origin: 0% 50%; }

#ch2 .bird2 .wing { animation-duration: 0.42s; }
#ch2 .bird3 .wing { animation-duration: 0.36s; }

@keyframes flap {
    from { transform: scaleY(1); }
    to   { transform: scaleY(0.2); }
}

#ch2 .figure.luffy {
    position: absolute;
    bottom: 6vh;
    left: 50%;
    width: 200px;
    z-index: 1;
    opacity: 0;
    transform: translateX(-50%) translateY(20px);
    transition: opacity 1.3s ease 0.3s, transform 1.3s ease 0.3s;
}

.chapter.visible#ch2 .figure.luffy {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    animation: sway 4.5s ease-in-out infinite 1.6s;
}

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

/* --- Capitolo 3: zoro / crepuscolo --- */

#ch3 .moon {
    position: absolute;
    top: 8vh;
    right: 14%;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #f4f6ff 0%, #cfd8f0 55%, rgba(207,216,240,0) 75%);
    box-shadow: 0 0 40px rgba(207,216,240,0.5);
    z-index: 1;
    opacity: 0;
    transition: opacity 1.8s ease;
}

.chapter.visible#ch3 .moon { opacity: 1; }

#ch3 .stars {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    opacity: 0;
    transition: opacity 1.5s ease;
}

.chapter.visible#ch3 .stars { opacity: 1; }

#ch3 .star { fill: #f4f1ea; animation: twinkle 3s ease-in-out infinite; }
#ch3 .s2 { animation-delay: 0.4s; }
#ch3 .s3 { animation-delay: 0.8s; }
#ch3 .s4 { animation-delay: 1.2s; }
#ch3 .s5 { animation-delay: 1.6s; }
#ch3 .s6 { animation-delay: 0.2s; }
#ch3 .s7 { animation-delay: 1s; }
#ch3 .s8 { animation-delay: 1.8s; }
#ch3 .s9 { animation-delay: 0.6s; }
#ch3 .s10 { animation-delay: 1.4s; }

@keyframes twinkle {
    0%, 100% { opacity: 0.3; }
    50%      { opacity: 1; }
}

#ch3 .figure.zoro {
    position: absolute;
    bottom: 6vh;
    left: -15%;
    width: 160px;
    z-index: 2;
    opacity: 0;
}

.chapter.visible#ch3 .figure.zoro {
    animation: dash 6s linear infinite 1.4s;
}

@keyframes dash {
    0%     { left: -15%; opacity: 0; filter: drop-shadow(0 0 0 rgba(13,20,36,0)); }
    5%     { opacity: 1; }
    40%    { left: 100%; opacity: 1; filter: drop-shadow(-18px 0 0 rgba(13,20,36,0.35)) drop-shadow(-34px 0 0 rgba(13,20,36,0.15)); }
    45%    { left: 100%; opacity: 0; }
    45.01% { left: -15%; opacity: 0; filter: drop-shadow(0 0 0 rgba(13,20,36,0)); }
    100%   { left: -15%; opacity: 0; }
}

/* --- Canne tagliate al passaggio di Zoro --- */

#ch3 .cut-obj {
    position: absolute;
    bottom: 7vh;
    width: 20px;
    height: 120px;
    z-index: 1;
}

#ch3 .obj1 { left: 22%; }
#ch3 .obj2 { left: 50%; }
#ch3 .obj3 { left: 76%; }

#ch3 .cut-obj .reed { width: 100%; height: 100%; }

#ch3 .cut-obj .slash {
    position: absolute;
    top: 42%;
    left: -20px;
    width: 60px;
    height: 4px;
    background: #eaf2ff;
    border-radius: 2px;
    transform: rotate(-18deg);
    opacity: 0;
    box-shadow: 0 0 10px rgba(234,242,255,0.9);
}

.chapter.visible#ch3 .obj1 .half-top,
.chapter.visible#ch3 .obj1 .half-bottom,
.chapter.visible#ch3 .obj1 .slash { animation: slice1 6s linear infinite 1.4s; transform-box: fill-box; }

.chapter.visible#ch3 .obj2 .half-top,
.chapter.visible#ch3 .obj2 .half-bottom,
.chapter.visible#ch3 .obj2 .slash { animation: slice2 6s linear infinite 1.4s; transform-box: fill-box; }

.chapter.visible#ch3 .obj3 .half-top,
.chapter.visible#ch3 .obj3 .half-bottom,
.chapter.visible#ch3 .obj3 .slash { animation: slice3 6s linear infinite 1.4s; transform-box: fill-box; }

#ch3 .cut-obj .slash { transform-box: content-box; }

.chapter.visible#ch3 .obj1 .half-top    { animation-name: cut-top-14; }
.chapter.visible#ch3 .obj1 .half-bottom { animation-name: cut-bottom-14; }
.chapter.visible#ch3 .obj1 .slash       { animation-name: cut-flash-14; }

.chapter.visible#ch3 .obj2 .half-top    { animation-name: cut-top-25; }
.chapter.visible#ch3 .obj2 .half-bottom { animation-name: cut-bottom-25; }
.chapter.visible#ch3 .obj2 .slash       { animation-name: cut-flash-25; }

.chapter.visible#ch3 .obj3 .half-top    { animation-name: cut-top-37; }
.chapter.visible#ch3 .obj3 .half-bottom { animation-name: cut-bottom-37; }
.chapter.visible#ch3 .obj3 .slash       { animation-name: cut-flash-37; }

@keyframes cut-top-14 {
    0%, 13%   { transform: translate(0,0) rotate(0deg); opacity: 1; }
    18%       { transform: translate(-8px,-10px) rotate(-12deg); opacity: 0; }
    99%       { opacity: 0; }
    100%      { transform: translate(0,0) rotate(0deg); opacity: 1; }
}
@keyframes cut-bottom-14 {
    0%, 13%   { transform: translate(0,0) rotate(0deg); opacity: 1; }
    18%       { transform: translate(8px,10px) rotate(12deg); opacity: 0; }
    99%       { opacity: 0; }
    100%      { transform: translate(0,0) rotate(0deg); opacity: 1; }
}
@keyframes cut-flash-14 {
    0%, 12.5% { opacity: 0; }
    13%       { opacity: 1; }
    16%       { opacity: 0; }
    100%      { opacity: 0; }
}

@keyframes cut-top-25 {
    0%, 24%   { transform: translate(0,0) rotate(0deg); opacity: 1; }
    29%       { transform: translate(-8px,-10px) rotate(-12deg); opacity: 0; }
    99%       { opacity: 0; }
    100%      { transform: translate(0,0) rotate(0deg); opacity: 1; }
}
@keyframes cut-bottom-25 {
    0%, 24%   { transform: translate(0,0) rotate(0deg); opacity: 1; }
    29%       { transform: translate(8px,10px) rotate(12deg); opacity: 0; }
    99%       { opacity: 0; }
    100%      { transform: translate(0,0) rotate(0deg); opacity: 1; }
}
@keyframes cut-flash-25 {
    0%, 23.5% { opacity: 0; }
    24%       { opacity: 1; }
    27%       { opacity: 0; }
    100%      { opacity: 0; }
}

@keyframes cut-top-37 {
    0%, 36%   { transform: translate(0,0) rotate(0deg); opacity: 1; }
    41%       { transform: translate(-8px,-10px) rotate(-12deg); opacity: 0; }
    99%       { opacity: 0; }
    100%      { transform: translate(0,0) rotate(0deg); opacity: 1; }
}
@keyframes cut-bottom-37 {
    0%, 36%   { transform: translate(0,0) rotate(0deg); opacity: 1; }
    41%       { transform: translate(8px,10px) rotate(12deg); opacity: 0; }
    99%       { opacity: 0; }
    100%      { transform: translate(0,0) rotate(0deg); opacity: 1; }
}
@keyframes cut-flash-37 {
    0%, 35.5% { opacity: 0; }
    36%       { opacity: 1; }
    39%       { opacity: 0; }
    100%      { opacity: 0; }
}

#ch3 .headband-tail {
    transform-box: fill-box;
    transform-origin: 0% 30%;
    animation: windflag 2.4s ease-in-out infinite;
}

@keyframes windflag {
    0%, 100% { transform: rotate(0deg); }
    50%      { transform: rotate(-8deg); }
}

/* --- Capitolo 4: il viaggio --- */

#ch4 .sea-waves {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 42vh;
    z-index: 2;
}

#ch4 .sea-waves .wave-path {
    animation: drift 9s ease-in-out infinite;
    transform-origin: center bottom;
}

#ch4 .sea-waves .wave-path.back {
    animation-duration: 14s;
    animation-direction: reverse;
    opacity: 0.5;
}

#ch4 .journey {
    position: absolute;
    left: 0;
    bottom: 16vh;
    width: 100%;
    height: 18vh;
    z-index: 1;
}

#ch4 .journey-strip {
    position: relative;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1.5s ease;
}

.chapter.visible#ch4 .journey-strip {
    opacity: 1;
}

#ch4 .island {
    position: absolute;
    bottom: 0;
    width: 130px;
    margin-left: -65px;
    text-align: center;
}

#ch4 .journey-strip .island:nth-child(1) { bottom: -4vh; z-index: 0; }
#ch4 .journey-strip .island:nth-child(2) { bottom: -6vh; }
#ch4 .journey-strip .island:nth-child(3) { bottom: -4vh; }

#ch4 .island-shape { width: 100%; height: auto; }

#ch4 .cloud {
    position: absolute;
    z-index: 1;
    width: 108px;
    height: 42px;
    background: #fbfdff;
    border-radius: 40px;
    box-shadow: 0 6px 14px rgba(5,20,45,0.3);
    opacity: 0;
    transition: opacity 1.6s ease, transform 1.6s ease;
}

.chapter.visible#ch4 .cloud {
    opacity: 1;
}

#ch4 .cloud::before,
#ch4 .cloud::after {
    content: "";
    position: absolute;
    background: #fbfdff;
    border-radius: 50%;
}

#ch4 .cloud::before { width: 46px; height: 46px; top: -22px; left: 10px; }
#ch4 .cloud::after  { width: 32px; height: 32px; top: -15px; right: 14px; }

#ch4 .cloud span {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-family: system-ui, -apple-system, sans-serif;
    font-weight: 800;
    font-size: 0.95rem;
    letter-spacing: 0.03em;
    color: #123a5e;
}

#ch4 .cloud1 { top: 7vh;  left: 6%;  transform: scale(0.9) rotate(-2deg); animation: cloud-drift-1 24s ease-in-out infinite; }
#ch4 .cloud2 { top: 15vh; left: 46%; transform: scale(1.1) rotate(1deg); animation: cloud-drift-2 30s ease-in-out infinite; }
#ch4 .cloud3 { top: 5vh;  left: 74%; transform: scale(0.8) rotate(-3deg); animation: cloud-drift-3 20s ease-in-out infinite; }

@keyframes cloud-drift-1 {
    0%, 100% { margin-left: 0; }
    50%      { margin-left: 14px; }
}
@keyframes cloud-drift-2 {
    0%, 100% { margin-left: 0; }
    50%      { margin-left: -18px; }
}
@keyframes cloud-drift-3 {
    0%, 100% { margin-left: 0; }
    50%      { margin-left: 10px; }
}

#ch4 .journey-boat {
    position: absolute;
    bottom: 13vh;
    left: -15%;
    width: 110px;
    z-index: 2;
    opacity: 0;
    transform-origin: 50% 85%;
}

.chapter.visible#ch4 .journey-boat {
    opacity: 1;
    animation: sail-across 14s linear infinite 0.6s, rock 4s ease-in-out infinite 0.6s;
    z-index: 3;
}

@keyframes sail-across {
    0%   { left: -15%; }
    100% { left: 115%; }
}

/* --- Capitolo 5: la tempesta --- */

#ch5 .storm-cloud {
    position: absolute;
    background: radial-gradient(ellipse at 40% 30%, rgba(30,12,12,0.9), rgba(12,5,5,0.55) 70%);
    border-radius: 45% 55% 60% 40% / 55% 45% 55% 45%;
    filter: blur(3px);
    z-index: 1;
    opacity: 0;
    transition: opacity 1.6s ease;
}

.chapter.visible#ch5 .storm-cloud { opacity: 0.9; }

#ch5 .c1 { width: 42vh; height: 20vh; top: 2vh;  left: -6%;  animation: cloudroll 9s ease-in-out infinite; }
#ch5 .c2 { width: 34vh; height: 16vh; top: 10vh; left: 38%;  animation: cloudroll 12s ease-in-out infinite 1.5s; }
#ch5 .c3 { width: 30vh; height: 15vh; top: 1vh;  right: -8%; animation: cloudroll 10s ease-in-out infinite 3s; }

@keyframes cloudroll {
    0%, 100% { transform: translateX(0) scale(1); }
    50%      { transform: translateX(3%) scale(1.04); }
}

#ch5 .rain-drops {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
}

#ch5 .raindrop {
    position: absolute;
    top: -8vh;
    width: 2px;
    background: linear-gradient(180deg, rgba(255,233,214,0) 0%, rgba(255,233,214,0.65) 100%);
    transform: rotate(13deg);
    opacity: 0;
}

.chapter.visible#ch5 .raindrop {
    animation-name: rain-fall;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

@keyframes rain-fall {
    0%   { top: -8vh; opacity: 0; }
    6%   { opacity: 0.8; }
    88%  { opacity: 0.8; }
    100% { top: 108vh; opacity: 0; }
}

#ch5 .lightning {
    position: absolute;
    inset: 0;
    background: #fff3e6;
    opacity: 0;
    z-index: 1;
    pointer-events: none;
}

.chapter.visible#ch5 .lightning {
    animation: flash 5s ease-in-out 0.8s infinite;
}

#ch5 .bolt {
    position: absolute;
    top: 2vh;
    height: 62vh;
    left: 44%;
    width: 55px;
    z-index: 1;
    opacity: 0;
    filter: drop-shadow(0 0 14px rgba(255,233,214,0.9));
    pointer-events: none;
}

.chapter.visible#ch5 .bolt {
    animation: flash 5s ease-in-out 0.8s infinite;
}

#ch5 .figures-together {
    position: absolute;
    bottom: 5vh;
    left: 50%;
    width: 190px;
    z-index: 2;
    opacity: 0;
    transform: translateX(-50%) translateY(16px);
    transition: opacity 1.3s ease 0.3s, transform 1.3s ease 0.3s;
}

.chapter.visible#ch5 .figures-together {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

#ch5 .together-fig {
    transform-box: fill-box;
    transform-origin: 50% 100%;
    animation: windlean 2.8s ease-in-out infinite 1.6s;
}

#ch5 .fig-b { animation-delay: 1.75s; }

@keyframes windlean {
    0%, 100% { transform: rotate(-3deg); }
    50%      { transform: rotate(3deg); }
}

/* --- Capitolo 6: l'arrivo --- */

#ch6 .chapter-kicker {
    color: rgba(110,50,10,0.85);
    text-shadow: 0 1px 6px rgba(255,255,255,0.5);
}

#ch6 .arrival-sun {
    position: absolute;
    top: 6vh;
    left: 50%;
    width: 52vh;
    height: 52vh;
    border-radius: 50%;
    transform: translateX(-50%);
    background: radial-gradient(circle, rgba(255,255,255,0.95) 0%, rgba(255,213,107,0.6) 45%, rgba(255,154,86,0) 72%);
    z-index: 1;
    opacity: 0;
    transition: opacity 1.8s ease;
}

.chapter.visible#ch6 .arrival-sun {
    opacity: 1;
    animation: sunpulse 5s ease-in-out infinite 1.8s;
}

#ch6 .confetti-piece {
    position: absolute;
    top: -6vh;
    z-index: 1;
    opacity: 0;
    border-radius: 2px;
    animation-name: confetti-fall;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

.chapter.visible#ch6 .confetti-piece { opacity: 0.9; }

@keyframes confetti-fall {
    0%   { transform: translateY(0) rotate(0deg); opacity: 0; }
    8%   { opacity: 0.9; }
    92%  { opacity: 0.9; }
    100% { transform: translateY(112vh) rotate(540deg); opacity: 0; }
}

/* --- Capitolo 7: dedica finale --- */

#ch7 .heart {
    position: relative;
    width: 70px;
    height: 62px;
    margin: 0 auto 1.6rem;
    opacity: 0;
    transition: opacity 1.6s ease, transform 1.6s ease;
    transform: scale(0.8);
}

.chapter.visible#ch7 .heart {
    opacity: 1;
    transform: scale(1);
    animation: heartbeat 1.8s ease-in-out infinite 1.6s;
}

#ch7 .heart::before,
#ch7 .heart::after {
    content: "";
    position: absolute;
    top: 0;
    width: 38px;
    height: 58px;
    background: #fff5ee;
    border-radius: 38px 38px 0 0;
}

#ch7 .heart::before { left: 35px; transform: rotate(-45deg); transform-origin: 0 100%; }
#ch7 .heart::after  { left: -3px; transform: rotate(45deg); transform-origin: 100% 100%; }

@keyframes heartbeat {
    0%, 100% { transform: scale(1); }
    25%      { transform: scale(1.12); }
    40%      { transform: scale(1); }
    55%      { transform: scale(1.08); }
}

#ch7 .final-text { font-size: clamp(1.5rem, 5.5vw, 2.6rem); }

#ch7 .final-signature {
    margin-top: 1.4rem;
    font-style: italic;
    font-size: 1.1rem;
    color: rgba(244,241,234,0.85);
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 1.1s ease 0.4s, transform 1.1s ease 0.4s;
}

.chapter.visible#ch7 .final-signature {
    opacity: 1;
    transform: translateY(0);
}

@media (min-width: 720px) {
    .chapter-text { font-size: clamp(1.8rem, 3.2vw, 3rem); }
}