/* =================================
   INDEX — DRAVYA TITLE FONT ONLY
   ================================= */

@font-face {
    font-family: "DRAVYA-INDEX";
    src: url("assets/fonts/Minecraft.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


.index-dravya-title {
    font-family: "DRAVYA-INDEX" !important;
}


@font-face {
    font-family: "DRAVYA-DARK";
    src: url("assets/fonts/SuperKeys.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


:root {
    --dravya-font: "DRAVYA-DARK";
}


html,
body {
    font-family: "DRAVYA-DARK", sans-serif;
}


*,
*::before,
*::after {
    font-family: "DRAVYA-DARK", sans-serif;
}


/* ==========================================================
   02 — RESET
   ========================================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;

    font-family:
        var(--dravya-font) !important;
}


html,
body {
    width: 100%;
    height: 100%;

    margin: 0;
    padding: 0;

    overflow: hidden;
}


/* ==========================================================
   03 — BACKGROUND VIDEO
   ========================================================== */

.background-video {
    position: fixed;

    top: 0;
    left: 0;

    width: 100vw;
    height: 100vh;

    object-fit: cover;

    z-index: 0;

    pointer-events: none;
}


/* ==========================================================
   04 — BACKGROUND OVERLAY
   ========================================================== */

.background-overlay {
    position: fixed;

    inset: 0;

    width: 100%;
    height: 100%;

    background: transparent;

    z-index: 1;

    pointer-events: none;
}


/* ==========================================================
   05 — MAIN PAGE
   ========================================================== */

.dravyafield {
    position: relative;

    z-index: 2;

    width: 100vw;
    height: 100vh;

    display: flex;

    align-items: center;
    justify-content: center;

    padding: 40px;

    overflow: hidden;
}


/* ==========================================================
   06 — CONTENT
   ========================================================== */

.content {
    width: 100%;

    max-width: 1050px;

    text-align: center;
}


/* ==========================================================
   07 — DRAVYA
   ========================================================== */

.title {
    margin: 0;

    color: #ffffff;

    font-size:
        clamp(
            8rem,
            18vw,
            15rem
        );

    line-height: 0.8;

    font-weight: normal;

    letter-spacing:
        0.02em;
}


.index-dravya-title {
    display: block;

    text-align: center;

    width: 100%;

    margin-left: auto;
    margin-right: auto;
}


/* ==========================================================
   08 — TAGLINE
   ========================================================== */

.tagline {
    margin-top: 35px;

    margin-bottom: 60px;

    color: #ffffff;

    font-size:
        clamp(
            1.3rem,
            2vw,
            1.8rem
        );

    line-height: 1.2;

    letter-spacing:
        0.12em;

    opacity: 0.9;
}


/* ==========================================================
   09 — DESCRIPTION
   ========================================================== */

.description {
    width: 100%;

    max-width: 850px;

    margin:
        0 auto 60px auto;

    color: #ffffff;

    font-size:
        clamp(
            1.3rem,
            2vw,
            1.8rem
        );

    line-height: 1.65;

    letter-spacing:
        0.025em;

    opacity: 0.82;
}


/* ==========================================================
   10 — CREATIVE LINKS
   ========================================================== */

.creative-links {
    display: flex;

    align-items: center;
    justify-content: center;

    gap: 55px;

    margin-bottom: 48px;
}


.creative-links a {
    color: #ffffff;

    text-decoration: none;

    font-size: 1.3rem;

    letter-spacing: 1em;

    opacity: 0.9;

    transition:
        opacity 0.3s ease;
}


.creative-links a:hover {
    opacity: 0.5;
}


/* ==========================================================
   11 — SOCIAL LINKS
   ========================================================== */

.social-links {
    display: flex;

    align-items: center;
    justify-content: center;

    gap: 40px;
}


.social-links a {
    color: #ffffff;

    text-decoration: none;

    font-size: 0.9rem;

    letter-spacing: 0.16em;

    opacity: 0.7;

    transition:
        opacity 0.3s ease;
}


.social-links a:hover {
    opacity: 1;
}


/* ==========================================================
   12 — ENTER THE DRAVYA FIELD
   ========================================================== */

.field-entry {
    margin-top: 5px;

    text-align: center;
}


.enter-field {
    display: inline-block;

    padding: 24px 48px;

    border: 1px solid
        rgba(255, 255, 255, 0.55);

    color: #ffffff;

    text-decoration: none;

    font-size: 32px;

    letter-spacing: 5px;

    background:
        rgba(0, 0, 0, 0.18);

    transition:
        all 0.3s ease;
}


.enter-field:hover {
    background:
        rgba(20, 80, 150, 0.22);

    border-color:
        rgba(150, 210, 255, 0.75);

    box-shadow:
        0 0 30px
        rgba(80, 160, 255, 0.18);

    transform:
        translateY(-3px);
}


.enter-field:active {
    transform:
        translateY(0);
}


/* =========================================================
   /* =========================================================
   13 — MOBILE (FIXED TITLE CLIPPING & OVERFLOW)
   ========================================================= */

@media (max-width: 700px) {

    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        height: auto;
        min-height: 100svh;
    }


    /* ---------- MAIN INDEX CONTAINER ---------- */

    .dravyafield {
        width: 100%;
        max-width: 100%;
        min-height: 100svh;
        height: auto;

        padding: 30px 20px;

        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        overflow: visible;
        box-sizing: border-box;
    }


    .content {
        width: 100%;
        max-width: 100%;

        margin: auto 0;
        text-align: center;

        overflow: visible;
    }


    /* ---------- DRAVYA TITLE ---------- */

    .title,
    .index-dravya-title {
        position: static;

        width: 100%;
        max-width: 100%;

        margin: 0 auto;

        display: block;

        text-align: center;

        font-size: clamp(34px, 11vw, 56px);

        /* Increased line-height so Minecraft font glyphs are NEVER cut in half */
        line-height: 1.15 !important;

        letter-spacing: 0.04em;

        transform: none;
    }


    /* ---------- TAGLINE ---------- */

    .tagline {
        width: 100%;
        max-width: 100%;

        margin-top: 18px;
        margin-bottom: 26px;

        font-size: 0.95rem;

        line-height: 1.3;

        letter-spacing: 0.08em;

        text-align: center;
    }


    /* ---------- DESCRIPTION ---------- */

    .description {
        width: 100%;
        max-width: 90%;

        margin: 0 auto 28px auto;

        font-size: 0.88rem;

        line-height: 1.6;

        text-align: center;
    }


    /* ---------- FIELD ENTRY ---------- */

    .field-entry {
        width: 100%;
        max-width: 100%;

        margin: 0 auto 28px auto;

        text-align: center;

        box-sizing: border-box;
    }


    .enter-field {
        display: inline-block;

        width: auto;
        max-width: 100%;

        min-width: 0;

        padding: 14px 28px;

        font-size: 16px;

        letter-spacing: 3px;

        box-sizing: border-box;

        white-space: normal;

        text-align: center;
    }


    /* ---------- CREATIVE LINKS ---------- */

    .creative-links {
        width: 100%;
        max-width: 100%;

        display: flex;

        align-items: center;
        justify-content: center;

        flex-wrap: wrap;

        gap: 20px;

        margin-bottom: 26px;
    }


    .creative-links a {
        font-size: 0.85rem;

        letter-spacing: 0.11em;

        white-space: nowrap;
    }


    /* ---------- SOCIAL LINKS ---------- */

    .social-links {
        width: 100%;
        max-width: 100%;

        display: flex;

        align-items: center;
        justify-content: center;

        flex-wrap: wrap;

        gap: 22px;
    }


    .social-links a {
        font-size: 0.75rem;

        white-space: nowrap;
    }
}


/* =========================================================
   14 — SMALL PHONES (iPhone SE, small screens)
   ========================================================= */

@media (max-width: 420px) {

    .dravyafield {
        padding: 24px 16px;
    }


    .content {
        width: 100%;
        max-width: 100%;
    }


    .title,
    .index-dravya-title {
        font-size: clamp(30px, 9.5vw, 42px);

        line-height: 1.15 !important;

        text-align: center;
    }


    .tagline {
        font-size: 0.82rem;

        margin-top: 14px;
        margin-bottom: 20px;
    }


    .description {
        max-width: 94%;

        font-size: 0.8rem;

        line-height: 1.55;

        margin-bottom: 22px;
    }


    .enter-field {
        padding: 12px 22px;

        font-size: 14px;

        letter-spacing: 2px;
    }


    .creative-links {
        gap: 15px;

        margin-bottom: 20px;
    }


    .creative-links a {
        font-size: 0.72rem;
    }


    .social-links {
        gap: 18px;
    }


    .social-links a {
        font-size: 0.68rem;
    }
}


/* =========================================================
   MOBILE — FIELD + ENTRY SCREEN (PRESERVED)
   ========================================================= */

@media (max-width: 600px) {

    /* =====================================================
       ENTRY SCREEN
       ===================================================== */

    #entry {
        position: relative;

        width: 100%;
        max-width: 100%;

        height: 100svh;
        min-height: 100svh;

        overflow: hidden;

        box-sizing: border-box;
    }


    #entryVideo {
        position: absolute;

        top: 50%;
        left: 50%;

        width: 100%;
        height: 100%;

        max-width: none;

        transform: translate(-50%, -50%);

        object-fit: cover;
        object-position: center center;

        display: block;

        margin: 0;
        padding: 0;
    }


    /* =====================================================
       ENTRY TEXT
       ===================================================== */

    .entry-overlay {
        position: absolute;

        top: 50%;
        left: 50%;

        width: 100%;
        max-width: 100%;

        padding: 0 28px;

        box-sizing: border-box;

        transform: translate(-50%, -50%);

        text-align: center;

        overflow: hidden;
    }


    .entry-title {
        width: 100%;
        max-width: 100%;

        margin: 0 auto;

        font-size: clamp(24px, 7vw, 34px);

        line-height: 1.2 !important;

        letter-spacing: 0.18em;

        text-align: center;

        overflow-wrap: anywhere;
        word-break: normal;
    }


    .entry-subtitle {
        width: 100%;
        max-width: 100%;

        margin: 18px auto 0;

        font-size: 9px;

        line-height: 1.6;

        letter-spacing: 0.32em;

        text-align: center;

        overflow-wrap: anywhere;
    }


    /* =====================================================
       MAIN FIELD
       ===================================================== */

    .hero {
        position: relative;

        width: 100%;
        max-width: 100%;

        height: 100svh;
        min-height: 100svh;

        padding: 0;

        overflow: hidden;

        box-sizing: border-box;
    }


    /* =====================================================
       HERO CONTENT
       ===================================================== */

    .hero-content {
        position: absolute;

        top: 50%;
        left: 50%;

        width: 100%;
        max-width: 100%;

        padding: 0 28px;

        box-sizing: border-box;

        transform: translate(-50%, -50%);

        text-align: center;

        overflow: hidden;
    }


    .hero-kicker {
        width: 100%;
        max-width: 100%;

        margin: 0 auto 25px;

        font-size: 9px;

        line-height: 1.4;

        letter-spacing: 0.38em;

        text-align: center;

        overflow-wrap: anywhere;
    }


    .hero h1 {
        width: 100%;
        max-width: 100%;

        margin: 0 auto 28px;

        padding: 0;

        font-size: clamp(40px, 14vw, 76px);

        line-height: 1.15 !important;

        letter-spacing: 0.05em;

        text-align: center;

        overflow-wrap: anywhere;
    }


    .hero-description {
        width: 100%;
        max-width: 330px;

        margin: 0 auto;

        font-size: 13px;

        line-height: 1.7;

        text-align: center;

        overflow-wrap: anywhere;
    }


    /* =====================================================
       SCROLL INDICATOR
       ===================================================== */

    .scroll-indicator {
        position: absolute;

        bottom: 28px;
        left: 50%;

        width: 100%;
        max-width: 100%;

        padding: 0 20px;

        box-sizing: border-box;

        transform: translateX(-50%);

        text-align: center;

        font-size: 8px;

        letter-spacing: 0.28em;

        overflow: hidden;
    }
}