/* 
 * Animations Stylesheet
 * Author: C Siva Kumar
 * Version: 2.0
 * Optimized for performance and maintainability
 */

/* ======================================
 * 1. Web Development Loader Animation
 * ====================================== */
.loader-img {
  display: block;
  width: 100%;
  will-change: transform;
  /* optimizing for potential transforms */
}

@keyframes square-animation {

  0%,
  10.5% {
    left: 0;
    top: 0;
  }

  12.5%,
  23% {
    left: 32px;
    top: 0;
  }

  25%,
  35.5% {
    left: 64px;
    top: 0;
  }

  37.5%,
  48% {
    left: 64px;
    top: 32px;
  }

  50%,
  60.5% {
    left: 32px;
    top: 32px;
  }

  62.5%,
  73% {
    left: 32px;
    top: 64px;
  }

  75%,
  85.5% {
    left: 0;
    top: 64px;
  }

  87.5%,
  98% {
    left: 0;
    top: 32px;
  }

  100% {
    left: 0;
    top: 0;
  }
}

.loader {
  margin: 0 auto;
  position: relative;
  width: 96px;
  height: 96px;
  transform: rotate(45deg);
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.loader-square {
  position: absolute;
  top: 0;
  left: 0;
  width: 32px;
  height: 32px;
  margin: 2px;
  border-radius: 0;
  background-size: cover;
  background-position: center;
  animation: square-animation 10s ease-in-out infinite both;
  will-change: left, top;
}

.loader-square:nth-of-type(0) {
  animation-delay: 0s;
}

.loader-square:nth-of-type(1) {
  animation-delay: -1.4285714286s;
}

.loader-square:nth-of-type(2) {
  animation-delay: -2.8571428571s;
}

.loader-square:nth-of-type(3) {
  animation-delay: -4.2857142857s;
}

.loader-square:nth-of-type(4) {
  animation-delay: -5.7142857143s;
}

.loader-square:nth-of-type(5) {
  animation-delay: -7.1428571429s;
}

.loader-square:nth-of-type(6) {
  animation-delay: -8.5714285714s;
}

.loader-square:nth-of-type(7) {
  animation-delay: -10s;
}

/* ======================================
 * 2. Tech Enthusiast Animation
 * ====================================== */
/* Container for tech animation to enforce layout height */
.container-tech {
  position: relative;
  height: 150px;
  /* Space for the animation */
  width: 100%;
}

.loader-tech {
  position: absolute;
  top: 50%;
  /* Center vertically in the container */
  left: 50%;
  z-index: 10;
  width: 160px;
  height: 100px;
  margin-left: -80px;
  margin-top: -50px;
  border-radius: 5px;
  background: #1e3f57;
  animation: dot1_ 3s cubic-bezier(0.55, 0.3, 0.24, 0.99) infinite;
  will-change: width, height, margin;
}

.loader-tech:nth-child(2) {
  z-index: 11;
  width: 150px;
  height: 90px;
  margin-top: -45px;
  margin-left: -75px;
  border-radius: 3px;
  background: #3c517d;
  animation-name: dot2_;
}

.loader-tech:nth-child(3) {
  z-index: 12;
  width: 40px;
  height: 20px;
  margin-top: 50px;
  margin-left: -20px;
  border-radius: 0 0 5px 5px;
  background: #6bb2cd;
  animation-name: dot3_;
}

@keyframes dot1_ {

  3%,
  97% {
    width: 160px;
    height: 100px;
    margin-top: -50px;
    margin-left: -80px;
  }

  30%,
  36% {
    width: 80px;
    height: 120px;
    margin-top: -60px;
    margin-left: -40px;
  }

  63%,
  69% {
    width: 40px;
    height: 80px;
    margin-top: -40px;
    margin-left: -20px;
  }
}

@keyframes dot2_ {

  3%,
  97% {
    height: 90px;
    width: 150px;
    margin-left: -75px;
    margin-top: -45px;
  }

  30%,
  36% {
    width: 70px;
    height: 96px;
    margin-left: -35px;
    margin-top: -48px;
  }

  63%,
  69% {
    width: 32px;
    height: 60px;
    margin-left: -16px;
    margin-top: -30px;
  }
}

@keyframes dot3_ {

  3%,
  97% {
    height: 20px;
    width: 40px;
    margin-left: -20px;
    margin-top: 50px;
  }

  30%,
  36% {
    width: 8px;
    height: 8px;
    margin-left: -5px;
    margin-top: 49px;
    border-radius: 8px;
  }

  63%,
  69% {
    width: 16px;
    height: 4px;
    margin-left: -8px;
    margin-top: -37px;
    border-radius: 10px;
  }
}

/* ======================================
 * 3. Continuous Learning Animation
 * ====================================== */
.loader-continuous {
  --background: linear-gradient(135deg, #23C4F8, #275EFE);
  --shadow: rgba(39, 94, 254, 0.28);
  --text: #6C7486;
  --page: rgba(255, 255, 255, 0.36);
  --page-fold: rgba(255, 255, 255, 0.52);
  --duration: 3s;
  width: 200px;
  height: 140px;
  position: relative;
  margin: 0 auto;
}

.loader-continuous:before,
.loader-continuous:after {
  --r: -6deg;
  content: "";
  position: absolute;
  bottom: 8px;
  width: 120px;
  top: 80%;
  box-shadow: 0 16px 12px var(--shadow);
  transform: rotate(var(--r));
}

.loader-continuous:before {
  left: 4px;
}

.loader-continuous:after {
  --r: 6deg;
  right: 4px;
}

.loader-continuous div {
  width: 100%;
  height: 100%;
  border-radius: 13px;
  position: relative;
  z-index: 1;
  perspective: 600px;
  box-shadow: 0 4px 6px var(--shadow);
  background-image: var(--background);
}

.loader-continuous div ul {
  margin: 0;
  padding: 0;
  list-style: none;
  position: relative;
}

.loader-continuous div ul li {
  --r: 180deg;
  --o: 0;
  --c: var(--page);
  position: absolute;
  top: 10px;
  left: 10px;
  transform-origin: 100% 50%;
  color: var(--c);
  opacity: var(--o);
  transform: rotateY(var(--r));
  animation: var(--duration) ease infinite;
}

.loader-continuous div ul li:nth-child(2) {
  --c: var(--page-fold);
  animation-name: page-2;
}

.loader-continuous div ul li:nth-child(3) {
  --c: var(--page-fold);
  animation-name: page-3;
}

.loader-continuous div ul li:nth-child(4) {
  --c: var(--page-fold);
  animation-name: page-4;
}

.loader-continuous div ul li:nth-child(5) {
  --c: var(--page-fold);
  animation-name: page-5;
}

.loader-continuous div ul li svg {
  width: 90px;
  height: 120px;
  display: block;
}

.loader-continuous div ul li:first-child {
  --r: 0deg;
  --o: 1;
}

.loader-continuous div ul li:last-child {
  --o: 1;
}

.loader-continuous span {
  display: block;
  left: 0;
  right: 0;
  top: 100%;
  margin-top: 20px;
  text-align: center;
  color: var(--text);
}

@keyframes page-2 {
  0% {
    transform: rotateY(180deg);
    opacity: 0;
  }

  20% {
    opacity: 1;
  }

  35%,
  100% {
    opacity: 0;
  }

  50%,
  100% {
    transform: rotateY(0deg);
  }
}

@keyframes page-3 {
  15% {
    transform: rotateY(180deg);
    opacity: 0;
  }

  35% {
    opacity: 1;
  }

  50%,
  100% {
    opacity: 0;
  }

  65%,
  100% {
    transform: rotateY(0deg);
  }
}

@keyframes page-4 {
  30% {
    transform: rotateY(180deg);
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  65%,
  100% {
    opacity: 0;
  }

  80%,
  100% {
    transform: rotateY(0deg);
  }
}

@keyframes page-5 {
  45% {
    transform: rotateY(180deg);
    opacity: 0;
  }

  65% {
    opacity: 1;
  }

  80%,
  100% {
    opacity: 0;
  }

  95%,
  100% {
    transform: rotateY(0deg);
  }
}

/* ======================================
 * 4. Problem Solving Mindset Animation
 * ====================================== */
.socket {
  width: 200px;
  height: 200px;
  position: relative;
  left: auto;
  margin: 0 auto;
  top: auto;
  margin-top: 20px;
}

.hex-brick {
  background: #0e29f5;
  width: 30px;
  height: 17px;
  position: absolute;
  top: 5px;
  animation: fade 2s infinite;
}

.socket .h2 {
  transform: rotate(60deg);
}

.socket .h3 {
  transform: rotate(-60deg);
}

.gel {
  height: 30px;
  width: 30px;
  transition: all 0.9s;
  position: absolute;
  top: 50%;
  left: 50%;
}

.center-gel {
  margin-left: -15px;
  margin-top: -15px;
  animation: pulse 2s infinite;
}

.c1 {
  content: "aa";
  margin-left: -47px;
  margin-top: -15px;
}

.c2 {
  margin-left: -31px;
  margin-top: -43px;
}

.c3 {
  margin-left: 1px;
  margin-top: -43px;
}

.c4 {
  margin-left: 17px;
  margin-top: -15px;
}

.c5 {
  margin-left: -31px;
  margin-top: 13px;
}

.c6 {
  margin-left: 1px;
  margin-top: 13px;
}

.c7 {
  margin-left: -63px;
  margin-top: -43px;
}

.c8 {
  margin-left: 33px;
  margin-top: -43px;
}

.c9 {
  margin-left: -15px;
  margin-top: 41px;
}

.c10 {
  margin-left: -63px;
  margin-top: 13px;
}

.c11 {
  margin-left: 33px;
  margin-top: 13px;
}

.c12 {
  margin-left: -15px;
  margin-top: -71px;
}

.c13 {
  margin-left: -47px;
  margin-top: -71px;
}

.c14 {
  margin-left: 17px;
  margin-top: -71px;
}

.c15 {
  margin-left: -47px;
  margin-top: 41px;
}

.c16 {
  margin-left: 17px;
  margin-top: 41px;
}

.c17 {
  margin-left: -79px;
  margin-top: -15px;
}

.c18 {
  margin-left: 49px;
  margin-top: -15px;
}

.c19 {
  margin-left: -63px;
  margin-top: -99px;
}

.c20 {
  margin-left: 33px;
  margin-top: -99px;
}

.c21 {
  margin-left: 1px;
  margin-top: -99px;
}

.c22 {
  margin-left: -31px;
  margin-top: -99px;
}

.c23 {
  margin-left: -63px;
  margin-top: 69px;
}

.c24 {
  margin-left: 33px;
  margin-top: 69px;
}

.c25 {
  margin-left: 1px;
  margin-top: 69px;
}

.c26 {
  margin-left: -31px;
  margin-top: 69px;
}

.c27 {
  margin-left: -79px;
  margin-top: -15px;
}

.c28 {
  margin-left: -95px;
  margin-top: -43px;
}

.c29 {
  margin-left: -95px;
  margin-top: 13px;
}

.c30 {
  margin-left: 49px;
  margin-top: 41px;
}

.c31 {
  margin-left: -79px;
  margin-top: -71px;
}

.c32 {
  margin-left: -111px;
  margin-top: -15px;
}

.c33 {
  margin-left: 65px;
  margin-top: -43px;
}

.c34 {
  margin-left: 65px;
  margin-top: 13px;
}

.c35 {
  margin-left: -79px;
  margin-top: 41px;
}

.c36 {
  margin-left: 49px;
  margin-top: -71px;
}

.c37 {
  margin-left: 81px;
  margin-top: -15px;
}

.r1 {
  animation-name: pulse;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-delay: .5s;
  -webkit-animation-name: pulse;
  -webkit-animation-duration: 5s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-delay: .5s;
}

.r2 {
  animation-name: pulse;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-delay: .5s;
  -webkit-animation-name: pulse;
  -webkit-animation-duration: 5s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-delay: .5s;
}

.r3 {
  animation-name: pulse;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-delay: .3s;
  -webkit-animation-name: pulse;
  -webkit-animation-duration: 3s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-delay: .3s;
}

.r1>.hex-brick {
  animation-name: fade;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-delay: .5s;
  -webkit-animation-name: fade;
  -webkit-animation-duration: 5s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-delay: .5s;
}

.r2>.hex-brick {
  animation-name: fade;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-delay: .5s;
  -webkit-animation-name: fade;
  -webkit-animation-duration: 5s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-delay: .5s;
}

.r3>.hex-brick {
  animation-name: fade;
  animation-duration: 6s;
  animation-iteration-count: infinite;
  animation-delay: .6s;
  -webkit-animation-name: fade;
  -webkit-animation-duration: 6s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-delay: .6s;
}

@keyframes pulse {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  50% {
    -webkit-transform: scale(0.01);
    transform: scale(0.01);
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes fade {
  0% {
    background: #052eff;
  }

  50% {
    background: #424fca;
  }

  100% {
    background: #0856ff;
  }
}

@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  50% {
    -webkit-transform: scale(0.01);
    transform: scale(0.01);
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@-webkit-keyframes fade {
  0% {
    background: #ABF8FF;
  }

  50% {
    background: #389CA6;
  }

  100% {
    background: #ABF8FF;
  }
}

/* For Creative exploration */
.loader-creative {
  margin: 0 auto;
  position: relative;
  width: 216px;
  display: flex;
  justify-content: space-between;

}

.loader-creative::after,
.loader-creative::before {
  content: "";
  display: inline-block;
  width: 96px;
  height: 96px;
  background-color: #e5e8df;
  background-image: radial-gradient(circle 20px, #060606 100%, transparent 0);
  background-repeat: no-repeat;
  border-radius: 50%;
  animation: eyeMove 10s infinite, blink 10s infinite;
}

@keyframes eyeMove {

  0%,
  10% {
    background-position: 0px 0px;

  }

  13%,
  40% {
    background-position: -30px 0px;
  }

  43%,
  70% {
    background-position: 30px 0px;
  }

  73%,
  90% {
    background-position: 0px 30px;
  }

  93%,
  100% {
    background-position: 0px 0px;

  }
}

@keyframes blink {

  0%,
  10%,
  12%,
  20%,
  22%,
  40%,
  42%,
  60%,
  62%,
  70%,
  72%,
  90%,
  92%,
  98%,
  100% {
    height: 96px;
  }

  11%,
  21%,
  41%,
  61%,
  71%,
  91%,
  99% {
    height: 36px;
  }
}

/* For active lifestyle */
.loader-lifestyle {
  width: 125px;
  height: 65px;
  display: block;
  margin: 40px auto;
  background-image: linear-gradient(#ff8a00 50px, transparent 0),
    linear-gradient(#5dcf70 50px, transparent 0),
    linear-gradient(#00c4ff 50px, transparent 0),
    linear-gradient(#ff7cbf 50px, transparent 0),
    radial-gradient(circle 14px, #ffa400 100%, transparent 0);
  background-size: 48px 15px, 15px 35px, 15px 35px, 25px 15px, 28px 28px;
  background-position: 25px 5px, 58px 20px, 25px 17px, 2px 37px, 76px 0px;
  background-repeat: no-repeat;
  position: relative;
  transform: rotate(-45deg);
  box-sizing: border-box;
}

/* Cycle Wheels & Body */
.loader-lifestyle::after,
.loader-lifestyle::before {
  content: '';
  position: absolute;
  width: 65px;
  height: 65px;
  border: 6px solid #0f38dd;
  border-radius: 50%;
  left: -45px;
  top: -10px;
  background-repeat: no-repeat;
  background-image: linear-gradient(#ff4444 64px, transparent 0),
    linear-gradient(#d4fc00 66px, transparent 0),
    radial-gradient(circle 4px, #0080ff 100%, transparent 0);
  background-size: 40px 1px, 1px 40px, 8px 8px;
  background-position: center center;
  box-sizing: border-box;
  animation: bike 0.4s linear infinite;
}

.loader-lifestyle::before {
  left: 25px;
  top: 60px;
}

@keyframes bike {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@media screen and (max-width:992px) {
  .interest-card {
    height: 100%;
  }

  .interest-card.creative {
    margin: 0;
    min-height: 50vh;
  }

  .problemsolving {
    min-height: 60vh;
  }

}

@media screen and (max-width:768px) {
  .interest-card {
    flex-basis: 100%;
    max-width: 100%;
    height: 55vh;
  }


}

@media (max-width: 575px) {
  .interest-card {
    height: max-content;
    /* min-height:; */
  }

  .techenthutiash {
    min-height: 65vh;
  }

  .interest-card.creative {
    min-height: 45vh;
  }

  .problemsolving {
    min-height: 55vh;
  }

  .interest-card.problemsolving {
    min-height: 55vh;
  }

  /* Margins handled by auto centering now */

  #passionandint {
    padding: 0px;
  }
}

@media (max-width:400px) {
  /* Height handled by content flow */
}