/* BIN-BOI — studio wing ([ studio ]) — orange theme + verse reader.
   Shares the bento/terminal DNA with dev & labs, tinted distinct. */

body {
    background-color: #1a1a1b;
    color: #f5f5f5;
    background-image: radial-gradient(rgba(240, 120, 38, 0.04) 1px, transparent 0);
    background-size: 8px 8px;
}

.bento-card {
    background: rgba(240, 120, 38, 0.03);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 1.5rem; padding: 1.5rem;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    position: relative; overflow: hidden;
}
.bento-card:hover {
    border-color: rgba(240, 120, 38, 0.35);
    transform: translateY(-2px);
    box-shadow: 0 10px 40px -12px rgba(240, 120, 38, 0.25);
}
.bento-card::before {
    content: ''; position: absolute; inset: 0;
    background-image: radial-gradient(rgba(240, 120, 38, 0.05) 1px, transparent 0);
    background-size: 8px 8px; pointer-events: none; z-index: 0;
}
.bento-card > * { position: relative; z-index: 1; }

.verse-trigger { position: relative; cursor: pointer; }
.verse-trigger:hover { border-color: rgba(240, 120, 38, 0.35); }
.verse-trigger::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(transparent 50%, rgba(240, 120, 38, 0.04) 50%);
    background-size: 100% 4px; pointer-events: none; opacity: 0;
    transition: opacity 0.3s ease; z-index: 0;
}
.verse-trigger:hover::after { opacity: 1; }

/* Compact swipeable verse cards */
.verse-card {
    flex: 0 0 auto;
    width: min(72vw, 16.5rem);
    display: flex; flex-direction: column;
    background: rgba(240, 120, 38, 0.03);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-top: 2px solid rgba(240, 120, 38, 0.4);
    border-radius: 1.1rem;
    padding: 1.15rem 1.25rem;
    transition: transform 0.3s ease, border-color 0.3s ease;
    position: relative; overflow: hidden;
    min-height: 8.5rem;
}
.verse-card::before {
    content: ''; position: absolute; inset: 0;
    background-image: radial-gradient(rgba(240, 120, 38, 0.05) 1px, transparent 0);
    background-size: 8px 8px; pointer-events: none; z-index: 0;
}
.verse-card > * { position: relative; z-index: 1; }
.verse-card:hover {
    transform: translateY(-2px);
    border-color: rgba(240, 120, 38, 0.55);
}
.verse-num { font-family: 'Fira Code', monospace; font-size: 9px; letter-spacing: 0.15em; color: rgba(245, 245, 245, 0.35); }
.verse-title {
    font-family: 'Archivo Black', sans-serif; font-size: 1.1rem; line-height: 1.2;
    margin: 0 0 0.4rem; color: #f5f5f5; display: -webkit-box;
    -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.verse-preview {
    font-size: 11px; line-height: 1.45; color: rgba(245, 245, 245, 0.45); font-style: italic;
    font-family: 'Fira Code', monospace; display: -webkit-box;
    -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* ----- VERSE READER MODAL ----- */
.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

#poem-modal {
    opacity: 0; pointer-events: none;
    transition: opacity 0.3s ease;
}
#poem-modal.modal-open { opacity: 1; pointer-events: auto; }

#poem-content {
    transform: scale(0.96) translateY(20px);
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}
#poem-modal.modal-open #poem-content { transform: scale(1) translateY(0); }

.glowing-text { text-shadow: 0 0 20px rgba(240, 120, 38, 0.06); }

.line-number { display: block; }

@keyframes dropIn {
    0% { transform: translateY(-30px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}