@charset "UTF-8";

/* =========================================================
   Reset & Base (共通)
   ========================================================= */
html {
    width: 100%;
    height: 100%;
}

body {
    margin: 0;
    padding: 0;
    width: 100%;
    background-color: #000;
    font-family: 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
    color: #fff;
}

img {
    max-width: 100%;
    height: auto;
}

/* --- index.html 専用のベース設定 --- */
body.page-index {
    height: 100%;
    overflow: hidden;
    overscroll-behavior: none;
}

/* --- works.html 専用のベース設定 --- */
body.page-works {
    min-height: 100svh;
    height: auto;
    overflow: visible; /* 縦スクロールを許可 */
}

/* =========================================================
   Index Page: Loading Animation
   ========================================================= */
.oort-loader-bg {
    position: absolute;
    inset: 0;
    background-color: #000;
    z-index: 5;
    animation: fadeUniverse 4.5s ease 1s forwards;
    pointer-events: none;
}
@keyframes fadeUniverse {
    0%, 65% { opacity: 1; }
    88%, 100% { opacity: 0; visibility: hidden; }
}
body.is-loading .oort-map__viewport {
    pointer-events: none;
}

/* =========================================================
   Index Page: Map & Layers
   ========================================================= */
.oort-map {
    width: 100%;
    height: 100%;
    position: relative;
}
.oort-map__viewport {
    width: 100%;
    height: 100%;
    position: relative;
    cursor: grab;
    touch-action: none;
    user-select: none;
    overflow: hidden;
}
.oort-map__viewport:active {
    cursor: grabbing;
}
.oort-map__canvas {
    width: 4000px;
    height: 4000px;
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: 0 0;
    will-change: transform;
}
.oort-map__canvas--bg {
    background-color: #000;
    z-index: 1;
}
.oort-map__canvas--markers {
    z-index: 3;
    pointer-events: none;
}

/* 背景レイヤー（太陽系アニメーション） */
.oort-bg-layer {
    position: absolute;
    inset: 0;
    margin: auto;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    transform-origin: center center;
    will-change: transform;
}
.oort-bg-layer--01 { width: 100%; height: 100%; background-image: url('img/bg_space/oort_utyu_01.svg'); z-index: 1; animation: rotateSpace 600s linear infinite; }
.oort-bg-layer--02 { width: 76%; height: 76%; background-image: url('img/bg_space/oort_utyu_02.svg'); z-index: 2; animation: rotateSpace 450s linear infinite reverse; }
.oort-bg-layer--03 { width: 24%; height: 24%; background-image: url('img/bg_space/oort_utyu_03.svg'); z-index: 3; animation: rotateSpace 300s linear infinite; }
.oort-bg-layer--04 { width: 14%; height: 14%; background-image: url('img/bg_space/oort_utyu_04.svg'); z-index: 4; animation: rotateSpace 200s linear infinite reverse; }
.oort-bg-layer--05 { width: 8%; height: 8%; background-image: url('img/bg_space/oort_utyu_05.svg'); z-index: 5; }

@keyframes rotateSpace {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* =========================================================
   Index Page: Logo
   ========================================================= */
.oort-map__logo {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10; pointer-events: none; width: 100%;
    display: flex; justify-content: center; margin-left: -18px;
}
.oort-logo {
    display: flex; align-items: center; justify-content: center; position: relative; width: 320px; height: 80px;
}
.oort-logo__symbol { position: relative; z-index: 3; flex-shrink: 0; width: 75px; }
.oort-logo__symbol img { width: 100%; animation: symbolBlink 4.5s cubic-bezier(0.8, 0, 0.2, 1) 1s both; }
.oort-logo__container { position: absolute; top: 0; bottom: 0; overflow: hidden; z-index: 2; display: flex; align-items: center; }
.oort-logo__container--left { justify-content: flex-end; width: 80px; right: calc(50% + 52px); }
.oort-logo__container--right { justify-content: flex-start; width: 120px; left: calc(50% + 20px); }
.oort-logo__text { opacity: 0; will-change: transform, opacity; width: 100%; height: auto; }
.oort-logo__text--left { animation: textRevealLeft 4.5s cubic-bezier(0.25, 1, 0.5, 1) 1s both; }
.oort-logo__text--right { animation: textRevealRight 4.5s cubic-bezier(0.25, 1, 0.5, 1) 1s both; }

@keyframes symbolBlink {
    0% { clip-path: inset(100% 0 0 0); }
    8% { clip-path: inset(0 0 0 0); }
    16%, 24% { clip-path: inset(100% 0 0 0); }
    32% { clip-path: inset(0 0 0 0); }
    40%, 50% { clip-path: inset(100% 0 0 0); }
    58%, 100% { clip-path: inset(0 0 0 0); }
}
@keyframes textRevealLeft { 0%, 65% { transform: translateX(100%); opacity: 0; } 66% { opacity: 1; } 88%, 100% { transform: translateX(0); opacity: 1; } }
@keyframes textRevealRight { 0%, 65% { transform: translateX(-100%); opacity: 0; } 66% { opacity: 1; } 88%, 100% { transform: translateX(0); opacity: 1; } }

/* =========================================================
   Index Page: Markers (Stars)
   ========================================================= */
.oort-map__marker {
    position: absolute;
    display: block;
    width: 48px; height: 48px;
    background-image: url('img/icon_star.svg');
    background-size: contain; background-repeat: no-repeat; background-position: center;
    cursor: pointer; pointer-events: auto;
    /* 一番最初のオリジナルと同じ、アナログなコマ送り感 */
    animation: analogWobble 4s infinite steps(1);
}

.oort-map__marker:hover {
    animation: none;
    transform: translate(-50%, -50%) scale(1.15); /* ホバー時は少し大きく固定 */
}

/* 元の動きから rotate（斜めに傾く動き）だけを削除 */
@keyframes analogWobble {
    0%   { transform: translate(-50%, -50%) scale(1); }
    10%  { transform: translate(-53%, -48%) scale(1.08); }
    20%  { transform: translate(-47%, -52%) scale(0.92); }
    30%  { transform: translate(-52%, -51%) scale(1.05); }
    40%  { transform: translate(-48%, -49%) scale(0.95); }
    50%  { transform: translate(-50%, -53%) scale(1.06); }
    60%  { transform: translate(-49%, -47%) scale(0.94); }
    70%  { transform: translate(-52%, -52%) scale(1.07); }
    80%  { transform: translate(-48%, -48%) scale(0.93); }
    90%  { transform: translate(-51%, -50%) scale(1.03); }
    100% { transform: translate(-50%, -50%) scale(1); }
}

/* =========================================================
   Works Page: Layout
   ========================================================= */
.works-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 80px 20px;
    position: relative;
    z-index: 10;
}
.works-header { text-align: center; margin-bottom: 60px; }
.works-logo { margin-bottom: 20px; }
.works-logo img { width: 32px; }
.works-title { margin: 0; }
.works-title img { height: 24px; width: auto; }

.works-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 50px 30px; }
.works-item { text-decoration: none; color: #fff; display: block; transition: opacity 0.3s ease, transform 0.3s ease; cursor: pointer; }
.works-item:hover { opacity: 0.7; transform: translateY(-5px); }
.works-item__thumb { width: 100%; aspect-ratio: 16 / 9; background-color: #222; margin-bottom: 15px; overflow: hidden; }
.works-item__thumb img { width: 100%; height: 100%; object-fit: cover; }
.works-item__name { font-size: 16px; margin: 0 0 8px; letter-spacing: 0.05em; }
.works-item__desc { font-size: 10px; line-height: 1.6; color: #aaa; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* =========================================================
   Common: Modals (両ページ共通・インデックス変更対応版)
   ========================================================= */
.oort-modal {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.85); display: flex; justify-content: center; align-items: center;
    z-index: 200; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease;
}
.oort-modal--active { opacity: 1; visibility: visible; }

.oort-modal__border {
    width: 90%; max-width: 500px; background-color: #fff; padding: 1px;
    clip-path: polygon(20px 0, calc(100% - 20px) 0, 100% 20px, 100% calc(100% - 20px), calc(100% - 20px) 100%, 20px 100%, 0 calc(100% - 20px), 0 20px);
    position: relative;
}

.oort-modal__content {
    background-color: #000;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    clip-path: polygon(19px 0, calc(100% - 19px) 0, 100% 19px, 100% calc(100% - 19px), calc(100% - 19px) 100%, 19px 100%, 0 calc(100% - 19px), 0 19px);
    padding: 56px 30px 40px;
    box-sizing: border-box;
}

.oort-modal__close {
    position: absolute; top: 20px; right: 20px; width: 24px; height: 24px;
    background: none; border: none; cursor: pointer; padding: 0; z-index: 210; transition: opacity 0.2s ease;
}
.oort-modal__close:hover { opacity: 0.6; }
.oort-modal__title { text-align: center; font-size: 24px; letter-spacing: 0.1em; margin: 0 0 30px; font-weight: normal; }
.oort-modal__subtitle {
    color: #fff;
    margin-bottom: 24px;
    font-feature-settings: "palt";
}
.oort-modal__hero { width: 100%; margin-bottom: 24px; }
.oort-modal__text { font-size: 14px; line-height: 1.6; letter-spacing: 0.05em; }
.oort-modal__row { display: flex; flex-direction: column; margin-bottom: 24px; }
.oort-modal__label { color: #aaa; font-size: 12px; margin-bottom: 4px; }
.oort-modal__value { word-break: break-all; }
.oort-modal__value a { color: #fff; text-decoration: underline; text-underline-offset: 3px; transition: color 0.2s; }
.oort-modal__value a:hover { color: #ccc; }

.youtube-embed {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    margin-top: 4px;
    margin-bottom: 12px;
}
.youtube-embed iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; }

/* =========================================================
   Media Queries (スマホ向け調整)
   ========================================================= */
@media (max-width: 768px) {
    /* --- Works Page Grid --- */
    .works-grid { grid-template-columns: repeat(2, 1fr); gap: 30px 20px; }
    
    /* --- Modal --- */
    .oort-modal__content {
        max-height: 70vh;
        padding: 56px 20px 32px;
    }
    .oort-modal__title {
        text-align: left;
        font-size: 18px;
        padding-right: 24px;
    }

    .oort-map__logo {
        margin-left: 0;
    }
}
@media (max-width: 480px) {
    .works-grid { grid-template-columns: 1fr; }
}