/* ============================================
   naru.day — Brutalist Ma-Negative-Space
   Sepia-Nostalgic | Eclectic-Hybrid Typography
   Lottie Animation | Photography | Retro Patterns
   ============================================ */

/* --- CSS Custom Properties (Palette) --- */
:root {
    --bg-parchment: #f5efe0;
    --bg-linen: #e8dcc8;
    --text-espresso: #3b2a1a;
    --text-leather: #7a5c3e;
    --text-aged-ink: #5a4a3a;
    --text-faded: #9a8a7a;
    --accent-amber: #c45a2d;
    --accent-brass: #d4a054;
    --border-foxed: #c8b89a;
    --dark-block: #2a2018;
    --concrete-light: #d8ceb8;
}

/* --- Reset & Base --- */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
    scroll-behavior: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    background-color: var(--bg-parchment);
    color: var(--text-aged-ink);
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 400;
    line-height: 1.85;
    overflow-x: hidden;
    position: relative;
}

/* --- Typography Classes --- */
.anybody-condensed {
    font-family: 'Anybody', sans-serif;
    font-stretch: ultra-condensed;
    font-weight: 800;
    letter-spacing: -0.04em;
    color: var(--text-espresso);
    line-height: 0.9;
}

.anybody-expanded {
    font-family: 'Anybody', sans-serif;
    font-stretch: ultra-expanded;
    font-weight: 800;
    letter-spacing: 0.2em;
    color: var(--text-espresso);
    line-height: 0.85;
}

.cormorant-italic {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 300;
    font-style: italic;
    color: var(--text-leather);
    line-height: 1.6;
}

.space-grotesk {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 400;
    color: var(--text-aged-ink);
    line-height: 1.85;
}

.special-elite {
    font-family: 'Special Elite', cursive;
    font-size: 0.75rem;
    color: var(--text-faded);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* --- Fixed Watermark --- */
.watermark {
    position: fixed;
    top: 2rem;
    left: 2rem;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 11px;
    font-weight: 400;
    color: var(--border-foxed);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    z-index: 100;
    pointer-events: none;
    opacity: 0.6;
}

/* --- Spine Line --- */
.spine-line {
    position: fixed;
    left: 5vw;
    top: 0;
    bottom: 0;
    width: 1px;
    background-color: var(--bg-linen);
    z-index: 1;
    pointer-events: none;
}

/* --- Plate System --- */
.plate {
    position: relative;
    width: 100%;
    min-height: 30vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 4rem 8vw;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.plate.visible {
    opacity: 1;
}

.plate-hero {
    opacity: 1;
}

.plate-tall {
    min-height: 100vh;
}

.plate-medium {
    min-height: 60vh;
}

.plate-inner {
    position: relative;
    width: 100%;
    max-width: 1200px;
    z-index: 2;
}

.plate-narrow {
    max-width: 38ch;
}

.plate-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.plate-offset-right {
    margin-left: auto;
    margin-right: 0;
    max-width: 60%;
    text-align: right;
}

.plate-offset-left {
    margin-left: 0;
    margin-right: auto;
    max-width: 50%;
}

/* --- Breathing Spaces --- */
.breathing-space {
    width: 100%;
    position: relative;
}

.breathing-40 {
    height: 40vh;
}

.breathing-50 {
    height: 50vh;
}

/* --- Section glitch trigger (invisible) --- */
.section-glitch-trigger {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
    opacity: 0;
}

/* ===========================================
   PLATE: Hero
   =========================================== */
.plate-hero {
    height: 100vh;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    overflow: hidden;
}

.hero-word-container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.hero-word {
    font-family: 'Anybody', sans-serif;
    font-stretch: ultra-expanded;
    font-weight: 900;
    font-size: clamp(4rem, 12vw, 14rem);
    letter-spacing: 0.2em;
    color: var(--text-espresso);
    line-height: 1;
    text-align: center;
    user-select: none;
    position: relative;
    z-index: 3;
}

/* Lottie animation container overlaying hero word */
.hero-lottie-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    height: 200%;
    z-index: 4;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.hero-lottie-container.active {
    opacity: 1;
}

/* SVG fallback crack lines */
.hero-cracks {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 85%;
    height: 90%;
    z-index: 4;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.hero-cracks.active {
    opacity: 1;
}

.crack-svg {
    width: 100%;
    height: 100%;
}

.crack-line {
    fill: none;
    stroke: var(--border-foxed);
    stroke-width: 1;
    stroke-linecap: round;
    stroke-dasharray: var(--crack-length, 800);
    stroke-dashoffset: var(--crack-length, 800);
    opacity: 0;
}

.crack-line.animate {
    animation: crack-draw 3s ease-out forwards;
}

/* Staggered delays for organic feel */
.cl-1.animate  { animation-delay: 0.00s; }
.cl-2.animate  { animation-delay: 0.18s; }
.cl-3.animate  { animation-delay: 0.08s; }
.cl-4.animate  { animation-delay: 0.42s; }
.cl-5.animate  { animation-delay: 0.12s; }
.cl-6.animate  { animation-delay: 0.52s; }
.cl-7.animate  { animation-delay: 0.28s; }
.cl-8.animate  { animation-delay: 0.36s; }
.cl-9.animate  { animation-delay: 0.22s; }
.cl-10.animate { animation-delay: 0.58s; }
.cl-11.animate { animation-delay: 0.32s; }
.cl-12.animate { animation-delay: 0.48s; }
.cl-13.animate { animation-delay: 0.15s; }
.cl-14.animate { animation-delay: 0.55s; }

@keyframes crack-draw {
    0% {
        stroke-dashoffset: var(--crack-length, 800);
        opacity: 0;
    }
    3% {
        opacity: 0.5;
    }
    100% {
        stroke-dashoffset: 0;
        opacity: 0.35;
    }
}

/* ===========================================
   PLATE: Statement
   =========================================== */
.plate-statement {
    min-height: 30vh;
}

.statement-text {
    font-size: clamp(1.2rem, 3vw, 2.8rem);
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.2s ease, transform 0.4s ease;
}

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

/* ===========================================
   PLATE: Photo
   =========================================== */
.photo-container {
    position: relative;
    width: 100%;
    max-width: 1200px;
}

.photo-bleed-left {
    margin-left: -8vw;
    margin-right: 15vw;
}

.photo-bleed-right {
    margin-right: -8vw;
    margin-left: 15vw;
}

.photo-extreme-crop {
    margin-left: auto;
    margin-right: auto;
    max-width: 380px;
}

.photo-narrow {
    max-width: 800px;
}

/* Torn-paper irregular edges via clip-path */
.photo-frame {
    position: relative;
    overflow: hidden;
    clip-path: polygon(0% 1.5%, 97.5% 0%, 100% 96.5%, 2.5% 100%);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.photo-frame.visible {
    opacity: 1;
}

/* Torn-paper reveal mask — covers photo, animates away */
.photo-reveal-mask {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--bg-parchment);
    z-index: 10;
    transform-origin: left center;
    transition: none;
}

.photo-frame.revealing .photo-reveal-mask {
    animation: torn-paper-reveal 1.2s ease-out forwards;
}

@keyframes torn-paper-reveal {
    0% {
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
    }
    30% {
        clip-path: polygon(25% 0%, 100% 0%, 100% 100%, 20% 100%);
    }
    60% {
        clip-path: polygon(65% 2%, 100% 0%, 100% 100%, 60% 98%);
    }
    100% {
        clip-path: polygon(100% 0%, 100% 0%, 100% 100%, 100% 100%);
    }
}

/* Photo placeholder (abstract compositions replacing real photos) */
.photo-placeholder {
    position: relative;
    width: 100%;
    padding-bottom: 66%;
    overflow: hidden;
}

.photo-aspect-portrait {
    padding-bottom: 125%;
}

.photo-aspect-square {
    padding-bottom: 100%;
}

.photo-aspect-wide {
    padding-bottom: 45%;
}

.photo-sepia {
    background: linear-gradient(
        135deg,
        var(--bg-linen) 0%,
        var(--border-foxed) 25%,
        var(--text-faded) 55%,
        var(--bg-linen) 80%,
        var(--concrete-light) 100%
    );
    filter: sepia(40%) contrast(1.1) brightness(1.05);
}

/* Film grain overlay — 3% opacity, multiply blend */
.photo-grain {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.1'/%3E%3C/svg%3E");
    background-size: 128px 128px;
    mix-blend-mode: multiply;
    opacity: 0.3;
    pointer-events: none;
    z-index: 3;
}

.photo-content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}

.photo-abstract {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* Abstract photographic composition blocks */
.abstract-block {
    position: absolute;
}

/* Horizontal abstract lines */
.abstract-line.al-h {
    position: absolute;
    height: 1px;
    background-color: var(--text-leather);
    opacity: 0.25;
}

/* Vertical abstract lines */
.abstract-line.al-v {
    position: absolute;
    width: 1px;
    background-color: var(--text-leather);
    opacity: 0.2;
}

/* --- Photo 1: Moriyama urban fragment --- */
.ab-1 {
    top: 8%;
    left: 3%;
    width: 42%;
    height: 32%;
    background: linear-gradient(155deg, var(--text-leather) 0%, var(--border-foxed) 100%);
    opacity: 0.5;
}

.ab-2 {
    top: 42%;
    left: 22%;
    width: 58%;
    height: 28%;
    background: linear-gradient(195deg, var(--bg-linen) 0%, var(--text-faded) 100%);
    opacity: 0.35;
}

.ab-3 {
    top: 18%;
    right: 8%;
    width: 28%;
    height: 62%;
    background: linear-gradient(180deg, var(--text-espresso) 0%, var(--text-leather) 100%);
    opacity: 0.22;
}

.al-1 { top: 36%; left: 0; width: 62%; }
.al-2 { top: 72%; left: 35%; width: 45%; }
.al-3 { top: 15%; left: 48%; height: 55%; }

/* --- Photo 2: Concrete corner + kanji --- */
.ab-4 {
    top: 3%;
    left: 12%;
    width: 72%;
    height: 48%;
    background: linear-gradient(215deg, var(--border-foxed) 0%, var(--text-espresso) 100%);
    opacity: 0.32;
}

.ab-5 {
    bottom: 8%;
    left: 3%;
    width: 48%;
    height: 38%;
    background: linear-gradient(135deg, var(--text-faded) 0%, var(--bg-linen) 100%);
    opacity: 0.38;
}

.ab-6 {
    top: 28%;
    right: 3%;
    width: 32%;
    height: 52%;
    background: var(--text-leather);
    opacity: 0.18;
}

.al-4 { top: 58%; left: 8%; width: 82%; }
.al-5 { top: 12%; left: 68%; height: 72%; }

/* --- Photo 3: Hand with shadow --- */
.ab-7 {
    top: 12%;
    left: 18%;
    width: 62%;
    height: 72%;
    background: linear-gradient(175deg, var(--text-aged-ink) 0%, var(--border-foxed) 100%);
    opacity: 0.28;
}

.ab-8 {
    top: 35%;
    left: 8%;
    width: 35%;
    height: 40%;
    background: linear-gradient(200deg, var(--text-espresso) 0%, var(--text-leather) 60%, transparent 100%);
    opacity: 0.35;
}

.al-6 { top: 42%; left: 3%; width: 92%; }
.al-7 { top: 78%; left: 12%; width: 55%; }
.al-8 { top: 20%; left: 55%; height: 60%; }

/* --- Photo 4: Blurred cityscape --- */
.ab-9 {
    top: 0%;
    left: 0%;
    width: 100%;
    height: 55%;
    background: linear-gradient(180deg, var(--text-faded) 0%, var(--border-foxed) 60%, var(--bg-linen) 100%);
    opacity: 0.4;
}

.ab-10 {
    bottom: 0%;
    left: 10%;
    width: 50%;
    height: 40%;
    background: linear-gradient(160deg, var(--bg-linen) 0%, var(--text-faded) 100%);
    opacity: 0.3;
}

.ab-11 {
    top: 20%;
    right: 0%;
    width: 35%;
    height: 65%;
    background: linear-gradient(220deg, var(--text-espresso) 0%, var(--border-foxed) 100%);
    opacity: 0.2;
}

.al-9 { top: 52%; left: 0; width: 100%; }

/* --- Photo Caption --- */
.photo-caption-area {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1.5rem;
    padding-left: 8vw;
}

.caption-left {
    padding-left: 0;
    padding-right: 8vw;
    justify-content: flex-end;
}

.caption-rule {
    flex: 0 0 60px;
    height: 1px;
    background-color: var(--border-foxed);
}

/* ===========================================
   PLATE: Mixed
   =========================================== */
.plate-mixed {
    min-height: 60vh;
    gap: 3rem;
}

.section-heading {
    font-size: clamp(3rem, 8vw, 8rem);
    margin-bottom: 2rem;
    opacity: 0;
    transform: translateY(15px);
    transition: opacity 0.2s ease, transform 0.3s ease;
}

.section-heading.visible {
    opacity: 1;
    transform: translateY(0);
}

.body-text {
    font-size: clamp(0.9rem, 1.1vw, 1.1rem);
    max-width: 38ch;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.2s ease, transform 0.3s ease;
}

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

.mixed-body {
    margin-top: 2rem;
}

/* ===========================================
   PLATE: Single Word
   =========================================== */
.plate-single-word {
    min-height: 50vh;
}

.word-container {
    text-align: center;
}

.expanded-word {
    font-size: clamp(4rem, 14vw, 16rem);
    display: block;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.2s ease, transform 0.3s ease;
}

.expanded-word.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ===========================================
   PLATE: Quote
   =========================================== */
.plate-quote {
    min-height: 40vh;
}

.pull-quote {
    font-size: clamp(1.4rem, 3.5vw, 3.2rem);
    max-width: 20ch;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.2s ease, transform 0.3s ease;
}

.pull-quote.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ===========================================
   Decorative Rules
   =========================================== */
.decorative-rule {
    height: 1px;
    background-color: var(--border-foxed);
    margin-top: 2rem;
}

.rule-partial {
    width: 30%;
}

.rule-short {
    width: 60px;
}

.rule-right {
    margin-left: auto;
}

.rule-center {
    margin-left: auto;
    margin-right: auto;
}

/* ===========================================
   PLATE: Pattern (Retro Japanese Textile Motifs)
   Seigaiha, Shippo, Yabane — #c8b89a at 8-12% opacity
   =========================================== */
.plate-pattern {
    min-height: 60vh;
    overflow: hidden;
}

.pattern-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    transition: opacity 1.2s ease;
    z-index: 0;
    pointer-events: none;
}

.pattern-bg.visible {
    opacity: 1;
}

/* Seigaiha — overlapping waves */
.pattern-seigaiha {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='50' viewBox='0 0 100 50'%3E%3Cpath d='M0 50 C12.5 50 12.5 25 25 25 C37.5 25 37.5 50 50 50' stroke='%23c8b89a' fill='none' stroke-width='0.8' opacity='0.1'/%3E%3Cpath d='M50 50 C62.5 50 62.5 25 75 25 C87.5 25 87.5 50 100 50' stroke='%23c8b89a' fill='none' stroke-width='0.8' opacity='0.1'/%3E%3Cpath d='M-25 50 C-12.5 50 -12.5 25 0 25 C12.5 25 12.5 50 25 50' stroke='%23c8b89a' fill='none' stroke-width='0.8' opacity='0.08'/%3E%3Cpath d='M25 25 C37.5 25 37.5 0 50 0 C62.5 0 62.5 25 75 25' stroke='%23c8b89a' fill='none' stroke-width='0.8' opacity='0.08'/%3E%3C/svg%3E");
    background-size: 100px 50px;
}

/* Shippo — interlocking circles */
.pattern-shippo {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Ccircle cx='30' cy='30' r='20' stroke='%23c8b89a' fill='none' stroke-width='0.7' opacity='0.1'/%3E%3Ccircle cx='0' cy='30' r='20' stroke='%23c8b89a' fill='none' stroke-width='0.7' opacity='0.08'/%3E%3Ccircle cx='60' cy='30' r='20' stroke='%23c8b89a' fill='none' stroke-width='0.7' opacity='0.08'/%3E%3Ccircle cx='30' cy='0' r='20' stroke='%23c8b89a' fill='none' stroke-width='0.7' opacity='0.08'/%3E%3Ccircle cx='30' cy='60' r='20' stroke='%23c8b89a' fill='none' stroke-width='0.7' opacity='0.08'/%3E%3C/svg%3E");
    background-size: 60px 60px;
}

/* Yabane — angular zigzags (arrow feathers) */
.pattern-yabane {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M0 20 L20 0 L40 20 L20 40 Z' stroke='%23c8b89a' fill='none' stroke-width='0.6' opacity='0.09'/%3E%3Cpath d='M10 20 L20 10 L30 20 L20 30 Z' stroke='%23c8b89a' fill='none' stroke-width='0.6' opacity='0.07'/%3E%3C/svg%3E");
    background-size: 40px 40px;
}

.pattern-text {
    margin-top: 2rem;
}

/* ===========================================
   PLATE: Concrete Texture
   Layered radial-gradient noise in warm grays
   Shifts on hover via background-position
   =========================================== */
.plate-concrete {
    min-height: 60vh;
    overflow: hidden;
    gap: 3rem;
}

.concrete-texture {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(ellipse at 18% 45%, var(--concrete-light) 0%, transparent 50%),
        radial-gradient(ellipse at 78% 28%, var(--bg-linen) 0%, transparent 40%),
        radial-gradient(ellipse at 48% 78%, var(--concrete-light) 0%, transparent 55%),
        radial-gradient(ellipse at 65% 55%, var(--border-foxed) 0%, transparent 30%);
    background-position: 0 0, 0 0, 0 0, 0 0;
    opacity: 0.35;
    z-index: 0;
    transition: background-position 0.4s ease;
}

.plate-concrete:hover .concrete-texture {
    background-position: 3px 2px, -2px -1px, 1px 2px, -1px 1px;
}

/* ===========================================
   PLATE: Final + Closing
   =========================================== */
.plate-final {
    min-height: 40vh;
}

.plate-closing {
    min-height: 20vh;
}

.closing-date {
    font-size: 0.85rem;
}

.accent-date {
    color: var(--accent-brass);
}

/* ===========================================
   VHS Glitch Overlay
   Horizontal band of animated grain/static
   Duration 0.8s, triggered per section boundary
   =========================================== */
.vhs-glitch {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 1000;
    opacity: 0;
    display: none;
}

.vhs-glitch.active {
    display: block;
    animation: vhs-flash 0.8s ease-out forwards;
}

.glitch-band {
    position: absolute;
    left: 0;
    right: 0;
    opacity: 0;
}

.glitch-band-1 {
    top: 25%;
    height: 3px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--border-foxed) 15%,
        var(--bg-linen) 35%,
        var(--border-foxed) 55%,
        var(--bg-linen) 75%,
        transparent 100%
    );
}

.glitch-band-2 {
    top: 42%;
    height: 2px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--text-faded) 25%,
        var(--border-foxed) 45%,
        var(--text-faded) 65%,
        transparent 100%
    );
}

.glitch-band-3 {
    top: 58%;
    height: 5px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--bg-linen) 10%,
        var(--border-foxed) 30%,
        var(--bg-linen) 50%,
        var(--border-foxed) 70%,
        var(--bg-linen) 90%,
        transparent 100%
    );
}

.glitch-band-4 {
    top: 72%;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--text-faded) 20%,
        transparent 40%,
        var(--border-foxed) 60%,
        transparent 100%
    );
}

.glitch-band-5 {
    top: 35%;
    height: 4px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--concrete-light) 18%,
        var(--border-foxed) 38%,
        transparent 55%,
        var(--concrete-light) 78%,
        transparent 100%
    );
}

@keyframes vhs-flash {
    0%  { opacity: 0; }
    8%  { opacity: 0.75; }
    12% { opacity: 0.25; }
    20% { opacity: 0.85; }
    35% { opacity: 0.5; }
    55% { opacity: 0.2; }
    75% { opacity: 0.08; }
    100%{ opacity: 0; }
}

.vhs-glitch.active .glitch-band-1 {
    animation: glitch-wipe-1 0.8s ease-out forwards;
}
.vhs-glitch.active .glitch-band-2 {
    animation: glitch-wipe-2 0.8s ease-out 0.04s forwards;
}
.vhs-glitch.active .glitch-band-3 {
    animation: glitch-wipe-3 0.8s ease-out 0.08s forwards;
}
.vhs-glitch.active .glitch-band-4 {
    animation: glitch-wipe-4 0.8s ease-out 0.02s forwards;
}
.vhs-glitch.active .glitch-band-5 {
    animation: glitch-wipe-5 0.8s ease-out 0.06s forwards;
}

@keyframes glitch-wipe-1 {
    0%   { transform: translateX(-110%); opacity: 0; }
    18%  { transform: translateX(0); opacity: 0.7; }
    50%  { opacity: 0.35; }
    100% { transform: translateX(110%); opacity: 0; }
}

@keyframes glitch-wipe-2 {
    0%   { transform: translateX(-110%); opacity: 0; }
    22%  { transform: translateX(0); opacity: 0.5; }
    55%  { opacity: 0.25; }
    100% { transform: translateX(110%); opacity: 0; }
}

@keyframes glitch-wipe-3 {
    0%   { transform: translateX(-110%); opacity: 0; }
    14%  { transform: translateX(0); opacity: 0.6; }
    45%  { opacity: 0.28; }
    100% { transform: translateX(110%); opacity: 0; }
}

@keyframes glitch-wipe-4 {
    0%   { transform: translateX(110%); opacity: 0; }
    20%  { transform: translateX(0); opacity: 0.4; }
    50%  { opacity: 0.2; }
    100% { transform: translateX(-110%); opacity: 0; }
}

@keyframes glitch-wipe-5 {
    0%   { transform: translateX(-110%); opacity: 0; }
    16%  { transform: translateX(0); opacity: 0.55; }
    48%  { opacity: 0.22; }
    100% { transform: translateX(110%); opacity: 0; }
}

/* ===========================================
   Global Grain Overlay (injected by JS)
   3% opacity, multiply blend, fixed position
   =========================================== */
.global-grain {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 999;
    opacity: 0.03;
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
    background-size: 256px 256px;
}

/* ===========================================
   Responsive
   Minimum margins remain 8vw on all sides
   Typography scales, negative space compresses
   =========================================== */
@media (max-width: 768px) {
    .plate {
        padding: 3rem 8vw;
    }

    .plate-offset-right,
    .plate-offset-left {
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
        text-align: left;
    }

    .photo-bleed-left {
        margin-left: -4vw;
        margin-right: 4vw;
    }

    .photo-bleed-right {
        margin-right: -4vw;
        margin-left: 4vw;
    }

    .breathing-40 {
        height: 25vh;
    }

    .breathing-50 {
        height: 30vh;
    }

    .watermark {
        top: 1.5rem;
        left: 1.5rem;
        font-size: 10px;
    }

    .spine-line {
        left: 3vw;
    }

    .hero-word {
        font-size: clamp(3rem, 14vw, 8rem);
    }

    .section-heading {
        font-size: clamp(2.5rem, 10vw, 5rem);
    }

    .photo-extreme-crop {
        max-width: 85%;
    }

    .photo-caption-area {
        padding-left: 4vw;
    }

    .caption-left {
        padding-left: 0;
        padding-right: 4vw;
    }

    .photo-narrow {
        max-width: 100%;
    }
}

@media (max-width: 480px) {
    .hero-word {
        font-size: clamp(2.5rem, 16vw, 5rem);
    }

    .expanded-word {
        font-size: clamp(3rem, 16vw, 8rem);
    }

    .pull-quote {
        font-size: clamp(1.2rem, 5vw, 2rem);
    }

    .statement-text {
        font-size: clamp(1.1rem, 4vw, 1.8rem);
    }
}

/* --- Selection color — accent brass on parchment --- */
::selection {
    background-color: var(--accent-brass);
    color: var(--bg-parchment);
}