/* ===========================================================
   FILE: css/bagian-hero.css
   ISI  : Hero Banner JTK POLMED + animasi modern
   =========================================================== */

/* ---------- HERO / BANNER ---------- */

.hero {
  position: relative;
  min-height: 410px;
  overflow: hidden;
  isolation: isolate;
  color: #fff;

  background:
    linear-gradient(
      100deg,
      rgba(3, 20, 48, .97) 0%,
      rgba(4, 39, 78, .88) 44%,
      rgba(4, 39, 78, .42) 100%
    ),
    url("../images/polmed-pesawat.jpg") center / cover no-repeat;

  background-color: #031a3c;
}

.heroin {
  max-width: 1240px;
  margin: auto;
  padding: 70px 28px 78px;
  position: relative;
  z-index: 2;
}

/* ---------- EFEK CAHAYA LATAR ---------- */

.hero-fx {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;

  transform: translate3d(
    var(--fx, 0px),
    var(--fy, 0px),
    0
  );

  transition: transform .35s ease-out;
}

.hero-fx .orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(75px);
  will-change: transform;

  animation: heroFloat 15s ease-in-out infinite;
}

.hero-fx .o1 {
  width: 300px;
  height: 300px;
  background: #1684ff;
  right: 5%;
  top: -90px;
  opacity: .42;
}

.hero-fx .o2 {
  width: 250px;
  height: 250px;
  background: #54d8ff;
  right: 32%;
  bottom: -120px;
  opacity: .27;
  animation-delay: -5s;
}

.hero-fx .o3 {
  width: 190px;
  height: 190px;
  background: #7558ff;
  right: 1%;
  bottom: 5%;
  opacity: .24;
  animation-delay: -9s;
}

/* Partikel bercahaya */

.hero-fx .pt {
  position: absolute;
  bottom: -20px;
  left: var(--x);

  width: var(--s);
  height: var(--s);

  border-radius: 50%;
  background: rgba(175, 230, 255, .9);

  box-shadow:
    0 0 10px 2px rgba(120, 200, 255, .5);

  opacity: 0;

  animation:
    heroRise var(--d) linear var(--w) infinite;
}

/* ---------- LABEL JURUSAN ---------- */

.hero .eyebrow {
  display: inline-block;

  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 3px;
  font-weight: 800;

  color: #a9dfff;

  animation:
    heroSpread 1s cubic-bezier(.2, .7, .2, 1) both;
}

/* ---------- JUDUL UTAMA ---------- */

.hero h1 {
  max-width: 650px;

  margin: 17px 0 12px;

  font-size: clamp(36px, 4.5vw, 62px);
  line-height: 1.08;
  letter-spacing: -1.8px;
  font-weight: 800;

  text-wrap: balance;

  transition: transform .3s ease-out;

  transform: translate3d(
    var(--px, 0px),
    var(--py, 0px),
    0
  );
}

/* Baris judul */

.hero h1 .line {
  display: inline-block;
}

.hero h1 .l2 {
  color: #e6f2ff;
}

/* Warna khusus kata Informatika */

.hero h1 .shine {
  display: inline-block;
  color: #78d8ff;
  text-shadow: 0 0 22px rgba(67, 184, 255, .15);
}

/* Huruf tetap terlihat jika JavaScript tidak aktif */

.hero h1 .ch {
  display: inline-block;
  opacity: 1;
}

/* Efek huruf satu per satu hanya ketika JS mengaktifkannya */

.hero.js-on h1 .ch {
  opacity: 0;
}

.hero.js-on h1 .ch.on {
  opacity: 1;

  animation:
    heroPop .55s cubic-bezier(.2, 1.7, .4, 1) both;
}

/* Warna dinamis pada kata Informatika */

.hero h1 .shine .ch.on {
  animation:
    heroHue 7s linear calc(var(--i, 0) * -.35s) infinite,
    heroPop .55s cubic-bezier(.2, 1.7, .4, 1) both;
}

/* Gerakan lembut setelah judul selesai */

.hero h1.selesai .shine {
  animation: heroGlow 3.5s ease-in-out infinite;
}

.hero h1.selesai .shine .ch.on {
  animation:
    heroHue 7s linear calc(var(--i, 0) * -.35s) infinite,
    heroWave 3s ease-in-out calc(var(--i, 0) * .1s) infinite;
}

/* Kursor animasi */

.hero h1 .tcur {
  display: inline-block;
  position: relative;
  width: 0;
}

.hero h1 .tcur::after {
  content: "";

  position: absolute;
  left: 3px;
  top: .1em;

  width: 3px;
  height: .85em;

  border-radius: 3px;

  background: #ffd166;

  box-shadow:
    0 0 12px 2px rgba(255, 209, 102, .65);

  animation: heroBlink .8s steps(1) infinite;
}

/* ---------- NAMA POLITEKNIK ---------- */

.hero h2 {
  position: relative;

  display: table;

  margin: 0 0 17px;
  padding-bottom: 10px;

  font-size: clamp(17px, 2vw, 21px);
  line-height: 1.4;
  font-weight: 750;

  color: #fff;
}

/* Garis dekoratif di bawah nama kampus */

.hero h2::after {
  content: "";

  position: absolute;
  left: 0;
  bottom: 0;

  width: 0;
  height: 3px;

  border-radius: 10px;

  background: linear-gradient(
    90deg,
    #ffd166,
    #61d5ff
  );
}

/* ---------- TEKS MENGETIK ---------- */

.hero .typing-line {
  min-height: 25px;

  margin: 0 0 12px;

  font-size: 15px;
  font-weight: 650;

  color: #a9e5ff;
}

.hero .typing-line #heroTyped {
  color: #ffd166;

  text-shadow:
    0 0 12px rgba(255, 209, 102, .35);
}

.hero .typing-line .cursor {
  display: inline-block;

  margin-left: 3px;

  color: #ffd166;

  animation: heroBlink 1s steps(1) infinite;
}

/* ---------- DESKRIPSI ---------- */

.hero p {
  max-width: 500px;

  margin: 0 0 24px;

  font-size: 14px;
  line-height: 1.8;

  color: #d5e6f8;
}

/* ---------- ANIMASI KONTEN MASUK ---------- */

/* Konten tetap terlihat sebelum JS berjalan */

.hero.js-on h2,
.hero.js-on .typing-line,
.hero.js-on .heroin > p:not(.typing-line),
.hero.js-on .actions {
  opacity: 0;
}

.hero.tampil h2 {
  animation: heroUp .7s ease 0s both;
}

.hero.tampil h2::after {
  animation:
    heroLine 1s cubic-bezier(.2, .7, .2, 1) .3s both;
}

.hero.tampil .typing-line {
  animation: heroUp .7s ease .25s both;
}

.hero.tampil .heroin > p:not(.typing-line) {
  animation: heroUp .7s ease .5s both;
}

.hero.tampil .actions {
  animation: heroUp .7s ease .75s both;
}

/* ---------- TOMBOL HERO ---------- */

.hero .actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 13px;
}

.hero .btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  min-height: 45px;
  padding: 12px 20px;

  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 11px;

  color: #fff;
  text-decoration: none;
  font-size: 14px;
  font-weight: 750;

  overflow: hidden;

  transition:
    transform .25s ease,
    box-shadow .25s ease,
    background .25s ease,
    border-color .25s ease;
}

/* Tombol utama */

.hero .btn:first-child {
  background: linear-gradient(
    135deg,
    #0879ee,
    #075cc9
  );

  border-color: rgba(70, 165, 255, .6);

  box-shadow:
    0 7px 22px rgba(0, 100, 230, .2);
}

/* Tombol kedua */

.hero .btn:not(:first-child) {
  background: rgba(255, 255, 255, .07);

  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Hover tombol */

.hero .btn:hover {
  transform: translateY(-3px);

  box-shadow:
    0 12px 28px rgba(0, 110, 255, .32);

  border-color: rgba(255, 255, 255, .55);
}

/* Kilau melintas di tombol */

.hero .btn::after {
  content: "";

  position: absolute;
  top: 0;
  left: -100%;

  width: 50%;
  height: 100%;

  background: linear-gradient(
    100deg,
    transparent,
    rgba(255, 255, 255, .35),
    transparent
  );

  transform: skewX(-20deg);

  animation: heroSweep 5s ease-in-out 2s infinite;

  pointer-events: none;
}

/* ---------- KEYFRAMES ---------- */

@keyframes heroUp {
  from {
    opacity: 0;
    transform: translateY(25px);
  }

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

@keyframes heroPop {
  0% {
    opacity: 0;
    transform: translateY(28px) scale(.65);
  }

  65% {
    opacity: 1;
    transform: translateY(-5px) scale(1.08);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes heroWave {
  0%, 100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-5px);
  }
}

@keyframes heroHue {
  0% {
    color: #63d8ff;
  }

  25% {
    color: #8affc1;
  }

  50% {
    color: #ffe28a;
  }

  75% {
    color: #ffb58c;
  }

  100% {
    color: #63d8ff;
  }
}

@keyframes heroGlow {
  0%, 100% {
    filter: drop-shadow(
      0 0 3px rgba(0, 229, 255, .2)
    );
  }

  50% {
    filter: drop-shadow(
      0 0 13px rgba(100, 210, 255, .45)
    );
  }
}

@keyframes heroSpread {
  from {
    opacity: 0;
    letter-spacing: 10px;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    letter-spacing: 3px;
    transform: translateY(0);
  }
}

@keyframes heroLine {
  from {
    width: 0;
  }

  to {
    width: 90px;
  }
}

@keyframes heroRise {
  0% {
    opacity: 0;
    transform: translateY(0) scale(.6);
  }

  12% {
    opacity: .8;
  }

  100% {
    opacity: 0;
    transform:
      translateY(-480px)
      translateX(var(--dx, 0px))
      scale(1.1);
  }
}

@keyframes heroFloat {
  0%, 100% {
    transform: translate(0, 0) scale(1);
  }

  50% {
    transform: translate(-35px, 25px) scale(1.15);
  }
}

@keyframes heroSweep {
  0%, 65% {
    left: -100%;
  }

  100% {
    left: 150%;
  }
}

@keyframes heroBlink {
  50% {
    opacity: 0;
  }
}

/* ---------- RESPONSIVE TABLET ---------- */

@media (max-width: 850px) {
  .hero {
    min-height: 390px;
  }

  .heroin {
    padding: 58px 28px 68px;
  }

  .hero h1 {
    max-width: 570px;
    font-size: clamp(36px, 6vw, 52px);
  }
}

/* ---------- RESPONSIVE HP ---------- */

@media (max-width: 560px) {
  .hero {
    min-height: 410px;

    background-position: 58% center;
  }

  .heroin {
    padding: 48px 20px 62px;
  }

  .hero .eyebrow {
    font-size: 10px;
    letter-spacing: 2.5px;
  }

  .hero h1 {
    max-width: 100%;

    font-size: clamp(34px, 9vw, 43px);
    line-height: 1.12;
    letter-spacing: -1.3px;
  }

  .hero h2 {
    font-size: 17px;
  }

  .hero p {
    font-size: 13px;
    line-height: 1.7;
  }

  .hero .typing-line {
    font-size: 13px;
  }

  .hero .actions {
    gap: 10px;
  }

  .hero .btn {
    min-height: 43px;
    padding: 11px 15px;
    font-size: 12px;
    border-radius: 9px;
  }

  .hero-fx .orb {
    filter: blur(55px);
  }
}

/* ---------- AKSESIBILITAS ---------- */

@media (prefers-reduced-motion: reduce) {
  .hero *,
  .hero *::before,
  .hero *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }

  .hero h1 .ch {
    opacity: 1 !important;
  }

  .hero.js-on h2,
  .hero.js-on .typing-line,
  .hero.js-on .heroin > p:not(.typing-line),
  .hero.js-on .actions {
    opacity: 1;
  }
}