/* GLOBAL */
/* (Font) */
@font-face {
  font-family: 'Phantom Sans';
  src:
    url('https://assets.hackclub.com/fonts/Phantom_Sans_0.7/Regular.woff') format('woff'),
    url('https://assets.hackclub.com/fonts/Phantom_Sans_0.7/Regular.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'Phantom Sans';
  src:
    url('https://assets.hackclub.com/fonts/Phantom_Sans_0.7/Bold.woff') format('woff'),
    url('https://assets.hackclub.com/fonts/Phantom_Sans_0.7/Bold.woff2') format('woff2');
  font-weight: bold;
  font-display: swap;
}
/* (Reset) */
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Phantom Sans', Arial, sans-serif;
}
body{
    background:#e5e5e5;
    color:#111;
    overflow-y:scroll;
    scrollbar-width:none;
    transition:.5s;
}
body::-webkit-scrollbar{display:none;}
/* (Dark Mode) */
#forgeToggle{
    position:fixed;
    bottom:25px;
    left:25px;
    width:55px;
    height:55px;
    border-radius:50%;
    background:#222;
    color:#fff;
    font-size:26px;
    cursor:pointer;
    box-shadow:0 0 10px rgba(255,120,0,.6);
    z-index:25;
}
.dark-mode{
    background:#0b0b0b;
    color:#eee;
}
.dark-mode .navbar{
    background:black;
    color:white;
}
.dark-mode .nav-buttons a{
    color:white;
}
.dark-mode footer{
    background:#333;
    color:white;
}
.dark-mode .footer-links a{
    color:white;
}
.dark-mode .partner-logo-light{
    display:none;
}
.dark-mode .partner-logo-dark{
    display:block;
}
/* [Index - Dark Mode] */
.dark-mode .project-title{
    color: white;
}
.dark-mode .subtitle{
    color:#aaa;
}
.dark-mode .btn{
    color: white;
}
.dark-mode .labels span{
    color: white;
}
/* [About - Dark Mode] */
.dark-mode .forge-step{background:#151515;color:white;}
.dark-mode .review-stage{background:#111;}
.dark-mode .count-card{
    background:linear-gradient(145deg,#111,#0f0f0f);
    color:white;
}
/* Keep about page h1 headings dark in light mode, white in dark mode */
.how_it_works-section h1,
.counts-section h1,
.review-section h1 {
    color: #111;
}
.dark-mode .how_it_works-section h1,
.dark-mode .counts-section h1,
.dark-mode .review-section h1 {
    color: #fff;
}
/* Keep about page h2 and p black in light mode, white in dark mode */
.how_it_works-section h2,
.counts-section h2,
.review-section h2,
.how_it_works-section p,
.counts-section p,
.review-section p {
    color: #111;
}
.dark-mode .how_it_works-section h2,
.dark-mode .counts-section h2,
.dark-mode .review-section h2,
.dark-mode .how_it_works-section p,
.dark-mode .counts-section p,
.dark-mode .review-section p {
    color: #eee;
}
/* (Image Handling) */
img { /* remove if buttons nested */
    -webkit-user-drag: none;
    user-select: none;
    pointer-events: none;
}
/* (NavBar) */
.navbar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:15px 90px 15px 40px;
    background:white;
    color:black;
    box-shadow:0 4px 10px rgba(0,0,0,.6);
    flex-wrap:wrap;
}
.nav-left{
    display:flex;
    align-items:center;
    gap:15px;
}
.logo{
    width:50px;
    border-radius:50%;
}
.nav-buttons a{
    color:black;
    text-decoration:none;
    margin-left:12px;
    padding:8px 15px;
    border-radius:4px;
    transition:.25s;
}
.nav-buttons a:hover{
    background:#ff4d4d;
    box-shadow:0 0 8px rgba(255,80,0,.6);
}
/* (Mobile + Burger)*/
.burger{
    display:none;
    flex-direction:column;
    gap:5px;
    cursor:pointer;
    z-index:40;
    margin-left:auto;
}
.burger span{
    width:25px;
    height:3px;
    background:#111;
    transition: all 0.3s ease;
    transform-origin: center;
}
.dark-mode .burger span{
    background:white;
}
.burger.active span:nth-child(1){
    transform: translateY(8px) rotate(45deg);
}
.burger.active span:nth-child(2){
    opacity: 0;
}
.burger.active span:nth-child(3){
    transform: translateY(-8px) rotate(-45deg);
}
@media (max-width:768px){
    .navbar{
        padding:15px 20px;
    }
    .nav-buttons{
        position:relative;
        order:3;
        flex-basis:100%;
        max-height:0;
        overflow:hidden;
        background:#FFF;
        width:100%;
        flex-direction:column;
        padding:0;
        transition:max-height 0.3s ease;
    }

    .dark-mode .nav-buttons{
        background:black;
    }

    .nav-buttons.active{
        max-height:500px;
        padding:20px;
    }
    .nav-buttons a {
        padding: 15px 20px;
        margin: 10px 0;
        display: block;
        text-align: left;
        color:black;
    }
    .dark-mode .nav-buttons a {
        color:white;
    }
    .burger{display:flex;}
}
/* (Footer) */
footer{
    background:#CCC;
    color:black;
    padding:40px;
}
.footer-top{
    display:flex;
    align-items:center;
    gap:20px;
    max-width:900px;
    margin:auto;
    margin-bottom:25px;
    position:relative;
    height:120px;
}
.partner-logo-light{
    display:block;
    width:120px;
}
.partner-logo-dark{
    display:none;
    width:120px;
}
.footer-links{text-align:center;}
.footer-links a{
    margin:0 12px;
    color:black;
    text-decoration:none;
}
/* (Particles) */
#embers,#sparks,#forgeFire{
    position:fixed;
    inset:0;
    pointer-events:none;
}
#forgeFire{z-index:-3;}
#embers{z-index:-2;}
#sparks{z-index:10;}
/* (Sword Scrollbar) */
#swordScroll{
    position:fixed;
    right:18px;
    top:0;
    height:100%;
    width:40px;
    display:flex;
    justify-content:center;
    z-index:20;
}
#scrollSword{
    position:absolute;
    width:35px;
    left:50%;
    transform:translate(-50%,0);
    cursor:pointer;
}
#scrollSword {
    pointer-events: auto;
}
#scrollScabbard{
    position:fixed;
    right:14px;
    bottom:0;
    z-index:21;
    pointer-events:none;
}
#scrollScabbard img{
    height:140px;
}
@media (max-width:768px){
    #swordScroll,
    #scrollScabbard {
        display:none;
    }
}
/* Index Page */
/* (Landing) */
.landing{
    height:600px;
    background:url("images/smithy.jpg") center/cover no-repeat;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    position:relative;
}
.landing::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(to top, rgba(0,0,0,.7), transparent);
}
.landing-content{
    position:relative;
    z-index:2;
}
.project-title{
    font-size:52px;
    color:black;
    text-shadow:0 0 12px rgba(255,120,0,.5);
}
.subtitle{
    color:#111;
    margin-bottom:20px;
}
/* (Buttons + Labels) */
.btn{
    position: relative;
    padding: 14px 30px;
    border: none;
    border-radius: 12px;
    font-weight: bold;
    color: black;
    cursor: pointer;
    background: linear-gradient(145deg, #0a3dff, #00cfff);

    box-shadow:
        0 6px 0 #0729a6,
        0 0 10px rgba(0,140,255,0.6),
        0 0 20px rgba(0,200,255,0.4);

    transition: all 0.2s ease;
}
.btn:hover{
    transform:translateY(-3px);
    
    box-shadow:
        0 8px 0 #0729a6,
        0 0 15px rgba(0,180,255,0.9),
        0 0 30px rgba(0,220,255,0.7),
        0 0 45px rgba(0,255,255,0.5);
}
.btn:active{
    transform: translateY(4px);

    box-shadow:
        0 2px 0 #0729a6,
        0 0 8px rgba(0,140,255,0.5);
}
.btn::after{
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 12px;
    background: radial-gradient(circle, rgba(0,255,255,0.25), transparent 70%);
    opacity: 0.6;
    transition: opacity 0.3s;
}
.btn:hover::after{
    opacity: 1;
}
.buttons{
    margin-top: 50px;
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
}
.labels span{
    position: relative;
    display: inline-block;
    padding: 8px 18px;
    margin: 6px;
    border-radius: 999px;

    font-weight: bold;
    color: #111;

    background: linear-gradient(145deg, #ff7a00, #ffb347);

    box-shadow:
        0 0 6px rgba(255,140,0,0.6),
        0 0 12px rgba(255,90,0,0.4),
        inset 0 0 6px rgba(255,255,255,0.2);

    transition: all 0.25s ease;
}
.labels span:hover{
    box-shadow:
        0 0 10px rgba(255,140,0,0.9),
        0 0 20px rgba(255,80,0,0.7),
        0 0 30px rgba(255,60,0,0.5);
    transform: translateY(-2px);
}
/* (Process - Briefing) */
.process{
    padding:80px 40px;
    background:
    linear-gradient(rgba(0,0,0,.6),rgba(0,0,0,.6)),
    url("images/forge-bg.jpg") center/cover no-repeat;
    color:white;
    text-align:center;
}
.process-title{
    font-size:40px;
    margin-bottom:50px;
}
.process-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    gap:40px;
}
.process-card{
    background:#ffffff22;
    padding:30px;
    border-radius:10px;
    backdrop-filter:blur(4px);
    transition:.3s;
}
.process-card:hover{
    transform:translateY(-6px);
    background:#ffffff33;
}
.process-card img{
    width:140px;
    margin-bottom:15px;
}
/* Dashboard Page - N/A (Currently Uses Landing & Buttons from Index Page)*/
/* About Page */
.forge-steps,
.counts-grid,
.review {
    margin-top: 30px;
    gap: 30px;
}
.forge-step,
.count-card,
.review-stage {
    background: rgba(20,20,20,0.85);
    color: white;
    backdrop-filter: blur(6px);
    padding: 25px;
    border: 1px solid rgba(255,140,0,0.4);
    box-shadow: 0 0 20px rgba(0,0,0,0.5);
}
.forge-step:hover,
.count-card:hover {
    transform: translateY(-5px);
}
.section-bg {
    position: relative;
    overflow: hidden;
}
.section-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.6);
    z-index: 0;
}
.section-bg > * {
    position: relative;
    z-index: 1;
}
/* (How It Works) */
.how_it_works-section h1 {
    font-size: 2.5rem;
    margin-bottom: 30px;
    text-align: center;
}
.how_it_works-section{
    padding: 80px 10%;
    margin: auto;
    display:flex;
    align-items:center;
    text-align:center;
    position:relative;
    flex-direction:column;

    background:#FFF;
}
.how_it_works-section::before{
    content:"";
    position:absolute;
    inset:0;
    display:none;
}
.dark-mode .how_it_works-section {
    background: #111;
}
.how_it_works-section > *{
    position:relative;
    z-index:1;
}
.forge-steps{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:50px;
    margin-top:60px;
}
.row-top{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap:50px;
}
.row-bottom{
    display:flex;
    justify-content:center;
    gap:70px;
}
.forge-step:nth-child(4){
    grid-column: 1 / 2;
    justify-self: end;
}
.forge-step:nth-child(5){
    grid-column: 3 / 4;
    justify-self: start;
}
.forge-step{
    background:#FFF;
    border: 2px dotted rgba(255, 140, 0, 0.6);
    border-radius: 14px;
    padding:25px;
    width:280px;
    box-shadow:0 10px 25px rgba(0,0,0,0.4);
    transition:.3s;
    position:relative;
}
.dark-mode .forge-step {
    background: #1a1a1a;
    color: white;
}
.forge-step:hover{
    transform:scale(1.05);
    box-shadow:0 20px 40px rgba(255,120,0,0.25);
}
/* [Nail] */
.pin{
    position:absolute;
    top:-12px;
    left:50%;
    transform:translateX(-50%);
    width:22px;
    height:22px;
    background:radial-gradient(circle at 30% 30%, #bbb, #444);
    border-radius:50%;
}
/* (What Counts) */
.counts-section h1 {
    font-size: 2.5rem;
    margin-bottom: 30px;
    text-align: center;
}
.counts-section{
    padding: 80px 10%;
    margin: auto;
    display:flex;
    align-items:center;
    text-align:center;
    position:relative;
    flex-direction:column;

    background:#FFF;
}
.counts-section::before{
    content:"";
    position:absolute;
    inset:0;
    display:none;
}
.dark-mode .counts-section {
    background: #111;
}
.counts-section > *{
    position:relative;
    z-index:1;
}
.counts-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:30px;
}
.count-card{
    background: #FFF;
    border: 2px dotted rgba(255, 140, 0, 0.6);
    border-radius: 14px;
    padding:30px;
    border-radius:12px;
    color:black;
    transition:.3s;
}
.dark-mode .count-card {
    background: #1a1a1a;
    color: white;
}
.count-card:hover{
    transform:translateY(-8px);
    box-shadow:0 0 20px rgba(255,120,0,0.3);
}
/* (Review Process) */
.review-section h1 {
    font-size: 2.5rem;
    margin-bottom: 30px;
    text-align: center;
}
.review-section{
    padding: 80px 10%;
    margin: auto;
    display:flex;
    align-items:center;
    text-align:center;
    position:relative;
    flex-direction:column;

    background:#FFF;
}
.review-section::before{
    content:"";
    position:absolute;
    inset:0;
    display:none;
}
.dark-mode .review-section {
    background: #111;
}
.review-section > *{
    position:relative;
    z-index:1;
}
.review {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}
.review-stage {
    border: 2px dotted rgba(255, 140, 0, 0.6);
    background: #FFF;
    border-radius: 14px;
    padding: 25px;
    width: 100%;
    max-width: 600px;
    text-align: center;
    position: relative;
    color: black;
}
.dark-mode .review-stage {
    background: #1a1a1a;
    color: white;
}
.review-stage::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 14px;
    box-shadow: 0 0 20px rgba(255, 120, 0, 0.15);
    pointer-events: none;
}
/* [Arrow] */
.arrow{
    display:flex;
    align-items:center;
    justify-content:center;
}
.arrow::before{
    content: "↓";
    font-size:40px;
    color:#ff7a00;
    display:inline-block;
    animation:floatY 2s infinite;
}
/* (Configuration - About) */
@media (max-width:768px){
    .row-top,
    .row-bottom{
        display:flex;
        flex-direction:column;
        align-items:center;
    }
}
@keyframes floatY{
    0%,100%{transform:translateY(0);}
    50%{transform:translateY(10px);}
}
@media (min-width:769px){
    .review{
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }

    .review-stage{
        max-width: 400px;
    }

    .arrow::before{
        content: "→";
        animation:floatX 2s infinite;
    }
}
@keyframes floatX{
    0%,100%{transform:translateX(0);}
    50%{transform:translateX(10px);}
}
/* (Sword Divider) */
.sword-divider {
    width: 100%;
    overflow: hidden;
    background: #FFF;
    padding: 20px 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.dark-mode .sword-divider {
    background: #111;
}
.track {
    display: flex;
    width: max-content;
    gap: 0;
    will-change: transform;
}
.sword-divider-scroll {
    display: flex;
    gap: 0;
    flex: none;
    align-items: center;
}
.sword-divider-scroll img {
    height: 1.2em;
    flex-shrink: 0;
    pointer-events: none;
    display: block;
}
/* FAQ Page */
.faq-section{
    padding:80px 10%;
    max-width:1100px;
    margin:auto;
    text-align:center;
}
.faq-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:25px;
    margin-top:40px;
}
.faq-card{
    background:rgba(255,255,255,0.05);
    backdrop-filter:blur(8px);
    border:2px dotted rgba(255,140,0,0.6);
    border-radius:14px;
    overflow:hidden;
    transition:.3s;
}
.faq-card:hover{
    box-shadow:0 0 20px rgba(255,120,0,0.25);
}
.faq-question{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:20px;
    cursor:pointer;
    font-weight:bold;
}
.faq-answer{
    max-height:0;
    overflow:hidden;
    padding:0 20px;
    transition:max-height .4s ease, padding .3s ease;
    text-align:left;
}
.faq-card.active{
    box-shadow:0 0 25px rgba(255,120,0,0.4);
}
.faq-card.active .faq-answer{
    max-height:300px;
    padding:20px;
}
.faq-icon{
    width:28px;
    height:28px;
    position:relative;
}
.faq-icon::before{
    content:"⚔️";
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:.3s;
}
.faq-card.active .faq-icon::before{
    content:"🛠️";
    transform:rotate(180deg) scale(1.2);
}
/* (Configuration - FAQ) */
@media (min-width:769px){
    .faq-grid{
        grid-template-columns:1fr 1fr;
    }
}