/* license.broker -- Victorian midnight-blue timeline */

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

:root{
    --sapphire:#0F1B3D;
    --navy:#1A2850;
    --starlight:#8BA4C8;
    --gold:#C4A862;
    --abyss:#080E22;
    --frost:#D4DCE8;
    --mist:#7A8AAA;
    --chrome:#A8C0E0;
    --steel:#2A3654;
    --pulse-base:#1A2D5A;
    --pulse-glint:#2A4070;
}

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

body{
    background:var(--sapphire);
    color:var(--frost);
    font-family:'EB Garamond',serif;
    font-weight:400;
    font-size:clamp(1rem,1.15vw,1.1rem);
    line-height:1.75;
    overflow-x:hidden;
    letter-spacing:0.005em;
    font-feature-settings:'liga' 1,'onum' 1;
}

/* Timeline spine */
.timeline-spine{
    position:fixed;
    left:50%;
    top:0;bottom:0;
    width:8px;
    transform:translateX(-50%);
    z-index:50;
    pointer-events:none;
}

.timeline-spine::before,
.timeline-spine::after{
    content:'';
    position:absolute;
    left:1px;
    width:1px;
    top:0;bottom:0;
    background:var(--starlight);
    opacity:0.2;
}

.timeline-spine::after{
    left:6px;
}

.spine-fill{
    position:absolute;
    left:3px;
    width:2px;
    top:0;
    height:0%;
    background:linear-gradient(to bottom,var(--starlight),var(--gold));
    opacity:0.4;
    transition:height 0.1s linear;
}

/* Shield nav */
.shield-nav{
    position:fixed;
    left:50%;
    transform:translateX(-50%);
    top:50%;
    margin-top:-100px;
    display:flex;
    flex-direction:column;
    gap:2.5rem;
    z-index:60;
}

.shield{
    width:16px;height:16px;
    border:1.5px solid var(--starlight);
    border-radius:2px;
    background:transparent;
    cursor:pointer;
    transition:background 0.3s ease,border-color 0.3s ease;
    transform:rotate(45deg);
}

.shield.active{
    background:var(--starlight);
    border-color:var(--gold);
}

/* Sections */
.timeline-section{
    min-height:100vh;
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:6rem 2rem;
}

/* Skeleton loading */
.skeleton-frame{
    position:absolute;
    inset:0;
    background:linear-gradient(90deg,var(--pulse-base) 0%,var(--pulse-glint) 50%,var(--pulse-base) 100%);
    background-size:200% 100%;
    animation:skeleton-shimmer 2s linear infinite;
    opacity:0;
    pointer-events:none;
    z-index:0;
}

@keyframes skeleton-shimmer{
    from{background-position:200% 0}
    to{background-position:-200% 0}
}

/* Charter */
.charter-section{
    background:var(--sapphire);
}

.cartouche{
    position:relative;
    text-align:center;
    z-index:2;
    opacity:0;
    transform:translateY(20px);
    transition:opacity 0.8s ease,transform 0.8s ease;
}

.cartouche.visible{
    opacity:1;
    transform:translateY(0);
}

.cartouche-svg{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
}

.draw-stroke{
    stroke-dasharray:1500;
    stroke-dashoffset:1500;
    transition:stroke-dashoffset 2s ease;
}

.visible .draw-stroke{
    stroke-dashoffset:0;
}

.charter-title{
    font-family:'Cormorant',serif;
    font-weight:300;
    font-size:clamp(3rem,7vw,7rem);
    color:var(--frost);
    letter-spacing:0.04em;
    line-height:1.05;
    padding:3rem 4rem;
}

.charter-subtitle{
    font-family:'Cormorant SC',serif;
    font-weight:400;
    font-size:0.9rem;
    letter-spacing:0.12em;
    color:var(--mist);
    text-transform:uppercase;
}

.wireframe-polyhedron{
    position:absolute;
    width:200px;height:200px;
    top:15%;right:10%;
    border:1px solid var(--starlight);
    opacity:0.06;
    transform:rotate(45deg);
    z-index:1;
    animation:gentle-spin 60s linear infinite;
}

@keyframes gentle-spin{
    from{transform:rotate(45deg)}
    to{transform:rotate(405deg)}
}

/* Precedents */
.precedents-section{
    background:var(--sapphire);
    gap:4rem;
}

.timeline-entry{
    max-width:min(500px,42%);
    position:relative;
    opacity:0;
    transform:translateY(20px);
    transition:opacity 0.6s ease,transform 0.6s ease;
}

.timeline-entry.visible{
    opacity:1;
    transform:translateY(0);
}

.entry-left{align-self:flex-start;margin-left:8%}
.entry-right{align-self:flex-end;margin-right:8%}

.entry-connector{
    position:absolute;
    top:50%;
    width:40px;
    height:1px;
    background:var(--starlight);
    opacity:0.3;
}

.entry-left .entry-connector{right:-50px}
.entry-right .entry-connector{left:-50px}

.entry-panel{
    background:var(--navy);
    border:1px solid var(--starlight);
    border-radius:4px;
    padding:clamp(1.5rem,3vw,2.5rem);
    position:relative;
}

.panel-ornament{
    position:absolute;
    inset:4px;
    border:1px solid var(--gold);
    border-radius:2px;
    opacity:0.15;
    pointer-events:none;
}

.entry-heading{
    font-family:'Cormorant',serif;
    font-weight:600;
    font-size:clamp(1.5rem,2.2vw,2.2rem);
    color:var(--frost);
    letter-spacing:0.015em;
    line-height:1.25;
    margin-bottom:0.75rem;
}

.entry-text{
    font-family:'EB Garamond',serif;
    line-height:1.75;
    color:var(--frost);
    opacity:0.85;
}

/* Registry */
.registry-section{
    background:var(--sapphire);
}

.registry-entries{
    display:flex;
    flex-direction:column;
    gap:3rem;
    max-width:600px;
    width:100%;
}

.registry-item{
    display:flex;
    align-items:center;
    gap:1rem;
    opacity:0;
    transform:translateY(15px);
    transition:opacity 0.4s ease,transform 0.4s ease;
}

.registry-item.visible{
    opacity:1;
    transform:translateY(0);
}

.registry-item.entry-left{align-self:flex-start}
.registry-item.entry-right{align-self:flex-end}

.fleuron{
    color:var(--gold);
    font-size:1rem;
}

.registry-label{
    font-family:'Cormorant SC',serif;
    font-weight:600;
    font-size:clamp(1rem,1.5vw,1.3rem);
    letter-spacing:0.08em;
    color:var(--frost);
}

/* Seal */
.seal-section{
    background:linear-gradient(to bottom,var(--sapphire),var(--abyss));
    gap:2rem;
}

.terminal-ornament{
    opacity:0;
    transform:scale(0.9);
    transition:opacity 1s ease,transform 1s ease;
}

.terminal-ornament.visible{
    opacity:1;
    transform:scale(1);
}

.seal-svg{
    width:clamp(150px,25vmin,200px);
    height:auto;
}

.seal-statement{
    font-family:'Cormorant',serif;
    font-weight:500;
    font-size:clamp(1.2rem,1.8vw,1.6rem);
    color:var(--frost);
    text-align:center;
    max-width:600px;
    line-height:1.5;
    opacity:0;
    transition:opacity 0.8s ease 0.5s;
}

.seal-statement.visible{opacity:0.85}

.seal-domain{
    font-family:'Cormorant SC',serif;
    font-weight:600;
    font-size:clamp(1.5rem,3vw,2.5rem);
    color:var(--gold);
    letter-spacing:0.12em;
    opacity:0;
    transition:opacity 0.8s ease 1s;
}

.seal-domain.visible{opacity:1}

/* Responsive */
@media(max-width:768px){
    .timeline-spine,.shield-nav{display:none}
    .timeline-entry{max-width:100%;margin-left:0!important;margin-right:0!important;align-self:center!important}
    .entry-connector{display:none}
    .registry-item{align-self:center!important}
}

@media(prefers-reduced-motion:reduce){
    .wireframe-polyhedron{animation:none}
    .skeleton-frame{animation:none;opacity:0}
    .draw-stroke{stroke-dashoffset:0;transition:none}
    .cartouche,.timeline-entry,.registry-item,.terminal-ornament,.seal-statement,.seal-domain{
        opacity:1;transform:none;transition:none;
    }
}