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

@font-face {
    font-family: "Beaufort";
    src: url("../fonts/beaufort/beaufortforlol-bold.woff") format("woff");
    src: url("../fonts/beaufort/beaufortforlol-bold.woff2") format("woff2");

    font-weight: bold;
    font-style: bold;
}

@font-face {
    font-family: "Beaufort";
    src: url("../fonts/beaufort/beaufortforlol-regular.woff") format("woff");
    src: url("../fonts/beaufort/beaufortforlol-regular.woff2") format("woff2");

    font-weight: normal;
    font-style: normal;
}

:root {
    --font-1: "Inter", sans-serif;
    /* monospace
    */
    --font-mono: Consolas, "Andale Mono", Courier, "Courier New", monospace;
}

/* ------------------------------------------------------------------- 
 * ## colors
 * ------------------------------------------------------------------- */
:root {
    /* color-1(#034E4A)
     * color-2(#A33B20)
     */
    --color-1: hsla(177, 93%, 16%, 1);
    --color-2: hsla(12, 67%, 38%, 1);

    /* theme color variations
     */
    --color-1-lighter: hsla(177, 93%, 36%, 1);
    --color-1-light: hsla(177, 93%, 26%, 1);
    --color-1-dark: hsla(177, 93%, 10%, 1);
    --color-1-darker: hsla(177, 93%, 5%, 1);
    --color-2-lighter: hsla(12, 67%, 58%, 1);
    --color-2-light: hsla(12, 67%, 48%, 1);
    --color-2-dark: hsla(12, 67%, 28%, 1);
    --color-2-darker: hsla(12, 67%, 18%, 1);

    /* feedback colors
     * color-error(#ffd1d2), color-success(#c8e675), 
     * color-info(#d7ecfb), color-notice(#fff099)
     */
    --color-error: hsla(359, 100%, 91%, 1);
    --color-success: hsla(76, 69%, 68%, 1);
    --color-info: hsla(205, 82%, 91%, 1);
    --color-notice: hsla(51, 100%, 80%, 1);
    --color-error-content: hsla(359, 50%, 50%, 1);
    --color-success-content: hsla(76, 29%, 28%, 1);
    --color-info-content: hsla(205, 32%, 31%, 1);
    --color-notice-content: hsla(51, 30%, 30%, 1);

    /* shades 
     * generated using 
     * Tint & Shade Generator 
     * (https://maketintsandshades.com/)
     */
    --color-black: #000000;
    --color-gray-19: #020202;
    --color-gray-18: #040404;
    --color-gray-17: #060607;
    --color-gray-16: #080809;
    --color-gray-15: #0a0b0b;
    --color-gray-14: #0c0d0d;
    --color-gray-13: #0e0f0f;
    --color-gray-12: #101112;
    --color-gray-11: #121314;
    --color-gray-10: #141516;
    --color-gray-9: #2c2c2d;
    --color-gray-8: #434445;
    --color-gray-7: #5b5b5c;
    --color-gray-6: #727373;
    --color-gray-5: #8a8a8b;
    --color-gray-4: #a1a1a2;
    --color-gray-3: #b9b9b9;
    --color-gray-2: #d0d0d0;
    --color-gray-1: #e8e8e8;
    --color-white: #ffffff;

    /* text
     */
    --color-text: var(--color-gray-12);
    --color-text-dark: var(--color-black);
    --color-text-light: var(--color-gray-8);
    --color-placeholder: var(--color-gray-7);

    /* buttons
     */
    --color-btn: var(--color-gray-1);
    --color-btn-text: var(--color-black);
    --color-btn-hover: var(--color-gray-2);
    --color-btn-hover-text: var(--color-black);
    --color-btn-primary: var(--color-1);
    --color-btn-primary-text: var(--color-white);
    --color-btn-primary-hover: var(--color-black);
    --color-btn-primary-hover-text: var(--color-white);
    --color-btn-stroke: var(--color-black);
    --color-btn-stroke-text: var(--color-black);
    --color-btn-stroke-hover: var(--color-black);
    --color-btn-stroke-hover-text: var(--color-white);

    /* preloader
     */
    --color-preloader-bg: var(--color-gray-12);
    --color-loader: white;
    --color-loader-light: rgba(255, 255, 255, 0.1);

    /* others
     */
    --color-body: var(--color-white);
    --color-border: rgba(0, 0, 0, 0.08);
    --border-radius: 3px;
}

/* ------------------------------------------------------------------- 
 * ## spacing and typescale
 * ------------------------------------------------------------------- */
:root {
    /* spacing
     * base font size: 18px 
     * vertical space unit : 32px
     */
    --base-size: 62.5%;
    --multiplier: 1;
    --base-font-size: calc(1.8rem * var(--multiplier));
    --space: calc(3.2rem * var(--multiplier));

    /* vertical spacing 
     */
    --vspace-0_125: calc(0.125 * var(--space));
    --vspace-0_25: calc(0.25 * var(--space));
    --vspace-0_375: calc(0.375 * var(--space));
    --vspace-0_5: calc(0.5 * var(--space));
    --vspace-0_625: calc(0.625 * var(--space));
    --vspace-0_75: calc(0.75 * var(--space));
    --vspace-0_875: calc(0.875 * var(--space));
    --vspace-1: calc(var(--space));
    --vspace-1_25: calc(1.25 * var(--space));
    --vspace-1_5: calc(1.5 * var(--space));
    --vspace-1_75: calc(1.75 * var(--space));
    --vspace-2: calc(2 * var(--space));
    --vspace-2_5: calc(2.5 * var(--space));
    --vspace-3: calc(3 * var(--space));
    --vspace-3_5: calc(3.5 * var(--space));
    --vspace-4: calc(4 * var(--space));
    --vspace-4_5: calc(4.5 * var(--space));
    --vspace-5: calc(5 * var(--space));

    /* type scale
     * ratio 1         :2 | base: 18px
     * -------------------------------------------------------
     *
     * --text-display-3 = (77.40px)
     * --text-display-2 = (64.50px)
     * --text-display-1 = (53.75px)
     * --text-xxxl      = (44.79px)
     * --text-xxl       = (37.32px)
     * --text-xl        = (31.10px)
     * --text-lg        = (25.92px)
     * --text-md        = (21.60px)
     * --text-size      = (18.00px) BASE
     * --text-sm        = (15.00px)
     * --text-xs        = (12.50px)
     *
     * ---------------------------------------------------------
     */
    --text-scale-ratio: 1.2;
    --text-size: var(--base-font-size);
    --text-xs: calc(
        (var(--text-size) / var(--text-scale-ratio)) / var(--text-scale-ratio)
    );
    --text-sm: calc(var(--text-xs) * var(--text-scale-ratio));
    --text-md: calc(
        var(--text-sm) * var(--text-scale-ratio) * var(--text-scale-ratio)
    );
    --text-lg: calc(var(--text-md) * var(--text-scale-ratio));
    --text-xl: calc(var(--text-lg) * var(--text-scale-ratio));
    --text-xxl: calc(var(--text-xl) * var(--text-scale-ratio));
    --text-xxxl: calc(var(--text-xxl) * var(--text-scale-ratio));
    --text-display-1: calc(var(--text-xxxl) * var(--text-scale-ratio));
    --text-display-2: calc(var(--text-display-1) * var(--text-scale-ratio));
    --text-display-3: calc(var(--text-display-2) * var(--text-scale-ratio));

    /* default button height
     */
    --vspace-btn: var(--vspace-2);
}

/* on mobile devices below 600px, change the value of '--multiplier' 
 * to adjust the values of base font size and vertical space unit.
 */
@media screen and (max-width: 600px) {
    :root {
        --multiplier: 0.9375;
    }
}

/* ------------------------------------------------------------------- 
 * ## grid variables
 * ------------------------------------------------------------------- */
:root {
    /* widths for rows and containers
     */
    --width-full: 100%;
    --width-max: 1200px;
    --width-wide: 1400px;
    --width-wider: 1600px;
    --width-widest: 1800px;
    --width-narrow: 1000px;
    --width-narrower: 800px;
    --width-grid-max: var(--width-max);

    /* gutter
     */
    --gutter: 2.4rem;
}

/* on medium screen devices
 */
@media screen and (max-width: 1200px) {
    :root {
        --gutter: 2rem;
    }
}

/* on mobile devices
 */
@media screen and (max-width: 600px) {
    :root {
        --gutter: 1rem;
    }
}

/* ====================================================================
 * # NORMALIZE
 *
 *
 * --------------------------------------------------------------------
 * normalize.css v8.0.1 | MIT License |
 * github.com/necolas/normalize.css
 * -------------------------------------------------------------------- */
html {
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background-image: url("../images/santutu-main/background.png");
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
}
main {
    display: block;
}

h1 {
    font-size: 2em;
    margin: 0.67em 0;
}

hr {
    box-sizing: content-box;
    height: 0;
    overflow: visible;
}

pre {
    font-family: monospace, monospace;
    font-size: 1em;
}

a {
    background-color: transparent;
}

abbr[title] {
    border-bottom: none;
    text-decoration: underline;
    text-decoration: underline dotted;
}

b,
strong {
    font-weight: bolder;
}

code,
kbd,
samp {
    font-family: monospace, monospace;
    font-size: 1em;
}

small {
    font-size: 80%;
}

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sub {
    bottom: -0.25em;
}

sup {
    top: -0.5em;
}

img {
    border-style: none;
}

::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit;
}

details {
    display: block;
}

summary {
    display: list-item;
}

template {
    display: none;
}

[hidden] {
    display: none;
}

/* ===================================================================
 * # BASE SETUP
 *
 *
 * ------------------------------------------------------------------- */
html {
    font-size: var(--base-size);
    box-sizing: border-box;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

html,
body {
    height: 100%;
}

body {
    background-color: var(--color-body);
    -webkit-overflow-scrolling: touch;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

p {
    font-size: inherit;
    text-rendering: optimizeLegibility;
}

a {
    text-decoration: none;
}

svg,
img,
video {
    max-width: 100%;
    height: auto;
}

pre {
    overflow: auto;
}

div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
p,
blockquote,
th,
td {
    margin: 0;
    padding: 0;
}

/* ===================================================================
 * # TYPOGRAPHY 
 *
 *
 * ------------------------------------------------------------------- 
 * type scale - ratio 1:2 | base: 18px
 * -------------------------------------------------------------------
 *
 * --text-display-3 = (77.40px)
 * --text-display-2 = (64.50px)
 * --text-display-1 = (53.75px)
 * --text-xxxl      = (44.79px)
 * --text-xxl       = (37.32px)
 * --text-xl        = (31.10px)
 * --text-lg        = (25.92px)
 * --text-md        = (21.60px)
 * --text-size      = (18.00px) BASE
 * --text-sm        = (15.00px)
 * --text-xs        = (12.50px)
 *
 * -------------------------------------------------------------------- */

/* --------------------------------------------------------------------
 * ## base type styles
 * -------------------------------------------------------------------- */
body {
    font-family: var(--font-1);
    font-size: var(--base-font-size);
    font-weight: 400;
    line-height: var(--vspace-1);
    color: var(--color-text);
}

/* links
 */
a {
    color: var(--color-1-light);
    transition: all 0.3s ease-in-out;
}

a:focus,
a:hover,
a:active {
    color: var(--color-2-light);
}

a:hover,
a:active {
    outline: 0;
}

/* headings
 */
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    font-family: var(--font-1);
    font-weight: 500;
    color: var(--color-text-dark);
    font-variant-ligatures: common-ligatures;
    text-rendering: optimizeLegibility;
}

h1,
.h1 {
    margin-top: var(--vspace-2_5);
    margin-bottom: var(--vspace-0_75);
}

h2,
.h2,
h3,
.h3,
h4,
.h4 {
    margin-top: var(--vspace-2);
    margin-bottom: var(--vspace-0_5);
}

h5,
.h5,
h6,
.h6 {
    margin-top: var(--vspace-1_5);
    margin-bottom: var(--vspace-0_5);
}

h1,
.h1 {
    font-size: var(--text-display-1);
    line-height: var(--vspace-2);
    letter-spacing: -0.02em;
}

@media screen and (max-width: 500px) {
    h1,
    .h1 {
        font-size: var(--text-xxxl);
        line-height: calc(1.625 * var(--space));
    }
}

h2,
.h2 {
    font-size: var(--text-xxl);
    line-height: var(--vspace-1_5);
    letter-spacing: -0.02em;
}

h3,
.h3 {
    font-size: var(--text-xl);
    line-height: var(--vspace-1_25);
}

h4,
.h4 {
    font-size: var(--text-lg);
    line-height: var(--vspace-1);
}

h5,
.h5 {
    font-size: var(--text-md);
    line-height: var(--vspace-0_875);
}

h6,
.h6 {
    font-family: var(--font-1);
    font-size: var(--text-sm);
    line-height: var(--vspace-0_75);
    text-transform: uppercase;
    letter-spacing: 0.35rem;
}

/* emphasis, italic,
 * strong, bold and small text
 */
em,
i,
strong,
b {
    font-size: inherit;
    line-height: inherit;
}

em,
i {
    font-style: italic;
}

strong,
b {
    font-weight: 600;
}

small {
    font-size: 75%;
    font-weight: 400;
    line-height: var(--vspace-0_5);
}

.text-center {
    text-align: center;
}

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

.text-secondary-emphasis {
    color: #a7acb1;
}

.loader {
    position: relative;
    width: 100px;
    height: 100px;
}

.loader:before,
.loader:after {
    content: "";
    border-radius: 50%;
    position: absolute;
    inset: 0;
    box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.3) inset;
}
.loader:after {
    box-shadow: 0 2px 0 #4f94e5 inset;
    animation: rotate 2s linear infinite;
}

@keyframes rotate {
    0% {
        transform: rotate(0);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* PreLoader CSS */
#preloader {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: #1a1a1a;
    display: flex;
    gap: 3rem;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(12px);
}

.main-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}
.main-wrapper-body,
.main-wrapper-other {
    position: absolute;
    width: inherit;
    height: inherit;
}

.main-santutu {
    z-index: 0;
    width: inherit;
    height: inherit;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

.main-other {
    z-index: 1;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

.main-santutu img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    overflow: visible;
}
.main-glass img {
    width: 100vw;
    height: 100vh;
    object-fit: cover;
}

.main-hands {
    position: fixed;
    left: 50%;
    width: inherit;
    height: inherit;
    transform: translateX(-50%);
    bottom: 0 !important;
    top: auto !important;
}

.main-hands img {
    width: 100vw;
    height: 100vh;
    object-fit: cover;
}

.floating-images {
    position: absolute;
    width: inherit;
    height: inherit;
    transition: opacity 0.5s ease-in-out;
}

.personal-items {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: opacity 0.5s ease-in-out;
}

.personal-items .elements {
    width: inherit;
    height: inherit;
    object-fit: cover;
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
    will-change: opacity, transform;
}

@keyframes float {
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-10px);
    }
    100% {
        transform: translateY(0px);
    }
}

.float-1 {
    animation: float 6s ease-in-out infinite;
}

.float-2 {
    animation: float 6s ease-in-out infinite;
    animation-delay: 3s;
}

.buttons-container {
    position: absolute;
    width: 90%;
    left: 50%;
    bottom: 120px;
    transform: translateX(-50%);
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 10;
    flex-wrap: wrap;
    gap: 20px;
}

@media screen and (max-width: 1200px) {
    .buttons-container {
        flex-direction: column;
        align-items: center;
        bottom: 20px !important;
    }

    .showtime-btn {
        width: 250px !important;
        height: 124px !important;
        font-size: 2.8rem !important;
        bottom: 20px !important;
        padding-top: 15px !important;
    }

    .ranks-btn {
        width: 250px !important;
        height: 92px !important;
        font-size: 2rem !important;
    }

    .floating-images {
        opacity: 0;
        pointer-events: none;
    }

    .personal-items .elements {
        opacity: 0;
        transform: scale(0.5);
    }
}

@media screen and (max-width: 768px) {
    .showtime-btn {
        width: 250px;
        height: 103px;
        font-size: 2.3rem;
    }

    .ranks-btn {
        width: 250px;
        height: 77px;
        font-size: 1.8rem;
    }
}

@media screen and (max-width: 600px) {
    /* .buttons-container {
        flex-direction: column;
        align-items: center;
        width: 100%;
        bottom: 10px;
        left: 50%;
        transform: translateX(-50%);
        padding: 0 10px;
    }
    .showtime-btn {
        width: 80vw !important;
        max-width: 340px !important;
        height: 75px !important;
        font-size: 1.2rem !important;
        padding-top: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    .ranks-btn {
        width: 80vw !important;
        max-width: 340px !important;
        height: 75px !important;
        font-size: 1.1rem !important;
        margin-top: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center;
    } */
    .main-santutu img,
    .main-hands img,
    .main-glass img {
        width: 100vw !important;
        height: 100vh !important;
        object-fit: cover !important;
    }
    .floating-images,
    .personal-items {
        height: 100vh !important;
    }
    .tooltip {
        font-size: 13px;
        padding: 8px 14px;
        max-width: 90vw;
        z-index: 2000;
    }
}

.custom-button {
    font-family: "Beaufort", sans-serif;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
    color: white;
    font-size: 3.5rem;
    font-weight: bold;
    cursor: pointer;
    transition: transform 0.3s ease, filter 0.3s ease,
        background-image 0.3s ease;
}

.showtime-btn-container {
    position: relative;
}

.showtime-btn {
    width: 400px;
    height: 123px;
    background-image: url("../images/santutu-main/button-golden-2.png");
    background-position: center;
    background-size: contain;
    padding-top: 20px;
    transform: scale(1.25);
    transition: all 0.3s ease;
    overflow: hidden;
    -webkit-mask-image: url("../images/santutu-main/button-golden-2.png");
    mask-image: url("../images/santutu-main/button-golden-2.png");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

.showtime-btn::before {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        0deg,
        transparent,
        transparent 30%,
        rgba(255, 255, 255, 0.49)
    );
    transform: rotate(-45deg);
    transition: all 0.3s ease;
    opacity: 0;
}

.showtime-btn:hover::before {
    opacity: 1;
    transform: rotate(-45deg) translateY(110%);
}

.showtime-btn:hover {
    background-image: url("../images/santutu-main/button-blue-02.png");
    background-position: center;
    background-size: contain;
    padding-top: 20px;
    transform: scale(1.2);
}

.ranks-btn {
    width: 400px;
    height: 123px;
    background-image: url("../images/santutu-main/button-golden-01.png");
    background-position: center;
    background-size: contain;
    /* margin-top: 21px; */
    font-size: 2.5rem;
    transition: all 0.3s ease;
    overflow: hidden;
    -webkit-mask-image: url("../images/santutu-main/button-golden-01.png");
    mask-image: url("../images/santutu-main/button-golden-01.png");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    cursor: not-allowed;
    filter: grayscale(1);
    position: relative;
}

.tooltip {
    position: fixed;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 16px;
    pointer-events: none;
    z-index: 1000;
    opacity: 0;
    transition: opacity 0.3s ease;
    font-family: "Beaufort", sans-serif;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 500;
    will-change: transform;
}

.tooltip::after {
    display: none;
}