/* licence.broker — Flat-Design Bureaucratic Honeycomb */

:root {
    --aged-parchment: #F5ECD7;
    --warm-vellum: #EDE0C8;
    --foxed-paper: #D4C4A8;
    --india-ink: #2C1810;
    --walnut-shell: #5C4033;
    --filing-brass: #8B7355;
    --bureau-rust: #A0522D;
    --wax-seal-red: #8B2500;
    --registry-gold: #C49A3C;
    --ledger-dark: #2C1810;
    --pigeonhole-brass: #8B7355;
    --burnished-copper: #B87333;
}

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

body {
    font-family: 'Handlee', cursive;
    font-weight: 400;
    color: var(--india-ink);
    background: var(--aged-parchment);
    line-height: 1.65;
    letter-spacing: 0.01em;
    overflow-x: hidden;
}

/* ---- Scenes ---- */
.scene {
    position: relative;
    padding: clamp(2rem, 5vw, 6rem) clamp(1rem, 4vw, 4rem);
}

/* ---- Reveal ---- */
[data-reveal] {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

[data-reveal].revealed {
    opacity: 1;
    transform: translateY(0);
}

/* ---- Corner brackets ---- */
.corner-bracket {
    position: absolute;
    width: 24px;
    height: 24px;
}

.corner-bracket::before,
.corner-bracket::after {
    content: '';
    position: absolute;
    background: var(--filing-brass);
}

.cb-tl { top: 3rem; left: 3rem; }
.cb-tl::before { top: 0; left: 0; width: 24px; height: 2px; }
.cb-tl::after { top: 0; left: 0; width: 2px; height: 24px; }

.cb-tr { top: 3rem; right: 3rem; }
.cb-tr::before { top: 0; right: 0; width: 24px; height: 2px; }
.cb-tr::after { top: 0; right: 0; width: 2px; height: 24px; }

.cb-bl { bottom: 3rem; left: 3rem; }
.cb-bl::before { bottom: 0; left: 0; width: 24px; height: 2px; }
.cb-bl::after { bottom: 0; left: 0; width: 2px; height: 24px; }

.cb-br { bottom: 3rem; right: 3rem; }
.cb-br::before { bottom: 0; right: 0; width: 24px; height: 2px; }
.cb-br::after { bottom: 0; right: 0; width: 2px; height: 24px; }

/* ============ SCENE 1: REGISTRY ============ */
.scene-registry {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.registry-content {
    max-width: 600px;
}

.registry-title {
    font-family: 'Caveat', cursive;
    font-weight: 700;
    font-size: clamp(2.8rem, 6vw, 5rem);
    color: var(--india-ink);
    letter-spacing: 0.04em;
    line-height: 1.15;
    margin-bottom: 1rem;
}

.registry-subtitle {
    font-family: 'Special Elite', monospace;
    font-size: clamp(0.75rem, 1.2vw, 0.9rem);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--walnut-shell);
    margin-bottom: 2rem;
    overflow: hidden;
    white-space: nowrap;
}

.wavy-rule {
    width: 300px;
    height: 8px;
    margin: 0 auto 2rem;
    display: block;
}

.registry-proclamation {
    font-size: clamp(0.95rem, 1.8vw, 1.15rem);
    color: var(--walnut-shell);
    max-width: 480px;
    margin: 0 auto;
}

/* ============ HONEYCOMB GRID ============ */
.honeycomb {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 0;
}

.hex-cell {
    width: 240px;
    height: 208px;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    position: relative;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.hex-cell.visible {
    opacity: 1;
}

.hex-cell:nth-child(even) {
    margin-top: 104px;
}

.hex-inner {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1.5rem;
    text-align: center;
}

/* Cell types */
.hex-title .hex-inner {
    background: var(--walnut-shell);
}

.hex-title .hex-heading {
    font-family: 'Caveat', cursive;
    font-weight: 700;
    font-size: 1.6rem;
    color: var(--aged-parchment);
}

.hex-content .hex-inner {
    background: var(--aged-parchment);
    border: 2px solid var(--pigeonhole-brass);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    transition: border-color 0.25s ease, background 0.25s ease;
}

.hex-content:hover .hex-inner {
    border-color: var(--burnished-copper);
    background: var(--warm-vellum);
}

.hex-stamp .hex-inner {
    background: var(--aged-parchment);
}

.hex-empty .hex-inner {
    background: var(--warm-vellum);
    background-image:
        repeating-linear-gradient(45deg, transparent, transparent 4px, var(--foxed-paper) 4px, var(--foxed-paper) 5px),
        repeating-linear-gradient(-45deg, transparent, transparent 4px, var(--foxed-paper) 4px, var(--foxed-paper) 5px);
}

.permit-strip {
    font-family: 'Special Elite', monospace;
    font-size: 0.65rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: var(--bureau-rust);
    color: var(--aged-parchment);
    padding: 0.15rem 0.5rem;
    display: inline-block;
    margin-bottom: 0.5rem;
}

.hex-label {
    font-family: 'Caveat', cursive;
    font-weight: 400;
    font-size: 1.2rem;
    color: var(--india-ink);
    margin-bottom: 0.3rem;
}

.hex-text {
    font-size: 0.85rem;
    color: var(--walnut-shell);
    line-height: 1.4;
}

/* ---- Rubber stamp ---- */
.rubber-stamp {
    font-family: 'Special Elite', monospace;
    font-size: 1.2rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--bureau-rust);
    border: 3px solid var(--bureau-rust);
    border-radius: 4px;
    padding: 0.5rem 1rem;
    transform: rotate(-5deg);
    opacity: 0.85;
    transition: transform 0.2s ease-in-out;
}

.stamp-pending {
    color: var(--filing-brass);
    border-color: var(--filing-brass);
    transform: rotate(3deg);
}

.stamp-sm {
    font-size: 0.8rem;
    padding: 0.3rem 0.6rem;
}

.hex-stamp:hover .rubber-stamp {
    transform: rotate(-5deg) scale(0.95);
}

/* ---- Wax seal ---- */
.wax-seal {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--wax-seal-red);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        inset 0 0 0 4px #8B2500,
        inset 0 0 0 8px var(--bureau-rust),
        inset 0 0 0 10px var(--registry-gold);
    animation: sealFloat 6s ease-in-out infinite;
}

.seal-gold {
    background: var(--registry-gold);
    box-shadow:
        inset 0 0 0 4px #B8860B,
        inset 0 0 0 8px var(--registry-gold),
        inset 0 0 0 10px var(--bureau-rust);
}

.seal-text {
    font-family: 'Caveat', cursive;
    font-weight: 700;
    font-size: 1.4rem;
    color: var(--aged-parchment);
}

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

/* ============ SCENE 3: PERMIT HALL ============ */
.scene-hall {
    background: var(--warm-vellum);
    padding: clamp(4rem, 8vw, 8rem) clamp(2rem, 5vw, 6rem);
}

.hall-rule-top,
.hall-rule-bottom {
    width: 80%;
    max-width: 600px;
    height: 1px;
    margin: 0 auto 3rem;
    background: var(--filing-brass);
    background-image: repeating-linear-gradient(90deg, var(--filing-brass) 0px, var(--filing-brass) 12px, transparent 12px, transparent 16px, var(--filing-brass) 16px, var(--filing-brass) 18px, transparent 18px, transparent 22px);
}

.hall-rule-bottom {
    margin: 3rem auto 0;
}

.hall-content {
    max-width: 680px;
    margin: 0 auto;
}

.hall-paragraph {
    border-left: 2px solid var(--filing-brass);
    border-right: 2px solid var(--filing-brass);
    padding: 1.5rem 2rem;
    margin-bottom: 1.5rem;
}

.proclamation-text {
    font-size: clamp(0.95rem, 1.8vw, 1.15rem);
    color: var(--india-ink);
}

.hex-divider {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    margin: 1rem 0;
}

.hex-divider span {
    width: 12px;
    height: 10px;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    background: var(--bureau-rust);
}

/* ============ SCENE 4: SEAL CHAMBER ============ */
.scene-seals {
    background: var(--foxed-paper);
    padding: clamp(4rem, 8vw, 8rem) clamp(2rem, 5vw, 6rem);
}

.honeycomb-large .hex-cell {
    width: 300px;
    height: 260px;
}

.honeycomb-large .hex-seal .hex-inner {
    background: var(--foxed-paper);
}

/* ============ SCENE 5: FOOTER ============ */
.scene-footer {
    background: var(--ledger-dark);
    padding: clamp(3rem, 5vw, 5rem) clamp(1rem, 4vw, 4rem);
}

.honeycomb-footer .hex-cell {
    width: 200px;
    height: 173px;
}

.honeycomb-footer .hex-cell:nth-child(even) {
    margin-top: 0;
}

.hex-footer-cell .hex-inner {
    background: var(--ledger-dark);
    border: 1px solid var(--burnished-copper);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

.hex-footer-stamp .hex-inner {
    background: var(--ledger-dark);
    border: 1px solid var(--registry-gold);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

.footer-label {
    font-family: 'Special Elite', monospace;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--aged-parchment);
}

.footer-wordmark {
    font-family: 'Caveat', cursive;
    font-size: 0.9rem;
    color: var(--aged-parchment);
    margin-top: 0.5rem;
}

/* ---- Mobile ---- */
@media (max-width: 767px) {
    .honeycomb {
        flex-direction: column;
        align-items: center;
    }

    .hex-cell:nth-child(even) {
        margin-top: 6px;
    }

    .hex-cell {
        width: 280px;
        height: 242px;
    }

    .honeycomb-large .hex-cell {
        width: 280px;
        height: 242px;
    }

    .honeycomb-footer {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .honeycomb-footer .hex-cell {
        width: 150px;
        height: 130px;
    }

    .corner-bracket {
        display: none;
    }
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    [data-reveal] {
        opacity: 1;
        transform: none;
    }

    .hex-cell {
        opacity: 1;
    }

    .wax-seal {
        animation: none;
    }
}