/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

/* UNIVERSAL RESET */
*, *::before, *::after {
    box-sizing: border-box;
}

body {
    margin: 10px;

    background: #000503;
    color: #d9e8eb;

    font-family: "Segoe UI", Arial, sans-serif;
    line-height: 1.6;
}

/* HEADER */

header {
    padding: 25px 35px;
    border-bottom: 1px solid #23343a;
}

header nav {
    display: flex;
    align-items: center;
}

header nav a:first-child {
    margin-right: auto;
}

header nav a {
    margin-left: 30px;
    color: #82959b;
    font-size: 16px;
    text-decoration: none;
}

header nav a:hover {
    color: #63d27a;
}

header nav a:hover::before {
    content: ">";
}

header nav a:hover::after {
    content: "<";
}

/* LANDING PAGE */

main.landing {
    min-height: calc(100vh - 90px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 40px 20px;
}

.main-logo {
    width: 850px;
    max-width: 100%;
    margin-bottom: 25px;
}

.subtitle {
    margin: 0 0 18px;
    color: #72c7d5;
    font-size: 30px;
    line-height: 1.4;
}


/* BUTTON */

.start-button {
    display: inline-block;
    padding: 10px 22px;
    border: 2px solid #72c7d5;
    color: #72c7d5;
    font-size: 20px;
    text-decoration: none;
    letter-spacing: 0.08em;
    transition: 0.15s ease;
}

.start-button:hover {
    background: #72c7d5;
    color: #06100c;
}

.start-button:active {
    background: #63d27a;
    border-color: #63d27a;
    color: #06100c;
    transform: scale(0.95);
    filter: brightness(1.5);
}

.start-button.login-active {
    pointer-events: none;
}


/* LOAD SPINNER */

.load-spinner {
    width: 21px;
    height: 21px;
    margin-top: 16px;
    border: 2.6px solid #273038;
    border-top-color: #63d27a;
    border-radius: 50%;
    opacity: 0;
    animation: spin 1.0s linear infinite;
    transition: opacity 0.2s ease;
}

.load-spinner.visible {
    opacity: 1;
}


/* SCREEN FLICKER */

body.glitch-active::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    background:
        repeating-linear-gradient(
            to bottom,
            transparent 0px,
            transparent 2px,
            rgba(212, 231, 235, 0.085) 3px
        );
    opacity: 0;
    animation: screen-glitch 0.63s steps(3, end);
}

body.glitch-active {
    animation: screen-glitch 0.66s steps(3, end);
}


@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes screen-glitch {
    0% { transform: translate(0); filter: brightness(1); opacity: 0; }
    25% { transform: translate(-0.9px, 0.75px); filter: brightness(1.12); opacity: 1; }
    33% { transform: translate(0.65px, 0); filter: brightness(0.94); opacity: 1; }
    41% { transform: translate(-0.45px, -0.55px); filter: brightness(1.1); opacity: 1; }
    53% { transform: translate(0, 0); filter: brightness(1); opacity: 1; }
    69% { transform: translate(0.75px, 0.57px); filter: brightness(0.97); opacity: 1; }
    89% { transform: translate(0.35px, 0.15px); filter: brightness(1); opacity: 0; }
    100% { transform: translate(0); filter: brightness(1); opacity: 0; }
}

/* INTERNAL PAGES */

main.works-page,
main.about-page,
main.contact-page {
    padding: 80px 45px 110px;
}

main.works-page h2,
main.about-page h2,
main.contact-page h2 {
    margin: 0 0 10px 0;
    color: #f0ede6;
    font-size: 48px;
    font-weight: 400;
    line-height: 1.1;
}

.work {
    max-width: 800px;
    padding: 25px 0;
    border-bottom: 2px solid #273038;
    display: flex;
    align-items: center;
    gap: 25px;
}

.work img {
    width: 160px;
    max-width: 90%;
    border: 1px solid #273038;
    display: block;
}

.work h3 {
    margin: 30px 0 15px 0;
    color: #d7e2e8;
    font-size: 25px;
    font-weight: 400;
    line-height: 1.2;
}

.work p {
    margin: 0 0 15px 0;
    color: #8a9aa5;
    font-size: 16px;
    line-height: 1.6;
    flex: 1;
}

.work a {
    color: #78c7d9;
    font-size: 16px;
    text-decoration: none;
}

.work a:hover {
    text-decoration: underline;
}

main.contact-page {
    text-align: center;
}

.contact-page p {
    margin: 0 0 70px;
    color: #8a9aa5;
    font-size: 18px;
}

.contact-email {
    color: #78c7d9;
    font-size: 20px;
    text-decoration: none;
}

.contact-email:hover {
    text-decoration: underline;
}

/* READ PAGE */

main.read-page {
    padding: 70px 35px 100px;
}

main.read-page h2 {
    margin: 0 0 60px;
    color: #f0ede6;
    font-size: 48px;
    font-weight: 400;
    line-height: 1.1;
}

.arc {
    max-width: 700px;
    margin-bottom: 50px;
}

.arc h3 {
    margin: 0 0 20px;
    color: #78c7d9;
    font-size: 25px;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: 0.04em;
}

/* ARC */

.arc {
    max-width: 850px;
    margin-bottom: 65px;
}

.arc h3 {
    margin: 0 0 25px;
    color: #78c7d9;
    font-size: 24px;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: 0.04em;
}

/* CHAPTER BUTTONS */

.chapters {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
    width: 100%;
}

.chapters a {
    display: block;
    padding: 11px 8px;
    border: 1px solid #273038;
    color: #d7e2e8;
    background: #000503;
    font-size: 15px;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    transition:
        border-color 0.15s ease,
        color 0.15s ease,
        background 0.15s ease;
}

.chapters a:hover {
    border-color: #63d27a;
    color: #63d27a;
    background: #0b2417;
}

/* INTERMEZZO */

.arc .chapters a[href*="intermezzo"] {
    grid-column: span 2;
}

@media (max-width: 800px) {
    main.read-page {
        padding: 50px 20px 80px;
    }

    main.read-page h2 {
        margin-bottom: 50px;
        font-size: 40px;
    }

    .arc {
        margin-bottom: 55px;
    }

    .arc h3 {
        margin-bottom: 20px;
        font-size: 21px;
    }

    .chapters {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }

    .chapters a {
        padding: 10px 6px;
        font-size: 14px;
    }

    .arc .chapters a[href*="intermezzo"] {
        grid-column: span 3;
    }
}


/* CHAPTER PAGES */

main.chapter-page {
    max-width: 900px;
    margin: 0 auto;
    padding: 30px 45px 110px;
}

.chapter-arc {
    margin-bottom: 18px;
    color: #78c7d9;
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

main.chapter-page h1 {
    margin: 0 0 55px;
    color: #f0ede6;
    font-size: 48px;
    font-weight: 400;
    line-height: 1.15;
}

main.chapter-page h2 {
    margin: 30px 0 10px;
    color: #78c7d9;
    font-size: 30px;
    font-weight: 400;
    line-height: 1.2;
}

main.chapter-page h3 {
    margin: 5px 0 50px;
    color: #d7e2e8;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.3;
}

main.chapter-page p {
    max-width: 800px;
    margin: 0 0 18px;
    color: #c3d0d5;
    font-size: 20px;
    line-height: 1.35;
    text-align: justify;
    hyphens: auto;
    -webkit-hyphens: auto;
}

main.chapter-page strong {
    color: #d9e8eb;
    font-weight: 600;
}

main.chapter-page em {
    color: #b8c9ce;
}

main.chapter-page a {
    color: #78c7d9;
    text-decoration: none;
}

main.chapter-page a:hover {
    color: #63d27a;
}

main.chapter-page code {
    padding: 2px 5px;
    border: 1px solid #273038;
    color: #72c7d5;
    background: #06100c;
    font-family: "Courier New", monospace;
    font-size: 0.9em;
}

main.chapter-page pre {
    max-width: 760px;
    margin: 30px 0;
    padding: 20px;
    overflow-x: auto;
    border: 1px solid #273038;
    background: #06100c;
}

main.chapter-page pre code {
    padding: 0;
    border: none;
    color: #c3d0d5;
    background: none;
    font-size: 14px;
    line-height: 1.6;
}

/* CHAPTER MOBILE */

@media (max-width: 800px) {
    main.chapter-page {
        padding: 50px 20px 80px;
    }

    .chapter-arc {
        margin-bottom: 15px;
        font-size: 12px;
    }

    main.chapter-page h1 {
        margin-bottom: 40px;
        font-size: 40px;
    }

    main.chapter-page h2 {
        margin-top: 45px;
        font-size: 28px;
    }

    main.chapter-page h3 {
        margin-top: 35px;
        font-size: 20px;
    }

    main.chapter-page p {
        font-size: 17px;
        line-height: 1.5;
    }
}


/* CHAPTER NAVIGATION */

.chapter-navigation {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 10px;
    max-width: 80vw;
    margin: 10px 10px;
    padding: 5px 5px;
    border-top: 1px solid #273038;
    border-bottom: 1px solid #273038;
}

.chapter-navigation a:first-child {
    margin-right: 0;
}

.chapter-navigation a,
.chapter-navigation button {
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 1.6;
    
    flex: 1;
    max-width: 10vw;
    padding: 5px 5px;
    border: 1px solid #273038;
    color: #82959b;
    background: #000503;
    font-size: 14px;
    font-family: inherit;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    letter-spacing: 0.04em;
    
    transition:
        border-color 0.05s linear,
        color 0.05s linear,
        background 0.05s linear;
}

.chapter-navigation a:hover,
.chapter-navigation button:hover {
    border-color: #63d27a;
    color: #63d27a;
    background: #0b2417;
}

.chapter-navigation button {
    color: #78c7d9;
    border-color: #30444b;
}

.chapter-navigation button:hover {
    border-color: #78c7d9;
    color: #72c7d5;
    background: #071215;
}


/* CHAPTER NAVIGATION MOBILE */

@media (max-width: 800px) {
    .chapter-navigation {
        gap: 10px;
    }

    .chapter-navigation a,
    .chapter-navigation button {
        min-width: 0;
        max-width: 25vw;
        flex: 1;
        padding: 9px 8px;
        font-size: 13px;
        white-space: nowrap;
    }
}

/* ABOUT PAGE */

main.about-page {
    display: grid;
    grid-template-columns: 1.85fr 1fr;
    gap: 70px;
    padding: 70px 35px 100px;
}

.about-story {
    padding-right: 70px;
    border-right: 1px solid #273038;
}

.about-story h2,
.about-author h2 {
    margin: 0 0 20px;
    padding-bottom: 25px;
    color: #f0ede6;
    font-size: 36px;
    font-weight: 400;
    line-height: 1;
}

.about-story p {
    margin: 0 0 10px;
    color: #c3d0d5;
    font-size: 17px;
    line-height: 2;
}

.about-details p {
    padding-top: 15px;
    color: #c3d0d5;
    font-size: 13px;
    line-height: 1;
}

/* EXTRAS */

.extras {
    margin-top: 70px;
    padding-top: 25px;
    border-top: 1px solid #273038;
}

.extras h3 {
    margin: 0 0 20px;
    color: #78c7d9;
    font-size: 22px;
    font-weight: 400;
}

.extras a {
    display: block;
    margin-bottom: 10px;
    color: #8a9aa5;
    font-size: 16px;
    text-decoration: none;
}

.extras a:hover {
    color: #78c7d9;
    text-decoration: underline;
}

/* AUTHOR */

.about-author {
    padding-left: 0;
}

.about-author img {
    width: 250px;
    max-width: 100%;
    border: 1px solid #273038;
    display: block;
    margin: 0 auto 25px;
}

.about-author p {
    max-width: 500px;
    color: #8a9aa5;
    font-size: 16px;
    line-height: 1.7;
}

/* MOBILE */

@media (max-width: 800px) {
    main.read-page,
    main.about-page {
        padding: 50px 20px 80px;
    }

    main.about-page {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .about-story {
        padding-right: 0;
        padding-bottom: 50px;
        border-right: none;
        border-bottom: 1px solid #273038;
    }

    .about-story h2,
    .about-author h2,
    main.read-page h2 {
        font-size: 40px;
    }

    .about-author img {
        max-width: 100%;
    }

    header {
        padding: 20px;
    }
    
    header nav {
        display: grid;
        grid-template-columns: 1.85fr 1fr;
        gap: 10px 10px;
    }

    header nav a {
        margin-left: 0;
        font-size: 13px;
    }

    header nav a:first-child {
        margin-right: 0;
    }

    .main-logo {
        width: 900px;
        max-width: 98%;
    }

    main.landing {
        min-height: calc(100vh - 80px);
        padding-top: 70px;
    }

    main.works-page,
    main.about-page,
    main.contact-page {
        padding: 50px 20px 80px;
    }

    h1 {
        font-size: 64px;
        margin-bottom: 50px;
    }

    main.works-page h2,
    main.about-page h2,
    main.contact-page h2 {
        font-size: 40px;
        margin-bottom: 40px;
    }

    .subtitle {
        font-size: 15px;
    }
}

/* HORUS-STYLE TEXT GLITCH */

.horus-text {
    position: relative;
    display: inline-block;
    color: #c3d0d5;
    animation: horus-distort 3.5s infinite;
}

/* MAGENTA GHOST */

.horus-text::before {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: -1px;
    color: #ff3bd4;
    opacity: 0;
    pointer-events: none;
    animation: horus-magenta 3.5s infinite;
}

/* CYAN GHOST */

.horus-text::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 1px;
    color: #72c7d5;
    opacity: 0;
    pointer-events: none;
    animation: horus-cyan 3.5s infinite;
}

/* MAIN DISTORTION */

@keyframes horus-distort {
    0%, 91%, 100% { transform: translate(0); }
    92% { transform: translate(-1px, 0); }
    93% { transform: translate(1px, 0); }
    94% { transform: translate(-1px, 1px); }
    95% { transform: translate(0); }
}

/* MAGENTA DISTORTION */

@keyframes horus-magenta {
    0%, 91%, 100% {
        opacity: 0;
        transform: translate(0);
        clip-path: inset(0 0 100% 0);
    }
    92% {
        opacity: 0.8;
        transform: translate(-3px, 0);
        clip-path: inset(20% 0 55% 0);
    }
    93% {
        opacity: 0;
        transform: translate(3px, 1px);
        clip-path: inset(65% 0 10% 0);
    }
    94% {
        opacity: 0.7;
        transform: translate(-2px, 0);
        clip-path: inset(40% 0 35% 0);
    }
    95% { opacity: 0; }
}

/* CYAN DISTORTION */

@keyframes horus-cyan {
    0%, 91%, 100% {
        opacity: 0;
        transform: translate(0);
        clip-path: inset(100% 0 0 0);
    }
    92% {
        opacity: 0.7;
        transform: translate(3px, 0);
        clip-path: inset(55% 0 20% 0);
    }
    93% {
        opacity: 0;
        transform: translate(-2px, -1px);
        clip-path: inset(10% 0 65% 0);
    }
    94% {
        opacity: 0.8;
        transform: translate(2px, 0);
        clip-path: inset(70% 0 8% 0);
    }
    95% { opacity: 0; }
}

/* ==========================================================================
   ENCYCLOPEDIA PRINT LAYOUT
   ========================================================================== */

.encyclopedia-entry {
    max-width: 80vw;
    margin: 0 auto;
}

/* Header Typography */
.entry-header {
    margin-bottom: 40px;
    padding-bottom: 20px;
    border-bottom: 2px solid #273038;
}

.entry-header h2 {
    margin: 0 0 5px 0;
    color: #f0ede6;
    font-size: 42px;
    font-weight: 400;
    line-height: 1.1;
}

.entry-header h3 {
    margin: 0;
    color: #78c7d9;
    font-size: 20px;
    font-weight: 400;
}

/* Two-Column Print Typesetting */
.entry-columns {
    column-count: 2;
    column-gap: 40px; 
    column-rule: 1px solid #273038; 
}

.entry-columns p {
    margin: 0 0 20px 0;
    color: #c3d0d5;
    font-size: 16px;
    line-height: 1.6;
    text-align: justify; 
    hyphens: auto; 
    
    orphans: 3; 
    widows: 3;  
}

/* Print-Style Figures */
.print-figure {
    margin: 0 0 20px 0;
    background: #06100c;
    border: 1px solid #273038;
    padding: 10px;
    
    break-inside: avoid-column; 
    display: inline-block; 
    width: 100%; 
}

.print-figure img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid #1a2328;
}

.print-figure figcaption {
    margin-top: 10px;
    color: #82959b;
    font-size: 12px;
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-align: left;
}

/* Layout Variations for Figures */
.print-figure.full-width {
    column-span: all;
    margin: 40px 0; 
}

.print-figure.inline {
    margin: 20px 0;
}

/* Responsive Fallback */
@media (max-width: 800px) {
    .entry-columns {
        column-count: 1;
        column-rule: none;
    }
    
    .entry-header h2 {
        font-size: 32px;
    }
}