@import url("https://fonts.googleapis.com/css2?family=Mouse+Memoirs&family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&display=swap");

html {
  scroll-behavior: smooth;
}

/* Pastikan container (header) memiliki posisi relative */
header {
  position: relative;
}

/* Styling untuk elemen paus */
#whale {
  position: absolute;
  width: 80px; /* Atur ukuran sesuai kebutuhan */
  height: 40px; /* Atur ukuran sesuai kebutuhan */
  background-image: url("./Img/pikachu.png"); /* Ganti path gambar sesuai kebutuhan */
  background-size: contain;
  background-repeat: no-repeat;
  pointer-events: auto; /* Agar dapat merespon hover/mouse events */
  z-index: 20; /* Pastikan berada di atas elemen lain bila diperlukan */
}

/* Wrapper untuk gambar dengan efek perspektif */
.image-container {
  perspective: 1000px;
}

/* Efek dasar gambar */
.image-3d {
  transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
  transform-style: preserve-3d;
  will-change: transform;
}

/* Efek saat hover */
.image-3d:hover {
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

/* Efek kembali ke posisi normal */
.image-3d.reset {
  transition: transform 0.5s ease-out;
  transform: rotateX(0deg) rotateY(0deg);
}

/* Google Fonts */
.mouse-memoirs-regular {
  font-family: "Mouse Memoirs", serif;
  font-weight: 400;
  font-style: oblique;
}

/* Navbar Hover Effect Open */
/* Menyusun gaya dasar */
#menu {
  display: flex; /* Default hidden */
}

#menu.flex {
  display: flex; /* Tampilkan dropdown */
}

#hamburgerMenu {
  position: relative; /* Untuk referensi posisi dropdown */
}

#menu.absolute {
  position: absolute;
  top: 100%; /* Tepat di bawah toggle */
  right: 0;
  width: max-content;
  min-width: 150px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
  z-index: 10; /* Pastikan berada di atas elemen lain */
}

/* Style dasar untuk link navbar */
#menu a {
  position: relative;
  display: inline-block;
  text-decoration: none;
  color: black;
  font-weight: 500;
}

/* Garis bawah yang muncul dari kiri ke kanan */
#menu a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 0%;
  height: 2px;
  background-color: black;
  transition: width 0.3s ease-in-out;
}

/* Efek hover: garis akan muncul dari kiri ke kanan */
#menu a:hover::after {
  width: 100%;
}

/* Hover Effect Navbar Closed */

@media (max-width: 767px) {
  #menu {
    display: none; /* Hanya disembunyikan di layar kecil */
  }

  #menu.flex {
    display: flex; /* Ditampilkan saat toggle diklik */
  }

  #menu.absolute {
    position: absolute;
    top: 100%;
    right: 0;
    width: max-content;
    min-width: 150px;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 10; /* Pastikan berada di atas elemen lain */
  }
}

header .foto1 {
  max-width: 40%;
}
/* Animasi Nama Ela Ruslina Nofita */
@keyframes smoothSlide {
  0% {
    transform: translateX(-160%);
  }
  50% {
    transform: translateX(-50%);
    font-size: 8vw;
  }
  100% {
    transform: translateX(100%);
  }
}

div h1.nama {
  animation: smoothSlide 7s cubic-bezier(1, 0.8, 0.5, 1) infinite;
  white-space: nowrap;
}

/* Animasi Dropdwown */

@keyframes dropdown {
  0% {
    opacity: 0;
    transform: translateY(-10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

#image {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  transform-origin: center;
  perspective: 1000px;
}

/* Efek tambahan saat hover */
#image:hover {
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

/* Memberikan efek transisi pada elemen hover */
.relative {
  perspective: 1000px;
}

/* Image Hover Effect Perpestive 3d Closed  */

.title-main {
  font-family: "Impact", "Arial Black", sans-serif;
  font-weight: normal;
  text-transform: uppercase;
}

/* Animasi untuk judul "/ABOUT" */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Animasi scale effect saat elemen masuk viewport */
@keyframes scaleUp {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Efek scale untuk judul "/ABOUT" */
.title-main {
  view-timeline-name: --title-scroll;
  view-timeline-axis: block;

  animation-timeline: --title-scroll;
  animation-name: scaleUp;
  animation-fill-mode: both;
  animation-range: entry 0% cover 50%;
}

/* Efek scale untuk konten lainnya */
.scroll-scale {
  view-timeline-name: --content-scroll;
  view-timeline-axis: block;

  animation-timeline: --content-scroll;
  animation-name: scaleUp;
  animation-fill-mode: both;
  animation-range: entry 10% cover 40%;
}

/* 1. Fade In & Scale */
@keyframes fadeScale {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* 2. Slide Down */
@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 3. Zoom In */
@keyframes zoomIn {
  from {
    opacity: 0;
    transform: scale(0.5);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Default modal animation */
.animate-fade-scale {
  animation: fadeScale 0.3s ease-out forwards;
}

.animate-slide-down {
  animation: slideDown 0.4s ease-out forwards;
}

.animate-zoom-in {
  animation: zoomIn 0.3s ease-out forwards;
}

/* Efek Hover - Contact btn dan ScrollTop Btn*/
#contactBtn:hover {
  background-color: #2563eb; /* Biru lebih terang */
  transform: scale(1.1);
  transition: all 0.3s ease-in-out;
}

#scrollToTopBtn:hover {
  background-color: white;
  color: black;
  border-color: black;
  transform: scale(1.2);
  box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.8);
  transition: all 0.3s ease-in-out;
}

/*Closed  Efek Hover - Contact btn dan ScrollTop Btn*/

/* Efek Fade-in saat elemen masuk viewport */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in-effect {
  opacity: 0;
  animation: fadeIn 1s ease-out forwards;
  animation-timeline: view();
  animation-range: entry 0% cover 50%;
}

/* Efek Slide-up untuk elemen yang masuk viewport */
@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Pastikan elemen tetap terlihat setelah animasi */
.fade-in-effect:last-child {
  opacity: 1;
}

.slide-up-effect {
  opacity: 0;
  animation: slideUp 1s ease-out forwards;
  animation-timeline: view();
  animation-range: entry 10% cover 40%;
}

/* Efek Scale-up */
@keyframes scaleUp {
  from {
    opacity: 0;
    transform: scale(0.85);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.scale-up-effect {
  opacity: 0;
  animation: scaleUp 1s ease-out forwards;
  animation-timeline: view();
  animation-range: entry 15% cover 50%;
}