/* =========================================================
   SUPERBASE — HOME PAGE
   Focus grid, featured card, blog/write-up cards
   ========================================================= */

:root {
    /* Shared "expo-out" curve for the terminal → hero handoff —
       quick to start, long soft settle. Using one variable everywhere
       in that sequence is what keeps every step feeling like the same
       motion rather than a chain of differently-timed animations. */
    --ease-hero: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- Current focus grid ---------- */

.focus-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.focus-card {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 18px 20px;
    font-size: 13.5px;
    color: var(--text);
    position: relative;
    transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.focus-card::before {
    content: "[ok]";
    display: block;
    font-size: 11px;
    color: var(--green);
    margin-bottom: 8px;
    letter-spacing: 0.5px;
    font-weight: 600;
}

.focus-card:hover {
    border-color: var(--border-bright);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* ---------- Featured blog ---------- */

.featured-card {
    background: var(--bg-panel);
    border: 1px solid var(--border-bright);
    border-radius: var(--radius);
    padding: 32px 36px;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.featured-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    background: var(--blue);
    opacity: 0.6;
}

.badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--amber);
    border: 1px solid rgba(220, 220, 170, 0.3);
    background: rgba(220, 220, 170, 0.06);
    padding: 4px 10px;
    border-radius: 3px;
    margin-bottom: 16px;
}

.featured-card h2 {
    font-size: 22px;
    color: var(--text);
    margin-bottom: 12px;
    letter-spacing: 0.2px;
    font-weight: 700;
}

.featured-card p {
    color: var(--text-dim);
    font-size: 14px;
    max-width: 560px;
    margin-bottom: 18px;
}

.featured-card a {
    font-size: 13px;
    font-weight: 600;
    color: var(--blue);
}

.featured-card a:hover {
    color: var(--blue-bright);
}

/* ---------- TryHackMe profile card ---------- */

.thm-profile {
    display: flex;
    align-items: center;
    gap: 32px;
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 28px 32px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.thm-profile:hover {
    border-color: var(--border-bright);
    box-shadow: var(--shadow-sm);
}

.thm-avatar {
    flex-shrink: 0;
    width: 96px;
    height: 96px;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--border);
    background: var(--bg-panel-alt);
}

.thm-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.thm-info {
    flex: 1;
    min-width: 0;
}

.thm-info-top {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.thm-username {
    font-size: 17px;
    font-weight: 700;
    color: var(--text);
    letter-spacing: 0.2px;
}

.thm-platform {
    height: 55px;
    width: auto;
    display: block;
}

.thm-stats {
    display: grid;
    grid-template-columns: repeat(4, auto);
    gap: 20px 32px;
    margin-bottom: 22px;
}

.thm-stat dt {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--text-dim);
    margin-bottom: 6px;
}

.thm-stat dd {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--text);
}

.thm-btn {
    display: inline-block;
    padding: 10px 20px;
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.2px;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text);
    border: 1px solid var(--border-bright);
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.thm-btn:hover {
    border-color: var(--text-dim);
    background: var(--bg-panel-alt);
}

/* ---------- Blog / write-up card grids ---------- */

.cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.blog-card {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 22px 24px;
    transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.blog-card:hover {
    border-color: var(--border-bright);
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

.blog-card span {
    display: inline-block;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--blue);
    border: 1px solid var(--border-bright);
    padding: 3px 8px;
    border-radius: 3px;
    margin-bottom: 14px;
}

.blog-card h3 {
    font-size: 16px;
    color: var(--text);
    margin-bottom: 8px;
    letter-spacing: 0.2px;
    font-weight: 600;
}

.blog-card p {
    font-size: 13px;
    color: var(--text-dim);
}

/* =========================================================
   HERO TERMINAL
   Authentic terminal window: title bar, dots, prompt lines,
   syntax-colored command output. No glow, no scanlines.
   ========================================================= */

.hero {
    padding: 64px 24px 72px;
}

.terminal {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: var(--shadow-md);
    opacity: 0;
    transform: translateY(10px);
    animation: terminal-fade-in 0.5s ease forwards;
}

@keyframes terminal-fade-in {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.terminal-bar {
    height: 42px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 16px;
    background: var(--bg-panel-alt);
    border-bottom: 1px solid var(--border);
}

.terminal-bar span {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
}

.terminal-bar .red { background: var(--dot-red); opacity: 0.85; }
.terminal-bar .yellow { background: var(--dot-yellow); opacity: 0.85; }
.terminal-bar .green { background: var(--dot-green); opacity: 0.85; }

.terminal-bar::after {
    content: "KuroHide Terminal";
    margin-left: 8px;
    font-size: 12.5px;
    color: var(--text-dim);
    font-weight: 500;
    letter-spacing: 0.2px;
}

.terminal-body {
    padding: 32px 36px 40px;
    background-color: var(--bg-panel);
    background-image: none;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-blend-mode: multiply;
    position: relative;
/* Command / output lines inside the terminal body */
}
.terminal-body .mono {
    font-size: 13px;
    color: var(--text-dim);
    margin-bottom: 10px;
    font-weight: 500;
}

.boot-log {
    display: flex;
    flex-direction: column;
    gap: 7px;
    /* Spacing is reserved from page load, not animated in. Only
       transform and border-color change during the reveal — both are
       compositor/paint-only properties, so the "shift + divider fade"
       motion below causes zero layout reflow anywhere on the page. */
    padding-bottom: 20px;
    margin-bottom: 24px;
    border-bottom: 1px solid transparent;
    transform: translateY(0);
    transition:
        transform 360ms var(--ease-hero),
        border-color 360ms var(--ease-hero) 100ms;
}

.boot-line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 13.5px;
    min-height: 20px;
}

/* Prompt: root@superbase:~$ */
.boot-prompt {
    color: var(--green);
    font-weight: 600;
    white-space: nowrap;
}

/* Typed command text */
.boot-typed {
    color: var(--blue-bright);
    letter-spacing: 0.2px;
}

/* Subtle, realistic cursor — no aggressive blink */
.boot-cursor {
    display: inline-block;
    width: 7px;
    height: 15px;
    background: var(--text-dim);
    animation: cursor-blink 1s ease-in-out infinite;
}

/* The idle cursor holds solid — mid-blink — for the length of the
   handoff, then this class is removed and it picks its blink back up.
   That brief held breath is what ties "typing has stopped" to
   "something is about to happen" instead of the two feeling separate. */
.boot-cursor.is-frozen {
    animation: none;
    opacity: 1;
}

@keyframes cursor-blink {
    0%, 45% { opacity: 1; }
    50%, 100% { opacity: 0; }
}

/* Command output */
.boot-output {
    color: var(--text);
    font-weight: 500;
    font-size: 15px;
    padding-left: 2px;
    margin-top: 2px;
}

.boot-log.is-settling {
    transform: translateY(-6px);
    border-bottom-color: var(--border);
}

/* =========================================================
   TERMINAL → HERO HANDOFF
   One continuous timeline, choreographed entirely through
   animation-delay so each element starts while the previous one
   is still finishing (80–150ms overlap) instead of waiting its
   turn. Everything shares the same easing curve and travels the
   same short distance (4–8px) so no single step reads as a
   separate "reveal".

   Timeline (from the moment .is-settling / .is-revealing land):
     0ms     boot-log eases up, divider begins fading in
     240ms   heading rises + fades in         (overlaps divider by 120ms)
     480ms   paragraph rises + fades in        (overlaps heading by 120ms)
     720ms   button 1                          (overlaps paragraph by 120ms)
     790ms   button 2   \_ slight internal stagger
     860ms   button 3   /
     ~1220ms last element settles; idle cursor resumes blinking
             shortly after (see TIMING.settleToBlink in hero-terminal.js —
             keep the two in sync if these delays are retuned)
   ========================================================= */

/* No opacity/transform/display rule on .hero-content itself — it is
   always present, always laid out, always fully opaque as a container.
   Only pointer-events are gated here, so the still-invisible buttons
   underneath can't be focused or clicked before they've appeared. */
.hero-content {
    pointer-events: none;
}

.hero-content.is-revealing {
    pointer-events: auto;
}

@keyframes hero-fade-up {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* This is the element's real resting style — true from the moment the
   page paints, not something switched on right before the animation
   starts. There is nothing else in this codebase (see base.css) that
   also sets opacity/transform on these selectors, so this is the only
   source of truth for their hidden state. */
.hero-content h1,
.hero-content > p,
.hero-buttons > a {
    opacity: 0;
    transform: translateY(6px);
}

/* Animation (not transition) so this never competes with the
   buttons' own hover transitions on background/border/color. */
.hero-content.is-revealing h1 {
    animation: hero-fade-up 360ms var(--ease-hero) 240ms forwards;
}

.hero-content.is-revealing > p {
    animation: hero-fade-up 360ms var(--ease-hero) 480ms forwards;
}

.hero-content.is-revealing .hero-buttons > a {
    animation: hero-fade-up 360ms var(--ease-hero) forwards;
}

.hero-content.is-revealing .hero-buttons > a:nth-child(1) { animation-delay: 720ms; }
.hero-content.is-revealing .hero-buttons > a:nth-child(2) { animation-delay: 790ms; }
.hero-content.is-revealing .hero-buttons > a:nth-child(3) { animation-delay: 860ms; }

.terminal-body h1 {
    font-size: 30px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 16px;
    letter-spacing: 0.1px;
}

.terminal-body h1::after {
    content: "";
}

.terminal-body p {
    color: var(--text-dim);
    font-size: 14.5px;
    max-width: 600px;
}

.terminal-body p strong {
    color: var(--text);
    font-weight: 600;
}

.hero-buttons {
    display: flex;
    gap: 14px;
    margin-top: 28px;
}

.btn-primary,
.btn-secondary {
    display: inline-block;
    padding: 10px 20px;
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.2px;
    border-radius: var(--radius-sm);
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.btn-primary {
    background: var(--blue);
    color: #1e1e1e;
    border: 1px solid var(--blue);
}

.btn-primary::before {
    content: "";
}

.btn-primary:hover {
    background: var(--blue-bright);
    border-color: var(--blue-bright);
    color: #101010;
    box-shadow: 0 10px 18px rgba(0, 0, 0, 0.22);
    transform: translateY(-1px);
}

.btn-secondary {
    background: transparent;
    color: var(--text);
    border: 1px solid var(--border-bright);
}

.btn-secondary::before {
    content: "";
}

.btn-secondary:hover {
    border-color: var(--text-dim);
    background: var(--bg-panel-alt);
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

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

    .terminal {
        max-width: 100%;
    }

    .thm-stats {
        grid-template-columns: repeat(2, auto);
    }
}

@media (max-width: 720px) {
    .hero {
        padding: 40px 16px 48px;
    }

    .terminal-body {
        padding: 24px 20px 28px;
    }

    .terminal-body h1 {
        font-size: 24px;
    }

    .featured-card {
        padding: 24px 22px;
    }

    .hero-buttons {
        flex-wrap: wrap;
    }

    .thm-profile {
        flex-direction: column;
        align-items: flex-start;
        padding: 24px 22px;
    }

    .thm-stats {
        grid-template-columns: repeat(2, auto);
        gap: 18px 24px;
    }
}

@media (max-width: 600px) {
    .cards,
    .focus-grid {
        grid-template-columns: 1fr;
    }

    .boot-line {
        font-size: 12.5px;
    }
}