/* styles.css */

:root {
    --mouse-x: 50%;
    --mouse-y: 50%;
    --split-pos: 60%;
}

/* Smooth anchor travel, offset for sticky press bar */
html {
    scroll-behavior: smooth;
    caret-color: #dc3214;
    background-color: #f4ebd9;
}

section[id] {
    scroll-margin-top: 76px;
    content-visibility: auto;
    contain-intrinsic-size: 1px 750px;
}

/* Browser Surface: Themed custom scrollbar */
::-webkit-scrollbar {
    width: 12px;
    background: #ebe1cd;
    border-left: 3px solid #1b1c19;
}
::-webkit-scrollbar-thumb {
    background: #ffd700;
    border: 2px solid #1b1c19;
    box-shadow: 1px 1px 0px 0px #1b1c19;
}
::-webkit-scrollbar-thumb:hover {
    background: #dc3214;
}

/* Browser Surface: Text Selection */
::selection {
    background-color: #ffd700;
    color: #1b1c19;
}

/* Keyboard focus: ink ring, never a browser glow */
a:focus-visible, button:focus-visible, input:focus-visible, [tabindex]:focus-visible {
    outline: 3px solid #1b1c19;
    outline-offset: 3px;
}

/* Authentic Ben-Day Halftone Dot Screens */
.halftone-bg {
    background-image: radial-gradient(circle, #1b1c19 1.75px, transparent 1.75px);
    background-size: 10px 10px;
    background-position: calc(var(--mouse-x) * -0.06) calc(var(--mouse-y) * -0.06);
    opacity: 0.22;
    transition: background-position 0.15s ease-out;
    pointer-events: none;
}

.halftone-gold {
    background-image: radial-gradient(circle, #705d00 2px, transparent 2px);
    background-size: 10px 10px;
    opacity: 0.25;
    pointer-events: none;
}

.halftone-crimson {
    background-image: radial-gradient(circle, #8e1300 2px, transparent 2px);
    background-size: 10px 10px;
    opacity: 0.25;
    pointer-events: none;
}


/* Rotating Starburst print-shop machinery */
.starburst-bg {
    background: repeating-conic-gradient(
        from 0deg,
        transparent 0deg 15deg,
        rgba(27, 28, 25, 0.07) 15deg 30deg
    );
    background-position: center center;
    background-size: 200% 200%;
    animation: spin-slow 60s linear infinite;
}

/* Kinetic Comic Speed Lines */
.speed-lines-radial {
    background: repeating-radial-gradient(
        circle at 50% 50%,
        transparent 0px,
        transparent 8px,
        rgba(27, 28, 25, 0.08) 9px,
        rgba(27, 28, 25, 0.08) 12px
    );
    pointer-events: none;
}

.action-burst-lines {
    background: repeating-conic-gradient(
        from 0deg,
        transparent 0deg 8deg,
        rgba(220, 50, 20, 0.15) 8deg 10deg,
        transparent 10deg 20deg
    );
    animation: pulse-burst 4s ease-in-out infinite;
    pointer-events: none;
}

/* Comic borders */
.comic-border-thick {
    border: 4px solid #1b1c19;
}
.comic-border {
    border: 3px solid #1b1c19;
}
.comic-border-thin {
    border: 2px solid #1b1c19;
}

/* Hard ink offset shadows (No blur, solid printed ink) */
.comic-shadow-heavy {
    box-shadow: 6px 6px 0px 0px #1b1c19;
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.comic-shadow {
    box-shadow: 3px 3px 0px 0px #1b1c19;
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Tactile button hover: object lifts and shadow turns Hero Crimson */
.comic-shadow-hover-heavy:hover {
    box-shadow: 10px 10px 0px 0px #dc3214;
    transform: translate(-4px, -4px) scale(1.02);
}
.comic-shadow-hover:hover {
    box-shadow: 6px 6px 0px 0px #dc3214;
    transform: translate(-3px, -3px);
}

/* Tactile button active press: lands flush on the paper */
.comic-button:active {
    box-shadow: 0px 0px 0px 0px #1b1c19 !important;
    transform: translate(6px, 6px) scale(0.96) !important;
}

/* Card Hover Effects: panels lift while staying inked */
.comic-card-hover {
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s ease;
}
.comic-card-hover:hover {
    transform: translateY(-6px) scale(1.02);
    box-shadow: 12px 12px 0px 0px #1b1c19;
    z-index: 30;
}
.comic-card-hover .halftone-bg {
    transition: opacity 0.3s ease, background-position 0.3s ease;
}
.comic-card-hover:hover .halftone-bg {
    opacity: 0.32;
    background-position: -4px -4px;
}

/* 3D Parallax & Cover Spot-Gloss Sheen */
.perspective-container {
    perspective: 1200px;
}

.comic-3d-card {
    transform-style: preserve-3d;
    transition: transform 0.15s ease-out, box-shadow 0.2s ease-out;
    will-change: transform;
}

.comic-3d-card:hover {
    box-shadow: 14px 14px 0px 0px #1b1c19;
}

.comic-layer-depth-sm {
    transform: translateZ(12px);
}
.comic-layer-depth-md {
    transform: translateZ(24px);
}
.comic-layer-depth-lg {
    transform: translateZ(36px);
}

/* Drafting table blueprint grid for teaser covers */
.drafting-grid {
    background-image: linear-gradient(rgba(27, 28, 25, 0.08) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(27, 28, 25, 0.08) 1px, transparent 1px);
    background-size: 16px 16px;
}

/* Diagonal classified tape banner */
.classified-tape {
    background: repeating-linear-gradient(
        -45deg,
        #ffd700,
        #ffd700 12px,
        #1b1c19 12px,
        #1b1c19 24px
    );
}

.comic-gloss-sheen {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        115deg,
        transparent 20%,
        rgba(255, 255, 255, 0.4) 45%,
        rgba(255, 255, 255, 0.7) 50%,
        rgba(255, 255, 255, 0.4) 55%,
        transparent 80%
    );
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    mix-blend-mode: overlay;
    z-index: 25;
}

.comic-3d-card:hover .comic-gloss-sheen {
    opacity: 1;
}

/* Interactive Hero Split / Reveal Slider */
.slider-container {
    position: relative;
    user-select: none;
    touch-action: pan-y;
}

.slider-layer-photo {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.slider-layer-inked {
    position: absolute;
    inset: 0;
    z-index: 2;
    clip-path: polygon(var(--split-pos) 0%, 100% 0%, 100% 100%, var(--split-pos) 100%);
}

.slider-divider-line {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--split-pos);
    width: 4px;
    background: #1b1c19;
    z-index: 20;
    transform: translateX(-50%);
    pointer-events: none;
    box-shadow: 0 0 0 1px #ffd700;
}

.slider-handle {
    position: absolute;
    top: 50%;
    left: var(--split-pos);
    transform: translate(-50%, -50%);
    z-index: 30;
    cursor: ew-resize;
    touch-action: none;
}

.slider-handle-bubble {
    background: #ffd700;
    color: #1b1c19;
    border: 3px solid #1b1c19;
    box-shadow: 4px 4px 0px 0px #1b1c19;
    padding: 8px 14px;
    font-family: "Space Mono", monospace;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    transition: transform 0.15s ease, background-color 0.15s ease;
}

.slider-handle:hover .slider-handle-bubble,
.slider-handle:active .slider-handle-bubble {
    background: #dc3214;
    color: #fffbff;
    transform: scale(1.08);
    box-shadow: 6px 6px 0px 0px #1b1c19;
}

/* Hard text offset under display type */
.text-shadow-comic {
    text-shadow: 3px 3px 0px #ffd700;
}
.text-shadow-crimson {
    text-shadow: 3px 3px 0px #dc3214;
}

/* Signature Speech Bubble */
.speech-bubble {
    position: relative;
    transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.speech-bubble::after {
    content: '';
    position: absolute;
    bottom: -16px;
    left: 28px;
    border-width: 16px 16px 0 0;
    border-style: solid;
    border-color: #1b1c19 transparent transparent transparent;
}
.speech-bubble::before {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 32px;
    border-width: 10px 10px 0 0;
    border-style: solid;
    border-color: #ffffff transparent transparent transparent;
    z-index: 1;
}

.speech-bubble-pulp::before {
    border-color: #ebe1cd transparent transparent transparent;
}

/* Tactile Ink Splat & Particle Animation */
.ink-burst-particle {
    position: fixed;
    pointer-events: none;
    z-index: 9999;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: ink-splat 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes ink-splat {
    0% {
        transform: translate(-50%, -50%) scale(0.2);
        opacity: 1;
    }
    50% {
        opacity: 0.9;
    }
    100% {
        transform: translate(-50%, -50%) scale(1.6) translate(var(--tx, 0), var(--ty, 0));
        opacity: 0;
    }
}

/* Animations */
@keyframes pop-in {
    0% {
        transform: scale(0.6) translateY(12px);
        opacity: 0;
    }
    70% {
        transform: scale(1.06) translateY(-2px);
        opacity: 1;
    }
    100% {
        transform: scale(1) translateY(0);
        opacity: 1;
    }
}

@keyframes slam-in {
    0% {
        transform: translateY(40px) scale(0.95);
        opacity: 0;
    }
    75% {
        transform: translateY(-8px) scale(1.02);
        opacity: 1;
    }
    100% {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

@keyframes shake {
    0%, 100% {
        transform: rotate(-6deg) scale(1);
    }
    15%, 45%, 75% {
        transform: rotate(-9deg) scale(1.08);
    }
    30%, 60%, 90% {
        transform: rotate(-3deg) scale(1.08);
    }
}

@keyframes spin-slow {
    100% { transform: rotate(360deg); }
}

@keyframes pulse-burst {
    0%, 100% { transform: scale(1); opacity: 0.2; }
    50% { transform: scale(1.08); opacity: 0.4; }
}

@keyframes menu-drop {
    0% {
        opacity: 0;
        transform: translateY(-12px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Reveal animations gated on JavaScript */
html.js .animate-pop { opacity: 0; }
html.js .animate-slam { opacity: 0; }

.animate-pop.is-visible {
    animation: pop-in 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.animate-slam.is-visible {
    animation: slam-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.delay-100 { animation-delay: 100ms; }
.delay-150 { animation-delay: 150ms; }
.delay-200 { animation-delay: 200ms; }
.delay-250 { animation-delay: 250ms; }
.delay-300 { animation-delay: 300ms; }
.delay-400 { animation-delay: 400ms; }

.kaboom-text.is-visible {
    animation: pop-in 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards, shake 0.5s 0.4s ease-in-out forwards;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    html.js .animate-pop, html.js .animate-slam { opacity: 1; }
    .animate-pop.is-visible, .animate-slam.is-visible, .kaboom-text.is-visible { animation: none; }
    .starburst-bg, .action-burst-lines { animation: none; }
    .comic-shadow-hover:hover, .comic-shadow-hover-heavy:hover, .comic-card-hover:hover { transform: none; }
    .comic-card-hover:hover { box-shadow: 6px 6px 0px 0px #1b1c19; }
    .halftone-bg { transition: none; }
    .scroll-drift { animation: none !important; }
    .comic-3d-card { transform: none !important; }
    .ink-burst-particle { display: none !important; }
}

/* Touch devices */
@media (hover: none) {
    .tap-reveal { opacity: 1 !important; filter: none !important; }
}

/* Scroll-driven drift */
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        @keyframes scroll-drift {
            from { translate: 0 16px; }
            to { translate: 0 -16px; }
        }
        .scroll-drift {
            animation: scroll-drift linear both;
            animation-timeline: view();
            animation-range: entry 0% cover 55%;
        }
    }
}

/* Brand rule: lowercase h */
.keep-case { text-transform: none; }
.glyph-lower {
    font-family: "Work Sans", system-ui, sans-serif;
    font-weight: 700;
    font-size: 1.05em;
    text-transform: none;
}

/* Nav rails */
.nav-rails::before,
.nav-rails::after {
    content: "";
    display: block;
    width: 4px;
    height: 40px;
    background: #1b1c19;
}

/* Active navigation link styling */
.nav-link-active {
    color: #dc3214 !important;
    text-decoration: underline;
    text-decoration-thickness: 3px;
    text-underline-offset: 6px;
}

/* Caption plate */
.caption-plate {
    background: #ffffff;
    border: 3px solid #1b1c19;
    box-shadow: 4px 4px 0 0 #1b1c19;
    padding: 14px 18px;
    position: relative;
    z-index: 20;
    color: #1b1c19;
    font-weight: 500;
}

/* Waitlist capture form */
.ink-input {
    font-family: "Space Mono", ui-monospace, monospace;
    font-size: 14px;
    font-weight: 700;
    background: #ffffff;
    color: #1b1c19;
    border: 4px solid #1b1c19;
    box-shadow: 6px 6px 0px 0px #1b1c19;
    padding: 14px 18px;
    width: 100%;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.ink-input::placeholder { color: #7e775f; }
.ink-input:focus {
    outline: 3px solid #dc3214;
    outline-offset: 3px;
    border-color: #1b1c19;
}
.ink-input[aria-invalid="true"] {
    border-color: #b51c00;
    box-shadow: 6px 6px 0px 0px #dc3214;
}
#waitlist-submit:disabled {
    cursor: wait;
    opacity: 0.88;
}
#waitlist-submit:disabled:hover {
    box-shadow: 6px 6px 0px 0px #1b1c19;
    transform: none;
}
.form-error {
    font-family: "Work Sans", system-ui, sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: #8e1300;
}

/* Mobile menu panel */
#mobile-menu:not(.hidden) {
    animation: menu-drop 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
#mobile-menu {
    border-top: 4px solid #1b1c19;
    box-shadow: 0 6px 0 0 #1b1c19;
}
#mobile-menu a, #mobile-menu button {
    min-height: 48px;
}

/* 3D Physical Book Reader Engine */
#book-reader-modal:not(.hidden) {
    display: flex;
    opacity: 1;
}

.book-stage-3d {
    perspective: 2200px;
    perspective-origin: 50% 50%;
    transform-style: preserve-3d;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* The Book Shell */
.physical-book {
    position: relative;
    transform-style: preserve-3d;
    transition: width 0.45s cubic-bezier(0.16, 1, 0.3, 1), max-width 0.45s cubic-bezier(0.16, 1, 0.3, 1), aspect-ratio 0.45s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 8px 8px 0px 0px #1b1c19, 0 25px 50px rgba(0, 0, 0, 0.5);
    background: #f4ebd9;
    border: 4px solid #1b1c19;
    border-radius: 2px;
    user-select: none;
    cursor: pointer;
}

.book-mode-cover {
    width: 100%;
    max-width: min(440px, 85vw);
    aspect-ratio: 1 / 1.396;
    max-height: 68vh;
}

.book-mode-spread {
    width: 100%;
    max-width: min(920px, 94vw);
    aspect-ratio: 1.43 / 1;
    max-height: 68vh;
}

/* 2-Page Base Grid */
.book-spread-grid {
    position: relative;
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    overflow: hidden;
    background: #f4ebd9;
}

.book-page-half {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #f4ebd9;
}

.book-page-half img {
    width: 100%;
    height: 100%;
    object-fit: fill;
    object-position: center;
    display: block;
}

/* Cover Single View */
.book-cover-view {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #f4ebd9;
}

.book-cover-view img {
    width: 100%;
    height: 100%;
    object-fit: fill;
    object-position: center;
    display: block;
}

/* The Turning 3D Leaf */
.book-turning-leaf {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 50%;
    transform-style: preserve-3d;
    transform-origin: left center;
    z-index: 35;
    pointer-events: none;
}

.leaf-face {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    overflow: hidden;
    background: #f4ebd9;
    box-shadow: 0 0 20px rgba(0,0,0,0.2);
}

.leaf-face img {
    width: 100%;
    height: 100%;
    object-fit: fill;
    display: block;
}

.leaf-face-back {
    transform: rotateY(180deg);
}

/* Shadows that move with physical page turn */
.leaf-shadow {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.leaf-face-front .leaf-shadow {
    background: linear-gradient(to right, rgba(0,0,0,0.35) 0%, transparent 25%, rgba(0,0,0,0.06) 100%);
}

.leaf-face-back .leaf-shadow {
    background: linear-gradient(to left, rgba(0,0,0,0.35) 0%, transparent 25%, rgba(0,0,0,0.06) 100%);
}

/* Dynamic Turn Animations (0.65s duration for physical feel) */
.animate-turn-next {
    animation: turnNextLeaf 0.65s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

.animate-turn-prev {
    animation: turnPrevLeaf 0.65s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes turnNextLeaf {
    0% {
        transform: rotateY(0deg);
    }
    100% {
        transform: rotateY(-180deg);
    }
}

@keyframes turnPrevLeaf {
    0% {
        transform: rotateY(-180deg);
    }
    100% {
        transform: rotateY(0deg);
    }
}

/* Gutter & Binding Details */
.book-center-gutter {
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(50% - 15px);
    width: 30px;
    pointer-events: none;
    z-index: 25;
    background: linear-gradient(
        to right,
        transparent 0%,
        rgba(0,0,0,0.18) 45%,
        rgba(0,0,0,0.38) 50%,
        rgba(0,0,0,0.18) 55%,
        transparent 100%
    );
}

.book-left-spine-edge {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 20px;
    pointer-events: none;
    z-index: 25;
    background: linear-gradient(to right, rgba(0,0,0,0.35), transparent);
}

/* ---------------------------------------------------------------------------
   Scroll-Driven Press Motion Styles
   --------------------------------------------------------------------------- */
.process-scroll-step {
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.process-scroll-step.is-stamped .process-stamp-tag {
    opacity: 1;
    transform: translateY(0) scale(1);
    animation: stampSlam 0.38s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

/* Concept 2: Sunday Comic Strip Physical Panel-by-Panel Slam */
.story-scroll-panel {
    opacity: 0.2;
    transform: translateY(28px) scale(0.96);
    transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s ease;
    will-change: transform, opacity;
}

.story-scroll-panel[data-story-panel="1"] {
    --panel-rot: -1.5deg;
}
.story-scroll-panel[data-story-panel="2"] {
    --panel-rot: 1.2deg;
    transition-delay: 0.16s;
}
.story-scroll-panel[data-story-panel="3"] {
    --panel-rot: -1deg;
    transition-delay: 0.32s;
}

.story-scroll-panel.is-stamped {
    opacity: 1;
    transform: translateY(0) rotate(var(--panel-rot, 0deg)) scale(1);
    box-shadow: 4px 4px 0px 0px #1b1c19;
}

.story-scroll-panel.is-stamped:hover {
    transform: translateY(-4px) rotate(0deg) scale(1.02);
    box-shadow: 8px 8px 0px 0px #1b1c19;
    z-index: 20;
}

.story-scroll-panel.is-stamped .story-sfx-tag {
    opacity: 1;
    transform: translateY(0) scale(1);
    animation: stampSlam 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.story-scroll-panel[data-story-panel="1"].is-stamped .story-sfx-tag {
    animation-delay: 0.08s;
}
.story-scroll-panel[data-story-panel="2"].is-stamped .story-sfx-tag {
    animation-delay: 0.24s;
}
.story-scroll-panel[data-story-panel="3"].is-stamped .story-sfx-tag {
    animation-delay: 0.4s;
}

@keyframes stampSlam {
    0% {
        transform: scale(2) translateY(-10px);
        opacity: 0;
    }
    70% {
        transform: scale(0.92) translateY(0);
        opacity: 1;
    }
    100% {
        transform: scale(1) translateY(0);
        opacity: 1;
    }
}