/* globals.css */
/* This file is often used for global styles, resets, or common utilities. */
/* Based on your provided structure, it seems like your main styles are in style.css. */
/* You can leave this empty or add any global CSS rules here if needed. */


/* style.css */
/* Font Face Definitions */
@font-face {
  font-family: 'KristenITC-Regular';
  src: url('./fonts/KristenITC_Regular.otf') format('opentype'); /* Ensure this path is correct */
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Super Funky-Regular";
  src: url('./fonts/SuperFunky-lgmWw.ttf') format('truetype'); /* Ensure this path is correct */
  font-weight: normal;
  font-style: normal;
}

/* Base HTML and Body Styles for full-width responsiveness */
html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow-x: hidden; /* Prevent horizontal scroll */
  background-color: #ffffff; /* Set a default background */
}

/* --- Main Frame Styles (all dimensions in vw) --- */
.frame {
  position: relative;
  width: 100vw; /* 1920px / 1920 * 100 = 100vw */
  height: 318.333vw; /* 6112px / 1920 * 100 = 318.333vw */
  background-color: #ffffff;
}

.frame .overlap {
  position: absolute;
  width: 100vw; /* 1920px / 1920 * 100 = 100vw */
  height: 224.635vw; /* 4313px / 1920 * 100 = 224.635vw */
  top: 93.6vw; /* 1799px / 1920 * 100 = 93.6vw */
  left: 0;
  background-image: url(./img/pattern-background.png);
  background-size: 100% 100%;
}

.frame .TITLE {
  position: absolute;
  top: 77.448vw; /* 1487px / 1920 * 100 = 77.448vw */
  left: 15.573vw; /* 299px / 1920 * 100 = 15.573vw */
  font-family: "Super Funky-Regular", Helvetica;
  font-weight: 400;
  color: #ede7d7;
  font-size: 8.224vw; /* 157.9px / 1920 * 100 = 8.224vw */
  letter-spacing: 1.421vw; /* 27.29px / 1920 * 100 = 1.421vw */
  line-height: 8.224vw; /* 157.9px / 1920 * 100 = 8.224vw */
  white-space: nowrap;
}

.frame .ABOUT-TITLE {
  top: 14.375vw; /* 276px / 1920 * 100 = 14.375vw */
  left: 24.844vw; /* 477px / 1920 * 100 = 24.844vw */
  color: #ede7d7;
  font-size: 9.813vw; /* 188.4px / 1920 * 100 = 9.813vw */
  letter-spacing: 2.942vw; /* 56.48px / 1920 * 100 = 2.942vw */
  line-height: 9.813vw; /* 188.4px / 1920 * 100 = 9.813vw */
  position: absolute;
  font-family: "Super Funky-Regular", Helvetica;
  font-weight: 400;
  white-space: nowrap;
}

.frame .div {
  /* This .div class is used multiple times, often as a container. */
  /* If it's meant to be a simple wrapper, these absolute positioning rules might interfere. */
  /* Consider removing or adjusting them if they cause unexpected layout issues. */
  position: absolute; /* Changed to relative if it's meant to contain sections */
  width: 0.052vw; /* 1px / 1920 * 100 = 0.052vw */
  height: 0.052vw; /* 1px / 1920 * 100 = 0.052vw */
  top: 0;
  left: 0;
}

.frame .overlap-group-wrapper {
  position: absolute;
  width: 0.052vw; /* 1px / 1920 * 100 = 0.052vw */
  height: 0.052vw; /* 1px / 1920 * 100 = 0.052vw */
  top: 0;
  left: 0;
  background-color: transparent;
}

.frame .overlap-group {
  position: relative;
  width: 100vw; /* 1920px / 1920 * 100 = 100vw */
  height: 9.115vw; /* 175px / 1920 * 100 = 9.115vw */
  top: 309.219vw; /* 5937px / 1920 * 100 = 309.219vw */
}

.frame .footer-highlihts {
  height: 8.906vw; /* 171px / 1920 * 100 = 8.906vw */
  top: 0.208vw; /* 4px / 1920 * 100 = 0.208vw */
  position: absolute;
  width: 100vw; /* 1920px / 1920 * 100 = 100vw */
  left: 0;
}

.frame .footer-stroke {
  height: 2.396vw; /* 46px / 1920 * 100 = 2.396vw */
  top: 0;
  position: absolute;
  width: 100vw; /* 1920px / 1920 * 100 = 100vw */
  left: 0;
}

/* --- Gallery Styles --- */
.frame .gallery-frame {
  position: absolute;
  width: 56.719vw; /* 1089px / 1920 * 100 = 56.719vw */
  height: 57.656vw; /* 1107px / 1920 * 100 = 57.656vw */
  top: 246.146vw; /* 4726px / 1920 * 100 = 246.146vw */
  left: 21.51vw; /* 413px / 1920 * 100 = 21.51vw */
  z-index: 1; /* Postavljamo niži z-index da bi bio ispod slika */
}

.frame .gallery-container {
  position: absolute;
  top: 250vw; /* Primer: malo pomereno dole od okvira */
  left: 24vw; /* Primer: malo pomereno desno od okvira */
  width: 52vw; /* Primer: nešto manje od okvira */
  height: 50vw; /* Primer: nešto manje od okvira */
  overflow: hidden; /* Važno za isečke slika */
  z-index: 2; /* Postavljamo viši z-index da bi bio iznad okvira */
  /* Dodajemo masku */
}

.frame .gallery-images {
  position: relative;
  width: 100%;
  height: 100%;
}

.frame .gallery-image-item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain; /* Prilagodi veličinu slike unutar okvira, čuvajući njen aspekt ratio */
  opacity: 0; /* Default: hidden */
  transition: opacity 1s ease-in-out; /* Smooth fade transition */
}

/* Remove this as JavaScript will handle visibility */
/*
.frame .gallery-images .gallery-image-item:first-child {
  opacity: 1;
}
*/


.frame .GALLERY-TITLE {
  position: absolute;
  top: 229.792vw; /* 4412px / 1920 * 100 = 229.792vw */
  left: 22.135vw; /* 425px / 1920 * 100 = 22.135vw */
  font-family: "Super Funky-Regular", Helvetica;
  font-weight: 400;
  color: #ede7d7;
  font-size: 9.771vw; /* 187.6px / 1920 * 100 = 9.771vw */
  letter-spacing: 1.04vw; /* 19.97px / 1920 * 100 = 1.04vw */
  line-height: 9.771vw; /* 187.6px / 1920 * 100 = 1.04vw */
  white-space: nowrap;
}

.frame .overlap-2 {
  position: absolute;
  width: 56.354vw; /* 1082px / 1920 * 100 = 56.354vw */
  height: 14.167vw; /* 272px / 1920 * 100 = 14.167vw */
  top: 197.135vw; /* 3785px / 1920 * 100 = 197.135vw */
  left: 23.646vw; /* 454px / 1920 * 100 = 23.646vw */
  background-image: url(./img/step-two-blob.png);
  background-size: 100% 100%;
}

.frame .text-wrapper {
  top: 3.594vw; /* 69px / 1920 * 100 = 3.594vw */
  left: 4.219vw; /* 81px / 1920 * 100 = 4.219vw */
  font-family: "KristenITC-Regular", Helvetica;
  color: #432813;
  font-size: 6.49vw; /* 124.6px / 1920 * 100 = 6.49vw */
  letter-spacing: 1.724vw; /* 33.10px / 1920 * 100 = 1.724vw */
  line-height: 6.49vw; /* 124.6px / 1920 * 100 = 6.49vw */
  position: absolute;
  font-weight: 400;
  white-space: nowrap;
}

.frame .transfer-or-buy-ETH {
  position: absolute;
  width: 37.188vw; /* 714px / 1920 * 100 = 37.188vw */
  top: 0vw; /* 0px / 1920 * 100 = 0vw */
  left: 17.76vw; /* 341px / 1920 * 100 = 17.76vw */
  font-family: "KristenITC-Regular", Helvetica;
  font-weight: 400;
  color: #432813;
  font-size: 2.188vw; /* 42px / 1920 * 100 = 2.188vw */
  text-align: center;
  letter-spacing: 0;
  line-height: 2.625vw; /* 50.4px / 1920 * 100 = 2.625vw */
}

.frame .overlap-3 {
  position: absolute;
  width: 54.844vw; /* 1053px / 1920 * 100 = 54.844vw */
  height: 13.333vw; /* 256px / 1920 * 100 = 13.333vw */
  top: 212.188vw; /* 4074px / 1920 * 100 = 212.188vw */
  left: 23.125vw; /* 444px / 1920 * 100 = 23.125vw */
  background-image: url(./img/step-three-blob.png);
  background-size: 100% 100%;
}

.frame .text-wrapper-2 {
  position: absolute;
  top: 3.281vw; /* 63px / 1920 * 100 = 3.281vw */
  left: 42.813vw; /* 822px / 1920 * 100 = 42.813vw */
  font-family: "KristenITC-Regular", Helvetica;
  font-weight: 400;
  color: #432813;
  font-size: 6.49vw; /* 124.6px / 1920 * 100 = 6.49vw */
  letter-spacing: 1.293vw; /* 24.82px / 1920 * 100 = 1.293vw */
  line-height: 6.49vw; /* 124.6px / 1920 * 100 = 6.49vw */
  white-space: nowrap;
}

.frame .navigate-to-the {
  position: absolute;
  width: 37.344vw; /* 717px / 1920 * 100 = 37.344vw */
  top: -0.521vw; /* -10px / 1920 * 100 = -0.521vw */
  left: 0.938vw; /* 18px / 1920 * 100 = 0.938vw */
  font-family: "KristenITC-Regular", Helvetica;
  font-weight: 400;
  color: #432813;
  font-size: 2.188vw; /* 42px / 1920 * 100 = 2.188vw */
  text-align: center;
  letter-spacing: 0;
  line-height: 2.625vw; /* 50.4px / 1920 * 100 = 2.625vw */
}

.frame .overlap-4 {
  position: absolute;
  width: 57.135vw; /* 1097px / 1920 * 100 = 57.135vw */
  height: 13.906vw; /* 267px / 1920 * 100 = 13.906vw */
  top: 181.823vw; /* 3491px / 1920 * 100 = 181.823vw */
  left: 20.417vw; /* 392px / 1920 * 100 = 20.417vw */
  background-image: url(./img/step-one-blob.png);
  background-size: 100% 100%;
}

.frame .text-wrapper-3 {
  position: absolute;
  top: 3.333vw; /* 64px / 1920 * 100 = 3.333vw */
  left: 47.083vw; /* 922px / 1920 * 100 = 47.083vw */
  font-family: "KristenITC-Regular", Helvetica;
  font-weight: 400;
  color: #432813;
  font-size: 6.49vw; /* 124.6px / 1920 * 100 = 6.49vw */
  letter-spacing: 3.245vw; /* 62.30px / 1920 * 100 = 3.245vw */
  line-height: 6.49vw; /* 124.6px / 1920 * 100 = 6.49vw */
  white-space: nowrap;
}

.frame .visit-abs-xyz-create {
  position: absolute;
  width: 36.823vw; /* 707px / 1920 * 100 = 36.823vw */
  top: -0.521vw; /* -10px / 1920 * 100 = -0.521vw */
  left: 1.927vw; /* 37px / 1920 * 100 = 1.927vw */
  font-family: "KristenITC-Regular", Helvetica;
  font-weight: 400;
  color: #432813;
  font-size: 2.188vw; /* 42px / 1920 * 100 = 2.188vw */
  text-align: center;
  letter-spacing: 0;
  line-height: 2.625vw; /* 50.4px / 1920 * 100 = 2.625vw */
}

.frame .overlap-5 {
  position: relative;
  width: 99.688vw; /* 1914px / 1920 * 100 = 99.688vw */
  height: 56.146vw; /* 1078px / 1920 * 100 = 56.146vw */
  top: 115.469vw; /* 2217px / 1920 * 100 = 115.469vw */
  background-image: url(./img/drawing-prehistoric2.png);
  background-size: cover;
  background-position: 50% 50%;
}

.frame .drawing-blobs {
  position: absolute;
  width: 54.271vw; /* 1042px / 1920 * 100 = 54.271vw */
  height: 47.344vw; /* 909px / 1920 * 100 = 47.344vw */
  top: 5.833vw; /* 112px / 1920 * 100 = 5.833vw */
  left: 23.177vw; /* 445px / 1920 * 100 = 23.177vw */
}

.frame .drawing-prehistoric {
  position: absolute;
  width: 41.458vw; /* 796px / 1920 * 100 = 41.458vw */
  height: 43.177vw; /* 829px / 1920 * 100 = 43.177vw */
  top: 7.135vw; /* 137px / 1920 * 100 = 7.135vw */
  left: 34.323vw; /* 659px / 1920 * 100 = 34.323vw */
}

.frame .with-ice-age-grit-wrapper {
  position: relative;
  width: 34.427vw; /* 661px / 1920 * 100 = 34.427vw */
  height: 15.313vw; /* 294px / 1920 * 100 = 15.313vw */
  top: 138.073vw; /* 2651px / 1920 * 100 = 138.073vw */
  left: 45.052vw; /* 865px / 1920 * 100 = 45.052vw */
  background-image: url(./img/blob-text-2.png);
  background-size: 100% 100%;
}

.frame .with-ice-age-grit {
  position: absolute;
  width: 30.417vw; /* 584px / 1920 * 100 = 30.417vw */
  top: 0.781vw; /* 15px / 1920 * 100 = 0.781vw */
  left: 2.552vw; /* 49px / 1920 * 100 = 2.552vw */
  font-family: "KristenITC-Regular", Helvetica;
  font-weight: 400;
  color: #432813;
  font-size: 2.188vw; /* 42px / 1920 * 100 = 2.188vw */
  text-align: center;
  letter-spacing: 0;
  line-height: 2.625vw; /* 50.4px / 1920 * 100 = 2.625vw */
}

.frame .fang-the-saber-wrapper {
  position: relative;
  width: 35.521vw; /* 682px / 1920 * 100 = 35.521vw */
  height: 16.563vw; /* 318px / 1920 * 100 = 16.563vw */
  top: 121.51vw; /* 2333px / 1920 * 100 = 121.51vw */
  left: 20.625vw; /* 396px / 1920 * 100 = 20.625vw */
  background-image: url(./img/blob-text-1.png);
  background-size: 100% 100%;
}

.frame .fang-the-saber {
  position: absolute;
  width: 34.479vw; /* 662px / 1920 * 100 = 34.479vw */
  top: 1.823vw; /* 35px / 1920 * 100 = 1.823vw */
  left: 1.042vw; /* 20px / 1920 * 100 = 1.042vw */
  font-family: "KristenITC-Regular", Helvetica;
  font-weight: 400;
  color: #432813;
  font-size: 2.188vw; /* 42px / 1920 * 100 = 2.188vw */
  text-align: center;
  letter-spacing: 0;
  line-height: 2.625vw; /* 50.4px / 1920 * 100 = 2.625vw */
}

.frame .overlap-6 {
  position: relative;
  width: 100vw; /* 1920px / 1920 * 100 = 100vw */
  height: 90.156vw; /* 1731px / 1920 * 100 = 90.156vw */
}

.frame .bg-color {
  position: absolute;
  width: 100vw; /* 1920px / 1920 * 100 = 100vw */
  height: 83.854vw; /* 1610px / 1920 * 100 = 83.854vw */
  top: 0;
  left: 0;
}

.frame .cyan-gradient {
  position: absolute;
  width: 100vw; /* 1920px / 1920 * 100 = 100vw */
  height: 66.51vw; /* 1277px / 1920 * 100 = 66.51vw */
  top: 23.646vw; /* 454px / 1920 * 100 = 23.646vw */
  left: 0;
}

.frame .stars {
  position: absolute;
  width: 100vw; /* 1920px / 1920 * 100 = 100vw */
  height: 43.281vw; /* 831px / 1920 * 100 = 43.281vw */
  top: 0;
  left: 0;
}

.frame .moon {
  position: absolute;
  width: 8.125vw; /* 156px / 1920 * 100 = 8.125vw */
  height: 8.125vw; /* 156px / 1920 * 100 = 8.125vw */
  top: 11.198vw; /* 215px / 1920 * 100 = 11.198vw */
  left: 59.583vw; /* 1144px / 1920 * 100 = 59.583vw */
}

.frame .fang-home {
  position: absolute;
  top: 17.24vw; /* 331px / 1920 * 100 = 17.24vw */
  left: 25.573vw; /* 491px / 1920 * 100 = 25.573vw */
  font-family: "Super Funky-Regular", Helvetica;
  font-weight: 400;
  color: #f4fbfd;
  font-size: 12.615vw; /* 242.2px / 1920 * 100 = 12.615vw */
  letter-spacing: 3.72vw; /* 71.43px / 1920 * 100 = 3.72vw */
  line-height: 12.615vw; /* 242.2px / 1920 * 100 = 12.615vw */
  white-space: nowrap;
}

.frame .overlap-7 {
  position: absolute; /* Keep absolute as its default positioning */
  width: 100vw; /* 1920px / 1920 * 100 = 100vw */
  height: 52.031vw; /* 999px / 1920 * 100 = 52.031vw */
  top: 54.8vw; /* Set its default top from CSS */
  left: 0;
  background-image: url(./img/snow-ice-below-home.png);
  background-size: 100% 100%;
  z-index: 2;
}

.frame .paw-button {
  position: absolute;
  width: 16.563vw; /* 318px / 1920 * 100 = 16.563vw */
  height: 8.646vw; /* 166px / 1920 * 100 = 8.646vw */
  top: 18.594vw; /* 357px / 1920 * 100 = 18.594vw */
  left: 40.729vw; /* 782px / 1920 * 100 = 40.729vw */
  cursor: pointer; /* Add a pointer cursor to indicate it's clickable */
  transition: transform 0.1s ease-in-out; /* Smooth transition for movement */
}

.frame .paw-button:hover {
  transform: translateY(1vw); /* Moves down by 1vw on hover */
}

.frame .paw-button:active {
  transform: translateY(2vw); /* Moves down by 2vw when clicked */
}

.frame .text-address {
  position: absolute;
  top: 27.438vw; /* 546px / 1920 * 100 = 28.438vw */
  left: 49%;
  transform: translateX(-50%);
  font-family: "KristenITC-Regular", Helvetica;
  font-weight: 400;
  color: #432813;
  font-size: 1.563vw; /* 30px / 1920 * 100 = 1.563vw */
  text-align: center;
  letter-spacing: 0;
  line-height: 2.604vw; /* 50px / 1920 * 100 = 2.604vw */
}

.frame .overlap-8 {
  position: fixed; /* Promenjeno iz relative u fixed */
  width: 57.708vw; /* 1108px / 1920 * 100 = 57.708vw */
  height: 12.604vw; /* 242px / 1920 * 100 = 12.604vw */
  top: 0; /* Fiksiraj na vrh */
  left: 50%; /* Centriraj horizontalno */
  transform: translateX(-50%); /* Centriraj precizno */
  background-image: url(./img/header-bone.png);
  background-size: 100% 100%;
  z-index: 1000; /* Osiguraj da je iznad ostalih elemenata */
  margin-top: 15px;
}

/* Base styles for header links (all text-wrapper classes) */
.frame .text-wrapper-4,
.frame .text-wrapper-5,
.frame .text-wrapper-6,
.frame .text-wrapper-7 {
  /* Existing styles */
  position: absolute;
  font-family: "Super Funky-Regular", Helvetica;
  font-weight: 400;
  color: #43260f;
  font-size: 1.25vw;
  line-height: 1.25vw;
  white-space: nowrap;
  cursor: pointer; /* Indicate clickable */
  transition: color 0.3s ease-in-out, transform 0.1s ease-in-out; /* Smooth transitions for color and transform */
}

/* Specific positions for each link */
.frame .text-wrapper-4 {
  top: 5.156vw;
  left: 13.281vw;
  letter-spacing: 0.078vw;
}

.frame .text-wrapper-5 {
  top: 5.156vw;
  left: 19.271vw;
  letter-spacing: 0.146vw;
}

.frame .text-wrapper-6 {
  top: 5.156vw;
  left: 26.563vw;
  letter-spacing: 0.049vw;
}

.frame .text-wrapper-7 {
  top: 5.156vw;
  left: 37.24vw;
  letter-spacing: 0.127vw;
}

/* --- Header Link Interactivity Styles --- */
/* Add a common class for easier selection in CSS */
.header-link {
  /* Inherits styles from .text-wrapper-X classes, but adds hover/active */
  /* Make sure cursor is pointer for all of them */
  cursor: pointer;
  transition: color 0.2s ease-in-out, transform 0.15s ease-in-out;
}

/* Shake effect on hover */
.header-link.shake {
  animation: shake 0.2s cubic-bezier(.36,.07,.19,.97) both;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
}

@keyframes shake {
  10%, 90% {
    transform: translate3d(-0.1vw, 0.1vw, 0); /* Pomeraj levo i dole */
  }
  20%, 80% {
    transform: translate3d(0.2vw, -0.2vw, 0); /* Pomeraj desno i gore */
  }
  30%, 70% {
    transform: translate3d(-0.2vw, 0.2vw, 0); /* Pomeraj levo i dole */
  }
  40%, 60% {
    transform: translate3d(0.2vw, -0.2vw, 0); /* Pomeraj desno i gore */
  }
  50% {
    transform: translate3d(-0.1vw, 0.1vw, 0); /* Pomeraj levo i dole */
  }
}



/* --- Social Icons in Header --- */
.social-icon {
    position: absolute;
    width: 2.5vw; /* Adjust size as needed */
    height: 2.5vw; /* Adjust size as needed */
    top: 5.156vw; /* Align with text-wrapper-X top */
    /* Remove color property here, as it's not applicable to img tags */
    transition: transform 0.2s ease-in-out;
}

.social-icon:hover {
    transform: scale(1.1); /* Slightly enlarge on hover */
}

.social-icon img {
    width: 100%;
    height: 100%;
    display: block;
}

.telegram-icon {
  top: 4.5vw;
  left: 48.8vw; /* Adjust position */
}

.x-icon {
  top:4.5vw;
    left: 5vw; /* Adjust position relative to Telegram */
}


.frame .overlap-9 {
  position: absolute;
  width: 65.469vw; /* 1257px / 1920 * 100 = 65.469vw */
  height: 57.448vw; /* 1103px / 1920 * 100 = 57.448vw */
  top: 28.385vw; /* Ovo će biti početna pozicija animacije */
  left: 17.031vw; /* 326px / 1920 * 100 = 17.031vw */
  z-index: 1; /* Postavite z-index ako je potrebno da bude iznad/ispod drugih elemenata */

  /* --- Dodato za efekat lebdenja --- */
  animation: float 3s ease-in-out infinite; /* Ime animacije, trajanje, funkcija ubrzanja, beskonačno ponavljanje */
}

/* --- Definicija Keyframes animacije za lebdenje --- */
@keyframes float {
  0% {
    transform: translateY(0); /* Počinjemo od normalne pozicije */
  }
  50% {
    transform: translateY(2vw); /* Pomeramo ga 2vw (oko 38px na 1920px širini) nadole */
  }
  100% {
    transform: translateY(0); /* Vraćamo ga na početnu poziciju */
  }
}

.frame .glacear {
  position: absolute;
  width: 65.469vw; /* 1257px / 1920 * 100 = 65.469vw */
  height: 48.542vw; /* 932px / 1920 * 100 = 48.542vw */
  top: 8.906vw; /* 171px / 1920 * 100 = 8.906vw */
  left: 0;
}

.frame .tiger {
  position: absolute;
  width: 58.542vw; /* 1124px / 1920 * 100 = 58.542vw */
  height: 17.865vw; /* 343px / 1920 * 100 = 17.865vw */
  top: 0;
  left: 3.958vw; /* 76px / 1920 * 100 = 3.958vw */
}
#home-section,
#about-section,
#how-to-buy-section,
#gallery-section {
  scroll-margin-top: 13vw; /* visina headera */
}