/* Specific styles for index.html */

@font-face {
    font-family: "MountainKing";
    src: url('fonts/mountainking/MountainKingRegular-woBYn.ttf') format('truetype');
}

@font-face {
    font-family: "Gothicx";
    src: url('fonts/distropax/Distropiax-WpYMA.ttf') format('truetype');
}

body {
    margin: 0;
    padding: 0;
    background-image: url('assets/bg/main-bg.jpg');
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 100vh;
    overflow: hidden;
    /* Recommended for a clean Look while placing items */
}

/* --- GIF CONTAINER & ITEMS --- */
.gif-container {
    position: relative;
    width: 100%;
    height: 100vh;
}

.gif-item {
    position: absolute;
    transition: transform 0.2s ease;
    /* Removed pointer-events: none so they can be hovered */
}

.gif-link-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 0;
    /* Puts it below the rest of the gifs */
}

.gif-link-wrapper .gif-item {
    position: relative;
    /* Relative to the centered wrapper */
    pointer-events: auto;
    /* Makes this specific GIF clickable */
    cursor: pointer;
}

/* --- BOILERPLATE FOR INDIVIDUAL GIFS --- */

/* GIF 1: WELCOME (Top Right) */
.gif-1 {
    top: 5%;
    right: 5%;
    width: 250px;
    transition: transform 0.2s ease;
    z-index: 9;
}

.gif-1:hover {
    transform: scale(1.1);
}

/* GIF 2: Now used as the centered ENTER link */
.gif-2 {
    width: 550px;
    transition: transform 0.3s ease;
    z-index: 1;
}

.gif-2:hover {
    transform: scale(1.1);
}

/* GIF 3: CHINA (Top Left) */
.gif-3 {
    top: 5%;
    left: 8%;
    width: 250px;
}

.gif-3:hover {
    transform: scale(1.1);
}

/* GIF 4: HELLO (Bottom Right) */
.gif-4 {
    bottom: 11%;
    right: 5%;
    width: 200px;
}

.gif-4:hover {
    transform: scale(1.1);
}

/* GIF 5: HINDI (Mid Right) */
.gif-5 {
    top: 20%;
    right: 19%;
    width: 250px;
    z-index: 8;
}

.gif-5:hover {
    transform: scale(1.1);
}

/* GIF 6: HOLA (Mid Left) */
.gif-6 {
    top: 35%;
    left: 12%;
    width: 250px;
    z-index: 10;
}

.gif-6:hover {
    transform: scale(1.1);
}

/* GIF 7: JAPANESE (Mid-Bottom Right) */
.gif-7 {
    bottom: 3%;
    right: 20%;
    width: 210px;
}

.gif-7:hover {
    transform: scale(1.1);
}

/* GIF 8: RUSSIAN (Bottom Left) */
.gif-8 {
    bottom: 1%;
    left: 5%;
    width: 250px;
}

.gif-8:hover {
    transform: scale(1.1);
}

/* 
   PIXEL-PERFECT POSITIONING GUIDE:
   To place a GIF exactly where you want using pixels:
   1. Use 'top' or 'bottom' in px.
   2. Use 'left' or 'right' in px.
   Example: .gif-1 { top: 120px; left: 450px; width: 200px; }
*/