/*
Theme Name: Firm One
Theme URI: https://www.jumbleshop-one.com
Author: Jumble Shop
Author URI: https://www.jumbleshop-one.com
Description: Firm One - Original theme for Jumble Shop
Version: 1.0
*/

/* ==============================================
   メインスタイル
   ============================================== */

body {
    font-family: 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN', 'Helvetica', 'Arial', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: #FAF9F6;
    overflow-x: hidden;
    margin: 0;
    padding: 0;
}

.helvetica { font-family: 'Helvetica', 'Arial', sans-serif; }
.japanese-body { font-family: 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN', sans-serif; }
.kerning-tight { letter-spacing: -0.05em; }
.label-tracking { letter-spacing: 0.2em; }

/* -----------------------------------------------
   ヒーローセクション（トップの紺色エリア）
----------------------------------------------- */
.hero-section {
    background-color: #0f172a;
    position: relative;
    overflow: hidden;
}

.blueprint-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

.grid-system {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(to right, rgba(34, 211, 238, 0.1) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(34, 211, 238, 0.1) 1px, transparent 1px);
    background-size: 80px 80px;
    animation: grid-shift 60s linear infinite;
}

.grid-system::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(to right, rgba(34, 211, 238, 0.05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(34, 211, 238, 0.05) 1px, transparent 1px);
    background-size: 20px 20px;
}

@keyframes grid-shift {
    from { transform: translateY(0); }
    to { transform: translateY(80px); }
}

.scanner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(34, 211, 238, 0.8), transparent);
    box-shadow: 0 0 15px rgba(34, 211, 238, 0.5);
    animation: scan 8s ease-in-out infinite;
    z-index: 1;
}

@keyframes scan {
    0% { top: 0%; opacity: 0; }
    5% { opacity: 1; }
    95% { opacity: 1; }
    100% { top: 100%; opacity: 0; }
}

.arch-circle {
    position: absolute;
    border: 1px solid rgba(34, 211, 238, 0.2);
    border-radius: 50%;
    animation: rotate 40s linear infinite;
}

.arch-circle::before {
    content: '';
    position: absolute;
    top: 50%;
    left: -10px;
    right: -10px;
    height: 1px;
    background: rgba(34, 211, 238, 0.3);
}

.circle-1 { width: 400px; height: 400px; top: 10%; right: -50px; }
.circle-2 { width: 600px; height: 600px; bottom: -100px; left: -100px; animation-direction: reverse; animation-duration: 60s; }
.circle-3 { width: 200px; height: 200px; top: 40%; left: 10%; border-style: dashed; animation-duration: 20s; }

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

.measurement-line {
    position: absolute;
    background: rgba(34, 211, 238, 0.3);
    font-family: 'Helvetica', sans-serif;
    font-size: 10px;
    color: rgba(34, 211, 238, 0.6);
    letter-spacing: 0.1em;
}

.hero-content {
    position: relative;
    z-index: 10;
}

.hero-section .text-black { color: #ffffff !important; }
.hero-section .text-stone-400 { color: #22d3ee !important; }
.hero-section .text-on-surface-variant { color: #cbd5e1 !important; }

/* -----------------------------------------------
   Our Storyセクション
----------------------------------------------- */
.philosophy-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
    background-image:
        linear-gradient(to right, rgba(0, 0, 0, 0.05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(0, 0, 0, 0.05) 1px, transparent 1px);
    background-size: 100px 100px;
}

.floating-math {
    position: absolute;
    font-family: 'Helvetica', sans-serif;
    color: rgba(0, 0, 0, 0.08);
    font-size: 14px;
    user-select: none;
    animation: float 25s infinite linear;
}

.geo-outline {
    position: absolute;
    border: 1.5px solid rgba(120, 113, 108, 0.3);
    animation: rotate-geo 45s infinite linear;
}

.compass-element {
    position: absolute;
    border: 1px dashed rgba(0, 0, 0, 0.15);
    border-radius: 50%;
    animation: rotate-geo 60s infinite linear;
    display: flex;
    align-items: center;
    justify-content: center;
}

.compass-element::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    background: rgba(0, 0, 0, 0.1);
}

@keyframes float {
    0% { transform: translateY(0) rotate(0deg); opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { transform: translateY(-200px) rotate(360deg); opacity: 0; }
}

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

.coordinate-axis {
    position: absolute;
    background: rgba(120, 113, 108, 0.4);
}

.axis-x { width: 100%; height: 1.5px; top: 50%; }
.axis-y { width: 1.5px; height: 100%; left: 50%; }

.axis-marker {
    position: absolute;
    font-size: 10px;
    font-weight: bold;
    color: rgba(0, 0, 0, 0.4);
    letter-spacing: 0.15em;
    font-family: 'Helvetica', sans-serif;
}

.phil-scanner {
    position: absolute;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.1), transparent);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
    animation: phil-scan 12s ease-in-out infinite;
    z-index: 1;
}

@keyframes phil-scan {
    0% { top: 0%; opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { top: 100%; opacity: 0; }
}

.philosophy-text-container {
    position: relative;
    z-index: 10;
    backdrop-filter: blur(2px);
    background-color: rgba(250, 249, 246, 0.4);
    padding: 2rem;
}