:root {

    --navy: #17233f;

    --navy-ink: #101a31;

    --navy-deep: #0c1428;
    --maroon: #8e0f1a;

    --maroon-deep: #76080c;

    --gold-hi: #f7e6a8;
    --gold-lt: #ead184;
    --gold: #d6ae52;
    --gold-md: #c99e43;
    --gold-dp: #8a6a24;

    --gold-type: #f8d038;
    --cream: #f3eadb;
    --white: #fffaf0;

    --rust: #8b402c;
    --rust-deep: #743522;

    --foil: linear-gradient(118deg, var(--gold-md) 0%, var(--gold-lt) 48%, #cda248 100%);
    --foil-lit: linear-gradient(118deg, var(--gold-lt) 0%, var(--gold-hi) 45%, var(--gold) 100%);

    --panel: var(--cream);
    --panel-ink: var(--navy);
    --panel-body: #17233fc2;
    --panel-soft: #17233f96;
    --panel-rule: #17233f1f;
    --panel-rule-gold: #c99e4359;
    --panel-hover: #17233f08;

    --rule-gold: #d6ae5238;
    --rule-gold-strong: #d6ae5266;
    --rule-ink: #17233f24;

    --title: "Futura Md BT", "Noto Sans Gujarati", "Century Gothic", "Avenir Next", "Segoe UI", sans-serif;
    --sub: "Futura Md BT", "Noto Sans Gujarati", "Century Gothic", "Avenir Next", "Segoe UI", sans-serif;
    --body: "Futura Md BT", "Noto Sans Gujarati", "Century Gothic", "Avenir Next", "Segoe UI", sans-serif;
    --guj: "Noto Sans Gujarati", sans-serif;

    --pad: clamp(22px, 5vw, 76px);
    --nav-h: 84px;
}

* {
    box-sizing: border-box
}

body {

    max-width: 100%;
    overflow-x: hidden;
    margin: 0;
    font-family: var(--body);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility
}

img {
    display: block;
    max-width: 100%
}

a {
    color: inherit;
    text-decoration: none
}

button,
input,
select,
textarea {
    font: inherit
}

.bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: var(--rust-deep) url('../img/gihad-bg-texture.jpg') center center / cover no-repeat;

    transform: translateZ(0);
    backface-visibility: hidden
}

.bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(115% 75% at 10% -12%, #d6ae5230, transparent 58%),
        radial-gradient(95% 68% at 102% 108%, #76080c40, transparent 60%),
        radial-gradient(70% 50% at 50% 50%, transparent 40%, #2c0f0733 100%)
}

body>header,
body>main,
body>footer {
    position: relative;
    z-index: 1
}

.reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .85s ease, transform .85s cubic-bezier(.2, .7, .3, 1)
}

.reveal.in {
    opacity: 1;
    transform: none
}

@media (prefers-reduced-motion: reduce) {

    .reveal,
    .reveal.in {
        opacity: 1;
        transform: none;
        transition: none
    }

    * {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important
    }
}

.scroll-line {
    position: fixed;
    top: 0;
    left: 0;
    height: 2px;
    width: 100%;
    z-index: 60;
    transform: scaleX(var(--p, 0));
    transform-origin: 0 50%;
    background: var(--foil);
    box-shadow: 0 0 14px #d6ae5277;
    pointer-events: none
}