html, body {
    height: 100%;
    overflow: hidden; 
}

#main-container {
    height: calc(100vh - 56px - 65px - env(safe-area-inset-bottom));
    margin-top: 56px; 
    overflow-y: auto;
}

.view {
    display: none;
    height: 100%;
    animation: fadeIn 0.2s ease-in-out;
}
.view.active {
    display: block;
}
#view-detail.active {
    display: flex; 
}

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

.nav-btn {
    border: none;
    background: transparent;
    padding: 5px 15px;
    transition: color 0.2s;
}
.nav-btn.text-primary {
    color: #0d6efd !important;
}

.nav-fab {
    position: relative;
    top: -20px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 4px solid #fff;
    transition: transform 0.1s;
}
.nav-fab:active {
    transform: scale(0.95);
}

.status-dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    background-color: #dc3545;
    border-radius: 50%;
}
.status-dot.paused {
    background-color: #ffc107;
}
.blink {
    animation: blinker 1.5s linear infinite;
}
@keyframes blinker {
    50% { opacity: 0.3; }
}

.list-group-item-action:active {
    background-color: #f8f9fa;
}

/* ===================================================
   🎬 シネマティックアニメーション
   =================================================== */

/* 1. ロゴが回転しながら登場し、適切な位置(そのまま)に落ち着く */
.anim-logo {
    animation: spinDrop 1.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
@keyframes spinDrop {
    0% { transform: translateY(-150px) rotate(-1080deg) scale(0.2); opacity: 0; }
    60% { transform: translateY(0) rotate(0deg) scale(1.2); opacity: 1; filter: drop-shadow(0 0 20px rgba(255,255,255,1)); }
    80% { transform: translateY(0) scale(1); filter: drop-shadow(0 0 5px rgba(255,255,255,0.5)); }
    100% { transform: translateY(0) scale(0.9); opacity: 1; }
}

/* 2. LocaNodeの文字が奥から迫ってくる */
.anim-title {
    animation: textBoom 2s cubic-bezier(0.1, 0.9, 0.2, 1) forwards;
    animation-delay: 1.5s;
}
@keyframes textBoom {
    0% { transform: scale(3.5); opacity: 0; filter: blur(15px); }
    30% { transform: scale(1); opacity: 1; filter: blur(0px); text-shadow: 0 0 40px #00bfff; }
    100% { transform: scale(1); opacity: 1; text-shadow: 0 0 20px #00bfff; }
}

/* 3. Welcome to LocaNode がフェードイン */
.anim-subtitle {
    animation: welcomeFade 2s ease-out forwards;
    animation-delay: 2.2s;
}
@keyframes welcomeFade {
    0% { opacity: 0; letter-spacing: 0px; }
    100% { opacity: 1; letter-spacing: 8px; }
}

.splash-fade-out {
    animation: fadeOutSplash 1s ease-in forwards;
}
@keyframes fadeOutSplash {
    to { opacity: 0; visibility: hidden; }
}