/* Compliance language: against slightly darker cream background. (Google Fonts). Interactions (Primary Animation Strategy). Interactions as Primary Animation (5% pattern frequency). Intersection Observer for scroll-triggered reveals. Intersection Observer with `threshold: 0.15`. Use staggered delays within paragraphs — each line or sentence appears 80ms after the previous one. Easing: `cubic-bezier(0.25, 0.46, 0.45, 0.94)`. Intersection Observer. They slide from their resting positions to form a composed 2x2 grid — the assembled "logo" of opensource.bar. This is the site's climactic visual moment. */
:root{
    --paper:#F5F0E8;
    --cream:#EDE5D8;
    --charcoal:#3A352E;
    --gray:#5C564E;
    --terracotta:#C17F59;
    --sage:#8B9A7B;
    --gold:#C4A882;
    --bronze:#8B7D6B;
    --display:clamp(2rem,5vw,4.2rem);
    --pull:clamp(1.4rem,3vw,2.2rem);
    --body:clamp(.98rem,1.2vw,1.1rem);
    --mono:clamp(.8rem,1.2vw,.95rem);
    --label:clamp(.875rem,1.5vw,1.1rem);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{min-height:100vh;background:var(--paper);color:var(--charcoal);font-family:Jost,Inter,Futura,sans-serif;font-size:var(--body);font-weight:400;line-height:1.75;overflow-x:hidden}

.geometry-field{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.field-shape{position:absolute;left:var(--x);top:var(--y);width:var(--s);height:var(--s);border:1px solid rgba(196,168,130,.08);transform:translate3d(0,var(--offset,0px),0);animation:fieldSpin var(--d) linear infinite;will-change:transform}
.field-shape.tri{clip-path:polygon(50% 0,0 100%,100% 100%);background:rgba(196,168,130,.018)}
.field-shape.cir{border-radius:50%}
.field-shape.hex{clip-path:polygon(50% 0,93.3% 25%,93.3% 75%,50% 100%,6.7% 75%,6.7% 25%);background:rgba(196,168,130,.012)}
.field-shape.dia{transform:translate3d(0,var(--offset,0px),0) rotate(45deg)}
@keyframes fieldSpin{to{rotate:360deg}}

.narrative{position:relative;z-index:1;width:min(100%,640px);margin:0 auto;padding:0 2rem}
.opening-frame{height:100vh;display:grid;place-items:center}
.site-title{width:100%;font-family:Jost,Inter,Futura,sans-serif;font-size:var(--display);font-weight:700;letter-spacing:.02em;line-height:1.1;text-transform:uppercase;color:var(--charcoal)}
.site-title span{display:block;text-align:center}
.site-title i{display:block;width:20%;height:1px;margin:1rem auto;background:var(--bronze);animation:breathe 4s ease-in-out infinite}
.source-word{position:relative}.source-word b{position:absolute;right:4%;bottom:-.7em;font-family:"Cormorant Garamond",serif;font-size:.35em;font-style:italic;font-weight:300;letter-spacing:.15em;text-transform:none;color:var(--terracotta)}
@keyframes breathe{0%,100%{width:20%}50%{width:100%}}

.act{padding:80px 0 0}.act p{margin:0 0 1.5rem}.reveal{opacity:0;transform:translateY(16px);transition:opacity .8s cubic-bezier(.25,.46,.45,.94),transform .8s cubic-bezier(.25,.46,.45,.94)}
.reveal.visible{opacity:1;transform:translateY(0)}
.reveal .sentence{display:inline;opacity:0;transition:opacity .65s cubic-bezier(.25,.46,.45,.94)}
.reveal.visible .sentence{opacity:1;transition-delay:calc(var(--i)*80ms)}

.code-block{margin:1.5rem 0;padding:1.5rem;background:var(--cream);border-left:2px solid rgba(139,154,123,.6);color:var(--gray);font-family:"IBM Plex Mono",monospace;font-size:var(--mono);font-weight:400;line-height:1.85;letter-spacing:.01em;white-space:pre-wrap;animation:codePulse 3s ease-in-out infinite}
.code-block code{font:inherit;color:inherit}
@keyframes codePulse{0%,100%{border-left-color:rgba(139,154,123,.6)}50%{border-left-color:rgba(139,154,123,1)}}

.divider{display:flex;flex-direction:column;align-items:center;gap:.75rem;margin:80px 0;color:var(--charcoal)}
.divider em{font-family:"Cormorant Garamond",serif;font-size:var(--label);font-style:italic;font-weight:600;letter-spacing:.05em;opacity:0;transform:translateY(4px);transition:opacity .3s cubic-bezier(.34,1.56,.64,1),transform .3s cubic-bezier(.34,1.56,.64,1)}
.divider:hover em{opacity:1;transform:translateY(0)}
.shape,.mark-shape{display:block;width:48px;height:48px;border:1.5px solid currentColor;transition:transform .3s cubic-bezier(.34,1.56,.64,1),background-color .3s cubic-bezier(.34,1.56,.64,1)}
.shape:hover{transform:scale(1.08)}
.triangle{color:var(--terracotta);clip-path:polygon(50% 0,0 100%,100% 100%)}.triangle:hover{background:rgba(193,127,89,.15)}
.circle{color:var(--sage);border-radius:50%}.circle:hover{background:rgba(139,154,123,.15)}
.hexagon{color:var(--gold);clip-path:polygon(50% 0,93.3% 25%,93.3% 75%,50% 100%,6.7% 75%,6.7% 25%)}.hexagon:hover{background:rgba(196,168,130,.15)}
.diamond{color:var(--bronze);transform:rotate(45deg)}.diamond:hover{transform:rotate(45deg) scale(1.08);background:rgba(139,125,107,.15)}

.closing-frame{height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3rem;padding:2rem 0}.mark{position:relative;width:126px;height:126px}.mark-shape{position:absolute;opacity:0}.mark-triangle{color:var(--terracotta);clip-path:polygon(50% 0,0 100%,100% 100%);transform:translate(-170px,-45px) scale(.8)}.mark-circle{color:var(--sage);border-radius:50%;transform:translate(190px,-70px) scale(.8)}.mark-hexagon{color:var(--gold);clip-path:polygon(50% 0,93.3% 25%,93.3% 75%,50% 100%,6.7% 75%,6.7% 25%);transform:translate(-150px,160px) scale(.8)}.mark-diamond{color:var(--bronze);transform:translate(175px,145px) rotate(45deg) scale(.8)}
.closing-frame.assembled .mark-shape{opacity:1;transition:opacity .8s cubic-bezier(.25,.46,.45,.94),transform .8s cubic-bezier(.25,.46,.45,.94)}
.closing-frame.assembled .mark-triangle{transform:translate(8px,8px) scale(1)}.closing-frame.assembled .mark-circle{transform:translate(70px,8px) scale(1);transition-delay:.08s}.closing-frame.assembled .mark-hexagon{transform:translate(8px,70px) scale(1);transition-delay:.16s}.closing-frame.assembled .mark-diamond{transform:translate(70px,70px) rotate(45deg) scale(1);transition-delay:.24s}
.closing-frame p{max-width:500px;text-align:center;font-family:"Cormorant Garamond",serif;font-size:var(--pull);font-style:italic;font-weight:300;line-height:1.6;color:var(--charcoal);opacity:0;transform:translateY(16px);transition:opacity .8s cubic-bezier(.25,.46,.45,.94) .42s,transform .8s cubic-bezier(.25,.46,.45,.94) .42s}.closing-frame.assembled p{opacity:1;transform:translateY(0)}

@media(max-width:700px){.narrative{padding:0 1.35rem}.act{padding-top:64px}.divider{margin:64px 0}.source-word b{right:0}.geometry-field{opacity:.75}}