/* Perspective 1 – Tilt: reference-style 3D plane with pop-out words. */
body {
    margin: 0;
    padding: 0;
    font-family: "Adobe Jenson Pro", Georgia, serif;
    background: #FFFCFA;
    color: #260B00;
}

.page-main {
    overflow: visible;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 124px 16px 64px;
    perspective: 520px;
    perspective-origin: 50% 48%;
    background: #FFFCFA;
}

.poem-container {
    width: min(1100px, 98vw);
    max-height: none;
    margin: 0 auto;
    padding: 12px 0 140px;
    margin-bottom: -100px;
    text-align: center;
    line-height: 1.56;
    font-size: clamp(0.98rem, 1.8vh, 1.28rem);
    letter-spacing: 0.11em;
    color: #260B00;
    transform-style: preserve-3d;
    transition: transform 0.08s ease-out;
    will-change: transform;
    transform-origin: 50% 40%;
}

.line {
    margin: 0.28em 0;
}

.normal-word {
    display: inline-block;
    color: #260B00;
    font-weight: 400;
    transform: translateZ(0);
    transition: opacity 420ms ease, color 420ms ease;
}

.rebel {
    display: inline-block;
    color: #260B00;
    font-style: italic;
    font-weight: 700;
    font-size: 2.35em;
    line-height: 0.78;
    position: relative;
    transform-style: preserve-3d;
    will-change: transform;
    transform: translate3d(0, 0, 110px) rotateY(-15deg) rotate(var(--r, 0deg));
    text-shadow: 0 0 12px rgba(38, 11, 0, 0.22), 0 8px 22px rgba(38, 11, 0, 0.18);
    z-index: 4;
    backface-visibility: visible;
    transition: opacity 420ms ease, color 420ms ease, text-shadow 420ms ease;
}

.poem-container.has-rebel-focus .normal-word,
.poem-container.has-rebel-focus .rebel {
    opacity: 0.48;
    color: rgba(38, 11, 0, 0.55);
    text-shadow: none;
}

.poem-container.has-rebel-focus .rebel.is-active {
    opacity: 1;
    color: #260B00;
    text-shadow: 0 0 12px rgba(38, 11, 0, 0.28), 0 8px 22px rgba(38, 11, 0, 0.22);
}

.gradient-overlay {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 5;
}

.corner-gradient {
    position: absolute;
    width: 42vw;
    height: 42vw;
    max-width: 520px;
    max-height: 520px;
    opacity: 0;
    filter: blur(10px);
    transition: opacity 380ms ease, transform 1500ms cubic-bezier(0.19, 0.82, 0.22, 1);
}

.corner-top-left {
    top: -14vw;
    left: -14vw;
    transform: scale(0.4) translate(-22%, -22%);
    background: radial-gradient(circle at 0% 0%, rgba(36, 88, 40, 0.48) 0%, rgba(36, 88, 40, 0.28) 34%, rgba(36, 88, 40, 0) 76%);
}

.corner-top-right {
    top: -14vw;
    right: -14vw;
    transform: scale(0.4) translate(22%, -22%);
    background: radial-gradient(circle at 100% 0%, rgba(36, 88, 40, 0.48) 0%, rgba(36, 88, 40, 0.28) 34%, rgba(36, 88, 40, 0) 76%);
}

.corner-bottom-left {
    bottom: -14vw;
    left: -14vw;
    transform: scale(0.4) translate(-22%, 22%);
    background: radial-gradient(circle at 0% 100%, rgba(36, 88, 40, 0.48) 0%, rgba(36, 88, 40, 0.28) 34%, rgba(36, 88, 40, 0) 76%);
}

.corner-bottom-right {
    bottom: -14vw;
    right: -14vw;
    transform: scale(0.4) translate(22%, 22%);
    background: radial-gradient(circle at 100% 100%, rgba(36, 88, 40, 0.48) 0%, rgba(36, 88, 40, 0.28) 34%, rgba(36, 88, 40, 0) 76%);
}

body.rebel-focus .corner-gradient {
    opacity: 1;
}

body.rebel-focus .corner-top-left {
    transform: scale(1.55) translate(34%, 34%);
}

body.rebel-focus .corner-top-right {
    transform: scale(1.55) translate(-34%, 34%);
}

body.rebel-focus .corner-bottom-left {
    transform: scale(1.55) translate(34%, -34%);
}

body.rebel-focus .corner-bottom-right {
    transform: scale(1.55) translate(-34%, -34%);
}

.r1 { --r: -6deg; }
.r2 { --r: 4deg; }
.r3 { --r: -4deg; }
.r4 { --r: 5deg; }
.r5 { --r: 0deg; }