/* Plain homepage: no 3D, no ticker, no scroll-scrub. Tokens stay in motion.css. */

.hero {
    height: auto !important;
}
.hero-pin {
    position: static !important;
    height: auto !important;
    overflow: visible;
    padding: 110px 24px 56px;
}
.hero-fan,
.hero-ghost,
.orb,
.scroll-cue,
.marquee {
    display: none !important;
}
.hero-kicker,
.hero-title {
    opacity: 1 !important;
    animation: none !important;
}
.hero-cover,
.hero-cover img,
.hero-scene,
.issue-visual,
.issue-cover-wrap,
.issue-info {
    transform: none !important;
    perspective: none !important;
    transform-style: flat !important;
    opacity: 1 !important;
    will-change: auto !important;
}
.issue-cover-wrap::after {
    transform: none;
}
.reveal {
    opacity: 1;
    transform: none;
}
.btn:hover,
.btn-read:hover,
.btn-gold:hover,
.nav-links .btn-subscribe:hover {
    transform: none;
}
.ig-item img {
    transition: none;
}
.ig-item:hover img {
    transform: none;
}
.fb3d-stage {
    perspective: none !important;
}
.fb3d-book,
.fb3d-sheet,
.fb3d-face {
    transform: none !important;
    transform-style: flat !important;
}
.fb3d-close:hover {
    transform: none;
}
.hsj-reader-page {
    max-height: 86vh;
    max-width: min(92vw, 720px);
    width: auto;
    height: auto;
    object-fit: contain;
    background: #fff;
    box-shadow: 0 18px 60px rgba(0, 0, 0, 0.45);
}

/* Issuu-style reader (cover first, then two-page spread). Not the 3D homepage. */
.flipbook-modal {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    background: rgba(0, 0, 0, 0.95);
    z-index: 9999;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.flipbook-modal.active {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}
.flipbook-modal-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    height: 90%;
    display: block;
}
.flipbook-close {
    position: absolute;
    top: -40px;
    right: 0;
    background: none;
    border: none;
    color: #fff;
    font-size: 3rem;
    cursor: pointer;
    z-index: 10;
}
.flipbook-close:hover { color: var(--gold); }
.flipbook-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: calc(100% - 60px);
    position: relative;
}
.flipbook-container { position: relative; margin: 0 auto; }
.flipbook-chevron {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    border: none;
    font-size: 2.5rem;
    width: 50px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10000;
    border-radius: 4px;
}
.flipbook-chevron:hover { background: var(--gold); color: var(--ink); }
.flipbook-chevron.left { left: 1.5rem; }
.flipbook-chevron.right { right: 1.5rem; }
.flipbook-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem 0;
    color: rgba(255, 255, 255, 0.8);
    font-family: var(--sans);
    font-size: 0.85rem;
    letter-spacing: 1px;
}
.flipbook-mobile .flipbook-modal-content {
    width: 100%;
    height: 100%;
    padding: 0;
    top: 0;
    left: 0;
    transform: none;
}
.flipbook-mobile .flipbook-wrapper {
    height: calc(100% - 28px) !important;
    overflow: hidden;
}
.flipbook-mobile .flipbook-chevron {
    width: 32px;
    height: 44px;
    font-size: 1.2rem;
    left: auto;
}
.flipbook-mobile .flipbook-chevron.left { left: 0.2rem; }
.flipbook-mobile .flipbook-chevron.right { right: 0.2rem; }
.flipbook-mobile .flipbook-close {
    top: calc(0.5rem + env(safe-area-inset-top, 0px));
    right: calc(0.5rem + env(safe-area-inset-right, 0px));
    font-size: 2rem;
    min-width: 44px;
    min-height: 44px;
}