@font-face {
    font-family: "Nau Sea";
    src: url("/dist/assets/fonts/nausea.otf") format("opentype");
}

.nausea {
    font-family: "Nau Sea", sans-serif;
}

@font-face {
    font-family: "JhengHei";
    src: url("/dist/assets/fonts/Microsoft JhengHei Bold.ttf") format("opentype");
}

.japfont {
    font-family: "JhengHei", sans-serif;
}

@font-face {
    font-family: "BebasNeue";
    src: url("/dist/assets/fonts/BebasNeue-Regular.ttf") format("opentype");
}

.bebas {
    font-family: "BebasNeue", sans-serif;
}

.sdblue {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--sdblue-rgb), var(--bs-bg-opacity)) !important;
}

:root {
  --sdblue-rgb: 0, 160, 215; 
}


.text-sdblue {
  color: rgb(var(--sdblue-rgb)) !important;
}

.skew{
    transform: skew(-7deg);
}

.unskew{
    transform: skew(7deg);
    display: inline-block;
}

.herotext {
  font-size: min(20vw, 112px);
}

.photocredit-text {
  font-size: min(8vw, 20px);
}


.arrowanimation {
  display: inline-block;
  animation: bounce 3s infinite ease-in-out;
}


@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(20px);
  }
}

html {
  scroll-behavior: smooth;
}

/* Navbar & Back-to-Top default state (Hidden) */
.navbar-fade {
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.6s ease-in-out !important;
  will-change: opacity;
}

/* Navbar & Back-to-Top visible state (Scrolled) */
.navbar-fade.scrolled {
  opacity: 1 !important;
  pointer-events: auto !important;
}

.nopadding {
   padding: 0 !important;
   margin: 0 !important;
}

.social-card {
  transition: all 0.25s ease-in-out;
  backdrop-filter: blur(10px);
}

.social-card:hover {
  border-color: var(--brand-color) !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4), 0 0 15px var(--brand-color);
}


/* Container needs relative positioning and overflow visible for the glow */
.insta-card {
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  transition: all 0.3s ease-in-out;
  z-index: 1;
}

.insta-card:hover {
  border-color: transparent !important; /* Hide original border on hover */
  box-shadow: 
    0 10px 25px rgba(0, 0, 0, 0.5),
    6px 0 20px rgba(188, 24, 136, 0.45),
    -6px 0 20px rgba(240, 148, 51, 0.45);
}

.insta-card::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit; 
  padding: 1px;
  background: linear-gradient(45deg, #f09433, #dc2743, #bc1888);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  pointer-events: none;
  z-index: -1;
}

.insta-card:hover::before {
  opacity: 1;
}


.tiktok-card {
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  transition: all 0.3s ease-in-out;
  z-index: 1;
}

.tiktok-card:hover {
  border-color: transparent !important; /* Hide original border on hover */
  box-shadow: 
    0 10px 25px rgba(0, 0, 0, 0.5),
    -6px 0 20px rgba(45, 202, 210, 0.45),
    6px 0 20px rgba(241, 32, 74, 0.45);
}

.tiktok-card::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit; 
  padding: 1px;
  background: linear-gradient(45deg,  rgb(45, 202, 210), rgb(241, 32, 74));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  pointer-events: none;
  z-index: -1;
}

.tiktok-card:hover::before {
  opacity: 1;
}

.archive-chevron {
  display: inline-block; 
  transition: transform 0.5s ease;
}


button[data-bs-toggle="collapse"]:not(.collapsed) .archive-chevron {
  transform: rotate(180deg);
}


.modal-backdrop {
  background-color: rgba(0, 0, 0, 0) !important;
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  transition: backdrop-filter 0.3s ease, background-color 0.3s ease !important;
}

.modal-open .modal-backdrop.show {
  background-color: rgba(0, 0, 0, 0.5) !important;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  opacity: 1 !important;
}


/* Scroll Margins */


#collapseSocials {
  scroll-margin-top: 80px;
}

#heyo {
  scroll-margin-top: 80px;
}

#social {
  scroll-margin-top: 90px;
}

#events {
  scroll-margin-top: 90px;
}