/* Qrious Pitch Deck — Reveal.js theme override via framework variables */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Pacifico&display=swap');

/* ── Override Reveal.js theme variables ───────── */

:root {
    --r-background-color: #0a0a0a;
    --r-main-font: 'Poppins', sans-serif;
    --r-main-font-size: 24px;
    --r-main-color: #FAFAF8;
    --r-heading-font: 'Poppins', sans-serif;
    --r-heading-color: #FAFAF8;
    --r-heading-line-height: 1.15;
    --r-heading-letter-spacing: -0.02em;
    --r-heading-text-transform: none;
    --r-heading-text-shadow: none;
    --r-heading-font-weight: 700;
    --r-heading1-size: 2.8em;
    --r-heading2-size: 1.8em;
    --r-heading3-size: 1.1em;
    --r-link-color: #EF4444;
    --r-link-color-hover: #dc2626;
    --r-selection-background-color: rgba(239,68,68,0.3);
    --r-selection-color: #fff;

    /* Qrious brand */
    --q-bg: #0a0a0a;
    --q-white: #FAFAF8;
    --q-gray: #999;
    --q-red: #EF4444;
    --q-red-dark: #dc2626;
    --ctx-romance: #FF7F50;
    --ctx-community: #42b8d2;
    --ctx-career: #D4AF37;
    --ctx-adventure: #EF4444;
    --ctx-learn: #6060ba;
    --ctx-create: #DC2075;
    --ctx-family: #88B04B;
}

/* ── Slide layout — let Reveal.js handle positioning ── */

.reveal .slides section {
    text-align: left;
}

.reveal h3 {
    color: var(--q-gray);
    font-weight: 600;
}

.reveal p {
    line-height: 1.5;
    color: rgba(255,255,255,0.85);
}

/* ── Cover ────────────────────────────────────── */

.cover {
    text-align: center !important;
}

.cover::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%,-50%);
    width: 700px; height: 700px;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(239,68,68,0.07) 0%, transparent 70%);
    pointer-events: none;
}

/* ── Global ambient orbit background ───────────── */

.orbit-bg {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
    background: #0a0a0a;
}

.orbit-bg .orbit-dot {
    position: absolute;
    border-radius: 50%;
    top: 50%; left: 50%;
}

.orbit-bg .orbit-dot:nth-child(1){width:300px;height:300px;background:var(--ctx-romance);filter:blur(120px);opacity:0.18;animation:o1 80s linear infinite}
.orbit-bg .orbit-dot:nth-child(2){width:250px;height:250px;background:var(--ctx-community);filter:blur(100px);opacity:0.15;animation:o2 90s linear infinite}
.orbit-bg .orbit-dot:nth-child(3){width:280px;height:280px;background:var(--ctx-career);filter:blur(110px);opacity:0.14;animation:o3 100s linear infinite}
.orbit-bg .orbit-dot:nth-child(4){width:260px;height:260px;background:var(--ctx-adventure);filter:blur(105px);opacity:0.16;animation:o4 85s linear infinite}
.orbit-bg .orbit-dot:nth-child(5){width:240px;height:240px;background:var(--ctx-learn);filter:blur(95px);opacity:0.13;animation:o5 95s linear infinite}
.orbit-bg .orbit-dot:nth-child(6){width:270px;height:270px;background:var(--ctx-create);filter:blur(100px);opacity:0.15;animation:o6 105s linear infinite}
.orbit-bg .orbit-dot:nth-child(7){width:290px;height:290px;background:var(--ctx-family);filter:blur(115px);opacity:0.17;animation:o7 88s linear infinite}

@keyframes o1{from{transform:rotate(0deg) translateX(350px) rotate(0deg)}to{transform:rotate(360deg) translateX(350px) rotate(-360deg)}}
@keyframes o2{from{transform:rotate(51deg) translateX(300px) rotate(-51deg)}to{transform:rotate(411deg) translateX(300px) rotate(-411deg)}}
@keyframes o3{from{transform:rotate(102deg) translateX(380px) rotate(-102deg)}to{transform:rotate(462deg) translateX(380px) rotate(-462deg)}}
@keyframes o4{from{transform:rotate(154deg) translateX(320px) rotate(-154deg)}to{transform:rotate(514deg) translateX(320px) rotate(-514deg)}}
@keyframes o5{from{transform:rotate(205deg) translateX(360px) rotate(-205deg)}to{transform:rotate(565deg) translateX(360px) rotate(-565deg)}}
@keyframes o6{from{transform:rotate(257deg) translateX(280px) rotate(-257deg)}to{transform:rotate(617deg) translateX(280px) rotate(-617deg)}}
@keyframes o7{from{transform:rotate(308deg) translateX(400px) rotate(-308deg)}to{transform:rotate(668deg) translateX(400px) rotate(-668deg)}}

.cover-logo {
    width: min(550px, 80vw);
    height: auto;
    filter: brightness(0) invert(1) drop-shadow(0 4px 20px rgba(255,255,255,0.15));
    position: relative;
    z-index: 2;
    margin-bottom: 0.15em;
}

.neon-stay {
    font-family: 'Pacifico', cursive;
    font-size: 3.6em;
    color: #fff;
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 20px #EF4444,
        0 0 30px #EF4444, 0 0 40px #EF4444, 0 0 60px #EF4444;
    position: relative;
    z-index: 2;
    margin-bottom: 0.1em;
    animation: neonPulse 4s ease-in-out infinite;
}

@keyframes neonPulse {
    0%,100%{opacity:1}
    50%{opacity:0.85;text-shadow:0 0 5px #fff,0 0 10px #fff,0 0 15px #EF4444,0 0 25px #EF4444}
}

.cover .tagline {
    font-size: 1.35em;
    color: rgba(255,255,255,0.5);
    font-weight: 300;
    margin-bottom: 1.5em;
    position: relative;
    z-index: 2;
}

.cover .meta {
    font-size: 0.6em;
    color: rgba(255,255,255,0.3);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    position: relative;
    z-index: 2;
}

/* ── Stats ────────────────────────────────────── */

.stat-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 30px; margin-top: 1em; }
.stat-grid.two-col { grid-template-columns: repeat(2,1fr); }
.stat { text-align: center; }
.stat .number { font-size: 2.6em; font-weight: 700; color: var(--q-red); line-height: 1; margin-bottom: 0.1em; }
.stat .label { font-size: 0.7em; color: var(--q-gray); line-height: 1.3; }

/* ── Context Icon Cards ───────────────────────── */

.context-cards {
    display: flex;
    gap: 14px;
    margin-top: 1em;
    justify-content: center;
}

.ctx-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 120px;
    padding: 20px 8px 16px;
    border-radius: 14px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    text-align: center;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.ctx-card i,
.ctx-card svg {
    width: 28px;
    height: 28px;
    stroke-width: 1.5;
    margin-bottom: 10px;
}

.ctx-card .ctx-name {
    font-weight: 600;
    font-size: 0.7em;
    color: var(--q-white);
    margin-bottom: 2px;
}

.ctx-card .ctx-tag {
    font-size: 0.48em;
    color: var(--q-gray);
    font-weight: 400;
}

.ctx-card.romance    svg{color:var(--ctx-romance)}
.ctx-card.romance    {border-color:rgba(255,127,80,0.2);box-shadow:0 0 20px rgba(255,127,80,0.08)}
.ctx-card.community  svg{color:var(--ctx-community)}
.ctx-card.community  {border-color:rgba(66,184,210,0.2);box-shadow:0 0 20px rgba(66,184,210,0.08)}
.ctx-card.career     svg{color:var(--ctx-career)}
.ctx-card.career     {border-color:rgba(212,175,55,0.2);box-shadow:0 0 20px rgba(212,175,55,0.08)}
.ctx-card.adventure  svg{color:var(--ctx-adventure)}
.ctx-card.adventure  {border-color:rgba(239,68,68,0.2);box-shadow:0 0 20px rgba(239,68,68,0.08)}
.ctx-card.learn      svg{color:var(--ctx-learn)}
.ctx-card.learn      {border-color:rgba(96,96,186,0.2);box-shadow:0 0 20px rgba(96,96,186,0.08)}
.ctx-card.create     svg{color:var(--ctx-create)}
.ctx-card.create     {border-color:rgba(220,32,117,0.2);box-shadow:0 0 20px rgba(220,32,117,0.08)}
.ctx-card.family     svg{color:var(--ctx-family)}
.ctx-card.family     {border-color:rgba(136,176,75,0.2);box-shadow:0 0 20px rgba(136,176,75,0.08)}

/* ── Comparison Table ─────────────────────────── */

.compare-table { width: 100%; border-collapse: collapse; margin-top: 0.8em; font-size: 0.7em; }
.compare-table th { text-align: left; padding: 8px 12px; border-bottom: 2px solid var(--q-red); font-weight: 600; }
.compare-table td { padding: 7px 12px; border-bottom: 1px solid rgba(255,255,255,0.08); color: var(--q-gray); }
.compare-table tr td:first-child { font-weight: 600; color: var(--q-white); }
.compare-table .check { color: #88B04B; font-weight: 700; }
.compare-table .cross { color: rgba(255,255,255,0.25); }
.compare-table .highlight-col { background: rgba(239,68,68,0.06); }

/* ── Layouts ──────────────────────────────────── */

.two-col-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; margin-top: 0.8em; }

.pillar-card {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    padding: 24px;
}

.pillar-card h3 { color: var(--q-white); margin-bottom: 0.3em; }
.pillar-card p { font-size: 0.8em; color: var(--q-gray); }
.pillar-card ul { margin-top: 0.4em; }
.pillar-card ul li { font-size: 0.78em; margin-bottom: 0.3em; }

/* ── Timeline ─────────────────────────────────── */

.timeline { display: flex; margin-top: 1.2em; position: relative; }
.timeline::before { content:''; position: absolute; top: 18px; left: 0; right: 0; height: 2px; background: var(--q-red); opacity: 0.4; }

.timeline-item { flex: 1; text-align: center; position: relative; padding-top: 36px; }
.timeline-item::before { content:''; position: absolute; top: 10px; left: 50%; transform: translateX(-50%); width: 16px; height: 16px; border-radius: 50%; background: var(--q-red); border: 3px solid var(--q-bg); box-shadow: 0 0 10px rgba(239,68,68,0.3); }
.timeline-item .period { font-weight: 700; font-size: 0.8em; color: var(--q-red); margin-bottom: 3px; }
.timeline-item .detail { font-size: 0.62em; color: var(--q-gray); line-height: 1.4; }

/* ── Team ─────────────────────────────────────── */

.team-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 1.2em; }
.team-card { text-align: center; padding: 24px; }

.team-card .avatar {
    width: 90px; height: 90px; border-radius: 50%;
    background: rgba(239,68,68,0.15);
    border: 2px solid rgba(239,68,68,0.3);
    margin: 0 auto 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.8em; font-weight: 700; color: var(--q-red);
}

.team-card .name { font-weight: 700; font-size: 1.1em; margin-bottom: 2px; }
.team-card .role { color: var(--q-red); font-weight: 500; font-size: 0.8em; margin-bottom: 8px; }
.team-card .bio { font-size: 0.7em; color: var(--q-gray); line-height: 1.5; }

/* ── Funding ──────────────────────────────────── */

.funding-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-top: 1.2em; }

.funding-box {
    background: rgba(239,68,68,0.06);
    border: 1px solid rgba(239,68,68,0.15);
    border-radius: 12px;
    padding: 28px;
    text-align: center;
}

.funding-box .amount { font-size: 2.2em; font-weight: 700; margin-bottom: 4px; }
.funding-box .desc { font-size: 0.75em; color: var(--q-gray); }

.use-of-funds { margin-top: 1.2em; }
.fund-row { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.fund-bar { height: 20px; border-radius: 3px; background: linear-gradient(90deg, var(--q-red), var(--q-red-dark)); opacity: 0.7; }
.fund-label { font-size: 0.72em; color: var(--q-gray); min-width: 120px; }
.fund-pct { font-weight: 700; font-size: 0.78em; min-width: 36px; }

/* ── Lists ────────────────────────────────────── */

.reveal ul { list-style: none; padding: 0; margin: 0.5em 0; }

.reveal ul li {
    padding-left: 1.1em;
    position: relative;
    margin-bottom: 0.35em;
    line-height: 1.45;
    font-size: 0.82em;
    color: rgba(255,255,255,0.8);
}

.reveal ul li::before {
    content: '';
    position: absolute;
    left: 0; top: 0.5em;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--q-red);
    opacity: 0.6;
}

/* ── Red Thread Canvas ────────────────────────── */

#red-thread {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    z-index: 1;
    pointer-events: none;
}

/* ── Slide Number & Progress ──────────────────── */

.reveal .slide-number { font-size: 12px; color: rgba(255,255,255,0.2); background: transparent; }
.reveal .progress { height: 3px; }
.reveal .progress span { background: var(--q-red); }

/* ── Utility ──────────────────────────────────── */

.highlight { color: var(--q-red); font-weight: 600; }
.small { font-size: 0.65em; color: var(--q-gray); }
.subtitle { font-size: 1.05em; color: var(--q-gray); font-weight: 300; }

.confidential-footer {
    position: fixed;
    bottom: 24px;
    right: 32px;
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.08);
    z-index: 100;
    pointer-events: none;
}