@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500&family=Source+Code+Pro:wght@300&display=swap');

/* ─── Reset & Base ─────────────────────────────────────────── */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'DM Sans', sans-serif;
    background: #f5f5f5;
    color: #1a1a1a;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ─── Header ────────────────────────────────────────────────── */
.site-header {
    background: #ffffff;
    border-bottom: 1px solid #e5e7eb;
    padding: 1.5rem 1rem 1rem;
    text-align: center;
}

.site-header h1 {
    font-size: 2.2rem;
    font-weight: 300;
    letter-spacing: 3.9px;
    text-transform: lowercase;
    color: #111827;
}

.site-subtitle {
    margin-top: 0.5rem;
    font-size: 0.9rem;
    letter-spacing: 2.0px !important;
    font-weight: 200;
    color: #6b7280;
    max-width: 580px;
    margin-inline: auto;
    line-height: 1.6;
    /* text-transform: lowercase; */
    letter-spacing: 0.01em;
}

/* ─── Grid ──────────────────────────────────────────────────── */
.editor-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    align-items: start;
    align-content: start;
    padding: 2.5rem 2rem;
    max-width: 1100px;
    margin: 0 auto;
    width: 100%;
    flex: 1;
}

@media (max-width: 900px) {
    .editor-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 560px) {
    .editor-grid {
        grid-template-columns: 1fr;
    }
}

/* ─── Card ──────────────────────────────────────────────────── */
.editor-card {
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid #111111;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.06), 0 8px 32px rgba(0, 0, 0, 0.12);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    max-height: 380px;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.editor-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1), 0 12px 32px rgba(0, 0, 0, 0.1);
}

.cards-visible .editor-card {
    animation: card-enter 0.45s ease both;
}
.cards-visible .editor-card:nth-child(2) { animation-delay: 0.07s; }
.cards-visible .editor-card:nth-child(3) { animation-delay: 0.14s; }
.cards-visible .editor-card:nth-child(4) { animation-delay: 0.21s; }
.cards-visible .editor-card:nth-child(5) { animation-delay: 0.28s; }

@keyframes card-enter {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ─── Card Thumbnail ────────────────────────────────────────── */
.card-thumb {
    background: linear-gradient(135deg, var(--thumb-color-a), var(--thumb-color-b));
    height: 180px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 0.65rem 0.75rem 0;
}

.card-thumb-label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 4px;
    color: rgba(255, 255, 255, 0.75);
    text-transform: uppercase;
    align-self: flex-start;
}

.card-thumb-img {
    flex: 1;
    width: 85%;
    object-fit: contain;
    min-height: 0;
    margin-top: 0.25rem;
    filter: brightness(0) drop-shadow(0 4px 10px rgba(0, 0, 0, 0.25));
}

/* ─── Card Body ─────────────────────────────────────────────── */
.card-body {
    padding: 1.25rem 1.25rem 1.5rem;
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 0.5rem;
}

.card-title {
    font-size: 1.05rem;
    font-weight: 200;
    letter-spacing: 2.3px;
    color: #111827;
}

.card-desc {
    font-size: 0.875rem;
    color: #6b7280;
    line-height: 1.5;
    flex: 1;
}

.card-btn {
    display: inline-block;
    margin-top: 0.75rem;
    padding: 0.45rem 1rem;
    border-radius: 6px;
    background: #374151;
    color: #ffffff;
    font-size: 0.8rem;
    font-weight: 200;
    letter-spacing: 1.7px;
    align-self: flex-start;
    transition: background 0.15s ease;
}

.editor-card:hover .card-btn {
    background: #212630;
}

/* ─── Loading Modal ────────────────────────────────────────── */
#loader-modal {
    position: fixed;
    inset: 0;
    background: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 15vh; /*` move it up slightly */
    z-index: 10000;
    opacity: 1;
    transition: opacity 0.5s ease;
}

#loader-modal.hide {
    opacity: 0;
    pointer-events: none;
}

.loader-box {
    background-color: #f2d45d;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='250'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.35' numOctaves='5' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='250' height='250' filter='url(%23n)' opacity='0.22'/%3E%3C/svg%3E");
    background-size: 250px 250px;
    border: 1px solid #111111;
    border-radius: 14px;
    padding: 2rem 2.5rem;
    width: 320px;
    text-align: center;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.3);
}

.loader-title {
    font-family: 'Source Code Pro', monospace;
    font-size: 1.1rem;
    font-weight: 300;
    color: #111827;
    margin-bottom: 1.25rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.bg-title {
    font-family: 'Source Code Pro', monospace;
    font-size: 1.4rem;
    font-weight: 300;
    color: #111827cb;
    margin-bottom: 0.5rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* ─── Loader Cube ───────────────────────────────────────────── */
.loader-cube-wrap {
    perspective: 1600px;
    width: 50px;
    height: 50px;
    margin: 0 auto 1.5rem;
}

.loader-cube {
    width: 50px;
    height: 50px;
    position: relative;
    transform-style: preserve-3d;
    animation: cube-spin 3s linear infinite;
}

.cube-face {
    position: absolute;
    width: 50px;
    height: 50px;
    border: 1px solid #3e3e3e;
    background: transparent;
}

.cube-front  { transform: translateZ(25px); }
.cube-back   { transform: translateZ(-25px) rotateY(180deg); }
.cube-left   { transform: translateX(-25px) rotateY(-90deg); }
.cube-right  { transform: translateX(25px) rotateY(90deg); }
.cube-top    { transform: translateY(-25px) rotateX(90deg); }
.cube-bottom { transform: translateY(25px) rotateX(-90deg); }

@keyframes cube-spin {
    from { transform: rotateX(20deg) rotateY(0deg); }
    to   { transform: rotateX(20deg) rotateY(-360deg); }
}

.loader-track {
    background: #e5e7eb;
    border-radius: 999px;
    height: 8px;
    overflow: hidden;
}

.loader-bar {
    height: 100%;
    width: 0%;
    border-radius: 999px;
    background: #252525;
    animation: loader-fill 1.8s ease-out forwards;
}

@keyframes loader-fill {
    from { width: 0%; }
    to   { width: 100%; }
}

.loader-label {
    margin-top: 0.75rem;
    font-family: 'Source Code Pro', monospace;
    font-size: 0.8rem;
    font-weight: 300;
    color: #252525;
}

/* ─── About Modal ──────────────────────────────────────────── */
#about-modal {
    position: fixed;
    inset: 0;
    background: rgba(245, 245, 245, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 15vh;
    z-index: 10000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

#about-modal.visible {
    opacity: 1;
    pointer-events: all;
}

.about-text {
    margin-top: 1.25rem;
    font-family: 'Source Code Pro', monospace;
    font-size: 0.8rem;
    font-weight: 300;
    color: #252525;
    line-height: 1.6;
}

/* ─── Fade Overlay ─────────────────────────────────────────── */
#fade-overlay {
    position: fixed;
    inset: 0;
    background: #f5f5f5;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.45s ease;
    z-index: 9999;
}

#fade-overlay.active {
    opacity: 1;
    pointer-events: all;
}

/* ─── Info Card (6th) ───────────────────────────────────────── */
.info-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.6rem;
    padding: 1.25rem 1.5rem;
    font-family: 'Source Code Pro', monospace;
    font-weight: 300;
    color: #1a1a1a;
}

.info-line {
    font-size: 0.8rem;
    line-height: 1.5;
    opacity: 0;
    white-space: normal;
    word-break: break-word;
}

.info-card.animate .info-line {
    animation: info-slide-in 0.42s ease forwards;
}

.info-card.animate .info-line:nth-child(1) { animation-delay: 0.00s; }
.info-card.animate .info-line:nth-child(2) { animation-delay: 0.07s; }
.info-card.animate .info-line:nth-child(3) { animation-delay: 0.14s; }
.info-card.animate .info-line:nth-child(4) { animation-delay: 0.21s; }
.info-card.animate .info-line:nth-child(5) { animation-delay: 0.28s; }

@keyframes info-slide-in {
    from { opacity: 0; transform: translateX(22px) translateY(8px); }
    to   { opacity: 1; transform: translateX(0) translateY(0); }
}

.info-card.exit .info-line {
    animation: info-slide-out 0.30s ease both;
}

/* reverse stagger: bottom line exits first */
.info-card.exit .info-line:nth-child(1) { animation-delay: 0.20s; }
.info-card.exit .info-line:nth-child(2) { animation-delay: 0.15s; }
.info-card.exit .info-line:nth-child(3) { animation-delay: 0.10s; }
.info-card.exit .info-line:nth-child(4) { animation-delay: 0.05s; }
.info-card.exit .info-line:nth-child(5) { animation-delay: 0.00s; }

@keyframes info-slide-out {
    from { opacity: 1; transform: translateX(0) translateY(0); }
    to   { opacity: 0; transform: translateX(22px) translateY(-4px); }
}

/* ─── Footer ────────────────────────────────────────────────── */
.site-footer {
    text-align: center;
    padding: 1.25rem 2rem;
    font-size: 0.8rem;
    color: #9ca3af;
    border-top: 1px solid #e5e7eb;
    background: #ffffff;
}