:root {
    --canvas: #f8f6f3;
    --ink: #1a1a1a;
    --red: #e63946;
    --blue: #457b9d;
    --yellow: #f4a261;
    --navy: #1d3557;
    --cream: #fefae0;
    --shadow: rgba(26, 26, 26, 0.15);
}

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

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: var(--canvas);
    font-family: 'DM Sans', sans-serif;
}

/* ============================================
   GRID BACKGROUND
   ============================================ */
.grid-bg {
    position: fixed;
    inset: 0;
    background-image:
        linear-gradient(rgba(26, 26, 26, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(26, 26, 26, 0.03) 1px, transparent 1px);
    background-size: 60px 60px;
}

.construction-lines {
    position: fixed;
    inset: 0;
    pointer-events: none;
    opacity: 0.06;
}

.construction-line {
    position: absolute;
    background: var(--ink);
}

.construction-line.horizontal {
    width: 100%;
    height: 1px;
}

.construction-line.vertical {
    width: 1px;
    height: 100%;
}

.construction-line.diagonal {
    width: 200%;
    height: 1px;
    transform-origin: 0 0;
}

/* ============================================
   GEOMETRIC SHAPES
   ============================================ */
.shape {
    position: absolute;
    transform-origin: center center;
}

/* Circles */
.circle {
    border-radius: 50%;
}

.circle--large {
    width: 250px;
    height: 250px;
}

.circle--medium {
    width: 120px;
    height: 120px;
}

.circle--small {
    width: 60px;
    height: 60px;
}

/* Triangles */
.triangle {
    width: 0;
    height: 0;
    background: transparent !important;
}

.triangle--large {
    border-left: 100px solid transparent;
    border-right: 100px solid transparent;
    border-bottom: 173px solid var(--red);
}

.triangle--medium {
    border-left: 60px solid transparent;
    border-right: 60px solid transparent;
    border-bottom: 104px solid var(--blue);
}

.triangle--small {
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    border-bottom: 52px solid var(--yellow);
}

/* Rectangles */
.rectangle {
    background: var(--ink);
}

.rectangle--horizontal {
    width: 200px;
    height: 40px;
}

.rectangle--vertical {
    width: 40px;
    height: 200px;
}

.rectangle--square {
    width: 100px;
    height: 100px;
}

/* Color variations */
.shape--red { background: var(--red); }
.shape--blue { background: var(--blue); }
.shape--yellow { background: var(--yellow); }
.shape--navy { background: var(--navy); }
.shape--ink { background: var(--ink); }
.shape--outline {
    background: transparent;
    border: 3px solid var(--ink);
}

/* ============================================
   CHOREOGRAPHED ANIMATIONS
   ============================================ */

/* Central composition */
.shape-1 {
    top: 50%;
    left: 50%;
    animation: dance-1 12s ease-in-out infinite;
}

@keyframes dance-1 {
    0%, 100% { transform: translate(-50%, -50%) rotate(0deg) scale(1); }
    25% { transform: translate(-40%, -60%) rotate(90deg) scale(1.1); }
    50% { transform: translate(-50%, -50%) rotate(180deg) scale(1); }
    75% { transform: translate(-60%, -40%) rotate(270deg) scale(0.9); }
}

.shape-2 {
    top: 30%;
    left: 25%;
    animation: dance-2 10s ease-in-out infinite;
}

@keyframes dance-2 {
    0%, 100% { transform: translate(-50%, -50%) rotate(0deg); }
    33% { transform: translate(-30%, -70%) rotate(120deg); }
    66% { transform: translate(-70%, -30%) rotate(240deg); }
}

.shape-3 {
    top: 70%;
    left: 75%;
    animation: dance-3 8s ease-in-out infinite;
}

@keyframes dance-3 {
    0%, 100% { transform: translate(-50%, -50%) scale(1) rotate(0deg); }
    50% { transform: translate(-50%, -50%) scale(1.3) rotate(180deg); }
}

.shape-4 {
    top: 20%;
    left: 70%;
    animation: dance-4 15s linear infinite;
}

@keyframes dance-4 {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

.shape-5 {
    top: 80%;
    left: 30%;
    animation: dance-5 9s ease-in-out infinite;
}

@keyframes dance-5 {
    0%, 100% { transform: translate(-50%, -50%) translateX(0) rotate(0deg); }
    25% { transform: translate(-50%, -50%) translateX(50px) rotate(45deg); }
    75% { transform: translate(-50%, -50%) translateX(-50px) rotate(-45deg); }
}

.shape-6 {
    top: 45%;
    left: 85%;
    animation: dance-6 11s ease-in-out infinite;
}

@keyframes dance-6 {
    0%, 100% { transform: translate(-50%, -50%) translateY(0); opacity: 1; }
    50% { transform: translate(-50%, -50%) translateY(-80px); opacity: 0.6; }
}

.shape-7 {
    top: 55%;
    left: 15%;
    animation: dance-7 13s ease-in-out infinite;
}

@keyframes dance-7 {
    0%, 100% { transform: translate(-50%, -50%) scale(1); }
    25% { transform: translate(-50%, -50%) scale(0.5); }
    50% { transform: translate(-50%, -50%) scale(1.2); }
    75% { transform: translate(-50%, -50%) scale(0.8); }
}

/* Orbiting shapes */
.orbit-container {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 400px;
    height: 400px;
    transform: translate(-50%, -50%);
    animation: orbit-rotate 20s linear infinite;
}

@keyframes orbit-rotate {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

.orbiter {
    position: absolute;
    animation: counter-rotate 20s linear infinite;
}

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

.orbiter-1 { top: 0; left: 50%; transform: translateX(-50%); }
.orbiter-2 { top: 50%; right: 0; transform: translateY(-50%); }
.orbiter-3 { bottom: 0; left: 50%; transform: translateX(-50%); }
.orbiter-4 { top: 50%; left: 0; transform: translateY(-50%); }

/* ============================================
   SHADOWS
   ============================================ */
.shape-shadow {
    filter: drop-shadow(8px 8px 0 var(--shadow));
}

/* ============================================
   BLEND MODES
   ============================================ */
.blend-multiply {
    mix-blend-mode: multiply;
}

.blend-overlay {
    mix-blend-mode: overlay;
}

/* ============================================
   TYPOGRAPHY
   ============================================ */
.title-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 100;
    pointer-events: none;
}

.title {
    font-family: 'Monument Extended', 'DM Sans', sans-serif;
    font-size: clamp(3rem, 12vw, 10rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--ink);
    text-transform: uppercase;
    line-height: 0.9;
    mix-blend-mode: difference;
}

.title span {
    display: block;
}

.subtitle {
    font-family: 'DM Sans', sans-serif;
    font-size: clamp(0.8rem, 2vw, 1.2rem);
    font-weight: 400;
    color: var(--ink);
    letter-spacing: 0.5em;
    margin-top: 1.5rem;
    text-transform: uppercase;
    opacity: 0.6;
}

.bottom-text {
    position: absolute;
    bottom: 5%;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    z-index: 10;
}

.tagline {
    font-family: 'DM Sans', sans-serif;
    font-size: clamp(0.8rem, 1.5vw, 1.1rem);
    font-weight: 300;
    color: var(--ink);
    letter-spacing: 0.2em;
    opacity: 0.4;
}

/* ============================================
   INTERACTIVE ELEMENTS
   ============================================ */
.shape:hover {
    animation-play-state: paused;
}

/* ============================================
   LINE ELEMENTS
   ============================================ */
.line {
    position: absolute;
    background: var(--ink);
    transform-origin: left center;
}

.line--thin {
    height: 2px;
}

.line--thick {
    height: 6px;
}

.line-1 {
    width: 150px;
    top: 25%;
    left: 10%;
    animation: line-extend 4s ease-in-out infinite;
}

.line-2 {
    width: 100px;
    top: 75%;
    right: 15%;
    animation: line-extend 5s ease-in-out infinite 1s;
}

@keyframes line-extend {
    0%, 100% { transform: scaleX(1); }
    50% { transform: scaleX(1.5); }
}

/* ============================================
   DOTS
   ============================================ */
.dot {
    position: absolute;
    width: 12px;
    height: 12px;
    background: var(--ink);
    border-radius: 50%;
}

.dot-grid {
    position: absolute;
    display: grid;
    grid-template-columns: repeat(5, 20px);
    gap: 15px;
}

.dot-grid .dot {
    position: relative;
    width: 6px;
    height: 6px;
    animation: dot-pulse 2s ease-in-out infinite;
}

.dot-grid .dot:nth-child(odd) {
    animation-delay: 0.5s;
}

@keyframes dot-pulse {
    0%, 100% { transform: scale(1); opacity: 0.3; }
    50% { transform: scale(1.5); opacity: 1; }
}

/* ============================================
   CORNER MARKS
   ============================================ */
.corner-mark {
    position: absolute;
    width: 40px;
    height: 40px;
    border: 2px solid var(--ink);
    opacity: 0.2;
}

.corner-mark--tl {
    top: 30px;
    left: 30px;
    border-right: none;
    border-bottom: none;
}

.corner-mark--tr {
    top: 30px;
    right: 30px;
    border-left: none;
    border-bottom: none;
}

.corner-mark--bl {
    bottom: 30px;
    left: 30px;
    border-right: none;
    border-top: none;
}

.corner-mark--br {
    bottom: 30px;
    right: 30px;
    border-left: none;
    border-top: none;
}