/* main css */
* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  padding: 0px;
  margin: 0px;
  overflow-x: hidden;
  max-width: 100vw;
}

#shi {
  display: inline-block;
  transition: transform 0.15s ease-out;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

#cool-stuff {
  font-style: italic;
  font-family: "Playfair Display", sans-serif;
}

.tilt-container {
  display: inline-block;
  perspective: 1000px; /* Gives the depth illusion */
  text-decoration: none;
  cursor: pointer;
  position: relative;
  z-index: 5; /* Ensures it sits above your background canvas patterns */
}

#tilt-img {
  display: block;
  height: 300px;
  width: 300px;
  border-radius: 24px;
  object-fit: cover;
}

#sec1 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100%;
  padding: 0px;
  margin: 0px;
}

.hero-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

#sec2 {
  height: auto;
  min-height: 40vh;
  width: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  margin-right: 0px;
}

body {
  transition: 0.3s ease-in-out;
  background-color: #fff;
  /* Background color */
  background-image:
    radial-gradient(#5e5656 2%, transparent 5%),
    radial-gradient(#5e5656 2%, transparent 5%);
  background-size: 30px 30px;
  background-position:
    0 0,
    150px 150px;
  background-repeat: repeat;
  font-family: "Inter", sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0px;
  margin: 0px;
}

h1 p {
  padding: 0px;
  margin: 0px;
  font-family: "Gabarito", sans-serif;
  font-size: 20px;
  color: #313131;
  font-weight: 500;
}

#sec1 h1 {
  padding: 0px;
  margin: 0px;
  font-size: 100px;
  font-family: "Inter", sans-serif;
}

#sec2 h1 {
  font-size: 55px;
  margin: 0px;
}

#sec2 p {
  font-size: 16px;
  opacity: 90%;
  max-width: 500px;
}

#nikaspin {
  font-size: 80px;
  font-family: "Inter", sans-serif;
  display: inline-flex;
}

#main2 {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 60px;
  margin: 0 auto 100px auto;
  /* Centered with margin bottom */
  width: 90vw;
  max-width: 1200px;
  background-color: #fff;
  border: 1px solid #000;
  border-radius: 24px;
  gap: 50px;
}

#main2 img {
  height: 300px;
  width: 300px;
  border-radius: 24px;
  object-fit: cover;
}

a {
  color: #515151;
}

.button {
  transition: 0.4s ease-in-out;
  margin-top: 20px;
  background-color: #191717;
  color: white;
  padding: 15px 30px;
  border-radius: 30px;
  text-decoration: none;
  border: 1px solid black;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.button i {
  padding-right: 12px;
}

.button.outline {
  background-color: transparent;
  color: #191717;
}

.button:hover,
.button:focus {
  background-color: transparent;
  color: black;
  border: 1px solid black;
}

.button.outline:hover,
.button.outline:focus {
  background-color: #191717;
  color: white !important;
  border-color: #191717;
}

.outlined-img {
  border: 1px solid #000;
}

.btnContainer {
  padding-top: 40px;
  width: auto;
}

#projectbtn {
  padding-left: 20px;
}

#projectbtn:hover {
  color: black;
  text-decoration: none;
}

#projects {
  font-family: "Gabarito", sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  align-content: center;
  justify-content: center;
  text-align: center;
  padding-top: 100px;
  padding-bottom: 200px;
}

#projectitle {
  font-size: 55px;
  padding: 0px;
  margin: 0px;
}

#projects p {
  font-size: 24px;
  padding: 0px;
  margin: 0px;
}

.project {
  display: flex;
  align-content: center;
  justify-content: space-between;
  align-items: center;
  gap: 80px;
  padding: 60px;
  width: 60vw;
}

.inProject {
  width: 400px;
  text-align: start;
  border-radius: 16px;
  padding: 12px;
}

.project h1 {
  font-size: 48px;
  border: 0px solid black;
  border-radius: 12px;
  width: fit-content;
}

.project p {
  font-size: 20px;
  opacity: 80%;
}

.project i {
  font-size: 30px;
  padding: 12px 0px;
  color: #000;
}

.project img {
  height: 300px;
  width: auto;
  border-radius: 26px;
}

#contactMe {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 18px 18px 200px 18px;
  text-align: center;
}

#contactMe h1 {
  font-size: 60px;
  margin: 0px;
  padding-bottom: 16px;
}

#contactMe p {
  margin: 0px;
  width: 90vw;
  opacity: 90%;
  max-width: 500px;
}

#extraProjects {
  text-align: center;
  flex: 1;
}

#extraProjects h1 {
  font-size: 60px;
  margin: 0px;
  padding: 18px;
}

#extraProjects a {
  font-style: bold;
  font-family: "Gabarito", sans-serif;
  color: black;
  font-size: 20px;
  text-decoration: none;
}

.reverse {
  flex-direction: row-reverse;
}

footer {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  padding: 40px 20px 80px;
  flex-wrap: wrap;
}

footer a {
  text-decoration: none;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  transition: all 0.3s ease;
  border: 1px solid transparent;
}

footer a:hover {
  background-color: #f5f5f5;
  border-color: #e0e0e0;
  transform: translateY(-5px);
}

footer i {
  color: #313131;
  font-size: 22px;
  opacity: 0.7;
  transition: all 0.3s ease;
}

footer a:hover i {
  opacity: 1;
  color: #000;
}

#tech h1 {
  font-size: 60px;
  margin-bottom: 40px;
}

#tech .tech-icons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
  padding: 0 20px;
}

#tech a {
  text-decoration: none;
  color: inherit;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 60px;
  height: 60px;
  transition: transform 0.3s ease;
}

#tech i {
  font-size: 50px;
  line-height: 50px;
  text-align: center;
  transition: color 0.3s ease;
}

#tech img {
  height: 60px;
  width: auto;
}

#tech .hover-icon {
  display: none;
}

#tech a:hover .hover-icon {
  display: inline-block;
}

#tech a:hover i:has(+ .hover-icon) {
  display: none;
}

/* Fallback if :has is not supported or simpler approach: 
   Since we know which ones have hover-icon, we can just hide 'i' when 'hover-icon' is displayed.
   However, we need to target the specific 'i' that is a sibling of 'hover-icon'.
   Basically: When hovering 'a', if it contains '.hover-icon', hide 'i'.
*/
#tech a:hover .hover-icon ~ i {
  display: none;
  /* This won't work because i is usually before img */
}

/* Correct approach */
#tech a:hover i {
  /* We can't just hide all i because some don't have hover-icon replacements (e.g. html).
       But wait, the user said "For flutter, replace it... For Linux... For dart...". 
       So ONLY these have the swap. The others just change color.
       
       So we need a way to say: IF the anchor has a .hover-icon child, THEN hide the i child on hover.
    */
}

#tech a:hover {
  transform: translateY(-10px);
}

/* Hover colors */
#tech a:hover .fa-html5 {
  color: #e34f26;
}

#tech a:hover .fa-css3-alt {
  color: #1572b6;
}

#tech a:hover .fa-js {
  color: #f7df1e;
}

#tech a:hover .fa-node-js {
  color: #339933;
}

#tech a:hover .fa-android {
  color: #3ddc84;
}

#tech a:hover .fa-ubuntu {
  color: #e95420;
}

#tech a:hover .fa-raspberry-pi {
  color: #c51a4a;
}

#tech a:hover .fa-git-alt {
  color: #f05032;
}

#tech a:hover .fa-github {
  color: #6e5494;
}

#tech {
  margin-bottom: 200px;
  text-align: center;
}

#starwars {
  position: relative;
  border-radius: 60px;
  height: 50vh;
  width: 50vw;
  background-image: image-set("/images/stars.webp");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-color: transparent;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-left: 0;
  gap: 20px;
}

#starwars img {
  position: relative;
  width: clamp(120px, 20vw, 320px);
  height: auto;
  transition: transform 0.3s ease;
}

#starwars img:hover {
  transform: scale(1.1);
}

#nowadays-title {
  font-size: 60px;
  margin-bottom: 10px;
  text-align: center;
  font-family: "Gabarito", sans-serif;
}

.personal-note {
  text-align: center;
  margin: 0 auto 40px auto;
  opacity: 0.8;
  width: 90vw;
  max-width: 600px;
}

/* Watched Before Section */
#watched-before {
  width: 50vw;
  margin: 60px auto 100px auto;
  font-family: "Gabarito", sans-serif;
}

#watched-before summary {
  list-style: none;
  /* Hide standard arrow */
  cursor: pointer;
  font-size: 24px;
  padding: 20px 30px;
  background: #f5f5f5;
  border-radius: 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all 0.3s ease;
  border: 1px solid #e0e0e0;
}

#watched-before summary::-webkit-details-marker {
  display: none;
}

#watched-before summary:hover {
  background: #eaeaea;
  transform: scale(1.02);
}

#watched-before summary::after {
  content: "+";
  font-size: 28px;
  font-weight: 300;
  transition: transform 0.3s ease;
}

#watched-before details[open] summary {
  border-radius: 30px 30px 0 0;
  background: #191717;
  color: #fff;
  border-color: #000;
}

#watched-before details[open] summary::after {
  transform: rotate(45deg);
}

.watched-content {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-top: none;
  border-radius: 0 0 30px 30px;
  padding: 30px;
  animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.watched-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-bottom: 20px;
}

.watched-item h3 {
  margin: 0 0 10px 0;
  font-size: 18px;
  opacity: 0.6;
}

.watched-item p {
  margin: 0;
  font-family: "Inter", sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

.watched-footer {
  text-align: center;
  font-family: "Playfair Display", serif;
  font-style: italic;
  opacity: 1;
  color: #515151;
  margin-top: 20px;
}

/* iPad ahh optimizations */
@media (max-width: 1400px) {
  #main2 {
    padding: 0px 50px;
    align-items: flex-start;
  }

  #sec2 {
    margin-right: 30px;
    justify-content: flex-start;
    min-height: auto;
  }

  .project {
    width: 95vw;
    gap: 30px;
    padding: 30px;
  }
}

/* phone ahh optimizations */
@media (max-width: 639px) {
  html,
  body {
    overflow-x: hidden;
    max-width: 100vw;
  }

  #sec1 h1,
  #nikaspin {
    font-size: 60px;
  }

  #sec1 {
    padding-left: 18px;
  }

  #main2 {
    flex-direction: column;
    gap: 40px;
    padding: 40px 20px;
    align-items: center;
  }

  .social-links {
    justify-content: center;
  }

  .btnContainer {
    width: 100%;
  }

  #tech h1 {
    font-size: 50px;
  }

  #tech i {
    font-size: 35px;
  }

  #tech img {
    height: 35px;
  }

  #projectitle,
  #nowadays-title {
    font-size: 50px;
    padding-bottom: 10px;
  }

  #projects p {
    font-size: 18px;
    padding: 0px 8px;
  }

  #projects {
    height: auto;
    padding: 40px 12px 200px 12px;
  }

  #sec2 {
    align-items: center;
    text-align: center;
    margin-right: 0px;
  }

  #sec2 p {
    text-align: center;
  }

  .project {
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
    justify-content: center;
    height: auto;
    width: auto;
    gap: 0px;
    padding: 12px;
  }

  .project img {
    height: 200px;
    width: auto;
    border-radius: 12px;
  }

  .project h1 {
    font-size: 30px;
    width: 100%;
    text-align: center;
  }

  .inProject {
    width: 100%;
    display: block;
    text-align: center;
  }

  .reverse {
    flex-direction: column;
  }

  #starwars {
    width: 90vw;
    height: 25vh;
    border-radius: 30px;
    padding-left: 0px;
    align-items: center;
  }

  #starwars img {
    width: 40vw;
  }

  /* Watched Before Mobile */
  #watched-before {
    width: 90vw;
  }

  #watched-before summary {
    font-size: 18px;
    padding: 15px 20px;
  }
}

/* Scroll Reveal Animation Classes */
.reveal {
  opacity: 0;
  transform: translateY(50px);
  transition: all 0.8s ease-out;
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

/* Add staggered delays if needed */
.delay-100 {
  transition-delay: 0.1s;
}

.delay-200 {
  transition-delay: 0.2s;
}

.delay-300 {
  transition-delay: 0.3s;
}

/* batimation */
#loader-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

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

#batman-logo {
  width: 180px;
  /* Your requested width */
  height: auto;
  margin-bottom: 25px;
  display: block;
  animation: batBlink 1.5s infinite ease-in-out;
}

@keyframes batBlink {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.1;
  }
}

.progress-container {
  width: 120px;
  height: 12px;
  /* Your requested height */
  background: #ffffff;
  border-radius: 20px;
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid #000000;
  /* Your requested border */
}

#progress-bar {
  width: 0%;
  height: 100%;
  background: #000000;
  transition: width 0.3s ease-out;
  /* Snappy, real-time feel */
}

/* Extra Projects Section */
#extraProjects {
  text-align: center;
  padding: 0px 20px 150px 20px;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
}

#extraProjects h1 {
  font-size: 60px;
  margin-bottom: 50px;
  font-family: "Gabarito", sans-serif;
}

.extra-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
  padding: 0 40px;
}

.extra-card {
  background: #fff;
  border: 1px solid #000;
  border-radius: 20px;
  padding: 30px;
  text-align: left;
  text-decoration: none;
  color: inherit;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

.extra-card:hover {
  transform: translateY(-5px);
  box-shadow: 8px 8px 0px rgba(0, 0, 0, 1);
}

.extra-card h2 {
  font-family: "Gabarito", sans-serif;
  font-size: 28px;
  margin: 0 0 15px 0;
}

.extra-card p {
  font-family: "Inter", sans-serif;
  font-size: 18px;
  opacity: 0.8;
  margin: 0 0 20px 0;
  line-height: 1.5;
}

.card-links {
  font-size: 24px;
  align-self: flex-end;
}

.card-links a {
  color: #313131;
  margin-left: 10px;
  transition: color 0.3s ease;
}

.card-links a:hover {
  color: #000;
}

@media (max-width: 639px) {
  #extraProjects h1 {
    font-size: 50px;
  }

  .extra-grid {
    padding: 0 10px;
    grid-template-columns: 1fr;
  }
}

.social-links {
  display: flex;
  gap: 15px;
  margin-top: 30px;
  flex-wrap: wrap;
}

.social-links a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  border: 1px solid #ddd;
  text-decoration: none;
  transition: all 0.3s ease;
}

.social-links a i {
  color: #313131;
  font-size: 20px;
  transition: color 0.3s ease;
}

.social-links a:hover {
  border-color: #000;
  background-color: #000;
  transform: translateY(-3px);
}

.social-links a:hover i {
  color: #fff;
}

.sl-mobile {
  display: none;
}

@media (max-width: 639px) {
  .sl-desktop {
    display: none !important;
  }

  .sl-mobile {
    display: flex !important;
    justify-content: center;
    width: 100%;
    margin-top: 10px;
  }
}