/* ================================================================
   ANIMASI — PT TRITAMA ADHISTHANA KONSULTAN
   File tambahan: dimuat SETELAH styles.css. Tidak mengubah/menghapus
   aturan yang sudah ada; hanya menambah gerak.

   Isi:
   1. Variabel & easing
   2. Animasi saat halaman dimuat (navbar, hero, statistik)
   3. Latar hero bergerak (grid blueprint + garis pindai)
   4. Reveal saat scroll (dipicu js/animations.js lewat kelas .is-visible)
   5. Efek hover & interaksi (kartu, tombol, form, footer)
   6. Animasi berbasis scroll (progress bar, bayangan navbar, parallax)
   7. Hormat pada "reduce motion" (sudah ditangani styles.css; ditambah di sini)

   Prinsip: semua animasi masuk memakai fill-mode "backwards", jadi
   setelah selesai elemen kembali ke gaya aslinya dan efek hover bawaan
   tetap bekerja. Jika JavaScript mati, semua konten tetap terlihat.
   ================================================================ */

/* ---------- 1. VARIABEL ---------- */
:root{
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-soft: cubic-bezier(.4, 0, .2, 1);
  --glow: rgba(255, 154, 23, .45);
}

/* ---------- KEYFRAMES ---------- */
@keyframes fade-up{
  from{ opacity:0; transform: translate3d(0, 36px, 0); }
  to{   opacity:1; transform: translate3d(0, 0, 0); }
}
@keyframes fade-left{
  from{ opacity:0; transform: translate3d(-56px, 0, 0); }
  to{   opacity:1; transform: translate3d(0, 0, 0); }
}
@keyframes fade-right{
  from{ opacity:0; transform: translate3d(56px, 0, 0); }
  to{   opacity:1; transform: translate3d(0, 0, 0); }
}
@keyframes fade-down{
  from{ opacity:0; transform: translate3d(0, -22px, 0); }
  to{   opacity:1; transform: translate3d(0, 0, 0); }
}
@keyframes pop-in{
  from{ opacity:0; transform: translate3d(0, 18px, 0) scale(.9); }
  to{   opacity:1; transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes wipe-right{
  from{ clip-path: inset(0 100% 0 0); }
  to{   clip-path: inset(0 0 0 0); }
}
@keyframes headline-rise{
  from{ clip-path: inset(0 0 100% 0); transform: translate3d(0, 42%, 0); }
  to{   clip-path: inset(0 0 -20% 0); transform: translate3d(0, 0, 0); }
}
@keyframes line-grow{
  from{ transform: scaleX(0); }
  to{   transform: scaleX(1); }
}
@keyframes dim-draw{
  from{ transform: translateX(-50%) scaleX(0); }
  to{   transform: translateX(-50%) scaleX(1); }
}
@keyframes draw-stroke{
  from{ stroke-dashoffset: 1000; }
  to{   stroke-dashoffset: 0; }
}
@keyframes grid-drift{
  from{ background-position: 0 0, 0 0; }
  to{   background-position: 36px 36px, 36px 36px; }
}
@keyframes scan-line{
  from{ background-position: 0 130%; }
  to{   background-position: 0 -30%; }
}
@keyframes breathe{
  0%, 100%{ opacity:.55; transform: scale(1); }
  50%{      opacity:1;   transform: scale(1.06); }
}
@keyframes float-y{
  0%, 100%{ transform: translate3d(0, 0, 0); }
  50%{      transform: translate3d(0, -9px, 0); }
}
@keyframes cta-pulse{
  0%{   box-shadow: 0 0 0 0 var(--glow); }
  70%{  box-shadow: 0 0 0 18px rgba(255, 154, 23, 0); }
  100%{ box-shadow: 0 0 0 0 rgba(255, 154, 23, 0); }
}
@keyframes dot-ping{
  0%{   box-shadow: 0 0 0 0 var(--glow); }
  70%{  box-shadow: 0 0 0 9px rgba(255, 154, 23, 0); }
  100%{ box-shadow: 0 0 0 0 rgba(255, 154, 23, 0); }
}
@keyframes logo-glow{
  0%, 100%{ filter: drop-shadow(0 0 0 rgba(255, 154, 23, 0)); }
  50%{      filter: drop-shadow(0 0 10px rgba(255, 154, 23, .55)); }
}
@keyframes bracket-in{
  from{ opacity:0; transform: scale(1.08); }
  to{   opacity:1; transform: scale(1); }
}
@keyframes tag-in{
  from{ opacity:0; transform: translate3d(-18px, 0, 0); }
  to{   opacity:1; transform: translate3d(0, 0, 0); }
}
@keyframes shimmer-edge{
  from{ background-position: -200% 0; }
  to{   background-position: 200% 0; }
}

/* ---------- 2. SAAT HALAMAN DIMUAT ---------- */

/* Navbar: logo, menu, tombol masuk berurutan */
.logo{ animation: fade-right .9s var(--ease-out) .05s backwards; }
nav li{ animation: fade-down .7s var(--ease-out) backwards; }
nav li:nth-child(1){ animation-delay: .30s; }
nav li:nth-child(2){ animation-delay: .38s; }
nav li:nth-child(3){ animation-delay: .46s; }
nav li:nth-child(4){ animation-delay: .54s; }
nav li:nth-child(5){ animation-delay: .62s; }
.nav-right > *{ animation: fade-down .7s var(--ease-out) backwards; }
.nav-right > :nth-child(1){ animation-delay: .70s; }
.nav-right > :nth-child(2){ animation-delay: .78s; }
.nav-right > :nth-child(3){ animation-delay: .86s; }

/* Logo header bercahaya halus */
header .logo-profile{ animation: logo-glow 4.5s ease-in-out 1.5s infinite; }

/* Hero: teks naik bertahap */
.hero .eyebrow{ animation: fade-up .8s var(--ease-out) .25s backwards; }
.hero .eyebrow::before{
  transform-origin: left center;
  animation: line-grow .9s var(--ease-out) .55s backwards;
}
.hero h1 > span,
.hero h1 > em{
  display: inline-block;           /* agar baris judul bisa digeser & dipotong */
  animation: headline-rise 1.1s var(--ease-out) backwards;
}
.hero h1 > span{ animation-delay: .45s; }
.hero h1 > em{   animation-delay: .70s; }
.hero p.lead{ animation: fade-up .9s var(--ease-out) .95s backwards; }
.hero-ctas .btn{ animation: fade-up .8s var(--ease-out) backwards; }
.hero-ctas .btn:nth-child(1){ animation-delay: 1.15s; }
.hero-ctas .btn:nth-child(2){ animation-delay: 1.28s; }

/* Tombol CTA utama berdenyut pelan agar menarik mata */
.hero .btn-primary{ animation: fade-up .8s var(--ease-out) 1.15s backwards,
                              cta-pulse 3s ease-out 3s infinite; }

/* Hero: video/gambar tersingkap dari kiri ke kanan, lalu melayang halus */
.hero-figure{
  isolation: isolate;
  animation: wipe-right 1.5s var(--ease-out) .5s backwards,
             float-y 8s ease-in-out 2.2s infinite;
}
/* Siku/crop-mark ala gambar teknik di keempat sudut */
.hero-figure::before{
  content: "";
  position: absolute;
  inset: -12px;
  pointer-events: none;
  z-index: 2;
  --m: rgba(255, 154, 23, .9);
  background:
    linear-gradient(var(--m), var(--m)) top left / 26px 2px no-repeat,
    linear-gradient(var(--m), var(--m)) top left / 2px 26px no-repeat,
    linear-gradient(var(--m), var(--m)) top right / 26px 2px no-repeat,
    linear-gradient(var(--m), var(--m)) top right / 2px 26px no-repeat,
    linear-gradient(var(--m), var(--m)) bottom left / 26px 2px no-repeat,
    linear-gradient(var(--m), var(--m)) bottom left / 2px 26px no-repeat,
    linear-gradient(var(--m), var(--m)) bottom right / 26px 2px no-repeat,
    linear-gradient(var(--m), var(--m)) bottom right / 2px 26px no-repeat;
  animation: bracket-in 1s var(--ease-out) 1.5s backwards;
}
/* Cahaya oranye lembut di belakang video */
.hero-figure::after{
  content: "";
  position: absolute;
  inset: -8% -6%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 154, 23, .22), transparent 70%);
  animation: breathe 6s ease-in-out infinite;
}
.hero-figure .tag{ animation: tag-in .8s var(--ease-out) 1.8s backwards; }

/* Statistik "garis dimensi": garis tergambar, item naik bergantian */
.dim-item{ animation: fade-up .9s var(--ease-out) backwards; }
.dim-item:nth-child(1){ animation-delay: 1.30s; }
.dim-item:nth-child(2){ animation-delay: 1.42s; }
.dim-item:nth-child(3){ animation-delay: 1.54s; }
.dim-item:nth-child(4){ animation-delay: 1.66s; }
.dim-item::before{ animation: dim-draw 1.1s var(--ease-out) 1.6s backwards; }
.dim-num{ transition: transform .35s var(--ease-out), letter-spacing .35s var(--ease-out); }
.dim-item:hover .dim-num{ transform: translateY(-3px); letter-spacing: .04em; }

/* ---------- 3. LATAR HERO BERGERAK ---------- */
.hero::before,
.hero::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
/* Grid blueprint yang bergeser pelan, memudar ke tepi */
.hero::before{
  background-image:
    linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px);
  background-size: 36px 36px, 36px 36px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 70% 35%, #000 10%, transparent 80%);
          mask-image: radial-gradient(ellipse 80% 70% at 70% 35%, #000 10%, transparent 80%);
  animation: grid-drift 24s linear infinite;
}
/* Garis pindai oranye tipis yang menyapu dari bawah ke atas */
.hero::after{
  background: linear-gradient(180deg,
      transparent 0, transparent 49%,
      rgba(255,154,23,.16) 50%,
      transparent 51%, transparent 100%) 0 130% / 100% 400% no-repeat;
  animation: scan-line 11s linear infinite;
}
.hero > .wrap,
.hero > .dim-stats{ position: relative; z-index: 1; }

/* Bagian "Sektor" (latar navy) ikut mendapat grid bergerak */
.industries::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 36px 36px, 36px 36px;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
          mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
  animation: grid-drift 30s linear infinite;
}
.industries > .wrap{ position: relative; z-index: 1; }

/* ---------- 4. REVEAL SAAT SCROLL ----------
   js/animations.js menambahkan kelas .js-anim pada <html>, memberi kelas
   .rv (+ variasi) pada elemen target, lalu .is-visible ketika terlihat. */
.js-anim .rv:not(.is-visible){ opacity: 0; }
.js-anim .rv.is-visible{
  animation: fade-up .95s var(--ease-out) var(--rv-d, 0s) backwards;
}
.js-anim .rv-left.is-visible{  animation-name: fade-left; }
.js-anim .rv-right.is-visible{ animation-name: fade-right; }
.js-anim .rv-pop.is-visible{   animation-name: pop-in; animation-duration: .7s; }
.js-anim .rv-wipe.is-visible{  animation-name: wipe-right; animation-duration: 1.4s; }

/* Garis kecil di "eyebrow" tergambar saat judul bagian muncul */
.js-anim .rv.is-visible.eyebrow::before{
  transform-origin: left center;
  animation: line-grow .9s var(--ease-out) calc(var(--rv-d, 0s) + .25s) backwards;
}

/* Ikon layanan tergambar seperti garis gambar teknik */
.js-anim .service-card.is-visible .icon *{
  stroke-dasharray: 1000;
  stroke-dashoffset: 0;
  animation: draw-stroke 1.8s var(--ease-soft) calc(var(--rv-d, 0s) + .2s) backwards;
}

/* ---------- 5. HOVER & INTERAKSI ---------- */

/* Tombol: kilau menyapu saat disorot */
.btn{ position: relative; overflow: hidden; isolation: isolate; }
.btn::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.32) 50%, transparent 70%);
  transform: translateX(-130%);
  pointer-events: none;
}
.btn:hover::after{ transform: translateX(130%); transition: transform .8s var(--ease-out); }
.btn:active{ transform: translateY(0) scale(.98); }

/* Navbar: garis bawah menu menyala dari kiri */
nav a{ position: relative; }
nav a::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: var(--safety);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .35s var(--ease-out);
}
nav a:hover::after{ transform: scaleX(1); }

/* Kartu layanan: terangkat, garis aksen muncul di bawah, ikon bergerak */
.service-card{
  transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out), background-color .3s ease;
}
.service-card::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: var(--safety);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .5s var(--ease-out);
}
.service-card:hover{
  transform: translateY(-8px);
  box-shadow: 0 22px 40px -18px rgba(22, 39, 61, .35);
  background-color: var(--white);
  z-index: 2;
}
.service-card:hover::after{ transform: scaleX(1); }
.service-card .icon{ transition: transform .5s var(--ease-out); }
.service-card:hover .icon{ transform: translateY(-4px) rotate(-8deg) scale(1.08); }
.service-card h3{ transition: color .3s ease; }
.service-card:hover h3{ color: var(--safety-dark); }
.service-card .idx{ transition: color .3s ease, transform .4s var(--ease-out); }
.service-card:hover .idx{ color: var(--safety); transform: translateY(-2px); }
.service-card ul li{ transition: transform .35s var(--ease-out), color .3s ease; }
.service-card:hover ul li{ transform: translateX(6px); color: var(--navy); }
.service-card:hover ul li:nth-child(2){ transition-delay: .06s; }

/* Pil sektor: titik berdenyut bergantian, terangkat saat disorot */
.ind-pill .dot{ animation: dot-ping 2.6s ease-out infinite; }
.ind-pill:nth-child(2n) .dot{ animation-delay: .5s; }
.ind-pill:nth-child(3n) .dot{ animation-delay: 1.1s; }
.ind-pill:nth-child(5n) .dot{ animation-delay: 1.7s; }
.ind-pill{ transition: all .18s ease, transform .35s var(--ease-out); }
.ind-pill:hover{ transform: translateY(-4px); }

/* Baris keunggulan: latar oranye tipis menyapu, kode bergeser */
.spec-row{
  background-image: linear-gradient(90deg, rgba(255,154,23,.10), rgba(255,154,23,0));
  background-repeat: no-repeat;
  background-size: 0% 100%;
  transition: background-size .7s var(--ease-out);
}
.spec-row:hover{ background-size: 100% 100%; }
.spec-code{ transition: transform .4s var(--ease-out), letter-spacing .4s var(--ease-out); }
.spec-row:hover .spec-code{ transform: translateX(8px); letter-spacing: .12em; }
.spec-row h4{ transition: color .3s ease, transform .4s var(--ease-out); }
.spec-row:hover h4{ color: var(--safety-dark); transform: translateX(4px); }

/* Tentang: foto membesar halus, lencana terangkat */
.about-figure{ overflow: hidden; }
.about-figure img{ transition: transform 1.2s var(--ease-out); }
.about-figure:hover img{ transform: scale(1.05); }
.about-badges span{ transition: transform .35s var(--ease-out), background-color .3s ease, color .3s ease, border-color .3s ease; }
.about-badges span:hover{
  transform: translateY(-3px);
  background-color: var(--navy);
  color: var(--white);
  border-color: var(--navy);
}
.about-quote{ transition: padding-left .5s var(--ease-out), border-color .3s ease; }
.about-quote:hover{ padding-left: 32px; border-color: var(--safety-dark); }

/* Formulir: fokus menyala, label berubah warna */
.field label{ transition: color .3s ease, transform .3s var(--ease-out); }
.field:focus-within label{ color: var(--safety-dark); transform: translateX(3px); }
.field input, .field select, .field textarea{
  transition: border-color .25s ease, box-shadow .3s ease, transform .3s var(--ease-out);
}
.field input:focus, .field select:focus, .field textarea:focus{
  box-shadow: 0 0 0 4px rgba(255,154,23,.18);
  transform: translateY(-1px);
}

/* Blok kontak: label bergeser saat disorot */
.cinfo-block{ transition: transform .4s var(--ease-out); }
.cinfo-block:hover{ transform: translateX(6px); }

/* Footer: garis bawah tautan menyala, kolom terangkat sedikit */
footer ul li a{ position: relative; display: inline-block; transition: transform .3s var(--ease-out), color .2s ease; }
footer ul li a::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1px;
  background: var(--safety);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .35s var(--ease-out);
}
footer ul li a:hover{ transform: translateX(4px); }
footer ul li a:hover::after{ transform: scaleX(1); }

/* ---------- 6. ANIMASI BERBASIS SCROLL (browser modern) ---------- */
@supports (animation-timeline: scroll()){

  @keyframes read-progress{
    from{ transform: scaleX(0); }
    to{   transform: scaleX(1); }
  }
  @keyframes header-scrolled{
    from{ box-shadow: 0 0 0 rgba(0,0,0,0); }
    to{   box-shadow: 0 12px 30px -14px rgba(0,0,0,.55); background: rgba(20,24,29,.99); }
  }
  @keyframes img-parallax{
    from{ transform: scale(1.16) translateY(3%); }
    to{   transform: scale(1)    translateY(-3%); }
  }
  @keyframes hero-fade-out{
    from{ opacity:1; transform: translateY(0); }
    to{   opacity:.15; transform: translateY(-40px); }
  }

  /* Bilah progres membaca di tepi atas */
  body::before{
    content: "";
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, var(--safety-dark), var(--safety), #ffd089);
    transform: scaleX(0);
    transform-origin: left center;
    z-index: 200;
    pointer-events: none;
    animation: read-progress linear both;
    animation-timeline: scroll(root);
  }

  /* Bayangan navbar muncul begitu halaman digulir */
  header{
    animation: header-scrolled linear both;
    animation-timeline: scroll(root);
    animation-range: 0 140px;
  }

  /* Foto "Tentang" bergeser pelan mengikuti scroll (parallax) */
  .about-figure img{
    animation: img-parallax linear both;
    animation-timeline: view();
    animation-range: entry 0% exit 100%;
  }
  .about-figure:hover img{ animation: none; transform: scale(1.05); }

  /* Teks hero memudar halus saat digulir ke bawah */
  .hero-inner > div:first-child{
    animation: hero-fade-out linear both;
    animation-timeline: view();
    animation-range: exit 0% exit 70%;
  }
}

/* ---------- 7. REDUCE MOTION ----------
   styles.css sudah mematikan animation & transition. Di sini kita pastikan
   elemen reveal selalu terlihat dan dekorasi bergerak dihilangkan. */
@media (prefers-reduced-motion: reduce){
  .js-anim .rv:not(.is-visible){ opacity: 1 !important; }
  .hero::before, .hero::after, .industries::before{ animation: none !important; }
  body::before{ display: none; }
}