@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200;300;400;500;700&family=Space+Mono:wght@400;700&family=Shippori+Mincho:wght@400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Just+Me+Again+Down+Here&display=swap" rel="stylesheet');
:root {
    /* Zen Base */
    --sumi: #1a1a1a;
    --sumi-deep: #0d0d0d;
    --washi: #F5F1E8;
    --washi-warm: #EDE4D3;
    --kinari: #F0E6D3;
    
    /* Chaos Accents - Complementary */
    --aka: #C84B31;
    --ai: #3156C8;
    --matcha: #5CB85C;
    --murasaki: #8B5CB8;
    
    /* Technical */
    --grid-line: rgba(200, 75, 49, 0.15);
    --blueprint: rgba(49, 86, 200, 0.1);
}

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Shippori Mincho', serif;
    background: var(--washi);
    color: var(--sumi);
    overflow-x: hidden;
    cursor: none;
    line-height: 1.8;
}

/* Kill hand / pointer cursor everywhere — custom cursor handles all states */
*, *::before, *::after {
    cursor: none !important;
}

/* ==================== */
/* CUSTOM CURSOR - Crosshair */
/* ==================== */
#cursor {
    position: fixed;
    width: 20px;
    height: 20px;
    pointer-events: none;
    z-index: 10000;
    mix-blend-mode: difference;
}

#cursor::before,
#cursor::after {
    content: '';
    position: absolute;
    background: var(--washi);
}

#cursor::before {
    width: 1px;
    height: 100%;
    left: 50%;
    transform: translateX(-50%);
}

#cursor::after {
    width: 100%;
    height: 1px;
    top: 50%;
    transform: translateY(-50%);
}

#cursor-dot {
    position: fixed;
    width: 6px;
    height: 6px;
    background: var(--aka);
    border-radius: 50%;
    pointer-events: none;
    z-index: 10001;
    transition: transform 0.1s ease;
}

#cursor-dot.active {
    transform: scale(1.3);
    background: var(--murasaki);
}

/* ==================== */
/* GLOBAL GRID OVERLAY */
/* ==================== */
.grid-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
    background-image: 
        linear-gradient(var(--grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
    background-size: 100px 100px;
    opacity: 0.5;
}

/* ==================== */
/* FLOATING MATH ELEMENTS */
/* ==================== */
.math-layer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 3;
    overflow: hidden;
}

.math-element {
    position: absolute;
    font-family: 'Space Mono', monospace;
    font-size: 0.75rem;
    color: var(--sumi);
    opacity: 0;
    animation: floatMath 20s linear infinite;
}

.math-element.formula {
    font-size: 1rem;
    color: var(--aka);
    opacity: 0.3;
}

@keyframes floatMath {
    0% {
        opacity: 0;
        transform: translateY(100vh) rotate(0deg);
    }
    10% {
        opacity: 0.15;
    }
    90% {
        opacity: 0.15;
    }
    100% {
        opacity: 0;
        transform: translateY(-100px) rotate(360deg);
    }
}

/* ==================== */
/* MECHANICAL GEARS CANVAS */
/* ==================== */
#gears-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    opacity: 0.08;
}

/* ==================== */
/* PAPER TEXTURE */
/* ==================== */
.texture-layer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 4;
    opacity: 0.25;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 500 500' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
}

/* ==================== */
/* NAVIGATION */
/* ==================== */
nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 25px 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 1000;
    background: linear-gradient(to bottom, var(--washi), transparent);
}

.logo {
    font-family: 'Shippori Mincho', serif;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    position: relative;
}

.logo .kanji {
    font-size: 0.95rem;
    opacity: 0.55;
    margin-left: 12px;
    font-weight: 400;
}

/* Clip alter-ego mark — anchored to the hero section (top-left, under the name),
   so it stays in place and scrolls away instead of following the fixed nav */
.clip-hero-mark {
    position: absolute;
    top: 24px;
    left: 218px;
    width: 150px;
    height: 150px;
    background: url('../images/clip-logo.png') no-repeat center / contain;
    opacity: 0.13;
    z-index: 0;
    pointer-events: none;
}

.logo::after {
    content: 'v2.4.1';
    position: absolute;
    top: -8px;
    right: -40px;
    font-family: 'Space Mono', monospace;
    font-size: 0.5rem;
    color: var(--aka);
    opacity: 0.7;
}
/* Logo zigzag letters */
.logo {
    cursor: pointer;
}
.logo-l {
    display: inline-block;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.logo-l:nth-child(odd)  { transform: translateY(-1px); }
.logo-l:nth-child(even) { transform: translateY(1px);  }
/* Extra gap between "Daniel" and "Andújar" (the space is the 7th span) */
.logo-l:nth-child(7) { padding-right: 0.35em; }

/* ==================== */
/* MENU SECTION */
/* ==================== */

.nav-links {
    display: flex;
    gap: 40px;
    list-style: none;
}

.nav-links a {
    font-family: 'Space Mono', monospace;
    color: var(--sumi);
    text-decoration: none;
    font-size: 0.75rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    position: relative;
    padding: 5px 0;
    display: inline-block;   
}

.nav-links a::before {
    content: attr(data-index);
    position: absolute;
    left: -20px;
    font-size: 0.6rem;
    opacity: 0.4;
}

.nav-links a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--aka);
    transition: width 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.nav-links a:hover::after {
    width: 100%;
}
.colored-letter {
    color:#C84B31;
    font-weight: bold;
}
/* ==================== */
/* HERO SECTION */
/* ==================== */
.hero {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
}

/* Pendulum Physics Animation */
.pendulum-container {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 250px;
    display: flex;
    justify-content: center;
    z-index: 10002;
    pointer-events: none;
}

.pendulum-string {
    position: relative;
    width: 0.5px;
    height: 205px;
    background: var(--sumi);
    transform-origin: top center;
    animation: swing 3s ease-in-out infinite;
}

.pendulum-bob {
    position: absolute;
    bottom: -16px;
    left: 50%;
    transform: translateX(-50%);
    width: 16px;
    height: 16px;
    background: radial-gradient(circle at 34% 30%,
        #f0c8bc 0%,
        #d96040 18%,
        #c84b31 42%,
        #7a2210 68%,
        #2e0a04 100%);
    border-radius: 50%;
}

@keyframes swing {
    0%, 100% { transform: rotate(33deg); }
    50% { transform: rotate(-33deg); }
}

/* Fibonacci Spiral */
.fibonacci-spiral {
    position: absolute;
    width: 500px;
    height: 500px;
    opacity: 0.06;
    right: -100px;
    bottom: -100px;
}

.fibonacci-spiral svg {
    width: 100%;
    height: 100%;
}

/* Hero Content */
.hero-content {
    text-align: center;
    z-index: 10;
    padding: 0 20px;
    max-width: 900px;
}

.hero-pre {
    font-family: 'Space Mono', monospace;
    font-size: 0.75rem;
    letter-spacing: 0.3em;
    color: var(--ai);
    margin-bottom: 20px;
    opacity: 0;
    animation: fadeIn 1s ease-out 0.3s forwards;
}

.hero-title {
    font-size: clamp(3rem, 10vw, 8rem);
    font-weight: 800;
    letter-spacing: 0.02em;
    line-height: 1;
    margin-bottom: 30px;
    opacity: 0;
    animation: fadeIn 1s ease-out 0.5s forwards;
    position: relative;
}

.hero-title .chaos-letter {
    display: inline-block;
    transition: transform 0.3s ease;
}

/* All letters bounce on hover */
.hero-title .chaos-letter:hover {
    transform: translateY(-10px) rotate(5deg);
}

/* Non-linked letters: -30° blue hatch instead of red */
.hero-title .chaos-letter:not(.chaos-link):hover {
    background-image: repeating-linear-gradient(
        -30deg,
        var(--ai) 0px,
        var(--ai) 3px,
        transparent 3px,
        transparent 7px
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Linked letters: clean anchor, turns red on hover */
.hero-title .chaos-link {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.3s ease, transform 0.3s ease;
}

.hero-title .chaos-link:hover {
    color: var(--aka);
}

.hero-title .strike {
    position: relative;
}

.hero-title .strike::after {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    height: 3px;
    background: var(--aka);
    transform: rotate(-3deg);
}

.hero-subtitle {
    font-family: 'Just Me Again Down Here', monospace;
    font-size: 1.4rem;
    letter-spacing: 0.2em;
    opacity: 0.4;
    
    color: var(--sumi);
}

.hero-equation {
    font-family: 'Space Mono', monospace;
    font-size: 0.8rem;
    margin-top: 40px;
    opacity: 0;
    animation: fadeIn 1s ease-out 1s forwards;
    color: var(--ai);
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Scroll Indicator */
.scroll-indicator {
    position:fixed;
    bottom: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0px;
    color: var(--sumi);
    transition: color 0.4s ease;
    cursor: pointer;
}

.scroll-indicator span {
    font-family: 'Space Mono', monospace;
    font-size: 0.6rem;
    letter-spacing: 0.2em;
    writing-mode: vertical-rl;
}

.scroll-arrow {
    width: 20px;
    height: 20px;
    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    animation: bounceDown 2s ease-in-out infinite;
}

.scroll-indicator.scroll-up .scroll-arrow {
    animation: bounceUp 2s ease-in-out infinite;
}

@keyframes bounceDown {
    0%, 100% { transform: rotate(45deg) translate(0, 0); }
    50% { transform: rotate(45deg) translate(4px, 4px); }
}

@keyframes bounceUp {
    0%, 100% { transform: rotate(225deg) translate(0, 0); }
    50% { transform: rotate(225deg) translate(-4px, -4px); }
}

/* ==================== */
/* CHAOS DIVIDER */
/* ==================== */
.chaos-divider {
    height: 200px;
    position: relative;
    overflow: hidden;
    background: var(--sumi);
}

.chaos-divider canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.chaos-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Space Mono', monospace;
    font-size: clamp(2rem, 8vw, 6rem);
    color: var(--washi);
    letter-spacing: 0.3em;
    white-space: nowrap;
    z-index: 5;
    mix-blend-mode: difference;
}

/* ==================== */
/* PHILOSOPHY SECTION */
/* ==================== */
.philosophy {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 100px 50px;
    position: relative;
    overflow: hidden;
}

.philosophy-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 100px;
    max-width: 1400px;
    margin: 0 auto;
    align-items: center;
}

.philosophy-visual {
    position: relative;
    height: 500px;
}

/* Rotating Gear Cluster */
.gear-cluster {
    position: absolute;
    width: 100%;
    height: 100%;
}

.gear {
    position: absolute;
    border: 2px solid var(--sumi);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gear::before {
    content: '';
    position: absolute;
    width: 30%;
    height: 30%;
    background: var(--washi);
    border: 2px solid var(--sumi);
    border-radius: 50%;
}

.gear-1 {
    width: 200px;
    height: 200px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: rotateGear1 10s linear infinite;
}

.gear-2 {
    width: 120px;
    height: 120px;
    top: 20%;
    left: 20%;
    animation: rotateGear2 6s linear infinite reverse;
    border-color: var(--aka);
}

.gear-2::before {
    border-color: var(--aka);
}

.gear-3 {
    width: 80px;
    height: 80px;
    bottom: 20%;
    right: 25%;
    animation: rotateGear3 4s linear infinite;
    border-color: var(--ai);
}

.gear-3::before {
    border-color: var(--ai);
}

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

@keyframes rotateGear2 {
    to { transform: rotate(-360deg); }
}

@keyframes rotateGear3 {
    to { transform: rotate(360deg); }
}

.philosophy-text h2 {
    font-size: clamp(2rem, 4vw, 3.5rem);
    font-weight: 500;
    margin-bottom: 30px;
    letter-spacing: 0.05em;
    line-height: 1.3;
}

.philosophy-text h2 .highlight {
    color: var(--aka);
    position: relative;
}

.philosophy-text h2 .jp {
    display: block;
    font-family: 'Kalam', cursive;
    font-size: 0.92rem;
    font-weight: 400;
    line-height: 1.25;
    opacity: 0.45;
    letter-spacing: 0;
    margin-top: 18px;
    margin-left: 3em;
    max-width: 26ch;
}

/* Handwritten quote attribution — sits on its own line under the quote */
.jp .qa,
.subtitle .qa {
    display: block;
    font-size: 0.88em;
    font-weight: 400;
    opacity: 0.8;
    margin-top: 2px;
}

.philosophy-text p {
    font-size: 1.1rem;
    line-height: 2.2;
    opacity: 0.8;
    margin-bottom: 25px;
}

.philosophy-formula {
    font-family: 'Space Mono', monospace;
    font-size: 0.85rem;
    color: var(--ai);
    margin-top: 40px;
    padding: 20px;
    background: rgba(49, 86, 200, 0.05);
    border-left: 3px solid var(--ai);
}

/* ==================== */
/* WORK SECTION */
/* ==================== */
.work {
    padding: 150px 50px;
    background: var(--sumi);
    color: var(--washi);
    position: relative;
    overflow: hidden;
}

.work::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        linear-gradient(rgba(245, 241, 232, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(245, 241, 232, 0.03) 1px, transparent 1px);
    background-size: 50px 50px;
}

.section-header {
    text-align: center;
    margin-bottom: 100px;
    position: relative;
}

.section-header h2 {
    font-size: clamp(2.5rem, 6vw, 4rem);
    font-weight: 600;
    letter-spacing: 0.1em;
    margin-bottom: 15px;
}

.section-header .index {
    font-family: 'Space Mono', monospace;
    font-size: 0.7rem;
    letter-spacing: 0.3em;
    opacity: 0.4;
}

/* Exploded View Grid */
.work-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: minmax(180px, auto);
    gap: 20px;
    max-width: 1600px;
    margin: 0 auto;
    position: relative;
}

.work-item {
    position: relative;
    overflow: hidden;
    background: var(--sumi-deep);
    cursor: pointer;
    --tilt-unit: 1deg;   /* global tilt magnitude; mobile dials this down */
    --active-tilt: 0deg; /* Zen by default; Chaos toggle swaps in --tilt */
    transform: rotate(var(--active-tilt));
    transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.work-item::before {
    content: '';
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    border: 1px solid rgba(245, 241, 232, 0.1);
    pointer-events: none;
    z-index: 5;
}

.work-item:hover {
    transform: rotate(var(--active-tilt)) scale(1.02);
    z-index: 10;
}

/* Asymmetric Grid Layout */
.work-item:nth-child(1) { grid-column: 1 / 7; grid-row: 1 / 3; }
.work-item:nth-child(2) { grid-column: 7 / 10; grid-row: 1 / 2; }
.work-item:nth-child(3) { grid-column: 10 / 13; grid-row: 1 / 3; }
.work-item:nth-child(4) { grid-column: 7 / 10; grid-row: 2 / 4; }
.work-item:nth-child(5) { grid-column: 1 / 4; grid-row: 3 / 4; }
.work-item:nth-child(6) { grid-column: 4 / 7; grid-row: 3 / 4; }
.work-item:nth-child(7) { grid-column: 10 / 13; grid-row: 3 / 4; }
.work-item:nth-child(8)  { grid-column: 1 / 4;  grid-row: 4 / 6; }
.work-item:nth-child(9)  { grid-column: 4 / 13; grid-row: 4 / 5; }
.work-item:nth-child(10) { grid-column: 4 / 8;  grid-row: 5 / 6; }
.work-item:nth-child(11) { grid-column: 8 / 13; grid-row: 5 / 6; }
.work-item:nth-child(12) { grid-column: 1 / 5;  grid-row: 6 / 7; }
.work-item:nth-child(13) { grid-column: 5 / 9;  grid-row: 6 / 7; }
.work-item:nth-child(14) { grid-column: 9 / 13; grid-row: 6 / 7; }

/* Slight random tilt for a more chaotic feel (unitless; multiplied by --tilt-unit) */
.work-item:nth-child(1)  { --tilt: -1.5;  }
.work-item:nth-child(2)  { --tilt:  1;    }
.work-item:nth-child(3)  { --tilt: -1;    }
.work-item:nth-child(4)  { --tilt:  2;    }
.work-item:nth-child(5)  { --tilt: -2;    }
.work-item:nth-child(6)  { --tilt:  1.5;  }
.work-item:nth-child(7)  { --tilt: -0.75; }
.work-item:nth-child(8)  { --tilt:  1.25; }
.work-item:nth-child(9)  { --tilt: -1.75; }
.work-item:nth-child(10) { --tilt:  0.75; }
.work-item:nth-child(11) { --tilt:  2;    }
.work-item:nth-child(12) { --tilt: -1.25; }
.work-item:nth-child(13) { --tilt:  1.75; }
.work-item:nth-child(14) { --tilt: -1;    }

/* Chaos mode: feed each card's --tilt into the active rotation.
   Zen mode (default) keeps --active-tilt at 0deg, so cards sit square. */
.work-grid.chaos .work-item { --active-tilt: calc(var(--tilt, 0) * var(--tilt-unit)); }

/* Preserve the rotation through the scroll-reveal animation and on hover.
   These beat .reveal.active (0,2,0), which would otherwise reset transform. */
.work-item.reveal              { transform: rotate(var(--active-tilt)) translateY(60px); }
.work-item.reveal.active       { transform: rotate(var(--active-tilt)); }
.work-item.reveal.active:hover { transform: rotate(var(--active-tilt)) scale(1.02); }

/* ── Zen / Chaos layout toggle ──────────────────────────────────────────── */
.zen-chaos-toggle {
    position: relative;
    display: inline-flex;
    align-items: stretch;
    margin-top: 32px;
    padding: 4px;
    border: 1px solid rgba(245, 241, 232, 0.22);
    border-radius: 100px;
    background: rgba(245, 241, 232, 0.03);
    font-family: 'Space Mono', monospace;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.zct-option {
    position: relative;
    z-index: 1;
    min-width: 104px;
    padding: 10px 22px;
    text-align: center;
    font-size: 0.7rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: rgba(245, 241, 232, 0.45);
    transition: color 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    user-select: none;
}

.zct-thumb {
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 4px;
    width: calc(50% - 4px);
    border-radius: 100px;
    background: var(--washi);
    transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1),
                background-color 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

/* Zen active (default): cream thumb sits left, Zen label inked dark */
.zen-chaos-toggle .zct-zen { color: var(--sumi); }

/* Chaos active: thumb slides right and turns vermilion */
.zen-chaos-toggle[aria-checked="true"] .zct-thumb {
    transform: translateX(100%);
    background: var(--aka);
}
.zen-chaos-toggle[aria-checked="true"] .zct-zen   { color: rgba(245, 241, 232, 0.45); }
.zen-chaos-toggle[aria-checked="true"] .zct-chaos { color: var(--washi); }

.zen-chaos-toggle:focus-visible {
    outline: 2px solid var(--aka);
    outline-offset: 4px;
}

.work-item img,
.work-item video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s cubic-bezier(0.23, 1, 0.32, 1), filter 0.5s ease;
    filter: grayscale(20%) contrast(1.1);
}

.work-item:hover img,
.work-item:hover video {
    transform: scale(1.1);
    filter: grayscale(0%) contrast(1);
}

.work-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 25px;
    background: linear-gradient(to top, rgba(13,13,13,0.95) 0%, transparent 100%);
    transform: translateY(70%);
    transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.work-item:hover .work-overlay {
    transform: translateY(0);
}

.work-number {
    font-family: 'Space Mono', monospace;
    font-size: 0.65rem;
    color: var(--aka);
    letter-spacing: 0.2em;
    margin-bottom: 8px;
}

.work-overlay h3 {
    font-size: 1.3rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    margin-bottom: 5px;
}

.work-overlay span {
    font-family: 'Space Mono', monospace;
    font-size: 0.7rem;
    letter-spacing: 0.15em;
    opacity: 0.6;
    text-transform: uppercase;
}

/* Floating Dimension Annotations */
.work-dimension {
    position: absolute;
    font-family: 'Space Mono', monospace;
    font-size: 0.55rem;
    color: var(--aka);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.work-item:hover .work-dimension {
    opacity: 0.8;
}

/* ==================== */
/* PROJECT PANEL OVERLAY */
/* ==================== */

/* Temporary card flipper — 3D flip animation */
.card-flipper {
    position: fixed;
    z-index: 1002;
    perspective: 1100px;
    pointer-events: none;
}

.card-flipper-inner {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    transition: transform 0.86s cubic-bezier(0.37, 0, 0.63, 1);
}

.card-flipper-inner.flipped {
    transform: rotateY(180deg);
}

.card-face {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-face-front {
    background: var(--sumi-deep);
    border: 1px solid rgba(245, 241, 232, 0.06);
}

.card-face-back {
    background: var(--kinari);
    transform: rotateY(180deg);
}

/* Floating project panel — position:fixed, light washi aesthetic */
.project-panel {
    position: absolute;
    z-index: 1000;
    background: var(--kinari);
    overflow: hidden;
    box-shadow:
        0 30px 90px rgba(0, 0, 0, 0.38),
        0 0 0 1px rgba(26, 26, 26, 0.09);
}

.project-panel::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: 0.11;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 500 500' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    background-size: 220px 220px;
    mix-blend-mode: multiply;
}

.project-panel.panel-closing {
    opacity: 0 !important;
    transition: opacity 0.22s ease !important;
    pointer-events: none;
}

/* Close button — thick red cross, no box */
.panel-close {
    position: absolute;
    top: 22px;
    right: 26px;
    width: 30px;
    height: 30px;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 10;
    padding: 0;
    transition: transform 0.25s ease, opacity 0.2s ease;
}

.panel-close::before,
.panel-close::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 22px;
    height: 2.5px;
    background: var(--aka);
    border-radius: 1px;
}

.panel-close::before { transform: translate(-50%, -50%) rotate(45deg); }
.panel-close::after  { transform: translate(-50%, -50%) rotate(-45deg); }

.panel-close:hover {
    transform: rotate(90deg) scale(1.18);
    opacity: 0.75;
}

/* Inner layout — flex column so body fills remaining height */
.panel-inner {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 48px 56px 95px;
    color: var(--sumi);
    position: relative;
    z-index: 1;
}

.panel-header {
    flex-shrink: 0;
    border-bottom: 1px solid rgba(26, 26, 26, 0.12);
    padding-bottom: 22px;
    margin-bottom: 26px;
    padding-right: 52px;
}

.panel-number {
    display: block;
    font-family: 'Space Mono', monospace;
    font-size: 0.62rem;
    color: var(--aka);
    letter-spacing: 0.35em;
    margin-bottom: 12px;
}

.panel-title {
    font-size: clamp(1.7rem, 3vw, 2.7rem);
    font-weight: 500;
    letter-spacing: 0.05em;
    margin-bottom: 16px;
    line-height: 1.1;
    color: var(--sumi);
}

.panel-categories {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* Category tags — same style as .tech-tag */
.panel-category {
    font-family: 'Space Mono', monospace;
    font-size: 0.6rem;
    letter-spacing: 0.1em;
    padding: 5px 12px;
    background: rgba(26, 26, 26, 0.07);
    color: var(--sumi);
}

/* Three-column body: image | text | vertical thumbs */
.panel-body {
    display: flex;
    flex-direction: row;
    gap: 36px;
    align-items: stretch;
    flex: 1;
    min-height: 0;
}

/* Image + arrow wrapper (middle column) */
.panel-image-col {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.panel-main-image {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    background: repeating-linear-gradient(
        -30deg,
        rgba(49, 86, 200, 0.55) 0px,
        rgba(49, 86, 200, 0.55) 3px,
        transparent 3px,
        transparent 11px
    );
}

.panel-main-image img,
.panel-main-image video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    filter: grayscale(5%) contrast(1.05);
    transition: filter 0.4s;
}

.panel-main-image:hover img,
.panel-main-image:hover video {
    filter: none;
}

/* Vertical gallery strip (left column) */
.panel-gallery-wrap {
    display: flex;
    flex-direction: column;
    width: 148px;
    flex-shrink: 0;
    overflow: visible;
    position: relative;
    user-select: none;
}

.panel-scroll-label {
    position: absolute;
    left: -26px;
    top: 50%;
    transform: translateY(0) translate(-50%, -50%) rotate(-85deg);
    font-family: 'Caveat', cursive;
    font-size: 1.3rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    color: var(--aka);
    white-space: nowrap;
    pointer-events: none;
    z-index: 2;
    animation: scrollFloat 8s ease-in-out infinite;
}

@keyframes scrollFloat {
    0%,  100% { transform: translateY(0px)   translate(-50%, -50%) rotate(-85deg); }
    30%        { transform: translateY(-10px) translate(-50%, -50%) rotate(-83deg); }
    65%        { transform: translateY(7px)   translate(-50%, -50%) rotate(-87deg); }
}

.gallery-arrow {
    flex-shrink: 0;
    width: 100%;
    height: 28px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s, transform 0.2s;
    position: relative;
    z-index: 2;
}

.gallery-arrow::before {
    content: '';
    display: block;
    width: 9px;
    height: 9px;
    border-top: 2.5px solid var(--aka);
    border-right: 2.5px solid var(--aka);
}

.gallery-arrow-top::before {
    transform: rotate(-45deg);
    margin-bottom: 3px;
}

.gallery-arrow-bottom::before {
    transform: rotate(135deg);
    margin-top: 3px;
}

.gallery-arrow:hover {
    opacity: 0.6;
    transform: scale(1.18);
}

.panel-gallery-track-outer {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.panel-gallery-track-outer::-webkit-scrollbar {
    display: none;
}

.panel-gallery-track {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 3px 0;
}

.gallery-item {
    flex-shrink: 0;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: rgba(26, 26, 26, 0.06);
    border: 1.5px solid transparent;
    cursor: pointer;
    opacity: 0.38;
    transition: opacity 0.3s ease, border-color 0.3s ease;
}

.gallery-item:hover {
    opacity: 0.68;
}

.gallery-item.gallery-item-active {
    opacity: 1;
    border-color: var(--aka);
}

.gallery-item img,
.gallery-item video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
}

.gallery-item-placeholder {
    cursor: default;
    border: 1.5px dashed rgba(26, 26, 26, 0.16) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    opacity: 0.5 !important;
}

.panel-gallery-placeholder {
    font-family: 'Space Mono', monospace;
    font-size: 0.45rem;
    letter-spacing: 0.18em;
    color: rgba(26, 26, 26, 0.28);
    text-align: center;
    line-height: 1.9;
}

.panel-content {
    width: 340px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    min-height: 0;
    scrollbar-width: thin;
    scrollbar-color: rgba(26, 26, 26, 0.15) transparent;
}

.panel-content-heading {
    display: block;
    font-family: 'Caveat', cursive;
    font-size: 1.75rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    color: var(--sumi);
    margin-bottom: 14px;
    padding-left: 10px;
}

.panel-description {
    font-size: 0.92rem;
    line-height: 1.85;
    color: rgba(26, 26, 26, 0.78);
    margin-bottom: 38px;
    letter-spacing: 0.02em;
}

.panel-meta {
    border-top: 1px solid rgba(26, 26, 26, 0.12);
    margin-top: auto;
}

.meta-row {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 16px;
    padding: 13px 0;
    border-bottom: 1px solid rgba(26, 26, 26, 0.07);
    align-items: baseline;
}

.meta-label {
    font-family: 'Space Mono', monospace;
    font-size: 0.52rem;
    letter-spacing: 0.28em;
    color: var(--aka);
    text-transform: uppercase;
}

.meta-value {
    font-size: 0.82rem;
    letter-spacing: 0.04em;
    color: rgba(26, 26, 26, 0.72);
    line-height: 1.55;
}

/* Responsive panel */
@media (max-width: 1024px) {
    .panel-body {
        flex-direction: column;
        overflow-y: auto;
    }
    .panel-image-col {
        min-height: 220px;
        flex-shrink: 0;
    }
    .panel-content {
        width: 100%;
    }
    .panel-meta {
        margin-top: 24px;
    }
    .panel-gallery-wrap {
        flex-direction: row;
        width: 100%;
        height: 110px;
        overflow: hidden;
    }
    .panel-scroll-label {
        display: none;
    }
    .panel-gallery-track-outer {
        overflow-y: hidden;
        overflow-x: auto;
    }
    .panel-gallery-track {
        flex-direction: row;
    }
    .gallery-arrow-top::before {
        transform: rotate(-135deg);
        margin-bottom: 0;
        margin-left: 3px;
    }
    .gallery-arrow-bottom::before {
        transform: rotate(45deg);
        margin-top: 0;
        margin-right: 3px;
    }
    .panel-inner {
        padding: 40px 38px 50px;
    }
}

@media (max-width: 768px) {
    .panel-inner {
        padding: 28px 20px 30px;
    }
}

/* ==================== */
/* TECHNICAL SECTION */
/* ==================== */
.technical {
    padding: 150px 50px;
    background: var(--washi);
    position: relative;
}

.technical-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
}

.tech-card {
    background: var(--kinari);
    padding: 50px 40px;
    position: relative;
    border: 1px solid rgba(26, 26, 26, 0.1);
    transition: all 0.4s ease;
    overflow: hidden;
}

.tech-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, var(--aka), var(--ai));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
}

.tech-card:hover::before {
    transform: scaleX(1);
}

.tech-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 30px 60px rgba(0,0,0,0.1);
}

.tech-icon {
    width: 60px;
    height: 60px;
    margin-bottom: 25px;
    position: relative;
}

.tech-icon svg {
    width: 100%;
    height: 100%;
    stroke: var(--sumi);
    stroke-width: 1;
    fill: none;
}

.tech-number {
    position: absolute;
    top: 20px;
    right: 20px;
    font-family: 'Space Mono', monospace;
    font-size: 3rem;
    font-weight: 700;
    opacity: 0.05;
    line-height: 1;
}

.tech-card h3 {
    font-size: 1.4rem;
    margin-bottom: 15px;
    letter-spacing: 0.05em;
}

.tech-card h3 .jp {
    display: block;
    font-family: 'Kalam', cursive;
    font-size: 0.84rem;
    font-weight: 400;
    line-height: 1.3;
    opacity: 0.48;
    margin-top: 10px;
    margin-left: 1em;
    letter-spacing: 0;
    max-width: 24ch;
}

.tech-card p {
    font-size: 0.95rem;
    line-height: 1.9;
    opacity: 0.7;
}

.tech-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 25px;
}

.tech-tag {
    font-family: 'Space Mono', monospace;
    font-size: 0.6rem;
    padding: 5px 12px;
    background: rgba(26, 26, 26, 0.05);
    letter-spacing: 0.1em;
}

/* ==================== */
/* PHYSICS SIMULATION DIVIDER */
/* ==================== */
.physics-divider {
    height: 400px;
    background: linear-gradient(135deg, var(--sumi) 0%, #2a2a2a 100%);
    position: relative;
    overflow: hidden;
}

#physics-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.physics-label {
    position: absolute;
    bottom: 30px;
    left: 50px;
    font-family: 'Space Mono', monospace;
    font-size: 0.7rem;
    color: var(--washi);
    opacity: 0.5;
    letter-spacing: 0.2em;
}

/* ==================== */
/* ABOUT SECTION */
/* ==================== */
.about {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.about-image {
    position: relative;
    overflow: hidden;
}

.about-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(30%);
}

/* Blueprint Overlay on Image */
.about-image::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        linear-gradient(135deg, rgba(49, 86, 200, 0.2) 0%, transparent 50%),
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 50px,
            rgba(49, 86, 200, 0.05) 50px,
            rgba(49, 86, 200, 0.05) 51px
        ),
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 50px,
            rgba(49, 86, 200, 0.05) 50px,
            rgba(49, 86, 200, 0.05) 51px
        );
}

.about-content {
    padding: 100px 80px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: var(--kinari);
    position: relative;
}

.about-content::before {
    content: 'YO';
    position: absolute;
    top: 50%;
    right: 50px;
    transform: translateY(-50%);
    font-size: 20rem;
    opacity: 0.03;
    font-weight: 200;
    line-height: 1;
}

.about-content h2 {
    font-size: clamp(2rem, 4vw, 3rem);
    margin-bottom: 40px;
    letter-spacing: 0.05em;
}

.about-content p {
    font-size: 1.1rem;
    line-height: 2.2;
    margin-bottom: 25px;
    opacity: 0.8;
}

.about-data {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 50px;
    padding-top: 50px;
    border-top: 1px solid rgba(26,26,26,0.1);
}

.data-point {
    text-align: center;
}

.data-value {
    font-family: 'Space Mono', monospace;
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--aka);
    line-height: 1;
}

.data-label {
    font-family: 'Space Mono', monospace;
    font-size: 0.65rem;
    letter-spacing: 0.15em;
    opacity: 0.5;
    margin-top: 10px;
    text-transform: uppercase;
}

/* ==================== */
/* CONTACT SECTION */
/* ==================== */
.contact {
    min-height: 80vh;
    padding: 80px 50px;
    background: var(--sumi);
    color: var(--washi);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    overflow: hidden;
}

/* Orbiting Particles */
.orbit-container {
    position: absolute;
    width: 600px;
    height: 600px;
    opacity: 0.1;
}

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

.orbit-1 { width: 200px; height: 200px; animation: orbitSpin 8s linear infinite; }
.orbit-2 { width: 350px; height: 350px; animation: orbitSpin 12s linear infinite reverse; }
.orbit-3 { width: 500px; height: 500px; animation: orbitSpin 16s linear infinite; }

.orbit-particle {
    position: absolute;
    width: 8px;
    height: 8px;
    background: var(--aka);
    border-radius: 50%;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

.orbit-2 .orbit-particle { background: var(--ai); }
.orbit-3 .orbit-particle { background: var(--ai); }

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

.contact h2 {
    font-size: clamp(2.5rem, 6vw, 5rem);
    font-weight: 500;
    letter-spacing: 0.05em;
    margin-bottom: 20px;
    z-index: 5;
}

.contact p {
    font-size: 1.1rem;
    opacity: 0.6;
    max-width: 500px;
    margin-bottom: 50px;
    line-height: 2;
    z-index: 5;
}

.contact-email {
    font-family: 'Space Mono', monospace;
    font-size: clamp(1rem, 2.5vw, 1.5rem);
    color: var(--washi);
    text-decoration: none;
    position: relative;
    padding: 15px 0;
    letter-spacing: 0.1em;
    z-index: 5;
}

.contact-email::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--aka);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.contact-email:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}

.contact-coordinates {
    font-family: 'Space Mono', monospace;
    font-size: 0.7rem;
    opacity: 0.3;
    margin-top: 60px;
    letter-spacing: 0.15em;
    z-index: 5;
}

/* ==================== */
/* ITALIAN DESIGN SECTION */
/* ==================== */
.italian-design {
    padding: 40px 50px;
    background: linear-gradient(135deg, var(--kinari) 0%, var(--washi-warm) 100%);
    position: relative;
    overflow: visible;
}

.italian-design::before {
    content: 'ITALIA';
    position: absolute;
    top: 50%;
    left: -5%;
    transform: translateY(-50%) rotate(-90deg);
    font-family: 'Space Mono', monospace;
    font-size: 15rem;
    font-weight: 700;
    opacity: 0.03;
    letter-spacing: 0.3em;
    white-space: nowrap;
}

.italian-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    max-width: 1400px;
    margin: 0 auto;
    align-items: center;
}

.italian-content h2 {
    font-size: clamp(2rem, 4vw, 3.5rem);
    font-weight: 500;
    margin-bottom: 30px;
    letter-spacing: 0.05em;
    line-height: 1.3;
}

.italian-content h2 .accent {
    color: var(--aka);
    font-style: italic;
}

.italian-content h2 .jp {
    display: block;
    font-size: 0.9rem;
    font-weight: 400;
    opacity: 0.4;
    letter-spacing: 0.3em;
    margin-top: 15px;
    font-style: normal;
}

.italian-content p {
    font-size: 1.1rem;
    line-height: 2.2;
    opacity: 0.8;
    margin-bottom: 25px;
}

.italian-quote {
    font-family: 'Shippori Mincho', serif;
    font-size: 1.3rem;
    font-style: italic;
    color: var(--ai);
    padding: 30px;
    border-left: 3px solid var(--ai);
    background: rgba(49, 86, 200, 0.05);
    margin: 30px 0;
}

.italian-quote cite {
    display: block;
    font-size: 0.8rem;
    font-style: normal;
    opacity: 0.6;
    margin-top: 15px;
    font-family: 'Space Mono', monospace;
}

/* Video Showcase */
.video-showcase {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 40px 80px rgba(0,0,0,0.15);
}

.video-showcase video {
    width: 100%;
    height: auto;
    display: block;
}

.video-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 30px;
    background: linear-gradient(to top, rgba(13,13,13,0.9) 0%, transparent 100%);
    color: var(--washi);
}

.video-title {
    font-family: 'Space Mono', monospace;
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    color: var(--aka);
    margin-bottom: 8px;
}

.video-overlay h3 {
    font-size: 1.5rem;
    font-weight: 500;
    letter-spacing: 0.05em;
}

.video-overlay span {
    font-family: 'Space Mono', monospace;
    font-size: 0.7rem;
    opacity: 0.6;
    letter-spacing: 0.1em;
}

/* Moka Pot Section */
.moka-section {
    margin-top: 100px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}

.moka-card {
    background: var(--washi);
    padding: 40px;
    position: relative;
    border: 1px solid rgba(26, 26, 26, 0.1);
    transition: all 0.4s ease;
}

.moka-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 30px 60px rgba(0,0,0,0.1);
}

.moka-card img {
    width: 100%;
    height: 200px;
    object-fit: contain;
    margin-bottom: 25px;
    filter: grayscale(20%);
    transition: filter 0.3s ease;
}

.moka-card:hover img {
    filter: grayscale(0%);
}

.moka-card h4 {
    font-size: 1.2rem;
    margin-bottom: 10px;
    letter-spacing: 0.05em;
}

.moka-card p {
    font-size: 0.9rem;
    line-height: 1.8;
    opacity: 0.7;
}

.moka-year {
    position: absolute;
    top: 20px;
    right: 20px;
    font-family: 'Space Mono', monospace;
    font-size: 2rem;
    font-weight: 700;
    opacity: 0.08;
}

/* Render Gallery */
.render-gallery {
    margin-top: 80px;
}

.render-item {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

.render-item img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.6s ease;
}

.render-item:hover img {
    transform: scale(1.05);
}

.render-info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 30px;
    background: linear-gradient(to top, rgba(13,13,13,0.9) 0%, transparent 100%);
    color: var(--washi);
    transform: translateY(70%);
    transition: transform 0.4s ease;
}

.render-item:hover .render-info {
    transform: translateY(0);
}

.render-info h4 {
    font-size: 1.3rem;
    margin-bottom: 5px;
}

.render-info span {
    font-family: 'Space Mono', monospace;
    font-size: 0.7rem;
    opacity: 0.6;
}


/* ==================== */
/* INTERACTIVE APOLLO SPACECRAFT */
/* ==================== */
.apollo-navigator {
    position: fixed;
    width: 15%;
    height: auto;
    z-index: 1000;
    cursor: pointer;
    filter: drop-shadow(5px 5px 15px rgba(0,0,0,0.3));
    transform-origin: center center;
}

.apollo-navigator.in-hero {
    bottom: 8%;
    left: 2%;
    animation: apolloFloatHero 6s ease-in-out infinite;
    transition: filter 0.4s ease;
}

.apollo-navigator.in-italian {
    position: absolute;
    bottom: 5%;
    right: 3%;
    animation: apolloFloatItalian 8s ease-in-out infinite;
    transition: filter 0.4s ease;
}

/* Traveling state - VERY SLOW */
.apollo-navigator.traveling {
    animation: none !important;
    cursor: default;
}

.apollo-navigator.hidden {
    opacity: 0.5;
    pointer-events: none;
    visibility:hidden;
}

.apollo-navigator.visible {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
}

@keyframes apolloFloatHero {
    0%, 100% { transform: translateY(0) rotate(5deg); }
    50% { transform: translateY(-15px) rotate(10deg); }
}

@keyframes apolloFloatItalian {
    0%, 100% { transform: translateY(0) rotate(8deg); }
    50% { transform: translateY(15px) rotate(3deg); }
}

/* Rocket Flame — shown only during travel phase (JS-controlled) */
.apollo-flame {
    display: none;
    width: 240px;
    height: auto;
    mix-blend-mode:color-dodge;
    filter: brightness(1);
    pointer-events: none;
    transform-origin: center center;
    animation: flameFlicker 2s ease-in-out infinite;
}

@keyframes flameFlicker {
    0%, 100% { opacity: 1;    }
    25%       { opacity: 0; }
    60%       { opacity: 0.2;  }
}

.apollo-tooltip {
    position: fixed;
    background: rgba(26, 26, 26, 0.95);
    color: var(--washi);
    padding: 12px 20px;
    font-family: 'Space Mono', monospace;
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
    z-index: 1001;
    border-left: 3px solid var(--aka);
}

.apollo-tooltip.visible {
    opacity: 1;
}

/* ==================== */
/* ITALIAN DESIGN SECTION */
/* ==================== */
.italian-design {
    min-height: 140vh;
    padding: 120px 50px 200px;
    background: linear-gradient(180deg, 
        #E8E4DC 0%,
        #F5F1E8 40%,
        #FAF8F5 100%
    );
    position: relative;
    overflow: hidden;
}

/* 1933 Patent Drawing Background */
.patent-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    max-width: 1200px;
    height: auto;
    opacity: 0.07;
    pointer-events: none;
    z-index: 1;
    mix-blend-mode: multiply;
}

/* Floating Elements Container */
.floating-elements {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 20;
    overflow: hidden;
}

/* Coffee Beans */
.bean {
    position: absolute;
    height: auto;
    z-index: 20;
    filter: drop-shadow(4px 4px 12px rgba(0,0,0,0.3));
    mix-blend-mode: multiply;
}

/* Bean 01 — top / mid / bottom-left */
.bean-1a { width: 260px; top:  2%; left:  7%; animation: floatBean 10s ease-in-out infinite 0s; }
.bean-1b { width: 200px; top: 40%; left: 12%; animation: floatBean 13s ease-in-out infinite 2s; }
.bean-1c { width: 310px; bottom: 6%; left:  4%; animation: floatBean 11s ease-in-out infinite 4s; }

/* Bean 02 — top / mid / bottom-right */
.bean-2a { width: 220px; top:  8%; right:  5%; animation: floatBean 12s ease-in-out infinite 1s; }
.bean-2b { width: 290px; top: 48%; right:  9%; animation: floatBean 15s ease-in-out infinite 3s; }
.bean-2c { width: 180px; bottom: 14%; right:  3%; animation: floatBean  9s ease-in-out infinite 5s; }

/* Bean 03 — scattered left */
.bean-3a { width: 300px; top: 18%; left:  2%; animation: floatBean 14s ease-in-out infinite 0.5s; }
.bean-3b { width: 230px; top: 60%; left:  8%; animation: floatBean 11s ease-in-out infinite 2.5s; }
.bean-3c { width: 190px; bottom: 22%; left: 16%; animation: floatBean 13s ease-in-out infinite 4.5s; }

/* Bean 04 — scattered right */
.bean-4a { width: 240px; top: 25%; right:  2%; animation: floatBean 10s ease-in-out infinite 1.5s; }
.bean-4b { width: 310px; top: 65%; right: 12%; animation: floatBean 14s ease-in-out infinite 3.5s; }
.bean-4c { width: 200px; bottom:  4%; right: 18%; animation: floatBean 12s ease-in-out infinite 0.8s; }

/* Bean 05 — center-left band */
.bean-5a { width: 270px; top: 33%; left: 20%; animation: floatBean 13s ease-in-out infinite 2.2s; }
.bean-5b { width: 210px; top: 72%; left:  1%; animation: floatBean 10s ease-in-out infinite 4.2s; }
.bean-5c { width: 320px; top:  5%; left: 28%; animation: floatBean 16s ease-in-out infinite 1.2s; }

/* Bean 06 — center-right band */
.bean-6a { width: 250px; top: 12%; right: 20%; animation: floatBean 11s ease-in-out infinite 3.8s; }
.bean-6b { width: 190px; top: 55%; right: 22%; animation: floatBean 14s ease-in-out infinite 0.3s; }
.bean-6c { width: 280px; bottom: 30%; right:  1%; animation: floatBean 12s ease-in-out infinite 5.5s; }

@keyframes floatBean {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    25% { transform: translateY(-20px) rotate(18deg); }
    50% { transform: translateY(0) rotate(0deg); }
    75% { transform: translateY(20px) rotate(-18deg); }
}

/* Large Stickers - OVERLAPPING VIDEO */
.sticker-large {
    position: absolute;
    filter: drop-shadow(10px 10px 25px rgba(0,0,0,0.3));
    z-index: 40;
}

.apollo-capsule {
    width: 350px;
    top: 12%;
    left: 10%;
    animation: floatApollo1 20s ease-in-out infinite;
    transform: rotate(-14deg);
}

.moka-sticker {
    width: 300px;
    top: 20%;
    right: 5%;
    animation: floatMoka 18s ease-in-out infinite;
    transform: rotate(20deg);
}

.lambo-sticker-1 {
    width: 260px;
    position: absolute;
    top: -90px;
    left: -20px;
    transform: rotate(1deg);
    z-index: 15;
}

.moka-stove-bridge {
    position: relative;
    height: 0;
    overflow: visible;
    z-index: 50;
}

.moka-stove {
    width: 320px;
    position: absolute;
    top: -460px;
    left: 14%;
    transform: rotate(-10deg);
    animation: floatMokaStove 22s ease-in-out infinite;
}

@keyframes floatApollo1 {
    0%, 100% { transform: translateY(0) rotate(-14deg); }
    50% { transform: translateY(-35px) rotate(-9deg); }
}

@keyframes floatMoka {
    0%, 100% { transform: translateY(0) rotate(20deg); }
    50% { transform: translateY(-28px) rotate(15deg); }
}

@keyframes floatMokaStove {
    0%, 100% { transform: rotate(-10deg); }
    50% { transform: translateY(-22px) rotate(-6deg); }
}

/* Main Content */
.italian-content {
    position: relative;
    z-index: 5;
    max-width: 1000px;
    margin: 0 auto;
    text-align: center;
}

.italian-header {
    margin-bottom: 40px;
}

.italian-header .era-tag {
    font-family: 'Space Mono', monospace;
    font-size: 0.7rem;
    letter-spacing: 0.3em;
    color: var(--aka);
    margin-bottom: 15px;
    display: block;
}

.italian-header h2 {
    font-size: clamp(2.2rem, 5vw, 4.5rem);
    font-weight: 400;
    letter-spacing: 0.05em;
    color: var(--sumi);
}

.italian-header h2 .accent {
    color: var(--aka);
    font-style: italic;
}

.italian-header .subtitle {
    font-family: 'Kalam', cursive;
    font-size: 0.95rem;
    font-weight: 400;
    line-height: 1.25;
    opacity: 0.42;
    margin: 16px auto 0;
    letter-spacing: 0;
    max-width: none;
    text-align: center;
}

/* Lambo GIF */
.lambo-gif {
    display: block;
    width: 82vw;
    max-width: 1150px;
    height: auto;
    margin: 50px auto 10px;
    /* transparent video (HEVC for Safari, VP9 WebM for everyone else) —
       real alpha channel, so the car + soft shadow sit over the section with
       no background box. Explosion + seamless 360° turntable loop. */
    /* ensure it sits centered on the page, not just within the 1000px column */
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: none;
}

/* Video Showcase */
.video-showcase {
    position: relative;
    width: 100%;
    max-width: 1100px;
    margin: 50px auto;
    z-index: 8;
}

.video-showcase video {
    width: 100%;
    height: auto;
    display: block;
    mix-blend-mode: difference;
    background: transparent;
}

.video-label {
    font-family: 'Space Mono', monospace;
    font-size: 0.6rem;
    letter-spacing: 0.12em;
    color: var(--sumi);
    opacity: 0.4;
    margin-top: 18px;
}

/* Story Text */
.italian-story {
    max-width: 700px;
    margin: 10px auto 0;
    text-align: left;
    background: rgba(255,255,255,0.94);
    padding: 50px;
    border-left: 4px solid var(--aka);
    box-shadow: 0 15px 50px rgba(0,0,0,0.08);
    position: relative;
    z-index: 10;
}

.italian-story p {
    font-size: 1.05rem;
    line-height: 2;
    margin-bottom: 20px;
    color: var(--sumi);
}

.italian-story .highlight {
    color: var(--aka);
    font-weight: 500;
}

.italian-story .quote {
    font-style: italic;
    color: var(--ai);
    border-left: 2px solid var(--ai);
    padding-left: 20px;
    margin: 28px 0;
    font-size: 1.1rem;
}

.italian-story cite {
    display: block;
    font-size: 0.75rem;
    font-style: normal;
    opacity: 0.5;
    margin-top: 10px;
    font-family: 'Space Mono', monospace;
}

/* Responsive */
@media (max-width: 1200px) {
    .apollo-capsule { width: 250px; }
    .moka-sticker, .moka-stove { width: 220px; }
    .bean { max-width: 160px; }
    .apollo-navigator { width: 160px; }
}

@media (max-width: 768px) {
    .sticker-large { display: none; }
    .bean { max-width: 100px; }
    .italian-story { padding: 30px; margin: 60px 20px 0; }
    .video-showcase { max-width: 100%; }
    .apollo-navigator { width: 120px; }
}

/* ==================== */
/* FOOTER */
/* ==================== */
footer {
    padding: 30px 50px;
    background: var(--sumi-deep);
    color: var(--washi);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: 'Space Mono', monospace;
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    opacity: 0.5;
}

/* "DESIGNED WITH [Clip]" — signature mark, forced white on the dark footer */
.footer-credit {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.footer-clip {
    height: 5em;
    width: auto;
    filter: brightness(0) invert(1);
    opacity: 0.8;
}


/* ==================== */
/* SCROLL ANIMATIONS */
/* ==================== */
.reveal {
    opacity: 0;
    transform: translateY(60px);
    transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }

/* ==================== */
/* RESPONSIVE */
/* ==================== */
@media (max-width: 1024px) {
    .philosophy-grid {
        grid-template-columns: 1fr;
    }

    .philosophy-visual {
        height: 300px;
    }

    .technical-grid {
        grid-template-columns: 1fr;
    }

    .about {
        grid-template-columns: 1fr;
    }

    .about-image {
        height: 50vh;
    }
}

@media (max-width: 768px) {
    nav {
        padding: 20px 30px;
    }

    .nav-links {
        display: none;
    }

    .work-grid {
        grid-template-columns: 1fr;
    }

    .work-item:nth-child(n) {
        grid-column: auto;
        grid-row: auto;
    }

    /* Very gentle tilt on mobile (~0.5° max) so Chaos still reads on full-width
       cards; body has overflow-x:hidden so the slight rotation can't scroll. */
    .work-item { --tilt-unit: 0.25deg; }

    .about-content {
        padding: 60px 30px;
    }

    .about-data {
        grid-template-columns: 1fr;
    }

    #guide {
        display: none;
    }

    body, *, *::before, *::after {
        cursor: auto !important;
    }

    a, button, [role="button"], .work-item, .gallery-item {
        cursor: pointer !important;
    }

    #cursor, #cursor-dot {
        display: none;
    }
}