/* completengine.com - Horizontal Scroll Narrative */

:root {
    --kinari: #e8e3d9;
    --aka: #c73e1d;
    --sumi: #0d0d1a;
    --ai: #2d5a7b;
    --nezumi: #6b6b7b;
    --shiroi: #f5f2ed;
    --yoru: #1a1a2e;
}

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

html, body {
    height: 100%;
    overflow: hidden;
    background: var(--sumi);
    color: var(--kinari);
    font-family: 'Inter', sans-serif;
}

.mono {
    font-family: 'IBM Plex Mono', monospace;
}

/* Horizontal Scroll Container */
.scroll-container {
    display: flex;
    height: 100vh;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.scroll-container::-webkit-scrollbar {
    display: none;
}

/* Panels */
.panel {
    min-width: 100vw;
    height: 100vh;
    scroll-snap-align: start;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.panel-content {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4rem;
}

/* Panel backgrounds */
.panel-intro { background: var(--sumi); }
.panel-philosophy { background: var(--yoru); }
.panel-process { background: var(--sumi); }
.panel-technology { background: var(--yoru); }
.panel-craft { background: var(--sumi); }
.panel-contact { background: var(--yoru); }

/* Text blocks */
.text-block {
    position: relative;
    z-index: 2;
    max-width: 600px;
}

.panel-title {
    font-family: 'Noto Sans JP', 'Inter', sans-serif;
    font-size: clamp(2rem, 5vw, 4.5rem);
    font-weight: 300;
    color: var(--kinari);
    margin-bottom: 1.5rem;
    transition: font-weight 0.6s ease;
    line-height: 1.1;
}

.panel-title.active {
    font-weight: 700;
}

.panel-subtitle {
    font-size: clamp(0.8rem, 1.5vw, 1rem);
    color: var(--nezumi);
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.panel-body {
    font-size: clamp(0.9rem, 1.2vw, 1.1rem);
    color: var(--kinari);
    line-height: 1.8;
    opacity: 0.85;
}

.panel-note {
    margin-top: 2rem;
    font-size: 0.85rem;
    color: var(--nezumi);
    font-style: italic;
}

/* Panel numbers */
.panel-number {
    position: absolute;
    bottom: 3rem;
    right: 4rem;
    font-size: 0.75rem;
    color: var(--nezumi);
    letter-spacing: 0.2em;
    opacity: 0.5;
}

/* Geometric Compositions */
.geometric {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    opacity: 0.6;
}

/* Panel 1 - Large circle + line */
.circle-large {
    position: absolute;
    width: 40vw;
    height: 40vw;
    border-radius: 50%;
    border: 1px solid var(--ai);
    top: 50%;
    right: 10%;
    transform: translateY(-50%);
    opacity: 0.4;
}

.line-horizontal {
    position: absolute;
    width: 60%;
    height: 1px;
    background: var(--nezumi);
    top: 50%;
    left: 20%;
    opacity: 0.3;
}

/* Panel 2 - Offset rectangles */
.rect-offset {
    position: absolute;
    border: 1px solid var(--ai);
}

.rect-1 {
    width: 25vw;
    height: 35vh;
    top: 15%;
    right: 15%;
    opacity: 0.3;
}

.rect-2 {
    width: 20vw;
    height: 28vh;
    top: 25%;
    right: 20%;
    opacity: 0.2;
}

.geo-philosophy .circle-small {
    position: absolute;
    width: 8vw;
    height: 8vw;
    border-radius: 50%;
    background: var(--aka);
    opacity: 0.15;
    bottom: 20%;
    right: 25%;
}

/* Panel 3 - Grid dots + diagonal */
.grid-dots {
    position: absolute;
    top: 10%;
    right: 10%;
    width: 30vw;
    height: 60vh;
    background-image: radial-gradient(circle, var(--nezumi) 1px, transparent 1px);
    background-size: 2rem 2rem;
    opacity: 0.3;
}

.line-diagonal {
    position: absolute;
    width: 50vw;
    height: 1px;
    background: var(--aka);
    top: 60%;
    right: 0;
    transform: rotate(-15deg);
    transform-origin: right center;
    opacity: 0.25;
}

/* Panel 4 - Concentric circles */
.concentric-circles {
    position: absolute;
    top: 50%;
    right: 20%;
    transform: translateY(-50%);
}

.c-ring {
    position: absolute;
    border-radius: 50%;
    border: 1px solid var(--ai);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.c-ring-1 { width: 15vw; height: 15vw; opacity: 0.4; }
.c-ring-2 { width: 25vw; height: 25vw; opacity: 0.25; }
.c-ring-3 { width: 35vw; height: 35vw; opacity: 0.15; }

/* Panel 5 - Triangles */
.triangle-composition {
    position: absolute;
    top: 50%;
    right: 15%;
    transform: translateY(-50%);
}

.tri {
    position: absolute;
    width: 0;
    height: 0;
}

.tri-1 {
    border-left: 10vw solid transparent;
    border-right: 10vw solid transparent;
    border-bottom: 17vw solid var(--ai);
    opacity: 0.15;
    top: -10vw;
    left: -5vw;
}

.tri-2 {
    border-left: 7vw solid transparent;
    border-right: 7vw solid transparent;
    border-bottom: 12vw solid var(--aka);
    opacity: 0.1;
    top: -5vw;
    left: 3vw;
}

/* Panel 6 - Dot cluster */
.dot-cluster {
    position: absolute;
    top: 50%;
    right: 15%;
    transform: translateY(-50%);
    width: 20vw;
    height: 20vw;
    background-image: radial-gradient(circle, var(--kinari) 2px, transparent 2px);
    background-size: 1.5rem 1.5rem;
    opacity: 0.15;
}

/* Scroll Indicator */
.scroll-indicator {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 0.75rem;
    z-index: 100;
}

.scroll-indicator .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--nezumi);
    opacity: 0.4;
    transition: all 0.4s ease;
    cursor: pointer;
}

.scroll-indicator .dot.active {
    background: var(--aka);
    opacity: 1;
    transform: scale(1.3);
}

/* Typewriter effect */
.panel-title .char {
    opacity: 0;
    transition: opacity 0.05s ease;
}

.panel-title .char.visible {
    opacity: 1;
}

/* Panel entry animations */
.panel .text-block {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease 0.3s, transform 0.8s ease 0.3s;
}

.panel.in-view .text-block {
    opacity: 1;
    transform: translateY(0);
}

.panel .geometric {
    opacity: 0;
    transition: opacity 1.2s ease 0.1s;
}

.panel.in-view .geometric {
    opacity: 0.6;
}

/* Aka accent line between panels */
.panel::after {
    content: '';
    position: absolute;
    right: 0;
    top: 20%;
    height: 60%;
    width: 1px;
    background: linear-gradient(to bottom, transparent, var(--aka), transparent);
    opacity: 0.3;
}

.panel:last-child::after {
    display: none;
}