/* ============================================
   heisei.boo - Neomorphic Heisei Era Memorial
   Colors: #E4DCD4, #C0B8B0, #FAF6F2, #FF4090, #40E0FF, #3A3430, #5A4A40, #D4A060
   Fonts: Noto Serif JP, Caveat, Noto Sans JP
   ============================================ */

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

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 400;
    line-height: 1.9;
    font-size: clamp(15px, 1.05vw, 17px);
    color: #5A4A40;
    background-color: #E4DCD4;
    overflow-x: hidden;
}

.caveat-font {
    font-family: 'Caveat', cursive;
}

/* --- Annotations (handwritten overlays) --- */
.annotation {
    font-family: 'Caveat', cursive;
    font-size: 14px;
    color: #5A4A40;
    opacity: 0.7;
    pointer-events: none;
    position: absolute;
}

/* ============================================
   SECTION 1: HERO
   ============================================ */
.hero-section {
    width: 100%;
    height: 100vh;
    min-height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #E4DCD4;
    position: relative;
    overflow: hidden;
}

.hero-surface {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-left: 12vw;
}

/* Neomorphic raised surface for hero */
.hero-surface::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-60%, -50%);
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: #E4DCD4;
    box-shadow: 20px 20px 60px #C0B8B0, -20px -20px 60px #FAF6F2;
    z-index: 0;
    opacity: 0.5;
}

/* Ripple container */
.ripple-container {
    position: absolute;
    top: 50%;
    left: 12vw;
    transform: translate(30%, -50%);
    width: 400px;
    height: 400px;
    z-index: 1;
    pointer-events: none;
}

.ripple-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 64, 144, 0.6) 0%, rgba(255, 64, 144, 0) 70%);
    width: 20px;
    height: 20px;
    opacity: 0;
}

.ripple-ring.animate {
    animation: ghostRipple 2000ms ease-out forwards;
}

@keyframes ghostRipple {
    0% {
        width: 20px;
        height: 20px;
        opacity: 0.6;
    }
    100% {
        width: 400px;
        height: 400px;
        opacity: 0;
    }
}

.ripple-ring-1 { animation-delay: 0ms; }
.ripple-ring-2 { animation-delay: 400ms; }
.ripple-ring-3 { animation-delay: 800ms; }

/* Heisei title */
.heisei-title {
    font-family: 'Noto Serif JP', serif;
    font-weight: 700;
    font-size: clamp(48px, 8vw, 120px);
    color: #3A3430;
    position: relative;
    z-index: 2;
    opacity: 0;
    text-shadow: 0 0 0px rgba(255, 64, 144, 0);
    transition: opacity 1000ms ease, text-shadow 1500ms ease;
    letter-spacing: 0.05em;
}

.heisei-title.visible {
    opacity: 1;
    text-shadow: 0 0 40px rgba(255, 64, 144, 0.1);
}

.heisei-title.glow {
    text-shadow: 0 0 40px rgba(255, 64, 144, 0.3);
}

/* Logotype */
.logotype {
    position: absolute;
    top: 40px;
    right: 40px;
    z-index: 10;
}

.logotype-svg {
    width: 220px;
    height: 50px;
    overflow: visible;
}

.logotype-text {
    font-family: 'Caveat', cursive;
    font-weight: 700;
    font-size: 36px;
    fill: #5A4A40;
    stroke: #5A4A40;
    stroke-width: 0.5;
    stroke-dasharray: 500;
    stroke-dashoffset: 500;
    fill-opacity: 0;
    transition: fill-opacity 500ms ease;
}

.logotype-text.drawn {
    stroke-dashoffset: 0;
    fill-opacity: 1;
}

/* Logotype neon underglow */
.logotype-svg::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    right: 0;
    height: 2px;
    background: #FF4090;
    filter: blur(4px);
    opacity: 0.3;
}

/* Hero annotation */
.hero-annotation {
    position: absolute;
    bottom: 18vh;
    left: 14vw;
    transform: rotate(-3deg);
    font-size: 16px;
    z-index: 2;
}

/* Scroll indicator */
.scroll-indicator {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    width: 24px;
    height: 40px;
    border: 2px solid #C0B8B0;
    border-radius: 12px;
    z-index: 2;
}

.scroll-dot {
    width: 4px;
    height: 4px;
    background: #D4A060;
    border-radius: 50%;
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    animation: scrollBounce 2s ease-in-out infinite;
}

@keyframes scrollBounce {
    0%, 100% { top: 8px; opacity: 1; }
    50% { top: 24px; opacity: 0.3; }
}

/* ============================================
   SECTION 2: TIMELINE (Organic S-Curve)
   ============================================ */
.timeline-section {
    position: relative;
    padding: 120px 5vw 120px;
    min-height: 100vh;
    background: #E4DCD4;
    overflow: visible;
}

.section-heading {
    font-family: 'Caveat', cursive;
    font-weight: 700;
    font-size: clamp(24px, 4vw, 48px);
    color: #3A3430;
    text-align: center;
    margin-bottom: 80px;
}

/* Connector SVG */
.connector-svg {
    position: absolute;
    top: 160px;
    left: 0;
    width: 100%;
    height: calc(100% - 200px);
    z-index: 0;
    pointer-events: none;
}

.connector-line {
    stroke: #D4A060;
    stroke-width: 2;
    stroke-dasharray: 6 4;
    stroke-dashoffset: 0;
    animation: flowDots 3s linear infinite;
}

@keyframes flowDots {
    from { stroke-dashoffset: 0; }
    to { stroke-dashoffset: -20; }
}

/* Timeline nodes container */
.timeline-nodes {
    position: relative;
    z-index: 1;
    max-width: 900px;
    margin: 0 auto;
}

/* Individual timeline node */
.timeline-node {
    background: #E4DCD4;
    box-shadow: 6px 6px 16px #C0B8B0, -6px -6px 16px #FAF6F2;
    padding: 32px;
    margin-bottom: 60px;
    cursor: pointer;
    position: relative;
    opacity: 0;
    transform: scale(0.8) translateY(30px);
    transition: opacity 500ms ease, transform 500ms ease, box-shadow 300ms ease;
}

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

.timeline-node.pressed {
    box-shadow: inset 4px 4px 10px #C0B8B0, inset -4px -4px 10px #FAF6F2;
}

.node-circle {
    border-radius: 50%;
    width: 260px;
    height: 260px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.node-rect {
    border-radius: 24px;
    max-width: 360px;
    text-align: center;
}

/* S-curve layout positioning */
.node-1 { margin-left: 5%; }
.node-2 { margin-left: 50%; }
.node-3 { margin-left: 10%; }
.node-4 { margin-left: 45%; }
.node-5 { margin-left: 5%; }
.node-6 { margin-left: 50%; }
.node-7 { margin-left: 25%; }

/* Node inner content */
.node-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.node-year {
    font-family: 'Caveat', cursive;
    font-weight: 700;
    font-size: 28px;
    color: #D4A060;
}

.node-label {
    font-family: 'Noto Serif JP', serif;
    font-weight: 700;
    font-size: 18px;
    color: #3A3430;
    margin-bottom: 8px;
}

.node-desc {
    font-size: 13px;
    line-height: 1.7;
    color: #5A4A40;
    opacity: 0;
    transition: opacity 300ms ease 200ms;
    max-width: 200px;
}

.timeline-node.revealed .node-desc {
    opacity: 1;
}

/* Node ripple effect (on click) */
.node-ripple {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 0;
    height: 0;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 64, 144, 0.4) 0%, rgba(255, 64, 144, 0) 70%);
    pointer-events: none;
    opacity: 0;
}

.node-ripple.active {
    animation: nodeRipple 300ms ease-out forwards;
}

@keyframes nodeRipple {
    0% {
        width: 0;
        height: 0;
        opacity: 0.6;
    }
    100% {
        width: 300px;
        height: 300px;
        opacity: 0;
    }
}

/* Timeline annotations */
.timeline-annotation {
    position: relative;
    display: block;
    margin-bottom: 30px;
    font-size: 13px;
}

.anno-1 { margin-left: 22%; transform: rotate(-2deg); }
.anno-2 { margin-left: 55%; transform: rotate(1.5deg); }
.anno-4 { margin-left: 50%; transform: rotate(-1deg); }
.anno-6 { margin-left: 55%; transform: rotate(2deg); }
.anno-7 { margin-left: 30%; transform: rotate(-1.5deg); }

/* ============================================
   SECTION 3: GHOST GALLERY
   ============================================ */
.ghost-gallery-section {
    padding: 100px 5vw;
    background: #E4DCD4;
    text-align: center;
}

.gallery-subtitle {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 16px;
    color: #5A4A40;
    margin-bottom: 60px;
    opacity: 0.8;
}

.gallery-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 50px;
    max-width: 1100px;
    margin: 0 auto;
}

.gallery-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 600ms ease, transform 600ms ease;
}

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

.gallery-relief {
    width: 160px;
    height: 200px;
    background: #E4DCD4;
    border-radius: 24px;
    box-shadow: 6px 6px 16px #C0B8B0, -6px -6px 16px #FAF6F2;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    transition: box-shadow 400ms ease;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.gallery-relief::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 24px;
    box-shadow: 0 0 8px rgba(255, 64, 144, 0.0);
    transition: box-shadow 400ms ease;
    pointer-events: none;
}

.gallery-item.glowing .gallery-relief::after {
    box-shadow: 0 0 12px rgba(255, 64, 144, 0.3);
}

.object-svg {
    width: 100%;
    height: 100%;
}

.object-shape {
    fill: none;
    stroke: #5A4A40;
    stroke-width: 2;
}

.object-screen {
    fill: rgba(192, 184, 176, 0.3);
    stroke: #5A4A40;
    stroke-width: 1.5;
}

.object-inner-screen {
    fill: rgba(192, 184, 176, 0.5);
    stroke: none;
}

.object-button {
    fill: none;
    stroke: #5A4A40;
    stroke-width: 1.5;
}

.object-button-rect {
    fill: none;
    stroke: #5A4A40;
    stroke-width: 1.5;
}

.object-hinge {
    stroke: #5A4A40;
    stroke-width: 2;
}

.object-dpad {
    fill: none;
    stroke: #5A4A40;
    stroke-width: 1.5;
}

.object-detail {
    fill: rgba(90, 74, 64, 0.3);
    stroke: none;
}

.object-face {
    fill: none;
    stroke: #5A4A40;
    stroke-width: 1.5;
}

.object-deco {
    stroke: #D4A060;
}

.object-star {
    fill: #D4A060;
    opacity: 0.5;
}

.object-text {
    fill: #5A4A40;
    font-family: 'Noto Sans JP', sans-serif;
    opacity: 0.6;
}

.object-pixel {
    fill: #5A4A40;
    opacity: 0.5;
}

.object-pixel-line {
    stroke: #5A4A40;
    stroke-width: 1.5;
    opacity: 0.5;
}

.object-ring {
    fill: none;
    stroke: #5A4A40;
    stroke-width: 1.5;
}

.object-disc {
    fill: none;
    stroke: #5A4A40;
    stroke-width: 1.5;
}

.object-disc-inner {
    fill: #C0B8B0;
    stroke: #5A4A40;
    stroke-width: 1;
}

.object-slider {
    fill: rgba(192, 184, 176, 0.4);
    stroke: #5A4A40;
    stroke-width: 1;
}

.gallery-label {
    font-family: 'Caveat', cursive;
    font-weight: 700;
    font-size: 22px;
    color: #3A3430;
}

.gallery-annotation {
    position: relative;
    display: block;
    font-size: 12px;
    transform: rotate(-2deg);
    max-width: 160px;
    text-align: center;
}

/* ============================================
   SECTION 4: DARK REFLECTION
   ============================================ */
.reflection-section {
    background-color: #3A3430;
    padding: 100px 5vw;
    position: relative;
}

.reflection-content {
    max-width: 720px;
    margin: 0 auto;
    position: relative;
}

.reflection-heading {
    font-family: 'Caveat', cursive;
    font-weight: 700;
    font-size: clamp(28px, 4vw, 52px);
    color: #FAF6F2;
    margin-bottom: 48px;
    text-align: center;
}

.reflection-text p {
    color: #E4DCD4;
    margin-bottom: 28px;
    font-size: clamp(15px, 1.1vw, 18px);
    line-height: 2;
}

.neon-highlight {
    color: #FF4090;
    font-weight: 500;
    text-shadow: 0 0 8px rgba(255, 64, 144, 0.3);
}

.reflection-text em {
    font-style: italic;
    color: #D4A060;
}

.reflection-annotation {
    position: relative;
    display: block;
    text-align: right;
    margin-top: 40px;
    color: #C0B8B0;
    font-size: 15px;
    transform: rotate(1deg);
    opacity: 0.6;
}

/* ============================================
   SECTION 5: FOOTER
   ============================================ */
.footer-section {
    background: #E4DCD4;
    padding: 80px 5vw 60px;
}

.footer-surface {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.footer-connector-svg {
    width: 100%;
    height: 120px;
    display: block;
    margin-bottom: 20px;
}

.footer-connector {
    stroke: #D4A060;
    stroke-width: 2;
    stroke-dasharray: 6 4;
    animation: flowDots 3s linear infinite;
}

.footer-nodes {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-bottom: 40px;
}

.footer-node {
    width: 100px;
    height: 100px;
    background: #E4DCD4;
    box-shadow: 6px 6px 16px #C0B8B0, -6px -6px 16px #FAF6F2;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: box-shadow 300ms ease;
}

.footer-node:hover {
    box-shadow: inset 4px 4px 10px #C0B8B0, inset -4px -4px 10px #FAF6F2;
}

.footer-node-label {
    font-family: 'Noto Serif JP', serif;
    font-weight: 700;
    font-size: 14px;
    color: #3A3430;
}

.footer-text {
    font-family: 'Noto Sans JP', sans-serif;
    color: #5A4A40;
    font-size: 14px;
    margin-bottom: 20px;
    opacity: 0.7;
}

.footer-annotation {
    position: relative;
    display: block;
    font-size: 18px;
    color: #5A4A40;
    transform: rotate(-1deg);
    opacity: 0.5;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
    .hero-surface {
        padding-left: 8vw;
        justify-content: center;
    }

    .ripple-container {
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .hero-annotation {
        left: 8vw;
    }

    .logotype {
        top: 20px;
        right: 20px;
    }

    .logotype-svg {
        width: 160px;
        height: 40px;
    }

    .logotype-text {
        font-size: 28px;
    }

    .node-circle {
        width: 200px;
        height: 200px;
        padding: 20px;
    }

    .node-rect {
        max-width: 280px;
        padding: 24px;
    }

    .node-1, .node-3, .node-5 { margin-left: 2%; }
    .node-2, .node-4, .node-6 { margin-left: 30%; }
    .node-7 { margin-left: 15%; }

    .gallery-grid {
        gap: 30px;
    }

    .gallery-relief {
        width: 130px;
        height: 170px;
    }

    .footer-nodes {
        gap: 16px;
    }

    .footer-node {
        width: 80px;
        height: 80px;
    }

    .footer-node-label {
        font-size: 12px;
    }
}

@media (max-width: 480px) {
    .hero-surface::before {
        width: 300px;
        height: 300px;
    }

    .node-circle {
        width: 180px;
        height: 180px;
    }

    .node-desc {
        max-width: 140px;
        font-size: 11px;
    }

    .gallery-relief {
        width: 110px;
        height: 150px;
    }

    .reflection-content {
        padding: 0 4vw;
    }
}