/* ================================================
   ScriptSwirl.com - Venetian Scriptorium Aesthetic
   Baroque Maximalism / Illuminated Manuscript
   ================================================ */

/* --- Custom Properties --- */
:root {
    --bg-deep: #1A1209;
    --bg-mid: #2C1E10;
    --gold-primary: #C39B48;
    --gold-secondary: #A08540;
    --jewel-lapis: #1B3A6B;
    --jewel-emerald: #1B6B3A;
    --jewel-burgundy: #6B1B2E;
    --text-primary: #E8DCC8;
    --text-secondary: #B8A88C;
    --highlight: #F5D67B;

    --ease-ornament: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --ease-text: cubic-bezier(0.39, 0.575, 0.565, 1.0);
    --ease-hover: cubic-bezier(0.4, 0, 0.2, 1);
}

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

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    background: var(--bg-deep);
    color: var(--text-primary);
    font-family: 'EB Garamond', Georgia, 'Times New Roman', serif;
    font-weight: 400;
    font-size: clamp(1.05rem, 1.2vw, 1.2rem);
    line-height: 1.75;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

/* --- Opening Bloom Overlay --- */
#opening-bloom {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000000;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.8s var(--ease-text) 2.2s;
}

#opening-bloom.fade-out {
    opacity: 0;
}

#opening-bloom.hidden {
    display: none;
}

#bloom-light {
    width: 0;
    height: 0;
    border-radius: 50%;
    background: radial-gradient(circle, var(--highlight) 0%, rgba(245, 214, 123, 0.3) 40%, transparent 70%);
    animation: bloomExpand 2.5s var(--ease-ornament) forwards;
}

@keyframes bloomExpand {
    0% {
        width: 0;
        height: 0;
        opacity: 0;
    }
    20% {
        opacity: 1;
    }
    100% {
        width: 200vmax;
        height: 200vmax;
        opacity: 0.6;
    }
}

/* --- Background Parallax Layer --- */
#bg-parallax {
    position: fixed;
    top: -20%;
    left: -10%;
    width: 120%;
    height: 140%;
    z-index: 0;
    pointer-events: none;
    will-change: transform;
}

.damask-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.04;
}

/* Fleur-de-lis damask pattern */
.damask-fleur {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cpath d='M30 5 Q35 15 30 25 Q25 15 30 5Z M30 35 Q35 45 30 55 Q25 45 30 35Z M5 30 Q15 35 25 30 Q15 25 5 30Z M35 30 Q45 35 55 30 Q45 25 35 30Z' fill='%23C39B48' fill-opacity='0.8'/%3E%3C/svg%3E");
    background-size: 60px 60px;
}

/* Acanthus scroll pattern */
.damask-acanthus {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cpath d='M40 10 Q55 20 40 40 Q25 20 40 10Z M10 40 Q20 55 40 40 Q20 25 10 40Z M40 70 Q55 60 40 40 Q25 60 40 70Z M70 40 Q60 55 40 40 Q60 25 70 40Z' fill='%23C39B48' fill-opacity='0.6'/%3E%3Ccircle cx='40' cy='40' r='4' fill='%23C39B48' fill-opacity='0.4'/%3E%3C/svg%3E");
    background-size: 80px 80px;
    opacity: 0.03;
}

/* Ogee lattice pattern */
.damask-ogee {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='70'%3E%3Cpath d='M25 0 Q50 17 25 35 Q0 17 25 0Z M25 35 Q50 52 25 70 Q0 52 25 35Z' fill='none' stroke='%23C39B48' stroke-width='0.5' stroke-opacity='0.6'/%3E%3C/svg%3E");
    background-size: 50px 70px;
    opacity: 0.035;
}

/* --- Main Manuscript Container --- */
#manuscript {
    position: relative;
    z-index: 1;
    max-width: 1200px;
    margin: 0 auto;
    padding: 80px 120px;
}

@media (max-width: 1024px) {
    #manuscript {
        padding: 60px 40px;
    }
}

@media (max-width: 600px) {
    #manuscript {
        padding: 40px 20px;
    }
}

/* --- Manuscript Sections --- */
.manuscript-section {
    margin-bottom: 0;
    padding: 64px 0;
    opacity: 0.3;
    transform: translateY(20px);
    transition: opacity 0.8s var(--ease-text), transform 0.8s var(--ease-text);
}

.manuscript-section.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* --- Manuscript Grid (Asymmetric) --- */
.manuscript-grid {
    display: grid;
    grid-template-columns: 55% 30%;
    gap: 5%;
    align-items: start;
}

.manuscript-grid-reversed {
    grid-template-columns: 30% 55%;
    gap: 5%;
}

@media (max-width: 768px) {
    .manuscript-grid,
    .manuscript-grid-reversed {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .marginalia-left {
        order: 2;
    }
}

/* --- Ornamental Frame System --- */
.ornamental-frame {
    position: relative;
    padding: 48px;
    border: 1px solid rgba(195, 155, 72, 0.15);
}

.ornamental-frame::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, var(--bg-mid) 0%, var(--bg-deep) 100%);
    z-index: -1;
    border-radius: 2px;
}

/* Frame Corners */
.frame-corner {
    position: absolute;
    width: 48px;
    height: 48px;
    z-index: 2;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
}

.frame-corner-tl { top: -8px; left: -8px; }
.frame-corner-tr { top: -8px; right: -8px; }
.frame-corner-bl { bottom: -8px; left: -8px; }
.frame-corner-br { bottom: -8px; right: -8px; }

/* Frame Edges */
.frame-edge {
    position: absolute;
    z-index: 1;
    overflow: hidden;
}

.frame-edge-top {
    top: -2px;
    left: 40px;
    right: 40px;
    height: 16px;
}

.frame-edge-bottom {
    bottom: -2px;
    left: 40px;
    right: 40px;
    height: 16px;
}

.frame-edge-left {
    top: 40px;
    bottom: 40px;
    left: -2px;
    width: 16px;
}

.frame-edge-right {
    top: 40px;
    bottom: 40px;
    right: -2px;
    width: 16px;
}

.frame-edge svg {
    width: 100%;
    height: 100%;
}

/* Rosette Medallion */
.frame-medallion {
    position: absolute;
    top: -32px;
    left: 50%;
    transform: translateX(-50%);
    width: 64px;
    height: 64px;
    z-index: 3;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
}

/* Frame hover interaction */
.ornamental-frame:hover {
    border-color: rgba(195, 155, 72, 0.35);
    box-shadow: 0 0 20px rgba(195, 155, 72, 0.1);
    transition: border-color 300ms var(--ease-hover), box-shadow 300ms var(--ease-hover);
}

.ornamental-frame:hover .frame-corner {
    opacity: 1;
    filter: drop-shadow(0 2px 8px rgba(195, 155, 72, 0.3));
    transition: opacity 300ms var(--ease-hover), filter 300ms var(--ease-hover);
}

/* Frame content */
.frame-content {
    position: relative;
    z-index: 1;
}

/* --- Stroke Animation for Frames --- */
.ornamental-frame[data-animate-frame] .frame-corner path,
.ornamental-frame[data-animate-frame] .frame-corner circle {
    stroke-dasharray: 200;
    stroke-dashoffset: 200;
    transition: stroke-dashoffset 1.2s var(--ease-ornament);
}

.ornamental-frame.frame-drawn .frame-corner path,
.ornamental-frame.frame-drawn .frame-corner circle {
    stroke-dashoffset: 0;
}

/* --- Edge stroke animation --- */
.ornamental-frame[data-animate-frame] .frame-edge path {
    stroke-dasharray: 500;
    stroke-dashoffset: 500;
    transition: stroke-dashoffset 1.6s var(--ease-ornament) 0.3s;
}

.ornamental-frame.frame-drawn .frame-edge path {
    stroke-dashoffset: 0;
}

/* --- Medallion animation --- */
.ornamental-frame[data-animate-frame] .frame-medallion path,
.ornamental-frame[data-animate-frame] .frame-medallion circle {
    opacity: 0;
    transition: opacity 0.8s var(--ease-text) 0.6s;
}

.ornamental-frame.frame-drawn .frame-medallion path,
.ornamental-frame.frame-drawn .frame-medallion circle {
    opacity: 1;
}

/* Preserve original stroke-opacity on medallion elements */
.ornamental-frame.frame-drawn .frame-medallion circle:nth-child(1) { opacity: 0.5; }
.ornamental-frame.frame-drawn .frame-medallion circle:nth-child(2) { opacity: 0.35; }
.ornamental-frame.frame-drawn .frame-medallion circle:last-child { opacity: 0.2; }
.ornamental-frame.frame-drawn .frame-medallion path { opacity: 0.15; }

/* --- Typography --- */

/* Site Title */
.site-title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 700;
    font-style: italic;
    font-size: clamp(2.8rem, 6vw, 5.2rem);
    letter-spacing: -0.02em;
    line-height: 1.05;
    color: var(--text-primary);
    text-shadow:
        0 1px 0 rgba(195, 155, 72, 0.3),
        0 2px 8px rgba(0, 0, 0, 0.6);
    text-align: center;
    margin-bottom: 24px;
}

.title-content {
    text-align: center;
    padding: 80px 40px;
}

.title-letter {
    display: inline-block;
    opacity: 0;
    transform: translateY(10px);
}

.title-letter.visible {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.4s var(--ease-text), transform 0.4s var(--ease-text);
}

/* Drop Cap Initial in Title */
.drop-cap-initial {
    font-family: 'Cinzel Decorative', Georgia, serif;
    font-weight: 900;
    color: var(--gold-primary);
    text-shadow:
        0 1px 0 rgba(195, 155, 72, 0.4),
        0 2px 12px rgba(0, 0, 0, 0.7);
}

.drop-cap-initial.scaled {
    animation: dropCapScale 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes dropCapScale {
    0% { transform: scale(0.8) translateY(10px); opacity: 0; }
    100% { transform: scale(1) translateY(0); opacity: 1; }
}

/* Second capital S in ScriptSwirl */
.title-cap-s {
    font-family: 'Cinzel Decorative', Georgia, serif;
    font-weight: 900;
    color: var(--gold-primary);
    text-shadow:
        0 1px 0 rgba(195, 155, 72, 0.4),
        0 2px 12px rgba(0, 0, 0, 0.7);
}

/* Site Subtitle */
.site-subtitle {
    font-family: 'Tangerine', cursive;
    font-weight: 700;
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    color: var(--gold-secondary);
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
    letter-spacing: 0.02em;
    opacity: 0;
    transition: opacity 0.6s var(--ease-text);
}

.site-subtitle.visible {
    opacity: 1;
}

/* Section Headings */
.section-heading {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 700;
    font-style: italic;
    font-size: clamp(2rem, 4vw, 3.2rem);
    letter-spacing: -0.02em;
    line-height: 1.05;
    color: var(--text-primary);
    text-shadow:
        0 1px 0 rgba(195, 155, 72, 0.3),
        0 2px 8px rgba(0, 0, 0, 0.6);
    margin-bottom: 32px;
}

/* Drop Caps */
.drop-cap {
    font-family: 'Cinzel Decorative', Georgia, serif;
    font-weight: 900;
    font-size: clamp(4rem, 5vw, 6rem);
    float: left;
    line-height: 0.75;
    margin-right: 12px;
    margin-top: 8px;
    color: var(--gold-primary);
    text-shadow:
        0 1px 0 rgba(195, 155, 72, 0.4),
        0 2px 12px rgba(0, 0, 0, 0.7);
    position: relative;
}

.drop-cap::after {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(195, 155, 72, 0.08) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 300ms var(--ease-hover);
    pointer-events: none;
}

.drop-cap:hover::after {
    opacity: 1;
}

/* Body Text */
.body-text {
    color: var(--text-primary);
    margin-bottom: 24px;
    text-indent: 1.5em;
}

.body-text:first-of-type {
    text-indent: 0;
}

/* --- Marginalia & Pull Quotes --- */
.marginalia-column {
    padding-top: 40px;
}

.pull-quote {
    padding: 24px 0;
    border-top: 1px solid rgba(195, 155, 72, 0.2);
    border-bottom: 1px solid rgba(195, 155, 72, 0.2);
    margin-bottom: 32px;
}

.quote-text {
    font-family: 'Tangerine', cursive;
    font-weight: 700;
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    line-height: 1.3;
    color: var(--gold-secondary);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.manicule {
    display: block;
    font-size: 2rem;
    color: var(--gold-primary);
    margin-bottom: 8px;
    opacity: 0.7;
}

.fleuron {
    display: block;
    font-size: 1.5rem;
    color: var(--gold-primary);
    margin-top: 12px;
    text-align: center;
    opacity: 0.6;
}

.asterism {
    display: block;
    font-size: 1.5rem;
    color: var(--gold-primary);
    margin-top: 12px;
    text-align: center;
    opacity: 0.6;
}

/* Decorative Vignettes */
.decorative-vignette {
    text-align: center;
    padding: 20px 0;
    opacity: 0.6;
}

.decorative-vignette svg {
    max-width: 120px;
    height: auto;
}

/* --- Ornamental Dividers --- */
.ornamental-divider {
    padding: 20px 0;
    text-align: center;
    overflow: visible;
}

.ornamental-divider svg {
    max-width: 600px;
    width: 100%;
    height: auto;
}

.divider-path {
    stroke-dasharray: 1600;
    stroke-dashoffset: 1600;
    transition: stroke-dashoffset 1.8s var(--ease-ornament);
}

.ornamental-divider.divider-drawn .divider-path {
    stroke-dashoffset: 0;
}

/* --- Colophon Section --- */
.ornamental-frame-final {
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
}

.colophon-heading {
    text-align: center;
}

.colophon-text {
    text-align: center;
    text-indent: 0;
    font-size: clamp(0.95rem, 1.1vw, 1.1rem);
    color: var(--text-secondary);
}

.colophon-mark {
    margin-top: 40px;
    padding-top: 24px;
    border-top: 1px solid rgba(195, 155, 72, 0.2);
    text-align: center;
}

.colophon-domain {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 700;
    font-style: italic;
    font-size: 1.4rem;
    color: var(--gold-primary);
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
    display: block;
    margin-bottom: 12px;
    letter-spacing: 0.1em;
}

.colophon-fleuron {
    font-size: 2rem;
    color: var(--gold-primary);
    opacity: 0.6;
}

/* --- Gold Rule Lines with Finials --- */
.ornamental-frame::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 24px;
    right: 24px;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(195, 155, 72, 0.4) 20%,
        rgba(195, 155, 72, 0.4) 80%,
        transparent 100%
    );
}

/* --- Link Styles --- */
a {
    color: var(--jewel-lapis);
    text-decoration: none;
    background-image: linear-gradient(var(--jewel-lapis), var(--jewel-lapis));
    background-size: 0% 1px;
    background-position: 0% 100%;
    background-repeat: no-repeat;
    transition: background-size 300ms var(--ease-hover);
}

a:hover {
    background-size: 100% 1px;
}

/* --- Gold Gradient Effects --- */
.gold-gradient {
    background: linear-gradient(45deg, var(--gold-primary), var(--highlight));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* --- Candlelight Glow Effect on Sections --- */
.manuscript-section {
    position: relative;
}

.manuscript-section::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    height: 60%;
    background: radial-gradient(ellipse at center,
        rgba(44, 30, 16, 0.6) 0%,
        transparent 70%
    );
    z-index: -1;
    pointer-events: none;
}

/* --- Section Transition Darkening --- */
.ornamental-divider {
    position: relative;
}

.ornamental-divider::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 100%;
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(26, 18, 9, 0.3) 50%,
        transparent 100%
    );
    pointer-events: none;
}

/* --- Responsive Adjustments --- */
@media (max-width: 768px) {
    .ornamental-frame {
        padding: 32px 24px;
    }

    .title-content {
        padding: 60px 20px;
    }

    .frame-corner {
        width: 36px;
        height: 36px;
    }

    .frame-corner-tl { top: -6px; left: -6px; }
    .frame-corner-tr { top: -6px; right: -6px; }
    .frame-corner-bl { bottom: -6px; left: -6px; }
    .frame-corner-br { bottom: -6px; right: -6px; }

    .frame-edge-top,
    .frame-edge-bottom {
        left: 30px;
        right: 30px;
    }

    .frame-edge-left,
    .frame-edge-right {
        top: 30px;
        bottom: 30px;
    }

    .frame-medallion {
        width: 48px;
        height: 48px;
        top: -24px;
    }

    .drop-cap {
        font-size: 3.5rem;
        margin-right: 8px;
    }

    .manuscript-section {
        padding: 40px 0;
    }

    .marginalia-column {
        padding-top: 0;
    }
}

@media (max-width: 480px) {
    .ornamental-frame {
        padding: 24px 16px;
    }

    .site-title {
        font-size: 2.4rem;
    }

    .section-heading {
        font-size: 1.8rem;
    }

    .drop-cap {
        font-size: 3rem;
    }
}

/* --- Selection Color --- */
::selection {
    background: rgba(195, 155, 72, 0.3);
    color: var(--text-primary);
}

::-moz-selection {
    background: rgba(195, 155, 72, 0.3);
    color: var(--text-primary);
}

/* --- Scrollbar Styling --- */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-deep);
}

::-webkit-scrollbar-thumb {
    background: rgba(195, 155, 72, 0.3);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(195, 155, 72, 0.5);
}